Hid Time and Chi Picker wc excluded time periods props

CenturyLinkCloud · Dec 22, 2020 · 6a2a85e · 6a2a85e
1 parent ae7d679
commit 6a2a85e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 113 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Components
 #### Added
 * Added: Time picker and Datetime picker components to allow users to enter a time through text input or choose a time from a picker.
+* Added: Date Picker web component now supports <code>resetDate</code> method.
 #### Changed
 * Changed: Modal components with theme `-portal` now align buttons in `chi-modal__footer` to the right (Chi's default) instead of center.
 * Changed: Picker group components with theme `-portal` now include a text color change on hover.

diff --git a/src/custom-elements/docs/docs.json b/src/custom-elements/docs/docs.json
@@ -3226,54 +3226,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "excludedHours",
-          "type": "string",
-          "mutable": false,
-          "attr": "excluded-hours",
-          "reflectToAttr": true,
-          "docs": "To disable specific hours",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "excludedMinutes",
-          "type": "string",
-          "mutable": false,
-          "attr": "excluded-minutes",
-          "reflectToAttr": true,
-          "docs": "To disable specific minutes",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "excludedSeconds",
-          "type": "string",
-          "mutable": false,
-          "attr": "excluded-seconds",
-          "reflectToAttr": true,
-          "docs": "To disable specific seconds",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "format",
           "type": "string",
@@ -3411,54 +3363,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "excludedHours",
-          "type": "string",
-          "mutable": false,
-          "attr": "excluded-hours",
-          "reflectToAttr": true,
-          "docs": "To specify excluded hours.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "excludedMinutes",
-          "type": "string",
-          "mutable": false,
-          "attr": "excluded-minutes",
-          "reflectToAttr": true,
-          "docs": "To specify excluded minutes.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "excludedSeconds",
-          "type": "string",
-          "mutable": false,
-          "attr": "excluded-seconds",
-          "reflectToAttr": true,
-          "docs": "To specify excluded seconds.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "format",
           "type": "string",

diff --git a/src/custom-elements/src/components/time-picker/time-picker.tsx b/src/custom-elements/src/components/time-picker/time-picker.tsx
@@ -28,17 +28,17 @@ export class TimePicker {
   /**
    *  To specify excluded hours.
    */
-  @Prop({ reflect: true }) excludedHours: string;
+  @Prop({ reflect: true }) _excludedHours: string;
 
   /**
    *  To specify excluded minutes.
    */
-  @Prop({ reflect: true }) excludedMinutes: string;
+  @Prop({ reflect: true }) _excludedMinutes: string;
 
   /**
    *  To specify excluded seconds.
    */
-  @Prop({ reflect: true }) excludedSeconds: string;
+  @Prop({ reflect: true }) _excludedSeconds: string;
 
   /**
    *  To define format of Time Picker.
@@ -169,9 +169,9 @@ export class TimePicker {
       >
         <chi-time
           display-seconds={this.displaySeconds}
-          excluded-hours={this.excludedHours}
-          excluded-minutes={this.excludedMinutes}
-          excluded-seconds={this.excludedSeconds}
+          excluded-hours={this._excludedHours}
+          excluded-minutes={this._excludedMinutes}
+          excluded-seconds={this._excludedSeconds}
           format={this.format}
           value={this.value}
         />

diff --git a/src/custom-elements/src/components/time/time.tsx b/src/custom-elements/src/components/time/time.tsx
@@ -38,17 +38,17 @@ export class Time {
   /**
    *  To disable specific hours
    */
-  @Prop({ reflect: true }) excludedHours: string;
+  @Prop({ reflect: true }) _excludedHours: string;
 
   /**
    *  To disable specific minutes
    */
-  @Prop({ reflect: true }) excludedMinutes: string;
+  @Prop({ reflect: true }) _excludedMinutes: string;
 
   /**
    *  To disable specific seconds
    */
-  @Prop({ reflect: true }) excludedSeconds: string;
+  @Prop({ reflect: true }) _excludedSeconds: string;
 
   @Element() el: HTMLElement;
 
@@ -63,26 +63,26 @@ export class Time {
 
   @Watch('excluded-hours')
   updateExcludedHours() {
-    if (this.excludedHours) {
-      this.excludedHours.split(',').map(time => {
+    if (this._excludedHours) {
+      this._excludedHours.split(',').map(time => {
         this.excludedHoursArray.push(time.trim());
       });
     }
   }
 
   @Watch('excluded-minutes')
   updateExcludedMinutes() {
-    if (this.excludedMinutes) {
-      this.excludedMinutes.split(',').map(time => {
+    if (this._excludedMinutes) {
+      this._excludedMinutes.split(',').map(time => {
         this.excludedMinutesArray.push(time.trim());
       });
     }
   }
 
   @Watch('excluded-seconds')
   updateExcludedSeconds() {
-    if (this.excludedSeconds) {
-      this.excludedSeconds.split(',').map(time => {
+    if (this._excludedSeconds) {
+      this._excludedSeconds.split(',').map(time => {
         this.excludedSecondsArray.push(time.trim());
       });
     }

diff --git a/src/website/views/components/date-picker/_examples.pug b/src/website/views/components/date-picker/_examples.pug
@@ -198,8 +198,8 @@ p.-text
         a(href=`#html-datetime`) HTML Blueprint
   #webcomponent-datetime.chi-tabs-panel.-active
     :code(lang="html",style="height:20rem")
-      <chi-label for="date">Date</chi-label>
-      <chi-date-picker id="date"></chi-date-picker>
+      <chi-label for="date-time">Date</chi-label>
+      <chi-date-picker id="date-time" mode="datetime"></chi-date-picker>
   #html-datetime.chi-tabs-panel
 
 h3 Calendar

diff --git a/src/website/views/getting-started/whats-new.pug b/src/website/views/getting-started/whats-new.pug
@@ -13,6 +13,7 @@ script(nomodule='' src='../../js/ce/ux-chi-ce/ux-chi-ce.js')
     h4.-text--h4.-text--bold Added
     ul.-text.-pl--2
       li Added: Time picker and Datetime picker components to allow users to enter a time through text input or choose a time from a picker.
+      li Added: Date Picker web component now supports <code>resetDate</code> method.
     h4.-text--h4.-text--bold Changed
     ul.-text.-pl--2
       li Changed: Modal components with theme <code>-portal</code> now align buttons in <code>chi-modal__footer</code> to the right (Chi's default) instead of center.