npm - @oiz/stzh-components - Versions diffs - 4.6.0-beta1 → 4.6.0-beta2 - Mend

@oiz/stzh-components 4.6.0-beta1 → 4.6.0-beta2

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

package/dist/components/{p-da83a0ad.js → p-f625c800.js} RENAMED Viewed

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$5 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$4 } from './p-4a78990f.js';
-import { d as defineCustomElement$3 } from './p-7c4e756c.js';
-import { d as defineCustomElement$2 } from './p-963d59bf.js';
-import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
+import { d as defineCustomElement$5 } from './p-42e86bbd.js';
+import { d as defineCustomElement$4 } from './p-b84d0233.js';
+import { d as defineCustomElement$3 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-input-h,[stzh-hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-input-color, var(--stzh-color-secondary60));--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-input-label-color, var(--stzh-color-primary));--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-input-hover-color, var(--stzh-color-secondary60));--hover-border-color:var(\n    --stzh-input-hover-border-color,\n    var(--stzh-color-secondary50)\n  );--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right] stzh-popover,.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{background-clip:text}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.no-label-truncate.sc-stzh-input{text-overflow:clip;white-space:normal;overflow:visible}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";
 const StzhInputStyle0 = stzhInputCss;
@@ -221,15 +221,15 @@ const StzhInput = /*@__PURE__*/ proxyCustomElement(class StzhInput extends H {
             [`stzh-input--size-${this.size}`]: !!this.size,
             [`stzh-input--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '8dd13077004e31ce0b1dd35526325a4f95eb22f4', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '2fe0d07c1049846dfb4f953ad6efb9848e71d253', class: classes }, h("label", { key: '14c4ddc41bce5ab4f53bac0a62a411dbbe4d3f8a', class: {
+        return (h(Host, { key: 'c8ff5c6cf276eb2d2d72c5c2bc294a9a77c0ec31', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: 'df948658df21c668ac305a01cdc55b8162a19aec', class: classes }, h("label", { key: '9de88ea9e9bf363595a393f80c642c95bb083b18', class: {
                 "stzh-input__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '27076ed3f2aaaa7425eb59c139895fdf53f97885', class: "stzh-input__marker" }, h("span", { key: '606e98f4cc0628bc74cf94f7ece7145b9481968d', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '8a5b00a3a40572563c50e8151244ebaae7b69c4c', class: "stzh-input__marker" }, h("span", { key: '47a7f9eaa1aeb7e3ca6e0998d4e2f87e6c5adc00', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '1867bde65ba39d6ac0a18f7745796dfc82a5a712', class: "stzh-input__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '4840d3301f83bfe247e7d4efb33aa5296c642e3d', class: "stzh-input__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'd775753c67430cfede5a38faeecca73787ff9f0d', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
-            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description) && (h(StzhInputDescription, { key: '52c6b561647abbc7bc470aa8084234fc07adb850', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: '61add2f342230323672b9b4d47e851f4e2ed41c3', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
+            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description) && (h(StzhInputDescription, { key: '94fa5b40af158681ef33b435dec70eb6e667fe99', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -318,4 +318,4 @@ function defineCustomElement() {
 export { StzhInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-da83a0ad.js.map
+//# sourceMappingURL=p-f625c800.js.map

package/dist/components/{p-da83a0ad.js.map → p-f625c800.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-da83a0ad.js","mappings":";;;;;;;;;AAAA,MAAM,YAAY,GAAG,krcAAkrc,CAAC;AACxsc,wBAAe,YAAY;;ACQ3B,IAAI,YAAY,GAAG,CAAC,CAAC;MAeR,SAAS;;;;;;;;QAwKZ,mBAAc,GAAY,KAAK,CAAC;QAOhC,iBAAY,GAAG,OAAO,KAAiB;YAC7C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAEnB,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAE/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBACnB,SAAS,EAAE,YAAY;gBACvB,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,SAAS,EAAE,YAAY;gBACvB,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;QAEM,oCAA+B,GAAG;YACxC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;SACxC,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;;YAE/B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;;;;;;;;SAStC,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YAE9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBACnB,SAAS,EAAE,YAAY;gBACvB,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;QAEM,aAAQ,GAAG,CAAC,KAAiB;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YAE9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,SAAS,EAAE,YAAY;gBACvB,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;aACpB;YAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;gBACzC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,YAAY;gBACvB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,WAAM,GAAG,CAAC,KAAiB;;YAEjC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YAEpC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;gBACvC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,SAAS,EAAE,YAAY;gBACvB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;;yBA1Q2B,KAAK;;oBAOhC,MAAM;oBAGe,CAAC;;;wBASqB,KAAK;wBAGL,KAAK;wBAGL,KAAK;yBAGJ,KAAK;4BAGF,KAAK;;;;qBAYb,EAAE;4BAGK,EAAE;;;;;uBAkBN,KAAK;wBAGJ,KAAK;;4BAYnB,IAAI;8BAGD,KAAK;qBAGf,EAAE;+BAGS,KAAK;2BAGT,KAAK;oBAGiB,SAAS;+BAGK,EAAE;;;;IAuBrE,aAAa,CAAC,KAAY;QACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACxD,qBAAqB,CAAC;gBACpB,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,CAAC,CAAC;SACJ;KACF;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,KAAK,EAAE,CAAC;KAC/B;IAGD,YAAY,CAAC,QAA2B;QACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI;gBACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACpC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,QAAQ,EAAE;oBACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;iBAC1B;qBAAM;oBACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;iBAClB;aACF;SACF;aAAM,IAAI,QAAQ,EAAE;YACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;KACF;IAGD,WAAW,CAAC,QAAgB;QAC1B,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAExF,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAChD,MAAM,IAAI,KAAK,CAAC,QAAQ,QAAQ,gBAAgB,CAAC,CAAC;SACnD;KACF;IAOO,iBAAiB;QACvB,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC,CAAC;KACtE;IAoGO,cAAc;QACpB,QACE,gBACE,KAAK,EAAC,+CAA+C,EACrD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAyB,CAAC,EACnD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACZ;KACH;IAEO,WAAW;QACjB,QACE,aACE,KAAK,EAAC,4CAA4C,EAClD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,EAC5C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,YAAY,uBAC1C,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,SAAS,sBACzC,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF;KACH;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,OAAO,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;QAC9C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC;QAEpD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;SAChG;KACF;IAED,MAAM;;QACJ,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAClE,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;QAChG,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,CAAC;QAE5E,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;YAClB,8BAA8B,EAC5B,mBAAmB;gBACnB,IAAI,CAAC,IAAI,KAAK,QAAQ;iBACrB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YACrE,6BAA6B,EAAE,eAAe;YAC9C,kCAAkC,EAAE,mBAAmB;YACvD,uBAAuB,EAAE,SAAS;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,wBAAwB,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;YACnD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;YACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;YACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;YACxC,uBAAuB,EAAE,IAAI,CAAC,MAAM;YACpC,2BAA2B,EAAE,CAAC,IAAI,CAAC,MAAM;YACzC,0BAA0B,EAAE,IAAI,CAAC,SAAS;YAC1C,8BAA8B,EAAE,CAAC,IAAI,CAAC,SAAS;YAC/C,8BAA8B,EAAE,IAAI,CAAC,WAAW;YAChD,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAC9C,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,mEACS,IAAI,CAAC,OAAO,IAAI,SAAS,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,eACd,IAAI,CAAC,MAAM,IAEtB,4DAAK,KAAK,EAAE,OAAO,IACjB,8DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,mBAAmB,EAAE,IAAI,CAAC,eAAe;aAC1C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,EACvC,CAAC,IAAI,CAAC,YAAY,KACjB,6DAAM,KAAK,EAAC,oBAAoB,IAC9B,6DAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,IACvD,IAAI,CAAC,QAAQ;cACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB;cAC9C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAC7C,EACP,6DAAM,KAAK,EAAC,yBAAyB,IAClC,IAAI,CAAC,QAAQ;cACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB;cAC5C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAC3C,CACF,CACR,CACK,EACR,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,EAC3D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IACnE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;aACjE,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAClD,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAM,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,+BAA+B,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAC3B,IACb,IAAI,CAAC,MAAM,IACb,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,gBAAgB,mBACvC,IAAI,CAAC,OAAO,GACd,KAEf,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,KAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,EACL,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,MAC7B,EAAC,oBAAoB,qDACnB,WAAW,EAAC,YAAY,EACxB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACH,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: var(--stzh-input-color, #{$formColor});\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space(\"xsmall\")};\n --padding-bottom: #{space(\"xsmall\")};\n --padding-left: #{space(\"medium\")};\n --padding-right: #{space(\"medium\")};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: var(--stzh-input-label-color, #{$formLabelColor});\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: var(--stzh-input-hover-color, #{$formHoverColor});\n --hover-border-color: var(\n --stzh-input-hover-border-color,\n #{$formHoverBorderColor}\n );\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n --text-selection-background-color: #{$colorSecondary30};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host\n ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host\n ::slotted(stzh-popover[slot=\"button-right\"])\n .stzh-popover__trigger\n stzh-button,\n:host\n ::slotted(stzh-popover[slot=\"button-right\"])\n .stzh-popover__trigger\n stzh-button[disabled]:not([disabled=\"false\"]),\n:host\n ::slotted(stzh-tooltip[slot=\"button-right\"])\n .stzh-tooltip__trigger\n stzh-button,\n:host\n ::slotted(stzh-tooltip[slot=\"button-right\"])\n .stzh-tooltip__trigger\n stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host\n ::slotted(\n stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not(\n [icon-only=\"false\"]\n )\n ),\n:host\n ::slotted(stzh-popover[slot=\"button-right\"])\n .stzh-popover__trigger\n stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host\n ::slotted(stzh-tooltip[slot=\"button-right\"])\n .stzh-tooltip__trigger\n stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize(\"medium\")};\n}\n\n.stzh-input {\n @include input-description;\n\n ::selection {\n background: var(--text-selection-background-color);\n }\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize(\"milli\");\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font(\"heavy\");\n @include fontSize(\"micro\");\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space(\"xxxsmall\");\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &.no-label-truncate {\n @include resetTruncate;\n }\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize(\"nano\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize(\"micro\");\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be truncate or not /\n @Prop() noLabelTruncate: boolean = false;\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label\n class={{\n \"stzh-input__label\": true,\n \"no-label-truncate\": this.noLabelTruncate,\n }}\n htmlFor={this.inputId}\n >\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) &&\n (this.type === \"search\" \|\| this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(errorUsed \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-f625c800.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: var(--stzh-input-color, #{$formColor});\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space(\"xsmall\")};\n --padding-bottom: #{space(\"xsmall\")};\n --padding-left: #{space(\"medium\")};\n --padding-right: #{space(\"medium\")};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: var(--stzh-input-label-color, #{$formLabelColor});\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: var(--stzh-input-hover-color, #{$formHoverColor});\n --hover-border-color: var(\n --stzh-input-hover-border-color,\n #{$formHoverBorderColor}\n );\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n --text-selection-background-color: #{$colorSecondary30};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host\n ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host\n ::slotted(stzh-popover[slot=\"button-right\"])\n .stzh-popover__trigger\n stzh-button,\n:host\n ::slotted(stzh-popover[slot=\"button-right\"])\n .stzh-popover__trigger\n stzh-button[disabled]:not([disabled=\"false\"]),\n:host\n ::slotted(stzh-tooltip[slot=\"button-right\"])\n .stzh-tooltip__trigger\n stzh-button,\n:host\n ::slotted(stzh-tooltip[slot=\"button-right\"])\n .stzh-tooltip__trigger\n stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host\n ::slotted(\n stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not(\n [icon-only=\"false\"]\n )\n ),\n:host\n ::slotted(stzh-popover[slot=\"button-right\"])\n .stzh-popover__trigger\n stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host\n ::slotted(stzh-tooltip[slot=\"button-right\"])\n .stzh-tooltip__trigger\n stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize(\"medium\")};\n}\n\n.stzh-input {\n @include input-description;\n\n ::selection {\n background: var(--text-selection-background-color);\n }\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize(\"milli\");\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font(\"heavy\");\n @include fontSize(\"micro\");\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space(\"xxxsmall\");\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &.no-label-truncate {\n @include resetTruncate;\n }\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize(\"nano\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize(\"micro\");\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be truncate or not /\n @Prop() noLabelTruncate: boolean = false;\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label\n class={{\n \"stzh-input__label\": true,\n \"no-label-truncate\": this.noLabelTruncate,\n }}\n htmlFor={this.inputId}\n >\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) &&\n (this.type === \"search\" \|\| this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(errorUsed \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-6af552c7.js → p-fae759aa.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { C as Cookie } from './p-979121a0.js';
-import { d as defineCustomElement$4 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$3 } from './p-4a78990f.js';
-import { d as defineCustomElement$2 } from './p-7c4e756c.js';
-import { d as defineCustomElement$1 } from './p-aeb5dbdc.js';
+import { d as defineCustomElement$4 } from './p-42e86bbd.js';
+import { d as defineCustomElement$3 } from './p-b84d0233.js';
+import { d as defineCustomElement$2 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-9aa3fad7.js';
 const stzhToastbarCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}";
 const StzhToastbarStyle0 = stzhToastbarCss;
@@ -136,7 +136,7 @@ const StzhToastbar = /*@__PURE__*/ proxyCustomElement(class StzhToastbar extends
         const classes = {
             "stzh-toastbar": true,
         };
-        return (h(Host, { key: '9f89aad266fd0fafd91bea98f836c2898ad142d0' }, h("div", { key: '6199f1fc96aac871a545958bdfcb5a3f58e6cefc', class: classes }, h("slot", { key: 'ccb7700c12301dede6a89cbefc9d94914397b21e', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '468ff195a06333913d3130270b20995b08459130' }, h("div", { key: '3adaef4757a5fcc24802b0a913da10cee25a25b1', class: classes }, h("slot", { key: 'f506e8ee64bce853eacc5ae24664db928e44173f', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -187,4 +187,4 @@ function defineCustomElement() {
 export { StzhToastbar as S, defineCustomElement as d };
-//# sourceMappingURL=p-6af552c7.js.map
+//# sourceMappingURL=p-fae759aa.js.map

package/dist/components/{p-6af552c7.js.map → p-fae759aa.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-6af552c7.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve(\"bottom\", \"regular\");\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n left: $containerMargin;\n right: $containerMargin;\n bottom: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 429px;\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n max-width: 440px;\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n max-width: 485px;\n }\n\n @include mq($from: ultra) {\n left: calc(\n (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n );\n max-width: 554px;\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n margin-bottom: space(\"small\");\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true,\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n /\n Initial toasts.\n \n Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n \n If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n /\n @Prop() initialToasts: StzhToastbarInitialToast[] \| string = [];\n private _initialToasts: StzhToastbarInitialToast[] = [];\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(\n label: string,\n { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n ): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n link.size = \"small\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n @Watch(\"initialToasts\")\n initialToastsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._initialToasts = JSON.parse(newValue);\n } else {\n this._initialToasts = newValue;\n }\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n return;\n }\n\n toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n const childCount = host.children.length;\n\n Array.from(host.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n };\n\n componentWillLoad() {\n this.initialToastsWatcher(this.initialToasts);\n }\n\n componentDidLoad() {\n this._initialToasts.forEach(async data => {\n if (data.cookie) {\n const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n if (alreadyClosedBefore) {\n return;\n }\n }\n\n let link = data.link;\n\n if (!(link instanceof HTMLElement)) {\n const generatedLink = document.createElement(\"stzh-button\");\n generatedLink.slot = \"link\";\n generatedLink.size = \"small\";\n\n Object.assign(generatedLink, data.link);\n link = generatedLink;\n }\n\n const toast = await this.toast(data.label, {\n type: data.type,\n link: link as HTMLStzhButtonElement,\n });\n\n if (data.cookie) {\n let cookieExpires = 365;\n\n if (data.cookieExpires === 0) {\n cookieExpires = null;\n } else if (data.cookieExpires) {\n cookieExpires = data.cookieExpires;\n }\n\n toast.addEventListener(\"stzhClosed\", () => {\n Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n expires: cookieExpires,\n });\n });\n }\n });\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-fae759aa.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve(\"bottom\", \"regular\");\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n left: $containerMargin;\n right: $containerMargin;\n bottom: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 429px;\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n max-width: 440px;\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n max-width: 485px;\n }\n\n @include mq($from: ultra) {\n left: calc(\n (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n );\n max-width: 554px;\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n margin-bottom: space(\"small\");\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true,\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n /\n Initial toasts.\n \n Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n \n If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n /\n @Prop() initialToasts: StzhToastbarInitialToast[] \| string = [];\n private _initialToasts: StzhToastbarInitialToast[] = [];\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(\n label: string,\n { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n ): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n link.size = \"small\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n @Watch(\"initialToasts\")\n initialToastsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._initialToasts = JSON.parse(newValue);\n } else {\n this._initialToasts = newValue;\n }\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n return;\n }\n\n toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n const childCount = host.children.length;\n\n Array.from(host.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n };\n\n componentWillLoad() {\n this.initialToastsWatcher(this.initialToasts);\n }\n\n componentDidLoad() {\n this._initialToasts.forEach(async data => {\n if (data.cookie) {\n const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n if (alreadyClosedBefore) {\n return;\n }\n }\n\n let link = data.link;\n\n if (!(link instanceof HTMLElement)) {\n const generatedLink = document.createElement(\"stzh-button\");\n generatedLink.slot = \"link\";\n generatedLink.size = \"small\";\n\n Object.assign(generatedLink, data.link);\n link = generatedLink;\n }\n\n const toast = await this.toast(data.label, {\n type: data.type,\n link: link as HTMLStzhButtonElement,\n });\n\n if (data.cookie) {\n let cookieExpires = 365;\n\n if (data.cookieExpires === 0) {\n cookieExpires = null;\n } else if (data.cookieExpires) {\n cookieExpires = data.cookieExpires;\n }\n\n toast.addEventListener(\"stzhClosed\", () => {\n Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n expires: cookieExpires,\n });\n });\n }\n });\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-902ed395.js → p-ffbf0fbb.js} RENAMED Viewed

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-8f01554b.js';
 import { h } from './p-a2148b9d.js';
-import { d as defineCustomElement$6 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$5 } from './p-4a78990f.js';
-import { d as defineCustomElement$4 } from './p-3f3349b1.js';
-import { d as defineCustomElement$3 } from './p-7c4e756c.js';
-import { d as defineCustomElement$2 } from './p-963d59bf.js';
-import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
+import { d as defineCustomElement$6 } from './p-42e86bbd.js';
+import { d as defineCustomElement$5 } from './p-b84d0233.js';
+import { d as defineCustomElement$4 } from './p-3de13c90.js';
+import { d as defineCustomElement$3 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
 var DaysOfWeek;
@@ -526,4 +526,4 @@ function defineCustomElement() {
 export { StzhCalendar as S, printISODate as a, defineCustomElement as d, parseISODate as p };
-//# sourceMappingURL=p-902ed395.js.map
+//# sourceMappingURL=p-ffbf0fbb.js.map