npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.faf050a → 0.0.0-insider.fbc1348 - Mend

@six-group/ui-library 0.0.0-insider.faf050a → 0.0.0-insider.fbc1348

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

package/dist/esm/six-textarea.entry.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-17d8173e.js';
-import { F as FormControl } from './form-control-6b30894f.js';
-import { h as hasSlot } from './slot-41bc439a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { F as FormControl } from './form-control-30c5bd8b.js';
+import { h as hasSlot } from './slot-56531341.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
-const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";
+const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";
+const SixTextareaStyle0 = sixTextareaCss;
 let id = 0;
 const SixTextarea = class {
@@ -159,7 +160,7 @@ const SixTextarea = class {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
+        return (h(FormControl, { key: 'e35fce4a2f60bd7710763a15475a2e02d301f9f8', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'f718c972dd419f691d57ee7f658c08523a2a6619', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -174,7 +175,7 @@ const SixTextarea = class {
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+            } }, h("textarea", { key: '5ce31d7ee232d579f53061388fc5746e4ef685c4', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -185,7 +186,7 @@ const SixTextarea = class {
         "value": ["handleValueChange"]
     }; }
 };
-SixTextarea.style = sixTextareaCss;
+SixTextarea.style = SixTextareaStyle0;
 export { SixTextarea as six_textarea };

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

	@@ -1 +1 @@
1	- {"file":"six-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n line-height: var(--six-line-height-normal);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &:hover:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .textarea__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.textarea--focused:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n border-color: var(--six-input-border-color-focus);\n color: var(--six-input-color-focus);\n\n .textarea__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.textarea--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .textarea__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.textarea__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--sl-input-color);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-small);\n }\n}\n\n.textarea--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-medium);\n }\n}\n\n.textarea--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n /\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /* The textarea's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The textarea's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The textarea's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's placeholder text. /\n @Prop() placeholder?: string;\n\n /* The number of rows to display by default. /\n @Prop() rows = 4;\n\n /* Controls how the textarea can be resized. /\n @Prop() resize: 'none' \| 'vertical' \| 'auto' = 'vertical';\n\n /* Set to true to disable the textarea. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true for a readonly textarea. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck = false;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the textarea. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeTextarea?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string \| undefined) = undefined;\n }\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n line-height: var(--six-line-height-normal);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &:hover:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .textarea__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.textarea--focused:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n border-color: var(--six-input-border-color-focus);\n color: var(--six-input-color-focus);\n\n .textarea__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.textarea--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .textarea__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.textarea__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--sl-input-color);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-small);\n }\n}\n\n.textarea--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-medium);\n }\n}\n\n.textarea--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n /\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /* The textarea's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The textarea's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The textarea's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's placeholder text. /\n @Prop() placeholder?: string;\n\n /* The number of rows to display by default. /\n @Prop() rows = 4;\n\n /* Controls how the textarea can be resized. /\n @Prop() resize: 'none' \| 'vertical' \| 'auto' = 'vertical';\n\n /* Set to true to disable the textarea. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true for a readonly textarea. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck = false;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the textarea. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeTextarea?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string \| undefined) = undefined;\n }\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-tile.entry.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-17d8173e.js';
-import { h as hasSlot, g as getSlot } from './slot-41bc439a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { h as hasSlot, g as getSlot } from './slot-56531341.js';
-const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-elevation-8dp)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
+const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
+const SixTileStyle0 = sixTileCss;
 const SixTile = class {
     constructor(hostRef) {
@@ -50,16 +51,16 @@ const SixTile = class {
         this.handleSlotChange();
     }
     render() {
-        return (h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { part: "base", class: {
+        return (h("six-tooltip", { key: '5853578cc56dd0d4d217e69d1601db0f92e59cd4', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: '060c7e5e9096cd16ec0b8c96425456a37b76d151', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, h("div", { part: "header", class: "tile__header" }, h("six-icon-button", { class: {
+            } }, h("div", { key: '6292c0165ef776c29ca299cd477e4e42691c2fdd', part: "header", class: "tile__header" }, h("six-icon-button", { key: '3b94f649800cb3d5759acef86a889c50d168bfcc', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { name: "icon" })), h("div", { part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '4d49bc9c8bb1f20b5e04f82aa4ac4754f00f511e', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { name: "icon" })), h("div", { key: 'dee1f29b9d143927cb233a371257a3d66b457a32', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
@@ -83,7 +84,7 @@ const iconSize = (size) => {
         large: 'xxxLarge',
     }[size];
 };
-SixTile.style = sixTileCss;
+SixTile.style = SixTileStyle0;
 export { SixTile as six_tile };

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

	@@ -1 +1 @@
1	- {"file":"six-tile.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,~~woEAAwoE~~;;~~MCc9oE~~,OAAO;;;;;~~QAoDV~~,qBAAgB,GAAG;YACzB,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAEhD,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBACxC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACxD;YAED,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;gBACzC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACxD;SACF,CAAC;QA6DM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;SAC7B,CAAC;~~qBAjIc~~,EAAE;;~~yBAME~~,IAAI;wBAGL,KAAK;~~8BAGC~~,IAAI;wBAGO,KAAK;oBAGqB,QAAQ;uBAEnD,IAAI;2BAoBA,KAAK;4BAEJ,KAAK;;;IAZ7B,MAAM,IAAI;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,IAAI;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IAMD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAiBD,MAAM;QACJ,QACE,~~mBAAa~~,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,IAClF,~~WACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,eAAe,EAAE,IAAI,CAAC,OAAO;gBAC7B,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;aAChC,IAED,~~WAAK~~,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,IACrC,~~uBACE~~,KAAK,EAAE;gBACL,sBAAsB,EAAE,CAAC,IAAI,CAAC,SAAS;aACxC,EACD,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACnC,CACE,EAEN,~~WAAK~~,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IAChC,IAAI,CAAC,QAAQ,KACZ,gBAAU,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAChE,IAAI,CAAC,QAAQ,CACL,CACZ,EACA,IAAI,CAAC,WAAW,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1C,EAEN,~~WACE~~,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5C,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9C,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC7C,IAEA,IAAI,CAAC,KAAK,KACT,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE7B,IAAI,CAAC,KAAK,CACP,CACP,EACA,IAAI,CAAC,YAAY,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAC5C,CACF,CACM,EACd;KACH;;;AAYH,MAAM,aAAa,GAAG,CAAC,IAAY;IACjC,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,IAAI,CAAwB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY;IAC5B,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,UAAU;KAClB,CAAC,IAAI,CAAsC,CAAC;AAC/C,CAAC,CAAC;;;;;","names":[],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tile {\n &--small {\n --tile-size: 80px;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n --tile-size: 120px;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n --tile-size: 160px;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n min-height: var(--tile-size);\n width: var(--tile-size);\n\n background-color: var(--six-color-clay-50);\n\n display: inline-grid;\n grid-template-columns: 100%;\n grid-template-areas:\n 'header'\n 'middle'\n 'footer';\n\n &:not(.tile--visible) {\n visibility: hidden;\n }\n\n &--elevated {\n border: 0;\n box-shadow: var(--six-~~elevation~~-~~8dp~~);\n }\n}\n\n.tile__header {\n grid-area: header;\n height: 5%;\n justify-self: right;\n display: flex;\n justify-content: right;\n opacity: 0;\n transition: var(--six-transition-fast) opacity;\n\n .tile:hover > & {\n opacity: 1;\n }\n\n &--hidden {\n visibility: hidden;\n }\n\n six-icon-button {\n margin-top: -6px;\n margin-right: -6px;\n margin-bottom: -16px;\n }\n}\n\n.tile__body {\n grid-area: middle;\n display: grid;\n place-items: center;\n cursor: pointer;\n\n six-icon::part(base) {\n padding: 0;\n }\n\n &--small {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n padding-left: var(--tile-padding-size);\n padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n grid-area: footer;\n display: flex;\n justify-content: center;\n cursor: pointer;\n font-weight: var(--six-font-weight-normal);\n color: var(--six-color-web-rock-900);\n\n &--small {\n @extend .tile__footer;\n font-size: var(--six-font-size-xxx-small);\n }\n\n &--medium {\n @extend .tile__footer;\n font-size: var(--six-font-size-xx-small);\n }\n\n &--large {\n @extend .tile__footer;\n font-size: var(--six-font-size-small);\n }\n\n .label__footer {\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(var(--tile-size) - 2em);\n text-align: center;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n /\n\n@Component({\n tag: 'six-tile',\n styleUrl: 'six-tile.scss',\n shadow: true,\n})\nexport class SixTile {\n @Element() host!: HTMLSixTileElement;\n\n /* The tile's label. /\n @Prop() label = '';\n\n /* The icon's name. /\n @Prop() iconName?: string;\n\n /* Flag, whether the tile is closeable. /\n @Prop() closeable = true;\n\n /* Flag, whether the tile should cast a shadow. /\n @Prop() elevated = false;\n\n /* Enables tile tooltip for tiles /\n @Prop() disableTooltip = true;\n\n /* Set to true to disable the tile. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The tile's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @State() visible = true;\n\n /* Emitted when the tile was closed. /\n @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tile is selected. /\n @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n /* Hides the tile /\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /* Shows the tile */\n @Method()\n async show() {\n this.visible = true;\n }\n\n @State() hasIconSlot = false;\n\n @State() hasLabelSlot = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasIconSlot = hasSlot(this.host, 'icon');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n\n if (this.hasIconSlot) {\n const slot = getSlot(this.host, 'icon');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n\n if (this.hasLabelSlot) {\n const slot = getSlot(this.host, 'label');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n };\n\n render() {\n return (\n <six-tooltip disabled={this.disableTooltip \|\| this.label === ''} content={this.label}>\n <div\n part=\"base\"\n class={{\n tile: true,\n 'tile--visible': this.visible,\n 'tile--small': this.size === 'small',\n 'tile--medium': this.size === 'medium',\n 'tile--large': this.size === 'large',\n 'tile--elevated': this.elevated,\n }}\n >\n <div part=\"header\" class=\"tile__header\">\n <six-icon-button\n class={{\n 'tile__header--hidden': !this.closeable,\n }}\n name=\"close\"\n size={closeIconSize(this.size)}\n onClick={this.handleCloseClickEvent}\n />\n </div>\n\n <div part=\"body\" class=\"tile__body\">\n {this.iconName && (\n <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n {this.iconName}\n </six-icon>\n )}\n {this.hasIconSlot && <slot name=\"icon\"></slot>}\n </div>\n\n <div\n part=\"footer\"\n class={{\n 'tile__footer--small': this.size === 'small',\n 'tile__footer--medium': this.size === 'medium',\n 'tile__footer--large': this.size === 'large',\n }}\n >\n {this.label && (\n <div\n class={{\n '.label__footer': true,\n }}\n onClick={this.handleClickEvent}\n >\n {this.label}\n </div>\n )}\n {this.hasLabelSlot && <slot name=\"label\"></slot>}\n </div>\n </div>\n </six-tooltip>\n );\n }\n\n private handleCloseClickEvent = () => {\n this.visible = false;\n this.sixTileClose.emit();\n };\n\n private handleClickEvent = () => {\n this.sixTileSelected.emit();\n };\n}\n\nconst closeIconSize = (size: string) => {\n return {\n small: 'xxSmall',\n medium: 'medium',\n large: 'medium',\n }[size] as 'xSmall' \| 'medium';\n};\n\nconst iconSize = (size: string) => {\n return {\n small: 'xLarge',\n medium: 'xxLarge',\n large: 'xxxLarge',\n }[size] as 'xLarge' \| 'xxLarge' \| 'xxxLarge';\n};\n"],"version":3}
1	+ {"file":"six-tile.entry.js","mappings":"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","names":[],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tile {\n &--small {\n --tile-size: 80px;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n --tile-size: 120px;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n --tile-size: 160px;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n min-height: var(--tile-size);\n width: var(--tile-size);\n\n background-color: var(--six-color-clay-50);\n\n display: inline-grid;\n grid-template-columns: 100%;\n grid-template-areas:\n 'header'\n 'middle'\n 'footer';\n\n &:not(.tile--visible) {\n visibility: hidden;\n }\n\n &--elevated {\n border: 0;\n box-shadow: var(--six-shadow-medium);\n }\n}\n\n.tile__header {\n grid-area: header;\n height: 5%;\n justify-self: right;\n display: flex;\n justify-content: right;\n opacity: 0;\n transition: var(--six-transition-fast) opacity;\n\n .tile:hover > & {\n opacity: 1;\n }\n\n &--hidden {\n visibility: hidden;\n }\n\n six-icon-button {\n margin-top: -6px;\n margin-right: -6px;\n margin-bottom: -16px;\n }\n}\n\n.tile__body {\n grid-area: middle;\n display: grid;\n place-items: center;\n cursor: pointer;\n\n six-icon::part(base) {\n padding: 0;\n }\n\n &--small {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n padding-left: var(--tile-padding-size);\n padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n grid-area: footer;\n display: flex;\n justify-content: center;\n cursor: pointer;\n font-weight: var(--six-font-weight-normal);\n color: var(--six-color-web-rock-900);\n\n &--small {\n @extend .tile__footer;\n font-size: var(--six-font-size-xxx-small);\n }\n\n &--medium {\n @extend .tile__footer;\n font-size: var(--six-font-size-xx-small);\n }\n\n &--large {\n @extend .tile__footer;\n font-size: var(--six-font-size-small);\n }\n\n .label__footer {\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(var(--tile-size) - 2em);\n text-align: center;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n /\n\n@Component({\n tag: 'six-tile',\n styleUrl: 'six-tile.scss',\n shadow: true,\n})\nexport class SixTile {\n @Element() host!: HTMLSixTileElement;\n\n /* The tile's label. /\n @Prop() label = '';\n\n /* The icon's name. /\n @Prop() iconName?: string;\n\n /* Flag, whether the tile is closeable. /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() closeable = true;\n\n /* Flag, whether the tile should cast a shadow. /\n @Prop() elevated = false;\n\n /* Enables tile tooltip for tiles /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() disableTooltip = true;\n\n /* Set to true to disable the tile. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The tile's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @State() visible = true;\n\n /* Emitted when the tile was closed. /\n @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tile is selected. /\n @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n /* Hides the tile /\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /* Shows the tile */\n @Method()\n async show() {\n this.visible = true;\n }\n\n @State() hasIconSlot = false;\n\n @State() hasLabelSlot = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasIconSlot = hasSlot(this.host, 'icon');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n\n if (this.hasIconSlot) {\n const slot = getSlot(this.host, 'icon');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n\n if (this.hasLabelSlot) {\n const slot = getSlot(this.host, 'label');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n };\n\n render() {\n return (\n <six-tooltip disabled={this.disableTooltip \|\| this.label === ''} content={this.label}>\n <div\n part=\"base\"\n class={{\n tile: true,\n 'tile--visible': this.visible,\n 'tile--small': this.size === 'small',\n 'tile--medium': this.size === 'medium',\n 'tile--large': this.size === 'large',\n 'tile--elevated': this.elevated,\n }}\n >\n <div part=\"header\" class=\"tile__header\">\n <six-icon-button\n class={{\n 'tile__header--hidden': !this.closeable,\n }}\n name=\"close\"\n size={closeIconSize(this.size)}\n onClick={this.handleCloseClickEvent}\n />\n </div>\n\n <div part=\"body\" class=\"tile__body\">\n {this.iconName && (\n <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n {this.iconName}\n </six-icon>\n )}\n {this.hasIconSlot && <slot name=\"icon\"></slot>}\n </div>\n\n <div\n part=\"footer\"\n class={{\n 'tile__footer--small': this.size === 'small',\n 'tile__footer--medium': this.size === 'medium',\n 'tile__footer--large': this.size === 'large',\n }}\n >\n {this.label && (\n <div\n class={{\n '.label__footer': true,\n }}\n onClick={this.handleClickEvent}\n >\n {this.label}\n </div>\n )}\n {this.hasLabelSlot && <slot name=\"label\"></slot>}\n </div>\n </div>\n </six-tooltip>\n );\n }\n\n private handleCloseClickEvent = () => {\n this.visible = false;\n this.sixTileClose.emit();\n };\n\n private handleClickEvent = () => {\n this.sixTileSelected.emit();\n };\n}\n\nconst closeIconSize = (size: string) => {\n return {\n small: 'xxSmall',\n medium: 'medium',\n large: 'medium',\n }[size] as 'xSmall' \| 'medium';\n};\n\nconst iconSize = (size: string) => {\n return {\n small: 'xLarge',\n medium: 'xxLarge',\n large: 'xxxLarge',\n }[size] as 'xLarge' \| 'xxLarge' \| 'xxxLarge';\n};\n"],"version":3}

package/dist/esm/six-timepicker.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-17d8173e.js';
-import { I as ItemPickerType } from './types-07748c42.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { I as ItemPickerType } from './types-a07bb999.js';
 import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-2ebaf4ef.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
-import { h as hasSlot } from './slot-41bc439a.js';
-import { a as adjustPopupForHoisting, m as movePopup } from './popup-e8049817.js';
+import { h as hasSlot } from './slot-56531341.js';
+import { a as adjustPopupForHoisting, m as movePopup } from './popup-7209e9d5.js';
 const getCurrentTimeIn24Hours = () => {
     const now = new Date();
@@ -94,7 +94,8 @@ const createTimeString = (time, format) => {
         .join(':');
 };
-const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
+const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
+const SixTimepickerStyle0 = sixTimepickerCss;
 const MIN_POPUP_HEIGHT = 145;
 const SixTimepicker = class {
@@ -369,7 +370,7 @@ const SixTimepicker = class {
             } }, icon));
     }
     render() {
-        return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
+        return (h("div", { key: '19badfa42a1f8d5ef4b6b385780e88dbdceaa9e4', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: '7cd0508f766099136b7b85bd15dce64170ec3eca', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
                 'input--empty': this.value === '',
                 'input--hide': this.inline,
             } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
@@ -383,7 +384,7 @@ const SixTimepicker = class {
         "value": ["valueChanged"]
     }; }
 };
-SixTimepicker.style = sixTimepickerCss;
+SixTimepicker.style = SixTimepickerStyle0;
 export { SixTimepicker as six_timepicker };

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

	@@ -1 +1 @@
1	- {"file":"six-timepicker.entry.js","mappings":";;;;;;;AAqCO,MAAM,uBAAuB,GAAG;IACrC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,OAAO;QACL,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE;QACrB,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;QACzB,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;QACzB,YAAY,EAAE,GAAG,CAAC,eAAe,EAAE;QACnC,UAAU,EAAE,IAAI;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAElC,MAAM,sBAAsB,GAAG,CAAC,KAAa,KAClD,KAAK,GAAG,6BAA6B,GAAG,KAAK,GAAG,6BAA6B,GAAG,KAAK,CAAC;AAEjF,MAAM,uBAAuB,GAAG;IACrC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7B,OAAO;QACL,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC;QACpC,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;QACzB,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;QACzB,YAAY,EAAE,GAAG,CAAC,eAAe,EAAE;QACnC,UAAU,EAAE,KAAK;QACjB,MAAM,EAAE,KAAK,IAAI,6BAA6B,GAAG,IAAI,GAAG,IAAI;KAC7D,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,cAAc,GAAG,CAAC,UAAU,GAAG,IAAI;IAC9C,OAAO,UAAU,GAAG,uBAAuB,EAAE,GAAG,uBAAuB,EAAE,CAAC;AAC5E,CAAC,CAAC;AAEK,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,MAAkB;IACnE,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,OAAO,eAAe,CAAC,MAAM,KAAK,eAAe,CAAC,MAAM,CAAC;AAC3D,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,MAAkB;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAC;IAE1D,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;QACvC,OAAO,CAAC,KAAK,CACX,+DAA+D,MAAM,0BAA0B,OAAO,EAAE,CACzG,CAAC;KACH;IAED,MAAM,IAAI,GAAS,EAAE,CAAC;IAEtB,SAAS,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,CAAC;QAClC,MAAM,gBAAgB,GAAmB,WAAW,CAAC,CAAC,CAAC,CAAC;QACxD,QAAQ,gBAAgB;YACtB,KAAK,IAAI;gBACP,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;gBACpC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,MAAM;YACR,KAAK,IAAI;gBACP,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;gBACpC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,MAAM;YACR,KAAK,IAAI;gBACP,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;gBACtC,MAAM;YACR,KAAK,IAAI;gBACP,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;gBACtC,MAAM;YACR,KAAK,IAAI;gBACP,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;gBAC3C,MAAM;YACR,KAAK,IAAI;gBACP,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;SACrE;KACF,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEK,MAAM,gBAAgB,GAAG,CAAC,IAAsB,EAAE,MAAkB;IACzE,IAAI,IAAI,IAAI,IAAI,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAC;IAE1D,OAAO,WAAW;SACf,GAAG,CAAC,CAAC,cAAc;QAClB,QAAQ,cAAc;YACpB,KAAK,IAAI,CAAC;YACV,KAAK,IAAI;gBACP,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC7C,KAAK,IAAI;gBACP,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC/C,KAAK,IAAI;gBACP,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC/C,KAAK,IAAI;gBACP,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YACpD,KAAK,IAAI;gBACP,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC9B;KACF,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;;AC3ID,MAAM,gBAAgB,GAAG,6gDAA6gD;;ACkCtiD,MAAM,gBAAgB,GAAG,GAAG,CAAC;MAkBhB,aAAa;;;;;;QAChB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAuRtC,uBAAkB,GAAG,CAAC,KAA8C,EAAE,QAAwB;;YAEpG,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;gBAC3B,OAAO;aACR;;;;YAKD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;YAEzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;;YAGlE,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;;YAGxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,eAAe,EAAE,QAAQ;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU;gBACtB,aAAa,EAAE,UAAU;aAC1B,CAAC,CAAC;SACJ,CAAC;QAkIM,4BAAuB,GAAG,CAAC,KAAY;;YAE7C,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAmB,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,OAAO;aACR;SACF,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB;YAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,EAAE;gBACT,aAAa,EAAE,EAAE;aAClB,CAAC,CAAC;SACJ,CAAC;sBAra2B,UAAU;yBAOnB,GAAG;qBAKU,EAAE;oBAGY,KAAK;sBAGlB,KAAK;wBAKpB,KAAK;wBAKL,KAAK;;oBAQqB,QAAQ;wBAGlC,KAAK;;yBAQe,EAAE;;qBAMzB,EAAE;uBAGiB,KAAK;oBAGR,EAAE;yBAGd,KAAK;4BAGgB,MAAM;qBAM/B,KAAK;uBAKH,qBAAqB;wBAKpB,8BAA8B;;wBAa9B,qBAAqB;gCAiBZ,KAAK;mCAEF,KAAK;0BAgCA,EAAE;;IA7BtC,MAAM,aAAa;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAGD,MAAM,aAAa;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;IAMS,YAAY;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;KACtC;IAQD,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3E;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC9E;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QACtC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;;QAGvC,IAAI,CAAC,cAAc,CAAC,GAAG,CACrB,IAAI,CAAC,IAAI,EACT,uBAAuB,EACvB,QAAQ,CAAC,CAAC,KAAY,KAAK,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAE,KAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CACvG,CAAC;;QAGF,IAAI,CAAC,cAAc,CAAC,GAAG,CACrB,YAAY,EACZ,iBAAiB,EACjB,QAAQ,CAAC,CAAC,KAAY;YACpB,KAAK,CAAC,eAAe,EAAE,CAAC;;YAGxB,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;gBACvD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBAClB,KAAK,EAAE,EAAE;oBACT,aAAa,EAAE,EAAE;iBAClB,CAAC,CAAC;gBACH,OAAO;aACR;;YAGD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACnE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,IAAI,CAAC,UAAU;gBACtB,aAAa,EAAE,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC;aAC9D,CAAC,CAAC;SACJ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAClB,CAAC;KACH;IAED,kBAAkB;QAChB,sBAAsB,CACpB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,OAAO,EACZ,gBAAgB,EAChB,CAAC,IAAI,MAAM,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAC5C,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IACO,WAAW;;QAEjB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;YACjF,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;SACjB;;QAGD,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;gBAC5B,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;aACxD;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;aAClE;SACF;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SAC5D;KACF;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE;YACrD,OAAO;SACR;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QACpE,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACjE,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QAE9E,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,GAAG,cAAc,IAAI,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC,MAAM,GAAG,cAAc,CAAC;KAC1G;IAEO,oBAAoB;QAC1B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;KACjG;IA2BO,oBAAoB,CAAC,MAA+B;QAC1D,QACE,uBACE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,GAAG,EAAE,MAAM,CAAC,GAAG;;;YAGf,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,EAC3C,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,cAAc,CAAC,MAAM,oBAC1B,MAAM,CAAC,aAAa,8BACV,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,GACvE,EACnB;KACH;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;KAC9E;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACnC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;KAC9E;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACnC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC,oBAAoB,CAAC;YAC/B,KAAK;YACL,IAAI,EAAE,cAAc,CAAC,MAAM;YAC3B,YAAY,EAAE,QAAQ;SACvB,CAAC,CAAC;KACJ;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;KAChF;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;KAChF;IAEO,qBAAqB;QAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC;YAC/B,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,wBAAwB;YAC/B,aAAa,EAAE,CAAC;YAChB,YAAY,EAAE,cAAc;SAC7B,CAAC,CAAC;KACJ;IAEO,YAAY;QAClB,QACE,WAAK,KAAK,EAAC,uBAAuB,IAChC,gBAAO,IAAI,CAAC,SAAS,CAAQ,CACzB,EACN;KACH;IAEO,UAAU;QAChB,MAAM,eAAe,GAAG;YACtB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,qBAAqB,EAAE;SAC7B,CAAC;QAEF,MAAM,eAAe,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,SAAS,CAAC,CAAC;QAEzE,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG;YACjC,IAAI,GAAG,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtC,OAAO,CAAC,EAAE,CAAC,CAAC;aACb;YAED,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SAClC,CAAC,CAAC;KACJ;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC9E;KACF;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;KACjF;IAqBO,eAAe;QACrB,QACE,IAAI,CAAC,SAAS,KACZ,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM;gBACvD,wBAAwB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;aACxD,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAC,IAAI,IAEb,gBAAU,IAAI,EAAC,OAAO,YAAiB,CAChC,CACV,EACD;KACH;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,IAC5C,YAAM,IAAI,EAAC,aAAa,GAAQ,KAEhC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,kBAAwB,CACrF,CAAC;QAEF,QACE,YACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,eAAe,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;aAC/C,IAEA,IAAI,CACA,EACP;KACH;IAED,MAAM;QACJ,QACE,WAAK,IAAI,EAAC,WAAW,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,uBAAuB,IACnF,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;gBACjC,aAAa,EAAE,IAAI,CAAC,MAAM;aAC3B,IAEA,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,eAAe,EAAE,EACtB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,IAC1B,YAAM,IAAI,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAG,CAChB,IACL,IAAI,EACP,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,IAC/B,YAAM,IAAI,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,IACL,IAAI,CACE,EACX,IAAI,CAAC,IAAI,KACR,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,0BAA0B,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG,IAAI,CAAC,gBAAgB;gBACrG,8BAA8B,EAAE,IAAI,CAAC,MAAM;aAC5C,OAEG,IAAI,CAAC,UAAU,EAAE,EACpB,IAAI,CAAC,aAAa,EAAE,CACjB,CACP,CACG,EACN;KACH;;;;;;;;;;","names":[],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' \| 'PM';\n\nexport interface Time {\n hours?: number;\n minutes?: number;\n seconds?: number;\n milliseconds?: number;\n has24Hours?: boolean; // true => 24h, false => 12h\n period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n \| 'HH' // 24h\n \| 'hh' // 12h\n \| 'mm' // minutes\n \| 'ss' // seconds\n \| 'ms' // milliseconds\n \| 'aa'; // period (AM/PM)\n\n/\n Supported time formats\n /\nexport type TimeFormat =\n \| 'HH:mm:ss'\n \| 'hh:mm:ss:aa'\n \| 'HH:mm:ss:ms'\n \| 'hh:mm:ss:ms:aa'\n \| 'HH:mm'\n \| 'hh:mm:aa'\n \| 'HH'\n \| 'hh:aa'\n \| 'mm'\n \| 'ss'\n \| 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n const now = new Date();\n return {\n hours: now.getHours(),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: true,\n };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n const now = new Date();\n const hours = now.getHours();\n return {\n hours: getHoursIn12HourFormat(hours),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: false,\n period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n const timeStringParts = timeStr.split(':');\n const timeFormatParts = format.split(':');\n return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n const timeParts = timeStr.split(':');\n const formatParts = format.split(':') as TimeFormatChar[];\n\n if (!isValidTimeString(timeStr, format)) {\n console.error(\n `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n );\n }\n\n const time: Time = {};\n\n timeParts.forEach((timeStringPart, i) => {\n const formatStringPart: TimeFormatChar = formatParts[i];\n switch (formatStringPart) {\n case 'HH':\n time.hours = Number(timeStringPart);\n time.has24Hours = true;\n break;\n case 'hh':\n time.hours = Number(timeStringPart);\n time.has24Hours = false;\n break;\n case 'mm':\n time.minutes = Number(timeStringPart);\n break;\n case 'ss':\n time.seconds = Number(timeStringPart);\n break;\n case 'ms':\n time.milliseconds = Number(timeStringPart);\n break;\n case 'aa':\n time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n }\n });\n return time;\n};\n\nexport const createTimeString = (time: Time \| undefined, format: TimeFormat): string => {\n if (time == null) {\n return '';\n }\n\n const formatParts = format.split(':') as TimeFormatChar[];\n\n return formatParts\n .map((timeFormatPart) => {\n switch (timeFormatPart) {\n case 'HH':\n case 'hh':\n return String(time.hours).padStart(2, '0');\n case 'mm':\n return String(time.minutes).padStart(2, '0');\n case 'ss':\n return String(time.seconds).padStart(2, '0');\n case 'ms':\n return String(time.milliseconds).padStart(3, '0');\n case 'aa':\n return String(time.period);\n }\n })\n .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.timepicker {\n &_clear {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n\n &--right {\n right: 0;\n position: absolute;\n }\n\n &--left {\n right: 35px;\n position: absolute;\n }\n }\n\n &__container {\n position: relative;\n }\n\n &__popup {\n display: flex;\n justify-content: center;\n min-width: min-content;\n min-height: 145px;\n background-color: white;\n padding: 0.5em 0.5em 1.5em;\n box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n user-select: none;\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n right: 0;\n left: 0;\n\n &--is-up {\n bottom: 100%;\n }\n\n &--is-inline {\n position: initial;\n box-shadow: none;\n border: 1px solid var(--six-color-web-rock-400);\n }\n }\n\n &__separator {\n display: flex;\n align-items: center;\n }\n\n &__item {\n &--wide {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n }\n}\n\n.input--empty .timepicker_clear {\n visibility: hidden;\n}\n\n.input--hide {\n display: none;\n}\n\n// Icon position\n.prefix {\n cursor: pointer;\n\n &--right {\n right: 0;\n display: inline-flex;\n position: absolute;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n margin-right: var(--six-input-spacing-medium);\n transition: var(--six-transition-fast) color;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n \n /\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixTimepickerElement;\n\n /*\n Define the time format. Valid formats are:\n \n HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n \n where HH is the 24 hour format\n * and hh is the 12 hour format\n \n Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * /\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /\n Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * /\n @Prop() separator = ':';\n\n /\n The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n /\n @Prop({ mutable: true }) value = '';\n\n /* Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Indicates whether the timepicker should be shown as an inline (always open) component /\n @Prop({ reflect: true }) inline = false;\n\n /\n If `true` the user can only select a time via the timepicker but not directly edit the input field.\n /\n @Prop() readonly = false;\n\n /\n If `true` the component is disabled.\n /\n @Prop() disabled = false;\n\n /\n The enforced placement of the dropdown panel.\n /\n @Prop() placement?: 'top' \| 'bottom';\n\n /* Timepicker size. /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /\n The placeholder defines what text to be shown on the input element\n /\n @Prop() placeholder?: string;\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set the position of the icon /\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n /\n @Prop() defaultTime?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n /\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /\n Emitted when the timepicker's value changes\n /\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the timepicker's value changes, but debounced\n /\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the clear button is activated.\n /\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n /* Sets focus on the datepickers input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n // update value and popup value, and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' \|\| !isValidTimeString(this.value, this.format)) {\n this.value = '';\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null \|\| this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type \|\| ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n errorTextCount={this.errorTextCount}\n errorText={this.errorText}\n invalid={this.invalid}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-timepicker.entry.js","mappings":"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","names":[],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' \| 'PM';\n\nexport interface Time {\n hours?: number;\n minutes?: number;\n seconds?: number;\n milliseconds?: number;\n has24Hours?: boolean; // true => 24h, false => 12h\n period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n \| 'HH' // 24h\n \| 'hh' // 12h\n \| 'mm' // minutes\n \| 'ss' // seconds\n \| 'ms' // milliseconds\n \| 'aa'; // period (AM/PM)\n\n/\n Supported time formats\n /\nexport type TimeFormat =\n \| 'HH:mm:ss'\n \| 'hh:mm:ss:aa'\n \| 'HH:mm:ss:ms'\n \| 'hh:mm:ss:ms:aa'\n \| 'HH:mm'\n \| 'hh:mm:aa'\n \| 'HH'\n \| 'hh:aa'\n \| 'mm'\n \| 'ss'\n \| 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n const now = new Date();\n return {\n hours: now.getHours(),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: true,\n };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n const now = new Date();\n const hours = now.getHours();\n return {\n hours: getHoursIn12HourFormat(hours),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: false,\n period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n const timeStringParts = timeStr.split(':');\n const timeFormatParts = format.split(':');\n return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n const timeParts = timeStr.split(':');\n const formatParts = format.split(':') as TimeFormatChar[];\n\n if (!isValidTimeString(timeStr, format)) {\n console.error(\n `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n );\n }\n\n const time: Time = {};\n\n timeParts.forEach((timeStringPart, i) => {\n const formatStringPart: TimeFormatChar = formatParts[i];\n switch (formatStringPart) {\n case 'HH':\n time.hours = Number(timeStringPart);\n time.has24Hours = true;\n break;\n case 'hh':\n time.hours = Number(timeStringPart);\n time.has24Hours = false;\n break;\n case 'mm':\n time.minutes = Number(timeStringPart);\n break;\n case 'ss':\n time.seconds = Number(timeStringPart);\n break;\n case 'ms':\n time.milliseconds = Number(timeStringPart);\n break;\n case 'aa':\n time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n }\n });\n return time;\n};\n\nexport const createTimeString = (time: Time \| undefined, format: TimeFormat): string => {\n if (time == null) {\n return '';\n }\n\n const formatParts = format.split(':') as TimeFormatChar[];\n\n return formatParts\n .map((timeFormatPart) => {\n switch (timeFormatPart) {\n case 'HH':\n case 'hh':\n return String(time.hours).padStart(2, '0');\n case 'mm':\n return String(time.minutes).padStart(2, '0');\n case 'ss':\n return String(time.seconds).padStart(2, '0');\n case 'ms':\n return String(time.milliseconds).padStart(3, '0');\n case 'aa':\n return String(time.period);\n }\n })\n .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.timepicker {\n &_clear {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n\n &--right {\n right: 0;\n position: absolute;\n }\n\n &--left {\n right: 35px;\n position: absolute;\n }\n }\n\n &__container {\n position: relative;\n }\n\n &__popup {\n display: flex;\n justify-content: center;\n min-width: min-content;\n min-height: 145px;\n background-color: white;\n padding: 0.5em 0.5em 1.5em;\n box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n user-select: none;\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n right: 0;\n left: 0;\n\n &--is-up {\n bottom: 100%;\n }\n\n &--is-inline {\n position: initial;\n box-shadow: none;\n border: 1px solid var(--six-color-web-rock-400);\n }\n }\n\n &__separator {\n display: flex;\n align-items: center;\n }\n\n &__item {\n &--wide {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n }\n}\n\n.input--empty .timepicker_clear {\n visibility: hidden;\n}\n\n.input--hide {\n display: none;\n}\n\n// Icon position\n.prefix {\n cursor: pointer;\n\n &--right {\n right: 0;\n display: inline-flex;\n position: absolute;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n margin-right: var(--six-input-spacing-medium);\n transition: var(--six-transition-fast) color;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n \n /\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixTimepickerElement;\n\n /*\n Define the time format. Valid formats are:\n \n HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n \n where HH is the 24 hour format\n * and hh is the 12 hour format\n \n Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * /\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /\n Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * /\n @Prop() separator = ':';\n\n /\n The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n /\n @Prop({ mutable: true }) value = '';\n\n /* Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Indicates whether the timepicker should be shown as an inline (always open) component /\n @Prop({ reflect: true }) inline = false;\n\n /\n If `true` the user can only select a time via the timepicker but not directly edit the input field.\n /\n @Prop() readonly = false;\n\n /\n If `true` the component is disabled.\n /\n @Prop() disabled = false;\n\n /\n The enforced placement of the dropdown panel.\n /\n @Prop() placement?: 'top' \| 'bottom';\n\n /* Timepicker size. /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /\n The placeholder defines what text to be shown on the input element\n /\n @Prop() placeholder?: string;\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set the position of the icon /\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n /\n @Prop() defaultTime?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n /\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /\n Emitted when the timepicker's value changes\n /\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the timepicker's value changes, but debounced\n /\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the clear button is activated.\n /\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n /* Sets focus on the datepickers input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n // update value and popup value, and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' \|\| !isValidTimeString(this.value, this.format)) {\n this.value = '';\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null \|\| this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type \|\| ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n errorTextCount={this.errorTextCount}\n errorText={this.errorText}\n invalid={this.invalid}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-tooltip.entry.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-17d8173e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5390c1d6.js';
 import { P as Popover } from './popover-25996e62.js';
-const sixTooltipCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:\"\";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}";
+const sixTooltipCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:\"\";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}";
+const SixTooltipStyle0 = sixTooltipCss;
 let id = 0;
 const SixTooltip = class {
@@ -149,17 +150,17 @@ const SixTooltip = class {
         });
     }
     render() {
-        return (h(Host, { onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut }, h("slot", { onSlotchange: this.handleSlotChange }), h("div", { ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h("div", { part: "base", ref: (el) => (this.tooltip = el), id: this.componentId, class: {
+        return (h(Host, { key: 'cc7af29aecbec81fe99af1045c7060f452b35d6a', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut }, h("slot", { key: 'f09c1c24cdbee4eec20003235d7733001fe7eec0', onSlotchange: this.handleSlotChange }), h("div", { key: 'c890ae453a9214a4088d0ba67e040f2f066a03e4', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h("div", { key: 'c50a741a9d98262cbdbd43d44b47072a985faddb', part: "base", ref: (el) => (this.tooltip = el), id: this.componentId, class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { name: "content" }, this.content)))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '63380a424b7e9e7325989a9611bb7a24e3d00beb', name: "content" }, this.content)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
 };
-SixTooltip.style = sixTooltipCss;
+SixTooltip.style = SixTooltipStyle0;
 export { SixTooltip as six_tooltip };