@jsfour/root-ui 0.0.3 → 0.0.5

package/dist/collection/components/input/input.js

@@ -132,10 +132,10 @@ export class RootInput {
             'root-input-field--color': this.type === RootInputType.COLOR,
             'root-input-field--textarea': this.multiline,
         };
-        return (h("div", { key: '7d515423e1abc3bd25ff1df52f391536e787e393', class: classes }, h("label", { key: '4e7e0a89e5b266e4e396c5e65070bd35c63fec13', htmlFor: this.inputId }, this.label), h("div", { key: 'e5227c325bbb88d054093840e5c747a541a032a5', class: fieldClasses, onClick: this.handleFieldClick }, this.hasIcon && (h("div", { key: '6c178aab5e789d67db8f0c9e7795eeb0e9526f60', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: '465b2e8355b2f354f2f215b63ef335b1d3eb893e', name: "icon" }))), this.multiline ? (h("textarea", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, value: this.inputValue, onBlur: this.handleBlur, onInput: this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false', rows: 3 })) : (h("input", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, type: inputType, value: colorValue, onBlur: this.handleBlur, onInput: this.type === RootInputType.FILE ? this.handleFileChange : this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false' })), (this.type === RootInputType.DATE || this.type === RootInputType.MONTH) && this.showIcon && (h("div", { key: '1752f725d3f55aac94c52525121ec58da9a2ec61', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: '37260c467d83e8692a3dc0c4aa0f7e20606fbfc2', name: "calendar-icon" }, h("root-icon-calendar", { key: '4dce349a810e945d981fb0b664ba3d151713ba84' })))), this.type === RootInputType.TIME && this.showIcon && (h("div", { key: 'a79d4499261d68f5174da113cff89a75af5407a8', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: 'f2999c4b46fb97089b7525077f1f8d78b549199c', name: "time-icon" }, h("root-icon-clock", { key: '4b58b5fc10bb2058740da897def082827da64d43' })))), (this.type === RootInputType.SEARCH) && this.showIcon && (h("div", { key: '3435b28f0e6cd7958dc63c0ab83db26e8fdf395e', class: "root-input-icon" }, h("slot", { key: '4202c70c15b7e1cfc492c7e1b4286e846ae1461d', name: "search-icon" }, h("root-icon-search", { key: 'b605187209182d649e11a5e5193e377f7b19e7cd' })))), (this.type === RootInputType.TEL) && this.showIcon && (h("div", { key: 'b7c580a101418fcbe4333b0a62e54d94f3efff3c', class: "root-input-icon" }, h("slot", { key: '5f7891c58d2adc416cbe06146271be2b16ca0ef3', name: "phone-icon" }, h("root-icon-phone", { key: '4632a71a7a32acd062039c3bedb3ef21088ed061' })))), this.type === RootInputType.COLOR && (h("div", { key: 'be83a89f6e41ad13c19f879d0ebbb5df5c32ff53', class: "root-input-color-label" }, h("span", { key: '91791953bbbf5b4427f4777022578817b2f9835f', class: "root-input-color-swatch", style: { backgroundColor: colorValue }, onClick: this.openPicker }), h("span", { key: '89e089ab6ee53cfe8f13184f4e3b736599006639', class: "root-input-color-text" }, colorValue))), this.type === RootInputType.FILE && !this.multiline && this.showIcon && (h("div", { key: '1c46af30c73fb0e61bf3a4439abe2fe63de37368', class: "root-input-file-label" }, h("span", { key: '54ffc7fc2928b11988ba59744103ed0efa580d95' }, this.fileLabel), h("slot", { key: '8756981a67259a6175854e09af529e534986f905', name: "file-icon" }, h("root-icon-files", { key: 'aa0cdf06c05fcbf644d2ca357ae984a94627482b' })))), this.type === RootInputType.PASSWORD && !this.multiline && this.showIcon && (h("div", { key: '065ba1b8e50a6ad041df0e1854d1fb2f6b46d7bb', class: "root-input-icon root-input-icon--password", onClick: this.togglePasswordVisibility }, h("slot", { key: '26fa7c49034137f28d808e3fb3cd697f5e5ec0f8', name: "password-icon" }, this.showPassword ?
+        return (h("div", { key: '09c393d270b1d84fcf6c266e3327a6d9add59519', class: classes }, h("label", { key: '40c3dbad62c924ab8a99f3a9f05e783226724bd4', htmlFor: this.inputId }, this.label), h("div", { key: 'dd176e4fc8eb10508a53b9231629d330e8b387d4', class: fieldClasses, onClick: this.handleFieldClick }, this.hasIcon && (h("div", { key: 'cd868ecd43ac2ed4ff78151f640b91407df42c1d', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: '4669a8a7def1edc2d96b999c665c153c4cdbebdd', name: "icon" }))), this.multiline ? (h("textarea", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, value: this.inputValue, onBlur: this.handleBlur, onInput: this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false', rows: 3 })) : (h("input", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, type: inputType, value: colorValue, onBlur: this.handleBlur, onInput: this.type === RootInputType.FILE ? this.handleFileChange : this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false' })), (this.type === RootInputType.DATE || this.type === RootInputType.MONTH) && this.showIcon && (h("div", { key: 'ddedcb46f6e14ec6b00ed0dc53292cf43e419564', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: 'eacefaf6f0ee85bd8dfb109fd0ba638d37b5f23b', name: "calendar-icon" }, h("root-icon-calendar", { key: '8cbc121ed08a9c61e705ba4de1b86253c4cb3826' })))), this.type === RootInputType.TIME && this.showIcon && (h("div", { key: '6eb1998a64c9ea386c3d7c48b61e3bca95d4dcd7', class: "root-input-icon", onClick: this.openPicker }, h("slot", { key: 'f067e83b89bbe711676086a478a0698e9e3b877b', name: "time-icon" }, h("root-icon-clock", { key: 'e45df0ce926e70ac2958b97e3339e3e4c9400ba1' })))), (this.type === RootInputType.SEARCH) && this.showIcon && (h("div", { key: '1d6a0de6daf547dbf0bbe002ce882cb6628a2033', class: "root-input-icon" }, h("slot", { key: 'cdbf006d92b4d5ba20ae5ad386652ef6cb971424', name: "search-icon" }, h("root-icon-search", { key: '4a07923979d9d41cf5f9ba5a0e904d69514c698b' })))), (this.type === RootInputType.TEL) && this.showIcon && (h("div", { key: '929f18a5213bb7b0ef227c5aad7856eaab71bdf3', class: "root-input-icon" }, h("slot", { key: '717218d484a9edd3518be56ac0845266b8a7cc06', name: "phone-icon" }, h("root-icon-phone", { key: '12bedf543ab9725391d9b80a7b7e25d6264f6ad8' })))), this.type === RootInputType.COLOR && (h("div", { key: 'd9a05780ce14d6197355eff952b643047f061e58', class: "root-input-color-label" }, h("span", { key: '087655dedbb2c40aabe180c9d65965e24da9b19b', class: "root-input-color-swatch", style: { backgroundColor: colorValue }, onClick: this.openPicker }), h("span", { key: '6c7efff6d1e86851e2e3b85a48a42f97c7c479bd', class: "root-input-color-text" }, colorValue))), this.type === RootInputType.FILE && !this.multiline && this.showIcon && (h("div", { key: '897a4dd68019b129f4d83d8ce9d98d748224e918', class: "root-input-file-label" }, h("span", { key: '7721db6ad60e2bd6b65aa76f563c8a0932f5a1d6' }, this.fileLabel), h("slot", { key: 'f504dc0b1630c9940b29bd00fcd6e59eb4a4f4b2', name: "file-icon" }, h("root-icon-files", { key: 'ab8e7e4d48309f82d3bd5e284dfb7e4e1a3f15e6' })))), this.type === RootInputType.PASSWORD && !this.multiline && this.showIcon && (h("div", { key: 'aa46712679ad45613cfcab38388d86f2ff12ec3b', class: "root-input-icon root-input-icon--password", onClick: this.togglePasswordVisibility }, h("slot", { key: 'c677881ab06514a6f4d834449b8f03a028438f0d', name: "password-icon" }, this.showPassword ?
             h("root-icon-eye-off", null)
             :
-                h("root-icon-eye", null)))), this.type === RootInputType.NUMBER && !this.multiline && this.showIcon && (h("div", { key: 'b1aacf2edafc3af370a71e73226636c0bce76108', class: "root-input-number-controls" }, h("div", { key: 'b8c25451b4e394fa31e3630aec24b1b7a3d529b0', class: "root-input-icon", onClick: this.incrementNumber }, h("slot", { key: '460c4e89580da4978a31847bdd1f0fe9d4519427', name: "number-up-icon" }, h("root-icon-chevron-up", { key: 'da72019682560848a49b1a05d868df18acc1fe99' }))), h("div", { key: '9eadaade23a25bb107c711aad15654ecba5361e9', class: "root-input-icon", onClick: this.decrementNumber }, h("slot", { key: '8d0bf9185c1294d7d411c98d29a0a98932c738d8', name: "number-down-icon" }, h("root-icon-chevron-down", { key: 'e52852e958d9bb5d63da1176f8a35eea407019cc' })))))), this.error && this.touched && (h("div", { key: '284790798c2d6398133e3132a02eccc48894ecaa', class: "root-input-error" }, this.error))));
+                h("root-icon-eye", null)))), this.type === RootInputType.NUMBER && !this.multiline && this.showIcon && (h("div", { key: '43f827948d9c8a57ca0a01eba0453dbf161db39e', class: "root-input-number-controls" }, h("div", { key: '9968816602c267a1ab367ab9393d2b6218d6d502', class: "root-input-icon", onClick: this.incrementNumber }, h("slot", { key: '96647e6223debd269114f0635ff900fe96771443', name: "number-up-icon" }, h("root-icon-chevron-up", { key: '09ac46283b78cc2cc89b8f953fc629fa2c9bf570' }))), h("div", { key: '071240041c3753cbfdf8720a4e5e627c2a6ef641', class: "root-input-icon", onClick: this.decrementNumber }, h("slot", { key: '77ddc10d060b7607f055ed0d7d9d4f0a1dfcfeeb', name: "number-down-icon" }, h("root-icon-chevron-down", { key: '6d2e134f8c0edc95e174a2959703a26f64a6d44b' })))))), this.error && this.touched && (h("div", { key: '3b8fe520b6fa5c4f0d29ad8308998183b9479b8a', class: "root-input-error" }, this.error))));
     }
     static get is() { return "root-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/list.js

@@ -25,7 +25,7 @@ export class RootList {
         items.forEach(item => (item.selected = false));
     }
     render() {
-        return (h("ul", { key: 'c6232be39cac24863efee5a66a5c8b7bbbb3d11a', class: "root-list" }, h("slot", { key: '04a330f0d98075c1f565dc93feb5a4d40acd3058' })));
+        return (h("ul", { key: 'a5dbe01cddba5f74b9d8a26600f3e0c4d7d8e8f1', class: "root-list" }, h("slot", { key: '24630d5702ecf1574f3c1db6674f2676fba0f732' })));
     }
     static get is() { return "root-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-item/list-item.js

@@ -9,7 +9,7 @@ export class RootListItem {
         this.rootItemClicked.emit(this);
     }
     render() {
-        return (h("li", { key: '75f8fa143d6019ef35368c4650e5c69a1312d1ff', class: `root-list-item ${this.selected ? 'root-list-item--selected' : ''}`, onClick: () => this.itemClicked(), id: this.listItemId }, h("slot", { key: 'f330688a210566b8e08a962a41b63767f7a3eb84' })));
+        return (h("li", { key: 'ffcbc5e24e97368c24cf0c93f481147d9acd2226', class: `root-list-item ${this.selected ? 'root-list-item--selected' : ''}`, onClick: () => this.itemClicked(), id: this.listItemId }, h("slot", { key: 'a529c50a4331851719da95dcbfdfb0eacd720219' })));
     }
     static get is() { return "root-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button/radio-button.js

@@ -11,7 +11,7 @@ export class RootRadioButton {
         this.rootRadioButtonClick.emit(this.value);
     }
     render() {
-        return (h("div", { key: 'fb0db6b9bc6aee6cca9ccd104a3dbbee290852f1', class: `root-radio-button-container ${this.isSelected ? 'root-radio-button-container--selected' : ''}`, onClick: () => this.onClick() }, h("input", { key: 'aae9d2ff73f147c73e22e624236bfb3105e2fdb4', class: "root-radio-input", type: "radio", name: this.value, value: this.value }), h("span", { key: 'a427b156b4b2cd637ff4bcc892006e1bda728857', class: "root-radio-squircle" }, h("span", { key: '721b82eda9f621d873799da8b260df01c5cc9402', class: "root-radio-dot" })), h("label", { key: 'aa84135ae1f5423d789c3af9739e5a7da72f0b63', class: "root-radio-button-label" }, h("slot", { key: '752ce915e71eaaecf558bdf548f706cfc2d48148' }))));
+        return (h("div", { key: 'c79b334a5c09ca1296cd40a56a45acd7add121a1', class: `root-radio-button-container ${this.isSelected ? 'root-radio-button-container--selected' : ''}`, onClick: () => this.onClick() }, h("input", { key: '62bef3fffd3a460f312d5e9be899cfc28b0af582', class: "root-radio-input", type: "radio", name: this.value, value: this.value }), h("span", { key: '95bb6f802ebb1fd471fa42747b0a53cb331976a3', class: "root-radio-squircle" }, h("span", { key: '8c445e36d7d8dfb3a08cecdceb2d62b6a23f7b3f', class: "root-radio-dot" })), h("label", { key: '18393855b1378b2fd43c1a5720b670b1ab86c725', class: "root-radio-button-label" }, h("slot", { key: '0668fe9d81ed6ef2abf2e890ab74c0bc2af745f5' }))));
     }
     static get is() { return "root-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/radio-group/radio-group.js

@@ -12,7 +12,7 @@ export class RootRadioGroup {
         });
     }
     render() {
-        return (h("div", { key: '1ce7227757b4710aa009d62b5d9d65cbebca58bc', class: "root-radio-group" }, h("slot", { key: '17d4a3d302c36cfe6bdb51dd7d5b4b70983210ef' })));
+        return (h("div", { key: '6f6eea5bf1fcf92eddd7c35f84c7b34c005390b9', class: "root-radio-group" }, h("slot", { key: '909ef637f4a19353d7e69a639cabc864f67b524a' })));
     }
     static get is() { return "root-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -50,7 +50,7 @@ export class RootSelect {
         document.removeEventListener('keydown', this.handleEscape);
     }
     render() {
-        return (h("div", { key: 'bcbe773e1b7b491e7a365b4e99dc74452e371200', class: `root-select-container ${this.fullwidth ? 'root-select--fullwidth' : ''} ${this.isOpen ? 'root-select--open' : ''}` }, h("button", { key: '8a3da36dc45e7d59dd248f0ba63f69eee82040c1', class: `root-select-trigger ${this.isOpen ? 'root-select-trigger-open' : ''}`, onClick: () => this.isOpen = !this.isOpen, "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("span", { key: '6eacf741cf99761b366c0dc22e585446f74929f9', class: "root-select-trigger--label" }, this.selectedOption || this.label), h("span", { key: 'b3ec8b9cfb43863361bb3b8dff14259be28b535b', class: "root-select-trigger--arrow" }, h("root-icon-chevron-down", { key: '9ecde2c5e296a723a12371717c50344789d76a99' }))), this.isOpen && (h("div", { key: 'b56b58f7b8744d8cd01601e960f3d47671dde855', class: "root-select-menu" }, h("slot", { key: '0cea104ee8f74046d5aa26efe3406fb805e099dd' })))));
+        return (h("div", { key: '5c93c639f2215b01e3c31cb79d4a5060d9247df2', class: `root-select-container ${this.fullwidth ? 'root-select--fullwidth' : ''} ${this.isOpen ? 'root-select--open' : ''}` }, h("button", { key: '6f89f964ddf2c165855ffbd071c1d9b2d36a285b', class: `root-select-trigger ${this.isOpen ? 'root-select-trigger-open' : ''}`, onClick: () => this.isOpen = !this.isOpen, "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("span", { key: '3122bab29fe9533030efb5f62ba6226795a848bc', class: "root-select-trigger--label" }, this.selectedOption || this.label), h("span", { key: 'b5b0e52b23c86d4f87c489fc7d739da352999ca6', class: "root-select-trigger--arrow" }, h("root-icon-chevron-down", { key: 'b572152f921127b307520c74da9ff22a43715138' }))), this.isOpen && (h("div", { key: '4803c0aed16bbdf3c635ec1587e4e45eb060da9c', class: "root-select-menu" }, h("slot", { key: 'c8c2750b4afd599fc709e1a51df3e4c97efc4752' })))));
     }
     static get is() { return "root-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-item/select-item.js

@@ -13,7 +13,7 @@ export class RootSelectItem {
         this.rootOnItemChange.emit(this.value);
     }
     render() {
-        return (h("option", { key: 'e51e7c0744330ac930b9de7d55d027b495697dc5', class: `root-select-item ${this.isSelected ? 'root-select-item--selected' : ''}`, onClick: () => this.setSelected(), value: this.value }, h("slot", { key: '09c993c46dde478a5b079ac0dfde9cfe40cfc91f' })));
+        return (h("option", { key: '8b24dc4af25c24731afb2cde7e2f4f6728ed750e', class: `root-select-item ${this.isSelected ? 'root-select-item--selected' : ''}`, onClick: () => this.setSelected(), value: this.value }, h("slot", { key: '42e0a9dc5ad723836455f381461b87e72ef81351' })));
     }
     static get is() { return "root-select-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/slider/slider.js

@@ -14,7 +14,7 @@ export class RootSlider {
         this.currentValue = Number(this.value);
     }
     render() {
-        return (h("div", { key: 'ad2e82920a81595f9952526f61d05a07b091f68f', class: "root-slider-container" }, h("div", { key: '1a26049cd9954d1d3a28bc0e30bee15421809db2', class: "root-slider-track" }, h("div", { key: 'd6864fc1be0d807f37c50e1fb893745b92963aa3', class: "root-slider-fill", style: { width: `${this.currentValue}%` } }), h("input", { key: 'c03761024cdcf148e808c1d0705259f2eeef7780', class: "root-slider", type: "range", min: "0", max: "100", value: this.currentValue, onInput: this.sliderOnChange.bind(this) })), !this.hideValue && h("span", { key: '466a83223cb78cd8c3f12a217261cc116fdda4ce', class: "root-slider-value" }, this.currentValue, "%")));
+        return (h("div", { key: '289b9f39004ef0f9cdd0ff44fda19e5f69499a3d', class: "root-slider-container" }, h("div", { key: '07ff18dcb7037d6ba54a2acc55225b85f67a9d5e', class: "root-slider-track" }, h("div", { key: '4c59183da7befd8d3c0a3029d6826aad61f72573', class: "root-slider-fill", style: { width: `${this.currentValue}%` } }), h("input", { key: 'ef236f53ecfe60234a4b2b5755086d085839a339', class: "root-slider", type: "range", min: "0", max: "100", value: this.currentValue, onInput: this.sliderOnChange.bind(this) })), !this.hideValue && h("span", { key: '190584055057c47fae59ad3f2043ac2494652e35', class: "root-slider-value" }, this.currentValue, "%")));
     }
     static get is() { return "root-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -8,7 +8,7 @@ export class RootSwitch {
         this.rootOnChange.emit({ checked: this.switchOn });
     }
     render() {
-        return (h("div", { key: '626f8e3701f7284ee34d5ed64aac5c3acae5407e', class: `root-switch ${this.switchOn ? 'root-switch-checked' : ''}`, role: "switch", "aria-checked": this.switchOn, onClick: () => this.toggleSwitch() }, h("div", { key: '5a9203f61077ee7435b05139b7b73d1969f1a0e3', class: "root-switch-thumb" })));
+        return (h("div", { key: '78a2db2203ccbe7eb0a88759743e96ab23f460f0', class: `root-switch ${this.switchOn ? 'root-switch-checked' : ''}`, role: "switch", "aria-checked": this.switchOn, onClick: () => this.toggleSwitch() }, h("div", { key: 'de89bedee9814b5b636e4bfdd39468bc566790c6', class: "root-switch-thumb" })));
     }
     static get is() { return "root-switch"; }
     static get encapsulation() { return "shadow"; }