@six-group/ui-library 0.0.0-insider.98c4058 → 0.0.0-insider.99e1a07

package/dist/collection/components/six-tile/six-tile.js

@@ -55,22 +55,22 @@ export class SixTile {
         this.handleSlotChange();
     }
     render() {
-        return (h("six-tooltip", { key: '336923c5af5761ba5216e953dd1660fb0c15f349', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'b7344269567d04e07e3bfc65fe4ff6f0286ead04', part: "base", class: {
+        return (h("six-tooltip", { key: '2b2b13f07d07c1f0c90cdfe50f274a98118550a1', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'f3ed6365066484ec1b4699c9e5311348747cd8d8', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, h("div", { key: '3516bc0a5cd6b472f4d10ae53b3af0bf1bafc8fa', part: "header", class: "tile__header" }, h("six-icon-button", { key: 'bcf278f94bf47a6be6ac3ebbf75022c9d0accac9', class: {
+            } }, h("div", { key: 'c27ba89ba037b289754169db65bfab716792b551', part: "header", class: "tile__header" }, h("six-icon-button", { key: '9eb0eea2c2ec217cdda335b5d5412ac0e5944297', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '82478a6ecd97ddcce0b47b522c31b3e798e6b107', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: 'd18abe31b644ddf47481114ccf83495038965895', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: 'c4496fd0febcf2c01358cc8adbcab718c79dda6c', name: "icon" })), h("div", { key: 'd0568f6820efd46fcfa0ff5ee88bf1e18ced5427', part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: 'f146d52f032ecf33b3c0cd06471f17c419fd47c0', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: '716cb94b53b0b2272fb70450d0fd77f5a3480d18', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '791d752d7a3360fdf7424cbafa375ee22d0063b1', name: "icon" })), h("div", { key: 'e03ab0f392a7defc5107f2ec73b0b60b6d3387ca', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
-            } }, this.label && (h("div", { key: '7205fd10c74b8ae433a02d3e69be59fdff19419d', class: {
+            } }, this.label && (h("div", { key: '869d56ac50b7c27c1c42ce0ba1368d6bb52d5344', class: {
                 '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: 'bcc4658ff2d5e39c82c94ce97340fd84c7f98afe', name: "label" })))));
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '8d5cad1b2b36a42e4f34d78201d03f7160b7ddbd', name: "label" })))));
     }
     static get is() { return "six-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -88,6 +88,7 @@ export class SixTile {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -102,12 +103,12 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "iconName": {
                 "type": "string",
+                "attribute": "icon-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -122,11 +123,11 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-name",
                 "reflect": false
             },
             "closeable": {
                 "type": "boolean",
+                "attribute": "closeable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -141,12 +142,12 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "closeable",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "elevated": {
                 "type": "boolean",
+                "attribute": "elevated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -161,12 +162,12 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "elevated",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disableTooltip": {
                 "type": "boolean",
+                "attribute": "disable-tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -181,12 +182,12 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disable-tooltip",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -201,12 +202,12 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -221,7 +222,6 @@ export class SixTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             }

package/dist/collection/components/six-timepicker/six-timepicker.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: block;
   font-family: var(--six-font-family);

package/dist/collection/components/six-timepicker/six-timepicker.js

@@ -137,6 +137,9 @@ export class SixTimepicker {
         };
         this.handleClearClick = (event) => {
             event.stopPropagation();
+            if (this.inputElement != null) {
+                this.inputElement.value = '';
+            }
             this.value = '';
             this.sixClear.emit();
             this.sixChange.emit({
@@ -194,13 +197,15 @@ export class SixTimepicker {
                 });
                 return;
             }
-            // update value and popup value, and emit the new value
-            this.value = inputElement.value;
-            this.popupValue = parseTimeString(inputElement.value, this.format);
-            this.sixChange.emit({
-                value: this.popupValue,
-                valueAsString: createTimeString(this.popupValue, this.format),
-            });
+            else {
+                // update value and popup value and emit the new value
+                this.value = inputElement.value;
+                this.popupValue = parseTimeString(inputElement.value, this.format);
+                this.sixChange.emit({
+                    value: this.popupValue,
+                    valueAsString: createTimeString(this.popupValue, this.format),
+                });
+            }
         }, this.debounce));
     }
     componentDidRender() {
@@ -214,6 +219,9 @@ export class SixTimepicker {
         if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
             this.value = '';
         }
+        else if (this.inputElement != null) {
+            this.inputElement.value = this.value;
+        }
         // update popup value
         if (this.value === '') {
             if (this.defaultTime == null) {
@@ -346,12 +354,12 @@ export class SixTimepicker {
             } }, icon));
     }
     render() {
-        return (h("div", { key: '58240c7c32227225d1811fa59e9cf336aad03a4d', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: '1b6e9b28d997b67a933d055fa3e73e3c0751aa53', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
+        return (h("div", { key: 'a3496612a52df399ccd8cb88e2f3564432758b74', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: 'ca426a5b063102ea92550ed6779a46c56a663a22', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
                 'input--empty': this.value === '',
                 'input--hide': this.inline,
-            } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: 'b762116d0af1bc11d7f2cbb255b071e8fe3b52cf', ref: (el) => (this.popup = el), part: "popup", class: {
+            } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: '8c03ea793c9452af88fe41699ec58b526057d834', ref: (el) => (this.popup = el), part: "popup", class: {
                 timepicker__popup: true,
-                'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,
+                'timepicker__popup--is-up': this.placement == null ? this.isPopupContentUp : this.placement === 'top',
                 'timepicker__popup--is-inline': this.inline,
             } }, ...this.getContent(), this.getAmPmPicker()))));
     }
@@ -371,6 +379,7 @@ export class SixTimepicker {
         return {
             "format": {
                 "type": "string",
+                "attribute": "format",
                 "mutable": false,
                 "complexType": {
                     "original": "TimeFormat",
@@ -391,12 +400,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "format",
                 "reflect": false,
                 "defaultValue": "'HH:mm:ss'"
             },
             "separator": {
                 "type": "string",
+                "attribute": "separator",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -411,12 +420,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "separator",
                 "reflect": false,
                 "defaultValue": "':'"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -431,12 +440,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -451,12 +460,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "inline": {
                 "type": "boolean",
+                "attribute": "inline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -471,12 +480,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inline",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -491,12 +500,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -511,12 +520,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom'",
@@ -531,11 +540,11 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -550,12 +559,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -570,12 +579,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -590,11 +599,11 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -609,12 +618,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -629,11 +638,11 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text-count",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -648,12 +657,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -668,12 +677,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -688,12 +697,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -708,12 +717,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clearable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconPosition": {
                 "type": "string",
+                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -728,12 +737,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-position",
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -748,12 +757,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hoist",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "timeout": {
                 "type": "number",
+                "attribute": "timeout",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -768,12 +777,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "timeout",
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
             },
             "interval": {
                 "type": "number",
+                "attribute": "interval",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -788,12 +797,12 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interval",
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
             },
             "defaultTime": {
                 "type": "string",
+                "attribute": "default-time",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -808,11 +817,11 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "default-time",
                 "reflect": false
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -827,7 +836,6 @@ export class SixTimepicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
             }