npm - @public-ui/components - Versions diffs - 4.3.0-rc.4 → 4.3.0-rc.5 - Mend

@public-ui/components 4.3.0-rc.4 → 4.3.0-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1256) hide show

package/dist/collection/components/table-stateless/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  src: url("kolicons.eot?t=1783501930981#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783501930981") format("woff2"), url("kolicons.woff?t=1783501930981") format("woff"), url("kolicons.ttf?t=1783501930981") format("truetype"), url("kolicons.svg?t=1783501930981#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -425,6 +426,7 @@
   }
   .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -463,18 +465,18 @@
     border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     border: 1px solid black;
   }
-  .kol-table-settings__columns-container {
-    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));
-    overflow: auto;
-  }
   .kol-table-settings__columns {
     display: grid;
-    align-items: center;
+    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));
+    overflow: auto;
     grid-auto-rows: min-content;
     grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;
   }
   .kol-table-settings__column {
-    display: contents;
+    display: grid;
+    align-items: center;
+    grid-template-columns: subgrid;
+    grid-column: 1/6;
   }
   .kol-icon {
     color: inherit;
@@ -571,6 +573,7 @@
   }
   .kol-table__cell--actions .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;

package/dist/collection/components/table-stateless/table-settings.js CHANGED Viewed

@@ -16,7 +16,6 @@ export class KolTableSettings {
         this.translateTableSettingsCancel = translate('kol-table-settings-cancel');
         this.translateTableSettingsApply = translate('kol-table-settings-apply');
         this.translateErrorAllInvisible = translate('kol-table-settings-error-all-invisible');
-        this.translateColumnNotHidable = translate('kol-table-settings-column-not-hidable');
         this._horizontalHeaderCells = [];
     }
     handleHeaderCellsChange(newValue) {
@@ -101,7 +100,13 @@ export class KolTableSettings {
     }
     render() {
         const columns = this.getPrimaryRow();
-        return (h(KolPopoverButtonWcTag, { key: 'b31b61fd00d6f9b7b1cb7229abde5e67772edd4f', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, h("div", { key: 'd888ac1b3b7842c5336c12210145890b24916e36', class: "kol-table-settings__content" }, h(KolHeadingTag, { key: 'd79f606ed627a4a5a069415db0c2cedfaaf666d6', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && h(KolAlertWcTag, { key: '310aff9ecbe70b0c9ac4aaf9994b9559bd739b81', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), h("form", { key: 'b0e84c2f51ab706cc09e4c85ea719b58a3273664', onSubmit: this.handleSubmit.bind(this) }, h("div", { key: 'fbd274e2f77c273d94696698ce8842d9dd51a731', class: "kol-table-settings__columns-container" }, h("div", { key: '696a79971b4c63b8e2dc8341016880d8c8fac347', class: "kol-table-settings__columns" }, columns.map((column, index) => (h("div", { key: column.key, class: "kol-table-settings__column" }, h(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h("span", { class: "kol-table-settings__column-label" }, column.label), h(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), h(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" })))))), h("div", { key: 'cc7c01ab830868f213166f868a540ada2cdf1328', class: "kol-table-settings__actions" }, h(KolButtonWcTag, { key: '495664a6a4e779c2faba8c5e57e8baec3818b6fd', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), h(KolButtonWcTag, { key: '79d6b02edfc4072529a94f628925fd12f6c851d0', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
+        return (h(KolPopoverButtonWcTag, { key: '2dc78b0438f683df5d48c3701475532f542004c5', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, h("div", { key: '0a20509547d95eafdf172f6d166d1ebe4cd1e53b', class: "kol-table-settings__content" }, h(KolHeadingTag, { key: 'fad17919f172d13e8505fea80cf80dfa0c601e07', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && h(KolAlertWcTag, { key: '59976ed2e8f1c98f92ac7b977ba2576d4dbbbe2c', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), h("form", { key: '75cd70a788598da1e8bef1ff3e6dd5bb92b09480', onSubmit: this.handleSubmit.bind(this) }, h("div", { key: 'aee78d2f68659196041058ce7403df59d04197f3', class: "kol-table-settings__columns" }, columns.map((column, index) => (h("div", { key: column.key, class: "kol-table-settings__column" }, h(KolInputCheckboxTag, { _checked: column.visible !== false, _label: column.hidable
+                ? translate('kol-table-settings-column-hidable', { placeholders: { column: column.label } })
+                : translate('kol-table-settings-column-not-hidable', { placeholders: { column: column.label } }), _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h("span", { class: "kol-table-settings__column-label" }, column.label), h(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: column.sortable === false || index === 0
+                ? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })
+                : translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), h(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: column.sortable === false || index === columns.length - 1
+                ? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })
+                : translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" }))))), h("div", { key: '9a9a5dfc6367316dff841159e176570c3220c811', class: "kol-table-settings__actions" }, h(KolButtonWcTag, { key: '67c45436924e20b4cc9ed61ce96a8959055303b4', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), h(KolButtonWcTag, { key: '09bcb9b1c06017cc01be5d0eba7fd6babb485beb', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
     }
     static get is() { return "kol-table-settings-wc"; }
     static get properties() {

package/dist/collection/components/table-stateless/table-settings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-settings.js","sourceRoot":"","sources":["../../../src/components/table-stateless/table-settings.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { KolAlertWcTag, KolButtonWcTag, KolHeadingTag, KolInputCheckboxTag, KolInputNumberTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { KoliBriTableHeaderCell } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { parseColumnWidth } from './controller';\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-table-settings-wc',\n\tshadow: false,\n})\nexport class KolTableSettings {\n\t@Element() private readonly host?: HTMLKolTableSettingsWcElement;\n\t@State() headerCells: KoliBriTableHeaderCell[][] = [];\n\t@State() editingHeaderCells: KoliBriTableHeaderCell[][] = [];\n\t@State() errorMessage: string \| null = null;\n\tprivate readonly translateTableSettings = translate('kol-table-settings');\n\tprivate readonly translateTableSettingsCancel = translate('kol-table-settings-cancel');\n\tprivate readonly translateTableSettingsApply = translate('kol-table-settings-apply');\n\tprivate readonly translateErrorAllInvisible = translate('kol-table-settings-error-all-invisible');\n\tprivate readonly translateColumnNotHidable = translate('kol-table-settings-column-not-hidable');\n\n\t/\n\t The horizontal header cells configuration for the table.\n\t */\n\t@Prop() _horizontalHeaderCells: KoliBriTableHeaderCell[][] = [];\n\n\t@Watch('_horizontalHeaderCells')\n\thandleHeaderCellsChange(newValue: KoliBriTableHeaderCell[][]) {\n\t\tthis.headerCells = newValue.map((row) => [...row]);\n\t\tthis.editingHeaderCells = newValue.map((row) => row.map((cell) => ({ ...cell })));\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.handleHeaderCellsChange(this._horizontalHeaderCells);\n\t}\n\n\tprivate popoverRef: HTMLKolPopoverButtonWcElement \| undefined;\n\n\tprivate getPrimaryRow(): KoliBriTableHeaderCell[] {\n\t\treturn this.editingHeaderCells[this.editingHeaderCells.length - 1] ?? [];\n\t}\n\n\tprivate updatePrimaryRow(newRow: KoliBriTableHeaderCell[]): void {\n\t\tthis.editingHeaderCells = this.editingHeaderCells.map((row, index, arr) => (index === arr.length - 1 ? newRow : row));\n\t}\n\n\tprivate moveColumn(columnId: string, direction: 'up' \| 'down'): void {\n\t\tconst row = [...this.getPrimaryRow()];\n\t\tconst sourceIndex = row.findIndex((col) => col.key === columnId);\n\t\tif (sourceIndex === -1) return;\n\n\t\tlet targetIndex: number;\n\t\tif (direction === 'up') {\n\t\t\tif (sourceIndex === 0) return; // Cannot move first column up\n\t\t\ttargetIndex = sourceIndex - 1;\n\t\t} else {\n\t\t\tif (sourceIndex === row.length - 1) return; // Cannot move last column down\n\t\t\ttargetIndex = sourceIndex + 1;\n\t\t}\n\n\t\t// Swap with target\n\t\tconst [source] = row.splice(sourceIndex, 1);\n\t\trow.splice(targetIndex, 0, source);\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleVisibilityChange(key: string, visible: unknown): void {\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.hidable !== false ? { ...col, visible: Boolean(visible) } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleWidthChange(key: string, width: unknown): void {\n\t\t// Clearing/invalid input must not collapse the column: parseColumnWidth maps\n\t\t// non-positive or non-finite values (e.g. an emptied field => 0) back to undefined,\n\t\t// which renders as an auto-width column instead of a 0px/1px sliver.\n\t\tconst parsedWidth = parseColumnWidth(Number(width));\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? { ...col, width: parsedWidth } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleCancel() {\n\t\tthis.editingHeaderCells = this.headerCells.map((row) => [...row]);\n\t\tthis.errorMessage = null;\n\t\tvoid this.popoverRef?.hidePopover();\n\t}\n\n\tprivate handleSubmit(event: Event): void {\n\t\tevent.preventDefault();\n\n\t\tconst primaryRow = this.getPrimaryRow();\n\t\tconst hasVisibleColumn = primaryRow.some((column) => column.visible !== false);\n\n\t\tif (!hasVisibleColumn) {\n\t\t\tthis.errorMessage = this.translateErrorAllInvisible;\n\t\t\treturn;\n\t\t} else if (this.host) {\n\t\t\tthis.errorMessage = null;\n\t\t\t// Update headerCells with the edited values\n\t\t\tthis.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => ({ ...cell })));\n\n\t\t\t// Type for sanitized cells where optional properties are truly omitted\n\t\t\ttype SanitizedHeaderCell = Omit<KoliBriTableHeaderCell, 'hidable' \| 'position' \| 'resizable' \| 'sortable' \| 'visible' \| 'width'> &\n\t\t\t\tPartial<Pick<KoliBriTableHeaderCell, 'hidable' \| 'resizable' \| 'sortable' \| 'visible' \| 'width'>>;\n\n\t\t\tconst sanitizedHeaderCells = this.editingHeaderCells.map((row) =>\n\t\t\t\trow.map((column): SanitizedHeaderCell => {\n\t\t\t\t\tconst { hidable, resizable, sortable, visible, width, ...rest } = column as KoliBriTableHeaderCell & { position?: unknown };\n\t\t\t\t\tconst cell: SanitizedHeaderCell = { ...rest };\n\n\t\t\t\t\tif (visible !== undefined) cell.visible = visible;\n\t\t\t\t\tif (hidable !== undefined) cell.hidable = hidable;\n\t\t\t\t\tif (sortable !== undefined) cell.sortable = sortable;\n\t\t\t\t\tif (resizable !== undefined) cell.resizable = resizable;\n\t\t\t\t\tif (width !== undefined && width !== null) cell.width = width;\n\n\t\t\t\t\treturn cell;\n\t\t\t\t}),\n\t\t\t);\n\t\t\tdispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);\n\t\t\tvoid this.popoverRef?.hidePopover();\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst columns = this.getPrimaryRow();\n\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(el) => (this.popoverRef = el)}\n\t\t\t\tclass=\"kol-table-settings\"\n\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t_label={this.translateTableSettings}\n\t\t\t\t_popoverAlign=\"top\"\n\t\t\t\t_hideLabel\n\t\t\t>\n\t\t\t\t<div class=\"kol-table-settings__content\">\n\t\t\t\t\t<KolHeadingTag _label={this.translateTableSettings} _level={0} />\n\n\t\t\t\t\t{this.errorMessage && <KolAlertWcTag _type=\"error\" _label={this.errorMessage} _variant=\"msg\" class=\"kol-table-settings__error-message\" />}\n\n\t\t\t\t\t<form onSubmit={this.handleSubmit.bind(this)}>\n\t\t\t\t\t\t<div class=\"kol-table-settings__columns-container\">\n\t\t\t\t\t\t\t<div class=\"kol-table-settings__columns\">\n\t\t\t\t\t\t\t\t{columns.map((column, index) => (\n\t\t\t\t\t\t\t\t\t<div key={column.key} class=\"kol-table-settings__column\">\n\t\t\t\t\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t\t\t\t\t_checked={column.visible !== false}\n\t\t\t\t\t\t\t\t\t\t\t_label={`${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`}\n\t\t\t\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.hidable === false}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleVisibilityChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span class=\"kol-table-settings__column-label\">{column.label}</span>\n\t\t\t\t\t\t\t\t\t\t<KolInputNumberTag\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_value={parseColumnWidth(column.width)}\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-column-width', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.resizable === false}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleWidthChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-move-up', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'up') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false \|\| index === 0}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-up\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-down\"\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-move-down', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'down') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false \|\| index === columns.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-down\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"kol-table-settings__actions\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t_label={this.translateTableSettingsCancel}\n\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t_on={{ onClick: () => this.handleCancel() }}\n\t\t\t\t\t\t\t\tdata-testid=\"table-settings-cancel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolButtonWcTag _label={this.translateTableSettingsApply} _variant=\"primary\" _type=\"submit\" data-testid=\"table-settings-apply\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"table-settings.js","sourceRoot":"","sources":["../../../src/components/table-stateless/table-settings.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { KolAlertWcTag, KolButtonWcTag, KolHeadingTag, KolInputCheckboxTag, KolInputNumberTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { KoliBriTableHeaderCell } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { parseColumnWidth } from './controller';\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-table-settings-wc',\n\tshadow: false,\n})\nexport class KolTableSettings {\n\t@Element() private readonly host?: HTMLKolTableSettingsWcElement;\n\t@State() headerCells: KoliBriTableHeaderCell[][] = [];\n\t@State() editingHeaderCells: KoliBriTableHeaderCell[][] = [];\n\t@State() errorMessage: string \| null = null;\n\tprivate readonly translateTableSettings = translate('kol-table-settings');\n\tprivate readonly translateTableSettingsCancel = translate('kol-table-settings-cancel');\n\tprivate readonly translateTableSettingsApply = translate('kol-table-settings-apply');\n\tprivate readonly translateErrorAllInvisible = translate('kol-table-settings-error-all-invisible');\n\n\t/\n\t The horizontal header cells configuration for the table.\n\t */\n\t@Prop() _horizontalHeaderCells: KoliBriTableHeaderCell[][] = [];\n\n\t@Watch('_horizontalHeaderCells')\n\thandleHeaderCellsChange(newValue: KoliBriTableHeaderCell[][]) {\n\t\tthis.headerCells = newValue.map((row) => [...row]);\n\t\tthis.editingHeaderCells = newValue.map((row) => row.map((cell) => ({ ...cell })));\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.handleHeaderCellsChange(this._horizontalHeaderCells);\n\t}\n\n\tprivate popoverRef: HTMLKolPopoverButtonWcElement \| undefined;\n\n\tprivate getPrimaryRow(): KoliBriTableHeaderCell[] {\n\t\treturn this.editingHeaderCells[this.editingHeaderCells.length - 1] ?? [];\n\t}\n\n\tprivate updatePrimaryRow(newRow: KoliBriTableHeaderCell[]): void {\n\t\tthis.editingHeaderCells = this.editingHeaderCells.map((row, index, arr) => (index === arr.length - 1 ? newRow : row));\n\t}\n\n\tprivate moveColumn(columnId: string, direction: 'up' \| 'down'): void {\n\t\tconst row = [...this.getPrimaryRow()];\n\t\tconst sourceIndex = row.findIndex((col) => col.key === columnId);\n\t\tif (sourceIndex === -1) return;\n\n\t\tlet targetIndex: number;\n\t\tif (direction === 'up') {\n\t\t\tif (sourceIndex === 0) return; // Cannot move first column up\n\t\t\ttargetIndex = sourceIndex - 1;\n\t\t} else {\n\t\t\tif (sourceIndex === row.length - 1) return; // Cannot move last column down\n\t\t\ttargetIndex = sourceIndex + 1;\n\t\t}\n\n\t\t// Swap with target\n\t\tconst [source] = row.splice(sourceIndex, 1);\n\t\trow.splice(targetIndex, 0, source);\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleVisibilityChange(key: string, visible: unknown): void {\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.hidable !== false ? { ...col, visible: Boolean(visible) } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleWidthChange(key: string, width: unknown): void {\n\t\t// Clearing/invalid input must not collapse the column: parseColumnWidth maps\n\t\t// non-positive or non-finite values (e.g. an emptied field => 0) back to undefined,\n\t\t// which renders as an auto-width column instead of a 0px/1px sliver.\n\t\tconst parsedWidth = parseColumnWidth(Number(width));\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? { ...col, width: parsedWidth } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleCancel() {\n\t\tthis.editingHeaderCells = this.headerCells.map((row) => [...row]);\n\t\tthis.errorMessage = null;\n\t\tvoid this.popoverRef?.hidePopover();\n\t}\n\n\tprivate handleSubmit(event: Event): void {\n\t\tevent.preventDefault();\n\n\t\tconst primaryRow = this.getPrimaryRow();\n\t\tconst hasVisibleColumn = primaryRow.some((column) => column.visible !== false);\n\n\t\tif (!hasVisibleColumn) {\n\t\t\tthis.errorMessage = this.translateErrorAllInvisible;\n\t\t\treturn;\n\t\t} else if (this.host) {\n\t\t\tthis.errorMessage = null;\n\t\t\t// Update headerCells with the edited values\n\t\t\tthis.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => ({ ...cell })));\n\n\t\t\t// Type for sanitized cells where optional properties are truly omitted\n\t\t\ttype SanitizedHeaderCell = Omit<KoliBriTableHeaderCell, 'hidable' \| 'position' \| 'resizable' \| 'sortable' \| 'visible' \| 'width'> &\n\t\t\t\tPartial<Pick<KoliBriTableHeaderCell, 'hidable' \| 'resizable' \| 'sortable' \| 'visible' \| 'width'>>;\n\n\t\t\tconst sanitizedHeaderCells = this.editingHeaderCells.map((row) =>\n\t\t\t\trow.map((column): SanitizedHeaderCell => {\n\t\t\t\t\tconst { hidable, resizable, sortable, visible, width, ...rest } = column as KoliBriTableHeaderCell & { position?: unknown };\n\t\t\t\t\tconst cell: SanitizedHeaderCell = { ...rest };\n\n\t\t\t\t\tif (visible !== undefined) cell.visible = visible;\n\t\t\t\t\tif (hidable !== undefined) cell.hidable = hidable;\n\t\t\t\t\tif (sortable !== undefined) cell.sortable = sortable;\n\t\t\t\t\tif (resizable !== undefined) cell.resizable = resizable;\n\t\t\t\t\tif (width !== undefined && width !== null) cell.width = width;\n\n\t\t\t\t\treturn cell;\n\t\t\t\t}),\n\t\t\t);\n\t\t\tdispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);\n\t\t\tvoid this.popoverRef?.hidePopover();\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst columns = this.getPrimaryRow();\n\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(el) => (this.popoverRef = el)}\n\t\t\t\tclass=\"kol-table-settings\"\n\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t_label={this.translateTableSettings}\n\t\t\t\t_popoverAlign=\"top\"\n\t\t\t\t_hideLabel\n\t\t\t>\n\t\t\t\t<div class=\"kol-table-settings__content\">\n\t\t\t\t\t<KolHeadingTag _label={this.translateTableSettings} _level={0} />\n\n\t\t\t\t\t{this.errorMessage && <KolAlertWcTag _type=\"error\" _label={this.errorMessage} _variant=\"msg\" class=\"kol-table-settings__error-message\" />}\n\n\t\t\t\t\t<form onSubmit={this.handleSubmit.bind(this)}>\n\t\t\t\t\t\t<div class=\"kol-table-settings__columns\">\n\t\t\t\t\t\t\t{columns.map((column, index) => (\n\t\t\t\t\t\t\t\t<div key={column.key} class=\"kol-table-settings__column\">\n\t\t\t\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t\t\t\t_checked={column.visible !== false}\n\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\tcolumn.hidable\n\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-column-hidable', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-column-not-hidable', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_disabled={column.hidable === false}\n\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleVisibilityChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span class=\"kol-table-settings__column-label\">{column.label}</span>\n\t\t\t\t\t\t\t\t\t<KolInputNumberTag\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_value={parseColumnWidth(column.width)}\n\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-column-width', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t\t\t\t\t_disabled={column.resizable === false}\n\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleWidthChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-up\"\n\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\tcolumn.sortable === false \|\| index === 0\n\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-move-up', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'up') }}\n\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false \|\| index === 0}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-up\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-down\"\n\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\tcolumn.sortable === false \|\| index === columns.length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-move-down', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'down') }}\n\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false \|\| index === columns.length - 1}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-down\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"kol-table-settings__actions\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t_label={this.translateTableSettingsCancel}\n\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t_on={{ onClick: () => this.handleCancel() }}\n\t\t\t\t\t\t\t\tdata-testid=\"table-settings-cancel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolButtonWcTag _label={this.translateTableSettingsApply} _variant=\"primary\" _type=\"submit\" data-testid=\"table-settings-apply\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/tabs/shadow.js CHANGED Viewed

@@ -211,9 +211,9 @@ export class KolTabs {
             }, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
     }
     render() {
-        return (h("div", { key: '0122ff1b3c1cd55bcc3f2f692d1f0e691458dedc', ref: (el) => {
+        return (h("div", { key: 'b91b05099aae90e0b3fb222c47df077111650385', ref: (el) => {
                 this.tabPanelsElement = el;
-            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h("div", { key: '67d6ed1262de72a3954176170c8359d7658af5c8', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
+            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h("div", { key: '0002ef2aa171bf02b2684b4094166d961354360e', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
     }
     validateAlign(value) {
         validateAlign(this, value);

package/dist/collection/components/tabs/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  src: url("kolicons.eot?t=1783501930981#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783501930981") format("woff2"), url("kolicons.woff?t=1783501930981") format("woff"), url("kolicons.ttf?t=1783501930981") format("truetype"), url("kolicons.svg?t=1783501930981#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/textarea/controller.js CHANGED Viewed

@@ -6,12 +6,6 @@ import { InputIconController } from "../@deprecated/input/controller-icon";
 export class TextareaController extends InputIconController {
     constructor(component, name, host) {
         super(component, name, host);
-        this.afterSyncCharCounter = () => {
-            if (typeof this.component._value === 'string') {
-                this.component.state._currentLength = this.component._value.length;
-                this.updateCurrentLengthDebounced(this.component._value.length);
-            }
-        };
         this.component = component;
     }
     validateHasCounter(value) {
@@ -21,9 +15,7 @@ export class TextareaController extends InputIconController {
         validateMaxLengthBehavior(this.component, value);
     }
     validateMaxLength(value) {
-        validateMaxLength(this.component, value, {
-            hooks: { afterPatch: this.afterSyncCharCounter },
-        });
+        validateMaxLength(this.component, value);
     }
     validatePlaceholder(value) {
         validatePlaceholder(this.component, value);
@@ -44,11 +36,7 @@ export class TextareaController extends InputIconController {
         validateSpellCheck(this.component, value);
     }
     validateValue(value) {
-        watchString(this.component, '_value', value, {
-            hooks: {
-                afterPatch: this.afterSyncCharCounter,
-            },
-        });
+        watchString(this.component, '_value', value);
         this.setFormAssociatedValue(this.component._value);
     }
     componentWillLoad() {

package/dist/collection/components/textarea/controller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../src/components/textarea/controller.ts"],"names":[],"mappings":"AAYA,OAAO,EACN,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,kBAAkB,EAClB,WAAW,GACX,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAI3E,MAAM,OAAO,kBAAmB,SAAQ,mBAAmB;IAG1D,YAAmB,SAAoD,EAAE,IAAY,EAAE,IAAkB;QACxG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;~~QAItB~~,~~yBAAoB,GAAG,GAAG,EAAE;YACnC,~~IAAI,~~OAAO,IAAI,~~CAAC,SAAS,~~CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;gBAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,~~GAAG,~~IAAI,CAAC,~~SAAS,CAAC~~,MAAM,CAAC,MAAM,CAAC~~;~~gBACnE,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACjE,CAAC;QACF,CAAC,CAAC;QARD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;~~IAC5B,CAAC;~~IASM~~,kBAAkB,CAAC,KAA0B;QACnD,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAEM,yBAAyB,CAAC,KAAiC;QACjE,yBAAyB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAEM,iBAAiB,CAAC,KAAc;QACtC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,~~EAAE;YACxC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,~~CAAC,~~oBAAoB,EAAE;SAChD,~~CAAC~~,CAAC~~;~~IACJ~~,CAAC;IAEM,mBAAmB,CAAC,KAA2B;QACrD,mBAAmB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC;IAEM,gBAAgB,CAAC,KAAwB;QAC/C,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;IAEM,cAAc,CAAC,KAA8B;QACnD,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC/C,CAAC;IAEM,gBAAgB,CAAC,KAAwB;QAC/C,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;IAEM,YAAY,CAAC,KAAoB;QACvC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAEM,kBAAkB,CAAC,KAA0B;QACnD,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAEM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,~~EAAE;YAC5C,KAAK,EAAE;gBACN,UAAU,EAAE,IAAI,~~CAAC,~~oBAAoB;aACrC;SACD,~~CAAC~~,CAAC~~;~~QACH~~,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC;IAEM,iBAAiB;QACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC;CACD","sourcesContent":["import type {\n\tHasCounterPropType,\n\tMaxLengthBehaviorPropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSpellCheckPropType,\n\tTextareaProps,\n\tTextareaResizePropType,\n\tTextareaWatches,\n} from '../../schema';\nimport {\n\tvalidateHasCounter,\n\tvalidateMaxLength,\n\tvalidateMaxLengthBehavior,\n\tvalidatePlaceholder,\n\tvalidateReadOnly,\n\tvalidateRequired,\n\tvalidateResizeTextarea,\n\tvalidateRows,\n\tvalidateSpellCheck,\n\twatchString,\n} from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class TextareaController extends InputIconController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string') {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t\tthis.updateCurrentLengthDebounced(this.component._value.length);\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tvalidateHasCounter(this.component, value);\n\t}\n\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tvalidateMaxLengthBehavior(this.component, value);\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\tvalidateMaxLength(this.component, value~~, {\n\t\t\thooks: { afterPatch: this.afterSyncCharCounter },\n\t\t}~~);\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tvalidateResizeTextarea(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tvalidateSpellCheck(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value~~, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t}~~);\n\t\tthis.setFormAssociatedValue(this.component._value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLengthBehavior(this.component._maxLengthBehavior);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateSpellCheck(this.component._spellCheck);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n"]}
1	+ {"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../src/components/textarea/controller.ts"],"names":[],"mappings":"AAYA,OAAO,EACN,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,kBAAkB,EAClB,WAAW,GACX,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAI3E,MAAM,OAAO,kBAAmB,SAAQ,mBAAmB;IAG1D,YAAmB,SAAoD,EAAE,IAAY,EAAE,IAAkB;QACxG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5B,CAAC;IAEM,kBAAkB,CAAC,KAA0B;QACnD,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAEM,yBAAyB,CAAC,KAAiC;QACjE,yBAAyB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAEM,iBAAiB,CAAC,KAAc;QACtC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,mBAAmB,CAAC,KAA2B;QACrD,mBAAmB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC;IAEM,gBAAgB,CAAC,KAAwB;QAC/C,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;IAEM,cAAc,CAAC,KAA8B;QACnD,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC/C,CAAC;IAEM,gBAAgB,CAAC,KAAwB;QAC/C,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;IAEM,YAAY,CAAC,KAAoB;QACvC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAEM,kBAAkB,CAAC,KAA0B;QACnD,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAEM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC7C,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC;IAEM,iBAAiB;QACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC;CACD","sourcesContent":["import type {\n\tHasCounterPropType,\n\tMaxLengthBehaviorPropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSpellCheckPropType,\n\tTextareaProps,\n\tTextareaResizePropType,\n\tTextareaWatches,\n} from '../../schema';\nimport {\n\tvalidateHasCounter,\n\tvalidateMaxLength,\n\tvalidateMaxLengthBehavior,\n\tvalidatePlaceholder,\n\tvalidateReadOnly,\n\tvalidateRequired,\n\tvalidateResizeTextarea,\n\tvalidateRows,\n\tvalidateSpellCheck,\n\twatchString,\n} from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class TextareaController extends InputIconController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tvalidateHasCounter(this.component, value);\n\t}\n\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tvalidateMaxLengthBehavior(this.component, value);\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\tvalidateMaxLength(this.component, value);\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tvalidateResizeTextarea(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tvalidateSpellCheck(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component._value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLengthBehavior(this.component._maxLengthBehavior);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateSpellCheck(this.component._spellCheck);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n"]}

package/dist/collection/components/textarea/shadow.js CHANGED Viewed

@@ -7,6 +7,7 @@ import clsx from "../../utils/clsx";
 import KolFormFieldStateWrapperFc from "../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper";
 import KolInputContainerStateWrapperFc from "../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper";
 import KolTextAreaStateWrapperFc from "../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper";
+import { CounterDomUpdater } from "../../utils/counter-dom-updater";
 import { createRelatedUniqueId, createUniqueId } from "../../utils/dev.utils";
 import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
 import { TextareaController } from "./controller";
@@ -35,28 +36,35 @@ export class KolTextarea {
             }),
             tooltipAlign: this._tooltipAlign,
             alert: this.showAsAlert(),
+            counterRefs: {
+                visualRef: this.counterUpdater.setVisualRef,
+                ariaRef: this.counterUpdater.setAriaRef,
+            },
         };
     }
     getTextAreaProps() {
-        const ariaDescribedBy = typeof this.state._maxLength === 'number' ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined;
+        const ariaDescribedBy = typeof this.state._maxLength === 'number' && !this.controller.hasCounter() ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined;
         return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state, style: {
                 resize: this.state._resize,
-            }, ariaDescribedBy }, this.controller.onFacade), { onInput: this.onInput, onFocus: (event) => {
+            }, ariaDescribedBy }, this.controller.onFacade), { onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
+                var _a, _b, _c;
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
+                this.counterUpdater.retriggerAria((_b = (_a = this._value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, this.state._maxLength, (_c = this.state._maxLengthBehavior) !== null && _c !== void 0 ? _c : 'hard');
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
             } });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '24e29e18b88fe756f4cb2bd44044c95194042fad' }, this.getFormFieldProps()), h(KolInputContainerStateWrapperFc, { key: '510945913640229aeff1d513917f74c3f69ccb78', state: this.state }, h(KolTextAreaStateWrapperFc, Object.assign({ key: '2a712ce4f0865675d9ca762f1bf43be486952810' }, this.getTextAreaProps())))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '46af87ef7cee2cd76f7af423d760d304a686b7f7' }, this.getFormFieldProps()), h(KolInputContainerStateWrapperFc, { key: '806a040a256301915dcc4a576414f0f51aa60bab', state: this.state }, h(KolTextAreaStateWrapperFc, Object.assign({ key: '1a045f363b665626c8eb587fb1372f4ff02feb92' }, this.getTextAreaProps())))));
     }
     validateAriaDetails(value) {
         this.controller.validateAriaDetails(value);
     }
     constructor() {
         this.ctaRef = createCtaRef();
+        this.counterUpdater = new CounterDomUpdater();
         this._adjustHeight = false;
         this._disabled = false;
         this._hideMsg = false;
@@ -71,8 +79,6 @@ export class KolTextarea {
         this._touched = false;
         this.state = {
             _adjustHeight: false,
-            _currentLength: 0,
-            _currentLengthDebounced: 0,
             _hasValue: false,
             _hideMsg: false,
             _id: createUniqueId('textarea'),
@@ -80,6 +86,11 @@ export class KolTextarea {
             _resize: 'vertical',
         };
         this.inputHasFocus = false;
+        this.onKeyDown = (event) => {
+            var _a, _b, _c;
+            this.controller.onFacade.onKeyDown(event);
+            this.counterUpdater.handleKeyDown(event, (_b = (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0, this.state._maxLength, (_c = this.state._maxLengthBehavior) !== null && _c !== void 0 ? _c : 'hard');
+        };
         this.onInput = (event) => {
             if (this.ctaRef.el instanceof HTMLTextAreaElement) {
                 this._value = this.ctaRef.el.value;
@@ -122,7 +133,9 @@ export class KolTextarea {
         this.controller.validateLabel(value);
     }
     validateMaxLength(value) {
+        var _a, _b, _c;
         this.controller.validateMaxLength(value);
+        this.counterUpdater.updateImmediate((_b = (_a = this._value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, this.state._maxLength, (_c = this.state._maxLengthBehavior) !== null && _c !== void 0 ? _c : 'hard');
     }
     validateMaxLengthBehavior(value) {
         this.controller.validateMaxLengthBehavior(value);
@@ -164,12 +177,18 @@ export class KolTextarea {
         this.controller.validateTouched(value);
     }
     validateValue(value) {
+        var _a, _b;
         this.controller.validateValue(value);
+        this.counterUpdater.update((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0, this.state._maxLength, (_b = this.state._maxLengthBehavior) !== null && _b !== void 0 ? _b : 'hard');
     }
     validateVariant(value) {
         this.controller.validateVariant(value);
     }
     componentDidLoad() {
+        var _a, _b, _c;
+        if (this.controller.hasCounter() || this.controller.hasSoftCharacterLimit()) {
+            this.counterUpdater.updateImmediate((_b = (_a = this._value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, this.state._maxLength, (_c = this.state._maxLengthBehavior) !== null && _c !== void 0 ? _c : 'hard');
+        }
         setTimeout(() => {
             var _a;
             if (this._adjustHeight === true && this.ctaRef.el) {
@@ -180,6 +199,9 @@ export class KolTextarea {
             }
         });
     }
+    disconnectedCallback() {
+        this.counterUpdater.destroy();
+    }
     componentWillLoad() {
         this.validateAriaDetails(this._ariaDetails);
         this._touched = this._touched === true;
@@ -817,7 +839,7 @@ export class KolTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",

package/dist/collection/components/textarea/shadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/textarea/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport type {\n\tAdjustHeightPropType,\n\tAriaDetailsPropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { TextareaController } from './controller';\n\n/*\n https://stackoverflow.com/questions/17772260/textarea-auto-height\n /\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/\n The Textarea component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n \n @slot - The label of the input field.\n /\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ClickableElement, FocusableElement, TextareaAPI {\n\t@Element() protected readonly host?: HTMLKolTextareaElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLTextAreaElement>();\n\n\t/\n\t Returns the current value.\n\t /\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string \| undefined> {\n\t\treturn this.ctaRef.el?.value;\n\t}\n\n\t/\n\t Sets focus on the internal element.\n\t /\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/\n\t Clicks the primary interactive element inside this component.\n\t /\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() \|\| this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/\n\t Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t /\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/\n\t References an external element by ID that provides accessible details for this textarea.\n\t /\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\n\n\t@Watch('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the hint text.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines the maximum number of input characters.\n\t /\n\t@Prop() public _maxLength?: number;\n\n\t/\n\t Shows a character counter for the input element.\n\t /\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/\n\t Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t /\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/\n\t Defines the properties for a message rendered as Alert component.\n\t /\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: NamePropType;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Defines the placeholder for input field. To be shown when there's no value.\n\t /\n\t@Prop() public _placeholder?: string;\n\n\t/\n\t Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/\n\t Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t /\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/\n\t Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _required?: boolean = false;\n\n\t/\n\t Maximum number of visible rows of the element.\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/\n\t Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t /\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/\n\t Defines whether the browser should check the spelling and grammar.\n\t /\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Defines the value of the element.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t /\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_currentLengthDebounced: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('textarea'),\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ctaRef.el / SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ctaRef.el) ? this.state._rows : increaseTextareaHeight(this.ctaRef.el);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ctaRef.el instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.ctaRef.el.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ctaRef.el);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"]}
1	+ {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/textarea/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport type {\n\tAdjustHeightPropType,\n\tAriaDetailsPropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { CounterDomUpdater } from '../../utils/counter-dom-updater';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { TextareaController } from './controller';\n\n/*\n https://stackoverflow.com/questions/17772260/textarea-auto-height\n /\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/\n The Textarea component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n \n @slot - The label of the input field.\n /\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ClickableElement, FocusableElement, TextareaAPI {\n\t@Element() protected readonly host?: HTMLKolTextareaElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLTextAreaElement>();\n\tprivate readonly counterUpdater = new CounterDomUpdater();\n\n\t/\n\t Returns the current value.\n\t /\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string \| undefined> {\n\t\treturn this.ctaRef.el?.value;\n\t}\n\n\t/\n\t Sets focus on the internal element.\n\t /\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/\n\t Clicks the primary interactive element inside this component.\n\t /\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() \|\| this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\tcounterRefs: {\n\t\t\t\tvisualRef: this.counterUpdater.setVisualRef,\n\t\t\t\tariaRef: this.counterUpdater.setAriaRef,\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy =\n\t\t\ttypeof this.state._maxLength === 'number' && !this.controller.hasCounter() ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined; // When a character limit is defined but no counter is shown, we provide an additional hint referenced by aria-describedby. With a counter, its spans already convey the limit.\n\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\tthis.counterUpdater.retriggerAria(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t\t\t},\n\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/\n\t Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t /\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/\n\t References an external element by ID that provides accessible details for this textarea.\n\t /\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\n\n\t@Watch('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the hint text.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines the maximum number of input characters.\n\t /\n\t@Prop() public _maxLength?: number;\n\n\t/\n\t Shows a character counter for the input element.\n\t /\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/\n\t Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t /\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/\n\t Defines the properties for a message rendered as Alert component.\n\t /\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: NamePropType;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Defines the placeholder for input field. To be shown when there's no value.\n\t /\n\t@Prop() public _placeholder?: string;\n\n\t/\n\t Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/\n\t Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t /\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/\n\t Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _required?: boolean = false;\n\n\t/\n\t Maximum number of visible rows of the element.\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/\n\t Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t /\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/\n\t Defines whether the browser should check the spelling and grammar.\n\t /\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Defines the value of the element.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t /\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('textarea'),\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t\tthis.counterUpdater.updateImmediate(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.counterUpdater.update(value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tif (this.controller.hasCounter() \|\| this.controller.hasSoftCharacterLimit()) {\n\t\t\tthis.counterUpdater.updateImmediate(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ctaRef.el / SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ctaRef.el) ? this.state._rows : increaseTextareaHeight(this.ctaRef.el);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.counterUpdater.destroy();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\t\tthis.counterUpdater.handleKeyDown(event, this.ctaRef.el?.value.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ctaRef.el instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.ctaRef.el.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ctaRef.el);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"]}

package/dist/collection/components/textarea/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  src: url("kolicons.eot?t=1783501930981#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783501930981") format("woff2"), url("kolicons.woff?t=1783501930981") format("woff"), url("kolicons.ttf?t=1783501930981") format("truetype"), url("kolicons.svg?t=1783501930981#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -451,7 +452,6 @@
   }
   .kol-input-container__adornment .kol-icon {
     display: grid;
-    min-height: var(--a11y-min-size);
     place-items: center;
   }
   .kol-textarea {

package/dist/collection/components/toaster/shadow.js CHANGED Viewed

@@ -76,7 +76,7 @@ export class KolToastContainer {
         }
     }
     render() {
-        return (h(Host, { key: '41ab46ff3582bcf5059887ddff7b4e74efe22aed', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (h(KolButtonTag, { key: '67638c26d8d0c8a9b1255069aec40f90ab32ff0e', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
+        return (h(Host, { key: 'cf0e0e8cf3bc1561e28130d2deb7249d0c8f03b3', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (h(KolButtonTag, { key: '7028da8c47841524c340a67e3eee6a55c0965b7d', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },

package/dist/collection/components/toaster/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  src: url("kolicons.eot?t=1783501930981#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783501930981") format("woff2"), url("kolicons.woff?t=1783501930981") format("woff"), url("kolicons.ttf?t=1783501930981") format("truetype"), url("kolicons.svg?t=1783501930981#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;

package/dist/collection/components/toolbar/shadow.js CHANGED Viewed

@@ -3,6 +3,7 @@
  */
 import { __rest } from "tslib";
 import { h } from "@stencil/core";
+import { getFeatureFlag } from "adopted-style-sheets";
 import { KolButtonWcTag, KolLinkWcTag } from "../../core/component-names";
 import { validateLabel, validateToolbarItems } from "../../schema";
 import { KeyboardKey } from "../../schema/enums";
@@ -18,13 +19,15 @@ export class KolToolbar {
         this.currentIndex = 0;
         this.indexToElement = new Map();
         this.renderItem = (raw, index) => {
+            var _a;
             const element = this.normalizeItem(raw);
             const tabIndex = index === this.currentIndex && !(element === null || element === void 0 ? void 0 : element._disabled) ? 0 : -1;
             const props = {
                 key: index,
-                class: 'button normal kol-toolbar__item',
+                class: 'kol-toolbar__item',
                 _tabIndex: tabIndex,
-                _variant: 'normal',
+                _inline: false,
+                _variant: (_a = getFeatureFlag('buttonVariantDefault', this.host)) !== null && _a !== void 0 ? _a : 'normal',
             };
             const catchRef = (el) => {
                 if (el)
@@ -50,7 +53,7 @@ export class KolToolbar {
         return Object.assign(Object.assign({}, rest), { _icons, _disabled });
     }
     render() {
-        return (h("div", { key: '620bd0c219c8e3425d7fc04be129c7ef9e993a84', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
+        return (h("div", { key: '292041450d7aaed96bab6b65baa3eec13cad1452', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
     }
     validateLabel(value) {
         validateLabel(this, value);