@six-group/ui-library 4.2.4 → 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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/six-avatar.cjs.entry.js +1 -1
- package/dist/cjs/six-badge.cjs.entry.js +2 -2
- package/dist/cjs/six-button.cjs.entry.js +2 -2
- package/dist/cjs/six-card.cjs.entry.js +1 -1
- package/dist/cjs/six-checkbox_2.cjs.entry.js +2 -2
- package/dist/cjs/six-details.cjs.entry.js +3 -3
- package/dist/cjs/six-dialog.cjs.entry.js +2 -2
- package/dist/cjs/six-drawer.cjs.entry.js +2 -2
- package/dist/cjs/six-dropdown_2.cjs.entry.js +13 -4
- package/dist/cjs/six-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/six-error-page.cjs.entry.js +1 -1
- package/dist/cjs/six-error.cjs.entry.js +1 -1
- package/dist/cjs/six-file-list.cjs.entry.js +1 -1
- package/dist/cjs/six-file-upload.cjs.entry.js +4 -6
- package/dist/cjs/six-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/six-footer.cjs.entry.js +1 -1
- package/dist/cjs/six-group-label.cjs.entry.js +1 -1
- package/dist/cjs/six-icon-button.cjs.entry.js +3 -3
- package/dist/cjs/six-icon.cjs.entry.js +2 -2
- package/dist/cjs/six-input.cjs.entry.js +13 -4
- package/dist/cjs/six-input.cjs.entry.js.map +1 -1
- package/dist/cjs/six-language-switcher.cjs.entry.js +1 -1
- package/dist/cjs/six-search-field.cjs.entry.js +1 -1
- package/dist/cjs/six-select.cjs.entry.js +6 -6
- package/dist/cjs/six-tab-group.cjs.entry.js +2 -2
- package/dist/cjs/six-textarea.cjs.entry.js +1 -1
- package/dist/cjs/six-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/ui-library.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/six-avatar/six-avatar.js +1 -1
- package/dist/collection/components/six-badge/six-badge.js +2 -2
- package/dist/collection/components/six-button/six-button.js +2 -2
- package/dist/collection/components/six-card/six-card.js +1 -1
- package/dist/collection/components/six-checkbox/six-checkbox.js +2 -2
- package/dist/collection/components/six-details/six-details.js +3 -3
- package/dist/collection/components/six-dialog/six-dialog.js +2 -2
- package/dist/collection/components/six-drawer/six-drawer.js +2 -2
- package/dist/collection/components/six-error/six-error.js +1 -1
- package/dist/collection/components/six-error-page/six-error-page.js +1 -1
- package/dist/collection/components/six-file-list/six-file-list.js +1 -1
- package/dist/collection/components/six-file-upload/six-file-upload.js +4 -6
- package/dist/collection/components/six-file-upload/six-file-upload.js.map +1 -1
- package/dist/collection/components/six-footer/six-footer.js +1 -1
- package/dist/collection/components/six-group-label/six-group-label.js +1 -1
- package/dist/collection/components/six-icon/six-icon.js +2 -2
- package/dist/collection/components/six-icon-button/six-icon-button.js +3 -3
- package/dist/collection/components/six-input/six-input.css +1 -0
- package/dist/collection/components/six-input/six-input.js +40 -4
- package/dist/collection/components/six-input/six-input.js.map +1 -1
- package/dist/collection/components/six-language-switcher/six-language-switcher.js +1 -1
- package/dist/collection/components/six-menu/six-menu.js +13 -4
- package/dist/collection/components/six-menu/six-menu.js.map +1 -1
- package/dist/collection/components/six-menu/test/six-menu.spec.js +1 -1
- package/dist/collection/components/six-menu/test/six-menu.spec.js.map +1 -1
- package/dist/collection/components/six-search-field/six-search-field.js +1 -1
- package/dist/collection/components/six-select/six-select.js +6 -6
- package/dist/collection/components/six-tab-group/six-tab-group.js +2 -2
- package/dist/collection/components/six-textarea/six-textarea.css +5 -0
- package/dist/components/six-avatar.js +1 -1
- package/dist/components/six-badge.js +2 -2
- package/dist/components/six-button2.js +2 -2
- package/dist/components/six-card.js +1 -1
- package/dist/components/six-checkbox2.js +2 -2
- package/dist/components/six-details2.js +3 -3
- package/dist/components/six-dialog.js +2 -2
- package/dist/components/six-drawer.js +2 -2
- package/dist/components/six-error-page.js +1 -1
- package/dist/components/six-error2.js +1 -1
- package/dist/components/six-file-list.js +1 -1
- package/dist/components/six-file-upload.js +4 -6
- package/dist/components/six-file-upload.js.map +1 -1
- package/dist/components/six-footer.js +1 -1
- package/dist/components/six-group-label.js +1 -1
- package/dist/components/six-icon-button2.js +3 -3
- package/dist/components/six-icon2.js +2 -2
- package/dist/components/six-input2.js +14 -4
- package/dist/components/six-input2.js.map +1 -1
- package/dist/components/six-language-switcher.js +1 -1
- package/dist/components/six-menu2.js +13 -4
- package/dist/components/six-menu2.js.map +1 -1
- package/dist/components/six-search-field.js +1 -1
- package/dist/components/six-select.js +6 -6
- package/dist/components/six-tab-group.js +2 -2
- package/dist/components/six-textarea.js +1 -1
- package/dist/components/six-textarea.js.map +1 -1
- package/dist/components.json +52 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/six-avatar.entry.js +1 -1
- package/dist/esm/six-badge.entry.js +2 -2
- package/dist/esm/six-button.entry.js +2 -2
- package/dist/esm/six-card.entry.js +1 -1
- package/dist/esm/six-checkbox_2.entry.js +2 -2
- package/dist/esm/six-details.entry.js +3 -3
- package/dist/esm/six-dialog.entry.js +2 -2
- package/dist/esm/six-drawer.entry.js +2 -2
- package/dist/esm/six-dropdown_2.entry.js +13 -4
- package/dist/esm/six-dropdown_2.entry.js.map +1 -1
- package/dist/esm/six-error-page.entry.js +1 -1
- package/dist/esm/six-error.entry.js +1 -1
- package/dist/esm/six-file-list.entry.js +1 -1
- package/dist/esm/six-file-upload.entry.js +4 -6
- package/dist/esm/six-file-upload.entry.js.map +1 -1
- package/dist/esm/six-footer.entry.js +1 -1
- package/dist/esm/six-group-label.entry.js +1 -1
- package/dist/esm/six-icon-button.entry.js +3 -3
- package/dist/esm/six-icon.entry.js +2 -2
- package/dist/esm/six-input.entry.js +13 -4
- package/dist/esm/six-input.entry.js.map +1 -1
- package/dist/esm/six-language-switcher.entry.js +1 -1
- package/dist/esm/six-search-field.entry.js +1 -1
- package/dist/esm/six-select.entry.js +6 -6
- package/dist/esm/six-tab-group.entry.js +2 -2
- package/dist/esm/six-textarea.entry.js +1 -1
- package/dist/esm/six-textarea.entry.js.map +1 -1
- package/dist/esm/ui-library.js +1 -1
- package/dist/types/components/six-input/six-input.d.ts +9 -1
- package/dist/types/components/six-menu/six-menu.d.ts +1 -1
- package/dist/types/components.d.ts +7 -1
- package/dist/ui-library/p-037afc74.entry.js +2 -0
- package/dist/ui-library/p-037afc74.entry.js.map +1 -0
- package/dist/ui-library/{p-785810fa.entry.js → p-049c8910.entry.js} +2 -2
- package/dist/ui-library/{p-82bd8781.entry.js → p-0c129b61.entry.js} +2 -2
- package/dist/ui-library/p-11344bb8.entry.js +2 -0
- package/dist/ui-library/p-18b9189f.entry.js +2 -0
- package/dist/ui-library/p-18b9189f.entry.js.map +1 -0
- package/dist/ui-library/p-1adc26f2.entry.js +2 -0
- package/dist/ui-library/p-1adc26f2.entry.js.map +1 -0
- package/dist/ui-library/p-347e568f.entry.js +2 -0
- package/dist/ui-library/p-36d5f98a.entry.js +2 -0
- package/dist/ui-library/{p-c1d68730.entry.js → p-37433242.entry.js} +2 -2
- package/dist/ui-library/{p-a8863197.entry.js → p-416b0439.entry.js} +2 -2
- package/dist/ui-library/{p-03d1b956.entry.js → p-4bc7bbdb.entry.js} +2 -2
- package/dist/ui-library/{p-b4bc4915.entry.js → p-63ee5e7e.entry.js} +2 -2
- package/dist/ui-library/{p-7561b336.entry.js → p-6b40c40c.entry.js} +2 -2
- package/dist/ui-library/p-6b40c40c.entry.js.map +1 -0
- package/dist/ui-library/{p-39ff5f61.entry.js → p-7bdd1116.entry.js} +2 -2
- package/dist/ui-library/{p-c35a7cef.entry.js → p-99f6fe01.entry.js} +2 -2
- package/dist/ui-library/{p-9bc1639b.entry.js → p-b335ed9c.entry.js} +2 -2
- package/dist/ui-library/{p-19560508.entry.js → p-b7c68f74.entry.js} +2 -2
- package/dist/ui-library/{p-45003bae.entry.js → p-d1a2f84b.entry.js} +2 -2
- package/dist/ui-library/{p-d07b549f.entry.js → p-d88b9c16.entry.js} +2 -2
- package/dist/ui-library/{p-3603dd96.entry.js → p-d9586999.entry.js} +2 -2
- package/dist/ui-library/{p-8fb96142.entry.js → p-e14d78e9.entry.js} +2 -2
- package/dist/ui-library/{p-6888b9ee.entry.js → p-e9b8ad98.entry.js} +2 -2
- package/dist/ui-library/{p-ac00076d.entry.js → p-ebbe9bdc.entry.js} +2 -2
- package/dist/ui-library/ui-library.esm.js +1 -1
- package/dist/ui-library/ui-library.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/ui-library/p-060069d4.entry.js +0 -2
- package/dist/ui-library/p-060069d4.entry.js.map +0 -1
- package/dist/ui-library/p-2c25cb61.entry.js +0 -2
- package/dist/ui-library/p-2c25cb61.entry.js.map +0 -1
- package/dist/ui-library/p-7561b336.entry.js.map +0 -1
- package/dist/ui-library/p-89db9a8b.entry.js +0 -2
- package/dist/ui-library/p-a7e2f511.entry.js +0 -2
- package/dist/ui-library/p-a7e2f511.entry.js.map +0 -1
- package/dist/ui-library/p-ab921403.entry.js +0 -2
- package/dist/ui-library/p-fe37dadf.entry.js +0 -2
- /package/dist/ui-library/{p-785810fa.entry.js.map → p-049c8910.entry.js.map} +0 -0
- /package/dist/ui-library/{p-82bd8781.entry.js.map → p-0c129b61.entry.js.map} +0 -0
- /package/dist/ui-library/{p-fe37dadf.entry.js.map → p-11344bb8.entry.js.map} +0 -0
- /package/dist/ui-library/{p-89db9a8b.entry.js.map → p-347e568f.entry.js.map} +0 -0
- /package/dist/ui-library/{p-ab921403.entry.js.map → p-36d5f98a.entry.js.map} +0 -0
- /package/dist/ui-library/{p-c1d68730.entry.js.map → p-37433242.entry.js.map} +0 -0
- /package/dist/ui-library/{p-a8863197.entry.js.map → p-416b0439.entry.js.map} +0 -0
- /package/dist/ui-library/{p-03d1b956.entry.js.map → p-4bc7bbdb.entry.js.map} +0 -0
- /package/dist/ui-library/{p-b4bc4915.entry.js.map → p-63ee5e7e.entry.js.map} +0 -0
- /package/dist/ui-library/{p-39ff5f61.entry.js.map → p-7bdd1116.entry.js.map} +0 -0
- /package/dist/ui-library/{p-c35a7cef.entry.js.map → p-99f6fe01.entry.js.map} +0 -0
- /package/dist/ui-library/{p-9bc1639b.entry.js.map → p-b335ed9c.entry.js.map} +0 -0
- /package/dist/ui-library/{p-19560508.entry.js.map → p-b7c68f74.entry.js.map} +0 -0
- /package/dist/ui-library/{p-45003bae.entry.js.map → p-d1a2f84b.entry.js.map} +0 -0
- /package/dist/ui-library/{p-d07b549f.entry.js.map → p-d88b9c16.entry.js.map} +0 -0
- /package/dist/ui-library/{p-3603dd96.entry.js.map → p-d9586999.entry.js.map} +0 -0
- /package/dist/ui-library/{p-8fb96142.entry.js.map → p-e14d78e9.entry.js.map} +0 -0
- /package/dist/ui-library/{p-6888b9ee.entry.js.map → p-e9b8ad98.entry.js.map} +0 -0
- /package/dist/ui-library/{p-ac00076d.entry.js.map → p-ebbe9bdc.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixInputCss","SixInputStyle0","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleChange","event","stopPropagation","nativeInput","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleClearClick","sixClear","focus","handleKeyDown","hasModifier","metaKey","ctrlKey","shiftKey","altKey","key","setTimeout","defaultPrevented","isComposing","submitForm","host","handlePasswordToggle","isPasswordVisible","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","hasErrorSlot","handleLabelChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","disconnectedCallback","removeEventListener","removeAll","setFocus","options","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","getSelectionRange","_b","undefined","_d","_c","_f","_e","setRangeText","replacement","start","end","selectMode","toString","render","h","FormControl","label","helpText","errorText","errorTextCount","hasErrorTextSlot","size","disabled","required","displayError","invalid","part","class","input","line","pill","dropdownSearch","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","onKeyDown","clearable","onClick","tabindex","togglePassword"],"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"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as r,g as o}from"./p-05eb1bab.js";import{F as i}from"./p-605bdd81.js";import{h as a}from"./p-0cebf1d2.js";import{E as s}from"./p-8bfb4bfc.js";const l=':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{--height:100%;display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);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;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;height:calc(var(--height) - 2 * var(--six-border-width));font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';const n=l;let h=0;const c=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change",7);this.sixInput=e(this,"six-textarea-input",7);this.sixFocus=e(this,"six-textarea-focus",7);this.sixBlur=e(this,"six-textarea-blur",7);this.inputId=`textarea-${++h}`;this.labelId=`textarea-label-${h}`;this.helpTextId=`textarea-help-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new s;this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.handleChange=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.sixChange.emit()}};this.handleInput=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleSlotChange=()=>{this.hasLabelSlot=a(this.host,"label");this.hasHelpTextSlot=a(this.host,"help-text");this.hasErrorTextSlot=a(this.host,"error-text")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.size="medium";this.name="";this.value="";this.helpText="";this.placeholder=undefined;this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.inputmode=undefined}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){this.setTextareaHeight()}handleValueChange(){this.value=this.getValue();if(this.nativeTextarea!=null){if(this.nativeTextarea.value!==this.value){this.nativeTextarea.value=this.value}}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-textarea-input","input",this.host);this.eventListeners.forward("six-textarea-change","change",this.host);this.eventListeners.forward("six-textarea-focus","focus",this.host);this.eventListeners.forward("six-textarea-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();if(this.nativeTextarea!=null){this.resizeObserver.observe(this.nativeTextarea)}}disconnectedCallback(){var t;if(this.nativeTextarea!=null){this.resizeObserver.unobserve(this.nativeTextarea)}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;(e=this.nativeTextarea)===null||e===void 0?void 0:e.focus(t)}async removeFocus(){var t;(t=this.nativeTextarea)===null||t===void 0?void 0:t.blur()}async select(){var t;return(t=this.nativeTextarea)===null||t===void 0?void 0:t.select()}async setSelectionRange(t,e,r="none"){var o;return(o=this.nativeTextarea)===null||o===void 0?void 0:o.setSelectionRange(t,e,r)}async setRangeText(t,e,r,o="preserve"){if(this.nativeTextarea==null)return;this.nativeTextarea.setRangeText(t,e,r,o);if(this.getValue()!==this.nativeTextarea.value){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}setTextareaHeight(){if(this.nativeTextarea==null)return;if(this.resize==="auto"){this.nativeTextarea.style.height="auto";this.nativeTextarea.style.height=this.nativeTextarea.scrollHeight+"px"}else{this.nativeTextarea.style.height=undefined}}getValue(){var t;return((t=this.value)!==null&&t!==void 0?t:"").toString()}render(){return r(i,{key:"e35fce4a2f60bd7710763a15475a2e02d301f9f8",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.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{key:"f718c972dd419f691d57ee7f658c08523a2a6619",part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":this.getValue().length===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{key:"5ce31d7ee232d579f53061388fc5746e4ef685c4",part:"textarea",ref:t=>this.nativeTextarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.getValue(),autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};c.style=n;export{c as six_textarea};
|
|
2
|
+
//# sourceMappingURL=p-1adc26f2.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixTextareaCss","SixTextareaStyle0","id","SixTextarea","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","resizeObserver","ResizeObserver","setTextareaHeight","handleChange","nativeTextarea","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","hasErrorTextSlot","handleLabelChange","handleRowsChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","removeEventListener","removeAll","setFocus","options","focus","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","resize","style","height","scrollHeight","undefined","toString","render","h","FormControl","key","label","helpText","errorText","errorTextCount","size","disabled","required","displayError","invalid","part","class","textarea","length","ref","el","name","placeholder","readOnly","readonly","rows","minLength","minlength","maxLength","maxlength","autoCapitalize","autocapitalize","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","inputMode","inputmode","onChange","onInput","onFocus","onBlur"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --height: The textarea height.\n */\n:host {\n --height: 100%;\n display: block;\n}\n\n.textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n line-height: var(--six-line-height-normal);\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 transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &:hover:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .textarea__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.textarea--focused:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n border-color: var(--six-input-border-color-focus);\n color: var(--six-input-color-focus);\n\n .textarea__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.textarea--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 .textarea__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.textarea__control {\n flex: 1 1 auto;\n height: calc(var(--height) - 2 * var(--six-border-width));\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--sl-input-color);\n border: none;\n background: none;\n box-shadow: none;\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 &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-small);\n }\n}\n\n.textarea--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-medium);\n }\n}\n\n.textarea--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\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 { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\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 textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. 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, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /** The textarea's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The textarea's name attribute. */\n @Prop({ reflect: true }) name = '';\n\n /** The textarea's value attribute. */\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /** The textarea's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** The textarea's placeholder text. */\n @Prop() placeholder?: string;\n\n /** The number of rows to display by default. */\n @Prop() rows = 4;\n\n /** Controls how the textarea can be resized. */\n @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n /** Set to true to disable the textarea. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Set to true for a readonly textarea. */\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 /** Set to true to show an asterisk beneath the label. */\n @Prop() required = 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 /** The textarea's autocaptialize attribute. */\n @Prop() autocapitalize = 'off';\n\n /** The textarea's autocorrect attribute. */\n @Prop() autocorrect: 'on' | 'off' = 'off';\n\n /** The textarea's autocomplete attribute. */\n @Prop() autocomplete = 'off';\n\n /** The textarea's autofocus attribute. */\n @Prop() autofocus = false;\n\n /** The textarea's spellcheck attribute. */\n @Prop() spellcheck = false;\n\n /** The textarea's inputmode attribute. */\n @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** Emitted when the control's value changes. Access the new value via event.target.value. */\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control receives input. Access the new value via event.target.value. */\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control loses focus. Access the new value via event.target.value. */\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the textarea. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /** Removes focus fromt the textarea. */\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /** Selects all the text in the input. */\n @Method()\n async select() {\n return this.nativeTextarea?.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.nativeTextarea?.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.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\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 handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string | undefined) = undefined;\n }\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.hasErrorTextSlot}\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 textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,h as s,H as r}from"./p-05eb1bab.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";const b=e;const i=class{constructor(s){o(this,s)}render(){return s(r,{key:"a14bad051db8ef5f053c2576949e23a97393b8bd"},s("slot",{key:"e02884cce6fa685bbcbf01d7314d1494739406d5"}))}};i.style=b;export{i as six_card};
|
|
2
|
+
//# sourceMappingURL=p-347e568f.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as r}from"./p-05eb1bab.js";const t=".six-error-container{text-align:left;color:var(--six-color-danger-800);width:100%;font-size:var(--six-input-help-text-font-size-medium)}";const o=t;const s=class{constructor(r){e(this,r)}render(){return r("div",{key:"06af414764195145d2bad6237e632be9f4d150f1",class:"six-error-container"},r("slot",{key:"95c3422046e15a9fae5c123f0ef518e7d5aa9d8b"}))}};s.style=o;export{s as six_error};
|
|
2
|
+
//# sourceMappingURL=p-36d5f98a.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as o,h as t,g as i}from"./p-05eb1bab.js";import{F as s}from"./p-605bdd81.js";import{h as r,a as l}from"./p-0cebf1d2.js";import{E as n}from"./p-8bfb4bfc.js";const c=':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:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox--focused .checkbox__control{outline:var(--six-focus-ring);outline-offset:0}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);min-width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none;min-width:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';const a=c;let h=0;const d=class{constructor(t){e(this,t);this.sixBlur=o(this,"six-checkbox-blur",7);this.sixChange=o(this,"six-checkbox-change",7);this.sixFocus=o(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++h}`;this.labelId=`checkbox-label-${h}`;this.textId=`checkbox-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new n;this.handleChange=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.indeterminate=false;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleMouseDown=e=>{var o;e.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.checked=false;this.indeterminate=false}handleCheckedChange(){if(this.nativeInput==null)return;this.nativeInput.checked=this.checked;this.checked=this.nativeInput.checked;this.nativeInput.indeterminate=this.indeterminate}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-checkbox-change","change",this.host);this.eventListeners.forward("six-checkbox-blur","blur",this.host);this.eventListeners.forward("six-checkbox-focus","focus",this.host)}disconnectedCallback(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const e=this.nativeInput;if(e==null){return}e.indeterminate=this.indeterminate}async setFocus(e){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(e)}async removeFocus(){var e;(e=this.nativeInput)===null||e===void 0?void 0:e.blur()}handleSlotChange(){this.hasLabelSlot=r(this.host,"label");this.hasErrorSlot=r(this.host,"error-text")}render(){return t(s,{key:"54491495a98aa97389193b9c05dc254f2ca4cc06",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,hasErrorTextSlot:this.hasErrorSlot,errorText:this.errorText,errorTextCount:this.errorTextCount,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},t("label",{key:"dae2b0c1391767645bb66f4828a4f8d8a38deaf3",part:"base",class:{checkbox:true,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},t("span",{key:"ed1796c0cc17867f04d104689d987d65b5bb0392",part:"control",class:"checkbox__control"},this.checked&&t("span",{part:"checked-icon",class:"checkbox__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},t("g",{stroke:"currentColor","stroke-width":"2"},t("g",{transform:"translate(3.428571, 3.428571)"},t("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),t("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&t("span",{part:"indeterminate-icon",class:"checkbox__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},t("g",{stroke:"currentColor","stroke-width":"2"},t("g",{transform:"translate(2.285714, 6.857143)"},t("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),t("input",{key:"36becd2a1efa0d8aca0b5c2b35864b0e3b6c6ea9",ref:e=>this.nativeInput=e,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus})),t("span",{key:"845042ded0f6b244b57c9a1db3d276bfa13a5884",part:"text",id:this.textId,class:"checkbox__text"},t("slot",{key:"8b7107860fe3f1d1fd8ce7ace01750b9a426cada"}))))}get host(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};d.style=a;const x=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}:focus{outline:none}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-x-small) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--active:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item .menu-item__checkbox{margin-top:-1px}.menu-item--checked .menu-item__check{visibility:visible}";const b=x;const m=class{constructor(o){e(this,o);this.handleCheckboxChange=()=>{this.host.dispatchEvent(new Event("click",{bubbles:true,cancelable:true}))};this.hasFocus=false;this.active=false;this.checkType="check";this.checked=false;this.value="";this.disabled=false}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleMouseEnter=this.handleMouseEnter.bind(this);this.handleMouseLeave=this.handleMouseLeave.bind(this);this.handleCheckboxChange=this.handleCheckboxChange.bind(this)}async setFocus(e){var o;(o=this.menuItem)===null||o===void 0?void 0:o.focus(e)}async removeFocus(){var e;(e=this.menuItem)===null||e===void 0?void 0:e.blur()}getTextLabel(){return Promise.resolve(l(this.defaultSlot))}handleBlur(){this.hasFocus=false}handleFocus(){this.hasFocus=true}handleMouseEnter(){this.active=true}handleMouseLeave(){this.active=false;this.hasFocus=false}render(){return t("div",{key:"d8c10ca0fc9bd795b87790337f2cc0c792999685",ref:e=>this.menuItem=e,part:"base",class:{"menu-item":true,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--focused":this.hasFocus,"menu-item--active":this.active},role:"menuitem","aria-disabled":this.disabled?"true":"false","aria-checked":this.checked?"true":"false",tabIndex:!this.disabled?0:undefined,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},this.checkType==="checkbox"&&t("span",{class:"menu-item__checkbox"},t("six-checkbox",{"onSix-checkbox-change":this.handleCheckboxChange,disabled:this.disabled,checked:this.checked})),t("span",{key:"470f2fee47a4120c0dead3b7996220af9e5274d1",part:"prefix",class:"menu-item__prefix"},t("slot",{key:"fdddb68cb266d02f6a6a2b46ffcdecb1d8eb32db",name:"prefix"})),t("span",{key:"6d9fe694ce0e07f2aac3604b905f9194f4764057",part:"label",class:"menu-item__label"},t("slot",{key:"ef2903a04191f78955802da5edefd32583305068",ref:e=>this.defaultSlot=e})),t("span",{key:"d4f6ee6c2789c33deaf08eb585ec7ca283b59170",part:"suffix",class:"menu-item__suffix"},t("slot",{key:"39a1d59be3d1f9deda4c55b1575a72c647600783",name:"suffix"})),this.checkType==="check"&&t("span",{part:"checked-icon",class:"menu-item__check"},t("six-icon",{size:"small","aria-hidden":"true"},"check")))}get host(){return i(this)}};m.style=b;export{d as six_checkbox,m as six_menu_item};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as o,h as t,g as i}from"./p-05eb1bab.js";import{F as s}from"./p-605bdd81.js";import{h as r,a as l}from"./p-0cebf1d2.js";import{E as n}from"./p-8bfb4bfc.js";const c=':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:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox--focused .checkbox__control{outline:var(--six-focus-ring);outline-offset:0}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);min-width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none;min-width:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';const a=c;let h=0;const d=class{constructor(t){e(this,t);this.sixBlur=o(this,"six-checkbox-blur",7);this.sixChange=o(this,"six-checkbox-change",7);this.sixFocus=o(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++h}`;this.labelId=`checkbox-label-${h}`;this.textId=`checkbox-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new n;this.handleChange=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.indeterminate=false;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleMouseDown=e=>{var o;e.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.checked=false;this.indeterminate=false}handleCheckedChange(){if(this.nativeInput==null)return;this.nativeInput.checked=this.checked;this.checked=this.nativeInput.checked;this.nativeInput.indeterminate=this.indeterminate}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-checkbox-change","change",this.host);this.eventListeners.forward("six-checkbox-blur","blur",this.host);this.eventListeners.forward("six-checkbox-focus","focus",this.host)}disconnectedCallback(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const e=this.nativeInput;if(e==null){return}e.indeterminate=this.indeterminate}async setFocus(e){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(e)}async removeFocus(){var e;(e=this.nativeInput)===null||e===void 0?void 0:e.blur()}handleSlotChange(){this.hasLabelSlot=r(this.host,"label");this.hasErrorSlot=r(this.host,"error-text")}render(){return t(s,{key:"12e158f9bba9dae3abb2db723d16597b232b92f3",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,hasErrorTextSlot:this.hasErrorSlot,errorText:this.errorText,errorTextCount:this.errorTextCount,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},t("label",{key:"a6227229bf66e4faf9eb71a5b2c313d471fed2e9",part:"base",class:{checkbox:true,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},t("span",{key:"1d2ff238550165afeff4670e6a7071368d8a9372",part:"control",class:"checkbox__control"},this.checked&&t("span",{part:"checked-icon",class:"checkbox__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},t("g",{stroke:"currentColor","stroke-width":"2"},t("g",{transform:"translate(3.428571, 3.428571)"},t("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),t("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&t("span",{part:"indeterminate-icon",class:"checkbox__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},t("g",{stroke:"currentColor","stroke-width":"2"},t("g",{transform:"translate(2.285714, 6.857143)"},t("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),t("input",{key:"e6184461c925112762cca5da17cdd5b287a7e88a",ref:e=>this.nativeInput=e,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus})),t("span",{key:"f65e7b7349bb3bc10d1828cb928c377879579944",part:"text",id:this.textId,class:"checkbox__text"},t("slot",{key:"b67fbb40e8c47748e6713b708fc7d64be688dd82"}))))}get host(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};d.style=a;const b=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}:focus{outline:none}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-x-small) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--active:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item .menu-item__checkbox{margin-top:-1px}.menu-item--checked .menu-item__check{visibility:visible}";const x=b;const m=class{constructor(o){e(this,o);this.handleCheckboxChange=()=>{this.host.dispatchEvent(new Event("click",{bubbles:true,cancelable:true}))};this.hasFocus=false;this.active=false;this.checkType="check";this.checked=false;this.value="";this.disabled=false}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleMouseEnter=this.handleMouseEnter.bind(this);this.handleMouseLeave=this.handleMouseLeave.bind(this);this.handleCheckboxChange=this.handleCheckboxChange.bind(this)}async setFocus(e){var o;(o=this.menuItem)===null||o===void 0?void 0:o.focus(e)}async removeFocus(){var e;(e=this.menuItem)===null||e===void 0?void 0:e.blur()}getTextLabel(){return Promise.resolve(l(this.defaultSlot))}handleBlur(){this.hasFocus=false}handleFocus(){this.hasFocus=true}handleMouseEnter(){this.active=true}handleMouseLeave(){this.active=false;this.hasFocus=false}render(){return t("div",{key:"d8c10ca0fc9bd795b87790337f2cc0c792999685",ref:e=>this.menuItem=e,part:"base",class:{"menu-item":true,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--focused":this.hasFocus,"menu-item--active":this.active},role:"menuitem","aria-disabled":this.disabled?"true":"false","aria-checked":this.checked?"true":"false",tabIndex:!this.disabled?0:undefined,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},this.checkType==="checkbox"&&t("span",{class:"menu-item__checkbox"},t("six-checkbox",{"onSix-checkbox-change":this.handleCheckboxChange,disabled:this.disabled,checked:this.checked})),t("span",{key:"470f2fee47a4120c0dead3b7996220af9e5274d1",part:"prefix",class:"menu-item__prefix"},t("slot",{key:"fdddb68cb266d02f6a6a2b46ffcdecb1d8eb32db",name:"prefix"})),t("span",{key:"6d9fe694ce0e07f2aac3604b905f9194f4764057",part:"label",class:"menu-item__label"},t("slot",{key:"ef2903a04191f78955802da5edefd32583305068",ref:e=>this.defaultSlot=e})),t("span",{key:"d4f6ee6c2789c33deaf08eb585ec7ca283b59170",part:"suffix",class:"menu-item__suffix"},t("slot",{key:"39a1d59be3d1f9deda4c55b1575a72c647600783",name:"suffix"})),this.checkType==="check"&&t("span",{part:"checked-icon",class:"menu-item__check"},t("six-icon",{size:"small","aria-hidden":"true"},"check")))}get host(){return i(this)}};m.style=x;export{d as six_checkbox,m as six_menu_item};
|
|
2
|
+
//# sourceMappingURL=p-37433242.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,h as o}from"./p-05eb1bab.js";const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r,h as o}from"./p-05eb1bab.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";const a=e;const s=class{constructor(o){r(this,o);this.type="primary";this.pill=false;this.pulse=false}render(){return o("span",{key:"5ccb11ed2b9b1da2aa08e34be5861e554f92ee9d",part:"base",class:{badge:true,"badge--primary":this.type==="primary","badge--secondary":this.type==="secondary","badge--success":this.type==="success","badge--warning":this.type==="warning","badge--danger":this.type==="danger","badge--action":this.type==="action","badge--info":this.type==="info","badge--pill":this.pill,"badge--pulse":this.pulse},role:"status"},o("slot",{key:"0de498349b0953001942ed8d831619b196dffc27"}))}};s.style=a;export{s as six_badge};
|
|
2
|
+
//# sourceMappingURL=p-416b0439.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,h as i}from"./p-05eb1bab.js";const t=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;--size:2rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--size);height:var(--size);background-color:var(--six-avatar-background-color);font-family:var(--six-font-sans);font-size:calc(var(--size) * 0.5);font-weight:var(--six-font-weight-normal);color:var(--six-avatar-color);overflow:hidden;user-select:none;vertical-align:middle;cursor:pointer;outline:none}.avatar:hover{box-shadow:var(--six-shadow-medium)}.avatar--circle{border-radius:var(--six-border-radius-circle)}.avatar--rounded{border-radius:var(--six-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}";const r=t;const e=class{constructor(i){a(this,i);this.handleImageError=()=>{this.hasError=true};this.hasError=false;this.image="";this.alt="";this.initials="";this.shape="circle"}render(){return i("div",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as a,h as i}from"./p-05eb1bab.js";const t=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;--size:2rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--size);height:var(--size);background-color:var(--six-avatar-background-color);font-family:var(--six-font-sans);font-size:calc(var(--size) * 0.5);font-weight:var(--six-font-weight-normal);color:var(--six-avatar-color);overflow:hidden;user-select:none;vertical-align:middle;cursor:pointer;outline:none}.avatar:hover{box-shadow:var(--six-shadow-medium)}.avatar--circle{border-radius:var(--six-border-radius-circle)}.avatar--rounded{border-radius:var(--six-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}";const r=t;const e=class{constructor(i){a(this,i);this.handleImageError=()=>{this.hasError=true};this.hasError=false;this.image="";this.alt="";this.initials="";this.shape="circle"}render(){return i("div",{key:"d2a98a9d561a826a49fff6f7b9e40faa9a970d49",part:"base",class:{avatar:true,"avatar--circle":this.shape==="circle","avatar--rounded":this.shape==="rounded","avatar--square":this.shape==="square"},role:"image","aria-label":this.alt,tabIndex:0},this.initials===""&&i("div",{part:"icon",class:"avatar__icon"},i("slot",{name:"icon"},i("six-icon",null,"person"))),this.initials&&i("div",{part:"initials",class:"avatar__initials"},this.initials),this.image&&!this.hasError&&i("img",{part:"image",class:"avatar__image",src:this.image,onError:this.handleImageError}))}};e.style=r;export{e as six_avatar};
|
|
2
|
+
//# sourceMappingURL=p-4bc7bbdb.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as o,h as i,g as r}from"./p-05eb1bab.js";import{s}from"./p-8227aaed.js";function a(t,o,i={duration:150,easing:"ease",fill:"both"}){const r=o.getBoundingClientRect();const s=t.getBoundingClientRect();const a=r.left-s.left;const e=r.top-s.top;const l=r.width/s.width;const n=r.height/s.height;t.animate([{transformOrigin:"top left",transform:`translate(${a}px, ${e}px) scale(${l}, ${n})`},{transformOrigin:"top left",transform:"none"}],i)}const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const l=e;const n=class{constructor(i){t(this,i);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.handleClick=t=>{const o=t.target;const i=o.closest("six-tab");const r=i===null||i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(i!=null){this.setActiveTab(i)}};this.handleKeyDown=t=>{if(this.nav==null)return;const o=t.target;const i=o.closest("six-tab");const r=i===null||i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const i=this.getAllTabs();let r=i.indexOf(o);if(t.key==="Home"){r=0}else if(t.key==="End"){r=i.length-1}else if(t.key==="ArrowLeft"){r=Math.max(0,r-1)}else if(t.key==="ArrowRight"){r=Math.min(i.length-1,r+1)}i[r].setFocus({preventScroll:true});this.setActiveTab(i[r]);if(["top","bottom"].includes(this.placement)){s(i[r],this.nav,"horizontal")}t.preventDefault()}}};this.handleScrollLeft=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})};this.handleScrollRight=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})};this.hasLeftControl=false;this.hasRightControl=false;this.placement="top";this.noScrollControls=false}handleNoScrollControlsChange(){this.updateScrollControls()}componentDidLoad(){if(this.tabGroup==null||this.nav==null)return;const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.nav.addEventListener("scroll",(()=>{if(this.nav==null){return}this.hasRightControl=this.calculateRightControlVisibility();this.hasLeftControl=this.calculateLeftControlVisibility()}));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>{var o;return!["aria-labelledby","aria-controls"].includes((o=t.attributeName)!==null&&o!==void 0?o:"")}))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){if(this.mutationObserver==null||this.tabGroup==null||this.nav==null||this.resizeObserver==null){return}this.mutationObserver.disconnect();this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const i=o.find((o=>o.panel===t));if(i!=null){this.setActiveTab(i)}}getAllTabs(t=false){var o;const i=(o=this.tabs)===null||o===void 0?void 0:o.querySelector("slot");if(i==null)return[];return[...i.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){var t;const o=(t=this.body)===null||t===void 0?void 0:t.querySelector("slot");if(o==null)return[];return[...o.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}calculateRightControlVisibility(){var t,o,i;if(this.nav==null){return false}return Math.abs((t=this.nav)===null||t===void 0?void 0:t.scrollLeft)+((o=this.nav)===null||o===void 0?void 0:o.clientWidth)<((i=this.nav)===null||i===void 0?void 0:i.scrollWidth)-1}calculateLeftControlVisibility(){var t;if(this.nav==null){return false}return Math.abs((t=this.nav)===null||t===void 0?void 0:t.scrollLeft)>0}updateScrollControls(){if(this.nav==null)return;this.hasRightControl=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.calculateRightControlVisibility();this.hasLeftControl=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.calculateLeftControlVisibility()}setActiveTab(t,o=true){var i,r,e;if(this.nav==null)return;const l=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tab__indicator");const n=(e=(r=this.getActiveTab())===null||r===void 0?void 0:r.shadowRoot)===null||e===void 0?void 0:e.querySelector(".tab__indicator");if(n!=null&&l!=null){a(l,n)}if(t!==this.activeTab&&!t.disabled){const i=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>{var o;return t.active=t.name===((o=this.activeTab)===null||o===void 0?void 0:o.panel)}));if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(i!=null){this.sixTabHide.emit({name:i.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{var i,r;const s=o.find((o=>o.name===t.panel));if(s!=null){t.setAttribute("aria-controls",(i=s.getAttribute("id"))!==null&&i!==void 0?i:"");s.setAttribute("aria-labelledby",(r=t.getAttribute("id"))!==null&&r!==void 0?r:"")}}))}render(){return i("div",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as o,h as i,g as r}from"./p-05eb1bab.js";import{s}from"./p-8227aaed.js";function a(t,o,i={duration:150,easing:"ease",fill:"both"}){const r=o.getBoundingClientRect();const s=t.getBoundingClientRect();const a=r.left-s.left;const e=r.top-s.top;const l=r.width/s.width;const n=r.height/s.height;t.animate([{transformOrigin:"top left",transform:`translate(${a}px, ${e}px) scale(${l}, ${n})`},{transformOrigin:"top left",transform:"none"}],i)}const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const l=e;const n=class{constructor(i){t(this,i);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.handleClick=t=>{const o=t.target;const i=o.closest("six-tab");const r=i===null||i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(i!=null){this.setActiveTab(i)}};this.handleKeyDown=t=>{if(this.nav==null)return;const o=t.target;const i=o.closest("six-tab");const r=i===null||i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const i=this.getAllTabs();let r=i.indexOf(o);if(t.key==="Home"){r=0}else if(t.key==="End"){r=i.length-1}else if(t.key==="ArrowLeft"){r=Math.max(0,r-1)}else if(t.key==="ArrowRight"){r=Math.min(i.length-1,r+1)}i[r].setFocus({preventScroll:true});this.setActiveTab(i[r]);if(["top","bottom"].includes(this.placement)){s(i[r],this.nav,"horizontal")}t.preventDefault()}}};this.handleScrollLeft=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})};this.handleScrollRight=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})};this.hasLeftControl=false;this.hasRightControl=false;this.placement="top";this.noScrollControls=false}handleNoScrollControlsChange(){this.updateScrollControls()}componentDidLoad(){if(this.tabGroup==null||this.nav==null)return;const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.nav.addEventListener("scroll",(()=>{if(this.nav==null){return}this.hasRightControl=this.calculateRightControlVisibility();this.hasLeftControl=this.calculateLeftControlVisibility()}));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>{var o;return!["aria-labelledby","aria-controls"].includes((o=t.attributeName)!==null&&o!==void 0?o:"")}))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){if(this.mutationObserver==null||this.tabGroup==null||this.nav==null||this.resizeObserver==null){return}this.mutationObserver.disconnect();this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const i=o.find((o=>o.panel===t));if(i!=null){this.setActiveTab(i)}}getAllTabs(t=false){var o;const i=(o=this.tabs)===null||o===void 0?void 0:o.querySelector("slot");if(i==null)return[];return[...i.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){var t;const o=(t=this.body)===null||t===void 0?void 0:t.querySelector("slot");if(o==null)return[];return[...o.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}calculateRightControlVisibility(){var t,o,i;if(this.nav==null){return false}return Math.abs((t=this.nav)===null||t===void 0?void 0:t.scrollLeft)+((o=this.nav)===null||o===void 0?void 0:o.clientWidth)<((i=this.nav)===null||i===void 0?void 0:i.scrollWidth)-1}calculateLeftControlVisibility(){var t;if(this.nav==null){return false}return Math.abs((t=this.nav)===null||t===void 0?void 0:t.scrollLeft)>0}updateScrollControls(){if(this.nav==null)return;this.hasRightControl=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.calculateRightControlVisibility();this.hasLeftControl=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.calculateLeftControlVisibility()}setActiveTab(t,o=true){var i,r,e;if(this.nav==null)return;const l=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tab__indicator");const n=(e=(r=this.getActiveTab())===null||r===void 0?void 0:r.shadowRoot)===null||e===void 0?void 0:e.querySelector(".tab__indicator");if(n!=null&&l!=null){a(l,n)}if(t!==this.activeTab&&!t.disabled){const i=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>{var o;return t.active=t.name===((o=this.activeTab)===null||o===void 0?void 0:o.panel)}));if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(i!=null){this.sixTabHide.emit({name:i.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{var i,r;const s=o.find((o=>o.name===t.panel));if(s!=null){t.setAttribute("aria-controls",(i=s.getAttribute("id"))!==null&&i!==void 0?i:"");s.setAttribute("aria-labelledby",(r=t.getAttribute("id"))!==null&&r!==void 0?r:"")}}))}render(){return i("div",{key:"9752b81f3babdcbe656cc5552b7c07c7cc096d8d",part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasRightControl||this.hasLeftControl},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{key:"d96c9094ddc1a9cd6ad9ac9c5ab559ac703ccd6e",class:"tab-group__nav-container"},this.hasLeftControl&&i("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),i("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},i("div",{key:"288b14b0bbc790f1ae54e2a26693e9b103002715",ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},i("slot",{key:"249ef2f5d67dd3abf35b07028c9d2fe3798ef1ea",name:"nav"}))),this.hasRightControl&&i("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),i("div",{key:"3aa5553829dfefb71bfb725db55db8dc204f93dc",ref:t=>this.body=t,part:"body",class:"tab-group__body"},i("slot",{key:"8d96ff43d62b33d77bea3616ea5ac76ad6b99a76"})))}get host(){return r(this)}static get watchers(){return{noScrollControls:["handleNoScrollControlsChange"]}}};n.style=l;export{n as six_tab_group};
|
|
2
|
+
//# sourceMappingURL=p-63ee5e7e.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as s,g as e}from"./p-05eb1bab.js";import{P as n}from"./p-7f856f00.js";import{E as o}from"./p-8bfb4bfc.js";import{a as r,D as h}from"./p-a1502802.js";import{a as l}from"./p-0cebf1d2.js";function a(t){const i=t.tabIndex;return i>-1}function d(t){if(a(t)){return t}if(t.shadowRoot!=null){const i=[...t.shadowRoot.children].find((t=>a(t)));if(i!=null){return i}}if(t.children!=null){return[...t.children].map((t=>d(t))).at(0)}return undefined}const u=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";const c=u;let f=0;const p=class{constructor(e){t(this,e);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilter=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++f}`;this.isVisible=false;this.resizeObserver=new ResizeObserver(r((()=>this.updatePanelPosition()),100));this.eventListeners=new o;this.getMenuItems=()=>{var t,i,e,n;if(this.options.length>0){return{sixMenuItems:this.renderedOptions.map((t=>s("six-menu-item",{value:t.value},t.label))),selectionContainerItems:[]}}if(this.panel==null)return{sixMenuItems:[],selectionContainerItems:[]};const o=(t=this.panelSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).filter(w).at(0);const r=(i=this.panelSlot)===null||i===void 0?void 0:i.assignedElements({flatten:true}).filter(v).at(0);const h=(o===null||o===void 0?void 0:o.querySelectorAll("six-menu-item"))||[];let l=((e=r===null||r===void 0?void 0:r.querySelector("slot"))===null||e===void 0?void 0:e.assignedElements().filter((t=>m(t))))||[];if(l.length===0){l=Array.from(((n=r===null||r===void 0?void 0:r.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("six-menu-item"))||[])}if(h.length>0||l.length>0){return{sixMenuItems:l,selectionContainerItems:[...h]}}else{return{sixMenuItems:r?Array.from(r.querySelectorAll("six-menu-item")):[],selectionContainerItems:[]}}};this.handleDocumentKeyDown=t=>{var i;const s=t;if(s.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)){if(s.key==="ArrowDown"){const{sixMenuItems:t,selectionContainerItems:i}=this.getMenuItems();const s=[...i,...t].find((t=>t.style.display!=="none"));if(s!=null){s.setFocus()}}}if(s.key==="Tab"){if(this.open&&document.activeElement!=null&&m(document.activeElement)){s.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t,i;const s=this.container.getRootNode()instanceof ShadowRoot?(i=(t=document.activeElement)===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.activeElement:document.activeElement;if((s===null||s===void 0?void 0:s.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}};this.handleDocumentMouseDown=t=>{const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}};this.handlePanelSelect=t=>{const i=t.target;if(this.closeOnSelect&&v(i)){void this.hide();this.focusOnTrigger()}};this.handleTriggerClick=()=>{this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}const i=this.getMenu();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(i==null){return}const s=[...i.querySelectorAll("six-menu-item")];const e=s.at(0);const n=s.at(s.length-1);if(t.key==="ArrowDown"&&e!=null){e.setFocus();return}if(t.key==="ArrowUp"&&n!=null){n.setFocus();return}}const s=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i!=null&&!s.includes(t.key)){void i.typeToSelect(t.key);return}};this.handleTriggerKeyUp=t=>{if(t.key===" "){t.preventDefault()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.handleDropdownScroll=()=>{if(this.scrollPanel==null)return;this.sixScroll.emit({scrollHeight:this.scrollPanel.scrollHeight,scrollTop:this.scrollPanel.scrollTop,scrollbarHeight:this.scrollPanel.offsetHeight*(this.scrollPanel.offsetHeight/this.scrollPanel.scrollHeight),scrollRatio:this.scrollPanel.scrollTop/(this.scrollPanel.scrollHeight-this.scrollPanel.clientHeight)})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=4;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=0;this.disableHideOnEnterAndSpace=false;this.options=[];this.virtualScroll=false;this.matchTriggerWidth=false;this.renderedOptions=[]}get filterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(this.popover==null)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){this.validateOptions()}validateOptions(){if(!Array.isArray(this.options)){this.options=[]}if(this.virtualScroll&&this.options.length===0){console.error("Options must be defined when using virtual scrolling")}this.renderedOptions=[...this.options]}componentWillLoad(){this.validateOptions();if(this.asyncFilter){this.filterDebounce=h}}componentDidLoad(){this.init();if(this.open){void this.show()}}connectedCallback(){this.init()}init(){this.initPopover();const t=this.filterInputElement;if(t!=null){this.eventListeners.add(t,"six-input-input",r((()=>{var i;const s=(i=t.value)!==null&&i!==void 0?i:"";if(this.filter){this.applyFilter(s)}this.emitFilterEvents(s)}),this.filterDebounce))}}applyFilter(t){var i;const s=((i=t.toLowerCase())===null||i===void 0?void 0:i.trim())||"";if(this.options.length>0){this.renderedOptions=this.options.filter((t=>{var i,e,n,o;return t.label&&((e=(i=String(t.label))===null||i===void 0?void 0:i.toLowerCase())===null||e===void 0?void 0:e.includes(s))||t.value&&((o=(n=String(t.value))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(s))}))}else{const{selectionContainerItems:t,sixMenuItems:i}=this.getMenuItems();const e=t.map((t=>t.value));t.forEach((async t=>{t.style.display=await b(t,s)?"unset":"none"}));i.forEach((async t=>{t.style.display=await b(t,s)&&!e.includes(t.value)?"unset":"none"}))}}resetFilter(){if(this.filterInputElement!=null){this.filterInputElement.value="";this.emitFilterEvents("")}if(this.options.length>0){this.renderedOptions=[...this.options]}else{const{selectionContainerItems:t,sixMenuItems:i}=this.getMenuItems();[...t,...i].forEach((t=>t.style.display="unset"))}}emitFilterEvents(t){if(this.filter){this.sixAutoFilter.emit({filterValue:t})}else if(this.asyncFilter){this.sixAsyncFilterFired.emit({filterValue:t})}}initPopover(){if(this.trigger==null||this.positioner==null)return;this.popover=new n(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{if(this.filterEnabled){this.resetFilter()}this.sixAfterHide.emit()},onAfterShow:async()=>{this.sixAfterShow.emit()},onTransitionEnd:()=>{if(!this.open&&this.scrollPanel!=null){this.scrollPanel.scrollTop=0}}})}disconnectedCallback(){var t;this.resizeObserver.disconnect();this.eventListeners.removeAll();void this.hide();(t=this.popover)===null||t===void 0?void 0:t.destroy();this.popover=undefined}async show(){if(this.isVisible||this.popover==null||this.panel==null){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;if(this.trigger!=null){this.resizeObserver.observe(this.trigger)}this.updatePanelPosition();this.popover.show();if(this.filterEnabled&&this.autofocusFilter){requestAnimationFrame((()=>{var t;(t=this.filterInputElement)===null||t===void 0?void 0:t.setFocus()}))}}updatePanelPosition(){if(!this.open){return}if(this.matchTriggerWidth&&this.trigger!=null&&this.panel!=null){const t=this.trigger.getBoundingClientRect().width;this.panel.style.minWidth=`${t}px`}if(this.popover!=null){this.popover.reposition()}}async hide(){this.resizeObserver.disconnect();if(!this.isVisible||this.panel==null||this.popover==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){var t;if(this.trigger==null)return;const i=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).at(0);if(i!=null){if(typeof i.setFocus==="function"){i.setFocus()}else if(typeof i.focus==="function"){i.focus()}}}getMenu(){var t;return(t=this.panelSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).filter(v).at(0)}async reposition(){if(this.open&&this.popover!=null){this.popover.reposition()}}updateAccessibleTrigger(){var t;if(this.trigger==null)return;const i=((t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}))||[];const s=i.map(d).at(0);if(s!=null){s.setAttribute("aria-haspopup","true");s.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{key:"6569a6e118fd68e19f14dcae0553e25f81987923",part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{key:"be04c5d687eafa3c58c9fed9cf43f72d43aa45ef",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{key:"fba562d4fc45a0874e5cf8caad5e9710d6dd34e0",name:"trigger",ref:t=>this.triggerSlot=t,onSlotchange:this.handleTriggerSlotChange})),s("div",{key:"d37f1cb0246d47ca34004f35e3575e8433d998c8",ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},s("div",{key:"e6c08b51f39a12259b4d8911770e1e1754dc4b8e",ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId},this.filterEnabled&&s("six-input",{class:{filter:true,"filter-hidden":!this.open},"dropdown-search":true,"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder},s("six-icon",{class:"filter__icon",slot:"suffix",size:"small"},"search")),s("div",{key:"174d0a5dd5965877e9278475112e2f14d959966d",class:{dropdown__panel__scroll:true,"dropdown__panel__scroll--virtual":this.virtualScroll},onScroll:this.handleDropdownScroll,ref:t=>this.scrollPanel=t},s("slot",{key:"fa0fc63a45e693cc6655db03b0382f028aea9473",ref:t=>this.panelSlot=t}),this.options.length>0&&s("six-menu",{part:"menu",items:this.renderedOptions,virtualScroll:this.virtualScroll})),s("slot",{key:"f24f41a9a70f0624078d43eb60b41e841ee90bf7",name:"dropdown-footer"}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"],virtualScroll:["handleOptionsChange"]}}};function v(t){return(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu"}function m(t){return(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item"}function w(t){var i;return((i=t===null||t===void 0?void 0:t.getAttribute("class"))===null||i===void 0?void 0:i.includes("selection-container"))||false}async function b(t,i){return t.value.toLowerCase().includes(i)||(await t.getTextLabel()).toLowerCase().includes(i)}p.style=c;const x=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";const g=x;const _=t=>{var i,s,e;return(e=(s=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const y=t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const k=({value:t,label:i})=>s("six-menu-item",{key:t,value:t},i);const C=5;const I=64;const A=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new o;this.typeToSelectString="";this.handleScrolling=()=>{if(this.menuWrapper==null)return;this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=undefined;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.disableKeyboardHandling=false;this.scrollingIndex=0;this.sixMenuItemHeight=I}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?C:0;return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll||this.menuWrapper==null)return;this.eventListeners.add(this.menuWrapper,"scroll",r(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null||t===void 0?void 0:t.querySelector("six-menu-item"))===null||i===void 0?void 0:i.clientHeight;if(s!=null&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.menu==null)return[];if(this.items!=null){return this.items.map(k)}const t=this.menu.querySelector("slot");if(t==null)return[];return[...t.assignedElements({flatten:true})].filter((t=>y(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();if(i!=null){const s=t.indexOf(i);if(s>-1){return s}}const s=this.extractItemsFromDOM();return s.findIndex(_)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i!=null){return i}return(t=this.extractItemsFromDOM())===null||t===void 0?void 0:t.find(_)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll("six-menu-item"))!==null&&i!==void 0?i:[])}setActiveItem(t){t===null||t===void 0?void 0:t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(this.disableKeyboardHandling){return}if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i!=null){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length>0){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){var t;const i={};if(this.getItemsShown()>0){i.height=`${((t=this.getItemsShown())!==null&&t!==void 0?t:0)*this.sixMenuItemHeight}px`}return Object.assign({},i)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null){t.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(k)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map((({value:t,label:i})=>s("six-menu-item",{checkType:"check",key:t,value:t},i)))}render(){return s("div",{key:"a8806ec6aee657eb677931fc1ba1405caec3e96e",ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,".no-shadow":this.removeBoxShadow}},s("div",{key:"34b85eb38385f88e87f49a6689cf6ad082723a87",ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",{key:"a62dcc8bd5d97a8d479f4a4270aedcb77b729aea"}),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return e(this)}};A.style=g;export{p as six_dropdown,A as six_menu};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-05eb1bab.js";import{P as n}from"./p-7f856f00.js";import{E as o}from"./p-8bfb4bfc.js";import{a as r,D as h}from"./p-a1502802.js";import{a as l}from"./p-0cebf1d2.js";function a(t){const i=t.tabIndex;return i>-1}function d(t){if(a(t)){return t}if(t.shadowRoot!=null){const i=[...t.shadowRoot.children].find((t=>a(t)));if(i!=null){return i}}if(t.children!=null){return[...t.children].map((t=>d(t))).at(0)}return undefined}const u=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";const f=u;let c=0;const p=class{constructor(e){t(this,e);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilter=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++c}`;this.isVisible=false;this.resizeObserver=new ResizeObserver(r((()=>this.updatePanelPosition()),100));this.eventListeners=new o;this.getMenuItems=()=>{var t,i,e,n;if(this.options.length>0){return{sixMenuItems:this.renderedOptions.map((t=>s("six-menu-item",{value:t.value},t.label))),selectionContainerItems:[]}}if(this.panel==null)return{sixMenuItems:[],selectionContainerItems:[]};const o=(t=this.panelSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).filter(w).at(0);const r=(i=this.panelSlot)===null||i===void 0?void 0:i.assignedElements({flatten:true}).filter(v).at(0);const h=(o===null||o===void 0?void 0:o.querySelectorAll("six-menu-item"))||[];let l=((e=r===null||r===void 0?void 0:r.querySelector("slot"))===null||e===void 0?void 0:e.assignedElements().filter((t=>m(t))))||[];if(l.length===0){l=Array.from(((n=r===null||r===void 0?void 0:r.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("six-menu-item"))||[])}if(h.length>0||l.length>0){return{sixMenuItems:l,selectionContainerItems:[...h]}}else{return{sixMenuItems:r?Array.from(r.querySelectorAll("six-menu-item")):[],selectionContainerItems:[]}}};this.handleDocumentKeyDown=t=>{var i;const s=t;if(s.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)){if(s.key==="ArrowDown"){const{sixMenuItems:t,selectionContainerItems:i}=this.getMenuItems();const s=[...i,...t].find((t=>t.style.display!=="none"));if(s!=null){s.setFocus()}}}if(s.key==="Tab"){if(this.open&&document.activeElement!=null&&m(document.activeElement)){s.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t,i;const s=this.container.getRootNode()instanceof ShadowRoot?(i=(t=document.activeElement)===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.activeElement:document.activeElement;if((s===null||s===void 0?void 0:s.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}};this.handleDocumentMouseDown=t=>{const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}};this.handlePanelSelect=t=>{const i=t.target;if(this.closeOnSelect&&v(i)){void this.hide();this.focusOnTrigger()}};this.handleTriggerClick=()=>{this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}const i=this.getMenu();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(i==null){return}const s=[...i.querySelectorAll("six-menu-item")];const e=s.at(0);const n=s.at(s.length-1);if(t.key==="ArrowDown"&&e!=null){e.setFocus();return}if(t.key==="ArrowUp"&&n!=null){n.setFocus();return}}const s=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i!=null&&!s.includes(t.key)){void i.typeToSelect(t.key);return}};this.handleTriggerKeyUp=t=>{if(t.key===" "){t.preventDefault()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.handleDropdownScroll=()=>{if(this.scrollPanel==null)return;this.sixScroll.emit({scrollHeight:this.scrollPanel.scrollHeight,scrollTop:this.scrollPanel.scrollTop,scrollbarHeight:this.scrollPanel.offsetHeight*(this.scrollPanel.offsetHeight/this.scrollPanel.scrollHeight),scrollRatio:this.scrollPanel.scrollTop/(this.scrollPanel.scrollHeight-this.scrollPanel.clientHeight)})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=4;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=0;this.disableHideOnEnterAndSpace=false;this.options=[];this.virtualScroll=false;this.matchTriggerWidth=false;this.renderedOptions=[]}get filterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(this.popover==null)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){this.validateOptions()}validateOptions(){if(!Array.isArray(this.options)){this.options=[]}if(this.virtualScroll&&this.options.length===0){console.error("Options must be defined when using virtual scrolling")}this.renderedOptions=[...this.options]}componentWillLoad(){this.validateOptions();if(this.asyncFilter){this.filterDebounce=h}}componentDidLoad(){this.init();if(this.open){void this.show()}}connectedCallback(){this.init()}init(){this.initPopover();const t=this.filterInputElement;if(t!=null){this.eventListeners.add(t,"six-input-input",r((()=>{var i;const s=(i=t.value)!==null&&i!==void 0?i:"";if(this.filter){this.applyFilter(s)}this.emitFilterEvents(s)}),this.filterDebounce))}}applyFilter(t){var i;const s=((i=t.toLowerCase())===null||i===void 0?void 0:i.trim())||"";if(this.options.length>0){this.renderedOptions=this.options.filter((t=>{var i,e,n,o;return t.label&&((e=(i=String(t.label))===null||i===void 0?void 0:i.toLowerCase())===null||e===void 0?void 0:e.includes(s))||t.value&&((o=(n=String(t.value))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(s))}))}else{const{selectionContainerItems:t,sixMenuItems:i}=this.getMenuItems();const e=t.map((t=>t.value));t.forEach((async t=>{t.style.display=await x(t,s)?"unset":"none"}));i.forEach((async t=>{t.style.display=await x(t,s)&&!e.includes(t.value)?"unset":"none"}))}}resetFilter(){if(this.filterInputElement!=null){this.filterInputElement.value="";this.emitFilterEvents("")}if(this.options.length>0){this.renderedOptions=[...this.options]}else{const{selectionContainerItems:t,sixMenuItems:i}=this.getMenuItems();[...t,...i].forEach((t=>t.style.display="unset"))}}emitFilterEvents(t){if(this.filter){this.sixAutoFilter.emit({filterValue:t})}else if(this.asyncFilter){this.sixAsyncFilterFired.emit({filterValue:t})}}initPopover(){if(this.trigger==null||this.positioner==null)return;this.popover=new n(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{if(this.filterEnabled){this.resetFilter()}this.sixAfterHide.emit()},onAfterShow:async()=>{this.sixAfterShow.emit()},onTransitionEnd:()=>{if(!this.open&&this.scrollPanel!=null){this.scrollPanel.scrollTop=0}}})}disconnectedCallback(){var t;this.resizeObserver.disconnect();this.eventListeners.removeAll();void this.hide();(t=this.popover)===null||t===void 0?void 0:t.destroy();this.popover=undefined}async show(){if(this.isVisible||this.popover==null||this.panel==null){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;if(this.trigger!=null){this.resizeObserver.observe(this.trigger)}this.updatePanelPosition();this.popover.show();if(this.filterEnabled&&this.autofocusFilter){requestAnimationFrame((()=>{var t;(t=this.filterInputElement)===null||t===void 0?void 0:t.setFocus()}))}}updatePanelPosition(){if(!this.open){return}if(this.matchTriggerWidth&&this.trigger!=null&&this.panel!=null){const t=this.trigger.getBoundingClientRect().width;this.panel.style.minWidth=`${t}px`}if(this.popover!=null){this.popover.reposition()}}async hide(){this.resizeObserver.disconnect();if(!this.isVisible||this.panel==null||this.popover==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){var t;if(this.trigger==null)return;const i=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).at(0);if(i!=null){if(typeof i.setFocus==="function"){i.setFocus()}else if(typeof i.focus==="function"){i.focus()}}}getMenu(){var t;return(t=this.panelSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).filter(v).at(0)}async reposition(){if(this.open&&this.popover!=null){this.popover.reposition()}}updateAccessibleTrigger(){var t;if(this.trigger==null)return;const i=((t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}))||[];const s=i.map(d).at(0);if(s!=null){s.setAttribute("aria-haspopup","true");s.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{key:"6569a6e118fd68e19f14dcae0553e25f81987923",part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{key:"be04c5d687eafa3c58c9fed9cf43f72d43aa45ef",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{key:"fba562d4fc45a0874e5cf8caad5e9710d6dd34e0",name:"trigger",ref:t=>this.triggerSlot=t,onSlotchange:this.handleTriggerSlotChange})),s("div",{key:"d37f1cb0246d47ca34004f35e3575e8433d998c8",ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},s("div",{key:"e6c08b51f39a12259b4d8911770e1e1754dc4b8e",ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId},this.filterEnabled&&s("six-input",{class:{filter:true,"filter-hidden":!this.open},"dropdown-search":true,"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder},s("six-icon",{class:"filter__icon",slot:"suffix",size:"small"},"search")),s("div",{key:"174d0a5dd5965877e9278475112e2f14d959966d",class:{dropdown__panel__scroll:true,"dropdown__panel__scroll--virtual":this.virtualScroll},onScroll:this.handleDropdownScroll,ref:t=>this.scrollPanel=t},s("slot",{key:"fa0fc63a45e693cc6655db03b0382f028aea9473",ref:t=>this.panelSlot=t}),this.options.length>0&&s("six-menu",{part:"menu",items:this.renderedOptions,virtualScroll:this.virtualScroll})),s("slot",{key:"f24f41a9a70f0624078d43eb60b41e841ee90bf7",name:"dropdown-footer"}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"],virtualScroll:["handleOptionsChange"]}}};function v(t){return(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu"}function m(t){return(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item"}function w(t){var i;return((i=t===null||t===void 0?void 0:t.getAttribute("class"))===null||i===void 0?void 0:i.includes("selection-container"))||false}async function x(t,i){return t.value.toLowerCase().includes(i)||(await t.getTextLabel()).toLowerCase().includes(i)}p.style=f;const b=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";const g=b;const _=t=>{var i,s,e;return(e=(s=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const y=t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const k=({value:t,label:i})=>s("six-menu-item",{key:t,value:t},i);const C=5;const I=48;const A=64;const O=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new o;this.typeToSelectString="";this.handleScrolling=()=>{if(this.menuWrapper==null)return;this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=undefined;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.disableKeyboardHandling=false;this.scrollingIndex=0;this.sixMenuItemHeight=this.virtualScroll?I:A}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?C:0;if(this.items&&this.items.length===1){return 0}return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll||this.menuWrapper==null)return;this.eventListeners.add(this.menuWrapper,"scroll",r(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null||t===void 0?void 0:t.querySelector("six-menu-item"))===null||i===void 0?void 0:i.clientHeight;if(s!=null&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.menu==null)return[];if(this.items!=null){return this.items.map(k)}const t=this.menu.querySelector("slot");if(t==null)return[];return[...t.assignedElements({flatten:true})].filter((t=>y(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();if(i!=null){const s=t.indexOf(i);if(s>-1){return s}}const s=this.extractItemsFromDOM();return s.findIndex(_)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i!=null){return i}return(t=this.extractItemsFromDOM())===null||t===void 0?void 0:t.find(_)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll("six-menu-item"))!==null&&i!==void 0?i:[])}setActiveItem(t){t===null||t===void 0?void 0:t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(this.disableKeyboardHandling){return}if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i!=null){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length>0){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){var t;const i={};if(this.getItemsShown()>0){i.height=`${((t=this.getItemsShown())!==null&&t!==void 0?t:0)*this.sixMenuItemHeight}px`}else if(this.items&&this.items.length===1){i.height="auto"}return Object.assign({},i)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null&&this.items.length>1){t.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(k)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map((({value:t,label:i})=>s("six-menu-item",{checkType:"check",key:t,value:t},i)))}render(){return s("div",{key:"fa1ad99f966331ac08e3d0278714613476b84953",ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,".no-shadow":this.removeBoxShadow}},s("div",{key:"6a3d5440ad417f969e5862e93e44ff576f043002",ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",{key:"96895a99228cd5407e6a3f60b73d3192bcf3c13a"}),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return e(this)}};O.style=g;export{p as six_dropdown,O as six_menu};
|
|
2
|
+
//# sourceMappingURL=p-6b40c40c.entry.js.map
|