q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-icon/q2-icon.css

@@ -65,6 +65,21 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-icon-size: (<length>) Controls the height and width of the icon.
+ * @prop --tct-icon-stroke-primary: (<color>) Controls the primary stroke color of the icon paths.
+ * @prop --tct-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the icon paths.
+ * @prop --tct-icon-stroke-width: (<number>) Controls the stroke width of the icon paths.
+ * @prop --tct-icon-group-stroke-width: (<number>) Controls the default stroke width applied to grouped icons.
+ * @prop --tct-icon-group-brand-stroke-width: (<number>) Controls the stroke width applied to brand-group icons.
+ * @prop --tct-icon-group-browsersos-stroke-width: (<number>) Controls the stroke width applied to browsersos-group icons.
+ * @prop --tct-icon-cap: (<custom-ident>) Controls the stroke-linecap and stroke-linejoin values of the icon paths.
+ * @prop --tct-icon-fill?: (<color>) Controls the optional fill color applied to filled icon paths.
+ * @prop --tct-icon-transition?: (*) Controls the optional transition applied to the icon SVG.
+ * @prop --tct-icon-fill-transition?: (*) Controls the optional transition applied to icon fill changes.
+ * @prop --tct-icon-stroke-primary-transition?: (*) Controls the optional transition applied to primary stroke changes.
+ * @prop --tct-icon-stroke-secondary-transition?: (*) Controls the optional transition applied to secondary stroke changes.
+ */
 :host {
   display: inline-block;
   height: var(--tct-icon-size, 24px);

package/dist/collection/components/q2-icon/test/q2-icon-test.vr.js

@@ -0,0 +1,55 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'standard-default',
+        html: `<q2-icon type="dashboard"></q2-icon>`,
+    },
+    {
+        name: 'standard-inline',
+        html: `<span style="font-size:24px">Hello <q2-icon type="dashboard" inline></q2-icon> world</span>`,
+    },
+    {
+        name: 'status-info',
+        html: `<q2-icon type="info"></q2-icon>`,
+    },
+    {
+        name: 'status-success',
+        html: `<q2-icon type="success"></q2-icon>`,
+    },
+    {
+        name: 'status-warning',
+        html: `<q2-icon type="warning"></q2-icon>`,
+    },
+    {
+        name: 'status-error',
+        html: `<q2-icon type="error"></q2-icon>`,
+    },
+    {
+        name: 'filled-success',
+        html: `<q2-icon type="success-filled"></q2-icon>`,
+    },
+    {
+        name: 'brand-color',
+        html: `<q2-icon type="brand-zelle-color"></q2-icon>`,
+    },
+    {
+        name: 'with-label',
+        html: `<q2-icon type="bell" label="Notifications"></q2-icon>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-icon--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-icon--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-icon — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-icon-test.vr.js.map

package/dist/collection/components/q2-icon/test/q2-icon-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-icon-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-icon/test/q2-icon-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAI1E,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,sCAAsC;KAC/C;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,6FAA6F;KACtG;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,iCAAiC;KAC1C;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,oCAAoC;KAC7C;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,oCAAoC;KAC7C;IACD;QACI,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,kCAAkC;KAC3C;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,2CAA2C;KACpD;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,8CAA8C;KACvD;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,uDAAuD;KAChE;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACpE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,YAAY,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC3F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC9C,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'standard-default',\n        html: `<q2-icon type=\"dashboard\"></q2-icon>`,\n    },\n    {\n        name: 'standard-inline',\n        html: `<span style=\"font-size:24px\">Hello <q2-icon type=\"dashboard\" inline></q2-icon> world</span>`,\n    },\n    {\n        name: 'status-info',\n        html: `<q2-icon type=\"info\"></q2-icon>`,\n    },\n    {\n        name: 'status-success',\n        html: `<q2-icon type=\"success\"></q2-icon>`,\n    },\n    {\n        name: 'status-warning',\n        html: `<q2-icon type=\"warning\"></q2-icon>`,\n    },\n    {\n        name: 'status-error',\n        html: `<q2-icon type=\"error\"></q2-icon>`,\n    },\n    {\n        name: 'filled-success',\n        html: `<q2-icon type=\"success-filled\"></q2-icon>`,\n    },\n    {\n        name: 'brand-color',\n        html: `<q2-icon type=\"brand-zelle-color\"></q2-icon>`,\n    },\n    {\n        name: 'with-label',\n        html: `<q2-icon type=\"bell\" label=\"Notifications\"></q2-icon>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-icon--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-icon--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-icon — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

package/dist/collection/components/q2-input/q2-input.css

@@ -65,6 +65,105 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-input-margin: (<length-percentage>+) Controls the outer margin of the input host.
+ * @prop --tct-input-margin-top: (<length-percentage>) Controls the top margin of the input host when --tct-input-margin is not set.
+ * @prop --tct-input-margin-bottom: (<length-percentage>) Controls the bottom margin of the input host when --tct-input-margin is not set.
+ * @prop --tct-input-padding?: (<length-percentage>+) Controls the optional inner padding of the input field.
+ * @prop --tct-input-font-color: (<color>) Controls the text color of the input field.
+ * @prop --tct-input-font-size?: (<length-percentage>) Controls the optional font size of the input field.
+ * @prop --tct-input-font-weight: (<number>) Controls the font weight of the input field.
+ * @prop --tct-input-letter-spacing?: (<length>) Controls the optional letter spacing of the input field.
+ * @prop --tct-input-align: (<custom-ident>) Controls the text alignment of the input field.
+ * @prop --tct-input-height: (<length>) Controls the height of the input field.
+ * @prop --tct-input-min-height: (<length>) Controls the minimum height of the input container.
+ * @prop --tct-input-max-height?: (<length>) Controls the optional maximum height of the input container.
+ * @prop --tct-input-tween: (*) Controls the transition timing of input state changes (background, border, etc.).
+ * @prop --tct-input-background: (<color>) Controls the background color of the input container in its default state.
+ * @prop --tct-input-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in its default state.
+ * @prop --tct-input-border-color: (<color>) Controls the border color of the input container in its default state.
+ * @prop --tct-input-border-top-width: (<length>) Controls the top border width of the input container.
+ * @prop --tct-input-border-right-width: (<length>) Controls the right border width of the input container.
+ * @prop --tct-input-border-bottom-width: (<length>) Controls the bottom border width of the input container.
+ * @prop --tct-input-border-left-width: (<length>) Controls the left border width of the input container.
+ * @prop --tct-input-border-top-left-radius: (<length-percentage>) Controls the top-left corner radius of the input container.
+ * @prop --tct-input-border-top-right-radius: (<length-percentage>) Controls the top-right corner radius of the input container.
+ * @prop --tct-input-border-bottom-right-radius: (<length-percentage>) Controls the bottom-right corner radius of the input container.
+ * @prop --tct-input-border-bottom-left-radius: (<length-percentage>) Controls the bottom-left corner radius of the input container.
+ * @prop --tct-input-box-shadow?: (*) Controls the optional box shadow of the input container in its default state.
+ * @prop --tct-input-container-gap: (<length-percentage>) Controls the gap between elements inside the input container.
+ * @prop --tct-input-container-padding-inline?: (<length-percentage>+) Controls the optional inline padding of the input container.
+ * @prop --tct-input-horizontal-gap?: (<length-percentage>) Controls the optional horizontal gap inside icon containers.
+ * @prop --tct-input-disabled-opacity: (<number>) Controls the opacity of the input container when disabled.
+ * @prop --tct-input-disabled-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container when disabled.
+ * @prop --tct-input-hover-background: (<color>) Controls the background color of the input container on hover.
+ * @prop --tct-input-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container on hover.
+ * @prop --tct-input-hover-border-color: (<color>) Controls the border color of the input container on hover.
+ * @prop --tct-input-hover-box-shadow: (*) Controls the box shadow of the input container on hover.
+ * @prop --tct-input-hover-ring-color?: (<color>) Controls the optional outer ring color of the input hover effect.
+ * @prop --tct-input-focus-background: (<color>) Controls the background color of the input container on focus.
+ * @prop --tct-input-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container on focus.
+ * @prop --tct-input-focus-border-color: (<color>) Controls the border color of the input container on focus.
+ * @prop --tct-input-focus-box-shadow: (*) Controls the box shadow of the input container on focus.
+ * @prop --tct-input-error-background: (<color>) Controls the background color of the input container in the error state.
+ * @prop --tct-input-error-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in the error state.
+ * @prop --tct-input-error-border-color: (<color>) Controls the border color of the input container in the error state.
+ * @prop --tct-input-error-box-shadow: (*) Controls the box shadow of the input container in the error state.
+ * @prop --tct-input-error-focus-background: (<color>) Controls the background color of the input container in the error+focus state.
+ * @prop --tct-input-error-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in the error+focus state.
+ * @prop --tct-input-error-focus-border-color: (<color>) Controls the border color of the input container in the error+focus state.
+ * @prop --tct-input-error-focus-box-shadow: (*) Controls the box shadow of the input container in the error+focus state.
+ * @prop --tct-input-error-hover-background: (<color>) Controls the background color of the input container in the error+hover state.
+ * @prop --tct-input-error-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in the error+hover state.
+ * @prop --tct-input-error-hover-border-color: (<color>) Controls the border color of the input container in the error+hover state.
+ * @prop --tct-input-error-hover-box-shadow: (*) Controls the box shadow of the input container in the error+hover state.
+ * @prop --tct-input-error-label-font-color?: (<color>) Controls the optional text color of the input label in the error state.
+ * @prop --tct-input-error-prefix-background: (<color>) Controls the background color of the input prefix in the error state.
+ * @prop --tct-input-error-prefix-font-color?: (<color>) Controls the optional text color of the input prefix in the error state.
+ * @prop --tct-input-placeholder-font-color: (<color>) Controls the placeholder text color of the input.
+ * @prop --tct-input-autofill-background: (<color>) Controls the background color of the input field when autofilled.
+ * @prop --tct-input-autofill-font-color?: (<color>) Controls the optional text color of the input field when autofilled.
+ * @prop --tct-input-label-font-color?: (<color>) Controls the optional text color of the input label.
+ * @prop --tct-input-label-font-size?: (<length-percentage>) Controls the optional font size of the input label.
+ * @prop --tct-input-label-font-weight: (<number>) Controls the font weight of the input label.
+ * @prop --tct-input-label-letter-spacing?: (<length>) Controls the optional letter spacing of the input label.
+ * @prop --tct-input-label-text-transform?: (<custom-ident>) Controls the optional text transform of the input label.
+ * @prop --tct-input-label-padding: (<length-percentage>+) Controls the inner padding of the input label.
+ * @prop --tct-input-label-margin: (<length-percentage>+) Controls the outer margin of the input label row.
+ * @prop --tct-input-label-gap: (<length-percentage>) Controls the gap between elements within the input label row.
+ * @prop --tct-input-label-line-height?: (<number> | <length-percentage>) Controls the optional line height of the input label row.
+ * @prop --tct-input-label-optional-margin: (<length-percentage>+) Controls the outer margin of the "(optional)" indicator next to the label.
+ * @prop --tct-input-label-optional-font-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
+ * @prop --tct-input-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
+ * @prop --tct-input-label-optional-font-weight: (<number>) Controls the font weight of the "(optional)" indicator next to the label.
+ * @prop --tct-input-count-font-color: (<color>) Controls the text color of the character-count indicator.
+ * @prop --tct-input-count-font-size: (<length-percentage>) Controls the font size of the character-count indicator.
+ * @prop --tct-input-count-font-weight: (<number>) Controls the font weight of the character-count indicator.
+ * @prop --tct-input-count-width: (<length-percentage>) Controls the width of the character-count indicator.
+ * @prop --tct-input-icon-stroke-primary: (<color>) Controls the primary stroke color of icons rendered inside the input.
+ * @prop --tct-input-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons rendered inside the input.
+ * @prop --tct-input-icon-container-font-size?: (<length-percentage>) Controls the optional font size of content inside the input icon containers.
+ * @prop --tct-input-icon-container-icon-min-width: (<length>) Controls the minimum width of icon slots inside the input icon containers.
+ * @prop --tct-input-icon-container-empty-display: (<custom-ident>) Controls the display value of icon containers when empty.
+ * @prop --tct-input-btn-hover-background?: (<color>) Controls the optional background color of icon buttons inside the input on hover.
+ * @prop --tct-input-btn-icon-stroke-primary?: (<color>) Controls the optional primary stroke color of icon buttons inside the input.
+ * @prop --tct-input-btn-icon-stroke-secondary?: (<color>) Controls the optional secondary stroke color of icon buttons inside the input.
+ * @prop --tct-input-prefix-background: (<color>) Controls the background color of the input prefix.
+ * @prop --tct-input-prefix-border-color: (<color>) Controls the border color of the input prefix separator.
+ * @prop --tct-input-prefix-border-width: (<length>) Controls the border width of the input prefix separator.
+ * @prop --tct-input-prefix-font-color?: (<color>) Controls the optional text color of the input prefix.
+ * @prop --tct-input-prefix-font-size?: (<length-percentage>) Controls the optional font size of the input prefix.
+ * @prop --tct-input-prefix-font-weight: (<number>) Controls the font weight of the input prefix.
+ * @prop --tct-input-visibility-toggle-font-color: (<color>) Controls the text color of the password visibility toggle button.
+ * @prop --tct-input-visibility-toggle-font-size: (<length-percentage>) Controls the font size of the password visibility toggle button.
+ * @prop --tct-input-visibility-toggle-font-weight: (<number>) Controls the font weight of the password visibility toggle button.
+ * @prop --tct-input-visibility-toggle-padding: (<length-percentage>+) Controls the inner padding of the password visibility toggle button.
+ * @prop --tct-input-message-box-shadow: (*) Controls the box shadow of the input messages container.
+ * @prop --tct-input-messages-font-color?: (<color>) Controls the optional text color of the input messages container.
+ * @prop --tct-input-messages-margin-top: (<length-percentage>) Controls the top margin of the input messages container.
+ * @prop --tct-input-messages-tween: (*) Controls the transition timing of the input messages container.
+ * @prop --tct-input-messages-z-index: (<integer>) Controls the z-index of the input messages container.
+ */
 :host {
   --comp-default-input-margin: var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));
   display: block;
@@ -267,6 +366,11 @@ button {
 .input-field:is(input) {
   flex: 1;
 }
+.input-field:is(input)[readonly]:not([readonly=false]) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .input-field:is(button) {
   display: inline-flex;
   align-items: center;

package/dist/collection/components/q2-input/q2-input.js

@@ -569,7 +569,10 @@ export class Q2Input {
         this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
         if (!this.pseudo) {
             const setValue = () => {
-                this.inputField.value = this.formattedValueObject.formattedValue;
+                const newValue = this.formattedValueObject.formattedValue;
+                if (!this._preventEntry || this.inputField.value !== newValue) {
+                    this.inputField.value = newValue;
+                }
             };
             this.inputField ? setValue() : this.scheduledAfterRender.push(() => setValue());
         }
@@ -705,7 +708,7 @@ export class Q2Input {
     }
     renderInputContainerDOM() {
         const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
+        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onMouseDown: e => e.preventDefault(), onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
     }
     renderPseudoInputDOM() {
         const showPlaceholder = !this.value && !!this.placeholder;
@@ -722,7 +725,7 @@ export class Q2Input {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: '5cd0ac01d09732c81c59519cd04a998ff99e4dea', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '3907d95e0564a7e5f53148f6bdd02f0d51dcc8b6', class: this.wrapperClasses }, h("div", { key: '73857901c65827a40b17a56e8a1ac4d1d9c4faf7', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: 'dc8314b8051dd9250b67565e44dfe1c5d4c42899', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '2e1f3af0bd2eec990e40b1c01bf651640bd0130d', class: this.wrapperClasses }, h("div", { key: '25ffb3668026b44443dab5dfd2b884664fb42d7f', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }