npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.e8b5a11 → 0.0.0-insider.eb446eb - Mend

@six-group/ui-library 0.0.0-insider.e8b5a11 → 0.0.0-insider.eb446eb

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 (1419) hide show

package/dist/ui-library/p-6dd3f54c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/ui-library/p-811ce2a0.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as o,h as e,g as r}from"./p-JoG9I7EO.js";import{E as t}from"./p-C4h4qpGl.js";const s=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.radio{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";let a=0;const l=class{constructor(e){i(this,e);this.sixBlur=o(this,"six-radio-blur");this.sixChange=o(this,"six-radio-change");this.sixFocus=o(this,"six-radio-focus");this.inputId=`radio-${++a}`;this.labelId=`radio-label-${a}`;this.eventListeners=new t;this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.checked=false;this.invalid=false;this.handleClick=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=i=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const e=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let r=o.indexOf(this.host)+e;if(r<0)r=o.length-1;if(r>o.length-1)r=0;this.getAllRadios().forEach((i=>i.checked=false));o[r].setFocus();o[r].checked=true;o[r].dispatchEvent(new CustomEvent("six-radio-change",{bubbles:true,cancelable:true}));i.preventDefault()}};this.handleMouseDown=i=>{var o;i.preventDefault();(o=this.nativeInput)===null\|\|o===void 0?void 0:o.focus()}}handleCheckedChange(){if(this.checked){this.getSiblingRadios().forEach((i=>i.checked=false))}if(this.nativeInput!=null){this.nativeInput.checked=this.checked}}handleNameChange(i){if(this.nativeInput!=null){this.nativeInput.name=i}}connectedCallback(){this.eventListeners.forward("six-radio-change","change",this.host);this.eventListeners.forward("six-radio-blur","blur",this.host);this.eventListeners.forward("six-radio-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(i){var o;(o=this.nativeInput)===null\|\|o===void 0?void 0:o.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null\|\|i===void 0?void 0:i.blur()}getAllRadios(){const i=this.host.closest("form")\|\|document.body;if(this.name==="")return[];return[...i.querySelectorAll("six-radio")].filter((i=>i.name===this.name))}getSiblingRadios(){return this.getAllRadios().filter((i=>i!==this.host))}render(){return e("label",{key:"cdb722e8b78cf02f527d97b3dab6f0679b333c21",part:"base",class:{radio:true,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus},htmlFor:this.inputId,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown},e("span",{key:"9c627a113fe27c340b7f6162d9bde328220c8960",part:"control",class:"radio__control"},e("span",{key:"2ce65408f6c88cb7396c480eba0cc2dd663a3c85",part:"checked-icon",class:"radio__icon"},e("svg",{key:"f4aac67ee8b4a5fb2af26305799b6648e496941e",viewBox:"0 0 16 16"},e("g",{key:"f1bc8651eae70a2ede2dcbf5f48f8237d9f883e6",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},e("g",{key:"7ffa14023971330ae34e041871c0db912789999a",fill:"currentColor"},e("circle",{key:"10d6f37d1227677ba8044a8bffd89f8828e54e0d",cx:"8",cy:"8",r:"5"}))))),e("input",{key:"55ae32be4a36646c17d1238e486df0a483db2650",ref:i=>this.nativeInput=i,id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,role:"radio","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{key:"08128b78c44c561e9dc97f840bacf46059c2483b",part:"label",id:this.labelId,class:"radio__label"},e("slot",{key:"9dd8bcf11566bd74d7b8e91a71cd276947562426"})))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],name:["handleNameChange"]}}};l.style=s;export{l as six_radio};
2	+ //# sourceMappingURL=p-811ce2a0.entry.js.map

package/dist/ui-library/p-811ce2a0.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixRadioCss","id","SixRadio","constructor","hostRef","this","inputId","labelId","eventListeners","EventListeners","hasFocus","name","value","disabled","checked","invalid","handleClick","nativeInput","sixChange","emit","handleBlur","sixBlur","handleFocus","sixFocus","handleKeyDown","keyboardEvent","includes","key","radios","getAllRadios","filter","radio","incr","index","indexOf","host","length","forEach","setFocus","dispatchEvent","CustomEvent","bubbles","cancelable","preventDefault","handleMouseDown","event","_a","focus","handleCheckedChange","getSiblingRadios","handleNameChange","connectedCallback","forward","disconnectedCallback","removeAll","options","removeFocus","blur","form","closest","document","body","querySelectorAll","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","role","onClick","onBlur","onFocus"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.radio {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.radio__icon {\n display: inline-flex;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n\n svg {\n width: 100%;\n height: 100%;\n }\n}\n\n.radio__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--six-selection-control-toggle-size);\n height: var(--six-selection-control-toggle-size);\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: 50%;\n background-color: var(--six-input-background-color);\n color: transparent;\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n color: var(--six-selection-control-color);\n border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n color: var(--six-input-border-color-focus);\n border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n cursor: not-allowed;\n color: var(--six-input-color-disabled);\n\n .radio__control {\n border-color: var(--six-input-border-color-disabled);\n }\n\n &.radio--checked .radio__control {\n color: var(--six-selection-control-color-disabled);\n }\n}\n\n.radio__label {\n line-height: var(--six-selection-control-toggle-size);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n tag: 'six-radio',\n styleUrl: 'six-radio.scss',\n shadow: true,\n})\nexport class SixRadio {\n private inputId = `radio-${++id}`;\n private labelId = `radio-label-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixRadioElement;\n\n @State() hasFocus = false;\n\n /** The radio's name attribute. */\n @Prop() name = '';\n\n /** The radio's value attribute. */\n @Prop({ reflect: true }) value = 'on';\n\n /** Set to true to disable the radio. */\n @Prop() disabled = false;\n\n /** Set to true to draw the radio in a checked state. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.checked) {\n this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n }\n if (this.nativeInput != null) {\n this.nativeInput.checked = this.checked;\n }\n }\n\n @Watch('name')\n handleNameChange(name: string) {\n if (this.nativeInput != null) {\n this.nativeInput.name = name;\n }\n }\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.eventListeners.forward('six-radio-change', 'change', this.host);\n this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the radio. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /** Removes focus from the radio. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private getAllRadios() {\n const form = this.host.closest('form') || document.body;\n\n if (this.name === '') return [];\n\n return [...form.querySelectorAll('six-radio')].filter(\n (radio: HTMLSixRadioElement) => radio.name === this.name\n ) as HTMLSixRadioElement[];\n }\n\n private getSiblingRadios() {\n return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n }\n\n private handleClick = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.sixChange.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n let index = radios.indexOf(this.host) + incr;\n if (index < 0) index = radios.length - 1;\n if (index > radios.length - 1) index = 0;\n\n this.getAllRadios().forEach((radio) => (radio.checked = false));\n radios[index].setFocus();\n radios[index].checked = true;\n radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n keyboardEvent.preventDefault();\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n render() {\n return (\n <label\n part=\"base\"\n class={{\n radio: true,\n 'radio--checked': this.checked,\n 'radio--disabled': this.disabled,\n 'radio--focused': this.hasFocus,\n }}\n htmlFor={this.inputId}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"radio__control\">\n <span part=\"checked-icon\" class=\"radio__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"currentColor\">\n <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n </g>\n </g>\n </svg>\n </span>\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"radio__label\">\n <slot />\n </span>\n </label>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,++DCIpB,IAAIC,EAAK,E,MAqBIC,EAAQ,MALrB,WAAAC,CAAAC,G,kIAMUC,KAAAC,QAAU,WAAWL,IACrBI,KAAAE,QAAU,eAAeN,IAEzBI,KAAAG,eAAiB,IAAIC,EAIpBJ,KAAQK,SAAG,MAGZL,KAAIM,KAAG,GAGUN,KAAKO,MAAG,KAGzBP,KAAQQ,SAAG,MAGqBR,KAAOS,QAAG,MAGzBT,KAAOU,QAAG,MAgE3BV,KAAWW,YAAG,KACpB,GAAIX,KAAKY,aAAe,KAAM,CAC5BZ,KAAKS,QAAUT,KAAKY,YAAYH,QAChCT,KAAKa,UAAUC,M,GAIXd,KAAUe,WAAG,KACnBf,KAAKK,SAAW,MAChBL,KAAKgB,QAAQF,MAAM,EAGbd,KAAWiB,YAAG,KACpBjB,KAAKK,SAAW,KAChBL,KAAKkB,SAASJ,MAAM,EAGdd,KAAAmB,cAAiBC,IACvB,GAAI,CAAC,UAAW,YAAa,YAAa,cAAcC,SAASD,EAAcE,KAAM,CACnF,MAAMC,EAASvB,KAAKwB,eAAeC,QAAQC,IAAWA,EAAMlB,WAC5D,MAAMmB,EAAO,CAAC,UAAW,aAAaN,SAASD,EAAcE,MAAO,EAAK,EACzE,IAAIM,EAAQL,EAAOM,QAAQ7B,KAAK8B,MAAQH,EACxC,GAAIC,EAAQ,EAAGA,EAAQL,EAAOQ,OAAS,EACvC,GAAIH,EAAQL,EAAOQ,OAAS,EAAGH,EAAQ,EAEvC5B,KAAKwB,eAAeQ,SAASN,GAAWA,EAAMjB,QAAU,QACxDc,EAAOK,GAAOK,WACdV,EAAOK,GAAOnB,QAAU,KACxBc,EAAOK,GAAOM,cAAc,IAAIC,YAAY,mBAAoB,CAAEC,QAAS,KAAMC,WAAY,QAC7FjB,EAAckB,gB,GAIVtC,KAAAuC,gBAAmBC,I,MAEzBA,EAAMF,kBACNG,EAAAzC,KAAKY,eAAa,MAAA6B,SAAA,SAAAA,EAAAC,OAAO,CAmD5B,CApJC,mBAAAC,GACE,GAAI3C,KAAKS,QAAS,CAChBT,KAAK4C,mBAAmBZ,SAASN,GAAWA,EAAMjB,QAAU,O,CAE9D,GAAIT,KAAKY,aAAe,KAAM,CAC5BZ,KAAKY,YAAYH,QAAUT,KAAKS,O,EAKpC,gBAAAoC,CAAiBvC,GACf,GAAIN,KAAKY,aAAe,KAAM,CAC5BZ,KAAKY,YAAYN,KAAOA,C,EAa5B,iBAAAwC,GACE9C,KAAKG,eAAe4C,QAAQ,mBAAoB,SAAU/C,KAAK8B,MAC/D9B,KAAKG,eAAe4C,QAAQ,iBAAkB,OAAQ/C,KAAK8B,MAC3D9B,KAAKG,eAAe4C,QAAQ,kBAAmB,QAAS/C,KAAK8B,K,CAG/D,oBAAAkB,GACEhD,KAAKG,eAAe8C,W,CAKtB,cAAMhB,CAASiB,G,OACbT,EAAAzC,KAAKY,eAAW,MAAA6B,SAAA,SAAAA,EAAEC,MAAMQ,E,CAK1B,iBAAMC,G,OACJV,EAAAzC,KAAKY,eAAa,MAAA6B,SAAA,SAAAA,EAAAW,M,CAGZ,YAAA5B,GACN,MAAM6B,EAAOrD,KAAK8B,KAAKwB,QAAQ,SAAWC,SAASC,KAEnD,GAAIxD,KAAKM,OAAS,GAAI,MAAO,GAE7B,MAAO,IAAI+C,EAAKI,iBAAiB,cAAchC,QAC5CC,GAA+BA,EAAMpB,OAASN,KAAKM,M,CAIhD,gBAAAsC,GACN,OAAO5C,KAAKwB,eAAeC,QAAQC,GAAUA,IAAU1B,KAAK8B,M,CA0C9D,MAAA4B,GACE,OACEC,EACE,SAAArC,IAAA,2CAAAsC,KAAK,OACLC,MAAO,CACLnC,MAAO,KACP,iBAAkB1B,KAAKS,QACvB,kBAAmBT,KAAKQ,SACxB,iBAAkBR,KAAKK,UAEzByD,QAAS9D,KAAKC,QACd8D,UAAW/D,KAAKmB,cAChB6C,YAAahE,KAAKuC,iBAElBoB,EAAA,QAAArC,IAAA,2CAAMsC,KAAK,UAAUC,MAAM,kBACzBF,EAAA,QAAArC,IAAA,2CAAMsC,KAAK,eAAeC,MAAM,eAC9BF,EAAK,OAAArC,IAAA,2CAAA2C,QAAQ,aACXN,EAAG,KAAArC,IAAA,2CAAA4C,OAAO,OAAoB,mBAAIC,KAAK,OAAM,YAAW,WACtDR,EAAG,KAAArC,IAAA,2CAAA6C,KAAK,gBACNR,EAAA,UAAArC,IAAA,2CAAQ8C,GAAG,IAAIC,GAAG,IAAIC,EAAE,UAMhCX,EAAA,SAAArC,IAAA,2CACEiD,IAAMC,GAAQxE,KAAKY,YAAc4D,EACjC5E,GAAII,KAAKC,QACTwE,KAAK,QACLnE,KAAMN,KAAKM,KACXC,MAAOP,KAAKO,MACZE,QAAST,KAAKS,QACdD,SAAUR,KAAKQ,SACfkE,KAAK,QACS,eAAA1E,KAAKS,QAAU,OAAS,QACrB,kBAAAT,KAAKE,QACtByE,QAAS3E,KAAKW,YACdiE,OAAQ5E,KAAKe,WACb8D,QAAS7E,KAAKiB,eAIlB0C,EAAA,QAAArC,IAAA,2CAAMsC,KAAK,QAAQhE,GAAII,KAAKE,QAAS2D,MAAM,gBACzCF,EAAQ,QAAArC,IAAA,8C","ignoreList":[]}

package/dist/ui-library/p-83b35622.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as e,h as t,g as s}from"./p-JoG9I7EO.js";import{h as l,g as a}from"./p-j3oIB5oT.js";const o=':host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:"header" "middle" "footer"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}';const r=class{constructor(t){i(this,t);this.sixTileClose=e(this,"six-tile-closed");this.sixTileSelected=e(this,"six-tile-selected");this.label="";this.closeable=true;this.elevated=false;this.disableTooltip=true;this.disabled=false;this.size="medium";this.visible=true;this.hasIconSlot=false;this.hasLabelSlot=false;this.handleSlotChange=()=>{this.hasIconSlot=l(this.host,"icon");this.hasLabelSlot=l(this.host,"label");if(this.hasIconSlot){const i=a(this.host,"icon");i===null\|\|i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}if(this.hasLabelSlot){const i=a(this.host,"label");i===null\|\|i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}};this.handleCloseClickEvent=()=>{this.visible=false;this.sixTileClose.emit()};this.handleClickEvent=()=>{this.sixTileSelected.emit()}}async hide(){this.visible=false}async show(){this.visible=true}componentWillLoad(){this.handleSlotChange()}render(){return t("six-tooltip",{key:"165474a4301eff8d60788826d0378f33640476f4",disabled:this.disableTooltip\|\|this.label==="",content:this.label},t("div",{key:"ae643873a589d648887ab54c614be1cae1e01a95",part:"base",class:{tile:true,"tile--visible":this.visible,"tile--small":this.size==="small","tile--medium":this.size==="medium","tile--large":this.size==="large","tile--elevated":this.elevated}},t("div",{key:"b1fc1fabbf6f853611c7e7401bc007ba23a80985",part:"header",class:"tile__header"},t("six-icon-button",{key:"3c8241f94b14ddbc2aeded4a7471e003112850bf",class:{"tile__header--hidden":!this.closeable},name:"close",size:d(this.size),onClick:this.handleCloseClickEvent})),t("div",{key:"334757a44525044c0d7f78fccf55c9076267c4ff",part:"body",class:"tile__body"},this.iconName&&t("six-icon",{key:"ec0904b8125e608d4d1f5ebeeb1b1fd8f8202a18",onClick:this.handleClickEvent,size:h(this.size)},this.iconName),this.hasIconSlot&&t("slot",{key:"5c4d950efc7de4268da7285024c0900066020c19",name:"icon"})),t("div",{key:"145edac16dcbf511d60d4f044bae7bdd397d939e",part:"footer",class:{"tile__footer--small":this.size==="small","tile__footer--medium":this.size==="medium","tile__footer--large":this.size==="large"}},this.label&&t("div",{key:"e11277aca9e4b1d30050f582fef25f4b77815bfd",class:{".label__footer":true},onClick:this.handleClickEvent},this.label),this.hasLabelSlot&&t("slot",{key:"39e4128ecdb2166b5fba7955a5370e59beae9801",name:"label"}))))}get host(){return s(this)}};const d=i=>({small:"xxSmall",medium:"medium",large:"medium"}[i]);const h=i=>({small:"xLarge",medium:"xxLarge",large:"xxxLarge"}[i]);r.style=o;export{r as six_tile};
2	+ //# sourceMappingURL=p-83b35622.entry.js.map

package/dist/ui-library/{p-8d9b93fa.entry.js.map → p-83b35622.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["sixTileCss","SixTile","constructor","hostRef","this","label","closeable","elevated","disableTooltip","disabled","size","visible","hasIconSlot","hasLabelSlot","handleSlotChange","hasSlot","host","slot","getSlot","addEventListener","handleClickEvent","handleCloseClickEvent","sixTileClose","emit","sixTileSelected","hide","show","componentWillLoad","render","h","key","content","part","class","tile","name","closeIconSize","onClick","iconName","iconSize","small","medium","large"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tile {\n &--small {\n --tile-size: 80px;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n --tile-size: 120px;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n --tile-size: 160px;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n min-height: var(--tile-size);\n width: var(--tile-size);\n\n background-color: var(--six-color-clay-50);\n\n display: inline-grid;\n grid-template-columns: 100%;\n grid-template-areas:\n 'header'\n 'middle'\n 'footer';\n\n &:not(.tile--visible) {\n visibility: hidden;\n }\n\n &--elevated {\n border: 0;\n box-shadow: var(--six-shadow-medium);\n }\n}\n\n.tile__header {\n grid-area: header;\n height: 5%;\n justify-self: right;\n display: flex;\n justify-content: right;\n opacity: 0;\n transition: var(--six-transition-fast) opacity;\n\n .tile:hover > & {\n opacity: 1;\n }\n\n &--hidden {\n visibility: hidden;\n }\n\n six-icon-button {\n margin-top: -6px;\n margin-right: -6px;\n margin-bottom: -16px;\n }\n}\n\n.tile__body {\n grid-area: middle;\n display: grid;\n place-items: center;\n cursor: pointer;\n\n six-icon::part(base) {\n padding: 0;\n }\n\n &--small {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n padding-left: var(--tile-padding-size);\n padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n grid-area: footer;\n display: flex;\n justify-content: center;\n cursor: pointer;\n font-weight: var(--six-font-weight-normal);\n color: var(--six-color-web-rock-900);\n\n &--small {\n @extend .tile__footer;\n font-size: var(--six-font-size-xxx-small);\n }\n\n &--medium {\n @extend .tile__footer;\n font-size: var(--six-font-size-xx-small);\n }\n\n &--large {\n @extend .tile__footer;\n font-size: var(--six-font-size-small);\n }\n\n .label__footer {\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(var(--tile-size) - 2em);\n text-align: center;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n /\n\n@Component({\n tag: 'six-tile',\n styleUrl: 'six-tile.scss',\n shadow: true,\n})\nexport class SixTile {\n @Element() host!: HTMLSixTileElement;\n\n /* The tile's label. /\n @Prop() label = '';\n\n /* The icon's name. /\n @Prop() iconName?: string;\n\n /* Flag, whether the tile is closeable. /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() closeable = true;\n\n /* Flag, whether the tile should cast a shadow. /\n @Prop() elevated = false;\n\n /* Enables tile tooltip for tiles /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() disableTooltip = true;\n\n /* Set to true to disable the tile. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The tile's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @State() visible = true;\n\n /* Emitted when the tile was closed. /\n @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tile is selected. /\n @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n /* Hides the tile /\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /* Shows the tile */\n @Method()\n async show() {\n this.visible = true;\n }\n\n @State() hasIconSlot = false;\n\n @State() hasLabelSlot = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasIconSlot = hasSlot(this.host, 'icon');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n\n if (this.hasIconSlot) {\n const slot = getSlot(this.host, 'icon');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n\n if (this.hasLabelSlot) {\n const slot = getSlot(this.host, 'label');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n };\n\n render() {\n return (\n <six-tooltip disabled={this.disableTooltip \|\| this.label === ''} content={this.label}>\n <div\n part=\"base\"\n class={{\n tile: true,\n 'tile--visible': this.visible,\n 'tile--small': this.size === 'small',\n 'tile--medium': this.size === 'medium',\n 'tile--large': this.size === 'large',\n 'tile--elevated': this.elevated,\n }}\n >\n <div part=\"header\" class=\"tile__header\">\n <six-icon-button\n class={{\n 'tile__header--hidden': !this.closeable,\n }}\n name=\"close\"\n size={closeIconSize(this.size)}\n onClick={this.handleCloseClickEvent}\n />\n </div>\n\n <div part=\"body\" class=\"tile__body\">\n {this.iconName && (\n <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n {this.iconName}\n </six-icon>\n )}\n {this.hasIconSlot && <slot name=\"icon\"></slot>}\n </div>\n\n <div\n part=\"footer\"\n class={{\n 'tile__footer--small': this.size === 'small',\n 'tile__footer--medium': this.size === 'medium',\n 'tile__footer--large': this.size === 'large',\n }}\n >\n {this.label && (\n <div\n class={{\n '.label__footer': true,\n }}\n onClick={this.handleClickEvent}\n >\n {this.label}\n </div>\n )}\n {this.hasLabelSlot && <slot name=\"label\"></slot>}\n </div>\n </div>\n </six-tooltip>\n );\n }\n\n private handleCloseClickEvent = () => {\n this.visible = false;\n this.sixTileClose.emit();\n };\n\n private handleClickEvent = () => {\n this.sixTileSelected.emit();\n };\n}\n\nconst closeIconSize = (size: string) => {\n return {\n small: 'xxSmall',\n medium: 'medium',\n large: 'medium',\n }[size] as 'xSmall' \| 'medium';\n};\n\nconst iconSize = (size: string) => {\n return {\n small: 'xLarge',\n medium: 'xxLarge',\n large: 'xxxLarge',\n }[size] as 'xLarge' \| 'xxLarge' \| 'xxxLarge';\n};\n"],"mappings":"oGAAA,MAAMA,EAAa,~~soE~~,MCcNC,EAAO,MALpB,WAAAC,CAAAC,G,uGASUC,KAAKC,MAAG,GAORD,KAASE,UAAG,KAGZF,KAAQG,SAAG,MAIXH,KAAcI,eAAG,KAGAJ,KAAQK,SAAG,MAGXL,KAAIM,KAAiC,SAErDN,KAAOO,QAAG,KAoBVP,KAAWQ,YAAG,MAEdR,KAAYS,aAAG,MAMhBT,KAAgBU,iBAAG,KACzBV,KAAKQ,YAAcG,EAAQX,KAAKY,KAAM,QACtCZ,KAAKS,aAAeE,EAAQX,KAAKY,KAAM,SAEvC,GAAIZ,KAAKQ,YAAa,CACpB,MAAMK,EAAOC,EAAQd,KAAKY,KAAM,QAChCC,IAAA,MAAAA,SAAA,SAAAA,EAAME,iBAAiB,QAASf,KAAKgB,iB,CAGvC,GAAIhB,KAAKS,aAAc,CACrB,MAAMI,EAAOC,EAAQd,KAAKY,KAAM,SAChCC,IAAA,MAAAA,SAAA,SAAAA,EAAME,iBAAiB,QAASf,KAAKgB,iB,GA+DjChB,KAAqBiB,sBAAG,KAC9BjB,KAAKO,QAAU,MACfP,KAAKkB,aAAaC,MAAM,EAGlBnB,KAAgBgB,iBAAG,KACzBhB,KAAKoB,gBAAgBD,MAAM,CAE9B,CApGC,UAAME,GACJrB,KAAKO,QAAU,K,CAKjB,UAAMe,GACJtB,KAAKO,QAAU,I,CAOjB,iBAAAgB,GACEvB,KAAKU,kB,CAkBP,MAAAc,GACE,OACEC,EAAa,eAAAC,IAAA,2CAAArB,SAAUL,KAAKI,gBAAkBJ,KAAKC,QAAU,GAAI0B,QAAS3B,KAAKC,OAC7EwB,EAAA,OAAAC,IAAA,2CACEE,KAAK,OACLC,MAAO,CACLC,KAAM,KACN,gBAAiB9B,KAAKO,QACtB,cAAeP,KAAKM,OAAS,QAC7B,eAAgBN,KAAKM,OAAS,SAC9B,cAAeN,KAAKM,OAAS,QAC7B,iBAAkBN,KAAKG,WAGzBsB,EAAA,OAAAC,IAAA,2CAAKE,KAAK,SAASC,MAAM,gBACvBJ,EAAA,mBAAAC,IAAA,2CACEG,MAAO,CACL,wBAAyB7B,KAAKE,WAEhC6B,KAAK,QACLzB,KAAM0B,EAAchC,KAAKM,MACzB2B,QAASjC,KAAKiB,yBAIlBQ,EAAA,OAAAC,IAAA,2CAAKE,KAAK,OAAOC,MAAM,cACpB7B,KAAKkC,UACJT,EAAA,YAAAC,IAAA,2CAAUO,QAASjC,KAAKgB,iBAAkBV,KAAM6B,EAASnC,KAAKM,OAC3DN,KAAKkC,UAGTlC,KAAKQ,aAAeiB,EAAA,QAAAC,IAAA,2CAAMK,KAAK,UAGlCN,EAAA,OAAAC,IAAA,2CACEE,KAAK,SACLC,MAAO,CACL,sBAAuB7B,KAAKM,OAAS,QACrC,uBAAwBN,KAAKM,OAAS,SACtC,sBAAuBN,KAAKM,OAAS,UAGtCN,KAAKC,OACJwB,EAAA,OAAAC,IAAA,2CACEG,MAAO,CACL,iBAAkB,MAEpBI,QAASjC,KAAKgB,kBAEbhB,KAAKC,OAGTD,KAAKS,cAAgBgB,EAAA,QAAAC,IAAA,2CAAMK,KAAK,Y,6BAiB7C,MAAMC,EAAiB1B,IACd,CACL8B,MAAO,UACPC,OAAQ,SACRC,MAAO,UACPhC,IAGJ,MAAM6B,EAAY7B,IACT,CACL8B,MAAO,SACPC,OAAQ,UACRC,MAAO,YACPhC,I","ignoreList":[]}
1	+ {"version":3,"names":["sixTileCss","SixTile","constructor","hostRef","this","label","closeable","elevated","disableTooltip","disabled","size","visible","hasIconSlot","hasLabelSlot","handleSlotChange","hasSlot","host","slot","getSlot","addEventListener","handleClickEvent","handleCloseClickEvent","sixTileClose","emit","sixTileSelected","hide","show","componentWillLoad","render","h","key","content","part","class","tile","name","closeIconSize","onClick","iconName","iconSize","small","medium","large"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tile {\n &--small {\n --tile-size: 80px;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n --tile-size: 120px;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n --tile-size: 160px;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n min-height: var(--tile-size);\n width: var(--tile-size);\n\n background-color: var(--six-color-clay-50);\n\n display: inline-grid;\n grid-template-columns: 100%;\n grid-template-areas:\n 'header'\n 'middle'\n 'footer';\n\n &:not(.tile--visible) {\n visibility: hidden;\n }\n\n &--elevated {\n border: 0;\n box-shadow: var(--six-shadow-medium);\n }\n}\n\n.tile__header {\n grid-area: header;\n height: 5%;\n justify-self: right;\n display: flex;\n justify-content: right;\n opacity: 0;\n transition: var(--six-transition-fast) opacity;\n\n .tile:hover > & {\n opacity: 1;\n }\n\n &--hidden {\n visibility: hidden;\n }\n\n six-icon-button {\n margin-top: -6px;\n margin-right: -6px;\n margin-bottom: -16px;\n }\n}\n\n.tile__body {\n grid-area: middle;\n display: grid;\n place-items: center;\n cursor: pointer;\n\n six-icon::part(base) {\n padding: 0;\n }\n\n &--small {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n padding-left: var(--tile-padding-size);\n padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n grid-area: footer;\n display: flex;\n justify-content: center;\n cursor: pointer;\n font-weight: var(--six-font-weight-normal);\n color: var(--six-color-web-rock-900);\n\n &--small {\n @extend .tile__footer;\n font-size: var(--six-font-size-xxx-small);\n }\n\n &--medium {\n @extend .tile__footer;\n font-size: var(--six-font-size-xx-small);\n }\n\n &--large {\n @extend .tile__footer;\n font-size: var(--six-font-size-small);\n }\n\n .label__footer {\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(var(--tile-size) - 2em);\n text-align: center;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n /\n\n@Component({\n tag: 'six-tile',\n styleUrl: 'six-tile.scss',\n shadow: true,\n})\nexport class SixTile {\n @Element() host!: HTMLSixTileElement;\n\n /* The tile's label. /\n @Prop() label = '';\n\n /* The icon's name. /\n @Prop() iconName?: string;\n\n /* Flag, whether the tile is closeable. /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() closeable = true;\n\n /* Flag, whether the tile should cast a shadow. /\n @Prop() elevated = false;\n\n /* Enables tile tooltip for tiles /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() disableTooltip = true;\n\n /* Set to true to disable the tile. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The tile's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @State() visible = true;\n\n /* Emitted when the tile was closed. /\n @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tile is selected. /\n @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n /* Hides the tile /\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /* Shows the tile */\n @Method()\n async show() {\n this.visible = true;\n }\n\n @State() hasIconSlot = false;\n\n @State() hasLabelSlot = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasIconSlot = hasSlot(this.host, 'icon');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n\n if (this.hasIconSlot) {\n const slot = getSlot(this.host, 'icon');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n\n if (this.hasLabelSlot) {\n const slot = getSlot(this.host, 'label');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n };\n\n render() {\n return (\n <six-tooltip disabled={this.disableTooltip \|\| this.label === ''} content={this.label}>\n <div\n part=\"base\"\n class={{\n tile: true,\n 'tile--visible': this.visible,\n 'tile--small': this.size === 'small',\n 'tile--medium': this.size === 'medium',\n 'tile--large': this.size === 'large',\n 'tile--elevated': this.elevated,\n }}\n >\n <div part=\"header\" class=\"tile__header\">\n <six-icon-button\n class={{\n 'tile__header--hidden': !this.closeable,\n }}\n name=\"close\"\n size={closeIconSize(this.size)}\n onClick={this.handleCloseClickEvent}\n />\n </div>\n\n <div part=\"body\" class=\"tile__body\">\n {this.iconName && (\n <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n {this.iconName}\n </six-icon>\n )}\n {this.hasIconSlot && <slot name=\"icon\"></slot>}\n </div>\n\n <div\n part=\"footer\"\n class={{\n 'tile__footer--small': this.size === 'small',\n 'tile__footer--medium': this.size === 'medium',\n 'tile__footer--large': this.size === 'large',\n }}\n >\n {this.label && (\n <div\n class={{\n '.label__footer': true,\n }}\n onClick={this.handleClickEvent}\n >\n {this.label}\n </div>\n )}\n {this.hasLabelSlot && <slot name=\"label\"></slot>}\n </div>\n </div>\n </six-tooltip>\n );\n }\n\n private handleCloseClickEvent = () => {\n this.visible = false;\n this.sixTileClose.emit();\n };\n\n private handleClickEvent = () => {\n this.sixTileSelected.emit();\n };\n}\n\nconst closeIconSize = (size: string) => {\n return {\n small: 'xxSmall',\n medium: 'medium',\n large: 'medium',\n }[size] as 'xSmall' \| 'medium';\n};\n\nconst iconSize = (size: string) => {\n return {\n small: 'xLarge',\n medium: 'xxLarge',\n large: 'xxxLarge',\n }[size] as 'xLarge' \| 'xxLarge' \| 'xxxLarge';\n};\n"],"mappings":"oGAAA,MAAMA,EAAa,iwE,MCcNC,EAAO,MALpB,WAAAC,CAAAC,G,uGASUC,KAAKC,MAAG,GAORD,KAASE,UAAG,KAGZF,KAAQG,SAAG,MAIXH,KAAcI,eAAG,KAGAJ,KAAQK,SAAG,MAGXL,KAAIM,KAAiC,SAErDN,KAAOO,QAAG,KAoBVP,KAAWQ,YAAG,MAEdR,KAAYS,aAAG,MAMhBT,KAAgBU,iBAAG,KACzBV,KAAKQ,YAAcG,EAAQX,KAAKY,KAAM,QACtCZ,KAAKS,aAAeE,EAAQX,KAAKY,KAAM,SAEvC,GAAIZ,KAAKQ,YAAa,CACpB,MAAMK,EAAOC,EAAQd,KAAKY,KAAM,QAChCC,IAAA,MAAAA,SAAA,SAAAA,EAAME,iBAAiB,QAASf,KAAKgB,iB,CAGvC,GAAIhB,KAAKS,aAAc,CACrB,MAAMI,EAAOC,EAAQd,KAAKY,KAAM,SAChCC,IAAA,MAAAA,SAAA,SAAAA,EAAME,iBAAiB,QAASf,KAAKgB,iB,GA+DjChB,KAAqBiB,sBAAG,KAC9BjB,KAAKO,QAAU,MACfP,KAAKkB,aAAaC,MAAM,EAGlBnB,KAAgBgB,iBAAG,KACzBhB,KAAKoB,gBAAgBD,MAAM,CAE9B,CApGC,UAAME,GACJrB,KAAKO,QAAU,K,CAKjB,UAAMe,GACJtB,KAAKO,QAAU,I,CAOjB,iBAAAgB,GACEvB,KAAKU,kB,CAkBP,MAAAc,GACE,OACEC,EAAa,eAAAC,IAAA,2CAAArB,SAAUL,KAAKI,gBAAkBJ,KAAKC,QAAU,GAAI0B,QAAS3B,KAAKC,OAC7EwB,EAAA,OAAAC,IAAA,2CACEE,KAAK,OACLC,MAAO,CACLC,KAAM,KACN,gBAAiB9B,KAAKO,QACtB,cAAeP,KAAKM,OAAS,QAC7B,eAAgBN,KAAKM,OAAS,SAC9B,cAAeN,KAAKM,OAAS,QAC7B,iBAAkBN,KAAKG,WAGzBsB,EAAA,OAAAC,IAAA,2CAAKE,KAAK,SAASC,MAAM,gBACvBJ,EAAA,mBAAAC,IAAA,2CACEG,MAAO,CACL,wBAAyB7B,KAAKE,WAEhC6B,KAAK,QACLzB,KAAM0B,EAAchC,KAAKM,MACzB2B,QAASjC,KAAKiB,yBAIlBQ,EAAA,OAAAC,IAAA,2CAAKE,KAAK,OAAOC,MAAM,cACpB7B,KAAKkC,UACJT,EAAA,YAAAC,IAAA,2CAAUO,QAASjC,KAAKgB,iBAAkBV,KAAM6B,EAASnC,KAAKM,OAC3DN,KAAKkC,UAGTlC,KAAKQ,aAAeiB,EAAA,QAAAC,IAAA,2CAAMK,KAAK,UAGlCN,EAAA,OAAAC,IAAA,2CACEE,KAAK,SACLC,MAAO,CACL,sBAAuB7B,KAAKM,OAAS,QACrC,uBAAwBN,KAAKM,OAAS,SACtC,sBAAuBN,KAAKM,OAAS,UAGtCN,KAAKC,OACJwB,EAAA,OAAAC,IAAA,2CACEG,MAAO,CACL,iBAAkB,MAEpBI,QAASjC,KAAKgB,kBAEbhB,KAAKC,OAGTD,KAAKS,cAAgBgB,EAAA,QAAAC,IAAA,2CAAMK,KAAK,Y,6BAiB7C,MAAMC,EAAiB1B,IACd,CACL8B,MAAO,UACPC,OAAQ,SACRC,MAAO,UACPhC,IAGJ,MAAM6B,EAAY7B,IACT,CACL8B,MAAO,SACPC,OAAQ,UACRC,MAAO,YACPhC,I","ignoreList":[]}

package/dist/ui-library/p-83d5fa7c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as t,h as s,g as a}from"./p-JoG9I7EO.js";import{u as e,l as o}from"./p-BY6hIEFX.js";import{h as l}from"./p-j3oIB5oT.js";import{M as r}from"./p-CfIoyvm-.js";import{a as n}from"./p-SLlDVtvF.js";const d=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";let h=0;const c=class{constructor(s){i(this,s);this.sixShow=t(this,"six-dialog-show");this.sixAfterShow=t(this,"six-dialog-after-show");this.sixHide=t(this,"six-dialog-hide");this.sixAfterHide=t(this,"six-dialog-after-hide");this.sixInitialFocus=t(this,"six-dialog-initial-focus");this.sixRequestClose=t(this,"six-dialog-request-close");this.componentId=`dialog-${++h}`;this.willShow=false;this.willHide=false;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.noHeader=false;this.handleCloseClick=()=>{this.preventClose("close-button")};this.handleKeyDown=i=>{if(i.key==="Escape"){this.preventClose("keyboard")}};this.handleOverlayClick=()=>{this.preventClose("overlay")};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("dialog__panel")){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}}}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new r(this.host,{onFocusOut:()=>{var i;return(i=this.panel)===null\|\|i===void 0?void 0:i.focus()}})}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){if(this.open){this.show()}}disconnectedCallback(){e(this.host)}async show(){if(this.willShow\|\|this.modal==null\|\|this.panel==null\|\|this.dialog==null){return}const i=this.panel;const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();o(this.host);if(this.open){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus({preventScroll:true})}}))}}async hide(){if(this.willHide\|\|this.modal==null){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();e(this.host)}preventClose(i){const t=this.sixRequestClose.emit({source:i});if(t.defaultPrevented&&this.panel){n(this.panel,[{scale:1},{scale:1.01},{scale:1}],{duration:250});return}this.hide()}render(){return s("div",{key:"b97915d5076bb83782212b61b1f65f694fd84b63",ref:i=>this.dialog=i,part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},s("div",{key:"153379e70061e86842f65f3588329dc9c6d592db",part:"overlay",class:"dialog__overlay",onClick:this.handleOverlayClick}),s("div",{key:"d0b78c413a70eeb6e6cbf75be7829a7d1f2ad715",ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&s("header",{key:"94e7d993356ea718e1ed87d4fe9e1d3faf0574f8",part:"header",class:"dialog__header"},s("span",{key:"600591c9266dda80c457f41c54c92a8134d89bb8",part:"title",class:"dialog__title",id:`${this.componentId}-title`},s("slot",{key:"4ad2904648821134ce3851682768b01086a68359",name:"label"},this.label\|\|String.fromCharCode(65279))),s("six-icon-button",{key:"4d793b14b41f7d9c43d5f9949cba6bfe7c6a442c",exportparts:"base:close-button",class:"dialog__close",name:"close",onClick:this.handleCloseClick})),s("div",{key:"729f6cc36802fccf46958b2c259213aa9369fb94",part:"body",class:"dialog__body"},s("slot",{key:"ba299ae12ba958c705a807639aee911167997b38"})),s("footer",{key:"92cb57fa4c4dc066a49dd259832e43be619cc945",part:"footer",class:"dialog__footer"},s("slot",{key:"63ea68abef52d91c04608ad1bf6d508a31012ed9",name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"]}}};c.style=d;export{c as six_dialog};
2	+ //# sourceMappingURL=p-83d5fa7c.entry.js.map

package/dist/ui-library/p-83d5fa7c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixDialogCss","id","SixDialog","constructor","hostRef","this","componentId","willShow","willHide","hasFooter","isVisible","open","label","noHeader","handleCloseClick","preventClose","handleKeyDown","event","key","handleOverlayClick","handleSlotChange","hasSlot","host","handleTransitionEnd","target","propertyName","classList","contains","sixAfterShow","emit","sixAfterHide","handleOpenChange","show","hide","connectedCallback","modal","Modal","onFocusOut","_a","panel","focus","componentWillLoad","componentDidLoad","disconnectedCallback","unlockBodyScrolling","dialog","sixShow","defaultPrevented","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","sixHide","deactivate","source","sixRequestClose","animateTo","scale","duration","render","h","ref","el","part","class","onKeyDown","onTransitionEnd","onClick","role","tabIndex","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDialogRequestClose {\n source: 'close-button' | 'keyboard' | 'overlay';\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 dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * The dialog's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n */\n @Prop() label = '';\n\n /**\n * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n */\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /**\n * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n */\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /**\n * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n * the drawer will result in destructive behavior such as data loss.\n */\n @Event({ eventName: 'six-dialog-request-close' }) sixRequestClose!: EventEmitter<SixDialogRequestClose>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide || this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.preventClose('close-button');\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.preventClose('keyboard');\n }\n };\n\n private handleOverlayClick = () => {\n this.preventClose('overlay');\n };\n\n private preventClose(source: 'close-button' | 'keyboard' | 'overlay') {\n const sixRequestClose = this.sixRequestClose.emit({ source });\n\n if (sixRequestClose.defaultPrevented && this.panel) {\n animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n return;\n }\n\n this.hide();\n }\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\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('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui-library/p-850aff56.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as s,g as o}from"./p-JoG9I7EO.js";import{g as r}from"./p-j3oIB5oT.js";const i=":host{height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";const d=class{constructor(t){e(this,t);this.filter=false;this.filterPlaceholder="Filter...";this.active=false}connectedCallback(){this.updateDropdownDistance()}componentDidLoad(){this.updateDropdownDistance()}render(){return t(s,{key:"f2d143e5da9526b536b6e4d663d7f854ee1a3bf2",class:{"six-header-dropdown-item--active":this.active}},t("six-dropdown",{key:"ad3420fd33db605a06c62a4e7fdca7ecbeb6e3c2",ref:e=>this.dropdownElement=e,hoist:true,skidding:0,placement:"bottom-end","onSix-dropdown-show":()=>this.active=true,"onSix-dropdown-hide":()=>this.active=false,filter:this.filter,filterPlaceholder:this.filterPlaceholder},t("slot",{key:"0bf9ab3feeaa7dbbaf48fb26b18919d0d5e4e936",slot:"trigger",name:"trigger"}),t("slot",{key:"25e063e170bac1f46a805cb2b4b49977212b560a"})))}updateDropdownDistance(){const e=r(this.host,"trigger");const t=this.host.closest("six-header");if(e!=null&&t!=null&&this.dropdownElement!=null&&this.host!=null){const s=this.host.getBoundingClientRect().right;const o=e.getBoundingClientRect().right;const r=t.getBoundingClientRect().bottom;const i=e.getBoundingClientRect().bottom;this.dropdownElement.distance=r-i+3;this.dropdownElement.skidding=s-o}}get host(){return o(this)}};d.style=i;export{d as six_header_dropdown_item};
2	+ //# sourceMappingURL=p-850aff56.entry.js.map

package/dist/ui-library/p-8884a48b.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as i}from"./p-JoG9I7EO.js";const o=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu-divider{border-top:solid var(--six-border-width) var(--six-menu-divider-color);margin-top:var(--six-spacing-xx-small);margin-bottom:var(--six-spacing-xx-small)}";const e=class{constructor(i){r(this,i)}render(){return i("div",{key:"186bd0295f652e28206b3e01a092c0cc67128874",part:"base",class:"menu-divider",role:"separator","aria-hidden":"true"})}};e.style=o;export{e as six_menu_divider};
2	+ //# sourceMappingURL=p-8884a48b.entry.js.map

package/dist/ui-library/{p-3c14d5b5.entry.js.map → p-8884a48b.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["sixMenuDividerCss","SixMenuDivider","render","h","key","part","class","role"],"sources":["src/components/six-menu-divider/six-menu-divider.scss?tag=six-menu-divider&encapsulation=shadow","src/components/six-menu-divider/six-menu-divider.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu-divider {\n border-top: solid var(--six-border-width) var(--six-menu-divider-color);\n margin-top: var(--six-spacing-xx-small);\n margin-bottom: var(--six-spacing-xx-small);\n}\n","import { Component, 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 @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-menu-divider',\n styleUrl: 'six-menu-divider.scss',\n shadow: true,\n})\nexport class SixMenuDivider {\n render() {\n return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,sS,MCgBbC,EAAc,M,yBACzB,MAAAC,GACE,OAAOC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,OAAOC,MAAM,eAAeC,KAAK,YAAwB,sB","ignoreList":[]}
1	+ {"version":3,"names":["sixMenuDividerCss","SixMenuDivider","render","h","key","part","class","role"],"sources":["src/components/six-menu-divider/six-menu-divider.scss?tag=six-menu-divider&encapsulation=shadow","src/components/six-menu-divider/six-menu-divider.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu-divider {\n border-top: solid var(--six-border-width) var(--six-menu-divider-color);\n margin-top: var(--six-spacing-xx-small);\n margin-bottom: var(--six-spacing-xx-small);\n}\n","import { Component, 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 @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-menu-divider',\n styleUrl: 'six-menu-divider.scss',\n shadow: true,\n})\nexport class SixMenuDivider {\n render() {\n return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,ia,MCgBbC,EAAc,M,yBACzB,MAAAC,GACE,OAAOC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,OAAOC,MAAM,eAAeC,KAAK,YAAwB,sB","ignoreList":[]}

package/dist/ui-library/{p-041c4b5d.entry.js → p-91c195d3.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as i,c as s,h as e}from"./p-BF09Gr5y.js";const t=".six-files-list-item{padding-bottom:0.5rem}.six-files-list-item__name{color:var(--six-color-action-600);cursor:pointer}.six-files-list-item__name--disabled{cursor:inherit;color:var(--six-color-web-rock-500)}.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled){color:var(--six-color-action-500)}.six-files-list-item__date{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__size{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__icon{padding-left:0.5rem;display:inline-block;transform:translateY(-3px);cursor:pointer;color:var(--six-color-web-rock-600)}.six-files-list-item__icon--disabled{cursor:not-allowed;color:var(--six-color-web-rock-500)}.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled){color:var(--six-color-web-rock-900)}";const l=class{constructor(e){i(this,e);this.downloadEvent=s(this,"six-file-list-item-download");this.removeEvent=s(this,"six-file-list-item-remove");this.identifier="";this.name="";this.date="";this.nodownload=false;this.nodelete=false;this.downloadFile=()=>{if(this.nodownload){return}this.downloadEvent.emit({fileId:this.identifier,name:this.name})};this.removeFile=()=>{if(this.nodelete){return}this.removeEvent.emit({fileId:this.identifier,name:this.name})}}render(){return e("div",{key:"65ea17f1ce1ff3d9cb48696bbf25465f126ca879",class:"six-files-list-item"},e("span",{key:"53749104860721fd92bbb07b84029e2d3a22c0c0",class:{"six-files-list-item__name":true,"six-files-list-item__name--disabled":this.nodownload},onClick:this.downloadFile},this.name),e("span",{key:"637a12f8bb040e3cf5392ebe7ac488e3d08ae6fb",class:"six-files-list-item__date"},this.date),this.size!=null&&e("span",{key:"208e19ce7a5fa642b0b860fdba2d0dc83feb12fc",class:"six-files-list-item__size"},Math.round(this.size/1024)," KB"),e("six-icon",{key:"ecca120c27d87cd450f99ab24ec26f056d014d71",class:{"six-files-list-item__icon":true,"six-files-list-item__icon--disabled":this.nodelete},size:"small",onClick:this.removeFile},"delete"))}};l.style=t;export{l as six_file_list_item};
-//# sourceMappingURL=p-041c4b5d.entry.js.map
+import{r as i,c as s,h as e}from"./p-JoG9I7EO.js";const t=".six-files-list-item{padding-bottom:0.5rem}.six-files-list-item__name{color:var(--six-color-action-600);cursor:pointer}.six-files-list-item__name--disabled{cursor:inherit;color:var(--six-color-web-rock-500)}.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled){color:var(--six-color-action-500)}.six-files-list-item__date{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__size{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__icon{padding-left:0.5rem;display:inline-block;transform:translateY(-3px);cursor:pointer;color:var(--six-color-web-rock-600)}.six-files-list-item__icon--disabled{cursor:not-allowed;color:var(--six-color-web-rock-500)}.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled){color:var(--six-color-web-rock-900)}";const l=class{constructor(e){i(this,e);this.downloadEvent=s(this,"six-file-list-item-download");this.removeEvent=s(this,"six-file-list-item-remove");this.identifier="";this.name="";this.date="";this.nodownload=false;this.nodelete=false;this.downloadFile=()=>{if(this.nodownload){return}this.downloadEvent.emit({fileId:this.identifier,name:this.name})};this.removeFile=()=>{if(this.nodelete){return}this.removeEvent.emit({fileId:this.identifier,name:this.name})}}render(){return e("div",{key:"31722bec6e2a0956f4d1b14c7ee26330cae7e8cc",class:"six-files-list-item"},e("span",{key:"dfa90db55fd78720884ac4f67e5579b0eb184d40",class:{"six-files-list-item__name":true,"six-files-list-item__name--disabled":this.nodownload},onClick:this.downloadFile},this.name),e("span",{key:"401f4ef61bd59467c074dcdd1b1393724b56b30f",class:"six-files-list-item__date"},this.date),this.size!=null&&e("span",{key:"c9a2df206e02dfe5187f072c59e2c9d4cb59bf19",class:"six-files-list-item__size"},Math.round(this.size/1024)," KB"),e("six-icon",{key:"85857613cb52b6cc117e983573dfa27cd6e78c15",class:{"six-files-list-item__icon":true,"six-files-list-item__icon--disabled":this.nodelete},size:"small",onClick:this.removeFile},"delete"))}};l.style=t;export{l as six_file_list_item};
+//# sourceMappingURL=p-91c195d3.entry.js.map

package/dist/ui-library/p-9ec79195.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as i}from"./p-JoG9I7EO.js";import{f as o}from"./p-Vw_F19Fv.js";const n=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;text-decoration:none;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const e=class{constructor(i){t(this,i);this.size="medium";this.disabled=false;this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}}}componentDidLoad(){if(this.button!=null){o.observe(this.button)}}disconnectedCallback(){if(this.button!=null){o.unobserve(this.button)}}render(){const t=this.href!=null;const o=!t;const n=t?"a":"button";const e=this.html&&i("span",{key:"f351c6ac9b9c3a35d1c7cdd55d3e919f070244d0",innerHTML:this.html});return i("div",{key:"3828510ea2e5a3318c4f9dc1f40f0f13ec8f5120",onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},i(n,{key:"05ed661d1f708125d5353caefe236cd7bf8a427e",ref:t=>this.button=t,part:"base",disabled:o?this.disabled:undefined,tabindex:this.disabled?"-1":undefined,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:o?"button":undefined,"aria-label":this.label,href:t?this.href:undefined,target:t&&this.target!=null?this.target:undefined,download:t&&this.download!=null?this.download:undefined,rel:t&&this.target!=null?"noreferrer noopener":undefined},i("six-icon",{key:"ba8d525d4ced58c6c93dff964738f34b3a36f067","aria-hidden":"true",size:this.size},this.name),i("slot",{key:"8f1c47548463c556045359dc3bfaa51d14b1a6ad"}),e))}};e.style=n;export{e as six_icon_button};
2	+ //# sourceMappingURL=p-9ec79195.entry.js.map

package/dist/ui-library/{p-2c052f64.entry.js.map → p-9ec79195.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["sixIconButtonCss","SixIconButton","constructor","hostRef","this","size","disabled","handleClickEvent","event","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","isLink","href","isButton","Button","html","h","key","innerHTML","onClick","class","ref","el","part","undefined","tabindex","type","label","target","download","rel","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--six-border-radius-medium);\n font-size: inherit;\n text-decoration: none;\n color: var(--six-input-icon-color);\n padding: var(--six-spacing-x-small);\n cursor: pointer;\n transition: var(--six-transition-medium) color;\n -webkit-appearance: none;\n\n &:hover:not(.icon-button--disabled) {\n color: var(--six-input-icon-color-hover);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--six-input-icon-color);\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n // no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement \| HTMLAnchorElement;\n\n /* The name of the icon to draw. /\n @Prop({ reflect: true }) name?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) size: 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'xxLarge' \| 'xxxLarge' = 'medium';\n\n /\n A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n /\n @Prop({ reflect: true }) label?: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* HTML symbol code or entity. /\n @Prop({ reflect: true }) html?: string;\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 componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type={isButton ? 'button' : undefined}\n aria-label={this.label}\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 >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </Button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,~~o0C,~~MCiBZC,EAAa,MAL1B,WAAAC,CAAAC,G,UAY2BC,KAAIC,KAAgF,SASpFD,KAAQE,SAAG,MA4D5BF,KAAAG,iBAAoBC,IAC1B,GAAIJ,KAAKE,SAAU,CACjBE,EAAMC,iBACND,EAAME,iB,EAGX,CApDC,gBAAAC,GACE,GAAIP,KAAKQ,QAAU,KAAM,CACvBC,EAAaC,QAAQV,KAAKQ,O,EAI9B,oBAAAG,GACE,GAAIX,KAAKQ,QAAU,KAAM,CACvBC,EAAaG,UAAUZ,KAAKQ,O,EAIhC,MAAAK,GACE,MAAMC,EAASd,KAAKe,MAAQ,KAC5B,MAAMC,GAAYF,EAClB,MAAMG,EAASH,EAAS,IAAM,SAC9B,MAAMI,EAAOlB,KAAKkB,MAAQC,EAAM,QAAAC,IAAA,2CAAAC,UAAWrB,KAAKkB,OAEhD,OACEC,EAAK,OAAAC,IAAA,2CAAAE,QAAStB,KAAKG,iBAAkBoB,MAAO,CAAE,gCAAiCvB,KAAKE,WAClFiB,EAACF,EAAM,CAAAG,IAAA,2CACLI,IAAMC,GAAQzB,KAAKQ,OAASiB,EAC5BC,KAAK,OACLxB,SAAUc,EAAWhB,KAAKE,SAAWyB,UACrCC,SAAU5B,KAAKE,SAAW,KAAOyB,UACjCJ,MAAO,CACL,cAAe,KACf,wBAAyBvB,KAAKE,UAEhC2B,KAAMb,EAAW,SAAWW,UAAS,aACzB3B,KAAK8B,MACjBf,KAAMD,EAASd,KAAKe,KAAOY,UAC3BI,OAAQjB,GAAUd,KAAK+B,QAAU,KAAO/B,KAAK+B,OAASJ,UACtDK,SAAUlB,GAAUd,KAAKgC,UAAY,KAAOhC,KAAKgC,SAAWL,UAC5DM,IAAKnB,GAAUd,KAAK+B,QAAU,KAAO,sBAAwBJ,WAE7DR,EAAsB,YAAAC,IAAA,gEAAOnB,KAAMD,KAAKC,MACrCD,KAAKkC,MAERf,EAAQ,QAAAC,IAAA,6CACPF,G","ignoreList":[]}
1	+ {"version":3,"names":["sixIconButtonCss","SixIconButton","constructor","hostRef","this","size","disabled","handleClickEvent","event","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","isLink","href","isButton","Button","html","h","key","innerHTML","onClick","class","ref","el","part","undefined","tabindex","type","label","target","download","rel","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--six-border-radius-medium);\n font-size: inherit;\n text-decoration: none;\n color: var(--six-input-icon-color);\n padding: var(--six-spacing-x-small);\n cursor: pointer;\n transition: var(--six-transition-medium) color;\n -webkit-appearance: none;\n\n &:hover:not(.icon-button--disabled) {\n color: var(--six-input-icon-color-hover);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--six-input-icon-color);\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n // no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement \| HTMLAnchorElement;\n\n /* The name of the icon to draw. /\n @Prop({ reflect: true }) name?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) size: 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'xxLarge' \| 'xxxLarge' = 'medium';\n\n /\n A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n /\n @Prop({ reflect: true }) label?: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* HTML symbol code or entity. /\n @Prop({ reflect: true }) html?: string;\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 componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type={isButton ? 'button' : undefined}\n aria-label={this.label}\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 >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </Button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,+7C,MCiBZC,EAAa,MAL1B,WAAAC,CAAAC,G,UAY2BC,KAAIC,KAAgF,SASpFD,KAAQE,SAAG,MA4D5BF,KAAAG,iBAAoBC,IAC1B,GAAIJ,KAAKE,SAAU,CACjBE,EAAMC,iBACND,EAAME,iB,EAGX,CApDC,gBAAAC,GACE,GAAIP,KAAKQ,QAAU,KAAM,CACvBC,EAAaC,QAAQV,KAAKQ,O,EAI9B,oBAAAG,GACE,GAAIX,KAAKQ,QAAU,KAAM,CACvBC,EAAaG,UAAUZ,KAAKQ,O,EAIhC,MAAAK,GACE,MAAMC,EAASd,KAAKe,MAAQ,KAC5B,MAAMC,GAAYF,EAClB,MAAMG,EAASH,EAAS,IAAM,SAC9B,MAAMI,EAAOlB,KAAKkB,MAAQC,EAAM,QAAAC,IAAA,2CAAAC,UAAWrB,KAAKkB,OAEhD,OACEC,EAAK,OAAAC,IAAA,2CAAAE,QAAStB,KAAKG,iBAAkBoB,MAAO,CAAE,gCAAiCvB,KAAKE,WAClFiB,EAACF,EAAM,CAAAG,IAAA,2CACLI,IAAMC,GAAQzB,KAAKQ,OAASiB,EAC5BC,KAAK,OACLxB,SAAUc,EAAWhB,KAAKE,SAAWyB,UACrCC,SAAU5B,KAAKE,SAAW,KAAOyB,UACjCJ,MAAO,CACL,cAAe,KACf,wBAAyBvB,KAAKE,UAEhC2B,KAAMb,EAAW,SAAWW,UAAS,aACzB3B,KAAK8B,MACjBf,KAAMD,EAASd,KAAKe,KAAOY,UAC3BI,OAAQjB,GAAUd,KAAK+B,QAAU,KAAO/B,KAAK+B,OAASJ,UACtDK,SAAUlB,GAAUd,KAAKgC,UAAY,KAAOhC,KAAKgC,SAAWL,UAC5DM,IAAKnB,GAAUd,KAAK+B,QAAU,KAAO,sBAAwBJ,WAE7DR,EAAsB,YAAAC,IAAA,gEAAOnB,KAAMD,KAAKC,MACrCD,KAAKkC,MAERf,EAAQ,QAAAC,IAAA,6CACPF,G","ignoreList":[]}

package/dist/ui-library/p-Dg9366Gk.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{h as l}from"./p-JoG9I7EO.js";const o=(o,r)=>{var e,t,a,n,s,i,d,m;const c=(Array.isArray(o.errorText)?o.errorText:[o.errorText]).filter((l=>l!=null&&l.trim()!==""));const f=o.label!=null&&o.label.trim()!==""?true:(e=o.hasLabelSlot)!==null&&e!==void 0?e:false;const u=o.helpText!=null&&o.helpText.trim()!==""?true:(t=o.hasHelpTextSlot)!==null&&t!==void 0?t:false;const v=(c.length>0\|\|((a=o.hasErrorTextSlot)!==null&&a!==void 0?a:false))&&((n=o.displayError)!==null&&n!==void 0?n:false);return l("div",{part:"form-control",class:{"form-control":true,"form-control--small":o.size==="small","form-control--medium":o.size==="medium","form-control--large":o.size==="large","form-control--has-label":f,"form-control--has-help-text":u,"form-control--has-error-text":v,"form-control--disabled":(s=o.disabled)!==null&&s!==void 0?s:false,"form-control--invalid":((i=o.displayError)!==null&&i!==void 0?i:false)&&!o.disabled}},l("label",{part:"label",id:o.labelId,class:{"form-control__label":true,"form-control__label__required":(d=o.required)!==null&&d!==void 0?d:false},htmlFor:o.inputId,"aria-hidden":f?"false":"true",onClick:o.onLabelClick},l("slot",{name:"label"},o.label)),l("div",{class:"form-control__input"},r),l("div",{part:"error-text",id:o.errorTextId,class:"form-control__error-text","aria-hidden":v?"false":"true"},l("slot",{name:"error-text"},c.slice(0,(m=o.errorTextCount)!==null&&m!==void 0?m:1).map((o=>l("six-error",null,o))))),l("div",{part:"help-text",id:o.helpTextId,class:"form-control__help-text","aria-hidden":u?"false":"true"},l("slot",{name:"help-text"},o.helpText)))};export{o as F};
2	+ //# sourceMappingURL=p-Dg9366Gk.js.map

package/dist/ui-library/p-Dg9366Gk.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"p-Dg9366Gk.js","sources":["src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h, VNode } from '@stencil/core';\n\nexport interface FormControlProps {\n /** The input id, used to map the input to the label */\n inputId: string;\n\n /** The size of the form control */\n size: 'small' | 'medium' | 'large';\n\n /** The label id, used to map the label to the input */\n labelId?: string;\n\n /** The label text (if the label slot isn't used) */\n label?: string;\n\n /** Whether a label slot has been provided. */\n hasLabelSlot?: boolean;\n\n /** The help text id, used to map the input to the help text */\n helpTextId?: string;\n\n /** The help text (if the help-text slot isn't used) */\n helpText?: string;\n\n /** Whether a help text slot has been provided. */\n hasHelpTextSlot?: boolean;\n\n /** Whether an error text slot has been provided. */\n hasErrorTextSlot?: boolean;\n\n /** The error text id, used to map the input to the help text */\n errorTextId?: string;\n\n /** The error text (if the error-text slot isn't used) */\n 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 errorTextCount?: number;\n\n /** Set to true to disable the input. */\n disabled?: boolean;\n\n /** Set if the value is required. */\n required?: boolean;\n\n /** Set if the error text is displayed. */\n displayError?: boolean;\n\n /** A function that gets called when the label is clicked. */\n onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children: VNode[]) => {\n const errorMessages = (Array.isArray(props.errorText) ? props.errorText : [props.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n const hasLabel = props.label != null && props.label.trim() !== '' ? true : (props.hasLabelSlot ?? false);\n const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : (props.hasHelpTextSlot ?? false);\n const hasErrorText = (errorMessages.length > 0 || (props.hasErrorTextSlot ?? false)) && (props.displayError ?? false);\n\n return (\n <div\n part=\"form-control\"\n class={{\n 'form-control': true,\n 'form-control--small': props.size === 'small',\n 'form-control--medium': props.size === 'medium',\n 'form-control--large': props.size === 'large',\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'form-control--has-error-text': hasErrorText,\n 'form-control--disabled': props.disabled ?? false,\n 'form-control--invalid': (props.displayError ?? false) && !props.disabled,\n }}\n >\n <label\n part=\"label\"\n id={props.labelId}\n class={{\n 'form-control__label': true,\n 'form-control__label__required': props.required ?? false,\n }}\n htmlFor={props.inputId}\n aria-hidden={hasLabel ? 'false' : 'true'}\n onClick={props.onLabelClick}\n >\n <slot name=\"label\">{props.label}</slot>\n </label>\n\n <div class=\"form-control__input\">{children}</div>\n\n <div\n part=\"error-text\"\n id={props.errorTextId}\n class=\"form-control__error-text\"\n aria-hidden={hasErrorText ? 'false' : 'true'}\n >\n <slot name=\"error-text\">\n {errorMessages.slice(0, props.errorTextCount ?? 1).map((text) => (\n <six-error>{text}</six-error>\n ))}\n </slot>\n </div>\n\n <div\n part=\"help-text\"\n id={props.helpTextId}\n class=\"form-control__help-text\"\n aria-hidden={hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">{props.helpText}</slot>\n </div>\n </div>\n );\n};\n\nexport default FormControl;\n"],"names":[],"mappings":"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"}

package/dist/ui-library/p-JoG9I7EO.js ADDED Viewed

@@ -0,0 +1,3 @@
+const e="ui-library";const t={hydratedSelectorName:"hydrated",lazyLoad:true,slotRelocation:true,updatable:true};var n=Object.defineProperty;var r=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:true})};var i="http://www.w3.org/2000/svg";var o="http://www.w3.org/1999/xhtml";var l=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var s=(e,t)=>{e.__stencil__getHostRef=()=>t;t.t=e};var f=(e,t)=>{const n={i:0,$hostElement$:e,o:t,l:new Map};{n.u=new Promise((e=>n.v=e))}{n.h=new Promise((e=>n.p=e));e["s-p"]=[];e["s-rc"]=[]}const r=n;e.__stencil__getHostRef=()=>r;return r};var a=(e,t)=>t in e;var c=(e,t)=>(0,console.error)(e,t);var u=new Map;var v=(e,t,n)=>{const r=e.m.replace(/-/g,"_");const i=e.$;if(!i){return void 0}const o=u.get(i);if(o){return o[r]}
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${i}.entry.js${""}`).then((e=>{{u.set(i,e)}return e[r]}),(e=>{c(e,t.$hostElement$)}))};var d=new Map;var h="sty-id";var p="{visibility:hidden}.hydrated{visibility:inherit}";var m="slot-fb{display:contents}slot-fb[hidden]{display:none}";var y="http://www.w3.org/1999/xlink";var w=typeof window!=="undefined"?window:{};var b={i:0,S:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,r)=>e.addEventListener(t,n,r),rel:(e,t,n,r)=>e.removeEventListener(t,n,r),ce:(e,t)=>new CustomEvent(e,t)};var g=(()=>{var e;let t=false;try{(e=w.document)==null?void 0:e.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(e){}return t})();var $=e=>Promise.resolve(e);var S=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var j=false;var O=[];var k=[];var E=(e,t)=>n=>{e.push(n);if(!j){j=true;if(t&&b.i&4){N(x)}else{b.raf(x)}}};var C=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){c(e)}}e.length=0};var x=()=>{C(O);{C(k);if(j=O.length>0){b.raf(x)}}};var N=e=>$().then(e);var M=E(k,true);var R=e=>e!=null&&e!==void 0;var P=e=>{e=typeof e;return e==="object"||e==="function"};function T(e){var t,n,r;return(r=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?r:void 0}var L=e=>e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");var U={};r(U,{err:()=>A,map:()=>D,ok:()=>F,unwrap:()=>W,unwrapErr:()=>_});var F=e=>({isOk:true,isErr:false,value:e});var A=e=>({isOk:false,isErr:true,value:e});function D(e,t){if(e.isOk){const n=t(e.value);if(n instanceof Promise){return n.then((e=>F(e)))}else{return F(n)}}if(e.isErr){const t=e.value;return A(t)}throw"should never get here"}var W=e=>{if(e.isOk){return e.value}else{throw e.value}};var _=e=>{if(e.isErr){return e.value}else{throw e.value}};var H=e=>{const t=G(e,"childNodes");if(e.tagName&&e.tagName.includes("-")&&e["s-cr"]&&e.tagName!=="SLOT-FB"){B(t,e.tagName).forEach((e=>{if(e.nodeType===1&&e.tagName==="SLOT-FB"){if(I(e,Y(e),false).length){e.hidden=true}else{e.hidden=false}}}))}let n=0;for(n=0;n<t.length;n++){const e=t[n];if(e.nodeType===1&&G(e,"childNodes").length){H(e)}}};var z=e=>{const t=[];for(let n=0;n<e.length;n++){const r=e[n]["s-nr"]||void 0;if(r&&r.isConnected){t.push(r)}}return t};function B(e,t,n){let r=0;let i=[];let o;for(;r<e.length;r++){o=e[r];if(o["s-sr"]&&(!t||o["s-hn"]===t)&&n===void 0){i.push(o)}i=[...i,...B(o.childNodes,t,n)]}return i}var I=(e,t,n=true)=>{const r=[];if(n&&e["s-sr"]||!e["s-sr"])r.push(e);let i=e;while(i=i.nextSibling){if(Y(i)===t&&(n||!i["s-sr"]))r.push(i)}return r};var V=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var Y=e=>typeof e["s-sn"]==="string"?e["s-sn"]:e.nodeType===1&&e.getAttribute("slot")||void 0;function q(e){if(e.assignedElements||e.assignedNodes||!e["s-sr"])return;const t=t=>function(e){const n=[];const r=this["s-sn"];if(e==null?void 0:e.flatten){console.error(`\n          Flattening is not supported for Stencil non-shadow slots. \n          You can use \`.childNodes\` to nested slot fallback content.\n          If you have a particular use case, please open an issue on the Stencil repo.\n        `)}const i=this["s-cr"].parentElement;const o=i.__childNodes?i.childNodes:z(i.childNodes);o.forEach((e=>{if(r===Y(e)){n.push(e)}}));if(t){return n.filter((e=>e.nodeType===1))}return n}.bind(e);e.assignedElements=t(true);e.assignedNodes=t(false)}function G(e,t){if("__"+t in e){const n=e["__"+t];if(typeof n!=="function")return n;return n.bind(e)}else{if(typeof e[t]!=="function")return e[t];return e[t].bind(e)}}var J=(e,t="")=>{{return()=>{}}};var K=(e,t)=>{{return()=>{}}};var Q=(e,t,...n)=>{let r=null;let i=null;let o=null;let l=false;let s=false;const f=[];const a=t=>{for(let n=0;n<t.length;n++){r=t[n];if(Array.isArray(r)){a(r)}else if(r!=null&&typeof r!=="boolean"){if(l=typeof e!=="function"&&!P(r)){r=String(r)}if(l&&s){f[f.length-1].j+=r}else{f.push(l?X(null,r):r)}s=l}}};a(n);if(t){if(t.key){i=t.key}if(t.name){o=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,f,te)}const c=X(e,null);c.O=t;if(f.length>0){c.k=f}{c.C=i}{c.N=o}return c};var X=(e,t)=>{const n={i:0,M:e,j:t,R:null,k:null};{n.O=null}{n.C=null}{n.N=null}return n};var Z={};var ee=e=>e&&e.M===Z;var te={forEach:(e,t)=>e.map(ne).forEach(t),map:(e,t)=>e.map(ne).map(t).map(re)};var ne=e=>({vattrs:e.O,vchildren:e.k,vkey:e.C,vname:e.N,vtag:e.M,vtext:e.j});var re=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return Q(e.vtag,t,...e.vchildren||[])}const t=X(e.vtag,e.vtext);t.O=e.vattrs;t.k=e.vchildren;t.C=e.vkey;t.N=e.vname;return t};var ie=e=>{const t=L(e);return new RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${t}))(${t}\\b)`,"g")};ie("::slotted");ie(":host");ie(":host-context");var oe=(e,t)=>{if(e!=null&&!P(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&2){return typeof e==="string"?parseFloat(e):typeof e==="number"?e:NaN}if(t&1){return String(e)}return e}return e};var le=e=>l(e).$hostElement$;var se=(e,t,n)=>{const r=le(e);return{emit:e=>fe(r,t,{bubbles:true,composed:true,cancelable:true,detail:e})}};var fe=(e,t,n)=>{const r=b.ce(t,n);e.dispatchEvent(r);return r};var ae=new WeakMap;var ce=(e,t,n)=>{let r=d.get(e);if(S&&n){r=r||new CSSStyleSheet;if(typeof r==="string"){r=t}else{r.replaceSync(t)}}else{r=t}d.set(e,r)};var ue=(e,t,n)=>{var r;const i=de(t);const o=d.get(i);if(!w.document){return i}e=e.nodeType===11?e:w.document;if(o){if(typeof o==="string"){e=e.head||e;let n=ae.get(e);let l;if(!n){ae.set(e,n=new Set)}if(!n.has(i)){{l=document.querySelector(`[${h}="${i}"]`)||w.document.createElement("style");l.innerHTML=o;const n=(r=b.P)!=null?r:T(w.document);if(n!=null){l.setAttribute("nonce",n)}if(!(t.i&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(l,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if(S){const t=new CSSStyleSheet;t.replaceSync(o);e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");if(t){t.innerHTML=o+t.innerHTML}else{e.prepend(l)}}}else{e.append(l)}}if(t.i&1){e.insertBefore(l,null)}}if(t.i&4){l.innerHTML+=m}if(n){n.add(i)}}}else if(!e.adoptedStyleSheets.includes(o)){e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]}}return i};var ve=e=>{const t=e.o;const n=e.$hostElement$;const r=t.i;const i=J("attachStyles",t.m);const o=ue(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(r&10){n["s-sc"]=o;n.classList.add(o+"-h")}i()};var de=(e,t)=>"sc-"+e.m;var he=(e,t,n,r,i,o,l)=>{if(n===r){return}let s=a(e,t);let f=t.toLowerCase();if(t==="class"){const t=e.classList;const i=me(n);let o=me(r);{t.remove(...i.filter((e=>e&&!o.includes(e))));t.add(...o.filter((e=>e&&!i.includes(e))))}}else if(t==="style"){{for(const t in n){if(!r||r[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in r){if(!n||r[t]!==n[t]){if(t.includes("-")){e.style.setProperty(t,r[t])}else{e.style[t]=r[t]}}}}else if(t==="key");else if(t==="ref"){if(r){r(e)}}else if(!s&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(a(w,f)){t=f.slice(2)}else{t=f[2]+t.slice(3)}if(n||r){const i=t.endsWith(ye);t=t.replace(we,"");if(n){b.rel(e,t,n,i)}if(r){b.ael(e,t,r,i)}}}else{const l=P(r);if((s||l&&r!==null)&&!i){try{if(!e.tagName.includes("-")){const i=r==null?"":r;if(t==="list"){s=false}else if(n==null||e[t]!=i){if(typeof e.__lookupSetter__(t)==="function"){e[t]=i}else{e.setAttribute(t,i)}}}else if(e[t]!==r){e[t]=r}}catch(e){}}let a=false;{if(f!==(f=f.replace(/^xlink\:?/,""))){t=f;a=true}}if(r==null||r===false){if(r!==false||e.getAttribute(t)===""){if(a){e.removeAttributeNS(y,t)}else{e.removeAttribute(t)}}}else if((!s||o&4||i)&&!l&&e.nodeType===1){r=r===true?"":r;if(a){e.setAttributeNS(y,t,r)}else{e.setAttribute(t,r)}}}};var pe=/\s/;var me=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(pe)};var ye="Capture";var we=new RegExp(ye+"$");var be=(e,t,n,r)=>{const i=t.R.nodeType===11&&t.R.host?t.R.host:t.R;const o=e&&e.O||{};const l=t.O||{};{for(const e of ge(Object.keys(o))){if(!(e in l)){he(i,e,o[e],void 0,n,t.i)}}}for(const e of ge(Object.keys(l))){he(i,e,o[e],l[e],n,t.i)}};function ge(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var $e;var Se;var je;var Oe=false;var ke=false;var Ee=false;var Ce=false;var xe=(e,n,r)=>{var l;const s=n.k[r];let f=0;let a;let c;let u;if(!Oe){Ee=true;if(s.M==="slot"){s.i|=s.k?2:1}}if(s.j!==null){a=s.R=w.document.createTextNode(s.j)}else if(s.i&1){a=s.R=w.document.createTextNode("");{be(null,s,Ce)}}else{if(!Ce){Ce=s.M==="svg"}if(!w.document){throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.")}a=s.R=w.document.createElementNS(Ce?i:o,!Oe&&t.slotRelocation&&s.i&2?"slot-fb":s.M);if(Ce&&s.M==="foreignObject"){Ce=false}{be(null,s,Ce)}if(R($e)&&a["s-si"]!==$e){a.classList.add(a["s-si"]=$e)}if(s.k){for(f=0;f<s.k.length;++f){c=xe(e,s,f);if(c){a.appendChild(c)}}}{if(s.M==="svg"){Ce=false}else if(a.tagName==="foreignObject"){Ce=true}}}a["s-hn"]=je;{if(s.i&(2|1)){a["s-sr"]=true;a["s-cr"]=Se;a["s-sn"]=s.N||"";a["s-rf"]=(l=s.O)==null?void 0:l.ref;q(a);u=e&&e.k&&e.k[r];if(u&&u.M===s.M&&e.R){{Ne(e.R,false)}}{_e(Se,a,n.R,e==null?void 0:e.R)}}}return a};var Ne=(e,t)=>{b.i|=1;const n=Array.from(e.__childNodes||e.childNodes);for(let e=n.length-1;e>=0;e--){const r=n[e];if(r["s-hn"]!==je&&r["s-ol"]){We(Le(r).parentNode,r,Le(r));r["s-ol"].remove();r["s-ol"]=void 0;r["s-sh"]=void 0;Ee=true}if(t){Ne(r,t)}}b.i&=-2};var Me=(e,t,n,r,i,o)=>{let l=e["s-cr"]&&e["s-cr"].parentNode||e;let s;if(l.shadowRoot&&l.tagName===je){l=l.shadowRoot}for(;i<=o;++i){if(r[i]){s=xe(null,n,i);if(s){r[i].R=s;We(l,s,Le(t))}}}};var Re=(e,t,n)=>{for(let r=t;r<=n;++r){const t=e[r];if(t){const e=t.R;De(t);if(e){{ke=true;if(e["s-ol"]){e["s-ol"].remove()}else{Ne(e,true)}}e.remove()}}}};var Pe=(e,t,n,r,i=false)=>{let o=0;let l=0;let s=0;let f=0;let a=t.length-1;let c=t[0];let u=t[a];let v=r.length-1;let d=r[0];let h=r[v];let p;let m;while(o<=a&&l<=v){if(c==null){c=t[++o]}else if(u==null){u=t[--a]}else if(d==null){d=r[++l]}else if(h==null){h=r[--v]}else if(Te(c,d,i)){Ue(c,d,i);c=t[++o];d=r[++l]}else if(Te(u,h,i)){Ue(u,h,i);u=t[--a];h=r[--v]}else if(Te(c,h,i)){if(c.M==="slot"||h.M==="slot"){Ne(c.R.parentNode,false)}Ue(c,h,i);We(e,c.R,u.R.nextSibling);c=t[++o];h=r[--v]}else if(Te(u,d,i)){if(c.M==="slot"||h.M==="slot"){Ne(u.R.parentNode,false)}Ue(u,d,i);We(e,u.R,c.R);u=t[--a];d=r[++l]}else{s=-1;{for(f=o;f<=a;++f){if(t[f]&&t[f].C!==null&&t[f].C===d.C){s=f;break}}}if(s>=0){m=t[s];if(m.M!==d.M){p=xe(t&&t[l],n,s)}else{Ue(m,d,i);t[s]=void 0;p=m.R}d=r[++l]}else{p=xe(t&&t[l],n,l);d=r[++l]}if(p){{We(Le(c.R).parentNode,p,Le(c.R))}}}}if(o>a){Me(e,r[v+1]==null?null:r[v+1].R,n,r,l,v)}else if(l>v){Re(t,o,a)}};var Te=(e,t,n=false)=>{if(e.M===t.M){if(e.M==="slot"){return e.N===t.N}if(!n){return e.C===t.C}if(n&&!e.C&&t.C){e.C=t.C}return true}return false};var Le=e=>e&&e["s-ol"]||e;var Ue=(e,n,r=false)=>{const i=n.R=e.R;const o=e.k;const l=n.k;const s=n.M;const f=n.j;let a;if(f===null){{Ce=s==="svg"?true:s==="foreignObject"?false:Ce}{be(e,n,Ce)}if(o!==null&&l!==null){Pe(i,o,n,l,r)}else if(l!==null){if(e.j!==null){i.textContent=""}Me(i,null,n,l,0,l.length-1)}else if(!r&&t.updatable&&o!==null){Re(o,0,o.length-1)}if(Ce&&s==="svg"){Ce=false}}else if(a=i["s-cr"]){a.parentNode.textContent=f}else if(e.j!==f){i.data=f}};var Fe=[];var Ae=e=>{let t;let n;let r;const i=e.__childNodes||e.childNodes;for(const e of i){if(e["s-sr"]&&(t=e["s-cr"])&&t.parentNode){n=t.parentNode.__childNodes||t.parentNode.childNodes;const i=e["s-sn"];for(r=n.length-1;r>=0;r--){t=n[r];if(!t["s-cn"]&&!t["s-nr"]&&t["s-hn"]!==e["s-hn"]&&true){if(V(t,i)){let n=Fe.find((e=>e.T===t));ke=true;t["s-sn"]=t["s-sn"]||i;if(n){n.T["s-sh"]=e["s-hn"];n.L=e}else{t["s-sh"]=e["s-hn"];Fe.push({L:e,T:t})}if(t["s-sr"]){Fe.map((e=>{if(V(e.T,t["s-sn"])){n=Fe.find((e=>e.T===t));if(n&&!e.L){e.L=n.L}}}))}}else if(!Fe.some((e=>e.T===t))){Fe.push({T:t})}}}}if(e.nodeType===1){Ae(e)}}};var De=e=>{{e.O&&e.O.ref&&e.O.ref(null);e.k&&e.k.map(De)}};var We=(e,t,n)=>{if(typeof t["s-sn"]==="string"&&!!t["s-sr"]&&!!t["s-cr"]){_e(t["s-cr"],t,e,t.parentElement)}{return e==null?void 0:e.insertBefore(t,n)}};function _e(e,t,n,r){var i,o;let l;if(e&&typeof t["s-sn"]==="string"&&!!t["s-sr"]&&e.parentNode&&e.parentNode["s-sc"]&&(l=t["s-si"]||e.parentNode["s-sc"])){const e=t["s-sn"];const s=t["s-hn"];(i=n.classList)==null?void 0:i.add(l+"-s");if(r&&((o=r.classList)==null?void 0:o.contains(l+"-s"))){let t=(r.__childNodes||r.childNodes)[0];let n=false;while(t){if(t["s-sn"]!==e&&t["s-hn"]===s&&!!t["s-sr"]){n=true;break}t=t.nextSibling}if(!n)r.classList.remove(l+"-s")}}}var He=(e,t,n=false)=>{var r,i,o,l;const s=e.$hostElement$;const f=e.o;const a=e.U||X(null,null);const c=ee(t);const u=c?t:Q(null,null,t);je=s.tagName;if(f.F){u.O=u.O||{};f.F.map((([e,t])=>u.O[t]=s[e]))}if(n&&u.O){for(const e of Object.keys(u.O)){if(s.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){u.O[e]=s[e]}}}u.M=null;u.i|=4;e.U=u;u.R=a.R=s.shadowRoot||s;{$e=s["s-sc"]}Oe=!!(f.i&1)&&!(f.i&128);{Se=s["s-cr"];ke=false}Ue(a,u,n);{b.i|=1;if(Ee){Ae(u.R);for(const e of Fe){const t=e.T;if(!t["s-ol"]&&w.document){const e=w.document.createTextNode("");e["s-nr"]=t;We(t.parentNode,t["s-ol"]=e,t)}}for(const e of Fe){const t=e.T;const s=e.L;if(s){const e=s.parentNode;let n=s.nextSibling;{let o=(r=t["s-ol"])==null?void 0:r.previousSibling;while(o){let r=(i=o["s-nr"])!=null?i:null;if(r&&r["s-sn"]===t["s-sn"]&&e===(r.__parentNode||r.parentNode)){r=r.nextSibling;while(r===t||(r==null?void 0:r["s-sr"])){r=r==null?void 0:r.nextSibling}if(!r||!r["s-nr"]){n=r;break}}o=o.previousSibling}}const l=t.__parentNode||t.parentNode;const f=t.__nextSibling||t.nextSibling;if(!n&&e!==l||f!==n){if(t!==n){if(!t["s-hn"]&&t["s-ol"]){t["s-hn"]=t["s-ol"].parentNode.nodeName}We(e,t,n);if(t.nodeType===1&&t.tagName!=="SLOT-FB"){t.hidden=(o=t["s-ih"])!=null?o:false}}}t&&typeof s["s-rf"]==="function"&&s["s-rf"](s)}else{if(t.nodeType===1){if(n){t["s-ih"]=(l=t.hidden)!=null?l:false}t.hidden=true}}}}if(ke){H(u.R)}b.i&=-2;Fe.length=0}Se=void 0};var ze=(e,t)=>{if(t&&!e.A&&t["s-p"]){const n=t["s-p"].push(new Promise((r=>e.A=()=>{t["s-p"].splice(n-1,1);r()})))}};var Be=(e,t)=>{{e.i|=16}if(e.i&4){e.i|=512;return}ze(e,e.D);const n=()=>Ie(e,t);return M(n)};var Ie=(e,t)=>{const n=e.$hostElement$;const r=J("scheduleUpdate",e.o.m);const i=e.t;if(!i){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let o;if(t){{e.i|=256;if(e.W){e.W.map((([e,t])=>Qe(i,e,t,n)));e.W=void 0}}o=Qe(i,"componentWillLoad",void 0,n)}else{o=Qe(i,"componentWillUpdate",void 0,n)}o=Ve(o,(()=>Qe(i,"componentWillRender",void 0,n)));r();return Ve(o,(()=>qe(e,i,t)))};var Ve=(e,t)=>Ye(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var Ye=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var qe=async(e,t,n)=>{var r;const i=e.$hostElement$;const o=J("update",e.o.m);const l=i["s-rc"];if(n){ve(e)}const s=J("render",e.o.m);{Ge(e,t,i,n)}if(l){l.map((e=>e()));i["s-rc"]=void 0}s();o();{const t=(r=i["s-p"])!=null?r:[];const n=()=>Je(e);if(t.length===0){n()}else{Promise.all(t).then(n);e.i|=4;t.length=0}}};var Ge=(e,t,n,r)=>{try{t=t.render();{e.i&=-17}{e.i|=2}{{{He(e,t,r)}}}}catch(t){c(t,e.$hostElement$)}return null};var Je=e=>{const t=e.o.m;const n=e.$hostElement$;const r=J("postUpdate",t);const i=e.t;const o=e.D;Qe(i,"componentDidRender",void 0,n);if(!(e.i&64)){e.i|=64;{Xe(n)}Qe(i,"componentDidLoad",void 0,n);r();{e.p(n);if(!o){Ke()}}}else{Qe(i,"componentDidUpdate",void 0,n);r()}{e.v(n)}{if(e.A){e.A();e.A=void 0}if(e.i&512){N((()=>Be(e,false)))}e.i&=-517}};var Ke=t=>{N((()=>fe(w,"appload",{detail:{namespace:e}})))};var Qe=(e,t,n,r)=>{if(e&&e[t]){try{return e[t](n)}catch(e){c(e,r)}}return void 0};var Xe=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var Ze=(e,t)=>l(e).l.get(t);var et=(e,t,n,r)=>{const i=l(e);if(!i){throw new Error(`Couldn't find host element for "${r.m}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`)}const o=i.$hostElement$;const s=i.l.get(t);const f=i.i;const a=i.t;n=oe(n,r._[t][0]);const u=Number.isNaN(s)&&Number.isNaN(n);const v=n!==s&&!u;if((!(f&8)||s===void 0)&&v){i.l.set(t,n);if(a){if(r.H&&f&128){const e=r.H[t];if(e){e.map((e=>{try{a[e](n,s,t)}catch(e){c(e,o)}}))}}if((f&(2|16))===2){if(a.componentShouldUpdate){if(a.componentShouldUpdate(n,s,t)===false){return}}Be(i,false)}}}};var tt=(e,n,r)=>{var i,o;const s=e.prototype;if(n._||(n.H||e.watchers)){if(e.watchers&&!n.H){n.H=e.watchers}const f=Object.entries((i=n._)!=null?i:{});f.map((([e,[t]])=>{if(t&31||r&2&&t&32){const{get:i,set:o}=Object.getOwnPropertyDescriptor(s,e)||{};if(i)n._[e][0]|=2048;if(o)n._[e][0]|=4096;if(r&1||!i){Object.defineProperty(s,e,{get(){{if((n._[e][0]&2048)===0){return Ze(this,e)}const t=l(this);const r=t?t.t:s;if(!r)return;return r[e]}},configurable:true,enumerable:true})}Object.defineProperty(s,e,{set(i){const s=l(this);if(o){const r=t&32?this[e]:s.$hostElement$[e];if(typeof r==="undefined"&&s.l.get(e)){i=s.l.get(e)}else if(!s.l.get(e)&&r){s.l.set(e,r)}o.apply(this,[oe(i,t)]);i=t&32?this[e]:s.$hostElement$[e];et(this,e,i,n);return}{if((r&1)===0||(n._[e][0]&4096)===0){et(this,e,i,n);if(r&1&&!s.t){s.h.then((()=>{if(n._[e][0]&4096&&s.t[e]!==s.l.get(e)){s.t[e]=i}}))}return}const o=()=>{const r=s.t[e];if(!s.l.get(e)&&r){s.l.set(e,r)}s.t[e]=oe(i,t);et(this,e,s.t[e],n)};if(s.t){o()}else{s.h.then((()=>o()))}}}})}else if(r&1&&t&64){Object.defineProperty(s,e,{value(...t){var n;const r=l(this);return(n=r==null?void 0:r.u)==null?void 0:n.then((()=>{var n;return(n=r.t)==null?void 0:n[e](...t)}))}})}}));if(r&1){const r=new Map;s.attributeChangedCallback=function(e,i,o){b.jmp((()=>{var f;const a=r.get(e);if(this.hasOwnProperty(a)&&t.lazyLoad){o=this[a];delete this[a]}else if(s.hasOwnProperty(a)&&typeof this[a]==="number"&&this[a]==o){return}else if(a==null){const t=l(this);const r=t==null?void 0:t.i;if(r&&!(r&8)&&r&128&&o!==i){const r=t.t;const l=(f=n.H)==null?void 0:f[e];l==null?void 0:l.forEach((t=>{if(r[t]!=null){r[t].call(r,o,i,e)}}))}return}const c=Object.getOwnPropertyDescriptor(s,a);o=o===null&&typeof this[a]==="boolean"?false:o;if(o!==this[a]&&(!c.get||!!c.set)){this[a]=o}}))};e.observedAttributes=Array.from(new Set([...Object.keys((o=n.H)!=null?o:{}),...f.filter((([e,t])=>t[0]&15)).map((([e,t])=>{var i;const o=t[1]||e;r.set(o,e);if(t[0]&512){(i=n.F)==null?void 0:i.push([e,o])}return o}))]))}}return e};var nt=async(e,t,n,r)=>{let i;if((t.i&32)===0){t.i|=32;const r=n.$;if(r){const r=v(n,t);if(r&&"then"in r){const e=K();i=await r;e()}else{i=r}if(!i){throw new Error(`Constructor for "${n.m}#${t.B}" was not found`)}if(!i.isProxied){{n.H=i.watchers}tt(i,n,2);i.isProxied=true}const o=J("createInstance",n.m);{t.i|=8}try{new i(t)}catch(t){c(t,e)}{t.i&=-9}{t.i|=128}o();rt(t.t,e)}else{i=e.constructor;const n=e.localName;customElements.whenDefined(n).then((()=>t.i|=128))}if(i&&i.style){let e;if(typeof i.style==="string"){e=i.style}const t=de(n);if(!d.has(t)){const r=J("registerStyles",n.m);ce(t,e,!!(n.i&1));r()}}}const o=t.D;const l=()=>Be(t,true);if(o&&o["s-rc"]){o["s-rc"].push(l)}else{l()}};var rt=(e,t)=>{{Qe(e,"connectedCallback",void 0,t)}};var it=e=>{if((b.i&1)===0){const t=l(e);const n=t.o;const r=J("connectedCallback",n.m);if(!(t.i&1)){t.i|=1;{if(n.i&(4|8)){ot(e)}}{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){ze(t,t.D=n);break}}}if(n._){Object.entries(n._).map((([t,[n]])=>{if(n&31&&e.hasOwnProperty(t)){const n=e[t];delete e[t];e[t]=n}}))}{nt(e,t,n)}}else{at(e,t,n.I);if(t==null?void 0:t.t){rt(t.t,e)}else if(t==null?void 0:t.h){t.h.then((()=>rt(t.t,e)))}}r()}};var ot=e=>{if(!w.document){return}const t=e["s-cr"]=w.document.createComment("");t["s-cn"]=true;We(e,t,e.firstChild)};var lt=(e,t)=>{{Qe(e,"disconnectedCallback",void 0,t||e)}};var st=async e=>{if((b.i&1)===0){const t=l(e);{if(t.V){t.V.map((e=>e()));t.V=void 0}}if(t==null?void 0:t.t){lt(t.t,e)}else if(t==null?void 0:t.h){t.h.then((()=>lt(t.t,e)))}}if(ae.has(e)){ae.delete(e)}if(e.shadowRoot&&ae.has(e.shadowRoot)){ae.delete(e.shadowRoot)}};var ft=(e,t={})=>{var n;if(!w.document){console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");return}const r=J();const i=[];const o=t.exclude||[];const s=w.customElements;const a=w.document.head;const c=a.querySelector("meta[charset]");const u=w.document.createElement("style");const v=[];let d;let h=true;Object.assign(b,t);b.S=new URL(t.resourcesUrl||"./",w.document.baseURI).href;let y=false;e.map((e=>{e[1].map((t=>{var n;const r={i:t[0],m:t[1],_:t[2],I:t[3]};if(r.i&4){y=true}{r._=t[2]}{r.I=t[3]}{r.F=[]}{r.H=(n=t[4])!=null?n:{}}const a=r.m;const c=class extends HTMLElement{constructor(e){super(e);this.hasRegisteredEventListeners=false;e=this;f(e,r);if(r.i&1){{if(!e.shadowRoot){{e.attachShadow({mode:"open"})}}else{if(e.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${r.m}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}}connectedCallback(){const e=l(this);if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true;at(this,e,r.I)}if(d){clearTimeout(d);d=null}if(h){v.push(this)}else{b.jmp((()=>it(this)))}}disconnectedCallback(){b.jmp((()=>st(this)));b.raf((()=>{var e;const t=l(this);const n=v.findIndex((e=>e===this));if(n>-1){v.splice(n,1)}if(((e=t==null?void 0:t.U)==null?void 0:e.R)instanceof Node&&!t.U.R.isConnected){delete t.U.R}}))}componentOnReady(){return l(this).h}};r.$=e[0];if(!o.includes(a)&&!s.get(a)){i.push(a);s.define(a,tt(c,r,1))}}))}));if(i.length>0){if(y){u.textContent+=m}{u.textContent+=i.sort()+p}if(u.innerHTML.length){u.setAttribute("data-styles","");const e=(n=b.P)!=null?n:T(w.document);if(e!=null){u.setAttribute("nonce",e)}a.insertBefore(u,c?c.nextSibling:a.firstChild)}}h=false;if(v.length){v.map((e=>e.connectedCallback()))}else{{b.jmp((()=>d=setTimeout(Ke,30)))}}r()};var at=(e,t,n,r)=>{if(n&&w.document){n.map((([n,r,i])=>{const o=ut(w.document,e,n);const l=ct(t,i);const s=vt(n);b.ael(o,r,l,s);(t.V=t.V||[]).push((()=>b.rel(o,r,l,s)))}))}};var ct=(e,t)=>n=>{var r;try{{if(e.i&256){(r=e.t)==null?void 0:r[t](n)}else{(e.W=e.W||[]).push([t,n])}}}catch(t){c(t,e.$hostElement$)}};var ut=(e,t,n)=>{if(n&8){return w}return t};var vt=e=>g?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var dt=e=>b.P=e;export{Z as H,ft as b,se as c,le as g,Q as h,$ as p,s as r,dt as s};
+//# sourceMappingURL=p-JoG9I7EO.js.map