@cocoar/ui-components 0.1.0-beta.80 → 0.1.0-beta.82

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 (4) hide show
  1. package/fesm2022/cocoar-ui-components.mjs +95 -82
  2. package/fesm2022/cocoar-ui-components.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/cocoar-ui-components.d.ts +9 -6
package/fesm2022/cocoar-ui-components.mjs CHANGED
@@ -8,7 +8,7 @@ import { HttpClient } from '@angular/common/http';
8
8
  import { Maskito } from '@maskito/core';
9
9
  import { maskitoNumberOptionsGenerator, maskitoDateOptionsGenerator } from '@maskito/kit';
10
10
  import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
11
- import { CoarOverlayService, Overlay } from '@cocoar/ui-overlay';
11
+ import { createOverlayBuilder } from '@cocoar/ui-overlay';
12
12
  import * as i1 from '@angular/common';
13
13
  import { CommonModule, NgComponentOutlet } from '@angular/common';
14
14
  import Prism from 'prismjs';
@@ -566,7 +566,8 @@ class CoarTextInputComponent extends CoarControlValueAccessor {
566
566
  }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
567
567
  hasError = computed(() => this.error().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
568
568
  displayMessage = computed(() => this.error() || this.hint(), ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
569
- inputId = computed(() => this.id() || `coar-text-input-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
569
+ autoId = `coar-text-input-${cryptoRandomId$3()}`;
570
+ inputId = computed(() => this.id() || this.autoId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
570
571
  messageId = computed(() => `${this.inputId()}-message`, ...(ngDevMode ? [{ debugName: "messageId" }] : []));
571
572
  writeValue(value) {
572
573
  this.value.set(value ?? '');
@@ -598,7 +599,7 @@ class CoarTextInputComponent extends CoarControlValueAccessor {
598
599
  this.inputRef()?.nativeElement.focus();
599
600
  }
600
601
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
601
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTextInputComponent, isStandalone: true, selector: "coar-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-text-input--xs": "size() === \"xs\"", "class.coar-text-input--sm": "size() === \"sm\"", "class.coar-text-input--md": "size() === \"md\"", "class.coar-text-input--lg": "size() === \"lg\"", "class.coar-text-input--multiline": "isMultiline()" } }, providers: [coarProvideValueAccessor(() => CoarTextInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-text-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-text-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-text-input-container\"\n [class.coar-text-input-focused]=\"isFocused()\"\n [class.coar-text-input-disabled]=\"isDisabled()\"\n [class.coar-text-input-readonly]=\"readonly()\"\n [class.coar-text-input-error]=\"hasError()\"\n >\n <!-- Prefix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n }\n\n <!-- Input Element (single-line) -->\n @if (!isMultiline()) {\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-text-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n }\n\n <!-- Textarea (multiline) -->\n @if (isMultiline()) {\n <textarea\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [rows]=\"rows()\"\n class=\"coar-text-input-field coar-text-input-textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n }\n\n <!-- Suffix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n }\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-text-input-clear\"\n [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n }\n\n <!-- Suffix Actions (always visible, e.g., action buttons) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix-actions\">\n <ng-content select=\"[suffixAction]\"></ng-content>\n </span>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 4px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:60px}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix{display:flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{display:none;padding-right:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:11px}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:12px}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:16px}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus{outline:none}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
602
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTextInputComponent, isStandalone: true, selector: "coar-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-text-input--xs": "size() === \"xs\"", "class.coar-text-input--sm": "size() === \"sm\"", "class.coar-text-input--md": "size() === \"md\"", "class.coar-text-input--lg": "size() === \"lg\"", "class.coar-text-input--multiline": "isMultiline()" } }, providers: [coarProvideValueAccessor(() => CoarTextInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-text-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-text-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-text-input-container\"\n [class.coar-text-input-focused]=\"isFocused()\"\n [class.coar-text-input-disabled]=\"isDisabled()\"\n [class.coar-text-input-readonly]=\"readonly()\"\n [class.coar-text-input-error]=\"hasError()\"\n >\n <!-- Prefix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n }\n\n <!-- Input Element (single-line) -->\n @if (!isMultiline()) {\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-text-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n }\n\n <!-- Textarea (multiline) -->\n @if (isMultiline()) {\n <textarea\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [rows]=\"rows()\"\n class=\"coar-text-input-field coar-text-input-textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n }\n\n <!-- Suffix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n }\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-text-input-clear\"\n [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n }\n\n <!-- Suffix Actions (always visible, e.g., action buttons) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix-actions\">\n <ng-content select=\"[suffixAction]\"></ng-content>\n </span>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:calc(var(--coar-component-md-height) + var(--coar-component-md-height))}:host(.coar-text-input--xs) .coar-text-input-textarea{min-height:calc(var(--coar-component-xs-height) + var(--coar-component-xs-height))}:host(.coar-text-input--sm) .coar-text-input-textarea{min-height:calc(var(--coar-component-sm-height) + var(--coar-component-sm-height))}:host(.coar-text-input--lg) .coar-text-input-textarea{min-height:calc(var(--coar-component-lg-height) + var(--coar-component-lg-height))}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-prefix:empty{padding-left:0;flex-basis:0}.coar-text-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{padding-right:0;flex-basis:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
602
603
  }
603
604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, decorators: [{
604
605
  type: Component,
@@ -608,8 +609,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
608
609
  '[class.coar-text-input--md]': 'size() === "md"',
609
610
  '[class.coar-text-input--lg]': 'size() === "lg"',
610
611
  '[class.coar-text-input--multiline]': 'isMultiline()',
611
- }, template: "<div class=\"coar-text-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-text-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-text-input-container\"\n [class.coar-text-input-focused]=\"isFocused()\"\n [class.coar-text-input-disabled]=\"isDisabled()\"\n [class.coar-text-input-readonly]=\"readonly()\"\n [class.coar-text-input-error]=\"hasError()\"\n >\n <!-- Prefix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n }\n\n <!-- Input Element (single-line) -->\n @if (!isMultiline()) {\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-text-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n }\n\n <!-- Textarea (multiline) -->\n @if (isMultiline()) {\n <textarea\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [rows]=\"rows()\"\n class=\"coar-text-input-field coar-text-input-textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n }\n\n <!-- Suffix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n }\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-text-input-clear\"\n [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n }\n\n <!-- Suffix Actions (always visible, e.g., action buttons) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix-actions\">\n <ng-content select=\"[suffixAction]\"></ng-content>\n </span>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 4px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:60px}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix{display:flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{display:none;padding-right:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:11px}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:12px}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:16px}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus{outline:none}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
612
+ }, template: "<div class=\"coar-text-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-text-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-text-input-container\"\n [class.coar-text-input-focused]=\"isFocused()\"\n [class.coar-text-input-disabled]=\"isDisabled()\"\n [class.coar-text-input-readonly]=\"readonly()\"\n [class.coar-text-input-error]=\"hasError()\"\n >\n <!-- Prefix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n }\n\n <!-- Input Element (single-line) -->\n @if (!isMultiline()) {\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-text-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n }\n\n <!-- Textarea (multiline) -->\n @if (isMultiline()) {\n <textarea\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [rows]=\"rows()\"\n class=\"coar-text-input-field coar-text-input-textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n }\n\n <!-- Suffix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n }\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-text-input-clear\"\n [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n }\n\n <!-- Suffix Actions (always visible, e.g., action buttons) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix-actions\">\n <ng-content select=\"[suffixAction]\"></ng-content>\n </span>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:calc(var(--coar-component-md-height) + var(--coar-component-md-height))}:host(.coar-text-input--xs) .coar-text-input-textarea{min-height:calc(var(--coar-component-xs-height) + var(--coar-component-xs-height))}:host(.coar-text-input--sm) .coar-text-input-textarea{min-height:calc(var(--coar-component-sm-height) + var(--coar-component-sm-height))}:host(.coar-text-input--lg) .coar-text-input-textarea{min-height:calc(var(--coar-component-lg-height) + var(--coar-component-lg-height))}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-prefix:empty{padding-left:0;flex-basis:0}.coar-text-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{padding-right:0;flex-basis:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
612
613
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
614
+ function cryptoRandomId$3() {
615
+ if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
616
+ return crypto.randomUUID();
617
+ }
618
+ return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
619
+ }
613
620
 
614
621
  /**
615
622
  * Injection token for the locale service.
@@ -865,7 +872,8 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
865
872
  }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
866
873
  hasError = computed(() => this.error().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
867
874
  displayMessage = computed(() => this.error() || this.hint(), ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
868
- inputId = computed(() => this.id() || `coar-number-input-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
875
+ autoId = `coar-number-input-${cryptoRandomId$2()}`;
876
+ inputId = computed(() => this.id() || this.autoId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
869
877
  messageId = computed(() => `${this.inputId()}-message`, ...(ngDevMode ? [{ debugName: "messageId" }] : []));
870
878
  iconSize = computed(() => {
871
879
  const sizeMap = {
@@ -1098,7 +1106,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
1098
1106
  }
1099
1107
  }
1100
1108
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1101
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarNumberInputComponent, isStandalone: true, selector: "coar-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, stepperButtons: { classPropertyName: "stepperButtons", publicName: "stepperButtons", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { listeners: { "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" }, properties: { "class.coar-number-input--xs": "size() === \"xs\"", "class.coar-number-input--sm": "size() === \"sm\"", "class.coar-number-input--md": "size() === \"md\"", "class.coar-number-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarNumberInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-number-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label\n [for]=\"inputId()\"\n class=\"coar-number-input-label\"\n [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n (mousedown)=\"onDragStart($event)\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"coar-number-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-number-input-container\"\n [class.coar-number-input-focused]=\"isFocused()\"\n [class.coar-number-input-disabled]=\"isDisabled()\"\n [class.coar-number-input-readonly]=\"readonly()\"\n [class.coar-number-input-error]=\"hasError()\"\n [class.coar-number-input-dragging]=\"isDragging()\"\n >\n <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-number-input-clear\"\n [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n\n <!-- Prefix -->\n <span class=\"coar-number-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n class=\"coar-number-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Suffix -->\n <span class=\"coar-number-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n\n <!-- Increment/Decrement Buttons -->\n @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n <div class=\"coar-number-input-buttons\">\n @if (showDecrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--decrement\"\n [disabled]=\"!canDecrement()\"\n aria-label=\"Decrease value\"\n (click)=\"decrement()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n @if (showIncrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--increment\"\n [disabled]=\"!canIncrement()\"\n aria-label=\"Increase value\"\n (click)=\"increment()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:11px}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:12px}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:16px}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1109
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarNumberInputComponent, isStandalone: true, selector: "coar-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, stepperButtons: { classPropertyName: "stepperButtons", publicName: "stepperButtons", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { listeners: { "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" }, properties: { "class.coar-number-input--xs": "size() === \"xs\"", "class.coar-number-input--sm": "size() === \"sm\"", "class.coar-number-input--md": "size() === \"md\"", "class.coar-number-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarNumberInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-number-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label\n [for]=\"inputId()\"\n class=\"coar-number-input-label\"\n [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n (mousedown)=\"onDragStart($event)\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"coar-number-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-number-input-container\"\n [class.coar-number-input-focused]=\"isFocused()\"\n [class.coar-number-input-disabled]=\"isDisabled()\"\n [class.coar-number-input-readonly]=\"readonly()\"\n [class.coar-number-input-error]=\"hasError()\"\n [class.coar-number-input-dragging]=\"isDragging()\"\n >\n <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-number-input-clear\"\n [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n\n <!-- Prefix -->\n <span class=\"coar-number-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n class=\"coar-number-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Suffix -->\n <span class=\"coar-number-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n\n <!-- Increment/Decrement Buttons -->\n @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n <div class=\"coar-number-input-buttons\">\n @if (showDecrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--decrement\"\n [disabled]=\"!canDecrement()\"\n aria-label=\"Decrease value\"\n (click)=\"decrement()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n @if (showIncrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--increment\"\n [disabled]=\"!canIncrement()\"\n aria-label=\"Increase value\"\n (click)=\"increment()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1102
1110
  }
1103
1111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, decorators: [{
1104
1112
  type: Component,
@@ -1107,7 +1115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
1107
1115
  '[class.coar-number-input--sm]': 'size() === "sm"',
1108
1116
  '[class.coar-number-input--md]': 'size() === "md"',
1109
1117
  '[class.coar-number-input--lg]': 'size() === "lg"',
1110
- }, template: "<div class=\"coar-number-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label\n [for]=\"inputId()\"\n class=\"coar-number-input-label\"\n [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n (mousedown)=\"onDragStart($event)\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"coar-number-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-number-input-container\"\n [class.coar-number-input-focused]=\"isFocused()\"\n [class.coar-number-input-disabled]=\"isDisabled()\"\n [class.coar-number-input-readonly]=\"readonly()\"\n [class.coar-number-input-error]=\"hasError()\"\n [class.coar-number-input-dragging]=\"isDragging()\"\n >\n <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-number-input-clear\"\n [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n\n <!-- Prefix -->\n <span class=\"coar-number-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n class=\"coar-number-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Suffix -->\n <span class=\"coar-number-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n\n <!-- Increment/Decrement Buttons -->\n @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n <div class=\"coar-number-input-buttons\">\n @if (showDecrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--decrement\"\n [disabled]=\"!canDecrement()\"\n aria-label=\"Decrease value\"\n (click)=\"decrement()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n @if (showIncrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--increment\"\n [disabled]=\"!canIncrement()\"\n aria-label=\"Increase value\"\n (click)=\"increment()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:11px}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:12px}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:16px}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
1118
+ }, template: "<div class=\"coar-number-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label\n [for]=\"inputId()\"\n class=\"coar-number-input-label\"\n [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n (mousedown)=\"onDragStart($event)\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"coar-number-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-number-input-container\"\n [class.coar-number-input-focused]=\"isFocused()\"\n [class.coar-number-input-disabled]=\"isDisabled()\"\n [class.coar-number-input-readonly]=\"readonly()\"\n [class.coar-number-input-error]=\"hasError()\"\n [class.coar-number-input-dragging]=\"isDragging()\"\n >\n <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-number-input-clear\"\n [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n\n <!-- Prefix -->\n <span class=\"coar-number-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n class=\"coar-number-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Suffix -->\n <span class=\"coar-number-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n\n <!-- Increment/Decrement Buttons -->\n @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n <div class=\"coar-number-input-buttons\">\n @if (showDecrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--decrement\"\n [disabled]=\"!canDecrement()\"\n aria-label=\"Decrease value\"\n (click)=\"decrement()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n @if (showIncrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--increment\"\n [disabled]=\"!canIncrement()\"\n aria-label=\"Increase value\"\n (click)=\"increment()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
1111
1119
  }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], stepperButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperButtons", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], onDragMove: [{
1112
1120
  type: HostListener,
1113
1121
  args: ['document:mousemove', ['$event']]
@@ -1115,6 +1123,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
1115
1123
  type: HostListener,
1116
1124
  args: ['document:mouseup']
1117
1125
  }] } });
1126
+ function cryptoRandomId$2() {
1127
+ if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
1128
+ return crypto.randomUUID();
1129
+ }
1130
+ return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
1131
+ }
1118
1132
 
1119
1133
  class CoarPasswordInputComponent extends CoarControlValueAccessor {
1120
1134
  /** Label text displayed above the input */
@@ -1169,7 +1183,8 @@ class CoarPasswordInputComponent extends CoarControlValueAccessor {
1169
1183
  }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
1170
1184
  hasError = computed(() => this.error().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
1171
1185
  displayMessage = computed(() => this.error() || this.hint(), ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
1172
- inputId = computed(() => this.id() || `coar-password-input-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
1186
+ autoId = `coar-password-input-${cryptoRandomId$1()}`;
1187
+ inputId = computed(() => this.id() || this.autoId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
1173
1188
  messageId = computed(() => `${this.inputId()}-message`, ...(ngDevMode ? [{ debugName: "messageId" }] : []));
1174
1189
  writeValue(value) {
1175
1190
  this.value.set(value ?? '');
@@ -1205,7 +1220,7 @@ class CoarPasswordInputComponent extends CoarControlValueAccessor {
1205
1220
  }
1206
1221
  }
1207
1222
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1208
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarPasswordInputComponent, isStandalone: true, selector: "coar-password-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-password-input--xs": "size() === \"xs\"", "class.coar-password-input--sm": "size() === \"sm\"", "class.coar-password-input--md": "size() === \"md\"", "class.coar-password-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarPasswordInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-password-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-password-input-container\"\n [class.coar-password-input-focused]=\"isFocused()\"\n [class.coar-password-input-disabled]=\"isDisabled()\"\n [class.coar-password-input-readonly]=\"readonly()\"\n [class.coar-password-input-error]=\"hasError()\"\n >\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [type]=\"inputType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-password-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-password-input-toggle\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n aria-hidden=\"true\"\n (click)=\"togglePasswordVisibility()\"\n />\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 8px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:11px}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:12px}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:16px}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:4px 8px;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:14px;cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:11px;padding:2px 6px}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:12px;padding:3px 7px}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:16px;padding:5px 9px}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1223
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarPasswordInputComponent, isStandalone: true, selector: "coar-password-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-password-input--xs": "size() === \"xs\"", "class.coar-password-input--sm": "size() === \"sm\"", "class.coar-password-input--md": "size() === \"md\"", "class.coar-password-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarPasswordInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-password-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-password-input-container\"\n [class.coar-password-input-focused]=\"isFocused()\"\n [class.coar-password-input-disabled]=\"isDisabled()\"\n [class.coar-password-input-readonly]=\"readonly()\"\n [class.coar-password-input-error]=\"hasError()\"\n >\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [type]=\"inputType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-password-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-password-input-toggle\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n aria-hidden=\"true\"\n (click)=\"togglePasswordVisibility()\"\n />\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:var(--coar-component-xs-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-xs) + var(--coar-spacing-xxs))}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:var(--coar-component-sm-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-s) - var(--coar-spacing-xxs))}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:var(--coar-component-lg-font-size);padding:var(--coar-spacing-xs) calc(var(--coar-spacing-s) + var(--coar-spacing-xs))}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1209
1224
  }
1210
1225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, decorators: [{
1211
1226
  type: Component,
@@ -1214,8 +1229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
1214
1229
  '[class.coar-password-input--sm]': 'size() === "sm"',
1215
1230
  '[class.coar-password-input--md]': 'size() === "md"',
1216
1231
  '[class.coar-password-input--lg]': 'size() === "lg"',
1217
- }, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-password-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-password-input-container\"\n [class.coar-password-input-focused]=\"isFocused()\"\n [class.coar-password-input-disabled]=\"isDisabled()\"\n [class.coar-password-input-readonly]=\"readonly()\"\n [class.coar-password-input-error]=\"hasError()\"\n >\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [type]=\"inputType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-password-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-password-input-toggle\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n aria-hidden=\"true\"\n (click)=\"togglePasswordVisibility()\"\n />\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 8px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:11px}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:12px}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:16px}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:4px 8px;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:14px;cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:11px;padding:2px 6px}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:12px;padding:3px 7px}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:16px;padding:5px 9px}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
1232
+ }, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-password-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-password-input-container\"\n [class.coar-password-input-focused]=\"isFocused()\"\n [class.coar-password-input-disabled]=\"isDisabled()\"\n [class.coar-password-input-readonly]=\"readonly()\"\n [class.coar-password-input-error]=\"hasError()\"\n >\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [type]=\"inputType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-password-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-password-input-toggle\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n aria-hidden=\"true\"\n (click)=\"togglePasswordVisibility()\"\n />\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:var(--coar-component-xs-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-xs) + var(--coar-spacing-xxs))}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:var(--coar-component-sm-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-s) - var(--coar-spacing-xxs))}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:var(--coar-component-lg-font-size);padding:var(--coar-spacing-xs) calc(var(--coar-spacing-s) + var(--coar-spacing-xs))}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
1218
1233
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
1234
+ function cryptoRandomId$1() {
1235
+ if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
1236
+ return crypto.randomUUID();
1237
+ }
1238
+ return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
1239
+ }
1219
1240
 
1220
1241
  class CoarCheckboxComponent extends CoarControlValueAccessor {
1221
1242
  /** Label text displayed next to the checkbox */
@@ -1886,7 +1907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
1886
1907
  * ```
1887
1908
  */
1888
1909
  class CoarSingleSelectComponent extends CoarSelectBase {
1889
- overlayService = inject(CoarOverlayService);
1910
+ overlayBuilder = createOverlayBuilder();
1890
1911
  destroyRefLocal = inject(DestroyRef);
1891
1912
  triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
1892
1913
  dropdownTemplateRef = viewChild('dropdownTemplate', ...(ngDevMode ? [{ debugName: "dropdownTemplateRef" }] : []));
@@ -1971,18 +1992,17 @@ class CoarSingleSelectComponent extends CoarSelectBase {
1971
1992
  return;
1972
1993
  const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
1973
1994
  this.dropdownPosition.set(placement === 'top' ? 'top' : 'bottom');
1974
- const spec = Overlay.define((b) => {
1975
- b.content((c) => c.fromTemplate(template));
1976
- b.anchor({ kind: 'element', element: trigger });
1977
- b.position({ placement, offset: 4, flip: false, shift: false });
1978
- b.scroll({ strategy: 'reposition' });
1979
- b.dismiss({ outsideClick: true, escapeKey: true });
1980
- b.size({ mode: 'content', minWidth: 'anchor' });
1981
- });
1982
1995
  this.isOpen.set(true);
1983
1996
  this.searchQuery.set('');
1984
1997
  this.highlightedIndex.set(-1);
1985
- const ref = this.overlayService.open(spec, {});
1998
+ const ref = this.overlayBuilder
1999
+ .anchor({ kind: 'element', element: trigger })
2000
+ .position({ placement, offset: 4, flip: false, shift: false })
2001
+ .scroll({ strategy: 'reposition' })
2002
+ .dismiss({ outsideClick: true, escapeKey: true })
2003
+ .size({ mode: 'content', minWidth: 'anchor' })
2004
+ .fromTemplate(template)
2005
+ .open({});
1986
2006
  this.overlayRef = ref;
1987
2007
  ref.afterClosed$.subscribe(() => {
1988
2008
  if (this.overlayRef !== ref)
@@ -2072,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
2072
2092
  * ```
2073
2093
  */
2074
2094
  class CoarMultiSelectComponent extends CoarSelectBase {
2075
- overlayService = inject(CoarOverlayService);
2095
+ overlayBuilder = createOverlayBuilder();
2076
2096
  triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
2077
2097
  dropdownTemplateRef = viewChild('dropdownTemplate', ...(ngDevMode ? [{ debugName: "dropdownTemplateRef" }] : []));
2078
2098
  overlayRef = null;
@@ -2231,18 +2251,17 @@ class CoarMultiSelectComponent extends CoarSelectBase {
2231
2251
  return;
2232
2252
  const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
2233
2253
  this.dropdownPosition.set(placement === 'top' ? 'top' : 'bottom');
2234
- const spec = Overlay.define((b) => {
2235
- b.content((c) => c.fromTemplate(template));
2236
- b.anchor({ kind: 'element', element: trigger });
2237
- b.position({ placement, offset: 4, flip: false, shift: false });
2238
- b.scroll({ strategy: 'reposition' });
2239
- b.dismiss({ outsideClick: true, escapeKey: true });
2240
- b.size({ mode: 'content', minWidth: 'anchor' });
2241
- });
2242
2254
  this.isOpen.set(true);
2243
2255
  this.searchQuery.set('');
2244
2256
  this.highlightedIndex.set(-1);
2245
- const ref = this.overlayService.open(spec, {});
2257
+ const ref = this.overlayBuilder
2258
+ .anchor({ kind: 'element', element: trigger })
2259
+ .position({ placement, offset: 4, flip: false, shift: false })
2260
+ .scroll({ strategy: 'reposition' })
2261
+ .dismiss({ outsideClick: true, escapeKey: true })
2262
+ .size({ mode: 'content', minWidth: 'anchor' })
2263
+ .fromTemplate(template)
2264
+ .open({});
2246
2265
  this.overlayRef = ref;
2247
2266
  ref.afterClosed$.subscribe(() => {
2248
2267
  if (this.overlayRef !== ref)
@@ -2293,9 +2312,7 @@ class CoarMultiSelectComponent extends CoarSelectBase {
2293
2312
  const optionCount = this.displayOptions().length;
2294
2313
  const listHeight = Math.min(maxListHeight, optionCount * optionRowHeight + listPadding);
2295
2314
  const searchHeight = this.searchable() ? 56 : 0;
2296
- const selectAllHeight = this.showSelectAll() && !this.searchQuery()
2297
- ? 37
2298
- : 0;
2315
+ const selectAllHeight = this.showSelectAll() && !this.searchQuery() ? 37 : 0;
2299
2316
  const chromeHeight = 2;
2300
2317
  return chromeHeight + searchHeight + selectAllHeight + listHeight;
2301
2318
  }
@@ -2335,7 +2352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
2335
2352
  * ```
2336
2353
  */
2337
2354
  class CoarTagSelectComponent extends CoarSelectBase {
2338
- overlayService = inject(CoarOverlayService);
2355
+ overlayBuilder = createOverlayBuilder();
2339
2356
  triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
2340
2357
  dropdownTemplateRef = viewChild('dropdownTemplate', ...(ngDevMode ? [{ debugName: "dropdownTemplateRef" }] : []));
2341
2358
  overlayRef = null;
@@ -2612,17 +2629,16 @@ class CoarTagSelectComponent extends CoarSelectBase {
2612
2629
  return;
2613
2630
  const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
2614
2631
  this.dropdownPosition.set(placement === 'top' ? 'top' : 'bottom');
2615
- const spec = Overlay.define((b) => {
2616
- b.content((c) => c.fromTemplate(template));
2617
- b.anchor({ kind: 'element', element: trigger });
2618
- b.position({ placement, offset: 4, flip: false, shift: false });
2619
- b.scroll({ strategy: 'reposition' });
2620
- b.dismiss({ outsideClick: true, escapeKey: true });
2621
- b.size({ mode: 'content', minWidth: 'anchor' });
2622
- });
2623
2632
  this.isOpen.set(true);
2624
2633
  this.highlightedIndex.set(-1);
2625
- const ref = this.overlayService.open(spec, {});
2634
+ const ref = this.overlayBuilder
2635
+ .anchor({ kind: 'element', element: trigger })
2636
+ .position({ placement, offset: 4, flip: false, shift: false })
2637
+ .scroll({ strategy: 'reposition' })
2638
+ .dismiss({ outsideClick: true, escapeKey: true })
2639
+ .size({ mode: 'content', minWidth: 'anchor' })
2640
+ .fromTemplate(template)
2641
+ .open({});
2626
2642
  this.overlayRef = ref;
2627
2643
  ref.afterClosed$.subscribe(() => {
2628
2644
  if (this.overlayRef !== ref)
@@ -3287,7 +3303,7 @@ class CoarPopoverComponent {
3287
3303
  elementRef = inject(ElementRef);
3288
3304
  destroyRef = inject(DestroyRef);
3289
3305
  popoverGroup = inject(CoarPopoverGroupService, { optional: true });
3290
- overlayService = inject(CoarOverlayService);
3306
+ overlayBuilder = createOverlayBuilder();
3291
3307
  static nextId = 0;
3292
3308
  popoverId = `coar-popover-${CoarPopoverComponent.nextId++}`;
3293
3309
  panelId = `${this.popoverId}-panel`;
@@ -3376,21 +3392,20 @@ class CoarPopoverComponent {
3376
3392
  else {
3377
3393
  this.pinnedByClick.set(false);
3378
3394
  }
3379
- const spec = Overlay.define((b) => {
3380
- b.content((c) => c.fromTemplate(template));
3381
- b.anchor({ kind: 'element', element: trigger });
3382
- b.position({
3383
- placement: ['bottom', 'top', 'right', 'left'],
3384
- offset: 6,
3385
- flip: false,
3386
- shift: this.clampToViewport(),
3387
- });
3388
- b.scroll({ strategy: 'reposition' });
3389
- b.dismiss({ outsideClick: false, escapeKey: true });
3390
- b.size({ mode: 'content' });
3391
- b.a11y({ role: 'tooltip' });
3392
- });
3393
- const ref = this.overlayService.open(spec, {});
3395
+ const ref = this.overlayBuilder
3396
+ .anchor({ kind: 'element', element: trigger })
3397
+ .position({
3398
+ placement: ['bottom', 'top', 'right', 'left'],
3399
+ offset: 6,
3400
+ flip: false,
3401
+ shift: this.clampToViewport(),
3402
+ })
3403
+ .scroll({ strategy: 'reposition' })
3404
+ .dismiss({ outsideClick: false, escapeKey: true })
3405
+ .size({ mode: 'content' })
3406
+ .a11y({ role: 'tooltip' })
3407
+ .fromTemplate(template)
3408
+ .open({});
3394
3409
  this.overlayRef = ref;
3395
3410
  this.isOpen.set(true);
3396
3411
  ref.afterClosed$.subscribe(() => {
@@ -3667,7 +3682,6 @@ class CoarTooltipDirective {
3667
3682
  elementRef = inject((ElementRef));
3668
3683
  destroyRef = inject(DestroyRef);
3669
3684
  injector = inject(Injector);
3670
- overlayService = inject(CoarOverlayService);
3671
3685
  tooltipService = inject(CoarTooltipService);
3672
3686
  /** Tooltip content (string, TemplateRef, or Component type). */
3673
3687
  coarTooltip = input(null, ...(ngDevMode ? [{ debugName: "coarTooltip" }] : []));
@@ -3687,6 +3701,7 @@ class CoarTooltipDirective {
3687
3701
  coarTooltipFallbackToBestFit = input(false, { ...(ngDevMode ? { debugName: "coarTooltipFallbackToBestFit" } : {}), transform: booleanAttribute });
3688
3702
  tooltipId = `coar-tooltip-${cryptoRandomId()}`;
3689
3703
  overlayRef = null;
3704
+ overlayBuilder = createOverlayBuilder();
3690
3705
  openTimerId = null;
3691
3706
  closeTimerId = null;
3692
3707
  openReason = null;
@@ -3709,7 +3724,7 @@ class CoarTooltipDirective {
3709
3724
  const currentOpenReason = this.openReason;
3710
3725
  const hasOpenOverlay = this.overlayRef != null;
3711
3726
  // When the tooltip is open and config changes, re-open to apply changes.
3712
- // CoarOverlayService does not support updating spec/content in-place.
3727
+ // Overlays do not support updating spec/content in-place.
3713
3728
  if (!this.coarTooltipDisabled() && hasOpenOverlay && currentOpenReason && this.hasContent()) {
3714
3729
  this.close(true);
3715
3730
  Promise.resolve().then(() => this.openInternal(currentOpenReason));
@@ -3748,16 +3763,15 @@ class CoarTooltipDirective {
3748
3763
  if (!content)
3749
3764
  return;
3750
3765
  const position = this.resolveOverlayPosition();
3751
- const spec = Overlay.define((b) => {
3752
- b.content((c) => c.fromComponent(CoarTooltipOverlayComponent));
3753
- b.anchor({ kind: 'element', element: trigger });
3754
- b.position(position);
3755
- b.scroll({ strategy: 'reposition' });
3756
- b.dismiss({ outsideClick: false, escapeKey: true });
3757
- b.size({ mode: 'content' });
3758
- b.a11y({ role: 'tooltip' });
3759
- });
3760
- const ref = this.overlayService.open(spec, {
3766
+ const ref = this.overlayBuilder
3767
+ .anchor({ kind: 'element', element: trigger })
3768
+ .position(position)
3769
+ .scroll({ strategy: 'reposition' })
3770
+ .dismiss({ outsideClick: false, escapeKey: true })
3771
+ .size({ mode: 'content' })
3772
+ .a11y({ role: 'tooltip' })
3773
+ .fromComponent(CoarTooltipOverlayComponent)
3774
+ .open({
3761
3775
  tooltipId: this.tooltipId,
3762
3776
  content,
3763
3777
  context: this.coarTooltipContext(),
@@ -4099,7 +4113,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
4099
4113
  elementRef = inject(ElementRef);
4100
4114
  destroyRef = inject(DestroyRef);
4101
4115
  localeService = inject(COAR_LOCALE_SERVICE, { optional: true });
4102
- overlayService = inject(CoarOverlayService);
4116
+ overlayBuilder = createOverlayBuilder();
4103
4117
  overlayRef = null;
4104
4118
  // ============================================================
4105
4119
  // Inputs
@@ -4381,15 +4395,14 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
4381
4395
  return;
4382
4396
  const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
4383
4397
  this.calendarPosition.set(placement === 'top' ? 'top' : 'bottom');
4384
- const spec = Overlay.define((b) => {
4385
- b.content((c) => c.fromTemplate(template));
4386
- b.anchor({ kind: 'element', element: trigger });
4387
- b.position({ placement, offset: 4, flip: false, shift: false });
4388
- b.scroll({ strategy: 'reposition' });
4389
- b.dismiss({ outsideClick: true, escapeKey: true });
4390
- b.size({ mode: 'content' });
4391
- });
4392
- const ref = this.overlayService.open(spec, {});
4398
+ const ref = this.overlayBuilder
4399
+ .anchor({ kind: 'element', element: trigger })
4400
+ .position({ placement, offset: 4, flip: false, shift: false })
4401
+ .scroll({ strategy: 'reposition' })
4402
+ .dismiss({ outsideClick: true, escapeKey: true })
4403
+ .size({ mode: 'content' })
4404
+ .fromTemplate(template)
4405
+ .open({});
4393
4406
  this.overlayRef = ref;
4394
4407
  this.isOpen.set(true);
4395
4408
  // Set initial focus date
@@ -4697,7 +4710,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
4697
4710
  if (parts.length !== 3)
4698
4711
  return null;
4699
4712
  // Check all parts are complete numbers
4700
- if (parts.some(p => p.length === 0 || !/^\d+$/.test(p)))
4713
+ if (parts.some((p) => p.length === 0 || !/^\d+$/.test(p)))
4701
4714
  return null;
4702
4715
  const format = this.dateFormat();
4703
4716
  let year, month, day;