@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

package/dist/cjs/stzh-input.cjs.entry.js

@@ -3,190 +3,190 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
-const stzhInputDescription = require('./stzh-input-description-9ed61d1d.js');
+const utils = require('./utils-d327c19d.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+const stzhInputDescription = require('./stzh-input-description-9802abc2.js');
 
 const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-input-h{width:100%;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0;right:0}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-button,.stzh-input__button-right[variant=input].sc-stzh-input{--border-color:transparent;--hover-border-color:transparent}.stzh-input.sc-stzh-input{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)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-input__description-long.sc-stzh-input{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-popover[open].sc-stzh-input:not([open=false]) .stzh-input__description-long-button.sc-stzh-input{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input__description-long-button.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-input__description-long-button.sc-stzh-input:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.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-xxsmall)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:-ms-flexbox;display:flex}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;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.0625rem solid var(--stzh-color-grey61);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-form-input-border-radius);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);width:100%;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background:var(--stzh-color-white);-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:hover,.stzh-input__input.sc-stzh-input:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__input.sc-stzh-input::-ms-clear{display:none}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{text-overflow:ellipsis}.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(--stzh-form-input-height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-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:normal;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;color:var(--stzh-color-grey61);width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__label.sc-stzh-input::before{content:\"\";display:none;background:var(--stzh-color-white);position:absolute;width:100%;z-index:-1;left:0;top:50%;margin-top:-0.03125rem;height:0.125rem}.stzh-input__input.sc-stzh-input:hover+.stzh-input__label.sc-stzh-input,.stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__button-right.sc-stzh-input{display:none}.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:transparent}.stzh-input--is-clearable.stzh-input--is-filled.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.sc-stzh-input .stzh-input__button-right.sc-stzh-input{display:block}.stzh-input--type-search.sc-stzh-input:not(.stzh-input--is-filled) .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--is-filled.sc-stzh-input .stzh-input__button-right.is-search.sc-stzh-input{pointer-events:initial}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.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,.stzh-input--has-placeholder.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);display:block;top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - var(--stzh-space-small) * 2);pointer-events:all}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--has-placeholder.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before{display:block}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-form-input-height))}.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height))}.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--has-placeholder.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height))}.stzh-input--size-small.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-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--size-small.sc-stzh-input .stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__label.sc-stzh-input{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-input--size-small.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-placeholder.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{top:0}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xxsmall) + var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-placeholder.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height))}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input{border-color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-grey61)}.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{color:var(--stzh-color-grey61);border-color:var(--stzh-color-grey5);background-color:var(--stzh-color-grey5);cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:focus,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:focus{border-color:var(--stzh-color-grey5)}.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}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input::before{background:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input],.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-grey61)}";
 
-let inputCounter = 0;
-const StzhInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhChange = index.createEvent(this, "stzhChange", 7);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
-    /** Whether the input is a textarea or an input field */
-    this.multiline = false;
-    /** If input field, this defines the type (if `search`, a search icon will be displayed) */
-    this.type = "text";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */
-    this.clearable = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** The value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /**
-     * Specify what the user agent has to provide as automated assistance.
-     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values
-     */
-    this.autocomplete = "on";
-    /** Whether autocomplete should be turned off  */
-    this.noAutocomplete = false;
-    /** Label */
-    this.label = "";
-    /** Size variant */
-    this.size = "default";
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
-    this.onClearClick = (event) => {
-      this.value = "";
-      this.input.focus();
-      this.stzhChange.emit({
-        component: "stzh-input",
-        originalEvent: event,
-        value: this.value
-      });
-    };
-    this.onInput = (event) => {
-      this.value = this.input.value;
-      this.stzhChange.emit({
-        component: "stzh-input",
-        originalEvent: event,
-        value: this.value
-      });
-    };
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent('focus', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-input",
-        originalEvent: event
-      });
-    };
-    /** Input blur event */
-    this.onBlur = (event) => {
-      // fixes weird bug where autofill selection doesn't get removed
-      this.input.value = this.input.value;
-      const blurEvent = new FocusEvent('blur', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-input",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus input field */
-  async setFocus() {
-    this.input.focus();
-  }
-  valueWatcher(newValue) {
-    this.filled = newValue !== "";
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  typeWatcher(newValue) {
-    const types = [
-      "text", "search", "password", "email", "url", "tel"
-    ];
-    if (!this.multiline && !types.includes(newValue)) {
-      throw new Error(`Type ${newValue} not supported`);
-    }
-  }
-  renderTextarea() {
-    return (index.h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
-  }
-  renderInput() {
-    return (index.h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
-  }
-  async componentWillLoad() {
-    this.inputId = `stzh-input-${inputCounter++}`;
-    this.typeWatcher(this.type);
-    this.valueWatcher(this.value);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'input');
-    }
-  }
-  render() {
-    var _a;
-    const buttonRightSlotUsed = utils.hasSlot(this.element, 'button-right');
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-input": true,
-      "stzh-input--has-button-right": buttonRightSlotUsed
-        || this.type === "search"
-        || (this.clearable && this.filled && !this.readonly && !this.disabled),
-      "stzh-input--has-description": descriptionUsed,
-      "stzh-input--has-description-long": descriptionLongUsed,
-      "stzh-input--has-error": errorUsed,
-      "stzh-input--is-invalid": this.invalid,
-      "stzh-input--is-disabled": this.disabled,
-      "stzh-input--is-readonly": this.readonly,
-      "stzh-input--is-required": this.required,
-      "stzh-input--has-placeholder": !!this.placeholder,
-      "stzh-input--is-filled": this.filled,
-      "stzh-input--is-clearable": this.clearable,
-      "stzh-input--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
-      [`stzh-input--size-${this.size}`]: !!this.size,
-      [`stzh-input--type-${this.type}`]: !!this.type,
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), index.h("label", { class: "stzh-input__label", htmlFor: this.inputId }, this.label ? this.label : index.h("slot", null), this.showMarker &&
-      index.h("span", { class: "stzh-input__marker" }, index.h("span", { class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-input__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText))), this.clearable || this.type === "search"
-      ?
-        index.h("stzh-button", { class: "stzh-input__button-right", icon: this.disabled || this.readonly || !this.filled ? "search" : "close-circle", "icon-only": true, variant: "input", onClick: this.onClearClick, disabled: this.disabled || this.readonly || !this.filled, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })
-      :
-        index.h("slot", { name: "button-right" })), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["valueWatcher"],
-    "error": ["errorWatcher"],
-    "type": ["typeWatcher"]
-  }; }
-};
+let inputCounter = 0;
+const StzhInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
+    /** Whether the input is a textarea or an input field */
+    this.multiline = false;
+    /** If input field, this defines the type (if `search`, a search icon will be displayed) */
+    this.type = "text";
+    /** Whether the element is readonly or not */
+    this.readonly = false;
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+    /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */
+    this.clearable = false;
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** The value of the input element */
+    this.value = "";
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /**
+     * Specify what the user agent has to provide as automated assistance.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values
+     */
+    this.autocomplete = "on";
+    /** Whether autocomplete should be turned off  */
+    this.noAutocomplete = false;
+    /** Label */
+    this.label = "";
+    /** Size variant */
+    this.size = "default";
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
+    this.onClearClick = (event) => {
+      this.value = "";
+      this.input.focus();
+      this.stzhChange.emit({
+        component: "stzh-input",
+        originalEvent: event,
+        value: this.value
+      });
+    };
+    this.onInput = (event) => {
+      this.value = this.input.value;
+      this.stzhChange.emit({
+        component: "stzh-input",
+        originalEvent: event,
+        value: this.value
+      });
+    };
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent('focus', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-input",
+        originalEvent: event
+      });
+    };
+    /** Input blur event */
+    this.onBlur = (event) => {
+      // fixes weird bug where autofill selection doesn't get removed
+      this.input.value = this.input.value;
+      const blurEvent = new FocusEvent('blur', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-input",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus input field */
+  async setFocus() {
+    this.input.focus();
+  }
+  valueWatcher(newValue) {
+    this.filled = newValue !== "";
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  typeWatcher(newValue) {
+    const types = [
+      "text", "search", "password", "email", "url", "tel"
+    ];
+    if (!this.multiline && !types.includes(newValue)) {
+      throw new Error(`Type ${newValue} not supported`);
+    }
+  }
+  renderTextarea() {
+    return (index.h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
+  }
+  renderInput() {
+    return (index.h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+  }
+  async componentWillLoad() {
+    this.inputId = `stzh-input-${inputCounter++}`;
+    this.typeWatcher(this.type);
+    this.valueWatcher(this.value);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'input');
+    }
+  }
+  render() {
+    var _a;
+    const buttonRightSlotUsed = utils.hasSlot(this.element, 'button-right');
+    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-input": true,
+      "stzh-input--has-button-right": buttonRightSlotUsed
+        || this.type === "search"
+        || (this.clearable && this.filled && !this.readonly && !this.disabled),
+      "stzh-input--has-description": descriptionUsed,
+      "stzh-input--has-description-long": descriptionLongUsed,
+      "stzh-input--has-error": errorUsed,
+      "stzh-input--is-invalid": this.invalid,
+      "stzh-input--is-disabled": this.disabled,
+      "stzh-input--is-readonly": this.readonly,
+      "stzh-input--is-required": this.required,
+      "stzh-input--has-placeholder": !!this.placeholder,
+      "stzh-input--is-filled": this.filled,
+      "stzh-input--is-clearable": this.clearable,
+      "stzh-input--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
+      [`stzh-input--size-${this.size}`]: !!this.size,
+      [`stzh-input--type-${this.type}`]: !!this.type,
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), index.h("label", { class: "stzh-input__label", htmlFor: this.inputId }, this.label ? this.label : index.h("slot", null), this.showMarker &&
+      index.h("span", { class: "stzh-input__marker" }, index.h("span", { class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-input__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText))), this.clearable || this.type === "search"
+      ?
+        index.h("stzh-button", { class: "stzh-input__button-right", icon: this.disabled || this.readonly || !this.filled ? "search" : "close-circle", "icon-only": true, variant: "input", onClick: this.onClearClick, disabled: this.disabled || this.readonly || !this.filled, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })
+      :
+        index.h("slot", { name: "button-right" })), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueWatcher"],
+    "error": ["errorWatcher"],
+    "type": ["typeWatcher"]
+  }; }
+};
 StzhInput.style = stzhInputCss;
 
 exports.stzh_input = StzhInput;

package/dist/cjs/stzh-link.cjs.entry.js

@@ -3,104 +3,104 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
+const utils = require('./utils-d327c19d.js');
 
 const stzhLinkCss = "@charset \"UTF-8\";.sc-stzh-link-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-link-h{display:none}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-link-h{--color:var(--stzh-link-color);--text-decoration:underline;--icon-size:var(--stzh-icon-size-medium);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration:underline;color:var(--color);display:inline-block;border-radius:var(--stzh-button-border-radius)}.sc-stzh-link-h .sc-stzh-link-s>stzh-text{--color:initial}[size=small].sc-stzh-link-h{--icon-size:var(--stzh-icon-size-small)}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-base-color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25)}.sc-stzh-link-h .sc-stzh-link-s>stzh-icon,.stzh-link__icon.sc-stzh-link{--size:var(--icon-size)}.stzh-link.sc-stzh-link{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;text-decoration:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius)}@media screen and (min-width: 1024px){.stzh-link.sc-stzh-link{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration:var(--hover-text-decoration);text-decoration:var(--hover-text-decoration)}.stzh-link__inner.sc-stzh-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{-webkit-text-decoration:var(--text-decoration);text-decoration:var(--text-decoration)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--size-small.sc-stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}";
 
-const StzhLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** Size variant */
-    this.size = "default";
-    /** href attribute of the link */
-    this.href = "";
-    /** target if the button is used as link (if href used)  */
-    this.target = "";
-    /** type of the button, if used as button (if no href used) */
-    this.type = "button";
-    /** Variant style */
-    this.variant = "default";
-    /** Badge text */
-    this.badge = "";
-    /** Badge position */
-    this.badgePosition = "icon";
-    /** Disabled status */
-    this.disabled = false;
-    /** Active status */
-    this.active = false;
-    /** Whether only an icon is used inside the link */
-    this.iconOnly = false;
-    /** Label */
-    this.label = "";
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent("focus", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-link",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent("blur", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-link",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus link */
-  async setFocus() {
-    this.link.focus();
-  }
-  renderIcon() {
-    return (index.h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
-      index.h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
-      :
-        index.h("slot", { name: "icon" }), this.badge &&
-      index.h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
-  }
-  renderContent() {
-    return (index.h("div", { class: "stzh-link__text" }, this.label ? this.label : index.h("slot", null)));
-  }
-  renderInner(iconUsed) {
-    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
-      index.h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
-  }
-  render() {
-    const iconUsed = utils.hasSlot(this.element, "icon") || !!this.icon;
-    const classes = {
-      "stzh-link": true,
-      "stzh-link--has-icon": iconUsed,
-      "stzh-link--has-icon-only": this.iconOnly,
-      "stzh-link--has-badge": !!this.badge,
-      "stzh-link--is-disabled": this.disabled,
-      "stzh-link--is-active": this.active,
-      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
-      [`stzh-link--size-${this.size}`]: !!this.size,
-      [`stzh-link--${this.variant}`]: !!this.variant
-    };
-    return (index.h(index.Host, null, this.href ?
-      index.h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
-      :
-        index.h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Icon Position */
+    this.iconPosition = "left";
+    /** Size variant */
+    this.size = "default";
+    /** href attribute of the link */
+    this.href = "";
+    /** target if the button is used as link (if href used)  */
+    this.target = "";
+    /** type of the button, if used as button (if no href used) */
+    this.type = "button";
+    /** Variant style */
+    this.variant = "default";
+    /** Badge text */
+    this.badge = "";
+    /** Badge position */
+    this.badgePosition = "icon";
+    /** Disabled status */
+    this.disabled = false;
+    /** Active status */
+    this.active = false;
+    /** Whether only an icon is used inside the link */
+    this.iconOnly = false;
+    /** Label */
+    this.label = "";
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent("focus", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-link",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent("blur", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-link",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus link */
+  async setFocus() {
+    this.link.focus();
+  }
+  renderIcon() {
+    return (index.h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
+      index.h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
+      :
+        index.h("slot", { name: "icon" }), this.badge &&
+      index.h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+  }
+  renderContent() {
+    return (index.h("div", { class: "stzh-link__text" }, this.label ? this.label : index.h("slot", null)));
+  }
+  renderInner(iconUsed) {
+    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
+      index.h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+  }
+  render() {
+    const iconUsed = utils.hasSlot(this.element, "icon") || !!this.icon;
+    const classes = {
+      "stzh-link": true,
+      "stzh-link--has-icon": iconUsed,
+      "stzh-link--has-icon-only": this.iconOnly,
+      "stzh-link--has-badge": !!this.badge,
+      "stzh-link--is-disabled": this.disabled,
+      "stzh-link--is-active": this.active,
+      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
+      [`stzh-link--size-${this.size}`]: !!this.size,
+      [`stzh-link--${this.variant}`]: !!this.variant
+    };
+    return (index.h(index.Host, null, this.href ?
+      index.h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      :
+        index.h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhLink.style = stzhLinkCss;
 
 exports.stzh_link = StzhLink;