npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.d16ec8e → 0.0.0-insider.d7f75e8 - Mend

@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d7f75e8

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

Files changed (1739) hide show

package/dist/ui-library/p-171df3ad.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["convertToValidValue","value","multiple","Array","isArray","filter","element","length","convertToValidArrayValue","valueEquals","a","b","every","index","sixSelectCss","SixSelectStyle0","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","activeItemIndex","resizeObserver","ResizeObserver","updateDisplayedValues","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClearClick","async","event","stopPropagation","clearValues","_a","dropdown","show","setFocus","sixChange","isSelected","handleKeyDown","virtualScroll","autocomplete","includes","key","items","getVisibleItems","isOpen","code","ctrlKey","preventDefault","selectAll","hide","activeItem","at","click","_b","_c","_d","handleLabelClick","box","focus","handleMenuSelect","currentItem","detail","item","checked","getItems","forEach","i","syncValueFromItems","handleMenuShow","disabled","mainItems","style","display","checkedItems","getCheckedItems","selectionContainerItems","map","h","checkType","onClick","menuItem","target","isChecked","getItemLabel","handleMenuHide","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasLabelSlot","hasErrorTextSlot","syncItemsFromValue","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","handleValueChange","newValue","connectedCallback","options","console","error","shadowRoot","addEventListener","forward","displayValuesContainer","observe","componentWillLoad","componentDidLoad","requestAnimationFrame","autocompleteInput","add","debounce","inputDebounce","selectedLabel","displayedValues","join","disconnectedCallback","disconnect","removeEventListener","removeAll","slot","querySelector","getTextContent","textContent","menu","querySelectorAll","getSelectionContainerItems","visibleItems","hasDeselectedOptions","option","some","val","checkedValues","displayValueOptions","overflowCount","d","showDisplayValue","showSeparator","separator","availableWidth","getWidth","fitCount","computeFitCount","hideOverflowCount","showFittingValues","setOverflowCount","showOverflowCount","render","hasSelection","hasMenuItems","showClear","showExpand","clearable","FormControl","label","helpText","errorText","errorTextCount","size","onLabelClick","required","displayError","invalid","part","ref","el","hoist","matchTriggerWidth","closeOnSelect","containingElement","disableHideOnEnterAndSpace","class","select","pill","onKeyDown","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","placeholder","exportparts","name","tabindex","select__input","select__menu","onSlotchange","selectAllButton","type","selectAllText","selectAllDefaultText","opt","getBoundingClientRect","width","accumulatedWidth","displayOption","slice","displayValue","list","isLast","hideSeparator","hideDisplayValue","displayValueOption","classList","remove","count","lang","getLanguage"],"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 convertToValidValue(value: unknown, multiple: boolean): string | string[] {\n if (multiple) {\n if (Array.isArray(value)) {\n return value.filter((element) => typeof element === 'string');\n } else if (typeof value === 'string' && value.length > 0) {\n return [value];\n } else {\n return [];\n }\n } else {\n if (typeof value === 'string') {\n return value;\n } else {\n return '';\n }\n }\n}\n\nexport function convertToValidArrayValue(value: unknown): string[] {\n return convertToValidValue(value, true) as string[];\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.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 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__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.display__values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n user-select: none;\n overflow: hidden;\n @include hide-scrollbar;\n}\n\n.display__values-values {\n flex: 0 1 auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.display__values-and-counter {\n display: flex;\n overflow: hidden;\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.placeholder {\n color: var(--six-input-placeholder-color);\n}\n\n.select--disabled .placeholder {\n color: var(--six-input-placeholder-color-disabled);\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 .display__values {\n margin: 0 0 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\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 .display__values {\n margin: 0 0 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\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 .display__values {\n margin: 0 0 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\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 width: 100%;\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\n.selection-container--border {\n border-bottom: solid var(--six-border-width) var(--six-menu-divider-color);\n padding-top: var(--six-spacing-xx-small);\n padding-bottom: var(--six-spacing-xx-small);\n}\n\n.display-value--hidden {\n display: none;\n}\n\n.overflow-count {\n color: var(--six-color-web-rock-600);\n padding-left: var(--six-spacing-x-small);\n}\n\n.overflow-count-hidden {\n display: none;\n}\n\n.separator--hidden {\n display: none;\n}\n\n.select-all {\n border-top: 1px solid var(--six-color-web-rock-300);\n display: flex;\n justify-content: end;\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 { getLanguage } from '../../utils/error-messages';\nimport { convertToValidArrayValue, convertToValidValue, valueEquals } 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 menu?: HTMLElement;\n private dropdown?: HTMLSixDropdownElement;\n private displayValuesContainer?: HTMLElement;\n private overflowCount?: HTMLElement;\n private autocompleteInput?: 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 eventListeners = new EventListeners();\n private activeItemIndex = -1;\n private resizeObserver = new ResizeObserver(() => this.updateDisplayedValues());\n\n @Element() host!: HTMLSixSelectElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n @State() isOpen = false;\n @State() displayedValues: string[] = [];\n\n /** Menu items shown in the selection container. */\n @State() selectionContainerItems: HTMLSixMenuItemElement[] = [];\n\n /** Set to true to enable multiselect. */\n @Prop() multiple = false;\n\n /** Enables the select all button. */\n @Prop() selectAllButton = false;\n\n /**\n * Custom text for the \"select all\" button. Defaults to \"Select all\" and equivalents in supported languages.\n */\n @Prop() selectAllText?: string;\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 * @deprecated: This property is ignored. The component now displays as many items as possible and computes the \"+n\" dynamically.\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?: number;\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: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** Set to 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 this.value = convertToValidValue(this.value, this.multiple);\n this.syncItemsFromValue();\n }\n\n @Watch('value')\n async handleValueChange() {\n const newValue = convertToValidValue(this.value, this.multiple);\n if (!valueEquals(this.value, newValue)) {\n this.value = newValue;\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\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 if (this.displayValuesContainer) {\n this.resizeObserver.observe(this.displayValuesContainer);\n }\n }\n\n componentWillLoad() {\n this.value = convertToValidValue(this.value, this.multiple);\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n if (this.displayValuesContainer) {\n this.resizeObserver.observe(this.displayValuesContainer);\n }\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 if (this.autocomplete && this.autocompleteInput != null) {\n const autocompleteInput = this.autocompleteInput;\n this.eventListeners.add(\n autocompleteInput,\n 'six-input-input',\n debounce((event) => {\n this.value = autocompleteInput.value;\n this.sixChange.emit({ value: this.value, isSelected: false });\n event.stopPropagation();\n\n if (this.virtualScroll || this.value.length > 0) {\n this.dropdown?.show();\n }\n }, this.inputDebounce)\n );\n\n const selectedLabel = this.displayedValues.join(', ');\n autocompleteInput.value = selectedLabel;\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\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 && this.menu != null && this.menu.shadowRoot != null) {\n return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];\n }\n\n return [...this.host.querySelectorAll('six-menu-item')];\n }\n\n private getVisibleItems(): HTMLSixMenuItemElement[] {\n const selectionContainerItems = this.getSelectionContainerItems();\n const mainItems = this.getItems();\n return [...selectionContainerItems, ...mainItems].filter((i) => i.style.display !== 'none');\n }\n\n private getSelectionContainerItems() {\n return [...(this.host.shadowRoot?.querySelectorAll('six-menu-item') || [])];\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 = async (event: MouseEvent) => {\n event.stopPropagation();\n await this.clearValues();\n await this.dropdown?.show();\n await this.setFocus();\n this.sixChange.emit({ value: this.value, isSelected: true });\n };\n\n private async clearValues() {\n this.value = this.multiple ? [] : '';\n this.selectionContainerItems = [];\n await this.syncItemsFromValue();\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.virtualScroll || this.autocomplete) {\n return;\n }\n\n if (['Control', 'Escape'].includes(event.key)) {\n return;\n }\n\n const items = this.getVisibleItems();\n\n // Ctrl-A selects all items\n if (this.isOpen && this.multiple && event.code === 'KeyA' && event.ctrlKey) {\n event.preventDefault();\n this.selectAll();\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 if (event.key === ' ' && !this.multiple) {\n return;\n }\n\n // Enter and Space selects the active item\n if (this.activeItemIndex >= 0 && ['Enter', ' '].includes(event.key)) {\n const activeItem = items.at(this.activeItemIndex);\n event.preventDefault();\n activeItem?.click();\n return;\n }\n\n // Move the selection when pressing up or down\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n // Show the menu if it's not already open\n if (!this.isOpen) {\n this.dropdown?.show();\n }\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n this.activeItemIndex++;\n } else if (event.key === 'ArrowUp') {\n this.activeItemIndex--;\n } else if (event.key === 'Home') {\n this.activeItemIndex = 0;\n } else if (event.key === 'End') {\n this.activeItemIndex = items.length - 1;\n }\n\n if (this.activeItemIndex < 0) this.activeItemIndex = 0;\n if (this.activeItemIndex > items.length - 1) this.activeItemIndex = items.length - 1;\n\n items.at(this.activeItemIndex)?.setFocus();\n }\n }\n\n // All other keys open the menu\n if (!this.isOpen) {\n event.stopPropagation();\n event.preventDefault();\n this.dropdown?.show();\n }\n };\n\n private selectAll() {\n const visibleItems = this.getVisibleItems();\n const hasDeselectedOptions = this.hasDeselectedOptions();\n visibleItems.filter((option) => !option.disabled).forEach((option) => (option.checked = hasDeselectedOptions));\n const checkedItems = visibleItems.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 private handleLabelClick = () => {\n this.box?.focus();\n };\n\n private handleMenuSelect = (event: CustomEvent) => {\n const currentItem = event.detail.item as HTMLSixMenuItemElement;\n if (this.multiple) {\n currentItem.checked = !currentItem.checked;\n } else {\n this.getItems().forEach((i) => (i.checked = false));\n currentItem.checked = true;\n }\n this.syncValueFromItems();\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 this.activeItemIndex = -1;\n\n if (!this.virtualScroll && this.multiple) {\n // reset display style of main items\n const mainItems = this.getItems();\n mainItems.forEach((item) => (item.style.display = 'unset'));\n\n // show selected menu items in the selection container and hide them in the main container\n const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);\n checkedItems.forEach((i) => (i.style.display = 'none'));\n this.selectionContainerItems = checkedItems.map((item) => {\n return (\n <six-menu-item\n key={item.value} // key makes sure the node is not re-used: https://stenciljs.com/docs/templating-jsx#conditionals\n checked={true}\n value={item.value}\n checkType={this.multiple ? 'checkbox' : 'check'}\n onClick={(event) => {\n event.stopPropagation();\n if (!this.disabled) {\n const menuItem = event.target as HTMLSixMenuItemElement;\n const isChecked = menuItem.checked;\n menuItem.checked = !isChecked;\n item.checked = !isChecked;\n this.syncValueFromItems();\n this.sixChange.emit({ value: this.value, isSelected: true });\n }\n }}\n >\n {this.getItemLabel(item)}\n </six-menu-item>\n );\n });\n }\n\n this.isOpen = true;\n };\n\n private handleMenuHide = () => {\n this.isOpen = false;\n if (this.multiple) {\n this.handleBlur();\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.syncItemsFromValue();\n };\n\n /**\n * Sets the checked state of menu items and renders the displayed values.\n */\n private async syncItemsFromValue() {\n const selectionContainerItems = this.getSelectionContainerItems();\n const mainItems = this.getItems();\n const value = convertToValidValue(this.value, this.multiple);\n\n selectionContainerItems.forEach((item) => {\n item.checkType = this.multiple ? 'checkbox' : 'check';\n if (Array.isArray(value)) {\n item.checked = value.some((val) => val === item.value);\n } else {\n item.checked = value === item.value;\n }\n });\n\n mainItems.forEach((item) => {\n item.checkType = this.multiple ? 'checkbox' : 'check';\n if (Array.isArray(value)) {\n item.checked = value.some((val) => val === item.value);\n } else {\n item.checked = value === item.value;\n }\n });\n\n const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);\n this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));\n\n if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {\n const selectedLabel = this.displayedValues.join(', ');\n this.autocompleteInput.value = selectedLabel;\n }\n\n requestAnimationFrame(() => {\n this.updateDisplayedValues();\n });\n }\n\n private syncValueFromItems() {\n const items = this.getItems();\n const checkedValues = items.filter((item) => item.checked).map((item) => item.value);\n if (this.multiple) {\n this.value = checkedValues;\n } else {\n this.value = checkedValues.length > 0 ? checkedValues[0] : '';\n }\n }\n\n private updateDisplayedValues() {\n const displayValueOptions = [...(this.displayValuesContainer?.querySelectorAll('.display-value') ?? [])];\n if (this.displayValuesContainer == null || displayValueOptions.length === 0 || this.overflowCount == null) {\n return;\n }\n\n // Show all options and separators to properly measure all widths.\n displayValueOptions.forEach((d) => {\n showDisplayValue(d);\n showSeparator(d);\n });\n\n // Measure available width. The last separator is added to the available width, because it will be hidden later on.\n const separator = displayValueOptions[displayValueOptions.length - 1].querySelector('.separator');\n if (separator == null) return;\n let availableWidth = getWidth(this.displayValuesContainer) + getWidth(separator);\n\n // Compute how many display value elements fit in the available width\n let { fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth);\n\n if (overflowCount === 0) {\n // All items fit, hide overflow count and show all values.\n hideOverflowCount(this.overflowCount);\n showFittingValues(displayValueOptions, fitCount);\n } else {\n // Not all items fit in the available width. Recompute the available width with the overflow-count visible.\n\n // Increment overflow count by one to make sure the elements fit, even if the overflow count increases to the\n // next higher power of ten, e.g. from 9 to 10 or 99 to 100.\n setOverflowCount(this.overflowCount, overflowCount + 1);\n showOverflowCount(this.overflowCount);\n\n // Subtract the overflow count from the available width\n availableWidth = availableWidth - getWidth(this.overflowCount);\n\n // Compute how many display value elements fit in the new available width\n ({ fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth));\n\n // Show overflow count and items that fit.\n setOverflowCount(this.overflowCount, overflowCount);\n showFittingValues(displayValueOptions, fitCount);\n }\n }\n\n render() {\n const hasSelection = this.hasSelection();\n const items = this.getItems();\n const hasMenuItems = items.length > 0;\n const hasDeselectedOptions = this.hasDeselectedOptions();\n let showClear = false;\n let showExpand = hasMenuItems;\n if (this.clearable && hasSelection) {\n showClear = true;\n showExpand = false;\n }\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 errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\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 matchTriggerWidth={true}\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.displayedValues.length === 0,\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.handleKeyDown}\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 virtualScroll={this.virtualScroll}\n >\n {/* Trigger */}\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 >\n {/* Display values */}\n <div class=\"display__values\" ref={(el) => (this.displayValuesContainer = el)}>\n {this.displayedValues.length > 0 ? (\n <span class=\"display__values-and-counter\">\n <span class=\"display__values-values\">\n {this.displayedValues.map((value) => (\n <span key={value} class=\"display-value\">\n {value}\n <span class={{ separator: true }}>, </span>\n </span>\n ))}\n </span>\n <span ref={(el) => (this.overflowCount = el)} class=\"overflow-count\">\n +10\n </span>\n </span>\n ) : (\n <span class=\"placeholder\">{this.placeholder}</span>\n )}\n </div>\n\n {/* Clear */}\n {showClear && (\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 {/* Expand */}\n {showExpand && (\n <span part=\"icon\" class=\"select__icon\">\n <six-icon size=\"medium\">expand_more</six-icon>\n </span>\n )}\n\n {/* Autocomplete */}\n <six-input\n ref={(el) => (this.autocompleteInput = 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 {/* Selection container */}\n <div\n class={{\n 'selection-container': true,\n 'selection-container--border':\n this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,\n }}\n >\n {this.selectionContainerItems}\n </div>\n\n {/* Menu */}\n <six-menu\n ref={(el) => (this.menu = el)}\n part=\"menu\"\n class={{\n select__menu: true,\n 'select__menu--hidden': !hasMenuItems,\n }}\n onSix-menu-item-selected={this.handleMenuSelect}\n items={this.options}\n virtualScroll={this.virtualScroll}\n remove-box-shadow={true}\n disable-keyboard-handling={true}\n >\n <slot onSlotchange={this.handleSlotChange} />\n </six-menu>\n\n {/* Select all */}\n {this.multiple && this.selectAllButton && (\n <div class=\"select-all\" slot=\"dropdown-footer\">\n <six-button type=\"link\" onClick={() => this.selectAll()}>\n {this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText}\n </six-button>\n </div>\n )}\n </six-dropdown>\n </FormControl>\n );\n }\n\n private hasSelection() {\n return this.multiple ? this.value.length > 0 : this.value !== '';\n }\n\n private hasDeselectedOptions() {\n return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);\n }\n}\n\nfunction getCheckedItems(value: string[], items: HTMLSixMenuItemElement[]): HTMLSixMenuItemElement[] {\n return items.filter((item) => value.includes(item.value));\n}\n\nfunction getWidth(element: Element) {\n return element.getBoundingClientRect().width;\n}\n\nfunction computeFitCount(options: Element[], availableWidth: number): { fitCount: number; overflowCount: number } {\n let accumulatedWidth = 0;\n let fitCount = 0;\n\n for (let i = 0; i < options.length; i++) {\n const displayOption = options[i];\n const width = getWidth(displayOption);\n if (i === 0 && width > availableWidth) {\n fitCount = 1;\n break;\n }\n accumulatedWidth += width;\n if (accumulatedWidth > availableWidth) {\n break;\n } else {\n fitCount += 1;\n }\n }\n const overflowCount = options.length - fitCount;\n return { fitCount, overflowCount };\n}\n\nfunction showFittingValues(displayValueOptions: Element[], fitCount: number) {\n if (displayValueOptions.length > 0) {\n // show items that fit\n displayValueOptions.slice(0, fitCount).forEach((displayValue, index, list) => {\n showDisplayValue(displayValue);\n const isLast = index === list.length - 1;\n if (isLast) {\n hideSeparator(displayValue);\n } else {\n showSeparator(displayValue);\n }\n });\n\n // hide the rest\n displayValueOptions.slice(fitCount).forEach((displayValue) => {\n hideDisplayValue(displayValue);\n showSeparator(displayValue);\n });\n }\n}\n\nfunction hideSeparator(displayValueOption: Element) {\n displayValueOption.querySelector('.separator')?.classList.add('separator--hidden');\n}\n\nfunction showSeparator(displayValueOption: Element) {\n displayValueOption.querySelector('.separator')?.classList.remove('separator--hidden');\n}\n\nfunction showDisplayValue(displayValueOption: Element) {\n displayValueOption.classList.remove('display-value--hidden');\n}\n\nfunction hideDisplayValue(displayValueOption: Element) {\n displayValueOption.classList.add('display-value--hidden');\n}\n\nfunction setOverflowCount(overflowCount: Element, count: number) {\n overflowCount.textContent = `+${count}`;\n}\n\nfunction showOverflowCount(overflowCount: Element) {\n overflowCount.classList.remove('overflow-count-hidden');\n}\n\nfunction hideOverflowCount(overflowCount: Element) {\n overflowCount.classList.add('overflow-count-hidden');\n}\n\nfunction selectAllDefaultText(hasDeselectedOptions: boolean) {\n const lang = getLanguage();\n switch (lang) {\n case 'de':\n return hasDeselectedOptions ? 'Alle auswählen' : 'Alle abwählen';\n case 'fr':\n return hasDeselectedOptions ? 'Tout sélectionner' : 'Tout désélectionner';\n case 'it':\n return hasDeselectedOptions ? 'Seleziona tutto' : 'Deseleziona tutto';\n case 'en':\n return hasDeselectedOptions ? 'Select all' : 'Deselect all';\n case 'es':\n return hasDeselectedOptions ? 'Seleccionar todo' : 'Deseleccionar todo';\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-1cc3b56d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as r}from"./p-48118ce8.js";const c=".six-error-container{text-align:left;color:var(--six-color-danger-800);width:100%;font-size:var(--six-input-help-text-font-size-medium)}";const t=c;const o=class{constructor(r){e(this,r)}render(){return r("div",{key:"dce0c9954ec6c3b549af8fffd0252ebd1326ec64",class:"six-error-container"},r("slot",{key:"cc431e31efedd919f485269b68c6471c1e2bd88a"}))}};o.style=t;export{o as six_error};
2	+ //# sourceMappingURL=p-1cc3b56d.entry.js.map

package/dist/ui-library/p-1cc3b56d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixErrorCss","SixErrorStyle0","SixError","render","h","key","class"],"sources":["src/components/six-error/six-error.scss?tag=six-error&encapsulation=shadow","src/components/six-error/six-error.tsx"],"sourcesContent":[".six-error-container {\n text-align: left;\n color: var(--six-color-danger-800);\n width: 100%;\n font-size: var(--six-input-help-text-font-size-medium);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 4.0\n * @status beta\n *\n * @slot default - The error's message content\n */\n\n@Component({\n tag: 'six-error',\n styleUrl: 'six-error.scss',\n shadow: true,\n})\nexport class SixError {\n render() {\n return (\n <div class=\"six-error-container\">\n <slot />\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAc,2IACpB,MAAAC,EAAeD,E,MCaFE,EAAQ,M,yBACnB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/ui-library/p-1cd09d9b.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as i}from"./p-48118ce8.js";const t=".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";const n=t;const r={403:{en:"Access Denied",de:"Kein Zugriff"},404:{en:"Not Found",de:"Seite nicht gefunden"},500:{en:"Ooops!",de:"Ups!"}};const s={403:{en:["You don’t have permission to access this page. ","Please contact an administrator or click the SIX logo on top left."],de:["Sie haben keine Zugriffsberechtigung auf diese Seite.","Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links."]},404:{en:["We have not found the page you requested.","Please click the SIX logo on top left."],de:["Wir haben die angeforderte Seite nicht gefunden.","Bitte klicken Sie auf das SIX-Logo oben links."]},500:{en:["Sorry, we messed up! We try to fix this.","Please click the SIX logo on top left."],de:["Sorry, das war unser Fehler! Wir versuchen das zu beheben.","Bitte klicken Sie auf das SIX-Logo oben links."]}};const o=class{constructor(i){e(this,i);this.errorCode=undefined;this.language="en";this.customTitle=undefined;this.customDescription=undefined;this.customIcon=undefined}getIconName(){if(this.customIcon!=null){return this.customIcon}if(this.errorCode==null){return}if(this.errorCode===403){return"lock"}if(this.errorCode===404){return"find-in-page"}if(this.errorCode===500){return"sentiment-dissatisfied"}}getErrorTitle(){if(this.customTitle!=null){return this.customTitle}if(this.errorCode==null){return}return r[this.errorCode][this.language]}getErrorDescription(){var e;if(this.errorCode==null&&this.customDescription==null){return}const t=(e=this.getDescriptions())!==null&&e!==void 0?e:[];return t.map((e=>i("div",null,e)))}getDescriptions(){if(this.customDescription!==undefined){return this.customDescription}if(this.errorCode==null){return}return s[this.errorCode][this.language]}render(){return i("div",{key:"c11b8a0d98ed8a03a1ee91e8932a3c7f7ba60fb8",part:"container"},i("div",{key:"54352589667286a7659b65adcc071f14bd4ac409",class:"six-error-page__icon-container",part:"icon-container"},i("six-picto",{key:"8532d61184d3de5f8c00e1f8bff8a9bfb9cff44b",size:"4xl",class:"six-error-page__icon",part:"icon"},this.getIconName())),i("div",{key:"b94c4b57087f5278a8424bf5dc9b0e9c73a9f4ef",class:"six-error-page__title",part:"title"},this.getErrorTitle()),i("div",{key:"6313d2f5039d1ceeaac79ea3eb5cbb9a30d44b01",class:"six-error-page__description",part:"description"},this.getErrorDescription()))}};o.style=n;export{o as six_error_page};
2	+ //# sourceMappingURL=p-1cd09d9b.entry.js.map

package/dist/ui-library/p-1cd09d9b.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixErrorPageCss","SixErrorPageStyle0","TITLE_PER_ERROR_CODE","en","de","DESCRIPTION_PER_ERROR_CODE","SixErrorPage","getIconName","this","customIcon","errorCode","getErrorTitle","customTitle","language","getErrorDescription","customDescription","descriptions","_a","getDescriptions","map","errorMessage","h","undefined","render","key","part","class","size"],"sources":["src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n &__title {\n display: flex;\n justify-content: center;\n font-size: var(--six-font-size-xx-large);\n font-weight: bold;\n margin-bottom: var(--six-spacing-large);\n }\n\n &__description {\n & > * {\n text-align: center;\n }\n }\n\n &__icon-container {\n display: flex;\n justify-content: center;\n }\n\n &__icon::part(icon) {\n background-color: var(--six-color-web-rock-300);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n ErrorCode,\n {\n en: string;\n de: string;\n }\n> = {\n 403: {\n en: 'Access Denied',\n de: 'Kein Zugriff',\n },\n 404: {\n en: 'Not Found',\n de: 'Seite nicht gefunden',\n },\n 500: {\n en: 'Ooops!',\n de: 'Ups!',\n },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n 403: {\n en: [\n 'You don’t have permission to access this page. ',\n 'Please contact an administrator or click the SIX logo on top left.',\n ],\n de: [\n 'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n 'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n ],\n },\n 404: {\n en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n },\n 500: {\n en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n de: [\n 'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n 'Bitte klicken Sie auf das SIX-Logo oben links.',\n ],\n },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n tag: 'six-error-page',\n styleUrl: 'six-error-page.scss',\n shadow: true,\n})\nexport class SixErrorPage {\n /**\n * Defines error Code and thus displays the proper error page.\n */\n @Prop() errorCode?: 404 | 403 | 500;\n\n /**\n * Defines language and thus displays the proper error page in the selected language.\n */\n @Prop() language: 'en' | 'de' = 'en';\n\n /**\n * Defines a custom title.\n */\n @Prop() customTitle?: string;\n\n /**\n * Defines a custom description.\n */\n @Prop() customDescription?: string[];\n\n /**\n * Defines a custom icon.\n */\n @Prop() customIcon?: string;\n\n private getIconName() {\n if (this.customIcon != null) {\n return this.customIcon;\n }\n\n if (this.errorCode == null) {\n return;\n }\n\n if (this.errorCode === 403) {\n return 'lock';\n }\n\n if (this.errorCode === 404) {\n return 'find-in-page';\n }\n\n if (this.errorCode === 500) {\n return 'sentiment-dissatisfied';\n }\n }\n\n private getErrorTitle(): string | undefined {\n if (this.customTitle != null) {\n return this.customTitle;\n }\n\n if (this.errorCode == null) {\n return;\n }\n\n return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n }\n\n private getErrorDescription() {\n if (this.errorCode == null && this.customDescription == null) {\n return;\n }\n\n const descriptions = this.getDescriptions() ?? [];\n return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n }\n\n private getDescriptions() {\n if (this.customDescription !== undefined) {\n return this.customDescription;\n }\n\n if (this.errorCode == null) {\n return;\n }\n\n return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n }\n\n render() {\n return (\n <div part=\"container\">\n <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n {this.getIconName()}\n </six-picto>\n </div>\n <div class=\"six-error-page__title\" part=\"title\">\n {this.getErrorTitle()}\n </div>\n <div class=\"six-error-page__description\" part=\"description\">\n {this.getErrorDescription()}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,oWACxB,MAAAC,EAAeD,ECGf,MAAME,EAMF,CACF,IAAK,CACHC,GAAI,gBACJC,GAAI,gBAEN,IAAK,CACHD,GAAI,YACJC,GAAI,wBAEN,IAAK,CACHD,GAAI,SACJC,GAAI,SAIR,MAAMC,EAAgF,CACpF,IAAK,CACHF,GAAI,CACF,kDACA,sEAEFC,GAAI,CACF,wDACA,+FAGJ,IAAK,CACHD,GAAI,CAAC,4CAA6C,0CAClDC,GAAI,CAAC,mDAAoD,mDAE3D,IAAK,CACHD,GAAI,CAAC,2CAA4C,0CACjDC,GAAI,CACF,6DACA,oD,MAiBOE,EAAY,M,gEASS,K,sFAiBxB,WAAAC,GACN,GAAIC,KAAKC,YAAc,KAAM,CAC3B,OAAOD,KAAKC,U,CAGd,GAAID,KAAKE,WAAa,KAAM,CAC1B,M,CAGF,GAAIF,KAAKE,YAAc,IAAK,CAC1B,MAAO,M,CAGT,GAAIF,KAAKE,YAAc,IAAK,CAC1B,MAAO,c,CAGT,GAAIF,KAAKE,YAAc,IAAK,CAC1B,MAAO,wB,EAIH,aAAAC,GACN,GAAIH,KAAKI,aAAe,KAAM,CAC5B,OAAOJ,KAAKI,W,CAGd,GAAIJ,KAAKE,WAAa,KAAM,CAC1B,M,CAGF,OAAOR,EAAqBM,KAAKE,WAAWF,KAAKK,S,CAG3C,mBAAAC,G,MACN,GAAIN,KAAKE,WAAa,MAAQF,KAAKO,mBAAqB,KAAM,CAC5D,M,CAGF,MAAMC,GAAeC,EAAAT,KAAKU,qBAAiB,MAAAD,SAAA,EAAAA,EAAI,GAC/C,OAAOD,EAAaG,KAAKC,GAAiBC,EAAA,WAAMD,I,CAG1C,eAAAF,GACN,GAAIV,KAAKO,oBAAsBO,UAAW,CACxC,OAAOd,KAAKO,iB,CAGd,GAAIP,KAAKE,WAAa,KAAM,CAC1B,M,CAGF,OAAOL,EAA2BG,KAAKE,WAAWF,KAAKK,S,CAGzD,MAAAU,GACE,OACEF,EAAA,OAAAG,IAAA,2CAAKC,KAAK,aACRJ,EAAA,OAAAG,IAAA,2CAAKE,MAAM,iCAAiCD,KAAK,kBAC/CJ,EAAA,aAAAG,IAAA,2CAAWG,KAAK,MAAMD,MAAM,uBAAuBD,KAAK,QACrDjB,KAAKD,gBAGVc,EAAA,OAAAG,IAAA,2CAAKE,MAAM,wBAAwBD,KAAK,SACrCjB,KAAKG,iBAERU,EAAA,OAAAG,IAAA,2CAAKE,MAAM,8BAA8BD,KAAK,eAC3CjB,KAAKM,uB","ignoreList":[]}

package/dist/ui-library/p-1f7a0cb5.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as o}from"./p-48118ce8.js";const a=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";const e=a;const s=class{constructor(o){r(this,o);this.type="primary";this.pill=false;this.pulse=false}render(){return o("span",{key:"023a7f78c1ac275db32a3dc65d7bb46a0d4f3aba",part:"base",class:{badge:true,"badge--primary":this.type==="primary","badge--secondary":this.type==="secondary","badge--success":this.type==="success","badge--warning":this.type==="warning","badge--danger":this.type==="danger","badge--action":this.type==="action","badge--info":this.type==="info","badge--pill":this.pill,"badge--pulse":this.pulse},role:"status"},o("slot",{key:"09f7a992878ce4df2ac75fd99d7de7500cdb80d0"}))}};s.style=e;export{s as six_badge};
2	+ //# sourceMappingURL=p-1f7a0cb5.entry.js.map

package/dist/ui-library/p-1f7a0cb5.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixBadgeCss","SixBadgeStyle0","SixBadge","render","h","key","part","class","badge","this","type","pill","pulse","role"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-flex;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-x-small);\n font-weight: var(--six-font-weight-semibold);\n letter-spacing: var(--six-letter-spacing-normal);\n line-height: 1;\n border-radius: var(--six-border-radius-small);\n white-space: nowrap;\n padding: 3px 6px;\n user-select: none;\n cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n}\n\n.badge--success {\n background-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n background-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n background-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n}\n\n.badge--action {\n background-color: var(--six-color-action-500);\n color: var(--six-color-white);\n}\n\n.badge--primary {\n background-color: var(--six-color-clay-50);\n color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 var(--pulse-color);\n }\n 70% {\n box-shadow: 0 0 0 0.5rem transparent;\n }\n 100% {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n tag: 'six-badge',\n styleUrl: 'six-badge.scss',\n shadow: true,\n})\nexport class SixBadge {\n /** The badge's type. */\n @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n /** Set to true to draw a pill-style badge with rounded edges. */\n @Prop() pill = false;\n\n /** Set to true to make the badge pulsate to draw attention. */\n @Prop() pulse = false;\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n badge: true,\n\n // Types\n 'badge--primary': this.type === 'primary',\n 'badge--secondary': this.type === 'secondary',\n 'badge--success': this.type === 'success',\n 'badge--warning': this.type === 'warning',\n 'badge--danger': this.type === 'danger',\n 'badge--action': this.type === 'action',\n 'badge--info': this.type === 'info',\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n }}\n role=\"status\"\n >\n <slot />\n </span>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,uqDACpB,MAAAC,EAAeD,E,MCiBFE,EAAQ,M,mCAE4E,U,UAGhF,M,WAGC,K,CAEhB,MAAAC,GACE,OACEC,EAAA,QAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,iBAAkBC,KAAKC,OAAS,UAChC,mBAAoBD,KAAKC,OAAS,YAClC,iBAAkBD,KAAKC,OAAS,UAChC,iBAAkBD,KAAKC,OAAS,UAChC,gBAAiBD,KAAKC,OAAS,SAC/B,gBAAiBD,KAAKC,OAAS,SAC/B,cAAeD,KAAKC,OAAS,OAC7B,cAAeD,KAAKE,KACpB,eAAgBF,KAAKG,OAEvBC,KAAK,UAELT,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/ui-library/p-2355c444.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as e,H as s}from"./p-48118ce8.js";const r=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";const i=r;const a=class{constructor(e){o(this,e)}render(){return e(s,{key:"aad0ccff1f39203ebe4e16e74c13cd7a344f2da8"},e("slot",{key:"6e713eaee2db4b9dedbd9f5884911bce16f30c88"}))}};a.style=i;export{a as six_card};
2	+ //# sourceMappingURL=p-2355c444.entry.js.map

package/dist/ui-library/p-2355c444.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixCardCss","SixCardStyle0","SixCard","render","h","Host","key"],"sources":["src/components/six-card/six-card.scss?tag=six-card&encapsulation=shadow","src/components/six-card/six-card.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n box-shadow: var(--six-shadow-medium);\n border: 1px solid var(--six-color-web-rock-100);\n padding: var(--six-spacing-medium);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the card.\n */\n\n@Component({\n tag: 'six-card',\n styleUrl: 'six-card.scss',\n shadow: true,\n})\nexport class SixCard {\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAa,4PACnB,MAAAC,EAAeD,E,MCaFE,EAAO,M,yBAClB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/ui-library/p-281ffc35.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as t,h as r,g as i}from"./p-48118ce8.js";import{h as n}from"./p-0cebf1d2.js";import{s as a}from"./p-842b492e.js";const e=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:border-box}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;transform:translateY(-1.5px)}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button.button--action-outline{border-color:var(--six-color-action-500);background-color:var(--six-color-white);color:var(--six-color-action-500)}.button.button--action-outline.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action-outline:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--action-outline:active:not(.button--disabled){border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";const s=e;const l=class{constructor(r){o(this,r);this.sixBlur=t(this,"six-button-blur",7);this.sixFocus=t(this,"six-button-focus",7);this.handleSlotChange=()=>{this.hasLabel=n(this.host);this.hasPrefix=n(this.host,"prefix");this.hasSuffix=n(this.host,"suffix")};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClick=o=>{if(this.disabled\|\|this.loading){o.preventDefault();o.stopPropagation();return}if(this.submit){o.preventDefault();a(this.host)}};this.hasFocus=false;this.hasLabel=false;this.hasPrefix=false;this.hasSuffix=false;this.type="primary";this.size="medium";this.caret=false;this.disabled=false;this.loading=false;this.pill=false;this.circle=false;this.submit=false;this.reset=false;this.name="";this.value="";this.href=undefined;this.target=undefined;this.download=undefined}componentWillLoad(){this.handleSlotChange()}async setFocus(o){var t;(t=this.nativeButton)===null\|\|t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeButton)===null\|\|o===void 0?void 0:o.blur()}render(){const o=this.href!=null;const t=!o;const i=o?"a":"button";return r("div",{key:"733c60d955d509acb4293ff6ac3bd28385fc0179",onClick:this.handleClick,class:{"button-wrapper--disabled":this.disabled}},r(i,{key:"f1c659d53e416d57c3d743accbc74fa71320fce5",ref:o=>this.nativeButton=o,part:"base",class:{button:true,"button--secondary":this.type==="secondary","button--primary":this.type==="primary","button--link":this.type==="link","button--success":this.type==="success","button--warning":this.type==="warning","button--danger":this.type==="danger","button--action":this.type==="action","button--action-outline":this.type==="action-outline","button--small":this.size==="small","button--medium":this.size==="medium","button--large":this.size==="large","button--caret":this.caret,"button--circle":this.circle,"button--disabled":this.disabled,"button--focused":this.hasFocus,"button--loading":this.loading,"button--pill":this.pill,"button--has-label":this.hasLabel,"button--has-prefix":this.hasPrefix,"button--has-suffix":this.hasSuffix},disabled:t?this.disabled:undefined,tabindex:this.disabled?"-1":undefined,type:t?this.submit?"submit":this.reset?"reset":"button":undefined,name:t?this.name:undefined,value:t?this.value:undefined,href:o?this.href:undefined,target:o&&this.target!=null?this.target:undefined,download:o&&this.download!=null?this.download:undefined,rel:o&&this.target!=null?"noreferrer noopener":undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,"data-testid":"button"},r("span",{key:"db88ca38040960f384a72f274c215c490abcd7be",part:"prefix",class:"button__prefix"},r("slot",{key:"19a0077f9a1ea594f669cb3d5f56f7eabd6695b4",onSlotchange:this.handleSlotChange,name:"prefix"})),r("span",{key:"d6ad98d9a36572228bc9ea4d50263323dac74322",part:"label",class:"button__label"},r("slot",{key:"33e06a87ab2f18d0f1096fdf1904b1398811c014",onSlotchange:this.handleSlotChange})),r("span",{key:"771e0da37ab98f26cfa6189a9794ff1f6c4424bd",part:"suffix",class:"button__suffix"},r("slot",{key:"fa94fccd963ec5a65c84b7620182adb24a329383",onSlotchange:this.handleSlotChange,name:"suffix"})),this.caret&&r("span",{key:"7098e8219a536758498c0e76974080c96e5baecd",part:"caret",class:"button__caret"},r("svg",{key:"a8f4e991d39137a45dae525a550edd4ad79cf83f",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{key:"03dbc033c9799c31b856e45cd3d4967f3098bd8e",points:"6 9 12 15 18 9"}))),this.loading&&r("six-spinner",{key:"6ab43caf71a3ceadf32817b09e7c4d6885f2ba7a"})))}get host(){return i(this)}};l.style=s;export{l as six_button};
2	+ //# sourceMappingURL=p-281ffc35.entry.js.map

package/dist/ui-library/p-281ffc35.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixButtonCss","SixButtonStyle0","SixButton","this","handleSlotChange","hasLabel","hasSlot","host","hasPrefix","hasSuffix","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClick","event","disabled","loading","preventDefault","stopPropagation","submit","submitForm","componentWillLoad","setFocus","options","_a","nativeButton","focus","removeFocus","blur","render","isLink","href","isButton","Button","h","key","onClick","class","ref","el","part","button","type","size","caret","circle","pill","undefined","tabindex","reset","name","value","target","download","rel","onBlur","onFocus","onSlotchange","viewBox","fill","stroke","points"],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n}\n\n.button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--six-border-width);\n border-radius: 0;\n font-family: var(--six-font-family);\n font-weight: var(--six-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.button--disabled {\n pointer-events: none;\n }\n\n ::slotted(six-icon) {\n // Clicks on icons shouldn't prevent the button from gaining focus\n pointer-events: none;\n transform: translateY(-1.5px);\n }\n}\n\n.button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &.button--secondary {\n background-color: var(--six-color-white);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-900);\n border-width: 1px;\n }\n }\n\n &.button--primary {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-800);\n border-color: var(--six-color-web-rock-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n opacity: 70%;\n }\n }\n\n &.button--link {\n background-color: transparent;\n border-color: transparent;\n color: var(--six-color-action-500);\n\n &.button--disabled {\n color: var(--six-color-web-rock-400);\n }\n\n &:hover:not(.button--disabled) {\n color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n color: var(--six-color-action-light-to-be-defined);\n }\n }\n\n &.button--danger {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-danger-900);\n border-color: var(--six-color-danger-900);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n opacity: 70%;\n }\n }\n\n &.button--warning {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-warning-800);\n border-color: var(--six-color-warning-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n opacity: 70%;\n }\n }\n\n &.button--success {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-success-600);\n border-color: var(--six-color-success-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n opacity: 70%;\n }\n }\n\n &.button--action {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-action-600);\n border-color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n\n &.button--action-outline {\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-white);\n color: var(--six-color-action-500);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:active:not(.button--disabled) {\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--six-button-font-size-small);\n height: var(--six-height-small);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n font-size: var(--six-button-font-size-medium);\n height: var(--six-height-medium);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n font-size: var(--six-button-font-size-large);\n height: var(--six-height-large);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--six-height-small);\n }\n\n &.button--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.button--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n font-size: revert;\n\n &.button--small {\n width: var(--six-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--six-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--six-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n\n svg {\n color: var(--six-color-web-rock-900);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n color: var(--six-color-web-rock-900);\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n .button__caret {\n svg {\n color: var(--six-color-white);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n six-spinner {\n --indicator-color: currentColor;\n position: absolute;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--six-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--six-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--six-spacing-large);\n }\n}\n\n.button--has-prefix {\n &.button--small {\n padding-left: var(--six-spacing-x-small);\n\n .button__label {\n padding-left: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--six-spacing-x-small);\n\n .button__label {\n padding-right: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n tag: 'six-button',\n styleUrl: 'six-button.scss',\n shadow: true,\n})\nexport class SixButton {\n private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n @Element() host!: HTMLSixButtonElement;\n\n @State() hasFocus = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n\n /** The button's type. */\n @Prop({ reflect: true }) type:\n | 'secondary'\n | 'primary'\n | 'link'\n | 'success'\n | 'warning'\n | 'danger'\n | 'action'\n | 'action-outline' = 'primary';\n\n /** The button's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n @Prop() caret = false;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Set to true to draw the button in a loading state. */\n @Prop({ reflect: true }) loading = false;\n\n /** Set to true to draw a pill-style button with rounded edges. */\n @Prop({ reflect: true }) pill = false;\n\n /** Set to true to draw a circle button. */\n @Prop({ reflect: true }) circle = false;\n\n /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n @Prop({ reflect: true }) submit = false;\n\n /** Indicates if activating the button should reset the form. */\n @Prop({ reflect: true }) reset = false;\n\n /** An optional name for the button. Ignored when `href` is set. */\n @Prop() name = '';\n\n /** An optional value for the button. Ignored when `href` is set. */\n @Prop() value = '';\n\n /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n @Prop() href?: string;\n\n /** Tells the browser where to open the link. Only used when `href` is set. */\n @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n @Prop() download?: string;\n\n /** Emitted when the button loses focus. */\n @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the button gains focus. */\n @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /** Sets focus on the button. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeButton?.focus(options);\n }\n\n /** Removes focus from the button. */\n @Method()\n async removeFocus() {\n this.nativeButton?.blur();\n }\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlot(this.host);\n this.hasPrefix = hasSlot(this.host, 'prefix');\n this.hasSuffix = hasSlot(this.host, 'suffix');\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 handleClick = (event: MouseEvent) => {\n if (this.disabled || this.loading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (this.submit) {\n event.preventDefault();\n submitForm(this.host);\n }\n };\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n\n return (\n <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.nativeButton = el)}\n part=\"base\"\n class={{\n button: true,\n\n // Types\n 'button--secondary': this.type === 'secondary',\n 'button--primary': this.type === 'primary',\n 'button--link': this.type === 'link',\n 'button--success': this.type === 'success',\n 'button--warning': this.type === 'warning',\n 'button--danger': this.type === 'danger',\n 'button--action': this.type === 'action',\n 'button--action-outline': this.type === 'action-outline',\n\n // Sizes\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n\n // Modifiers\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--pill': this.pill,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n }}\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n name={isButton ? this.name : undefined}\n value={isButton ? this.value : undefined}\n href={isLink ? this.href : undefined}\n target={isLink && this.target != null ? this.target : undefined}\n download={isLink && this.download != null ? this.download : undefined}\n rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n data-testid=\"button\"\n >\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n </span>\n {this.caret && (\n <span part=\"caret\" class=\"button__caret\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n )}\n\n {this.loading && <six-spinner />}\n </Button>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-2ad904a7.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as i,h as s,g as e}from"./p-48118ce8.js";import{g as a}from"./p-0cebf1d2.js";const r=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:border-box}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--shadow{box-shadow:var(--six-shadow-medium)}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";const o=r;const n=Object.assign(document.createElement("div"),{className:"six-toast-stack"});const l=class{constructor(s){t(this,s);this.sixShow=i(this,"six-alert-show",7);this.sixAfterShow=i(this,"six-alert-after-show",7);this.sixHide=i(this,"six-alert-hide",7);this.sixAfterHide=i(this,"six-alert-after-hide",7);this.handleCloseClick=()=>{this.hide()};this.handleMouseEnter=()=>{this.pauseAutoHide()};this.handleMouseLeave=()=>{this.resetAutoHide()};this.handleTransitionEnd=t=>{const i=t.target;if(t.propertyName==="opacity"&&i.classList.contains("alert")){this.isVisible=this.open;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.isVisible=false;this.open=false;this.closable=false;this.type="primary";this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}componentWillLoad(){if(this.open){this.show()}}async show(){if(this.isVisible){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}async hide(){if(!this.isVisible){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}clearTimeout(this.autoHideTimeout);this.isVisible=false;this.open=false}async toast(t=true){return new Promise((i=>{var s;if(!n.parentElement){document.body.append(n)}n.append(this.host);if(t){const t=document.querySelector("six-root");const i=a(t,"header");const e=(s=t===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|s===void 0?void 0:s.querySelector("host main");if(e!=null&&e instanceof HTMLElement){const t=e.offsetWidth-e.clientWidth;n.style.right=`${t}px`}if(i!=null){const t=i===null\|\|i===void 0?void 0:i.getBoundingClientRect();n.style.top=`${t.top+t.height}px`}}else{n.style.top="0";n.style.right="0"}requestAnimationFrame((()=>this.show()));this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove();i();if(n.querySelector("six-alert")===null){n.remove()}}),{once:true})}))}pauseAutoHide(){clearTimeout(this.autoHideTimeout)}resetAutoHide(){if(this.open&&this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}restartAutoHide(){this.pauseAutoHide();this.resetAutoHide()}render(){const t=this.host.closest(".six-toast-stack")!=null;return s("div",{key:"cd9d14bef5923cf2ec8add1f61e92733aa9dd59f",part:"base",class:{alert:true,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":this.type==="primary","alert--success":this.type==="success","alert--info":this.type==="info","alert--warning":this.type==="warning","alert--danger":this.type==="danger","alert--shadow":t},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},s("span",{key:"fb6e8cf52eb87ddb1a81a797482457b3afccaa98",part:"icon",class:"alert__icon"},s("slot",{key:"3d97a399ac05620214ef8a4d6a19c37a103f76a2",name:"icon"})),s("span",{key:"3984ce04838d33a688b6cfafb7827646e0e9d582",part:"message",class:"alert__message"},s("slot",{key:"f84ff31b7b74571b2ff9f074b617cb344313939e"})),this.closable&&s("span",{key:"5291d4a747001042ad9882c32427094019e16dbb",class:"alert__close"},s("six-icon-button",{key:"48a38b0a283400ae84ed95df38a43ee6a41e1fb0",name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};l.style=o;export{l as six_alert};
2	+ //# sourceMappingURL=p-2ad904a7.entry.js.map

package/dist/ui-library/p-2ad904a7.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixAlertCss","SixAlertStyle0","toastStack","Object","assign","document","createElement","className","SixAlert","this","handleCloseClick","hide","handleMouseEnter","pauseAutoHide","handleMouseLeave","resetAutoHide","handleTransitionEnd","event","target","propertyName","classList","contains","isVisible","open","sixAfterShow","emit","sixAfterHide","Infinity","handleOpenChange","show","handleDurationChange","restartAutoHide","componentWillLoad","sixShow","defaultPrevented","duration","autoHideTimeout","window","setTimeout","sixHide","clearTimeout","toast","adjustPosition","Promise","resolve","parentElement","body","append","host","sixRoot","querySelector","headerSlot","getSlot","mainSlot","_a","shadowRoot","HTMLElement","scrollbarWidth","offsetWidth","clientWidth","style","right","rect","getBoundingClientRect","top","height","requestAnimationFrame","addEventListener","remove","once","render","asToast","closest","h","key","part","class","alert","closable","type","role","onTransitionEnd","onMouseEnter","onMouseLeave","name","exportparts","onClick"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n display: contents;\n\n // For better DX, we'll reset the margin here so the base part can inherit it\n margin: 0;\n}\n\n.alert {\n position: relative;\n display: flex;\n align-items: stretch;\n background-color: var(--six-color-white);\n border: solid 1px var(--six-color-web-rock-200);\n border-top-width: 3px;\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--box-shadow);\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n line-height: 1.6;\n color: var(--six-color-web-rock-700);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n margin: inherit;\n\n &:not(.alert--visible) {\n @include hidden;\n }\n}\n\n.alert--shadow {\n box-shadow: var(--six-shadow-medium);\n}\n\n.alert--open {\n opacity: 1;\n transform: none;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n\n ::slotted(*) {\n margin-left: var(--six-spacing-large);\n }\n}\n\n.alert--primary {\n border-top-color: var(--six-color-web-rock-900);\n\n .alert__icon {\n color: var(--six-color-web-rock-900);\n }\n}\n\n.alert--success {\n border-top-color: var(--six-color-success-600);\n\n .alert__icon {\n color: var(--six-color-success-600);\n }\n}\n\n.alert--info {\n border-top-color: var(--six-color-action-500);\n\n .alert__icon {\n color: var(--six-color-action-500);\n }\n}\n\n.alert--warning {\n border-top-color: var(--six-color-warning-800);\n\n .alert__icon {\n color: var(--six-color-warning-800);\n }\n}\n\n.alert--danger {\n border-top-color: var(--six-color-danger-900);\n\n .alert__icon {\n color: var(--six-color-danger-900);\n }\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: hidden;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot } from '../../utils/slot';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n tag: 'six-alert',\n styleUrl: 'six-alert.scss',\n shadow: true,\n})\nexport class SixAlert {\n private autoHideTimeout?: number;\n\n @Element() host!: HTMLSixAlertElement;\n\n @State() isVisible = false;\n\n /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Set to true to make the alert closable. */\n @Prop({ reflect: true }) closable = false;\n\n /** The type of alert. */\n @Prop({ reflect: true }) type: AlertType = 'primary';\n\n /**\n * The length of time, in milliseconds, the alert will show before closing itself.\n * If the user hovers over the toast alert, the timer will pause.\n * On leaving the element with the mouse, the timer resets.\n */\n @Prop() duration = Infinity;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the alert opens and all transitions are complete. */\n @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the alert closes and all transitions are complete. */\n @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n /** Shows the alert. */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /** Hides the alert */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n clearTimeout(this.autoHideTimeout);\n this.isVisible = false;\n this.open = false;\n }\n\n /**\n * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n * @param adjustPosition If true, the top and right position of the toast stack is shifted according to the\n * six-root header's height and the presence of a vertical scrollbar.\n */\n @Method()\n async toast(adjustPosition = true) {\n return new Promise<void>((resolve) => {\n if (!toastStack.parentElement) {\n document.body.append(toastStack);\n }\n toastStack.append(this.host);\n\n if (adjustPosition) {\n const sixRoot = document.querySelector('six-root');\n const headerSlot = getSlot(sixRoot, 'header');\n const mainSlot = sixRoot?.shadowRoot?.querySelector('host main');\n if (mainSlot != null && mainSlot instanceof HTMLElement) {\n const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;\n toastStack.style.right = `${scrollbarWidth}px`;\n }\n if (headerSlot != null) {\n const rect = headerSlot?.getBoundingClientRect();\n toastStack.style.top = `${rect.top + rect.height}px`;\n }\n } else {\n toastStack.style.top = '0';\n toastStack.style.right = '0';\n }\n\n requestAnimationFrame(() => this.show());\n\n this.host.addEventListener(\n 'six-alert-after-hide',\n () => {\n this.host.remove();\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (toastStack.querySelector('six-alert') === null) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n private pauseAutoHide() {\n clearTimeout(this.autoHideTimeout);\n }\n\n private resetAutoHide() {\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n private restartAutoHide() {\n this.pauseAutoHide();\n this.resetAutoHide();\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleMouseEnter = () => {\n this.pauseAutoHide();\n };\n\n private handleMouseLeave = () => {\n this.resetAutoHide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('alert')) {\n this.isVisible = this.open;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n const asToast = this.host.closest('.six-toast-stack') != null;\n\n return (\n <div\n part=\"base\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--visible': this.isVisible,\n 'alert--closable': this.closable,\n 'alert--primary': this.type === 'primary',\n 'alert--success': this.type === 'success',\n 'alert--info': this.type === 'info',\n 'alert--warning': this.type === 'warning',\n 'alert--danger': this.type === 'danger',\n 'alert--shadow': asToast,\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <span part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </span>\n\n <span part=\"message\" class=\"alert__message\">\n <slot />\n </span>\n\n {this.closable && (\n <span class=\"alert__close\">\n <six-icon-button\n name=\"clear\"\n exportparts=\"base:close-button\"\n onClick={this.handleCloseClick}\n ></six-icon-button>\n </span>\n )}\n </div>\n );\n }\n}\n\nexport type AlertType = 'primary' | 'success' | 'info' | 'warning' | 'danger';\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-30000e86.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as t,h as e,g as s}from"./p-48118ce8.js";import{I as r}from"./p-862d474e.js";import{D as n,b as o,a as h}from"./p-a1502802.js";import{E as a}from"./p-8bfb4bfc.js";import{h as c}from"./p-0cebf1d2.js";import{a as l,m as p}from"./p-f136a6b2.js";const u=()=>{const i=new Date;return{hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:true}};const m=12;const d=i=>i>m?i-m:i;const f=()=>{const i=new Date;const t=i.getHours();return{hours:d(t),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:false,period:t>=m?"PM":"AM"}};const g=(i=true)=>i?u():f();const x=(i,t)=>{const e=i.split(":");const s=t.split(":");return e.length===s.length};const b=(i,t)=>{const e=i.split(":");const s=t.split(":");if(!x(i,t)){console.error(`Timestring did not match expected format.\nExpected format: ${t}\nReceived timestring: ${i}`)}const r={};e.forEach(((i,t)=>{const e=s[t];switch(e){case"HH":r.hours=Number(i);r.has24Hours=true;break;case"hh":r.hours=Number(i);r.has24Hours=false;break;case"mm":r.minutes=Number(i);break;case"ss":r.seconds=Number(i);break;case"ms":r.milliseconds=Number(i);break;case"aa":r.period=i.toUpperCase()==="PM"?"PM":"AM"}}));return r};const k=(i,t)=>{if(i==null){return""}const e=t.split(":");return e.map((t=>{switch(t){case"HH":case"hh":return String(i.hours).padStart(2,"0");case"mm":return String(i.minutes).padStart(2,"0");case"ss":return String(i.seconds).padStart(2,"0");case"ms":return String(i.milliseconds).padStart(3,"0");case"aa":return String(i.period)}})).join(":")};const v=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.timepicker_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}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;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}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.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}";const _=v;const y=145;const w=class{constructor(e){i(this,e);this.sixChange=t(this,"six-timepicker-change",7);this.sixChangeDebounced=t(this,"six-timepicker-change-debounced",7);this.sixClear=t(this,"six-timepicker-clear",7);this.eventListeners=new a;this.handlePickerChange=(i,t)=>{i.stopPropagation();if(this.popupValue==null){return}this.popupValue[t]=i.detail;const e=k(this.popupValue,this.format);this.value=e;this.sixChange.emit({changedProperty:t,value:this.popupValue,valueAsString:e})};this.handleDocumentMouseDown=i=>{const t=i.composedPath();if(!t.includes(this.host)){this.closePopup();return}};this.handleClearClick=i=>{i.stopPropagation();this.value="";this.sixClear.emit();this.sixChange.emit({value:{},valueAsString:""})};this.format="HH:mm:ss";this.separator=":";this.value="";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.placement=undefined;this.size="medium";this.required=false;this.placeholder=undefined;this.errorText="";this.errorTextCount=undefined;this.label="";this.invalid=false;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false;this.timeout=n;this.interval=o;this.defaultTime=undefined;this.debounce=n;this.isPopupContentUp=false;this.isDropDownContentUp=false;this.popupValue={}}async resizeHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}async scrollHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}valueChanged(){this.updateValue()}async setFocus(i){var t;(t=this.inputElement)===null\|\|t===void 0?void 0:t.setFocus(i)}connectedCallback(){this.eventListeners.forward("six-timepicker-change","change",this.host)}componentWillLoad(){this.updateValue();if(this.inline){this.open=true}if(this.open){this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}componentDidLoad(){if(this.inputElement==null)return;const i=this.inputElement;this.eventListeners.add(this.host,"six-timepicker-change",h((i=>this.sixChangeDebounced.emit(i.detail)),this.debounce));this.eventListeners.add(i,"six-input-input",h((t=>{t.stopPropagation();if(!x(i.value,this.format)){this.value=i.value;this.sixChange.emit({value:{},valueAsString:""});return}this.value=i.value;this.popupValue=b(i.value,this.format);this.sixChange.emit({value:this.popupValue,valueAsString:k(this.popupValue,this.format)})}),this.debounce))}componentDidRender(){l(this.hoist,this.popup,this.inputElement,this.wrapper,y,(i=>this.isDropDownContentUp=i))}disconnectedCallback(){this.eventListeners.removeAll()}updateValue(){if(typeof this.value!=="string"\|\|!x(this.value,this.format)){this.value=""}if(this.value===""){if(this.defaultTime==null){this.popupValue=g(this.is24HourClock())}else{this.popupValue=b(this.defaultTime,this.format)}}else{this.popupValue=b(this.value,this.format)}}calcIsPopupContentUp(){if(this.inputElement==null\|\|this.wrapper==null){return}const i=this.inputElement.getBoundingClientRect();const t=this.wrapper.getBoundingClientRect();const e=Math.max(t.height,y);const s=i.y>window.innerHeight/2;this.isPopupContentUp=s&&window.innerHeight<i.bottom+e}moveOpenHoistedPopup(){p(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,y)}getSixTimeUnitPicker(i){return e("six-item-picker",{class:i.class,timeout:this.timeout,interval:this.interval,padded:true,min:i.min,max:i.max,value:this.popupValue[i.propertyName],items:i.items,type:i.type\|\|r.NUMBER,"padding-length":i.paddingLength,"onSix-item-picker-change":t=>this.handlePickerChange(t,i.propertyName)})}getHour24Picker(){if(!this.is24HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:23,propertyName:"hours"})}is24HourClock(){return this.format.includes("HH")}getHour12Picker(){if(!this.is12HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:11,propertyName:"hours"})}is12HourClock(){return this.format.includes("hh")}getAmPmPicker(){if(!this.is12HourClock()){return}const i=["AM","PM"];return this.getSixTimeUnitPicker({items:i,type:r.CUSTOM,propertyName:"period"})}getMinutePicker(){if(!this.format.includes("mm")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"minutes"})}getSecondsPicker(){if(!this.format.includes("ss")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"seconds"})}getMillisecondsPicker(){if(!this.format.includes("ms")){return}return this.getSixTimeUnitPicker({min:0,max:999,class:"timepicker__item--wide",paddingLength:3,propertyName:"milliseconds"})}getSeparator(){return e("div",{class:"timepicker__separator"},e("span",null,this.separator))}getContent(){const i=[this.getHour24Picker(),this.getHour12Picker(),this.getMinutePicker(),this.getSecondsPicker(),this.getMillisecondsPicker()];const t=i.filter((i=>i!==undefined));return t.map(((i,e)=>{if(e===t.length-1){return[i]}return[i,this.getSeparator()]}))}openPopup(){if(!this.open&&!this.disabled){this.open=true;this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown)}renderClearable(){return this.clearable&&e("button",{slot:"suffix",class:{timepicker_clear:true,"timepicker_clear--right":this.iconPosition==="left","timepicker_clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},e("six-icon",{size:"small"},"clear"))}renderCustomIcon(){const i=c(this.host,"custom-icon")?e("slot",{name:"custom-icon"}):e("six-icon",{size:this.size==="large"?"medium":this.size},"watch_later");return e("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},i)}render(){return e("div",{key:"58240c7c32227225d1811fa59e9cf336aad03a4d",part:"container",ref:i=>this.wrapper=i,class:"timepicker__container"},e("six-input",{key:"1b6e9b28d997b67a933d055fa3e73e3c0751aa53",ref:i=>this.inputElement=i,part:"input",onClick:()=>this.openPopup(),value:this.value,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,errorTextCount:this.errorTextCount,errorText:this.errorText,invalid:this.invalid,size:this.size,name:this.name,label:this.label,required:this.required,class:{"input--empty":this.value==="","input--hide":this.inline}},this.renderCustomIcon(),this.renderClearable(),c(this.host,"label")?e("span",{slot:"label"},e("slot",{name:"label"})):null,c(this.host,"error-text")?e("span",{slot:"error-text"},e("slot",{name:"error-text"})):null),this.open&&e("div",{key:"b762116d0af1bc11d7f2cbb255b071e8fe3b52cf",ref:i=>this.popup=i,part:"popup",class:{timepicker__popup:true,"timepicker__popup--is-up":this.placement==null?this.placement==="top":this.isPopupContentUp,"timepicker__popup--is-inline":this.inline}},...this.getContent(),this.getAmPmPicker()))}get host(){return s(this)}static get watchers(){return{value:["valueChanged"]}}};w.style=_;export{w as six_timepicker};
2	+ //# sourceMappingURL=p-30000e86.entry.js.map

package/dist/ui-library/p-30000e86.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","getCurrentTime","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","timeParts","formatParts","console","error","time","forEach","timeStringPart","i","formatStringPart","Number","toUpperCase","createTimeString","map","timeFormatPart","String","padStart","join","sixTimepickerCss","SixTimepickerStyle0","MIN_POPUP_HEIGHT","SixTimepicker","this","eventListeners","EventListeners","handlePickerChange","event","property","stopPropagation","popupValue","detail","timeString","value","sixChange","emit","changedProperty","valueAsString","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","sixClear","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","resizeHandler","calcIsPopupContentUp","moveOpenHoistedPopup","scrollHandler","valueChanged","updateValue","setFocus","options","_a","inputElement","connectedCallback","forward","componentWillLoad","inline","open","add","document","componentDidLoad","debounce","sixChangeDebounced","componentDidRender","adjustPopupForHoisting","hoist","popup","wrapper","isUp","isDropDownContentUp","disconnectedCallback","removeAll","defaultTime","is24HourClock","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","isPopupContentUp","bottom","movePopup","getSixTimeUnitPicker","params","h","class","timeout","interval","padded","min","propertyName","items","type","ItemPickerType","NUMBER","paddingLength","getHour24Picker","getHour12Picker","is12HourClock","getAmPmPicker","CUSTOM","getMinutePicker","getSecondsPicker","getMillisecondsPicker","getSeparator","separator","getContent","elementsInOrder","visibleElements","filter","el","undefined","idx","openPopup","disabled","remove","renderClearable","clearable","slot","timepicker_clear","iconPosition","onClick","tabindex","size","renderCustomIcon","icon","hasSlot","name","part","prefix","render","key","ref","placeholder","readonly","errorTextCount","errorText","invalid","label","required","timepicker__popup","placement"],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' | 'PM';\n\nexport interface Time {\n hours?: number;\n minutes?: number;\n seconds?: number;\n milliseconds?: number;\n has24Hours?: boolean; // true => 24h, false => 12h\n period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n | 'HH' // 24h\n | 'hh' // 12h\n | 'mm' // minutes\n | 'ss' // seconds\n | 'ms' // milliseconds\n | 'aa'; // period (AM/PM)\n\n/*\n * Supported time formats\n */\nexport type TimeFormat =\n | 'HH:mm:ss'\n | 'hh:mm:ss:aa'\n | 'HH:mm:ss:ms'\n | 'hh:mm:ss:ms:aa'\n | 'HH:mm'\n | 'hh:mm:aa'\n | 'HH'\n | 'hh:aa'\n | 'mm'\n | 'ss'\n | 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n const now = new Date();\n return {\n hours: now.getHours(),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: true,\n };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n const now = new Date();\n const hours = now.getHours();\n return {\n hours: getHoursIn12HourFormat(hours),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: false,\n period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n const timeStringParts = timeStr.split(':');\n const timeFormatParts = format.split(':');\n return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n const timeParts = timeStr.split(':');\n const formatParts = format.split(':') as TimeFormatChar[];\n\n if (!isValidTimeString(timeStr, format)) {\n console.error(\n `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n );\n }\n\n const time: Time = {};\n\n timeParts.forEach((timeStringPart, i) => {\n const formatStringPart: TimeFormatChar = formatParts[i];\n switch (formatStringPart) {\n case 'HH':\n time.hours = Number(timeStringPart);\n time.has24Hours = true;\n break;\n case 'hh':\n time.hours = Number(timeStringPart);\n time.has24Hours = false;\n break;\n case 'mm':\n time.minutes = Number(timeStringPart);\n break;\n case 'ss':\n time.seconds = Number(timeStringPart);\n break;\n case 'ms':\n time.milliseconds = Number(timeStringPart);\n break;\n case 'aa':\n time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n }\n });\n return time;\n};\n\nexport const createTimeString = (time: Time | undefined, format: TimeFormat): string => {\n if (time == null) {\n return '';\n }\n\n const formatParts = format.split(':') as TimeFormatChar[];\n\n return formatParts\n .map((timeFormatPart) => {\n switch (timeFormatPart) {\n case 'HH':\n case 'hh':\n return String(time.hours).padStart(2, '0');\n case 'mm':\n return String(time.minutes).padStart(2, '0');\n case 'ss':\n return String(time.seconds).padStart(2, '0');\n case 'ms':\n return String(time.milliseconds).padStart(3, '0');\n case 'aa':\n return String(time.period);\n }\n })\n .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.timepicker {\n &_clear {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n\n &--right {\n right: 0;\n position: absolute;\n }\n\n &--left {\n right: 35px;\n position: absolute;\n }\n }\n\n &__container {\n position: relative;\n }\n\n &__popup {\n display: flex;\n justify-content: center;\n min-width: min-content;\n min-height: 145px;\n background-color: white;\n padding: 0.5em 0.5em 1.5em;\n box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n user-select: none;\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n right: 0;\n left: 0;\n\n &--is-up {\n bottom: 100%;\n }\n\n &--is-inline {\n position: initial;\n box-shadow: none;\n border: 1px solid var(--six-color-web-rock-400);\n }\n }\n\n &__separator {\n display: flex;\n align-items: center;\n }\n\n &__item {\n &--wide {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n }\n}\n\n.input--empty .timepicker_clear {\n visibility: hidden;\n}\n\n.input--hide {\n display: none;\n}\n\n// Icon position\n.prefix {\n cursor: pointer;\n\n &--right {\n right: 0;\n display: inline-flex;\n position: absolute;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n margin-right: var(--six-input-spacing-medium);\n transition: var(--six-transition-fast) color;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n *\n */\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixTimepickerElement;\n\n /**\n * Define the time format. Valid formats are:\n *\n * HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n *\n * where HH is the 24 hour format\n * and hh is the 12 hour format\n *\n * Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * */\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /**\n * Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * */\n @Prop() separator = ':';\n\n /**\n * The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n */\n @Prop({ mutable: true }) value = '';\n\n /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Indicates whether the timepicker should be shown as an inline (always open) component */\n @Prop({ reflect: true }) inline = false;\n\n /**\n * If `true` the user can only select a time via the timepicker but not directly edit the input field.\n */\n @Prop() readonly = false;\n\n /**\n * If `true` the component is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The enforced placement of the dropdown panel.\n */\n @Prop() placement?: 'top' | 'bottom';\n\n /** Timepicker size. */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /**\n * The placeholder defines what text to be shown on the input element\n */\n @Prop() placeholder?: string;\n\n /** The input's error text. Alternatively, you can use the error-text slot. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** The input's label. Alternatively, you can use the label slot. */\n @Prop() label = '';\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** The input's name attribute. */\n @Prop({ reflect: true }) name = '';\n\n /** Set to true to add a clear button when the input is populated. */\n @Prop() clearable = false;\n\n /** Set the position of the icon */\n @Prop() iconPosition: 'left' | 'right' = 'left';\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 /**\n * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n */\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /**\n * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n */\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /**\n * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n */\n @Prop() defaultTime?: string;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n */\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /**\n * Emitted when the timepicker's value changes\n */\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /**\n * Emitted when the timepicker's value changes, but debounced\n */\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /**\n * Emitted when the clear button is activated.\n */\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n /** Sets focus on the datepickers input. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /*\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n // update value and popup value, and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {\n this.value = '';\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null || this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type || ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n errorTextCount={this.errorTextCount}\n errorText={this.errorText}\n invalid={this.invalid}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-42cd3588.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as i}from"./p-48118ce8.js";const r=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";const t=r;const c=class{constructor(i){o(this,i);this.stage=null}render(){return this.stage==null\|\|this.stage=="PROD"?null:i("div",{class:`indicator--${this.stage.toLowerCase()}`},i("div",{class:"center-content"},i("six-icon",{class:"align-item",size:"small"},"error_outline"),i("span",{class:"align-item"},i("slot",null))))}};c.style=t;export{c as six_stage_indicator};
2	+ //# sourceMappingURL=p-42cd3588.entry.js.map

package/dist/ui-library/p-42cd3588.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixStageIndicatorCss","SixStageIndicatorStyle0","SixStageIndicator","render","this","stage","h","class","toLowerCase","size"],"sources":["src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: grid;\n}\n\n.center-content {\n display: grid;\n align-self: center;\n justify-self: center;\n grid-gap: 5px;\n grid-auto-flow: column;\n}\n\n.align-item {\n margin: auto;\n}\n\n.indicator {\n font-family: var(--six-font-family);\n font-size: 14px;\n font-weight: var(--six-font-weight-bold);\n display: grid;\n align-content: center;\n width: 100%;\n height: 24px;\n\n &--itu {\n @extend .indicator;\n background-color: var(--six-color-success-600);\n color: var(--six-color-web-rock-900);\n }\n\n &--dev {\n @extend .indicator;\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n }\n\n &--etu {\n @extend .indicator;\n background-color: var(--six-color-action-600);\n color: var(--six-color-white);\n }\n\n &--acceptance {\n @extend .indicator;\n background-color: var(--six-color-warning-800);\n color: var(--six-color-web-rock-900);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n tag: 'six-stage-indicator',\n styleUrl: 'six-stage-indicator.scss',\n shadow: true,\n})\nexport class SixStageIndicator {\n /** The indicators value attribute */\n @Prop() stage: StageType = null;\n\n render() {\n return this.stage == null || this.stage == 'PROD' ? null : (\n <div class={`indicator--${this.stage.toLowerCase()}`}>\n <div class=\"center-content\">\n <six-icon class=\"align-item\" size=\"small\">\n error_outline\n </six-icon>\n <span class={'align-item'}>\n <slot />\n </span>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAuB,m2BAC7B,MAAAC,EAAeD,E,MCQFE,EAAiB,M,oCAED,I,CAE3B,MAAAC,GACE,OAAOC,KAAKC,OAAS,MAAQD,KAAKC,OAAS,OAAS,KAClDC,EAAA,OAAKC,MAAO,cAAcH,KAAKC,MAAMG,iBACnCF,EAAA,OAAKC,MAAM,kBACTD,EAAA,YAAUC,MAAM,aAAaE,KAAK,SAAO,iBAGzCH,EAAA,QAAMC,MAAO,cACXD,EAAA,e","ignoreList":[]}