@oiz/stzh-components 4.9.0-beta3 → 4.9.0-beta4

package/dist/components/p-DOnoc3XR.js

@@ -0,0 +1,202 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { h as hasSlot } from './p-CN5apKPb.js';
+import { S as StzhInputDescription } from './p-CF6aqBg9.js';
+import { d as defineCustomElement$3 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$2 } from './p-Bk_CuXEU.js';
+import { d as defineCustomElement$1 } from './p-CEPvA7qH.js';
+
+const stzhCheckboxCss = () => `.sc-stzh-checkbox-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-checkbox-h,[stzh-hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{--label-color:var(--stzh-checkbox-label-color, var(--stzh-base-color));--label-hover-color:var(
+    --stzh-checkbox-label-hover-color,
+    var(--stzh-color-primary70)
+  );--label-hover-checked-color:var(
+    --stzh-checkbox-label-hover-checked-color,
+    var(--stzh-color-primary90)
+  );--check-color:var(--stzh-checkbox-check-color, var(--stzh-color-primary));--invalid-color:var(--stzh-checkbox-invalid-color, var(--stzh-color-error60));--disabled-color:var(--stzh-checkbox-disabled-color, var(--stzh-color-grey50));display:inline-block}[disabled].sc-stzh-checkbox-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error60)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{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-checkbox__description-long.sc-stzh-checkbox{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkbox__description-long.sc-stzh-checkbox{margin-top:0}}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkbox.sc-stzh-checkbox{display:grid}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{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);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);position:relative}.stzh-checkbox__check.sc-stzh-checkbox{display:block;position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%, -50%) translateZ(0);will-change:opacity;opacity:0;transition:opacity 0.15s ease;pointer-events:none;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18 3.636 11.636l1.414-1.414z'/%3E %3C/svg%3E");mask-repeat:no-repeat;mask-position:center;mask-size:contain;background-color:var(--check-color)}.stzh-checkbox__label.sc-stzh-checkbox{--stzh-base-color:initial;display:inline-block;color:var(--label-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--label-hover-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--label-hover-checked-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--label-hover-checked-color)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--label-hover-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--label-hover-checked-color)}.stzh-checkbox--is-checked.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--invalid-color)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--invalid-color)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--invalid-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey60)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--disabled-color);border-color:var(--disabled-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--disabled-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey20)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--invalid-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--disabled-color)}`;
+
+let checkboxCounter = 0;
+const StzhCheckbox = /*@__PURE__*/ proxyCustomElement(class StzhCheckbox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhChange = createEvent(this, "stzhChange");
+        this.stzhFocus = createEvent(this, "stzhFocus");
+        this.stzhBlur = createEvent(this, "stzhBlur");
+        /** Whether the checkbox is disabled */
+        this.disabled = false;
+        /** Name of the input element */
+        this.name = "";
+        /** Value of the input element */
+        this.value = "";
+        /** Invalid status */
+        this.invalid = false;
+        /** Required status */
+        this.required = false;
+        /** Checked status */
+        this.checked = false;
+        /** Label */
+        this.label = "";
+        /** Hide `(optional)` label (or use `required` inside form to hide it) */
+        this.hideOptional = false;
+        /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
+        this.a11yDescribedby = "";
+        this.focusedByInput = false;
+        this.handleReset = async () => {
+            this.checked = this.defaultChecked;
+        };
+        this.onInput = (event) => {
+            this.checked = this.input.checked;
+            this.stzhChange.emit({
+                component: "stzh-checkbox",
+                originalEvent: event,
+                value: this.value,
+                checked: this.checked,
+            });
+        };
+        this.onRootFocus = () => {
+            if (!this.focusedByInput) {
+                this.input.focus();
+            }
+            this.focusedByInput = false;
+        };
+        this.onFocus = (event) => {
+            this.focusedByInput = true;
+            const focusEvent = new FocusEvent("focus", {
+                view: window,
+                bubbles: false,
+                cancelable: false,
+            });
+            this.element.dispatchEvent(focusEvent);
+            this.stzhFocus.emit({
+                component: "stzh-checkbox",
+                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-checkbox",
+                originalEvent: event,
+            });
+        };
+    }
+    resetListener(event) {
+        if (event.target.contains(this.element)) {
+            requestAnimationFrame(() => {
+                this.handleReset();
+            });
+        }
+    }
+    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 = [];
+        }
+    }
+    async componentWillLoad() {
+        this.inputId = `stzh-checkbox-${checkboxCounter++}`;
+        this.errorWatcher(this.error);
+        this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "checkbox");
+        }
+    }
+    render() {
+        var _a;
+        const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
+        const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
+        const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const classes = {
+            "stzh-checkbox": true,
+            "stzh-checkbox--has-description": descriptionUsed,
+            "stzh-checkbox--has-description-long": descriptionLongUsed,
+            "stzh-checkbox--has-error": errorUsed,
+            "stzh-checkbox--is-required": this.required,
+            "stzh-checkbox--is-invalid": this.invalid || errorUsed,
+            "stzh-checkbox--is-disabled": this.disabled,
+            "stzh-checkbox--is-checked": this.checked,
+        };
+        return (h(Host, { key: 'daddb2edb85feee481f3fe9d759e16d2ebdfbea8', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '08ac2801482ba30003af03ed2986e803b428b4bf', class: classes }, h("label", { key: 'a9eb2ff79836b05c240f7a37b7c4cfd8c9c862f9', class: "stzh-checkbox__field-wrapper" }, h("input", { key: 'a8f5c1f553135f61ab56748c98ee5f55136bcb52', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '5c8e9c02e999e6337417c71af7f3c8ef1fa50e32', class: "stzh-checkbox__mark" }, h("div", { key: 'ab9b969977ad97df300024c598687c1590b1a281', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: 'f1417ec7e65322ae3b672bbd98ee265fe919a5d8', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '22ff43c43f5d2f39513935054b17e25691596c19', class: "stzh-checkbox__marker" }, h("span", { key: '6b2c985877ea6b150ef86457d9a9aeab9c1261a6', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
+            ? this.localization.$globals.requiredFieldMarker
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '0bb58f8c51d9ac32f3dfe5b6d9ea19549bafe633', class: "stzh-checkbox__marker-text" }, this.required
+            ? this.localization.$globals.requiredFieldText
+            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '317cfc11eba8538ce1c8d2969cde39740f95cd57', classPrefix: "stzh-checkbox", 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 {
+        "error": ["errorWatcher"]
+    }; }
+    static get style() { return stzhCheckboxCss(); }
+}, [262, "stzh-checkbox", {
+        "localization": [16],
+        "disabled": [516],
+        "name": [513],
+        "value": [1025],
+        "invalid": [516],
+        "required": [516],
+        "checked": [1540],
+        "defaultChecked": [1028, "default-checked"],
+        "label": [1],
+        "description": [1],
+        "descriptionLong": [1, "description-long"],
+        "descriptionLongTitle": [1, "description-long-title"],
+        "hideOptional": [516, "hide-optional"],
+        "error": [1],
+        "a11yDescribedby": [1, "a11y-describedby"]
+    }, [[4, "reset", "resetListener"]], {
+        "error": ["errorWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-checkbox", "stzh-icon", "stzh-popover", "stzh-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-checkbox":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhCheckbox);
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhCheckbox as S, defineCustomElement as d };
+//# sourceMappingURL=p-DOnoc3XR.js.map
+
+//# sourceMappingURL=p-DOnoc3XR.js.map

package/dist/components/p-DOnoc3XR.js.map

@@ -0,0 +1 @@
+{"file":"p-DOnoc3XR.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 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 */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: 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   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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(\"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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\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-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\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-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\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-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\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-DQ242D9a.js

@@ -0,0 +1,166 @@
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { d as defineCustomElement$7 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$6 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$5 } from './p-BHL1YNzN.js';
+import { d as defineCustomElement$4 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$3 } from './p-BAyu2WG3.js';
+import { d as defineCustomElement$2 } from './p-Bk_CuXEU.js';
+import { d as defineCustomElement$1 } from './p-CEPvA7qH.js';
+
+const stzhPaginationCss = () => `.sc-stzh-pagination-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-pagination-h,[stzh-hidden].sc-stzh-pagination-h{display:none}.sc-stzh-pagination-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h *.sc-stzh-pagination,.sc-stzh-pagination-h *.sc-stzh-pagination::before,.sc-stzh-pagination-h *.sc-stzh-pagination::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-pagination-h .has-focus.sc-stzh-pagination{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination{outline-style:none !important}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination::-moz-focus-inner{border:0 !important}.sc-stzh-pagination-h{--justify-content:inherit;--padding-left:calc(var(--stzh-form-input-height) + var(--stzh-space-medium))}.stzh-pagination.sc-stzh-pagination{position:relative;display:flex;align-items:center;gap:var(--stzh-space-medium);padding-left:var(--padding-left);justify-content:var(--justify-content)}.stzh-pagination__input.sc-stzh-pagination{--text-align:center;--input-width:var(--stzh-form-input-height);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;position:absolute;top:0;left:0}.stzh-pagination__total.sc-stzh-pagination{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);color:var(--stzh-color-grey70)}.stzh-pagination--size-small.sc-stzh-pagination{padding-left:calc(var(--stzh-form-input-small-height) + var(--stzh-space-medium))}.stzh-pagination--size-small.sc-stzh-pagination .stzh-pagination__input.sc-stzh-pagination{--input-width:var(--stzh-form-input-small-height)}`;
+
+const StzhPagination = /*@__PURE__*/ proxyCustomElement(class StzhPagination extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhChange = createEvent(this, "stzhChange");
+        /** Total pages available. */
+        this.total = 1;
+        /** Name of the hidden date picker input. */
+        this.name = "";
+        /** Current page. */
+        this.value = 1;
+        /** Label for dropdown */
+        this.label = "";
+        /** Whether label is hidden. */
+        this.labelHidden = false;
+        /** Whether the element is readonly or not */
+        this.readonly = false;
+        /** Whether the element is disabled or not */
+        this.disabled = false;
+        /** Whether the current page is mutable via input */
+        this.allowManualInput = true;
+        /** Invalid status */
+        this.invalid = false;
+        /** Required status */
+        this.required = false;
+        /** Size variant */
+        this.size = "default";
+        /** Id of the element which describes the input */
+        this.a11yDescribedby = "";
+        this.gotoPage = (newPage) => {
+            const previous = this.value;
+            if (newPage >= 1 && newPage <= this.total) {
+                this.value = newPage;
+            }
+            else if (newPage > this.total) {
+                this.value = this.total;
+            }
+            else {
+                this.value = 1;
+            }
+            if (previous !== this.value) {
+                this.stzhChange.emit({
+                    component: "stzh-pagination",
+                    page: Number(this.value),
+                });
+            }
+        };
+        this.onRootFocus = () => {
+            if (this.input) {
+                this.input.focus();
+            }
+        };
+        this.onInputChange = (event) => {
+            const newPage = Number(event.detail.value) || 1;
+            this.gotoPage(newPage);
+        };
+    }
+    /** Set current page to previous */
+    async prev() {
+        this.gotoPage(this.value - 1);
+    }
+    /** Set current page to next */
+    async next() {
+        this.gotoPage(this.value + 1);
+    }
+    async componentWillLoad() {
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "pagination");
+        }
+    }
+    render() {
+        var _a;
+        const classes = {
+            "stzh-pagination": true,
+            [`stzh-pagination--size-${this.size}`]: !!this.size,
+        };
+        return (h(Host, { key: '35cd9bdd51c751fecf43393cb8f52751c7b5e80a', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'aa3c3bf2eb1c2120c4441f00fbc2d71a8800f80c', class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", { key: '3fd6f95703c9c8b53a586a56a395db5b8737c04e' }, h("stzh-button", { key: '0778cbf90876d018aa56efc77a144cca90e3d6f7', variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { key: 'bc397fee13ab8bc70ebd53721f9168203646e3c3', variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
+    }
+    get element() { return this; }
+    static get style() { return stzhPaginationCss(); }
+}, [258, "stzh-pagination", {
+        "total": [2],
+        "name": [513],
+        "value": [1026],
+        "label": [1],
+        "labelHidden": [4, "label-hidden"],
+        "readonly": [516],
+        "disabled": [516],
+        "allowManualInput": [516, "allow-manual-input"],
+        "description": [1],
+        "descriptionLong": [1, "description-long"],
+        "error": [1],
+        "invalid": [516],
+        "required": [516],
+        "size": [513],
+        "a11yDescribedby": [1, "a11y-describedby"],
+        "localization": [16],
+        "prev": [64],
+        "next": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-pagination", "stzh-badge", "stzh-button", "stzh-buttongroup", "stzh-icon", "stzh-input", "stzh-popover", "stzh-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-pagination":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhPagination);
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "stzh-buttongroup":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stzh-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhPagination as S, defineCustomElement as d };
+//# sourceMappingURL=p-DQ242D9a.js.map
+
+//# sourceMappingURL=p-DQ242D9a.js.map

package/dist/components/p-DQ242D9a.js.map

@@ -0,0 +1 @@
+{"file":"p-DQ242D9a.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  --justify-content: inherit;\n  --padding-left: calc(#{$formInputHeight} + #{space(\"medium\")});\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space(\"medium\");\n  padding-left: var(--padding-left);\n  justify-content: var(--justify-content);\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize(\"nano\");\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space(\"medium\")});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true,\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: 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 the current page is mutable via input */\n  @Prop({ reflect: true }) allowManualInput: boolean = true;\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  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | 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  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value),\n      });\n    }\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.allowManualInput ? (\n            <Fragment>\n              <stzh-input\n                class=\"stzh-pagination__input\"\n                type=\"number\"\n                min={1}\n                max={this.total}\n                label={this.label || this.localization.label}\n                labelHidden={true}\n                ref={el => (this.input = el as HTMLStzhInputElement)}\n                onStzhChange={this.onInputChange}\n                value={this.value?.toString() || \"\"}\n                required={this.required}\n                disabled={this.disabled}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                error={this.error}\n                a11yDescribedby={this.a11yDescribedby}\n                name={this.name}\n                size={this.size}\n                invalid={this.invalid}\n                hideOptional={true}\n                noAutocomplete={true}\n              ></stzh-input>\n              <div class=\"stzh-pagination__total\">\n                {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n              </div>\n            </Fragment>\n          ) : (\n            <div class=\"stzh-pagination__total\">\n              {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n            </div>\n          )}\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}