@six-group/ui-library 0.0.0-insider.db2b416 → 0.0.0-insider.e148618
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-checkbox.cjs.entry.js +2 -10
- package/dist/cjs/six-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/six-datepicker.cjs.entry.js +3 -1
- package/dist/cjs/six-datepicker.cjs.entry.js.map +1 -1
- package/dist/cjs/six-radio.cjs.entry.js +9 -17
- package/dist/cjs/six-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/six-select.cjs.entry.js +4 -3
- package/dist/cjs/six-select.cjs.entry.js.map +1 -1
- package/dist/cjs/six-switch.cjs.entry.js +3 -1
- package/dist/cjs/six-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ui-library.cjs.js +1 -1
- package/dist/collection/components/six-checkbox/six-checkbox.js +2 -27
- package/dist/collection/components/six-checkbox/six-checkbox.js.map +1 -1
- package/dist/collection/components/six-datepicker/six-datepicker.js +3 -1
- package/dist/collection/components/six-datepicker/six-datepicker.js.map +1 -1
- package/dist/collection/components/six-radio/six-radio.js +9 -34
- package/dist/collection/components/six-radio/six-radio.js.map +1 -1
- package/dist/collection/components/six-select/six-select.js +4 -3
- package/dist/collection/components/six-select/six-select.js.map +1 -1
- package/dist/collection/components/six-switch/six-switch.js +3 -1
- package/dist/collection/components/six-switch/six-switch.js.map +1 -1
- package/dist/components/six-checkbox.js +3 -12
- package/dist/components/six-checkbox.js.map +1 -1
- package/dist/components/six-datepicker.js +3 -1
- package/dist/components/six-datepicker.js.map +1 -1
- package/dist/components/six-radio.js +10 -19
- package/dist/components/six-radio.js.map +1 -1
- package/dist/components/six-select.js +4 -3
- package/dist/components/six-select.js.map +1 -1
- package/dist/components/six-switch.js +3 -1
- package/dist/components/six-switch.js.map +1 -1
- package/dist/components.json +1 -45
- package/dist/esm/loader.js +1 -1
- package/dist/esm/six-checkbox.entry.js +2 -10
- package/dist/esm/six-checkbox.entry.js.map +1 -1
- package/dist/esm/six-datepicker.entry.js +3 -1
- package/dist/esm/six-datepicker.entry.js.map +1 -1
- package/dist/esm/six-radio.entry.js +9 -17
- package/dist/esm/six-radio.entry.js.map +1 -1
- package/dist/esm/six-select.entry.js +4 -3
- package/dist/esm/six-select.entry.js.map +1 -1
- package/dist/esm/six-switch.entry.js +3 -1
- package/dist/esm/six-switch.entry.js.map +1 -1
- package/dist/esm/ui-library.js +1 -1
- package/dist/types/components/six-checkbox/six-checkbox.d.ts +0 -4
- package/dist/types/components/six-radio/six-radio.d.ts +0 -5
- package/dist/types/components.d.ts +0 -8
- package/dist/ui-library/p-2451cfdc.entry.js +2 -0
- package/dist/ui-library/p-2451cfdc.entry.js.map +1 -0
- package/dist/ui-library/p-264d4ea8.entry.js +2 -0
- package/dist/ui-library/p-264d4ea8.entry.js.map +1 -0
- package/dist/ui-library/{p-f1eb03ba.entry.js → p-3d9de119.entry.js} +2 -2
- package/dist/ui-library/p-3d9de119.entry.js.map +1 -0
- package/dist/ui-library/{p-1730a174.entry.js → p-bf87464b.entry.js} +2 -2
- package/dist/ui-library/p-bf87464b.entry.js.map +1 -0
- package/dist/ui-library/{p-da19c7ce.entry.js → p-ed381ad9.entry.js} +2 -2
- package/dist/ui-library/{p-da19c7ce.entry.js.map → p-ed381ad9.entry.js.map} +1 -1
- 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-1730a174.entry.js.map +0 -1
- package/dist/ui-library/p-cf49252a.entry.js +0 -2
- package/dist/ui-library/p-cf49252a.entry.js.map +0 -1
- package/dist/ui-library/p-e0b13ad3.entry.js +0 -2
- package/dist/ui-library/p-e0b13ad3.entry.js.map +0 -1
- package/dist/ui-library/p-f1eb03ba.entry.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["isValueEmpty","value","Array","isArray","length","sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","touched","eventListeners","EventListeners","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClearClick","event","stopPropagation","clearValues","sixChange","isSelected","handleSelectAll","nonFilteredItems","getItems","filter","item","style","display","keyName","key","keyCode","code","isOpen","multiple","ctrlKey","preventDefault","hasDeselectedOptions","some","opt","disabled","checked","option","forEach","checkedItems","map","handleKeyDown","target","items","firstItem","lastItem","tagName","toLowerCase","_a","dropdown","hide","includes","_b","show","setFocus","_c","_d","menu","typeToSelect","handleLabelClick","box","focus","handleMenuSelect","detail","getValue","v","syncItemsFromValue","handleMenuShow","resizeMenu","resizeObserver","observe","host","handleMenuHide","unobserve","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","handleTagInteraction","path","composedPath","clearButton","find","el","HTMLElement","element","classList","contains","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","getValueAsArray","handleValueChange","connectedCallback","virtualScroll","options","console","error","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","input","ResizeObserver","requestAnimationFrame","add","debounce","enteredValue","inputDebounce","hasSelection","displayLabel","disconnectedCallback","removeEventListener","removeAll","getItemLabel","slot","querySelector","getTextContent","textContent","h","label","querySelectorAll","hasMenuItems","values","String","minWidth","clientWidth","reposition","val","push","displayTags","exportparts","type","size","pill","clearable","onClick","onKeyDown","syncValueFromItems","maxTagsVisible","total","slice","extractLabelForSelectedItem","join","selectedOption","checkedItem","checkedValues","render","FormControl","helpText","errorText","onLabelClick","required","displayError","invalid","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","autocomplete","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","placeholder","name","tabindex","select__input","select__menu","onSlotchange"],"sources":["src/components/six-select/util.ts","src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","src/components/six-select/six-select.tsx"],"sourcesContent":["export interface MenuItem {\n value: string;\n}\n\nexport function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[] {\n if (multiple) {\n if (Array.isArray(value)) {\n return getSelectedValues(value, menuItems);\n } else {\n return getSelectedValuesFromString(value, menuItems);\n }\n }\n\n return getSelectedMenuItem(value, menuItems)?.value ?? '';\n}\n\nexport function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean {\n if (value === '') {\n return true;\n }\n\n if (multiple) {\n if (Array.isArray(value)) {\n if (value.length === 0) {\n return true;\n }\n return getSelectedValues(value, menuItems).length === value.length;\n }\n return getSelectedValuesFromString(value, menuItems).length > 0;\n }\n\n return getSelectedMenuItem(value, menuItems) != null;\n}\n\nexport function valueEquals(a: string | string[], b: string | string[]): boolean {\n if (Array.isArray(a) && Array.isArray(b)) {\n return a.length === b.length && a.every((element, index) => element === b[index]);\n } else if (typeof a === 'string' && typeof b === 'string') {\n return a === b;\n }\n return false;\n}\n\nexport function isValueEmpty(value: string | string[]): boolean {\n if (Array.isArray(value)) {\n return value.length === 0;\n }\n return value === '';\n}\n\nfunction getSelectedValues(values: unknown[], menuItems: MenuItem[]): string[] {\n return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedValuesFromString(value: unknown, menuItems: MenuItem[]): string[] {\n return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedMenuItem(value: unknown, menuItems: MenuItem[]): MenuItem | undefined {\n return menuItems.find((item) => value === item.value);\n}\n","@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n display: block;\n}\n\n.select {\n display: block;\n}\n\n.select__box {\n display: inline-flex;\n align-items: center;\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 font-size: var(--six-input-font-size-medium);\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: pointer;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &--autocomplete {\n border: none;\n overflow: initial;\n }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n background-color: var(--six-input-background-color-hover);\n color: var(--six-input-color-hover);\n\n border-bottom-color: var(--six-input-border-color-hover);\n\n &:not(.select__box--line) {\n border-color: var(--six-input-border-color-hover);\n }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n background-color: var(--six-input-background-color-focus);\n outline: none;\n color: var(--six-input-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(.select__box--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n}\n\n.select--disabled {\n .select__box {\n background-color: var(--six-input-background-color-disabled);\n color: var(--six-input-color-disabled);\n cursor: not-allowed;\n outline: none;\n\n &:not(.select__box--line) {\n border-color: var(--six-input-border-color-disabled);\n }\n }\n\n .select__tags,\n .select__clear {\n pointer-events: none;\n }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n .select__box {\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.select__label {\n flex-shrink: 1;\n flex-grow: 1;\n align-items: center;\n user-select: none;\n width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n @include hide-scrollbar;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n}\n\n.select__clear {\n flex-shrink: 0;\n flex-grow: 0;\n display: inline;\n}\n\n.select__icon {\n flex-shrink: 0;\n flex-grow: 0;\n display: inline;\n transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n transform: rotate(-180deg);\n}\n\n// Placeholder\n.select--placeholder-visible .select__label {\n color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: left;\n margin-left: var(--six-spacing-xx-small);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n @include visually-hidden();\n}\n\n.select__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n .select__box {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n min-height: var(--six-height-small);\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n }\n\n .select__label {\n margin: 0 var(--six-input-spacing-small);\n }\n\n .select__clear {\n margin-right: var(--six-spacing-xxx-small);\n }\n\n .select__icon {\n margin-right: var(--six-spacing-x-small);\n }\n\n .select__tags {\n padding-bottom: 2px;\n\n six-tag {\n padding-top: 2px;\n }\n\n six-tag:not(:last-of-type) {\n margin-right: var(--six-spacing-xx-small);\n }\n }\n\n &.select--has-tags .select__label {\n margin-left: 0;\n }\n}\n\n.select--medium {\n .select__box {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n min-height: var(--six-height-medium);\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n }\n\n .select__label {\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .select__clear {\n margin-right: var(--six-spacing-xxx-small);\n }\n\n .select__icon {\n margin-right: var(--six-spacing-x-small);\n }\n\n .select__tags {\n padding-bottom: 3px;\n\n six-tag {\n padding-top: 3px;\n }\n\n six-tag:not(:last-of-type) {\n margin-right: var(--six-spacing-xx-small);\n }\n }\n\n &.select--has-tags .select__label {\n margin-left: 0;\n }\n}\n\n.select--large {\n .select__box {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n min-height: var(--six-height-large);\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n }\n\n .select__label {\n margin: 0 var(--six-input-spacing-large);\n }\n\n .select__clear {\n margin-right: var(--six-spacing-xxx-small);\n }\n\n .select__icon {\n margin-right: var(--six-spacing-x-small);\n }\n\n .select__tags {\n padding-bottom: 4px;\n\n six-tag {\n padding-top: 4px;\n }\n\n six-tag:not(:last-of-type) {\n margin-right: var(--six-spacing-xx-small);\n }\n }\n\n &.select--has-tags .select__label {\n margin-left: 0;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n &.select--small .select__box {\n border-radius: var(--six-height-small);\n }\n\n &.select--medium .select__box {\n border-radius: var(--six-height-medium);\n }\n\n &.select--large .select__box {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n &__menu {\n max-width: 50vw;\n width: fit-content;\n\n &--filtered {\n // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n width: 100% !important;\n }\n\n &--hidden {\n // hide the menu panel if there are no menu items\n display: none;\n }\n }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n padding-top: 0;\n padding-bottom: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\nimport { isValueEmpty } from './util';\n\nexport interface SixSelectChangePayload {\n value: string | string[];\n isSelected: boolean;\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 - The select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\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 clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n tag: 'six-select',\n styleUrl: 'six-select.scss',\n shadow: true,\n})\nexport class SixSelect {\n private box?: HTMLElement;\n private dropdown?: HTMLSixDropdownElement;\n private input?: HTMLSixInputElement;\n private inputId = `select-${++id}`;\n private labelId = `select-label-${id}`;\n private helpTextId = `select-help-text-${id}`;\n private errorTextId = `select-error-text-${id}`;\n private menu?: HTMLSixMenuElement;\n private resizeObserver?: ResizeObserver;\n private touched = false;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSelectElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() isOpen = false;\n @State() displayLabel = '';\n @State() displayTags: HTMLSixTagElement[] = [];\n\n /** Set to true to enable multiselect. */\n @Prop() multiple = false;\n\n /**\n * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n * number of additional items that are selected. Set to -1 to remove the limit.\n */\n @Prop() maxTagsVisible = 3;\n\n /** Set to true to disable the select control. */\n @Prop() disabled = false;\n\n /** The select's name. */\n @Prop() name = '';\n\n /** The select's placeholder text. */\n @Prop() placeholder = '';\n\n /** The filter's placeholder text. */\n @Prop() filterPlaceholder?: string;\n\n /** The debounce for the filter callbacks. */\n @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n /** The select's size. */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n /** The value of the control. This will be a string or an array depending on `multiple`. */\n @Prop({ mutable: true }) value: string | string[] = '';\n\n /** Set to true to draw a pill-style select with rounded edges. */\n @Prop() pill = false;\n\n /** The select's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** Set to true to add a clear button when the select is populated. */\n @Prop() clearable = false;\n\n /** The label text. */\n @Prop() label = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText = '';\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 render as line */\n @Prop() line = false;\n\n /** Set to true to allow filtering for entries in the dropdown */\n @Prop() filter = false;\n\n /**\n * Set to true to allow async filtering.\n * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n */\n @Prop() asyncFilter = false;\n\n /**\n * Set to true to turn the six-select into an autocomplete.\n */\n @Prop() autocomplete = false;\n\n /** The debounce for when the input changes for autocompletes should be emitted */\n @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n @Prop() options: SixMenuItemData[] | null = null;\n\n /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n @Prop() virtualScroll = false;\n\n @Watch('disabled')\n handleDisabledChange() {\n if (this.disabled && this.isOpen) {\n this.dropdown?.hide();\n }\n }\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('multiple')\n handleMultipleChange() {\n // Cast to array | string based on `this.multiple`\n const value = this.getValueAsArray();\n this.value = this.multiple ? value : value[0] || '';\n this.syncItemsFromValue();\n }\n\n @Watch('value')\n async handleValueChange() {\n if (this.multiple && !Array.isArray(this.value)) {\n this.value = [];\n }\n\n if (!this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n await this.syncItemsFromValue();\n }\n\n /** Emitted when the control's value changes. */\n @Event({ eventName: 'six-select-change' }) sixChange!: EventEmitter<SixSelectChangePayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-select-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-select-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n if (this.virtualScroll && this.options === null) {\n console.error('Options must be defined when using virtual scrolling');\n }\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-select-change', 'change', this.host);\n this.eventListeners.forward('six-select-blur', 'blur', this.host);\n this.eventListeners.forward('six-select-focus', 'focus', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n if (this.multiple && this.value != null) {\n this.value = this.getValueAsArray();\n }\n }\n\n componentDidLoad() {\n if (this.input == null) return;\n const input = this.input;\n this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\n\n // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n requestAnimationFrame(() => this.syncItemsFromValue());\n\n this.eventListeners.add(\n input,\n 'six-input-input',\n debounce((event) => {\n const enteredValue = input.value;\n this.clearValues();\n this.sixChange.emit({ value: enteredValue, isSelected: false });\n event.stopPropagation();\n }, this.inputDebounce)\n );\n\n input.value = this.hasSelection() ? this.displayLabel : '';\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the select. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.hasFocus = true;\n this.box?.focus(options);\n }\n\n private getItemLabel(item: HTMLSixMenuItemElement): string {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n if (slot != null) {\n return getTextContent(slot);\n } else {\n // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n return item.textContent ?? '';\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.options !== null) {\n return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n }\n\n return [...this.host.querySelectorAll('six-menu-item')];\n }\n\n private hasMenuItems() {\n return this.getItems().length > 0;\n }\n\n private getValueAsArray() {\n const values = Array.isArray(this.value) ? this.value : [this.value];\n // enforce that the values are converted to 'string' before the value is compared\n return values.map(String);\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 event.stopPropagation();\n this.clearValues();\n this.sixChange.emit({ value: this.value, isSelected: true });\n };\n\n private clearValues() {\n this.value = this.multiple ? [] : '';\n this.syncItemsFromValue();\n }\n\n private handleSelectAll = (event: KeyboardEvent) => {\n const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n const keyName = event.key;\n const keyCode = event.code;\n\n if (keyName === 'Control') {\n return;\n }\n\n if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n event.preventDefault();\n const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n nonFilteredItems\n .filter((option) => !option.disabled)\n .forEach((option) => (option.checked = hasDeselectedOptions));\n const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);\n this.value = hasDeselectedOptions ? checkedItems : [];\n this.sixChange.emit({ value: this.value, isSelected: true });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n\n const items = this.getItems();\n const firstItem = items[0];\n const lastItem = items[items.length - 1];\n\n // Ignore key presses on tags\n if (target.tagName.toLowerCase() === 'six-tag') {\n return;\n }\n\n // Tabbing out of the control closes it\n if (event.key === 'Tab') {\n if (this.isOpen) {\n this.dropdown?.hide();\n }\n return;\n }\n\n // Up/down opens the menu\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault();\n\n // Show the menu if it's not already open\n if (!this.isOpen) {\n this.dropdown?.show();\n }\n\n // Focus on a menu item\n if (event.key === 'ArrowDown' && firstItem) {\n firstItem.setFocus();\n return;\n }\n\n if (event.key === 'ArrowUp' && lastItem) {\n lastItem.setFocus();\n return;\n }\n }\n\n // All other keys open the menu and initiate type to select\n if (!this.isOpen) {\n event.stopPropagation();\n event.preventDefault();\n this.dropdown?.show();\n this.menu?.typeToSelect(event.key);\n }\n };\n\n private handleLabelClick = () => {\n this.box?.focus();\n };\n\n private handleMenuSelect = (event: CustomEvent) => {\n const item = event.detail.item;\n\n const getValue = () => {\n if (this.multiple) {\n return this.value.includes(item.value)\n ? (this.value as []).filter((v) => v !== item.value)\n : [...this.value, item.value];\n } else {\n return item.value;\n }\n };\n\n this.value = getValue();\n\n this.syncItemsFromValue();\n this.sixChange.emit({ value: this.value, isSelected: true });\n };\n\n private handleMenuShow = (event: CustomEvent) => {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.resizeMenu();\n this.resizeObserver?.observe(this.host);\n this.isOpen = true;\n };\n\n private handleMenuHide = () => {\n this.resizeObserver?.unobserve(this.host);\n this.isOpen = false;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.syncItemsFromValue();\n };\n\n private handleTagInteraction = (event: KeyboardEvent | MouseEvent) => {\n // Don't toggle the menu when a tag's clear button is activated\n const path = event.composedPath() as EventTarget[];\n const clearButton = path.find((el) => {\n if (el instanceof HTMLElement) {\n const element = el as HTMLElement;\n return element.classList.contains('tag__clear');\n }\n });\n\n if (clearButton) {\n event.stopPropagation();\n this.sixChange.emit({ value: this.value, isSelected: true });\n }\n };\n\n private resizeMenu() {\n if (this.menu == null || this.box == null) return;\n this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n if (this.dropdown) {\n this.dropdown.reposition();\n }\n }\n\n private async syncItemsFromValue() {\n const items = this.getItems();\n const value = this.getValueAsArray();\n\n // Sync checked states\n items.forEach((item) => (item.checked = value.includes(item.value)));\n\n // Sync display label\n if (this.multiple) {\n const checkedItems: HTMLSixMenuItemElement[] = [];\n value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n this.displayTags = checkedItems.map((item) => {\n return (\n <six-tag\n exportparts=\"base:tag\"\n type=\"primary\"\n size={this.size}\n pill={this.pill}\n clearable\n onClick={this.handleTagInteraction}\n onKeyDown={this.handleTagInteraction}\n onSix-tag-clear={(event) => {\n event.stopPropagation();\n if (!this.disabled) {\n item.checked = false;\n this.syncValueFromItems();\n }\n }}\n >\n {this.getItemLabel(item)}\n </six-tag>\n );\n });\n\n if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n const total = this.displayTags.length;\n this.displayLabel = '';\n this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n this.displayTags.push(\n <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n +{total - this.maxTagsVisible}\n </six-tag>\n );\n }\n } else {\n this.displayLabel = this.extractLabelForSelectedItem(value, items);\n this.displayTags = [];\n }\n\n if (!isValueEmpty(this.value)) {\n this.touched = true;\n }\n if (this.touched && this.input != null) {\n this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n }\n }\n\n private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]): string {\n if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n return '';\n }\n\n if (this.options !== null) {\n const selectedOption = this.options.find((item) => item.value === value[0]);\n return selectedOption?.value || '';\n }\n\n const checkedItem = items.find((item) => item.value === value[0]);\n return checkedItem ? this.getItemLabel(checkedItem) : '';\n }\n\n private syncValueFromItems() {\n const items = this.getItems();\n const checkedItems = items.filter((item) => item.checked);\n const checkedValues = checkedItems.map((item) => item.value);\n this.value = this.multiple\n ? this.getValueAsArray().filter((val) => checkedValues.includes(val))\n : checkedValues.length > 0\n ? checkedValues[0]\n : '';\n }\n\n render() {\n const hasSelection = this.hasSelection();\n\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 size={this.size}\n onLabelClick={this.handleLabelClick}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <six-dropdown\n part=\"base\"\n ref={(el) => (this.dropdown = el)}\n hoist={this.hoist}\n closeOnSelect={!this.multiple}\n containingElement={this.host}\n disableHideOnEnterAndSpace={this.autocomplete}\n class={{\n select: true,\n 'select--open': this.isOpen,\n 'select--empty': this.value?.length === 0,\n 'select--focused': this.hasFocus,\n 'select--clearable': this.clearable,\n 'select--disabled': this.disabled,\n 'select--multiple': this.multiple,\n 'select--has-tags': this.multiple && hasSelection,\n 'select--placeholder-visible': this.displayLabel === '',\n 'select--small': this.size === 'small',\n 'select--medium': this.size === 'medium',\n 'select--large': this.size === 'large',\n 'select--pill': this.pill,\n 'select--invalid': this.invalid,\n }}\n onKeyDown={this.handleSelectAll}\n onSix-dropdown-show={this.handleMenuShow}\n onSix-dropdown-hide={this.handleMenuHide}\n filterPlaceholder={this.filterPlaceholder}\n filterDebounce={this.filterDebounce}\n filter={this.filter}\n asyncFilter={this.asyncFilter}\n >\n <div\n slot=\"trigger\"\n ref={(el) => (this.box = el)}\n id={this.inputId}\n class={{\n select__box: true,\n 'select__box--line': this.line,\n 'select__box--autocomplete': this.autocomplete,\n }}\n role=\"combobox\"\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-haspopup=\"true\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : 0}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n >\n <span class=\"select__label\">\n {this.displayTags.length > 0 ? (\n <span part=\"tags\" class=\"select__tags\">\n {this.displayTags}\n </span>\n ) : (\n this.displayLabel || this.placeholder\n )}\n </span>\n\n {this.clearable && hasSelection && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n class=\"select__clear\"\n name=\"clear\"\n size=\"small\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n />\n )}\n\n {this.hasMenuItems() && (\n <span part=\"icon\" class=\"select__icon\">\n <six-icon size=\"medium\">expand_more</six-icon>\n </span>\n )}\n\n {/*\n The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n of a select because, otherwise, iOS will show a list of options during validation.\n */}\n <six-input\n ref={(el) => (this.input = el)}\n class={{\n select__input: true,\n 'select__hidden-select': !this.autocomplete,\n }}\n aria-hidden=\"true\"\n required={this.required}\n onFocus={this.handleFocus}\n clearable={this.clearable}\n placeholder={this.placeholder}\n pill={this.pill}\n disabled={this.disabled}\n size={this.size}\n tabIndex={-1}\n />\n </div>\n\n <six-menu\n ref={(el) => (this.menu = el)}\n part=\"menu\"\n class={{\n select__menu: true,\n 'select__menu--filtered': this.filter || this.asyncFilter,\n 'select__menu--hidden': !this.hasMenuItems(),\n }}\n onSix-menu-item-selected={this.handleMenuSelect}\n items={this.options}\n virtualScroll={this.virtualScroll}\n remove-box-shadow\n >\n <slot onSlotchange={this.handleSlotChange} />\n </six-menu>\n </six-dropdown>\n </FormControl>\n );\n }\n\n private hasSelection() {\n return this.multiple ? this.value.length > 0 : this.value !== '';\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as o,h as r,g as t}from"./p-6153045b.js";import{E as s}from"./p-7d95def3.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.radio{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}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;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:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";let a=0;const l=class{constructor(r){i(this,r);this.sixBlur=o(this,"six-radio-blur",7);this.sixChange=o(this,"six-radio-change",7);this.sixFocus=o(this,"six-radio-focus",7);this.inputId=`radio-${++a}`;this.labelId=`radio-label-${a}`;this.eventListeners=new s;this.handleClick=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=i=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const r=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let t=o.indexOf(this.host)+r;if(t<0)t=o.length-1;if(t>o.length-1)t=0;this.getAllRadios().forEach((i=>i.checked=false));o[t].setFocus();o[t].checked=true;o[t].dispatchEvent(new CustomEvent("six-radio-change",{bubbles:true,cancelable:true}));i.preventDefault()}};this.handleMouseDown=i=>{var o;i.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.checked=false;this.invalid=false}handleCheckedChange(){if(this.checked){this.getSiblingRadios().forEach((i=>i.checked=false))}if(this.nativeInput!=null){this.nativeInput.checked=this.checked}}handleNameChange(i){if(this.nativeInput!=null){this.nativeInput.name=i}}connectedCallback(){this.eventListeners.forward("six-radio-change","change",this.host);this.eventListeners.forward("six-radio-blur","blur",this.host);this.eventListeners.forward("six-radio-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(i){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}getAllRadios(){const i=this.host.closest("form")||document.body;if(this.name==="")return[];return[...i.querySelectorAll("six-radio")].filter((i=>i.name===this.name))}getSiblingRadios(){return this.getAllRadios().filter((i=>i!==this.host))}render(){return r("label",{part:"base",class:{radio:true,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus},htmlFor:this.inputId,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown},r("span",{part:"control",class:"radio__control"},r("span",{part:"checked-icon",class:"radio__icon"},r("svg",{viewBox:"0 0 16 16"},r("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},r("g",{fill:"currentColor"},r("circle",{cx:"8",cy:"8",r:"5"}))))),r("input",{ref:i=>this.nativeInput=i,id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,role:"radio","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus})),r("span",{part:"label",id:this.labelId,class:"radio__label"},r("slot",null)))}get host(){return t(this)}static get watchers(){return{checked:["handleCheckedChange"],name:["handleNameChange"]}}};l.style=e;export{l as six_radio};
|
|
2
|
+
//# sourceMappingURL=p-264d4ea8.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixRadioCss","id","SixRadio","this","inputId","labelId","eventListeners","EventListeners","handleClick","nativeInput","checked","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleKeyDown","keyboardEvent","includes","key","radios","getAllRadios","filter","radio","disabled","incr","index","indexOf","host","length","forEach","setFocus","dispatchEvent","CustomEvent","bubbles","cancelable","preventDefault","handleMouseDown","event","_a","focus","handleCheckedChange","getSiblingRadios","handleNameChange","name","connectedCallback","forward","disconnectedCallback","removeAll","options","removeFocus","blur","form","closest","document","body","querySelectorAll","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","value","role","onClick","onBlur","onFocus"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.radio {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.radio__icon {\n display: inline-flex;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n\n svg {\n width: 100%;\n height: 100%;\n }\n}\n\n.radio__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: 50%;\n background-color: var(--six-input-background-color);\n color: transparent;\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n color: var(--six-selection-control-color);\n border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n color: var(--six-input-border-color-focus);\n border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n cursor: not-allowed;\n color: var(--six-input-color-disabled);\n\n .radio__control {\n border-color: var(--six-input-border-color-disabled);\n }\n\n &.radio--checked .radio__control {\n color: var(--six-selection-control-color-disabled);\n }\n}\n\n.radio__label {\n line-height: var(--six-selection-control-toggle-size);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\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 - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n tag: 'six-radio',\n styleUrl: 'six-radio.scss',\n shadow: true,\n})\nexport class SixRadio {\n private inputId = `radio-${++id}`;\n private labelId = `radio-label-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixRadioElement;\n\n @State() hasFocus = false;\n\n /** The radio's name attribute. */\n @Prop() name = '';\n\n /** The radio's value attribute. */\n @Prop({ reflect: true }) value = 'on';\n\n /** Set to true to disable the radio. */\n @Prop() disabled = false;\n\n /** Set to true to draw the radio in a checked state. */\n @Prop({ mutable: true, reflect: true }) checked = false;\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 @Watch('checked')\n handleCheckedChange() {\n if (this.checked) {\n this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n }\n if (this.nativeInput != null) {\n this.nativeInput.checked = this.checked;\n }\n }\n\n @Watch('name')\n handleNameChange(name: string) {\n if (this.nativeInput != null) {\n this.nativeInput.name = name;\n }\n }\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.eventListeners.forward('six-radio-change', 'change', this.host);\n this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the radio. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /** Removes focus from the radio. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private getAllRadios() {\n const form = this.host.closest('form') || document.body;\n\n if (this.name === '') return [];\n\n return [...form.querySelectorAll('six-radio')].filter(\n (radio: HTMLSixRadioElement) => radio.name === this.name\n ) as HTMLSixRadioElement[];\n }\n\n private getSiblingRadios() {\n return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n }\n\n private handleClick = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.sixChange.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 handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n let index = radios.indexOf(this.host) + incr;\n if (index < 0) index = radios.length - 1;\n if (index > radios.length - 1) index = 0;\n\n this.getAllRadios().forEach((radio) => (radio.checked = false));\n radios[index].setFocus();\n radios[index].checked = true;\n radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n keyboardEvent.preventDefault();\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n render() {\n return (\n <label\n part=\"base\"\n class={{\n radio: true,\n 'radio--checked': this.checked,\n 'radio--disabled': this.disabled,\n 'radio--focused': this.hasFocus,\n }}\n htmlFor={this.inputId}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"radio__control\">\n <span part=\"checked-icon\" class=\"radio__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"currentColor\">\n <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n </g>\n </g>\n </svg>\n </span>\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"radio__label\">\n <slot />\n </span>\n </label>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as o,h as r,g as i}from"./p-6153045b.js";import{E as s}from"./p-7d95def3.js";import{F as e}from"./p-d42c2025.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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:"*"}.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;color:var(--six-color-danger-800);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:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{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}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}';let a=0;const n=class{constructor(r){t(this,r);this.sixBlur=o(this,"six-switch-blur",7);this.sixChange=o(this,"six-switch-change",7);this.sixFocus=o(this,"six-switch-focus",7);this.switchId=`switch-${++a}`;this.labelId=`switch-label-${a}`;this.errorTextId=`input-error-text-${a}`;this.eventListeners=new s;this.handleClick=()=>{if(this.inputElement!=null){this.checked=this.inputElement.checked}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit(this.checked)};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=t=>{if(t.key==="ArrowLeft"){t.preventDefault();this.checked=false}if(t.key==="ArrowRight"){t.preventDefault();this.checked=true}};this.handleMouseDown=t=>{var o;t.preventDefault();(o=this.inputElement)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.checked=false;this.label="";this.errorText="";this.invalid=false}handleCheckedChange(){if(this.inputElement!=null){this.inputElement.checked=this.checked;this.checked=this.inputElement.checked}
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as o,h as r,g as i}from"./p-6153045b.js";import{E as s}from"./p-7d95def3.js";import{F as e}from"./p-d42c2025.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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:"*"}.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;color:var(--six-color-danger-800);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:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{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}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}';let a=0;const n=class{constructor(r){t(this,r);this.sixBlur=o(this,"six-switch-blur",7);this.sixChange=o(this,"six-switch-change",7);this.sixFocus=o(this,"six-switch-focus",7);this.switchId=`switch-${++a}`;this.labelId=`switch-label-${a}`;this.errorTextId=`input-error-text-${a}`;this.eventListeners=new s;this.handleClick=()=>{if(this.inputElement!=null){this.checked=this.inputElement.checked;this.sixChange.emit(this.checked)}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit(this.checked)};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=t=>{if(t.key==="ArrowLeft"){t.preventDefault();this.checked=false;this.sixChange.emit(this.checked)}if(t.key==="ArrowRight"){t.preventDefault();this.checked=true;this.sixChange.emit(this.checked)}};this.handleMouseDown=t=>{var o;t.preventDefault();(o=this.inputElement)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.checked=false;this.label="";this.errorText="";this.invalid=false}handleCheckedChange(){if(this.inputElement!=null){this.inputElement.checked=this.checked;this.checked=this.inputElement.checked}}connectedCallback(){this.eventListeners.forward("six-switch-change","change",this.host);this.eventListeners.forward("six-switch-blur","blur",this.host);this.eventListeners.forward("six-switch-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(t){var o;(o=this.inputElement)===null||o===void 0?void 0:o.focus(t)}async removeFocus(){var t;(t=this.inputElement)===null||t===void 0?void 0:t.blur()}render(){return r(e,{inputId:this.switchId,label:this.label,labelId:this.labelId,hasLabelSlot:false,errorTextId:this.errorTextId,errorText:this.errorText,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},r("label",{part:"base",htmlFor:this.switchId,class:{switch:true,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus},onMouseDown:this.handleMouseDown},r("span",{part:"control",class:"switch__control"},r("span",{part:"thumb",class:"switch__thumb"}),r("input",{ref:t=>this.inputElement=t,id:this.switchId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"switch","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown})),r("span",{part:"label",id:this.labelId,class:"switch__label"},r("slot",null))))}get host(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};n.style=l;export{n as six_switch};
|
|
2
|
+
//# sourceMappingURL=p-3d9de119.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixSwitchCss","id","SixSwitch","this","switchId","labelId","errorTextId","eventListeners","EventListeners","handleClick","inputElement","checked","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleKeyDown","event","key","preventDefault","handleMouseDown","_a","focus","handleCheckedChange","connectedCallback","forward","host","disconnectedCallback","removeAll","setFocus","options","removeFocus","blur","render","h","FormControl","inputId","label","hasLabelSlot","errorText","size","disabled","required","displayError","invalid","part","htmlFor","class","switch","onMouseDown","ref","el","type","name","value","role","onClick","onBlur","onFocus","onKeyDown"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) * 2);\n\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\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 - The switch's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n\n /** The switch's name attribute. */\n @Prop() name = '';\n\n /** The switch's value attribute. */\n @Prop() value = 'on';\n\n /** Set to true to disable the switch. */\n @Prop() disabled = false;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** Set to true to draw the switch in a checked state. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** The label text. */\n @Prop() label = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText = '';\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 @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the switch. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /** Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,c as t,h as e,g as r}from"./p-6153045b.js";import{F as i}from"./p-d42c2025.js";import{h as l}from"./p-15559d38.js";import{E as s}from"./p-7d95def3.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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:"*"}.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;color:var(--six-color-danger-800);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__control{position:relative;display:inline-flex;align-items:center;justify-content:center;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}.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}';let n=0;const a=class{constructor(e){o(this,e);this.sixBlur=t(this,"six-checkbox-blur",7);this.sixChange=t(this,"six-checkbox-change",7);this.sixFocus=t(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++n}`;this.labelId=`checkbox-label-${n}`;this.textId=`checkbox-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,c as t,h as e,g as r}from"./p-6153045b.js";import{F as i}from"./p-d42c2025.js";import{h as l}from"./p-15559d38.js";import{E as s}from"./p-7d95def3.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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:"*"}.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;color:var(--six-color-danger-800);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__control{position:relative;display:inline-flex;align-items:center;justify-content:center;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}.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}';let n=0;const a=class{constructor(e){o(this,e);this.sixBlur=t(this,"six-checkbox-blur",7);this.sixChange=t(this,"six-checkbox-change",7);this.sixFocus=t(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++n}`;this.labelId=`checkbox-label-${n}`;this.textId=`checkbox-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;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=o=>{var t;o.preventDefault();(t=this.nativeInput)===null||t===void 0?void 0:t.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";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 o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.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 o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const o=this.nativeInput;if(o==null){return}o.indeterminate=this.indeterminate}async setFocus(o){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.blur()}handleSlotChange(){this.hasLabelSlot=l(this.host,"label")}render(){return e(i,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,errorText:this.errorText,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},e("label",{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},e("span",{part:"control",class:"checkbox__control"},this.checked&&e("span",{part:"checked-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(3.428571, 3.428571)"},e("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),e("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&e("span",{part:"indeterminate-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(2.285714, 6.857143)"},e("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),e("input",{ref:o=>this.nativeInput=o,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})),e("span",{part:"text",id:this.textId,class:"checkbox__text"},e("slot",null))))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=c;export{a as six_checkbox};
|
|
2
|
+
//# sourceMappingURL=p-bf87464b.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","eventListeners","EventListeners","handleChange","nativeInput","checked","indeterminate","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleMouseDown","event","preventDefault","_a","focus","handleCheckedChange","handleLabelChange","handleSlotChange","connectedCallback","host","shadowRoot","addEventListener","forward","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","setFocus","options","removeFocus","blur","hasLabelSlot","hasSlot","render","h","FormControl","label","errorText","size","disabled","required","displayError","invalid","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: inline-block;\n}\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.checkbox__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: 0;\n background-color: var(--six-input-background-color);\n color: var(--six-checkbox-color);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n .checkbox__icon {\n display: inline-flex;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n border-color: var(--six-selection-control-color);\n background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--six-input-border-color-focus);\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n cursor: not-allowed;\n color: var(--six-input-color-disabled);\n\n .checkbox__control {\n border-color: var(--six-input-border-color-disabled);\n }\n\n &.checkbox--checked .checkbox__control,\n &.checkbox--indeterminate .checkbox__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n .checkbox__control {\n border-color: var(--six-input-border-color-danger);\n }\n}\n\n.checkbox__text {\n line-height: var(--six-selection-control-toggle-size);\n margin-left: 0.5em;\n user-select: 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 { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\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 checkbox label.\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 control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n tag: 'six-checkbox',\n styleUrl: 'six-checkbox.scss',\n shadow: true,\n})\nexport class SixCheckbox {\n private inputId = `checkbox-${++id}`;\n private labelId = `checkbox-label-${id}`;\n private textId = `checkbox-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixCheckboxElement;\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n\n /** The checkbox's name attribute. */\n @Prop() name = '';\n\n /**\n * The value of the checkbox does not mean if it's checked or not, use the `checked`\n * property for that.\n *\n * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n * it's only used when the checkbox participates in a native `<form>`.\n */\n @Prop() value = 'on';\n\n /** Set to true to disable the checkbox. */\n @Prop() disabled = false;\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 = '';\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 draw the checkbox in a checked state. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** Set to true to draw the checkbox in an indeterminate state. */\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('checked')\n @Watch('indeterminate')\n handleCheckedChange() {\n if (this.nativeInput == null) return;\n\n this.nativeInput.checked = this.checked;\n this.checked = this.nativeInput.checked;\n this.nativeInput.indeterminate = this.indeterminate;\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n\n nativeInput.indeterminate = this.indeterminate;\n }\n\n /** Sets focus on the checkbox. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.indeterminate = false;\n this.sixChange.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 handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n private handleSlotChange() {\n this.hasLabelSlot = hasSlot(this.host, 'label');\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 errorTextId={this.errorTextId}\n errorText={this.errorText}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n class={{\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--invalid': this.invalid,\n 'checkbox--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"checkbox__control\">\n {this.checked && (\n <span part=\"checked-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(3.428571, 3.428571)\">\n <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n {!this.checked && this.indeterminate && (\n <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(2.285714, 6.857143)\">\n <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"checkbox\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"mappings":"qKAAA,MAAMA,EAAiB,knJCMvB,IAAIC,EAAK,E,MAuBIC,EAAW,M,gKACdC,KAAAC,QAAU,cAAcH,IACxBE,KAAAE,QAAU,kBAAkBJ,IAC5BE,KAAAG,OAAS,iBAAiBL,IAC1BE,KAAAI,YAAc,oBAAoBN,IAElCE,KAAAK,eAAiB,IAAIC,EAsGrBN,KAAAO,aAAe,KACrB,GAAIP,KAAKQ,aAAe,KAAM,CAC5BR,KAAKS,QAAUT,KAAKQ,YAAYC,QAChCT,KAAKU,cAAgB,MACrBV,KAAKW,UAAUC,M,GAIXZ,KAAAa,WAAa,KACnBb,KAAKc,SAAW,MAChBd,KAAKe,QAAQH,MAAM,EAGbZ,KAAAgB,YAAc,KACpBhB,KAAKc,SAAW,KAChBd,KAAKiB,SAASL,MAAM,EAGdZ,KAAAkB,gBAAmBC,I,MAEzBA,EAAMC,kBACNC,EAAArB,KAAKQ,eAAW,MAAAa,SAAA,SAAAA,EAAEC,OAAO,E,cAvHP,M,kBACI,M,UAGT,G,WASC,K,cAGG,M,cAGA,M,WAGH,G,eAGI,G,aAGe,M,aAGe,M,mBAGM,K,CAaxD,mBAAAC,GACE,GAAIvB,KAAKQ,aAAe,KAAM,OAE9BR,KAAKQ,YAAYC,QAAUT,KAAKS,QAChCT,KAAKS,QAAUT,KAAKQ,YAAYC,QAChCT,KAAKQ,YAAYE,cAAgBV,KAAKU,a,CAKxC,iBAAAc,GACExB,KAAKyB,kB,CAGP,iBAAAC,G,OACEL,EAAArB,KAAK2B,KAAKC,cAAU,MAAAP,SAAA,SAAAA,EAAEQ,iBAAiB,aAAc7B,KAAKyB,kBAC1DzB,KAAKK,eAAeyB,QAAQ,sBAAuB,SAAU9B,KAAK2B,MAClE3B,KAAKK,eAAeyB,QAAQ,oBAAqB,OAAQ9B,KAAK2B,MAC9D3B,KAAKK,eAAeyB,QAAQ,qBAAsB,QAAS9B,KAAK2B,K,CAGlE,oBAAAI,G,OACEV,EAAArB,KAAK2B,KAAKC,cAAU,MAAAP,SAAA,SAAAA,EAAEW,oBAAoB,aAAchC,KAAKyB,kBAC7DzB,KAAKK,eAAe4B,W,CAGtB,iBAAAC,GACElC,KAAKyB,kB,CAGP,gBAAAU,GACE,MAAM3B,EAAcR,KAAKQ,YACzB,GAAIA,GAAe,KAAM,CACvB,M,CAGFA,EAAYE,cAAgBV,KAAKU,a,CAKnC,cAAM0B,CAASC,G,OACbhB,EAAArB,KAAKQ,eAAW,MAAAa,SAAA,SAAAA,EAAEC,MAAMe,E,CAK1B,iBAAMC,G,OACJjB,EAAArB,KAAKQ,eAAW,MAAAa,SAAA,SAAAA,EAAEkB,M,CA2BZ,gBAAAd,GACNzB,KAAKwC,aAAeC,EAAQzC,KAAK2B,KAAM,Q,CAGzC,MAAAe,GACE,OACEC,EAACC,EAAW,CACV3C,QAASD,KAAKC,QACd4C,MAAO7C,KAAK6C,MACZ3C,QAASF,KAAKE,QACdsC,aAAcxC,KAAKwC,aACnBpC,YAAaJ,KAAKI,YAClB0C,UAAW9C,KAAK8C,UAChBC,KAAK,SACLC,SAAUhD,KAAKgD,SACfC,SAAUjD,KAAKiD,SACfC,aAAclD,KAAKmD,SAEnBR,EAAA,SACES,KAAK,OACLC,MAAO,CACLC,SAAU,KACV,oBAAqBtD,KAAKS,QAC1B,qBAAsBT,KAAKgD,SAC3B,oBAAqBhD,KAAKc,SAC1B,oBAAqBd,KAAKmD,QAC1B,0BAA2BnD,KAAKU,eAElC6C,QAASvD,KAAKC,QACduD,YAAaxD,KAAKkB,iBAElByB,EAAA,QAAMS,KAAK,UAAUC,MAAM,qBACxBrD,KAAKS,SACJkC,EAAA,QAAMS,KAAK,eAAeC,MAAM,kBAC9BV,EAAA,OAAKc,QAAQ,aACXd,EAAA,KAAGe,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,UAAS,iBAAgB,SAC/EhB,EAAA,KAAGe,OAAO,eAAc,eAAc,KACpCf,EAAA,KAAGiB,UAAU,iCACXjB,EAAA,QAAMkB,EAAE,yCACRlB,EAAA,QAAMkB,EAAE,+CAQlB7D,KAAKS,SAAWT,KAAKU,eACrBiC,EAAA,QAAMS,KAAK,qBAAqBC,MAAM,kBACpCV,EAAA,OAAKc,QAAQ,aACXd,EAAA,KAAGe,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,UAAS,iBAAgB,SAC/EhB,EAAA,KAAGe,OAAO,eAAc,eAAc,KACpCf,EAAA,KAAGiB,UAAU,iCACXjB,EAAA,QAAMkB,EAAE,uDAQpBlB,EAAA,SACEmB,IAAMC,GAAQ/D,KAAKQ,YAAcuD,EACjCjE,GAAIE,KAAKC,QACT+D,KAAK,WACLC,KAAMjE,KAAKiE,KACXC,MAAOlE,KAAKkE,MACZzD,QAAST,KAAKS,QACduC,SAAUhD,KAAKgD,SACfC,SAAUjD,KAAKiD,SACfkB,KAAK,WAAU,eACDnE,KAAKS,QAAU,OAAS,QAAO,kBAC5BT,KAAKE,QACtBkE,SAAUpE,KAAKO,aACf8D,OAAQrE,KAAKa,WACbyD,QAAStE,KAAKgB,eAIlB2B,EAAA,QAAMS,KAAK,OAAOtD,GAAIE,KAAKG,OAAQkD,MAAM,kBACvCV,EAAA,e"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{h as t,r as e,c as i,g as s}from"./p-6153045b.js";import{E as r}from"./p-7d95def3.js";import{D as n,d as o,a}from"./p-698bb2c8.js";import{h}from"./p-15559d38.js";import{m as l,c as d,a as c,b as u}from"./p-59210f0b.js";const p=t=>typeof t==="string";const m=t=>t==null;const y={en:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],monthsShortGrouped:[["Jan","Feb","Mar","Apr"],["May","Jun","Jul","Aug"],["Sep","Oct","Nov","Dec"]],weekdays:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],weekdaysShort:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],weekdaysMin:["Mo","Tu","We","Th","Fr","Sa","Su"]},de:{months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthsShort:["Jan.","Feb.","März","Apr.","Mai","Juni","Juli","Aug.","Sep.","Okt.","Nov.","Dez."],monthsShortGrouped:[["Jan.","Feb.","März","Apr."],["Mai","Juni","Juli","Aug."],["Sep.","Okt.","Nov.","Dez."]],weekdays:["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"],weekdaysShort:["Mo.","Di.","Mi.","Do.","Fr.","Sa.","So."],weekdaysMin:["Mo","Di","Mi","Do","Fr","Sa","So"]},fr:{months:["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"],monthsShort:["janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc."],monthsShortGrouped:[["janv.","févr.","mars","avr."],["mai","juin","juil.","août"],["sept.","oct.","nov.","déc."]],weekdays:["lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"],weekdaysShort:["lun.","mar.","mer.","jeu.","ven.","sam.","dim."],weekdaysMin:["lu","ma","me","je","ve","sa","di"]},it:{months:["gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre"],monthsShort:["gen","feb","mar","apr","mag","giu","lug","ago","set","ott","nov","dic"],monthsShortGrouped:[["gen","feb","mar","apr"],["mag","giu","lug","ago"],["set","ott","nov","dic"]],weekdays:["lunedì","martedì","mercoledì","giovedì","venerdì","sabato","domenica"],weekdaysShort:["lun","mar","mer","gio","ven","sab","dom"],weekdaysMin:["lu","ma","me","gi","ve","sa","do"]}};const b=()=>new Date;const f=t=>new Date(t.getFullYear(),t.getMonth(),t.getDate());const v=t=>t instanceof Date&&!isNaN(t.getTime())&&new Date(t).toString()!=="Invalid Date";const k=t=>{if(t&&v(t)){return t.getFullYear()}throw new Error("Not a valid date")};const g=t=>{if(t&&v(t)){return t.getMonth()}throw new Error("Not a valid date")};const w=t=>{if(t&&v(t)){return t.getDate()}throw new Error("Not a valid date")};const _=t=>{if(t&&v(t)){return t.getHours()}throw new Error("Not a valid date")};const x=t=>{if(t&&v(t)){return t.getMinutes()}throw new Error("Not a valid date")};const M=t=>{if(t&&v(t)){return t.getSeconds()}throw new Error("Not a valid date")};const D=t=>{const e=[6,0,1,2,3,4,5];const i=new Date(t);i.setDate(i.getDate()-e[i.getDay()]);return i};const S=(t,e)=>(t===null||t===void 0?void 0:t.getFullYear())===(e===null||e===void 0?void 0:e.getFullYear());const j=(t,e)=>S(t,e)&&(t===null||t===void 0?void 0:t.getMonth())===(e===null||e===void 0?void 0:e.getMonth());const C=(t,e)=>j(t,e)&&(t===null||t===void 0?void 0:t.getDate())===(e===null||e===void 0?void 0:e.getDate());const O=(t,e)=>C(D(t),D(e));const z=(t,e)=>{if(!p(t)||!p(e)){return false}if(t.length<6||e.length<6){return false}const{day:i,month:s}=U(t,e);if(i>31||s>11||i<=0||s<0){return false}const r=X(t,e);if(m(r)){return false}return r.toString()!=="Invalid Date"};const F=(t,e,i)=>{if(!t){return true}if(e&&t<e){return false}if(i&&i<t){return false}return true};const J=(t,e,i,s=2)=>{const r=s-1;const n=e.charAt(t+r)===i;const o=t+r<e.length;return o&&n};const N=(t,e)=>{let i=String(t);while(i.length<e){i="0"+i}return i};const A=(t,e)=>{if(t==null){return""}let i="";for(let s=0;s<e.length;s++){switch(e.charAt(s)){case"d":if(J(s,e,"d")){i+=N(t.getDate(),2);s++}else{i+=String(t.getDate())}break;case"m":if(J(s,e,"m")){i+=N(t.getMonth()+1,2);s++}else{i+=String(t.getMonth()+1)}break;case"y":if(J(s,e,"y",4)){s+=3;i+=t.getFullYear()}else{i+=(t.getFullYear()%100<10?"0":"")+t.getFullYear()%100;s++}break;case"h":if(J(s,e,"h")){i+=N(t.getHours(),2);s++}else{i+=String(t.getHours())}break;case"M":if(J(s,e,"M")){i+=N(t.getMinutes(),2);s++}else{i+=String(t.getMinutes())}break;case"s":if(J(s,e,"s")){i+=N(t.getSeconds(),2);s++}else{i+=String(t.getSeconds())}break;default:i+=e.charAt(s)}}return i};const E=/(\[[^\[]*\])|(mm|dd|yyyy|yy|hh|MM|ss|.)/g;const P=/\d\d/;const B=/\d{4}/;const G=/[^0-9]/g;const I="year";const L="month";const T="day";const Y="hour";const H="minute";const W="second";const q={};const R=(t,e,i)=>{const s=Array.isArray(t)?t:[t];let r;if(typeof i==="string"){r=t=>{const e=parseInt(t,10);return{[i]:e}}}else{r=i}s.forEach((t=>{q[t]=[e,r]}))};R("yy",P,(t=>{const e=(new Date).getFullYear();const i=Math.floor(e/100);let s=parseInt(t,10);s=(s>68?i-1:i)*100+s;return{[I]:s}}));R("yyyy",B,I);R("mm",P,(t=>({[L]:parseInt(t,10)-1})));R("dd",P,T);R("hh",P,Y);R("MM",P,H);R("ss",P,W);const V=(t,e=new Date)=>{const i=[0,0,1,0,0,0];const s=[e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()];let r=true;for(let e=0;e<7;e++){if(t[e]===undefined){i[e]=r?s[e]:i[e]}else{i[e]=t[e];r=false}}return i};const $=(t,e,i,s,r,n)=>{if(!(t<100&&t>=0)){return new Date(t,e,i,s,r,n)}const o=new Date(t+400,e,i,s,r,n);if(isFinite(o.getFullYear())){o.setFullYear(t)}return o};const K=(t,e)=>{const i=e.match(E);if(!i){throw new Error}const{length:s}=i;let r={};for(let e=0;e<s;e+=1){const s=i[e];const n=q[s];if(!n){const e=s.replace(/^\[|\]$/g,"");if(t.indexOf(e)===0){t=t.substr(e.length)}else{throw new Error("not match")}}else{const e=n[0];const i=n[1];const s=(e.exec(t)||[])[0];const o=i(s);r=Object.assign(Object.assign({},r),o);t=t.replace(s,"")}}return r};const Q=(t,e)=>{if(t.length===e.length){return t}const i=t.match(G)[0];return t.split(i).map((t=>t.length===1?"0"+t:t)).join(i)};const U=(t,e)=>{const i=Q(t,e);return K(i,e)};const X=(t,e)=>{try{const{backupDate:i=new Date}={};const{year:s,month:r,day:n,hour:o,minute:a,second:h,date:l}=U(t,e);if(l!=null){return l}const d=[s,r,n,o,a,h];const c=V(d,i);return $(...c)}catch(t){return new Date(NaN)}};const Z=t=>{const{firstDateOfBox:e,allowedDates:i,dateFormat:s,selectedDate:r,minDate:n,maxDate:o,pointerDate:a}=t;const h=new Date(e);const l=new Date(e);let d=[];do{let t=[];do{t=[...t,{date:new Date(l),display:A(l,s),dateString:A(l,s),label:w(l).toString(),isToday:C(l,b()),isSelected:r&&C(l,r),isDisabled:!i(l)||!F(l,n,o),isOutdated:a.month!==l.getMonth()||!F(l,n,o)}];l.setDate(l.getDate()+1)}while(O(l,h));d=[...d,t];h.setDate(h.getDate()+7)}while(j(new Date(a.year,a.month,a.day),l));return d};function tt(t,e){const i=5;return[...Array(e).keys()].map((i=>i+t-Math.floor(e/2))).reduce(((t,e,s)=>{if(s%i===0){t.push([])}t[t.length-1].push(e);return t}),[])}var et;(function(t){t["DDMMYYY_DOT"]="dd.mm.yyyy";t["YYYYMMDD_DASH"]="yyyy-mm-dd";t["DDMMYYYY_DASH"]="dd-mm-yyyy";t["DDMMYYYY_SLASH"]="dd/mm/yyyy";t["YYYYMMDD_SLASH"]="yyyy/mm/dd";t["DDMMYY_DOT"]="dd.mm.yy";t["YYMMDD_DASH"]="yy-mm-dd";t["DDMMYY_DASH"]="dd-mm-yy";t["DDMMYY_SLASH"]="dd/mm/yy";t["YYMMDD_SLASH"]="yy/mm/dd";t["DDMMYYY_DOT_TIME"]="dd.mm.yyyy hh:MM:ss";t["YYYYMMDD_DASH_TIME"]="yyyy-mm-dd hh:MM:ss";t["DDMMYYYY_DASH_TIME"]="dd-mm-yyyy hh:MM:ss";t["DDMMYYYY_SLASH_TIME"]="dd/mm/yyyy hh:MM:ss";t["YYYYMMDD_SLASH_TIME"]="yyyy/mm/dd hh:MM:ss";t["DDMMYY_DOT_TIME"]="dd.mm.yy hh:MM:ss";t["YYMMDD_DASH_TIME"]="yy-mm-dd hh:MM:ss";t["DDMMYY_DASH_TIME"]="dd-mm-yy hh:MM:ss";t["DDMMYY_SLASH_TIME"]="dd/mm/yy hh:MM:ss";t["YYMMDD_SLASH_TIME"]="yy/mm/dd hh:MM:ss"})(et||(et={}));const it=e=>{const i=e.locale;const s=t=>i.monthsShort[b().getMonth()]===t;const r=t=>{var s;return((s=e.selectedDate)===null||s===void 0?void 0:s.getMonth())===i.monthsShort.findIndex((e=>e===t))};return t("table",{class:"datepicker-table",part:"month-selection"},t("tbody",null,i.monthsShortGrouped.map((i=>t("tr",{class:"datepicker-table__row"},i.map((i=>t("td",{onClick:()=>e.onClickMonthCell(i),class:{"datepicker-table__cell":true,"datepicker-table__cell--is-today":s(i),"datepicker-table__cell--is-selected":r(i)}},i))))))))};const st=e=>t("table",{class:"datepicker-table",part:"day-selection"},t("thead",{part:"weekday-header"},e.locale.weekdaysMin.map((e=>t("th",{class:"datepicker__cell"},e)))),t("tbody",null,e.calendarGrid.map((i=>t("tr",{class:"datepicker-table__row"},i.map((i=>t("td",{"data-date":i.dateString,onClick:()=>e.onClickDateCell(i),class:{"datepicker-table__cell":true,"datepicker-table__cell--is-today":i.isToday,"datepicker-table__cell--is-selected":i.isSelected,"datepicker-table__cell--is-outdated":i.isOutdated,"datepicker-table__cell--is-disabled":i.isDisabled,"datepicker-table__cell--is-selectable":!i.isDisabled}},i.label))))))));const rt=e=>t("table",{class:"datepicker-table",part:"year-selection"},t("tbody",null,e.yearSelection.map((i=>t("tr",{class:"datepicker-table__row"},i.map((i=>{var s;return t("td",{onClick:()=>e.onClickYearCell(i),class:{"datepicker-table__cell":true,"datepicker-table__cell--is-today":b().getFullYear()===i,"datepicker-table__cell--is-selected":((s=e.selectedDate)===null||s===void 0?void 0:s.getFullYear())===i}},i)})))))));const nt=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";const ot=25;const at=400;var ht;(function(t){t["DAY"]="day";t["MONTH"]="month";t["YEAR"]="year"})(ht||(ht={}));const lt=class{constructor(t){e(this,t);this.sixSelect=i(this,"six-datepicker-select",7);this.sixClear=i(this,"six-datepicker-clear",7);this.sixBlur=i(this,"six-datepicker-blur",7);this.eventListeners=new r;this.previousUnit=()=>{if(this.selectionMode===ht.DAY){this.previousMonth()}else if(this.selectionMode===ht.MONTH){this.previousYear()}else if(this.selectionMode===ht.YEAR){this.previousYearGroup()}};this.nextUnit=()=>{if(this.selectionMode===ht.DAY){this.nextMonth()}else if(this.selectionMode===ht.MONTH){this.nextYear()}else if(this.selectionMode===ht.YEAR){this.nextYearGroup()}};this.handleDocumentKeyDown=t=>{var e;const i=t;if(this.open&&i.key==="Escape"){i.stopPropagation();this.closePopup();void((e=this.inputElement)===null||e===void 0?void 0:e.setFocus())}if(i.key==="Tab"){this.closePopup()}};this.handleDocumentMouseDown=t=>{const e=t.composedPath();if(!e.includes(this.container)){this.closePopup();return}};this.handleClearClick=async t=>{t.stopPropagation();await this.select(undefined);this.sixClear.emit()};this.onTimepickerChange=t=>{const e=t.detail.value;const i=new Date;if(this.selectedDate!=null){i.setFullYear(this.selectedDate.getFullYear(),this.selectedDate.getMonth(),this.selectedDate.getDate())}if(e!=null){const t=e.hours;const s=e.minutes;const r=e.seconds;if(t!=null){i.setHours(t,s,r)}}this.updateValue(i);this.updatePointerDates()};this.onClickDateCell=t=>{if(!t.isDisabled){void this.select(t.dateString)}};this.onClickMonthCell=t=>{const e=y[this.locale].monthsShort.findIndex((e=>e===t));this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{month:e});this.selectionMode=ht.DAY};this.onClickYearCell=t=>{this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:t});this.selectionMode=ht.DAY};this.handleInputChange=t=>{if(this.inputElement==null){return}t.stopPropagation();const e=this.inputElement.value;if(!z(e,this.dateFormat)){return}const i=X(e,this.dateFormat);if(i===undefined){return}this.updateIfChanged(i);const s=e.replace(/[^\d]/g,"");if(s.length>=6){const t=X(e,this.dateFormat);const i=A(t,this.dateFormat);if(z(i,this.dateFormat)){this.selectedDate=X(i,this.dateFormat);this.updatePointerDates();this.updateValue(this.selectedDate)}}};this.handleOnBlur=t=>{var e,i;if(((e=this.inputElement)===null||e===void 0?void 0:e.value)===""&&v(this.value)){this.value=undefined}t.stopPropagation();const s=(i=this.inputElement)===null||i===void 0?void 0:i.value;const r=X(s,this.dateFormat);const n=A(this.value,this.dateFormat);if(this.inputElement!=null&&r!=null&&s!==n){this.inputElement.value=n}this.sixBlur.emit(this.value)};this.pointerDate=lt.getCurrentDateAsPointer();this.selectionMode=ht.DAY;this.isDropDownContentUp=false;this.type="date";this.locale="en";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.allowedDates=()=>true;this.min=undefined;this.max=undefined;this.closeOnSelect=this.type==="date";this.placement=undefined;this.size="medium";this.required=false;this.defaultDate=undefined;this.placeholder=undefined;this.value=undefined;this.label="";this.errorText="";this.invalid=false;this.containingElement=undefined;this.dateFormat=et.DDMMYYY_DOT;this.debounce=n;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false}debounceChanged(){this.sixSelect=o(this.sixSelect,this.debounce)}invalidChanged(t){if(this.inputElement){this.inputElement.invalid=t}}valueChanged(){if(this.value!=null&&!v(this.value)){console.warn("invalid date value: ",this.value);this.value=undefined}this.selectedDate=this.value;this.updatePointerDates();this.sixSelect.emit(this.value)}async resizeHandler(){this.updateDropdownDirection();this.moveOpenHoistedPopup();this.adjustPopupPosition()}async scrollHandler(){this.updateDropdownDirection();this.moveOpenHoistedPopup()}moveOpenHoistedPopup(){l(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,at)}get container(){return this.containingElement||this.host}get firstDateOfBox(){const t=new Date(this.pointerDate.year,this.pointerDate.month,1);return D(t)}async setFocus(t){var e;(e=this.inputElement)===null||e===void 0?void 0:e.setFocus(t)}get calendarGrid(){return Z({firstDateOfBox:this.firstDateOfBox,allowedDates:this.allowedDates,dateFormat:this.dateFormat,locale:this.locale,selectedDate:this.selectedDate,minDate:this.min,maxDate:this.max,pointerDate:this.pointerDate})}updateDropdownDirection(){if(this.inputElement==null||this.wrapper==null){return}this.isDropDownContentUp=d(this.inputElement,this.wrapper,at)}getMonthStringForIndex(t){return y[this.locale].months[t]}previousYear(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year-1})}previousYearGroup(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year-ot})}previousMonth(){if(this.pointerDate.month===0){this.pointerDate={year:this.pointerDate.year-1,month:11,day:1,hours:0,minutes:0,seconds:0}}else{this.pointerDate={year:this.pointerDate.year,month:this.pointerDate.month-1,day:1,hours:0,minutes:0,seconds:0}}}nextMonth(){if(this.pointerDate.month===11){this.pointerDate={year:this.pointerDate.year+1,month:0,day:1,hours:0,minutes:0,seconds:0}}else{this.pointerDate={year:this.pointerDate.year,month:this.pointerDate.month+1,day:1,hours:0,minutes:0,seconds:0}}}nextYear(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year+1})}nextYearGroup(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year+ot})}openCalendar(){if(!this.open&&!this.disabled){this.open=true;this.setupEventListenersForOpenPopup()}}setupEventListenersForOpenPopup(){this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.selectionMode=ht.DAY}updatePointerDates(){const t=this.getPointerDate();if(this.differsFromPointerDate(t)){this.pointerDate={year:k(t),month:g(t),day:w(t),hours:_(t),minutes:x(t),seconds:M(t)}}}differsFromPointerDate(t){return this.pointerDate.day!==w(t)||this.pointerDate.month!==g(t)||this.pointerDate.year!==k(t)||this.pointerDate.hours!==_(t)||this.pointerDate.minutes!==x(t)||this.pointerDate.seconds!==M(t)}getPointerDate(){if(this.selectedDate!==undefined&&this.selectedDate!==null){return this.selectedDate}if(this.defaultDate==null){return this.type==="date"?f(b()):b()}else{return X(this.defaultDate,this.dateFormat)}}updateValue(t){this.updateIfChanged(t)}updateIfChanged(t){var e;if(((e=this.value)===null||e===void 0?void 0:e.getTime())===(t===null||t===void 0?void 0:t.getTime())){return}this.value=t}async select(t){if(t==null){this.updateValue(undefined)}else{const e=X(t,this.dateFormat);e===null||e===void 0?void 0:e.setHours(this.pointerDate.hours,this.pointerDate.minutes,this.pointerDate.seconds);this.updateValue(e)}this.updatePointerDates();if(this.closeOnSelect){this.closePopup()}}componentWillLoad(){this.selectedDate=this.value;this.updatePointerDates();this.updateValue(this.value);if(this.inline){this.open=true}if(this.open){this.setupEventListenersForOpenPopup()}}componentDidLoad(){if(this.inputElement!=null){this.eventListeners.add(this.inputElement,"six-input-input",a(this.handleInputChange,this.debounce));this.eventListeners.add(this.inputElement,"six-input-blur",this.handleOnBlur)}}componentDidRender(){this.adjustPopupPosition()}renderHeader(){return t("header",{class:"datepicker-header",part:"header"},t("div",{class:"datepicker-header__btn prev",onClick:this.previousUnit},t("svg",{viewBox:"0 5 13 13",width:"14",height:"23"},t("path",{d:"M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"}))),t("div",{class:"datepicker-header__label"},this.selectionMode===ht.DAY&&t("div",{onClick:()=>this.selectionMode=ht.MONTH},t("span",{class:"datepicker-header__label-month"},this.getMonthStringForIndex(this.pointerDate.month)),t("span",null,t("svg",{viewBox:"-3 -4 24 24",width:"20",height:"20"},t("polyline",{points:"6 9 12 15 18 9"})))),this.selectionMode!==ht.YEAR&&t("div",{onClick:()=>this.selectionMode=ht.YEAR},t("span",{class:"datepicker-header__label-year"},this.pointerDate.year),t("span",null,t("svg",{viewBox:"-3 -4 24 24",width:"20",height:"20"},t("polyline",{points:"6 9 12 15 18 9"})))),this.selectionMode===ht.YEAR&&t("div",null,this.pointerDate.year-Math.floor(ot/2)," –"," ",this.pointerDate.year+Math.floor(ot/2))),t("div",{class:"datepicker-header__btn next",onClick:this.nextUnit},t("svg",{viewBox:"5 5 13 13",width:"14",height:"23"},t("path",{d:"M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"}))))}renderBody(){switch(this.selectionMode){case ht.DAY:return t(st,{locale:y[this.locale],calendarGrid:this.calendarGrid,onClickDateCell:this.onClickDateCell});case ht.MONTH:return t(it,{locale:y[this.locale],selectedDate:this.selectedDate,onClickMonthCell:this.onClickMonthCell});case ht.YEAR:return t(rt,{selectedDate:this.selectedDate,yearSelection:tt(this.pointerDate.year,ot),onClickYearCell:this.onClickYearCell})}}renderCustomIcon(){const e=h(this.host,"custom-icon")?t("slot",{name:"custom-icon"}):t("six-icon",{size:this.size==="large"?"medium":this.size},"today");return t("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},e)}renderClearable(){return this.clearable&&t("button",{slot:"suffix",class:{"datepicker-clear":true,"datepicker-clear--right":this.iconPosition==="left","datepicker-clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},t("six-icon",{size:"small"},"clear"))}render(){var e,i,s;this.adjustPopupPosition();return t("div",{ref:t=>this.wrapper=t,class:"datepicker__container"},t("six-input",{part:"base",value:A(this.value,this.dateFormat),ref:t=>this.inputElement=t,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,name:this.name,label:this.label,required:this.required,"error-text":this.errorText,onClick:()=>this.openCalendar(),size:this.size,class:{"input--empty":this.value==null}},this.renderCustomIcon(),this.renderClearable(),h(this.host,"label")?t("span",{slot:"label"},t("slot",{name:"label"})):null),this.open&&t("div",{part:"popup",ref:t=>this.popup=t,class:{datepicker__popup:true,"datepicker__popup--is-up":this.placement!=null?this.placement==="top":this.isDropDownContentUp,"datepicker__popup--is-inline":this.inline}},this.renderHeader(),this.renderBody(),this.type==="date-time"&&t("six-timepicker",{inline:true,"onSix-timepicker-change-debounced":t=>this.onTimepickerChange(t),value:((e=this.selectedDate)===null||e===void 0?void 0:e.getHours())+":"+((i=this.selectedDate)===null||i===void 0?void 0:i.getMinutes())+":"+((s=this.selectedDate)===null||s===void 0?void 0:s.getSeconds())}),t("div",{class:"datepicker__footer"},t("slot",null))))}adjustPopupPosition(){c(this.hoist,this.popup,this.inputElement,this.wrapper,at,(t=>this.isDropDownContentUp=t));u(this.popup)}connectedCallback(){this.eventListeners.forward("six-datepicker-select","change",this.host);this.eventListeners.forward("six-datepicker-blur","blur",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}static getCurrentDateAsPointer(){return{year:k(b()),month:g(b()),day:w(b()),hours:_(b()),minutes:x(b()),seconds:M(b())}}get host(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],invalid:["invalidChanged"],value:["valueChanged"]}}};lt.style=nt;export{lt as six_datepicker};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{h as t,r as e,c as i,g as s}from"./p-6153045b.js";import{E as r}from"./p-7d95def3.js";import{D as n,d as o,a}from"./p-698bb2c8.js";import{h}from"./p-15559d38.js";import{m as l,c as d,a as c,b as u}from"./p-59210f0b.js";const p=t=>typeof t==="string";const m=t=>t==null;const y={en:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],monthsShortGrouped:[["Jan","Feb","Mar","Apr"],["May","Jun","Jul","Aug"],["Sep","Oct","Nov","Dec"]],weekdays:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],weekdaysShort:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],weekdaysMin:["Mo","Tu","We","Th","Fr","Sa","Su"]},de:{months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthsShort:["Jan.","Feb.","März","Apr.","Mai","Juni","Juli","Aug.","Sep.","Okt.","Nov.","Dez."],monthsShortGrouped:[["Jan.","Feb.","März","Apr."],["Mai","Juni","Juli","Aug."],["Sep.","Okt.","Nov.","Dez."]],weekdays:["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"],weekdaysShort:["Mo.","Di.","Mi.","Do.","Fr.","Sa.","So."],weekdaysMin:["Mo","Di","Mi","Do","Fr","Sa","So"]},fr:{months:["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"],monthsShort:["janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc."],monthsShortGrouped:[["janv.","févr.","mars","avr."],["mai","juin","juil.","août"],["sept.","oct.","nov.","déc."]],weekdays:["lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"],weekdaysShort:["lun.","mar.","mer.","jeu.","ven.","sam.","dim."],weekdaysMin:["lu","ma","me","je","ve","sa","di"]},it:{months:["gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre"],monthsShort:["gen","feb","mar","apr","mag","giu","lug","ago","set","ott","nov","dic"],monthsShortGrouped:[["gen","feb","mar","apr"],["mag","giu","lug","ago"],["set","ott","nov","dic"]],weekdays:["lunedì","martedì","mercoledì","giovedì","venerdì","sabato","domenica"],weekdaysShort:["lun","mar","mer","gio","ven","sab","dom"],weekdaysMin:["lu","ma","me","gi","ve","sa","do"]}};const b=()=>new Date;const f=t=>new Date(t.getFullYear(),t.getMonth(),t.getDate());const v=t=>t instanceof Date&&!isNaN(t.getTime())&&new Date(t).toString()!=="Invalid Date";const k=t=>{if(t&&v(t)){return t.getFullYear()}throw new Error("Not a valid date")};const g=t=>{if(t&&v(t)){return t.getMonth()}throw new Error("Not a valid date")};const w=t=>{if(t&&v(t)){return t.getDate()}throw new Error("Not a valid date")};const _=t=>{if(t&&v(t)){return t.getHours()}throw new Error("Not a valid date")};const x=t=>{if(t&&v(t)){return t.getMinutes()}throw new Error("Not a valid date")};const M=t=>{if(t&&v(t)){return t.getSeconds()}throw new Error("Not a valid date")};const D=t=>{const e=[6,0,1,2,3,4,5];const i=new Date(t);i.setDate(i.getDate()-e[i.getDay()]);return i};const S=(t,e)=>(t===null||t===void 0?void 0:t.getFullYear())===(e===null||e===void 0?void 0:e.getFullYear());const j=(t,e)=>S(t,e)&&(t===null||t===void 0?void 0:t.getMonth())===(e===null||e===void 0?void 0:e.getMonth());const C=(t,e)=>j(t,e)&&(t===null||t===void 0?void 0:t.getDate())===(e===null||e===void 0?void 0:e.getDate());const O=(t,e)=>C(D(t),D(e));const z=(t,e)=>{if(!p(t)||!p(e)){return false}if(t.length<6||e.length<6){return false}const{day:i,month:s}=U(t,e);if(i>31||s>11||i<=0||s<0){return false}const r=X(t,e);if(m(r)){return false}return r.toString()!=="Invalid Date"};const F=(t,e,i)=>{if(!t){return true}if(e&&t<e){return false}if(i&&i<t){return false}return true};const J=(t,e,i,s=2)=>{const r=s-1;const n=e.charAt(t+r)===i;const o=t+r<e.length;return o&&n};const N=(t,e)=>{let i=String(t);while(i.length<e){i="0"+i}return i};const A=(t,e)=>{if(t==null){return""}let i="";for(let s=0;s<e.length;s++){switch(e.charAt(s)){case"d":if(J(s,e,"d")){i+=N(t.getDate(),2);s++}else{i+=String(t.getDate())}break;case"m":if(J(s,e,"m")){i+=N(t.getMonth()+1,2);s++}else{i+=String(t.getMonth()+1)}break;case"y":if(J(s,e,"y",4)){s+=3;i+=t.getFullYear()}else{i+=(t.getFullYear()%100<10?"0":"")+t.getFullYear()%100;s++}break;case"h":if(J(s,e,"h")){i+=N(t.getHours(),2);s++}else{i+=String(t.getHours())}break;case"M":if(J(s,e,"M")){i+=N(t.getMinutes(),2);s++}else{i+=String(t.getMinutes())}break;case"s":if(J(s,e,"s")){i+=N(t.getSeconds(),2);s++}else{i+=String(t.getSeconds())}break;default:i+=e.charAt(s)}}return i};const E=/(\[[^\[]*\])|(mm|dd|yyyy|yy|hh|MM|ss|.)/g;const P=/\d\d/;const B=/\d{4}/;const G=/[^0-9]/g;const I="year";const L="month";const T="day";const Y="hour";const H="minute";const W="second";const q={};const R=(t,e,i)=>{const s=Array.isArray(t)?t:[t];let r;if(typeof i==="string"){r=t=>{const e=parseInt(t,10);return{[i]:e}}}else{r=i}s.forEach((t=>{q[t]=[e,r]}))};R("yy",P,(t=>{const e=(new Date).getFullYear();const i=Math.floor(e/100);let s=parseInt(t,10);s=(s>68?i-1:i)*100+s;return{[I]:s}}));R("yyyy",B,I);R("mm",P,(t=>({[L]:parseInt(t,10)-1})));R("dd",P,T);R("hh",P,Y);R("MM",P,H);R("ss",P,W);const V=(t,e=new Date)=>{const i=[0,0,1,0,0,0];const s=[e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()];let r=true;for(let e=0;e<7;e++){if(t[e]===undefined){i[e]=r?s[e]:i[e]}else{i[e]=t[e];r=false}}return i};const $=(t,e,i,s,r,n)=>{if(!(t<100&&t>=0)){return new Date(t,e,i,s,r,n)}const o=new Date(t+400,e,i,s,r,n);if(isFinite(o.getFullYear())){o.setFullYear(t)}return o};const K=(t,e)=>{const i=e.match(E);if(!i){throw new Error}const{length:s}=i;let r={};for(let e=0;e<s;e+=1){const s=i[e];const n=q[s];if(!n){const e=s.replace(/^\[|\]$/g,"");if(t.indexOf(e)===0){t=t.substr(e.length)}else{throw new Error("not match")}}else{const e=n[0];const i=n[1];const s=(e.exec(t)||[])[0];const o=i(s);r=Object.assign(Object.assign({},r),o);t=t.replace(s,"")}}return r};const Q=(t,e)=>{if(t.length===e.length){return t}const i=t.match(G)[0];return t.split(i).map((t=>t.length===1?"0"+t:t)).join(i)};const U=(t,e)=>{const i=Q(t,e);return K(i,e)};const X=(t,e)=>{try{const{backupDate:i=new Date}={};const{year:s,month:r,day:n,hour:o,minute:a,second:h,date:l}=U(t,e);if(l!=null){return l}const d=[s,r,n,o,a,h];const c=V(d,i);return $(...c)}catch(t){return new Date(NaN)}};const Z=t=>{const{firstDateOfBox:e,allowedDates:i,dateFormat:s,selectedDate:r,minDate:n,maxDate:o,pointerDate:a}=t;const h=new Date(e);const l=new Date(e);let d=[];do{let t=[];do{t=[...t,{date:new Date(l),display:A(l,s),dateString:A(l,s),label:w(l).toString(),isToday:C(l,b()),isSelected:r&&C(l,r),isDisabled:!i(l)||!F(l,n,o),isOutdated:a.month!==l.getMonth()||!F(l,n,o)}];l.setDate(l.getDate()+1)}while(O(l,h));d=[...d,t];h.setDate(h.getDate()+7)}while(j(new Date(a.year,a.month,a.day),l));return d};function tt(t,e){const i=5;return[...Array(e).keys()].map((i=>i+t-Math.floor(e/2))).reduce(((t,e,s)=>{if(s%i===0){t.push([])}t[t.length-1].push(e);return t}),[])}var et;(function(t){t["DDMMYYY_DOT"]="dd.mm.yyyy";t["YYYYMMDD_DASH"]="yyyy-mm-dd";t["DDMMYYYY_DASH"]="dd-mm-yyyy";t["DDMMYYYY_SLASH"]="dd/mm/yyyy";t["YYYYMMDD_SLASH"]="yyyy/mm/dd";t["DDMMYY_DOT"]="dd.mm.yy";t["YYMMDD_DASH"]="yy-mm-dd";t["DDMMYY_DASH"]="dd-mm-yy";t["DDMMYY_SLASH"]="dd/mm/yy";t["YYMMDD_SLASH"]="yy/mm/dd";t["DDMMYYY_DOT_TIME"]="dd.mm.yyyy hh:MM:ss";t["YYYYMMDD_DASH_TIME"]="yyyy-mm-dd hh:MM:ss";t["DDMMYYYY_DASH_TIME"]="dd-mm-yyyy hh:MM:ss";t["DDMMYYYY_SLASH_TIME"]="dd/mm/yyyy hh:MM:ss";t["YYYYMMDD_SLASH_TIME"]="yyyy/mm/dd hh:MM:ss";t["DDMMYY_DOT_TIME"]="dd.mm.yy hh:MM:ss";t["YYMMDD_DASH_TIME"]="yy-mm-dd hh:MM:ss";t["DDMMYY_DASH_TIME"]="dd-mm-yy hh:MM:ss";t["DDMMYY_SLASH_TIME"]="dd/mm/yy hh:MM:ss";t["YYMMDD_SLASH_TIME"]="yy/mm/dd hh:MM:ss"})(et||(et={}));const it=e=>{const i=e.locale;const s=t=>i.monthsShort[b().getMonth()]===t;const r=t=>{var s;return((s=e.selectedDate)===null||s===void 0?void 0:s.getMonth())===i.monthsShort.findIndex((e=>e===t))};return t("table",{class:"datepicker-table",part:"month-selection"},t("tbody",null,i.monthsShortGrouped.map((i=>t("tr",{class:"datepicker-table__row"},i.map((i=>t("td",{onClick:()=>e.onClickMonthCell(i),class:{"datepicker-table__cell":true,"datepicker-table__cell--is-today":s(i),"datepicker-table__cell--is-selected":r(i)}},i))))))))};const st=e=>t("table",{class:"datepicker-table",part:"day-selection"},t("thead",{part:"weekday-header"},e.locale.weekdaysMin.map((e=>t("th",{class:"datepicker__cell"},e)))),t("tbody",null,e.calendarGrid.map((i=>t("tr",{class:"datepicker-table__row"},i.map((i=>t("td",{"data-date":i.dateString,onClick:()=>e.onClickDateCell(i),class:{"datepicker-table__cell":true,"datepicker-table__cell--is-today":i.isToday,"datepicker-table__cell--is-selected":i.isSelected,"datepicker-table__cell--is-outdated":i.isOutdated,"datepicker-table__cell--is-disabled":i.isDisabled,"datepicker-table__cell--is-selectable":!i.isDisabled}},i.label))))))));const rt=e=>t("table",{class:"datepicker-table",part:"year-selection"},t("tbody",null,e.yearSelection.map((i=>t("tr",{class:"datepicker-table__row"},i.map((i=>{var s;return t("td",{onClick:()=>e.onClickYearCell(i),class:{"datepicker-table__cell":true,"datepicker-table__cell--is-today":b().getFullYear()===i,"datepicker-table__cell--is-selected":((s=e.selectedDate)===null||s===void 0?void 0:s.getFullYear())===i}},i)})))))));const nt=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";const ot=25;const at=400;var ht;(function(t){t["DAY"]="day";t["MONTH"]="month";t["YEAR"]="year"})(ht||(ht={}));const lt=class{constructor(t){e(this,t);this.sixSelect=i(this,"six-datepicker-select",7);this.sixClear=i(this,"six-datepicker-clear",7);this.sixBlur=i(this,"six-datepicker-blur",7);this.eventListeners=new r;this.previousUnit=()=>{if(this.selectionMode===ht.DAY){this.previousMonth()}else if(this.selectionMode===ht.MONTH){this.previousYear()}else if(this.selectionMode===ht.YEAR){this.previousYearGroup()}};this.nextUnit=()=>{if(this.selectionMode===ht.DAY){this.nextMonth()}else if(this.selectionMode===ht.MONTH){this.nextYear()}else if(this.selectionMode===ht.YEAR){this.nextYearGroup()}};this.handleDocumentKeyDown=t=>{var e;const i=t;if(this.open&&i.key==="Escape"){i.stopPropagation();this.closePopup();void((e=this.inputElement)===null||e===void 0?void 0:e.setFocus())}if(i.key==="Tab"){this.closePopup()}};this.handleDocumentMouseDown=t=>{const e=t.composedPath();if(!e.includes(this.container)){this.closePopup();return}};this.handleClearClick=async t=>{t.stopPropagation();await this.select(undefined);this.sixClear.emit()};this.onTimepickerChange=t=>{const e=t.detail.value;const i=new Date;if(this.selectedDate!=null){i.setFullYear(this.selectedDate.getFullYear(),this.selectedDate.getMonth(),this.selectedDate.getDate())}if(e!=null){const t=e.hours;const s=e.minutes;const r=e.seconds;if(t!=null){i.setHours(t,s,r)}}this.updateValue(i);this.updatePointerDates()};this.onClickDateCell=t=>{if(!t.isDisabled){void this.select(t.dateString)}};this.onClickMonthCell=t=>{const e=y[this.locale].monthsShort.findIndex((e=>e===t));this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{month:e});this.selectionMode=ht.DAY};this.onClickYearCell=t=>{this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:t});this.selectionMode=ht.DAY};this.handleInputChange=t=>{if(this.inputElement==null){return}t.stopPropagation();const e=this.inputElement.value;if(!z(e,this.dateFormat)){return}const i=X(e,this.dateFormat);if(i===undefined){return}this.updateIfChanged(i);const s=e.replace(/[^\d]/g,"");if(s.length>=6){const t=X(e,this.dateFormat);const i=A(t,this.dateFormat);if(z(i,this.dateFormat)){this.selectedDate=X(i,this.dateFormat);this.updatePointerDates();this.updateValue(this.selectedDate)}}};this.handleOnBlur=t=>{var e,i;if(((e=this.inputElement)===null||e===void 0?void 0:e.value)===""&&v(this.value)){this.value=undefined;this.sixSelect.emit(this.value)}t.stopPropagation();const s=(i=this.inputElement)===null||i===void 0?void 0:i.value;const r=X(s,this.dateFormat);const n=A(this.value,this.dateFormat);if(this.inputElement!=null&&r!=null&&s!==n){this.inputElement.value=n}this.sixBlur.emit(this.value)};this.pointerDate=lt.getCurrentDateAsPointer();this.selectionMode=ht.DAY;this.isDropDownContentUp=false;this.type="date";this.locale="en";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.allowedDates=()=>true;this.min=undefined;this.max=undefined;this.closeOnSelect=this.type==="date";this.placement=undefined;this.size="medium";this.required=false;this.defaultDate=undefined;this.placeholder=undefined;this.value=undefined;this.label="";this.errorText="";this.invalid=false;this.containingElement=undefined;this.dateFormat=et.DDMMYYY_DOT;this.debounce=n;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false}debounceChanged(){this.sixSelect=o(this.sixSelect,this.debounce)}invalidChanged(t){if(this.inputElement){this.inputElement.invalid=t}}valueChanged(){if(this.value!=null&&!v(this.value)){console.warn("invalid date value: ",this.value);this.value=undefined;this.sixSelect.emit(this.value)}this.selectedDate=this.value;this.updatePointerDates()}async resizeHandler(){this.updateDropdownDirection();this.moveOpenHoistedPopup();this.adjustPopupPosition()}async scrollHandler(){this.updateDropdownDirection();this.moveOpenHoistedPopup()}moveOpenHoistedPopup(){l(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,at)}get container(){return this.containingElement||this.host}get firstDateOfBox(){const t=new Date(this.pointerDate.year,this.pointerDate.month,1);return D(t)}async setFocus(t){var e;(e=this.inputElement)===null||e===void 0?void 0:e.setFocus(t)}get calendarGrid(){return Z({firstDateOfBox:this.firstDateOfBox,allowedDates:this.allowedDates,dateFormat:this.dateFormat,locale:this.locale,selectedDate:this.selectedDate,minDate:this.min,maxDate:this.max,pointerDate:this.pointerDate})}updateDropdownDirection(){if(this.inputElement==null||this.wrapper==null){return}this.isDropDownContentUp=d(this.inputElement,this.wrapper,at)}getMonthStringForIndex(t){return y[this.locale].months[t]}previousYear(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year-1})}previousYearGroup(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year-ot})}previousMonth(){if(this.pointerDate.month===0){this.pointerDate={year:this.pointerDate.year-1,month:11,day:1,hours:0,minutes:0,seconds:0}}else{this.pointerDate={year:this.pointerDate.year,month:this.pointerDate.month-1,day:1,hours:0,minutes:0,seconds:0}}}nextMonth(){if(this.pointerDate.month===11){this.pointerDate={year:this.pointerDate.year+1,month:0,day:1,hours:0,minutes:0,seconds:0}}else{this.pointerDate={year:this.pointerDate.year,month:this.pointerDate.month+1,day:1,hours:0,minutes:0,seconds:0}}}nextYear(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year+1})}nextYearGroup(){this.pointerDate=Object.assign(Object.assign({},this.pointerDate),{year:this.pointerDate.year+ot})}openCalendar(){if(!this.open&&!this.disabled){this.open=true;this.setupEventListenersForOpenPopup()}}setupEventListenersForOpenPopup(){this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.selectionMode=ht.DAY}updatePointerDates(){const t=this.getPointerDate();if(this.differsFromPointerDate(t)){this.pointerDate={year:k(t),month:g(t),day:w(t),hours:_(t),minutes:x(t),seconds:M(t)}}}differsFromPointerDate(t){return this.pointerDate.day!==w(t)||this.pointerDate.month!==g(t)||this.pointerDate.year!==k(t)||this.pointerDate.hours!==_(t)||this.pointerDate.minutes!==x(t)||this.pointerDate.seconds!==M(t)}getPointerDate(){if(this.selectedDate!==undefined&&this.selectedDate!==null){return this.selectedDate}if(this.defaultDate==null){return this.type==="date"?f(b()):b()}else{return X(this.defaultDate,this.dateFormat)}}updateValue(t){this.updateIfChanged(t)}updateIfChanged(t){var e;if(((e=this.value)===null||e===void 0?void 0:e.getTime())===(t===null||t===void 0?void 0:t.getTime())){return}this.value=t;this.sixSelect.emit(this.value)}async select(t){if(t==null){this.updateValue(undefined)}else{const e=X(t,this.dateFormat);e===null||e===void 0?void 0:e.setHours(this.pointerDate.hours,this.pointerDate.minutes,this.pointerDate.seconds);this.updateValue(e)}this.updatePointerDates();if(this.closeOnSelect){this.closePopup()}}componentWillLoad(){this.selectedDate=this.value;this.updatePointerDates();this.updateValue(this.value);if(this.inline){this.open=true}if(this.open){this.setupEventListenersForOpenPopup()}}componentDidLoad(){if(this.inputElement!=null){this.eventListeners.add(this.inputElement,"six-input-input",a(this.handleInputChange,this.debounce));this.eventListeners.add(this.inputElement,"six-input-blur",this.handleOnBlur)}}componentDidRender(){this.adjustPopupPosition()}renderHeader(){return t("header",{class:"datepicker-header",part:"header"},t("div",{class:"datepicker-header__btn prev",onClick:this.previousUnit},t("svg",{viewBox:"0 5 13 13",width:"14",height:"23"},t("path",{d:"M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"}))),t("div",{class:"datepicker-header__label"},this.selectionMode===ht.DAY&&t("div",{onClick:()=>this.selectionMode=ht.MONTH},t("span",{class:"datepicker-header__label-month"},this.getMonthStringForIndex(this.pointerDate.month)),t("span",null,t("svg",{viewBox:"-3 -4 24 24",width:"20",height:"20"},t("polyline",{points:"6 9 12 15 18 9"})))),this.selectionMode!==ht.YEAR&&t("div",{onClick:()=>this.selectionMode=ht.YEAR},t("span",{class:"datepicker-header__label-year"},this.pointerDate.year),t("span",null,t("svg",{viewBox:"-3 -4 24 24",width:"20",height:"20"},t("polyline",{points:"6 9 12 15 18 9"})))),this.selectionMode===ht.YEAR&&t("div",null,this.pointerDate.year-Math.floor(ot/2)," –"," ",this.pointerDate.year+Math.floor(ot/2))),t("div",{class:"datepicker-header__btn next",onClick:this.nextUnit},t("svg",{viewBox:"5 5 13 13",width:"14",height:"23"},t("path",{d:"M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"}))))}renderBody(){switch(this.selectionMode){case ht.DAY:return t(st,{locale:y[this.locale],calendarGrid:this.calendarGrid,onClickDateCell:this.onClickDateCell});case ht.MONTH:return t(it,{locale:y[this.locale],selectedDate:this.selectedDate,onClickMonthCell:this.onClickMonthCell});case ht.YEAR:return t(rt,{selectedDate:this.selectedDate,yearSelection:tt(this.pointerDate.year,ot),onClickYearCell:this.onClickYearCell})}}renderCustomIcon(){const e=h(this.host,"custom-icon")?t("slot",{name:"custom-icon"}):t("six-icon",{size:this.size==="large"?"medium":this.size},"today");return t("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},e)}renderClearable(){return this.clearable&&t("button",{slot:"suffix",class:{"datepicker-clear":true,"datepicker-clear--right":this.iconPosition==="left","datepicker-clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},t("six-icon",{size:"small"},"clear"))}render(){var e,i,s;this.adjustPopupPosition();return t("div",{ref:t=>this.wrapper=t,class:"datepicker__container"},t("six-input",{part:"base",value:A(this.value,this.dateFormat),ref:t=>this.inputElement=t,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,name:this.name,label:this.label,required:this.required,"error-text":this.errorText,onClick:()=>this.openCalendar(),size:this.size,class:{"input--empty":this.value==null}},this.renderCustomIcon(),this.renderClearable(),h(this.host,"label")?t("span",{slot:"label"},t("slot",{name:"label"})):null),this.open&&t("div",{part:"popup",ref:t=>this.popup=t,class:{datepicker__popup:true,"datepicker__popup--is-up":this.placement!=null?this.placement==="top":this.isDropDownContentUp,"datepicker__popup--is-inline":this.inline}},this.renderHeader(),this.renderBody(),this.type==="date-time"&&t("six-timepicker",{inline:true,"onSix-timepicker-change-debounced":t=>this.onTimepickerChange(t),value:((e=this.selectedDate)===null||e===void 0?void 0:e.getHours())+":"+((i=this.selectedDate)===null||i===void 0?void 0:i.getMinutes())+":"+((s=this.selectedDate)===null||s===void 0?void 0:s.getSeconds())}),t("div",{class:"datepicker__footer"},t("slot",null))))}adjustPopupPosition(){c(this.hoist,this.popup,this.inputElement,this.wrapper,at,(t=>this.isDropDownContentUp=t));u(this.popup)}connectedCallback(){this.eventListeners.forward("six-datepicker-select","change",this.host);this.eventListeners.forward("six-datepicker-blur","blur",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}static getCurrentDateAsPointer(){return{year:k(b()),month:g(b()),day:w(b()),hours:_(b()),minutes:x(b()),seconds:M(b())}}get host(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],invalid:["invalidChanged"],value:["valueChanged"]}}};lt.style=nt;export{lt as six_datepicker};
|
|
2
|
+
//# sourceMappingURL=p-ed381ad9.entry.js.map
|