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

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

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

package/dist/esm/six-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-input.entry.js","mappings":"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","names":[],"sources":["./src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","./src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: var(--six-input-font-size-medium);\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, Method, Prop, State, Watch, h } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nconst ICON_SIZES: Record<'small' \| 'medium' \| 'large', 'xSmall' \| 'small' \| 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, 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 /\n\n@Component({\n tag: 'six-input',\n styleUrl: 'six-input.scss',\n shadow: true,\n})\nexport class SixInput {\n inputId = `input-${++id}`;\n labelId = `input-label-${id}`;\n helpTextId = `input-help-text-${id}`;\n errorTextId = `input-error-text-${id}`;\n input: HTMLInputElement;\n customErrorText = '';\n customValidation = false;\n\n readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The input's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText = '';\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 /* Set to true to make the input a required field. /\n @Prop({ reflect: true }) required: boolean;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize: string;\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: string;\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete: string;\n\n /* The input's autofocus attribute. /\n @Prop() autofocus: boolean;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck: boolean;\n\n /\n This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n /\n @Prop({ mutable: true, 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 /* Set to display the error text on blur and not when typing /\n @Prop() errorOnBlur = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n if (!this.input) {\n return;\n }\n this.input.value = this.value;\n this.invalid = !this.input.checkValidity();\n this.sixValueChange.emit();\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 /\n Emitted whenever the value changes. Access the new value via event.target.value.\n * six-input-value-change will emit whenever the value changes.\n * So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,\n * but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter\n * or leaves the input field after entering some data.\n * /\n @Event({ eventName: 'six-input-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n /* defaultValue which the input will be reverted to when executing reset /\n private defaultValue = '';\n\n connectedCallback() {\n this.handleChange = this.handleChange.bind(this);\n this.handleInput = this.handleInput.bind(this);\n this.handleInvalid = this.handleInvalid.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleClearClick = this.handleClearClick.bind(this);\n this.handlePasswordToggle = this.handlePasswordToggle.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.value;\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.eventListeners.add(this.input, 'invalid', (event) => {\n if (this.customValidation \|\| (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n this.customErrorText = this.input.validationMessage;\n }\n event.preventDefault();\n });\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.input.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.input.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.input.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. /\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n this.input.setRangeText(replacement, start, end, selectMode);\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.input.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity() {\n return this.input.validity.valid;\n }\n\n /* Sets a custom validation message. If `message` is not empty, the field will be considered invalid. /\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /* Returns the native input's validity /\n @Method()\n async getValidity() {\n return this.input.validity;\n }\n\n /* Returns the native input's validity /\n @Method()\n async isValid() {\n return this.input.validity.valid;\n }\n\n /* Returns the native input's validationMessage /\n @Method()\n async getValidationMessage() {\n return this.input.validationMessage;\n }\n\n /* Resets the formcontrol */\n @Method()\n async reset() {\n this.value = this.defaultValue;\n this.customErrorText = '';\n this.customValidation = false;\n this.input.setCustomValidity('');\n this.invalid = false;\n }\n\n handleChange() {\n this.value = this.input.value;\n this.sixChange.emit();\n }\n\n handleInput() {\n this.value = this.input.value;\n this.sixInput.emit();\n }\n\n handleInvalid() {\n this.invalid = true;\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.sixBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.sixFocus.emit();\n }\n\n handleClearClick(event: MouseEvent) {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n this.input.focus();\n\n event.stopPropagation();\n }\n\n handlePasswordToggle() {\n this.isPasswordVisible = !this.isPasswordVisible;\n }\n\n handleSlotChange() {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n }\n\n displayError() {\n return this.invalid && (!this.errorOnBlur \|\| !this.hasFocus);\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.customErrorText ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\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--focused': this.hasFocus,\n 'input--empty': this.value?.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.input = 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.value}\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 onInvalid={this.handleInvalid}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-input.entry.js","mappings":"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","names":[],"sources":["./src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","./src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: var(--six-input-font-size-medium);\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';\n\nconst ICON_SIZES: Record<'small' \| 'medium' \| 'large', 'xSmall' \| 'small' \| 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, 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 /\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 customErrorText = '';\n private customValidation = false;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The input's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText = '';\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 /* Set to true to make the input a required field. /\n @Prop({ reflect: true }) 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 /\n This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n /\n @Prop({ mutable: true, 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 /* Set to display the error text on blur and not when typing /\n @Prop() errorOnBlur = 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) {\n if (this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n this.invalid = !this.nativeInput.checkValidity();\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 /* defaultValue which the input will be reverted to when executing reset /\n private defaultValue = '';\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.getValue();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.eventListeners.add(nativeInput, 'invalid', (event) => {\n this.invalid = true;\n if (this.customValidation \|\| (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n this.customErrorText = nativeInput.validationMessage;\n }\n event.preventDefault();\n });\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. /\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.nativeInput?.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.validity.valid;\n }\n\n /* Sets a custom validation message. If `message` is not empty, the field will be considered invalid. /\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n if (this.nativeInput != null) {\n this.nativeInput.setCustomValidity(message);\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Returns the native input's validity /\n @Method()\n async getValidity(): Promise<ValidityState \| undefined> {\n return this?.nativeInput?.validity;\n }\n\n /* Returns the native input's validity /\n @Method()\n async isValid(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.validity.valid;\n }\n\n /* Returns the native input's validationMessage /\n @Method()\n async getValidationMessage() {\n if (this.nativeInput == null) {\n return '';\n }\n return this.nativeInput.validationMessage;\n }\n\n /* Resets the formcontrol */\n @Method()\n async reset() {\n this.value = this.defaultValue;\n this.customErrorText = '';\n this.customValidation = false;\n this.nativeInput?.setCustomValidity('');\n this.invalid = false;\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\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 handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n };\n\n private displayError() {\n return this.invalid && (!this.errorOnBlur \|\| !this.hasFocus);\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.customErrorText !== '' ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\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--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 data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-item-picker.entry.js CHANGED Viewed

@@ -1,51 +1,26 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5c0f6628.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-371fb9d4.js';
 import { I as ItemPickerType, a as ItemPickerPaddingDirection } from './types-4b10b413.js';
-import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-1a60d709.js';
-import { E as EventListeners } from './event-listeners-570a24ea.js';
+import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-72cc50f4.js';
+import { E as EventListeners } from './event-listeners-6b434035.js';
 const sixItemPickerCss = ".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";
-const A_CHARCODE = 65;
-const NUMBER_OF_LETTERS = 26;
-const CAPITAL_ALPHABET = (() => {
-  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);
-  const letterIndexes = {};
-  const alphabet = alphabetCodes.map((charCode, index) => {
-    const character = String.fromCharCode(charCode);
-    letterIndexes[character] = index;
-    return character;
-  });
-  return { alphabet, letterIndexes };
-})();
-const LOWERCASE_ALPHABET = (() => {
-  const alphabet = [];
-  const letterIndexes = {};
-  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
-    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();
-    letterIndexes[lowercaseCharacter] = alphabet.length;
-    alphabet.push(lowercaseCharacter);
-  }
-  return { alphabet, letterIndexes };
-})();
-const ALPHABET = (() => {
-  const alphabet = [];
-  const letterIndexes = {};
-  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
-    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];
-    letterIndexes[capitalCharacter] = alphabet.length;
-    alphabet.push(capitalCharacter);
-    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];
-    letterIndexes[lowerCharacter] = alphabet.length;
-    alphabet.push(lowerCharacter);
-  }
-  return { alphabet, letterIndexes };
-})();
+const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const upperAndLowercaseLetters = [...uppercaseLetters].flatMap((c) => [c, c.toLowerCase()]);
+const ALPHABET = {
+  alphabet: upperAndLowercaseLetters,
+  letterIndexes: Object.fromEntries(upperAndLowercaseLetters.map((c, i) => [c, i])),
+};
+const CAPITAL_ALPHABET = {
+  alphabet: [...uppercaseLetters].flatMap((c) => [c]),
+  letterIndexes: Object.fromEntries([...uppercaseLetters].map((c, i) => [c, i])),
+};
+const LOWERCASE_ALPHABET = {
+  alphabet: [...uppercaseLetters.toLowerCase()].flatMap((c) => [c]),
+  letterIndexes: Object.fromEntries([...uppercaseLetters.toLowerCase()].map((c, i) => [c, i])),
+};
 const createItemIndexes = (arr) => {
-  const itemIndexes = {};
-  for (let i = 0; i < (arr === null || arr === void 0 ? void 0 : arr.length); i++) {
-    itemIndexes[arr[i]] = i;
-  }
-  return itemIndexes;
+  return Object.fromEntries([...arr].map((c, i) => [c, i]));
 };
 const TAG = `[SIX-ITEM-PICKER]`;
 const subtract = (a, b) => a - b;
@@ -75,7 +50,7 @@ const SixItemPicker = class {
     this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
     this.debounce = DEFAULT_DEBOUNCE_FAST;
     this._items = [];
-    this._itemIndexes = undefined;
+    this._itemIndexes = {};
   }
   handleValueChange() {
     this.setup();
@@ -115,11 +90,7 @@ const SixItemPicker = class {
     }
   }
   setUpStringItems() {
-    this._items = this.getItems();
-    if (!this._items) {
-      console.warn(`${TAG}: abort setup because no items were found.`);
-      return;
-    }
+    this._items = this.getStringItems();
     this._itemIndexes = this.getItemIndexes();
     const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;
     if (itemsMissValue) {
@@ -146,23 +117,39 @@ const SixItemPicker = class {
   getLastStringItem() {
     return this._items[this._items.length - 1];
   }
-  getItems() {
-    return {
-      [ItemPickerType.LETTER]: ALPHABET.alphabet,
-      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,
-      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,
-      [ItemPickerType.CUSTOM]: this.items,
-    }[this.type];
+  getStringItems() {
+    switch (this.type) {
+      case ItemPickerType.NUMBER:
+        console.warn(`${TAG}: unexpected type ${this.type}`);
+        return [];
+      case ItemPickerType.LETTER:
+        return ALPHABET.alphabet;
+      case ItemPickerType.CAPITAL_LETTER:
+        return CAPITAL_ALPHABET.alphabet;
+      case ItemPickerType.LOWER_LETTER:
+        return LOWERCASE_ALPHABET.alphabet;
+      case ItemPickerType.CUSTOM:
+        if (this.items == null || this.items.length === 0) {
+          console.warn(`${TAG}: no items defined for type ${this.type}`);
+          return [];
+        }
+        return this.items;
+    }
   }
   getItemIndexes() {
-    if (this.type === ItemPickerType.CUSTOM) {
-      return createItemIndexes(this.items);
+    switch (this.type) {
+      case ItemPickerType.NUMBER:
+        console.warn(`${TAG}: unexpected type ${this.type}`);
+        return {};
+      case ItemPickerType.LETTER:
+        return ALPHABET.letterIndexes;
+      case ItemPickerType.CAPITAL_LETTER:
+        return CAPITAL_ALPHABET.letterIndexes;
+      case ItemPickerType.LOWER_LETTER:
+        return LOWERCASE_ALPHABET.letterIndexes;
+      case ItemPickerType.CUSTOM:
+        return createItemIndexes(this._items);
     }
-    return {
-      [ItemPickerType.LETTER]: ALPHABET.letterIndexes,
-      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,
-      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,
-    }[this.type];
   }
   previousItem() {
     if (this.isNumber()) {
@@ -182,13 +169,13 @@ const SixItemPicker = class {
     });
   }
   previousStringItem() {
-    const value = this.value;
-    const minLetter = this.min;
+    const value = String(this.value);
+    const minLetter = String(this.min);
     this.changeValue({
       isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
       getNextItem: () => this.getNextItemByOperation(subtract),
-      getRoundtripItem: () => this.max,
-      isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+      getRoundtripItem: () => String(this.max),
+      isRoundtripPossible: () => this.max == null && this.roundtrip,
     });
   }
   nextItem() {
@@ -212,17 +199,17 @@ const SixItemPicker = class {
     return this._itemIndexes[char];
   }
   nextStringItem() {
-    const value = this.value;
-    const maxLetter = this.max;
+    const value = String(this.value);
+    const maxLetter = String(this.max);
     this.changeValue({
       isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
       getNextItem: () => this.getNextItemByOperation(add),
-      getRoundtripItem: () => this.min,
+      getRoundtripItem: () => String(this.min),
       isRoundtripPossible: () => this.min === undefined && this.roundtrip,
     });
   }
   getNextItemByOperation(operation) {
-    const value = this.value;
+    const value = String(this.value);
     const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);
     const numberOfItems = this._items.length;
     const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;
@@ -247,7 +234,7 @@ const SixItemPicker = class {
     return this.type === ItemPickerType.NUMBER;
   }
   isInvalidNumber() {
-    return this.value === '' || !!isNaN(this.value);
+    return this.value === '' || isNaN(this.value);
   }
   isNextDisabled() {
     if (this.roundtrip) {
@@ -257,9 +244,6 @@ const SixItemPicker = class {
       return this.isNextNumberDisabled();
     }
     else {
-      if (!this._itemIndexes) {
-        return true;
-      }
       return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
     }
   }
@@ -275,9 +259,6 @@ const SixItemPicker = class {
       return this.isPreviousNumberDisabled();
     }
     else {
-      if (!this._itemIndexes) {
-        return true;
-      }
       return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
     }
   }

package/dist/esm/six-item-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-item-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/six-item-picker/six-item-picker.scss?tag=six-item-picker&encapsulation=shadow","./src/components/six-item-picker/six-item-picker.tsx"],"sourcesContent":[".item_picker {\n &__container {\n width: 2.5em;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n &__content {\n font-size: 1.5rem;\n }\n\n &__btn {\n cursor: pointer;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--six-color-web-rock-500);\n\n &:hover {\n background-color: var(--six-color-web-rock-100);\n border-radius: 100%;\n }\n\n &:active {\n color: var(--six-color-web-rock-400);\n }\n\n &--disabled {\n color: var(--six-color-web-rock-300);\n cursor: not-allowed;\n\n &:hover {\n background-color: initial;\n }\n\n &:active {\n color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerPaddingDirection, ItemPickerType } from './types';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\ntype StringItemIndex = { [key: string]: number };\n\ninterface Alphabet {\n alphabet: string[];\n letterIndexes: StringItemIndex;\n}\n\nconst A_CHARCODE = 65;\nconst NUMBER_OF_LETTERS = 26;\n\nconst CAPITAL_ALPHABET: Alphabet = (() => {\n const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);\n const letterIndexes = {};\n const alphabet = alphabetCodes.map((charCode, index) => {\n const character = String.fromCharCode(charCode);\n letterIndexes[character] = index;\n return character;\n });\n return { alphabet, letterIndexes };\n})();\n\nconst LOWERCASE_ALPHABET: Alphabet = (() => {\n const alphabet = [];\n const letterIndexes = {};\n\n for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();\n letterIndexes[lowercaseCharacter] = alphabet.length;\n alphabet.push(lowercaseCharacter);\n }\n\n return { alphabet, letterIndexes };\n})();\n\nconst ALPHABET: Alphabet = (() => {\n const alphabet = [];\n const letterIndexes = {};\n\n for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];\n letterIndexes[capitalCharacter] = alphabet.length;\n alphabet.push(capitalCharacter);\n\n const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];\n letterIndexes[lowerCharacter] = alphabet.length;\n alphabet.push(lowerCharacter);\n }\n\n return { alphabet, letterIndexes };\n})();\n\nconst createItemIndexes = (arr: string[]): StringItemIndex => {\n const itemIndexes = {};\n\n for (let i = 0; i < arr?.length; i++) {\n itemIndexes[arr[i]] = i;\n }\n\n return itemIndexes;\n};\n\nconst TAG = `[SIX-ITEM-PICKER]`;\n\nconst subtract = (a: number, b: number) => a - b;\nconst add = (a: number, b: number) => a + b;\n\nexport type SixItemPickerChangePayload = number \| string;\n\nconst DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';\n\n/*\n @since 2.0.0\n * @status experimental\n * @part container - The whole component container\n * @part up - The up button\n * @part content - The content area\n * @part down - The down button\n \n /\n@Component({\n tag: 'six-item-picker',\n styleUrl: 'six-item-picker.scss',\n shadow: true,\n})\nexport class SixItemPicker {\n private readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixItemPickerElement;\n\n /** The item picker's value attribute. /\n @Prop({ mutable: true, reflect: true }) value: number \| string = '';\n\n /* The type of items you want to rotate through. /\n @Prop() type: ItemPickerType = ItemPickerType.NUMBER;\n\n /* The minimum value allowed to pick. /\n @Prop({ reflect: true, mutable: true }) min: number \| string;\n\n /* The maximum value allowed to pick. /\n @Prop({ reflect: true, mutable: true }) max: number \| string;\n\n /* Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. /\n @Prop({ reflect: true }) roundtrip = true;\n\n /* Defines how many steps should be taken when navigating /\n @Prop({ reflect: true }) step: number = 1;\n\n /* Defines a custom list of items you can iterate through /\n @Prop() items: string[];\n\n /* Defines whether the items should be padded /\n @Prop() padded = false;\n\n /* Defines the length of the padded area /\n @Prop() paddingLength = 2;\n\n /* Defines the character used for padding /\n @Prop() paddingChar = '0';\n\n /* Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\n * before is selected /\n @Prop() paddingDirection: ItemPickerPaddingDirection = ItemPickerPaddingDirection.BEFORE;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between items.\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n Emitted when the item picker's value changes\n /\n @Event({ eventName: 'six-item-picker-change' }) sixChange: EventEmitter<SixItemPickerChangePayload>;\n\n /\n Emitted when the item picker's value changes, but debounced\n /\n @Event({ eventName: 'six-item-picker-change-debounced' })\n sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n */\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n @Watch('value')\n handleValueChange() {\n this.setup();\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);\n this.eventListeners.add(\n this.host,\n 'six-item-picker-change',\n debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n DEBOUNCE_ITEM_PICKER_LISTENER\n );\n }\n\n @Watch('items')\n handleSetChange() {\n this.setup();\n this.min = this._items[0];\n this.max = this.getLastStringItem();\n }\n\n @State() _items: string[] = [];\n @State() _itemIndexes: StringItemIndex;\n\n // used for fast increasing when keeping the mouse button held down\n _timeoutNext: ReturnType<typeof setTimeout>;\n _intervalNext: ReturnType<typeof setInterval>;\n\n _timeoutPrev: ReturnType<typeof setTimeout>;\n _intervalPrev: ReturnType<typeof setInterval>;\n\n componentWillLoad() {\n this.setup();\n }\n\n componentDidLoad() {\n this.eventListeners.add(\n this.host,\n 'six-item-picker-change',\n debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n DEBOUNCE_ITEM_PICKER_LISTENER\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n handleSixItemPickerChangeDebounced = () => {\n this.sixChangeDebounced.emit(this.value);\n };\n\n private setup() {\n if (this.isNumber()) {\n this.setupNumberItems();\n } else {\n this.setUpStringItems();\n }\n }\n\n private setupNumberItems() {\n if (this.isInvalidNumber()) {\n console.warn(`${TAG} Expected number but value is not a number: \"${this.value}\"`);\n console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);\n this.value = this.min ?? 0;\n }\n }\n\n private setUpStringItems() {\n this._items = this.getItems();\n\n if (!this._items) {\n console.warn(`${TAG}: abort setup because no items were found.`);\n return;\n }\n\n this._itemIndexes = this.getItemIndexes();\n const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;\n if (itemsMissValue) {\n console.warn(`${TAG} Expected item from item set but value was not found in set: \"${this.value}\"`);\n console.info(`${TAG} Will set value to either minimum or if not provided to \"${this._items[0]}\".`);\n this.value = this._items[0];\n }\n\n if (this.min === undefined) {\n if (!this.roundtrip) {\n console.warn(`${TAG} Expected a min value`);\n console.info(`${TAG} Will set min value to ${this._items[0]}`);\n }\n this.min = this._items[0];\n }\n\n if (this.max === undefined) {\n const maxItem = this.getLastStringItem();\n if (!this.roundtrip) {\n console.warn(`${TAG} Expected a min value if roundtrip is enabled`);\n console.info(`${TAG} Will set min value to ${maxItem}`);\n }\n this.max = maxItem;\n }\n }\n\n private getLastStringItem() {\n return this._items[this._items.length - 1];\n }\n\n private getItems() {\n return {\n [ItemPickerType.LETTER]: ALPHABET.alphabet,\n [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,\n [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,\n [ItemPickerType.CUSTOM]: this.items,\n }[this.type];\n }\n\n private getItemIndexes() {\n if (this.type === ItemPickerType.CUSTOM) {\n return createItemIndexes(this.items);\n }\n\n return {\n [ItemPickerType.LETTER]: ALPHABET.letterIndexes,\n [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,\n [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,\n }[this.type];\n }\n\n private previousItem() {\n if (this.isNumber()) {\n this.previousNumber();\n } else {\n this.previousStringItem();\n }\n\n this.sixChange.emit(this.value);\n }\n\n private previousNumber() {\n this.changeValue({\n isNextItemAllowed: () => !this.isPreviousNumberDisabled(),\n getNextItem: () => Number(this.value) - this.step,\n getRoundtripItem: () => Number(this.max),\n isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n });\n }\n\n private previousStringItem() {\n const value = this.value as string;\n const minLetter = this.min as string;\n\n this.changeValue({\n isNextItemAllowed: () =>\n minLetter === undefined \|\| this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),\n getNextItem: () => this.getNextItemByOperation(subtract),\n getRoundtripItem: () => this.max,\n isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n });\n }\n\n private nextItem() {\n if (this.isNumber()) {\n this.nextNumber();\n } else {\n this.nextStringItem();\n }\n\n this.sixChange.emit(this.value);\n }\n\n private nextNumber() {\n this.changeValue({\n isNextItemAllowed: () => !this.isNextNumberDisabled(),\n getNextItem: () => Number(this.value) + this.step,\n getRoundtripItem: () => Number(this.min),\n isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n });\n }\n\n private getStringItemIndex(char: string): number {\n return this._itemIndexes[char];\n }\n\n private nextStringItem() {\n const value = this.value as string;\n const maxLetter = this.max as string;\n\n this.changeValue({\n isNextItemAllowed: () =>\n maxLetter === undefined \|\| this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),\n getNextItem: () => this.getNextItemByOperation(add),\n getRoundtripItem: () => this.min,\n isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n });\n }\n\n private getNextItemByOperation(operation: (a: number, b: number) => number) {\n const value = this.value as string;\n const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);\n const numberOfItems = this._items.length;\n const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;\n return this._items[nextIndex];\n }\n\n private changeValue(params: {\n getNextItem: () => any;\n isNextItemAllowed: () => boolean;\n getRoundtripItem: () => number \| string;\n isRoundtripPossible: () => boolean;\n }) {\n if (params.isNextItemAllowed()) {\n this.value = params.getNextItem();\n return;\n }\n\n if (params.isRoundtripPossible()) {\n console.error(\n `${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`\n );\n return;\n }\n\n if (this.roundtrip) {\n this.value = params.getRoundtripItem();\n return;\n }\n\n console.warn(\n `${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`\n );\n }\n\n private isNumber() {\n return this.type === ItemPickerType.NUMBER;\n }\n\n private isInvalidNumber() {\n return this.value === '' \|\| !!isNaN(this.value as number);\n }\n\n private isNextDisabled() {\n if (this.roundtrip) {\n return false;\n }\n\n if (this.isNumber()) {\n return this.isNextNumberDisabled();\n } else {\n if (!this._itemIndexes) {\n return true;\n }\n\n return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];\n }\n }\n\n private isNextNumberDisabled() {\n return Number(this.value) + this.step > (this.max ?? Infinity);\n }\n\n private isPrevDisabled() {\n if (this.roundtrip) {\n return false;\n }\n\n if (this.isNumber()) {\n return this.isPreviousNumberDisabled();\n } else {\n if (!this._itemIndexes) {\n return true;\n }\n\n return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];\n }\n }\n\n private isPreviousNumberDisabled() {\n return Number(this.value) - this.step < (this.min ?? -Infinity);\n }\n\n private onMouseDownNext() {\n if (this.isNextDisabled()) {\n return;\n }\n\n this.nextItem();\n\n this._timeoutNext = setTimeout(() => {\n this._intervalNext = setInterval(() => {\n this.nextItem();\n }, this.interval);\n }, this.timeout);\n }\n\n private onMouseUpNext() {\n clearTimeout(this._timeoutNext);\n clearInterval(this._intervalNext);\n }\n\n private onMouseDownPrev() {\n if (this.isPrevDisabled()) {\n return;\n }\n\n this.previousItem();\n\n this._timeoutPrev = setTimeout(() => {\n this._intervalPrev = setInterval(() => {\n this.previousItem();\n }, this.interval);\n }, this.timeout);\n }\n\n private onMouseUpPrev() {\n clearTimeout(this._timeoutPrev);\n clearInterval(this._intervalPrev);\n }\n\n private getFormattedValue() {\n if (this.value === undefined \|\| this.value === null) {\n return this.value;\n }\n\n if (!this.padded) {\n return this.value;\n }\n\n if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {\n return String(this.value).padStart(this.paddingLength, this.paddingChar);\n } else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {\n return String(this.value).padEnd(this.paddingLength, this.paddingChar);\n }\n\n return this.value;\n }\n\n render() {\n return (\n <div part=\"container\" class=\"item_picker__container\">\n <div\n part=\"up\"\n class={{\n item_picker__btn: true,\n 'item_picker__btn--disabled': this.isNextDisabled(),\n }}\n onMouseDown={() => this.onMouseDownNext()}\n onMouseUp={() => this.onMouseUpNext()}\n >\n <six-icon size=\"large\">expand_less</six-icon>\n </div>\n <div part=\"content\" class=\"item_picker__content\">\n {this.getFormattedValue()}\n </div>\n <div\n part=\"down\"\n class={{\n item_picker__btn: true,\n 'item_picker__btn--disabled': this.isPrevDisabled(),\n }}\n onMouseDown={() => this.onMouseDownPrev()}\n onMouseUp={() => this.onMouseUpPrev()}\n >\n <six-icon size=\"large\">expand_more</six-icon>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-item-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/six-item-picker/six-item-picker.scss?tag=six-item-picker&encapsulation=shadow","./src/components/six-item-picker/six-item-picker.tsx"],"sourcesContent":[".item_picker {\n &__container {\n width: 2.5em;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n &__content {\n font-size: 1.5rem;\n }\n\n &__btn {\n cursor: pointer;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--six-color-web-rock-500);\n\n &:hover {\n background-color: var(--six-color-web-rock-100);\n border-radius: 100%;\n }\n\n &:active {\n color: var(--six-color-web-rock-400);\n }\n\n &--disabled {\n color: var(--six-color-web-rock-300);\n cursor: not-allowed;\n\n &:hover {\n background-color: initial;\n }\n\n &:active {\n color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerPaddingDirection, ItemPickerType } from './types';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { TimePeriod } from '../../utils/time.util';\n\ninterface Alphabet {\n alphabet: string[];\n letterIndexes: Record<string, number>;\n}\n\nconst uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\nconst upperAndLowercaseLetters = [...uppercaseLetters].flatMap((c) => [c, c.toLowerCase()]);\nconst ALPHABET: Alphabet = {\n alphabet: upperAndLowercaseLetters,\n letterIndexes: Object.fromEntries(upperAndLowercaseLetters.map((c, i) => [c, i])),\n};\nconst CAPITAL_ALPHABET: Alphabet = {\n alphabet: [...uppercaseLetters].flatMap((c) => [c]),\n letterIndexes: Object.fromEntries([...uppercaseLetters].map((c, i) => [c, i])),\n};\nconst LOWERCASE_ALPHABET: Alphabet = {\n alphabet: [...uppercaseLetters.toLowerCase()].flatMap((c) => [c]),\n letterIndexes: Object.fromEntries([...uppercaseLetters.toLowerCase()].map((c, i) => [c, i])),\n};\n\nconst createItemIndexes = (arr: string[]): Record<string, number> => {\n return Object.fromEntries([...arr].map((c, i) => [c, i]));\n};\n\nconst TAG = `[SIX-ITEM-PICKER]`;\n\nconst subtract = (a: number, b: number) => a - b;\nconst add = (a: number, b: number) => a + b;\n\nexport type SixItemPickerChangePayload = number \| string \| boolean \| TimePeriod;\n\nconst DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';\n\n/*\n @since 2.0.0\n * @status experimental\n * @part container - The whole component container\n * @part up - The up button\n * @part content - The content area\n * @part down - The down button\n \n /\n@Component({\n tag: 'six-item-picker',\n styleUrl: 'six-item-picker.scss',\n shadow: true,\n})\nexport class SixItemPicker {\n private readonly eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixItemPickerElement;\n\n /** The item picker's value attribute. /\n @Prop({ mutable: true, reflect: true }) value: number \| string = '';\n\n /* The type of items you want to rotate through. /\n @Prop() type: ItemPickerType = ItemPickerType.NUMBER;\n\n /* The minimum value allowed to pick. /\n @Prop({ reflect: true, mutable: true }) min?: number \| string;\n\n /* The maximum value allowed to pick. /\n @Prop({ reflect: true, mutable: true }) max?: number \| string;\n\n /* Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. /\n @Prop({ reflect: true }) roundtrip = true;\n\n /* Defines how many steps should be taken when navigating /\n @Prop({ reflect: true }) step = 1;\n\n /* Defines a custom list of items you can iterate through /\n @Prop() items?: string[];\n\n /* Defines whether the items should be padded /\n @Prop() padded = false;\n\n /* Defines the length of the padded area /\n @Prop() paddingLength = 2;\n\n /* Defines the character used for padding /\n @Prop() paddingChar = '0';\n\n /* Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default,\n * before is selected /\n @Prop() paddingDirection: ItemPickerPaddingDirection = ItemPickerPaddingDirection.BEFORE;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between items.\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n Emitted when the item picker's value changes\n /\n @Event({ eventName: 'six-item-picker-change' }) sixChange!: EventEmitter<SixItemPickerChangePayload>;\n\n /\n Emitted when the item picker's value changes, but debounced\n /\n @Event({ eventName: 'six-item-picker-change-debounced' })\n sixChangeDebounced!: EventEmitter<SixItemPickerChangePayload>;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n */\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n @Watch('value')\n handleValueChange() {\n this.setup();\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);\n this.eventListeners.add(\n this.host,\n 'six-item-picker-change',\n debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n DEBOUNCE_ITEM_PICKER_LISTENER\n );\n }\n\n @Watch('items')\n handleSetChange() {\n this.setup();\n this.min = this._items[0];\n this.max = this.getLastStringItem();\n }\n\n @State() _items: string[] = [];\n @State() _itemIndexes: Record<string, number> = {};\n\n // used for fast increasing when keeping the mouse button held down\n private _timeoutNext!: ReturnType<typeof setTimeout>;\n private _intervalNext!: ReturnType<typeof setInterval>;\n\n private _timeoutPrev!: ReturnType<typeof setTimeout>;\n private _intervalPrev!: ReturnType<typeof setInterval>;\n\n componentWillLoad() {\n this.setup();\n }\n\n componentDidLoad() {\n this.eventListeners.add(\n this.host,\n 'six-item-picker-change',\n debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n DEBOUNCE_ITEM_PICKER_LISTENER\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n private handleSixItemPickerChangeDebounced = () => {\n this.sixChangeDebounced.emit(this.value);\n };\n\n private setup() {\n if (this.isNumber()) {\n this.setupNumberItems();\n } else {\n this.setUpStringItems();\n }\n }\n\n private setupNumberItems() {\n if (this.isInvalidNumber()) {\n console.warn(`${TAG} Expected number but value is not a number: \"${this.value}\"`);\n console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);\n this.value = this.min ?? 0;\n }\n }\n\n private setUpStringItems() {\n this._items = this.getStringItems();\n this._itemIndexes = this.getItemIndexes();\n const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;\n if (itemsMissValue) {\n console.warn(`${TAG} Expected item from item set but value was not found in set: \"${this.value}\"`);\n console.info(`${TAG} Will set value to either minimum or if not provided to \"${this._items[0]}\".`);\n this.value = this._items[0];\n }\n\n if (this.min === undefined) {\n if (!this.roundtrip) {\n console.warn(`${TAG} Expected a min value`);\n console.info(`${TAG} Will set min value to ${this._items[0]}`);\n }\n this.min = this._items[0];\n }\n\n if (this.max === undefined) {\n const maxItem = this.getLastStringItem();\n if (!this.roundtrip) {\n console.warn(`${TAG} Expected a min value if roundtrip is enabled`);\n console.info(`${TAG} Will set min value to ${maxItem}`);\n }\n this.max = maxItem;\n }\n }\n\n private getLastStringItem() {\n return this._items[this._items.length - 1];\n }\n\n private getStringItems(): string[] {\n switch (this.type) {\n case ItemPickerType.NUMBER:\n console.warn(`${TAG}: unexpected type ${this.type}`);\n return [];\n case ItemPickerType.LETTER:\n return ALPHABET.alphabet;\n case ItemPickerType.CAPITAL_LETTER:\n return CAPITAL_ALPHABET.alphabet;\n case ItemPickerType.LOWER_LETTER:\n return LOWERCASE_ALPHABET.alphabet;\n case ItemPickerType.CUSTOM:\n if (this.items == null \|\| this.items.length === 0) {\n console.warn(`${TAG}: no items defined for type ${this.type}`);\n return [];\n }\n return this.items;\n }\n }\n\n private getItemIndexes(): Record<string, number> {\n switch (this.type) {\n case ItemPickerType.NUMBER:\n console.warn(`${TAG}: unexpected type ${this.type}`);\n return {};\n case ItemPickerType.LETTER:\n return ALPHABET.letterIndexes;\n case ItemPickerType.CAPITAL_LETTER:\n return CAPITAL_ALPHABET.letterIndexes;\n case ItemPickerType.LOWER_LETTER:\n return LOWERCASE_ALPHABET.letterIndexes;\n case ItemPickerType.CUSTOM:\n return createItemIndexes(this._items);\n }\n }\n\n private previousItem() {\n if (this.isNumber()) {\n this.previousNumber();\n } else {\n this.previousStringItem();\n }\n\n this.sixChange.emit(this.value);\n }\n\n private previousNumber() {\n this.changeValue({\n isNextItemAllowed: () => !this.isPreviousNumberDisabled(),\n getNextItem: () => Number(this.value) - this.step,\n getRoundtripItem: () => Number(this.max),\n isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n });\n }\n\n private previousStringItem() {\n const value = String(this.value);\n const minLetter = String(this.min);\n\n this.changeValue({\n isNextItemAllowed: () =>\n minLetter === undefined \|\| this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),\n getNextItem: () => this.getNextItemByOperation(subtract),\n getRoundtripItem: () => String(this.max),\n isRoundtripPossible: () => this.max == null && this.roundtrip,\n });\n }\n\n private nextItem() {\n if (this.isNumber()) {\n this.nextNumber();\n } else {\n this.nextStringItem();\n }\n\n this.sixChange.emit(this.value);\n }\n\n private nextNumber() {\n this.changeValue({\n isNextItemAllowed: () => !this.isNextNumberDisabled(),\n getNextItem: () => Number(this.value) + this.step,\n getRoundtripItem: () => Number(this.min),\n isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n });\n }\n\n private getStringItemIndex(char: string): number {\n return this._itemIndexes[char];\n }\n\n private nextStringItem() {\n const value = String(this.value);\n const maxLetter = String(this.max);\n\n this.changeValue({\n isNextItemAllowed: () =>\n maxLetter === undefined \|\| this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),\n getNextItem: () => this.getNextItemByOperation(add),\n getRoundtripItem: () => String(this.min),\n isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n });\n }\n\n private getNextItemByOperation(operation: (a: number, b: number) => number) {\n const value = String(this.value);\n const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);\n const numberOfItems = this._items.length;\n const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;\n return this._items[nextIndex];\n }\n\n private changeValue(params: {\n getNextItem: () => number \| string;\n isNextItemAllowed: () => boolean;\n getRoundtripItem: () => number \| string;\n isRoundtripPossible: () => boolean;\n }) {\n if (params.isNextItemAllowed()) {\n this.value = params.getNextItem();\n return;\n }\n\n if (params.isRoundtripPossible()) {\n console.error(\n `${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`\n );\n return;\n }\n\n if (this.roundtrip) {\n this.value = params.getRoundtripItem();\n return;\n }\n\n console.warn(\n `${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`\n );\n }\n\n private isNumber() {\n return this.type === ItemPickerType.NUMBER;\n }\n\n private isInvalidNumber() {\n return this.value === '' \|\| isNaN(this.value as number);\n }\n\n private isNextDisabled() {\n if (this.roundtrip) {\n return false;\n }\n\n if (this.isNumber()) {\n return this.isNextNumberDisabled();\n } else {\n return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];\n }\n }\n\n private isNextNumberDisabled() {\n return Number(this.value) + this.step > (this.max ?? Infinity);\n }\n\n private isPrevDisabled() {\n if (this.roundtrip) {\n return false;\n }\n\n if (this.isNumber()) {\n return this.isPreviousNumberDisabled();\n } else {\n return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];\n }\n }\n\n private isPreviousNumberDisabled() {\n return Number(this.value) - this.step < (this.min ?? -Infinity);\n }\n\n private onMouseDownNext() {\n if (this.isNextDisabled()) {\n return;\n }\n\n this.nextItem();\n\n this._timeoutNext = setTimeout(() => {\n this._intervalNext = setInterval(() => {\n this.nextItem();\n }, this.interval);\n }, this.timeout);\n }\n\n private onMouseUpNext() {\n clearTimeout(this._timeoutNext);\n clearInterval(this._intervalNext);\n }\n\n private onMouseDownPrev() {\n if (this.isPrevDisabled()) {\n return;\n }\n\n this.previousItem();\n\n this._timeoutPrev = setTimeout(() => {\n this._intervalPrev = setInterval(() => {\n this.previousItem();\n }, this.interval);\n }, this.timeout);\n }\n\n private onMouseUpPrev() {\n clearTimeout(this._timeoutPrev);\n clearInterval(this._intervalPrev);\n }\n\n private getFormattedValue() {\n if (this.value === undefined \|\| this.value === null) {\n return this.value;\n }\n\n if (!this.padded) {\n return this.value;\n }\n\n if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {\n return String(this.value).padStart(this.paddingLength, this.paddingChar);\n } else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {\n return String(this.value).padEnd(this.paddingLength, this.paddingChar);\n }\n\n return this.value;\n }\n\n render() {\n return (\n <div part=\"container\" class=\"item_picker__container\">\n <div\n part=\"up\"\n class={{\n item_picker__btn: true,\n 'item_picker__btn--disabled': this.isNextDisabled(),\n }}\n onMouseDown={() => this.onMouseDownNext()}\n onMouseUp={() => this.onMouseUpNext()}\n >\n <six-icon size=\"large\">expand_less</six-icon>\n </div>\n <div part=\"content\" class=\"item_picker__content\">\n {this.getFormattedValue()}\n </div>\n <div\n part=\"down\"\n class={{\n item_picker__btn: true,\n 'item_picker__btn--disabled': this.isPrevDisabled(),\n }}\n onMouseDown={() => this.onMouseDownPrev()}\n onMouseUp={() => this.onMouseUpPrev()}\n >\n <six-icon size=\"large\">expand_more</six-icon>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-language-switcher.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-5c0f6628.js';
+import { r as registerInstance, c as createEvent, h } from './index-371fb9d4.js';
 const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-red)}.language-switcher__label--selected{color:var(--six-color-red)}";
@@ -44,7 +44,7 @@ const SixLanguageSwitcher = class {
   render() {
     return (h("div", { part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
       const language = typeof lang === 'string' ? lang : lang.key;
-      return (h("div", { onClick: this.handleLanguageSwitching(language, lang.value) }, h("span", { part: "label", class: {
+      return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value) }, h("span", { part: "label", class: {
           'language-switcher__label': true,
           'language-switcher__label--selected': this.selected === language,
         } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "/"))));

package/dist/esm/six-language-switcher.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-language-switcher.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,gQAAgQ;;ACa/R,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchC,mBAAmB;;;;IAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;MACjF,IAAI,aAAa,KAAK,SAAS,EAAE;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;OACpC;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;OAClC;MACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;KAC7B,CAAC;;qBAvCyD,iBAAiB;;EAG5E,sBAAsB,CAAC,QAAkB;IACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;GAC/B;EAMD,iBAAiB;IACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;GACF;EAEO,sBAAsB;IAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;MACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC7C;GACF;EAWD,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;MAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;MAC5D,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,~~IAC9D~~,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;UACL,0BAA0B,EAAE,IAAI;UAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;SACjE,IAEA,QAAQ,CACJ,EACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;KACH,CAAC,CACE,EACN;GACH;;;;;;;;;","names":[],"sources":["./src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","./src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-red);\n }\n\n &--selected {\n color: var(--six-color-red);\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/*\n @since 2.1.0\n * @status experimental\n */\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n /\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /* The language which should be shown as selected /\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /* The languages which should be selectable options. /\n @Prop() languages: string[] \| SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /\n Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n /\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-language-switcher.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,gQAAgQ;;ACa/R,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchC,mBAAmB;;;;IAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;MACjF,IAAI,aAAa,KAAK,SAAS,EAAE;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;OACpC;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;OAClC;MACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;KAC7B,CAAC;;qBAvCyD,iBAAiB;;EAG5E,sBAAsB,CAAC,QAAkB;IACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;GAC/B;EAMD,iBAAiB;IACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;GACF;EAEO,sBAAsB;IAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;MACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC7C;GACF;EAWD,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;MAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;MAC5D,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAChG,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;UACL,0BAA0B,EAAE,IAAI;UAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;SACjE,IAEA,QAAQ,CACJ,EACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;KACH,CAAC,CACE,EACN;GACH;;;;;;;;;","names":[],"sources":["./src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","./src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-red);\n }\n\n &--selected {\n color: var(--six-color-red);\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/*\n @since 2.1.0\n * @status experimental\n */\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n /\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /* The language which should be shown as selected /\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /* The languages which should be selectable options. /\n @Prop() languages: string[] \| SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /\n Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n /\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-layout-grid.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5c0f6628.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-371fb9d4.js';
 const sixLayoutGridCss = ":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";
@@ -8,8 +8,10 @@ const SixLayoutGrid = class {
     this.columns = undefined;
   }
   handleColumnsChange() {
-    const columns = this.columns ? this.columns : 12;
-    this.host.style.setProperty('--no-of-columns', String(columns));
+    if (typeof this.columns !== 'number' || this.columns === 0) {
+      this.columns = 12;
+    }
+    this.host.style.setProperty('--no-of-columns', String(this.columns));
   }
   componentWillLoad() {
     this.handleColumnsChange();

package/dist/esm/six-layout-grid.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-layout-grid.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,kGAAkG;;MCc9G,aAAa;;;;;EAOxB,mBAAmB;IACjB,~~MAAM~~,OAAO,~~GAAG~~,IAAI,CAAC,OAAO,~~GAAG~~,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;~~IACjD~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;~~GACjE~~;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","./src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n display: grid;\n grid-template-columns: repeat(var(--no-of-columns), 1fr);\n grid-column-gap: 1rem;\n}\n","import { Component, Element, ~~Host~~, h, Prop, Watch } from '@stencil/core';\n\n/*\n @since 1.01\n * @status stable\n \n @slot - The grid's content\n /\n\n@Component({\n tag: 'six-layout-grid',\n styleUrl: 'six-layout-grid.scss',\n shadow: true,\n})\nexport class SixLayoutGrid {\n @Element() host: HTMLSixLayoutGridElement;\n\n /* Set the number of grid columns */\n @Prop() columns;\n\n @Watch('columns')\n handleColumnsChange() {\n ~~const~~ columns = this.columns ? this.columns : 12;\n this.host.style.setProperty('--no-of-columns', String(columns));\n }\n\n componentWillLoad() {\n this.handleColumnsChange();\n }\n\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-layout-grid.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,kGAAkG;;MCc9G,aAAa;;;;;EAOxB,mBAAmB;IACjB,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,EAAE;MAC1D,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;KACnB;IACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;GACtE;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","./src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n display: grid;\n grid-template-columns: repeat(var(--no-of-columns), 1fr);\n grid-column-gap: 1rem;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/*\n @since 1.01\n * @status stable\n \n @slot - The grid's content\n /\n\n@Component({\n tag: 'six-layout-grid',\n styleUrl: 'six-layout-grid.scss',\n shadow: true,\n})\nexport class SixLayoutGrid {\n @Element() host!: HTMLSixLayoutGridElement;\n\n /* Set the number of grid columns */\n @Prop({ mutable: true }) columns?: number;\n\n @Watch('columns')\n handleColumnsChange() {\n if (typeof this.columns !== 'number' \|\| this.columns === 0) {\n this.columns = 12;\n }\n this.host.style.setProperty('--no-of-columns', String(this.columns));\n }\n\n componentWillLoad() {\n this.handleColumnsChange();\n }\n\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-main-container.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5c0f6628.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-371fb9d4.js';
 const sixMainContainerCss = ":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";