npm - @six-group/ui-library - Versions diffs - 4.2.3 → 4.2.5 - Mend

@six-group/ui-library 4.2.3 → 4.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/dist/components/six-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n position: static;\n display: block;\n}\n\n.six-file-upload {\n six-card {\n box-shadow: none;\n padding: 0;\n width: 100%;\n }\n\n &__label {\n &--highlighted {\n color: var(--six-color-action-600);\n }\n }\n\n &__container {\n &--full {\n border: dashed 1px var(--six-color-web-rock-500);\n }\n }\n\n &__label-icon {\n margin-right: 0.5rem;\n }\n\n &__drop-zone {\n padding: 2rem 0;\n display: flex;\n justify-content: center;\n width: 100%;\n transition: background-color $transition;\n\n &__spinner-container {\n display: flex;\n align-items: center;\n\n six-spinner {\n margin-right: var(--six-spacing-x-small);\n }\n }\n\n &--compact {\n padding: 0;\n }\n }\n\n &__input {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n user-select: none;\n height: 100%;\n opacity: 0;\n outline: none;\n }\n\n &--disabled &__drop-zone {\n background-color: $disabled-color;\n cursor: not-allowed;\n }\n\n &:not(.six-file-upload--disabled) &__drop-zone:hover,\n &__drop-zone--hover {\n background-color: $over-color;\n\n &.six-file-upload__drop-zone--compact {\n background-color: inherit;\n }\n }\n\n &--disabled &__input {\n cursor: not-allowed;\n }\n\n &__error-text {\n font-size: var(--six-input-help-text-font-size-medium);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\ninterface ISingleFile {\n file: File;\n}\n\ninterface IMultipleFiles {\n files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile \| IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n @State() hasError = false;\n\n /* Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Set to true to draw the control in a loading state. /\n @Prop({ reflect: true }) uploading = false;\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler({ dataTransfer }: DragEvent) {\n if (!this.disabled) {\n this.isOver = false;\n if (dataTransfer != null) {\n this.handleFiles(dataTransfer.files);\n }\n }\n }\n\n private handleSlotChange = () => {\n let validType = false;\n\n if (\n this.errorText != null &&\n ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) \|\|\n (typeof this.errorText == 'object' && this.errorText.length > 0))\n ) {\n validType = true;\n }\n\n this.hasError = validType \|\| hasSlot(this.host, 'error-text');\n console.log(this.errorText);\n console.log(this.hasError);\n };\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0 \|\| this.uploading) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({ reason: 'Only one file is allowed.' });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n return this.failure.emit({ reason });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n return this.failure.emit({ reason });\n }\n }\n\n const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n this.success.emit(eventPayload);\n };\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled \|\| this.uploading,\n }}\n >\n <Container\n disabled={this.disabled \|\| this.uploading}\n aria-invalid={this.invalid ? 'true' : 'false'}\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && !this.uploading && (\n <span slot=\"prefix\">\n <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n </span>\n )}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n {this.uploading ? (\n <span class=\"six-file-upload__drop-zone__spinner-container\">\n <six-spinner /> Uploading...\n </span>\n ) : (\n <div>\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n )}\n </div>\n </Container>\n <div aria-hidden={this.invalid ? 'false' : 'true'}>\n <slot name=\"error-text\">\n {errorMessages.map((text) => (\n <six-error>\n <div class=\"six-file-upload__error-text\">{text}</div>\n </six-error>\n ))}\n </slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n position: static;\n display: block;\n}\n\n.six-file-upload {\n six-card {\n box-shadow: none;\n padding: 0;\n width: 100%;\n }\n\n &__label {\n &--highlighted {\n color: var(--six-color-action-600);\n }\n }\n\n &__container {\n &--full {\n border: dashed 1px var(--six-color-web-rock-500);\n }\n }\n\n &__label-icon {\n margin-right: 0.5rem;\n }\n\n &__drop-zone {\n padding: 2rem 0;\n display: flex;\n justify-content: center;\n width: 100%;\n transition: background-color $transition;\n\n &__spinner-container {\n display: flex;\n align-items: center;\n\n six-spinner {\n margin-right: var(--six-spacing-x-small);\n }\n }\n\n &--compact {\n padding: 0;\n }\n }\n\n &__input {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n user-select: none;\n height: 100%;\n opacity: 0;\n outline: none;\n }\n\n &--disabled &__drop-zone {\n background-color: $disabled-color;\n cursor: not-allowed;\n }\n\n &:not(.six-file-upload--disabled) &__drop-zone:hover,\n &__drop-zone--hover {\n background-color: $over-color;\n\n &.six-file-upload__drop-zone--compact {\n background-color: inherit;\n }\n }\n\n &--disabled &__input {\n cursor: not-allowed;\n }\n\n &__error-text {\n font-size: var(--six-input-help-text-font-size-medium);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\ninterface ISingleFile {\n file: File;\n}\n\ninterface IMultipleFiles {\n files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile \| IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n @State() hasError = false;\n\n /* Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Set to true to draw the control in a loading state. /\n @Prop({ reflect: true }) uploading = false;\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler({ dataTransfer }: DragEvent) {\n if (!this.disabled) {\n this.isOver = false;\n if (dataTransfer != null) {\n this.handleFiles(dataTransfer.files);\n }\n }\n }\n\n private handleSlotChange = () => {\n let validType = false;\n\n if (\n this.errorText != null &&\n ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) \|\|\n (typeof this.errorText == 'object' && this.errorText.length > 0))\n ) {\n validType = true;\n }\n\n this.hasError = validType \|\| hasSlot(this.host, 'error-text');\n };\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0 \|\| this.uploading) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({ reason: 'Only one file is allowed.' });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n return this.failure.emit({ reason });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n return this.failure.emit({ reason });\n }\n }\n\n const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n this.success.emit(eventPayload);\n };\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled \|\| this.uploading,\n }}\n >\n <Container\n disabled={this.disabled \|\| this.uploading}\n aria-invalid={this.invalid ? 'true' : 'false'}\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && !this.uploading && (\n <span slot=\"prefix\">\n <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n </span>\n )}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n {this.uploading ? (\n <span class=\"six-file-upload__drop-zone__spinner-container\">\n <six-spinner /> Uploading...\n </span>\n ) : (\n <div>\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n )}\n </div>\n </Container>\n <div aria-hidden={this.invalid ? 'false' : 'true'}>\n <slot name=\"error-text\">\n {errorMessages.map((text) => (\n <six-error>\n <div class=\"six-file-upload__error-text\">{text}</div>\n </six-error>\n ))}\n </slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-footer.js CHANGED Viewed

@@ -10,7 +10,7 @@ const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h("footer", { key: '3208d35f8c2cec42795d713465cb1488ec2d4e57', class: "six-footer" }, h("slot", { key: '8f9854ed0e213425ea459947635993a1e6b29d54' })));
+        return (h("footer", { key: '83474fa81c726623db04c5a06cfd72d9163257e4', class: "six-footer" }, h("slot", { key: '8a463c3b9f6ee3c00fd9222eca173f7b912bf54e' })));
     }
     static get style() { return SixFooterStyle0; }
 }, [1, "six-footer"]);

package/dist/components/six-group-label.js CHANGED Viewed

@@ -42,7 +42,7 @@ const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel ext
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
     render() {
-        return (h(FormControl, { key: 'a518616f11a06ff39d4eef3654b43db9491749c2', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'dc6946efe018060cd9c6c609b0e6f17d882ae7e0' })));
+        return (h(FormControl, { key: 'edc2f21913a2e4a40b516b69ac640950f8351a00', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'a7fd4d86c9fcf071eb80239340d54925091c465d' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-icon-button2.js CHANGED Viewed

@@ -33,11 +33,11 @@ const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton exten
         }
     }
     render() {
-        const html = this.html && h("span", { key: 'bfb9af923285a1777c5a5d8778e272f20ca40598', innerHTML: this.html });
-        return (h("div", { key: 'a3f095fc9301d35108ce5d63fc441acadbdb0471', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { key: '303ab00da89e28557367f1b4e6593efb2b115388', ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+        const html = this.html && h("span", { key: '4017a659b676c98bca3f6d09639b030bb38f84ba', innerHTML: this.html });
+        return (h("div", { key: '5f199fc510e875764f571230a2ee2044cae9ff1b', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { key: 'f17232563ee2b360b173a7fdf1c03f87f3ab294b', ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
                 'icon-button': true,
                 'icon-button--disabled': this.disabled,
-            }, type: "button", "aria-label": this.label }, h("six-icon", { key: 'cbc8dfda4a2d1ee148521c30d4694fd83c49fa40', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: 'fda137701d73e4429ccca013e52a08b06bbca748' }), html)));
+            }, type: "button", "aria-label": this.label }, h("six-icon", { key: 'ca6836332c0270d700c09555b8325b1d16e9fa38', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '20148ec0f5a72cc351a220ddf38daaba35455695' }), html)));
     }
     static get style() { return SixIconButtonStyle0; }
 }, [1, "six-icon-button", {

package/dist/components/six-icon2.js CHANGED Viewed

@@ -12,7 +12,7 @@ const SixIcon = /*@__PURE__*/ proxyCustomElement(class SixIcon extends HTMLEleme
         this.filled = false;
     }
     render() {
-        return (h("i", { key: '1829823d7fafabd422951e21baf28f0925f670d9', class: {
+        return (h("i", { key: '0ad2a9d136a1cc69769040f67f86c4ea5abfd954', class: {
                 'material-icons': true,
                 'material-icons-outlined': !this.filled,
                 'material-icons-filled': this.filled,
@@ -24,7 +24,7 @@ const SixIcon = /*@__PURE__*/ proxyCustomElement(class SixIcon extends HTMLEleme
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, h("slot", { key: '0f11af1384b316708bfe8b3989ea74cc3f2c37f9' })));
+            } }, h("slot", { key: 'aecf0f5e3b4cdffd223434fa09283306e92be51e' })));
     }
     static get style() { return SixIconStyle0; }
 }, [1, "six-icon", {

package/dist/components/six-input2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { s as submitForm } from './form.js';
 import { d as defineCustomElement$2 } from './six-error2.js';
 import { d as defineCustomElement$1 } from './six-icon2.js';
-const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
+const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
 const SixInputStyle0 = sixInputCss;
 const ICON_SIZES = {
@@ -161,6 +161,15 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         var _a;
         return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
     }
+    /** Returns the start and end positions of the text selection */
+    async getSelectionRange() {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            selectionStart: (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : undefined,
+            selectionEnd: (_d = (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.selectionEnd) !== null && _d !== void 0 ? _d : undefined,
+            selectionDirection: (_f = (_e = this.nativeInput) === null || _e === void 0 ? void 0 : _e.selectionDirection) !== null && _f !== void 0 ? _f : undefined,
+        };
+    }
     /** Replaces a range of text with a new string. */
     async setRangeText(replacement, start, end, selectMode = 'preserve') {
         if (this.nativeInput == null) {
@@ -178,7 +187,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: 'c814025e7db66cd628c466316a5bd3fe4c3e77bf', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'bad7f2e31ec8465f3292927e9d9fb37aa919cb33', part: "base", class: {
+        return (h(FormControl, { key: '73c1694ce5e466407258d8d38303f3adcf50e150', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '0326b1027576d6de7980845a6dd95c9019c3169c', part: "base", class: {
                 input: true,
                 // Sizes
                 'input--small': this.size === 'small',
@@ -192,10 +201,10 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
                 'input--focused': this.hasFocus,
                 'input--empty': this.getValue().length === 0,
                 'input--invalid': this.invalid,
-            } }, h("span", { key: 'fa0b1320b4d44794f36047ca65efa9c03d180234', part: "prefix", class: "input__prefix" }, h("slot", { key: '8312c426648c862ef669cb424a219cb85f2b193c', name: "prefix" })), h("input", { key: '87ce5517721681533fc7bcf18d20cb3d1ee7fb6f', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+            } }, h("span", { key: '1949ec04d935c5cd2a225dfe967bfb7c53b815e1', part: "prefix", class: "input__prefix" }, h("slot", { key: 'cd1a905c2a3001271aa9c700fc5fa7dd3c010515', name: "prefix" })), h("input", { key: '5d4e05793017d078f06263ef72414cfedcb3cd30', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
                 input__control: true,
                 input__control__prefix: hasSlot(this.host, 'prefix'),
-            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '5768204290a458c6025f93d7eed7b4762fa8ab94', part: "suffix", class: "input__suffix" }, h("slot", { key: '9f1917c71eeb148d31adf808299ef43c5307678f', name: "suffix" })))));
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '6aa1bd188f4c2e55699f5dc7ad96e835efb9eab2', part: "suffix", class: "input__suffix" }, h("slot", { key: '75b65bd7d31eac83dfc37eddbd68c7a24126b0e5', name: "suffix" })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -245,6 +254,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         "removeFocus": [64],
         "select": [64],
         "setSelectionRange": [64],
+        "getSelectionRange": [64],
         "setRangeText": [64]
     }, undefined, {
         "helpText": ["handleLabelChange"],

package/dist/components/six-input2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-input2.js","mappings":"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","names":[],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &:hover.input--dropdown-search {\n border-color: transparent;\n }\n\n &--dropdown-search {\n border-color: transparent;\n }\n\n &--dropdown-search.input--focused {\n border-color: var(--six-input-border-color);\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n color: var(--six-input-color);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--six-color-primary-500);\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-ms-reveal {\n display: none;\n }\n}\n\n.input__prefix,\n.input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n\n ::slotted(six-icon) {\n color: var(--six-input-icon-color);\n }\n}\n\n.input {\n &.input--disabled {\n ::slotted(six-icon) {\n cursor: not-allowed;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n height: var(--six-height-small);\n\n .input__control {\n height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-small);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-small);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-small);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-small);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-small);\n }\n}\n\n.input--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n height: var(--six-height-medium);\n\n .input__control {\n height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-medium);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-medium);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-medium);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-medium);\n }\n}\n\n.input--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n height: var(--six-height-large);\n\n .input__control {\n height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-large);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-large);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-large);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-large);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n &.input--small {\n border-radius: var(--six-height-small);\n }\n\n &.input--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.input--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input--empty .input__clear {\n visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' \| 'medium' \| 'large', 'xSmall' \| 'small' \| 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n /\n\n@Component({\n tag: 'six-input',\n styleUrl: 'six-input.scss',\n shadow: true,\n})\nexport class SixInput {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() isPasswordVisible = false;\n\n /* The input's type. /\n @Prop({ reflect: true }) type: 'email' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'url' = 'text';\n\n /* The input's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* Set to true to draw a pill-style input with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* The input's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The input's placeholder text. /\n @Prop() placeholder?: string;\n\n /* Set to true to disable the input. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to make the input readonly. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* The input's minimum value. /\n @Prop({ reflect: true }) min?: number;\n\n /* The input's maximum value. /\n @Prop({ reflect: true }) max?: number;\n\n /* The input's step attribute. /\n @Prop({ reflect: true }) step?: number;\n\n /* A pattern to validate input against. /\n @Prop({ reflect: true }) pattern?: string;\n\n /\n Internal: Styles the input for the dropdown filter search.\n /\n @Prop() dropdownSearch = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The input's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set to true to add a password toggle button for password inputs. /\n @Prop() togglePassword = false;\n\n /* The input's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Set to render as line /\n @Prop() line = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n }\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the clear button is activated. /\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-input-input', 'input', this.host);\n this.eventListeners.forward('six-input-change', 'change', this.host);\n this.eventListeners.forward('six-input-focus', 'focus', this.host);\n this.eventListeners.forward('six-input-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === 'Enter' && !hasModifier) {\n setTimeout(() => {\n if (!event.defaultPrevented && !event.isComposing) {\n submitForm(this.host);\n }\n });\n }\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorSlot = hasSlot(this.host, 'error-text');\n };\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n input: true,\n\n // Sizes\n 'input--small': this.size === 'small',\n 'input--medium': this.size === 'medium',\n 'input--large': this.size === 'large',\n\n // States\n 'input--line': this.line,\n 'input--pill': this.pill,\n 'input--disabled': this.disabled,\n 'input--dropdown-search': this.dropdownSearch,\n 'input--focused': this.hasFocus,\n 'input--empty': this.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.pattern}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-invalid={this.invalid ? 'true' : 'false'}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onKeyDown={this.handleKeyDown}\n data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-input2.js","mappings":"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","names":[],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &:hover.input--dropdown-search {\n border-color: transparent;\n }\n\n &--dropdown-search {\n border-color: transparent;\n }\n\n &--dropdown-search.input--focused {\n border-color: var(--six-input-border-color);\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n color: var(--six-input-color);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--six-color-primary-500);\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-ms-reveal {\n display: none;\n }\n}\n\n.input__prefix,\n.input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n\n ::slotted(six-icon) {\n color: var(--six-input-icon-color);\n }\n}\n\n.input {\n &.input--disabled {\n ::slotted(six-icon) {\n cursor: not-allowed;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n height: var(--six-height-small);\n\n .input__control {\n height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-small);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-small);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-small);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-small);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-small);\n }\n}\n\n.input--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n height: var(--six-height-medium);\n\n .input__control {\n height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-medium);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-medium);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-medium);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-medium);\n }\n}\n\n.input--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n height: var(--six-height-large);\n\n .input__control {\n height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-large);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-large);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-large);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-large);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n &.input--small {\n border-radius: var(--six-height-small);\n }\n\n &.input--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.input--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input--empty .input__clear {\n visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' \| 'medium' \| 'large', 'xSmall' \| 'small' \| 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nexport type SelectionRangeDirection = 'forward' \| 'backward' \| 'none';\nexport type SelectionRange = {\n selectionStart: number \| undefined;\n selectionEnd: number \| undefined;\n selectionDirection: SelectionRangeDirection \| undefined;\n};\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n /\n\n@Component({\n tag: 'six-input',\n styleUrl: 'six-input.scss',\n shadow: true,\n})\nexport class SixInput {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() isPasswordVisible = false;\n\n /* The input's type. /\n @Prop({ reflect: true }) type: 'email' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'url' = 'text';\n\n /* The input's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* Set to true to draw a pill-style input with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* The input's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The input's placeholder text. /\n @Prop() placeholder?: string;\n\n /* Set to true to disable the input. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to make the input readonly. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* The input's minimum value. /\n @Prop({ reflect: true }) min?: number;\n\n /* The input's maximum value. /\n @Prop({ reflect: true }) max?: number;\n\n /* The input's step attribute. /\n @Prop({ reflect: true }) step?: number;\n\n /* A pattern to validate input against. /\n @Prop({ reflect: true }) pattern?: string;\n\n /\n Internal: Styles the input for the dropdown filter search.\n /\n @Prop() dropdownSearch = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The input's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set to true to add a password toggle button for password inputs. /\n @Prop() togglePassword = false;\n\n /* The input's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Set to render as line /\n @Prop() line = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n }\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the clear button is activated. /\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-input-input', 'input', this.host);\n this.eventListeners.forward('six-input-change', 'change', this.host);\n this.eventListeners.forward('six-input-focus', 'focus', this.host);\n this.eventListeners.forward('six-input-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: SelectionRangeDirection = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Returns the start and end positions of the text selection /\n @Method()\n async getSelectionRange(): Promise<SelectionRange> {\n return {\n selectionStart: this.nativeInput?.selectionStart ?? undefined,\n selectionEnd: this.nativeInput?.selectionEnd ?? undefined,\n selectionDirection: this.nativeInput?.selectionDirection ?? undefined,\n };\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === 'Enter' && !hasModifier) {\n setTimeout(() => {\n if (!event.defaultPrevented && !event.isComposing) {\n submitForm(this.host);\n }\n });\n }\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorSlot = hasSlot(this.host, 'error-text');\n };\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n input: true,\n\n // Sizes\n 'input--small': this.size === 'small',\n 'input--medium': this.size === 'medium',\n 'input--large': this.size === 'large',\n\n // States\n 'input--line': this.line,\n 'input--pill': this.pill,\n 'input--disabled': this.disabled,\n 'input--dropdown-search': this.dropdownSearch,\n 'input--focused': this.hasFocus,\n 'input--empty': this.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.pattern}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-invalid={this.invalid ? 'true' : 'false'}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onKeyDown={this.handleKeyDown}\n data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/components/six-language-switcher.js CHANGED Viewed

@@ -45,7 +45,7 @@ const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguage
         }
     }
     render() {
-        return (h("div", { key: '64f80894523a4b03643949135f18b553cd0517b6', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+        return (h("div", { key: '5ba97f481c478180a10697b498756392192f69f0', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
             const language = typeof lang === 'string' ? lang : lang.key;
             return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {

package/dist/components/six-menu2.js CHANGED Viewed

@@ -14,6 +14,7 @@ const isFocusedMenuItem = (menuItem) => { var _a, _b, _c; return (_c = (_b = (_a
 const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
 const mapToMenuItem = ({ value, label }) => (h("six-menu-item", { key: value, value: value }, label));
 const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;
 const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
 const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLElement {
     constructor() {
@@ -37,7 +38,9 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
         this.scrollingDebounce = 15;
         this.disableKeyboardHandling = false;
         this.scrollingIndex = 0;
-        this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        this.sixMenuItemHeight = this.virtualScroll
+            ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING
+            : DEFAULT_SIX_MENU_ITEM_HEIGHT;
     }
     connectedCallback() {
         this.handleClick = this.handleClick.bind(this);
@@ -80,6 +83,9 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
     getItemsShown() {
         var _a;
         const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;
+        if (this.items && this.items.length === 1) {
+            return 0;
+        }
         return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
     }
     setupForVirtualScrollingAfterRendering() {
@@ -189,6 +195,9 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
             // calculate the proper height to show the correct number of items
             styles.height = `${((_a = this.getItemsShown()) !== null && _a !== void 0 ? _a : 0) * this.sixMenuItemHeight}px`;
         }
+        else if (this.items && this.items.length === 1) {
+            styles.height = 'auto';
+        }
         return Object.assign({}, styles);
     }
     getMenuContainerStyle() {
@@ -201,7 +210,7 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
     }
     getScrollbarGhostStyle() {
         const styles = {};
-        if (this.virtualScroll && this.items !== null) {
+        if (this.virtualScroll && this.items !== null && this.items.length > 1) {
             styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
         }
         return Object.assign({}, styles);
@@ -218,10 +227,10 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
             .map(({ value, label }) => (h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
     }
     render() {
-        return (h("div", { key: 'a8806ec6aee657eb677931fc1ba1405caec3e96e', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        return (h("div", { key: 'fa1ad99f966331ac08e3d0278714613476b84953', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
                 menu: true,
                 '.no-shadow': this.removeBoxShadow,
-            } }, h("div", { key: '34b85eb38385f88e87f49a6689cf6ad082723a87', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'a62dcc8bd5d97a8d479f4a4270aedcb77b729aea' }), this.renderItems()), this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
+            } }, h("div", { key: '6a3d5440ad417f969e5862e93e44ff576f043002', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: '96895a99228cd5407e6a3f60b73d3192bcf3c13a' }), this.renderItems()), this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
     }
     get host() { return this; }
     static get style() { return SixMenuStyle0; }

package/dist/components/six-menu2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-menu2.js","mappings":"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","names":[],"sources":["src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu {\n padding: var(--six-spacing-xx-small) 0;\n border: none;\n box-shadow: var(--six-shadow-small);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.menu:focus {\n outline: none;\n}\n\n.no-shadow {\n box-shadow: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n label: string;\n value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n <six-menu-item key={value} value={value}>\n {label}\n </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The menu's content, including menu items, menu dividers, and menu labels.\n \n @part base - The component's base wrapper.\n /\n@Component({\n tag: 'six-menu',\n styleUrl: 'six-menu.scss',\n shadow: true,\n})\nexport class SixMenu {\n private readonly eventListeners = new EventListeners();\n\n private menu?: HTMLElement;\n private menuWrapper?: HTMLElement;\n private typeToSelectString = '';\n private typeToSelectTimeout?: number;\n\n @Element() host!: HTMLSixMenuElement;\n\n /* Emitted when a menu item is selected. /\n @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n /* Set to true to remove the box-shadow /\n @Prop() removeBoxShadow = false;\n\n /* Set the options to be shown in the dropdown /\n @Prop() items: SixMenuItemData[] \| null = null;\n\n /* Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown /\n @Prop() itemsShown?: number;\n\n /* Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. /\n @Prop() virtualScroll = false;\n\n /\n Used for virtual scrolling\n * Define how many items should be rendered in the DOM when using virtual scrolling\n /\n @Prop() itemSize = 10;\n\n /\n Used for virtual scrolling\n * Define the debounce for listening on scrolling changes in milliseconds.\n * The lower the number the more sensitive the component reacts to scrolling changes.\n /\n @Prop() scrollingDebounce = 15;\n\n /\n Internal: Disables handling of key presses.\n /\n @Prop() disableKeyboardHandling = false;\n\n /\n Used to calculate which items should be rendered in the DOM\n /\n @State()\n private scrollingIndex = 0;\n\n // set a default item height, this variable will be updated with the real value after the first render.\n // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n @State()\n sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentWillLoad() {\n if (this.items === null) {\n return;\n }\n }\n\n private handleScrolling = () => {\n if (this.menuWrapper == null) return;\n // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n };\n\n componentDidLoad() {\n this.setupForVirtualScrollingAfterRendering();\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /\n Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n * enabling type-to-select when the menu doesn't have focus.\n /\n @Method()\n async typeToSelect(key: string) {\n clearTimeout(this.typeToSelectTimeout);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n this.typeToSelectString += key.toLowerCase();\n const items = this.getItems();\n for (const item of items) {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n item.setFocus();\n break;\n }\n }\n }\n\n private getItemsShown(): number {\n const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n return this.itemsShown ?? defaultItemsShown;\n }\n\n private setupForVirtualScrollingAfterRendering() {\n if (!this.virtualScroll \|\| this.menuWrapper == null) return;\n\n this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n // set menu height to proper height once the item is rendered.\n const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n if (menuItemHeight != null && menuItemHeight > 0) {\n this.sixMenuItemHeight = menuItemHeight;\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.menu == null) return [];\n\n if (this.items != null) {\n return this.items.map(mapToMenuItem);\n }\n\n const slot = this.menu.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements({ flatten: true })].filter(\n (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n );\n }\n\n private getActiveItemIndex() {\n const items = this.getItems();\n const selectedItem = this.getActiveItem();\n if (selectedItem != null) {\n const itemIndex = items.indexOf(selectedItem);\n if (itemIndex > -1) {\n return itemIndex;\n }\n }\n const sixMenuItems = this.extractItemsFromDOM();\n return sixMenuItems.findIndex(isFocusedMenuItem);\n }\n\n private getActiveItem(): HTMLSixMenuItemElement \| undefined {\n const activeElement = this.getItems().find((i) => i === document.activeElement);\n if (activeElement != null) {\n return activeElement;\n }\n return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n }\n\n private extractItemsFromDOM() {\n return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n }\n\n private setActiveItem(item: HTMLSixMenuItemElement) {\n item?.setFocus();\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const clickedItem = target.closest('six-menu-item');\n if (clickedItem && !clickedItem.disabled) {\n this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disableKeyboardHandling) {\n return;\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const activeItem = this.getActiveItem();\n event.preventDefault();\n\n if (activeItem != null) {\n this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n }\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n let indexOfActiveItem = this.getActiveItemIndex();\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n indexOfActiveItem++;\n } else if (event.key === 'ArrowUp') {\n indexOfActiveItem--;\n } else if (event.key === 'Home') {\n indexOfActiveItem = 0;\n } else if (event.key === 'End') {\n indexOfActiveItem = items.length - 1;\n }\n\n if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n this.setActiveItem(items[indexOfActiveItem]);\n\n return;\n }\n }\n\n void this.typeToSelect(event.key);\n }\n\n private getMenuWrapperStyle() {\n const styles: Partial<StyleDeclaration> = {};\n if (this.getItemsShown() > 0) {\n // calculate the proper height to show the correct number of items\n styles.height = `${(this.getItemsShown() ?? 0) this.sixMenuItemHeight}px`;\n }\n return {\n ...styles,\n };\n }\n\n private getMenuContainerStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll) {\n // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n }\n\n return {\n ...styles,\n };\n }\n\n private getScrollbarGhostStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll && this.items !== null) {\n styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n }\n\n return {\n ...styles,\n };\n }\n\n private renderItems() {\n if (this.items === undefined \|\| this.items === null) {\n return;\n }\n\n if (!this.virtualScroll) {\n return this.items.map(mapToMenuItem);\n }\n\n return this.items\n .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n .map(({ value, label }: SixMenuItemData) => (\n <six-menu-item checkType=\"check\" key={value} value={value}>\n {label}\n </six-menu-item>\n ));\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.menuWrapper = el)}\n style={this.getMenuWrapperStyle()}\n part=\"wrapper\"\n class={{\n menu: true,\n '.no-shadow': this.removeBoxShadow,\n }}\n >\n <div\n ref={(el) => (this.menu = el)}\n part=\"base\"\n role=\"menu\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n tabIndex={0}\n style={this.getMenuContainerStyle()}\n >\n <slot />\n {this.renderItems()}\n </div>\n {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-menu2.js","mappings":"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","names":[],"sources":["src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu {\n padding: var(--six-spacing-xx-small) 0;\n border: none;\n box-shadow: var(--six-shadow-small);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.menu:focus {\n outline: none;\n}\n\n.no-shadow {\n box-shadow: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n label: string;\n value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n <six-menu-item key={value} value={value}>\n {label}\n </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The menu's content, including menu items, menu dividers, and menu labels.\n \n @part base - The component's base wrapper.\n /\n@Component({\n tag: 'six-menu',\n styleUrl: 'six-menu.scss',\n shadow: true,\n})\nexport class SixMenu {\n private readonly eventListeners = new EventListeners();\n\n private menu?: HTMLElement;\n private menuWrapper?: HTMLElement;\n private typeToSelectString = '';\n private typeToSelectTimeout?: number;\n\n @Element() host!: HTMLSixMenuElement;\n\n /* Emitted when a menu item is selected. /\n @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n /* Set to true to remove the box-shadow /\n @Prop() removeBoxShadow = false;\n\n /* Set the options to be shown in the dropdown /\n @Prop() items: SixMenuItemData[] \| null = null;\n\n /* Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown /\n @Prop() itemsShown?: number;\n\n /* Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. /\n @Prop() virtualScroll = false;\n\n /\n Used for virtual scrolling\n * Define how many items should be rendered in the DOM when using virtual scrolling\n /\n @Prop() itemSize = 10;\n\n /\n Used for virtual scrolling\n * Define the debounce for listening on scrolling changes in milliseconds.\n * The lower the number the more sensitive the component reacts to scrolling changes.\n /\n @Prop() scrollingDebounce = 15;\n\n /\n Internal: Disables handling of key presses.\n /\n @Prop() disableKeyboardHandling = false;\n\n /\n Used to calculate which items should be rendered in the DOM\n /\n @State()\n private scrollingIndex = 0;\n\n // set a default item height, this variable will be updated with the real value after the first render.\n // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n @State()\n private sixMenuItemHeight = this.virtualScroll\n ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING\n : DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentWillLoad() {\n if (this.items === null) {\n return;\n }\n }\n\n private handleScrolling = () => {\n if (this.menuWrapper == null) return;\n // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n };\n\n componentDidLoad() {\n this.setupForVirtualScrollingAfterRendering();\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /\n Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n * enabling type-to-select when the menu doesn't have focus.\n /\n @Method()\n async typeToSelect(key: string) {\n clearTimeout(this.typeToSelectTimeout);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n this.typeToSelectString += key.toLowerCase();\n const items = this.getItems();\n for (const item of items) {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n item.setFocus();\n break;\n }\n }\n }\n\n private getItemsShown(): number {\n const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n if (this.items && this.items.length === 1) {\n return 0;\n }\n return this.itemsShown ?? defaultItemsShown;\n }\n\n private setupForVirtualScrollingAfterRendering() {\n if (!this.virtualScroll \|\| this.menuWrapper == null) return;\n\n this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n // set menu height to proper height once the item is rendered.\n const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n if (menuItemHeight != null && menuItemHeight > 0) {\n this.sixMenuItemHeight = menuItemHeight;\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.menu == null) return [];\n\n if (this.items != null) {\n return this.items.map(mapToMenuItem);\n }\n\n const slot = this.menu.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements({ flatten: true })].filter(\n (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n );\n }\n\n private getActiveItemIndex() {\n const items = this.getItems();\n const selectedItem = this.getActiveItem();\n if (selectedItem != null) {\n const itemIndex = items.indexOf(selectedItem);\n if (itemIndex > -1) {\n return itemIndex;\n }\n }\n const sixMenuItems = this.extractItemsFromDOM();\n return sixMenuItems.findIndex(isFocusedMenuItem);\n }\n\n private getActiveItem(): HTMLSixMenuItemElement \| undefined {\n const activeElement = this.getItems().find((i) => i === document.activeElement);\n if (activeElement != null) {\n return activeElement;\n }\n return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n }\n\n private extractItemsFromDOM() {\n return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n }\n\n private setActiveItem(item: HTMLSixMenuItemElement) {\n item?.setFocus();\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const clickedItem = target.closest('six-menu-item');\n if (clickedItem && !clickedItem.disabled) {\n this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disableKeyboardHandling) {\n return;\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const activeItem = this.getActiveItem();\n event.preventDefault();\n\n if (activeItem != null) {\n this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n }\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n let indexOfActiveItem = this.getActiveItemIndex();\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n indexOfActiveItem++;\n } else if (event.key === 'ArrowUp') {\n indexOfActiveItem--;\n } else if (event.key === 'Home') {\n indexOfActiveItem = 0;\n } else if (event.key === 'End') {\n indexOfActiveItem = items.length - 1;\n }\n\n if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n this.setActiveItem(items[indexOfActiveItem]);\n\n return;\n }\n }\n\n void this.typeToSelect(event.key);\n }\n\n private getMenuWrapperStyle() {\n const styles: Partial<StyleDeclaration> = {};\n if (this.getItemsShown() > 0) {\n // calculate the proper height to show the correct number of items\n styles.height = `${(this.getItemsShown() ?? 0) this.sixMenuItemHeight}px`;\n } else if (this.items && this.items.length === 1) {\n styles.height = 'auto';\n }\n return {\n ...styles,\n };\n }\n\n private getMenuContainerStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll) {\n // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n }\n\n return {\n ...styles,\n };\n }\n\n private getScrollbarGhostStyle() {\n const styles: Partial<StyleDeclaration> = {};\n if (this.virtualScroll && this.items !== null && this.items.length > 1) {\n styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n }\n return {\n ...styles,\n };\n }\n\n private renderItems() {\n if (this.items === undefined \|\| this.items === null) {\n return;\n }\n\n if (!this.virtualScroll) {\n return this.items.map(mapToMenuItem);\n }\n\n return this.items\n .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n .map(({ value, label }: SixMenuItemData) => (\n <six-menu-item checkType=\"check\" key={value} value={value}>\n {label}\n </six-menu-item>\n ));\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.menuWrapper = el)}\n style={this.getMenuWrapperStyle()}\n part=\"wrapper\"\n class={{\n menu: true,\n '.no-shadow': this.removeBoxShadow,\n }}\n >\n <div\n ref={(el) => (this.menu = el)}\n part=\"base\"\n role=\"menu\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n tabIndex={0}\n style={this.getMenuContainerStyle()}\n >\n <slot />\n {this.renderItems()}\n </div>\n {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-search-field.js CHANGED Viewed

@@ -47,7 +47,7 @@ const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField e
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { key: 'f1a0e877abffb212e7876237a294256446ce9414', class: "search-box" }, h("six-input", { key: '371999a3d7a5063f1b29494763444bdb20317146', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '8c9c517d8f6bbf45beae6c5af88a5b17967401b5', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'f45bb3a2c075675f2216a17e2c28329196685f2e' })));
+        return (h("div", { key: '85db56e598dbf855409cc34f385680472f3ec208', class: "search-box" }, h("six-input", { key: 'caba6d8f93c3d95e18d50de6f01cf87d42c0afc2', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '511f56040dcd6b4a4c9033c6f4191c5ae457839e', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: '6c067ed8f365be18f5c05ef2b9a7b538bba5c015' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]