@cocoar/ui-components 0.1.0-beta.72 → 0.1.0-beta.79

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 +329 -239
  2. package/fesm2022/cocoar-ui-components.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/cocoar-ui-components.d.ts +78 -112
package/fesm2022/cocoar-ui-components.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Injectable, input, booleanAttribute, signal, effect, Input, ChangeDetectionStrategy, Component, forwardRef, model, output, viewChild, computed, InjectionToken, DestroyRef, afterNextRender, HostListener, ElementRef, NgZone, Directive, contentChildren, Injector, TemplateRef, HostBinding, numberAttribute, ViewEncapsulation } from '@angular/core';
2
+ import { InjectionToken, inject, Injectable, input, booleanAttribute, signal, effect, ChangeDetectionStrategy, Component, forwardRef, model, output, viewChild, computed, DestroyRef, afterNextRender, HostListener, ElementRef, NgZone, Directive, contentChildren, Injector, TemplateRef, HostBinding, numberAttribute, ViewEncapsulation } from '@angular/core';
3
3
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
4
4
  import { DomSanitizer } from '@angular/platform-browser';
5
- import { HttpClient } from '@angular/common/http';
6
5
  import { of, fromEvent, filter } from 'rxjs';
7
- import { catchError, shareReplay } from 'rxjs/operators';
6
+ import { shareReplay, catchError, finalize } from 'rxjs/operators';
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';
@@ -22,149 +22,185 @@ import 'prismjs/components/prism-markup';
22
22
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
23
23
  import { Temporal } from '@js-temporal/polyfill';
24
24
 
25
- /**
26
- * Built-in icon registry.
27
- *
28
- * ⚠️ DO NOT EDIT THIS FILE MANUALLY
29
- *
30
- * This file is auto-generated from /assets/icons/*.svg files.
31
- * To add new icons:
32
- * 1. Add SVG files to /assets/icons/
33
- * 2. Run: npm run build:icons
34
- * 3. Commit the generated file
35
- *
36
- * Icons are inlined as strings for maximum portability.
37
- *
38
- * Generated: 2026-01-03T10:25:22.816Z
39
- * Source: C:\git\cocoar\cocoar-ui\assets\icons
40
- */
41
- const CORE_ICONS = {
42
- 'add-list': `<svg id="Layer_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m10 18h-7c-.6 0-1-.4-1-1s.4-1 1-1h7c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m21 17h-6c-.6 0-1-.4-1-1s.4-1 1-1h6c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m18 20c-.6 0-1-.4-1-1v-6c0-.6.4-1 1-1s1 .4 1 1v6c0 .6-.4 1-1 1z"/></g><g><path d="m14 13h-11c-.6 0-1-.4-1-1s.4-1 1-1h11c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m14 8h-11c-.6 0-1-.4-1-1s.4-1 1-1h11c.6 0 1 .4 1 1s-.4 1-1 1z"/></g></svg>`,
43
- 'add-user': `<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m17 6c0 2.76142-2.2386 5-5 5-2.76142 0-5-2.23858-5-5s2.23858-5 5-5c2.7614 0 5 2.23858 5 5zm-5 4c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.20914 0-4 1.79086-4 4s1.79086 4 4 4zm-2 3c-3.86599 0-7 3.134-7 7 0 1.6569 1.34315 3 3 3h6.5c.2761 0 .5-.2239.5-.5s-.2239-.5-.5-.5h-6.5c-1.10457 0-2-.8954-2-2 0-3.3137 2.68629-6 6-6h4.5c.2761 0 .5-.2239.5-.5 0-.2762-.2239-.5-.5-.5zm9 2c.2761 0 .5.2239.5.5v3h3c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-3v3c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5v-3h-3c-.2761 0-.5-.2239-.5-.5s.2239-.5.5-.5h3v-3c0-.2761.2239-.5.5-.5z" fill="rgb(0,0,0)" fill-rule="evenodd"/></svg>`,
44
- 'add': `<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_03_Login" data-name="03 Login"><path d="m256 512a25 25 0 0 1 -25-25v-462a25 25 0 0 1 50 0v462a25 25 0 0 1 -25 25z"/><path d="m487 281h-462a25 25 0 0 1 0-50h462a25 25 0 0 1 0 50z"/></g></svg>`,
45
- 'arrow-right': `<svg id="Layer_2" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 2"><path d="m22.707 11.293-7-7a1 1 0 0 0 -1.414 1.414l5.293 5.293h-17.586a1 1 0 0 0 0 2h17.586l-5.293 5.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414z"/></svg>`,
46
- 'back': `<svg id="Layer_1" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 14c-.3 0-.5-.1-.7-.3l-4-4c-.4-.4-.4-1 0-1.4l4-4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-3.3 3.3 3.3 3.3c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z"/><path d="m14 19h-7c-.6 0-1-.4-1-1s.4-1 1-1h7c2.3 0 4-1.5 4-3.5s-1.7-3.5-4-3.5h-9c-.6 0-1-.4-1-1s.4-1 1-1h9c3.4 0 6 2.4 6 5.5s-2.6 5.5-6 5.5z"/></svg>`,
47
- 'bin': `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M436,60h-75V45c0-24.813-20.187-45-45-45H196c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45 c0,19.928,13.025,36.861,31.005,42.761L88.76,470.736C90.687,493.875,110.385,512,133.604,512h244.792 c23.22,0,42.918-18.125,44.846-41.271l26.753-322.969C467.975,141.861,481,124.928,481,105C481,80.187,460.813,60,436,60z M181,45 c0-8.271,6.729-15,15-15h120c8.271,0,15,6.729,15,15v15H181V45z M393.344,468.246c-0.643,7.712-7.208,13.754-14.948,13.754 H133.604c-7.739,0-14.305-6.042-14.946-13.747L92.294,150h327.412L393.344,468.246z M436,120H76c-8.271,0-15-6.729-15-15 s6.729-15,15-15h360c8.271,0,15,6.729,15,15S444.271,120,436,120z"/></g></g><g><g><path d="M195.971,436.071l-15-242c-0.513-8.269-7.67-14.558-15.899-14.043c-8.269,0.513-14.556,7.631-14.044,15.899l15,242.001 c0.493,7.953,7.097,14.072,14.957,14.072C189.672,452,196.504,444.684,195.971,436.071z"/></g></g><g><g><path d="M256,180c-8.284,0-15,6.716-15,15v242c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z"/></g></g><g><g><path d="M346.927,180.029c-8.25-0.513-15.387,5.774-15.899,14.043l-15,242c-0.511,8.268,5.776,15.386,14.044,15.899 c8.273,0.512,15.387-5.778,15.899-14.043l15-242C361.483,187.659,355.196,180.541,346.927,180.029z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
48
- 'calendar': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M21,2H18V0H16V2H8V0H6V2H3A3,3,0,0,0,0,5V24H24V5A3,3,0,0,0,21,2ZM2,5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1V8H2ZM2,22V10H22V22Z"/><rect x="15" y="13" width="2" height="2"/><rect x="11" y="13" width="2" height="2"/><rect x="7" y="13" width="2" height="2"/><rect x="15" y="17" width="2" height="2"/><rect x="11" y="17" width="2" height="2"/><rect x="7" y="17" width="2" height="2"/></g></svg>`,
49
- 'caret-right': `<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m190.06 414 163.12-139.78a24 24 0 0 0 0-36.44l-163.12-139.78c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/></svg>`,
50
- 'chat': `<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve"><g><path d="M10,25.465h13c0.553,0,1-0.448,1-1s-0.447-1-1-1H10c-0.553,0-1,0.448-1,1S9.447,25.465,10,25.465z"/><path d="M36,29.465H10c-0.553,0-1,0.448-1,1s0.447,1,1,1h26c0.553,0,1-0.448,1-1S36.553,29.465,36,29.465z"/><path d="M36,35.465H10c-0.553,0-1,0.448-1,1s0.447,1,1,1h26c0.553,0,1-0.448,1-1S36.553,35.465,36,35.465z"/><path d="M54.072,2.535L19.93,2.465c-3.27,0-5.93,2.66-5.93,5.93v5.124l-8.07,0.017c-3.27,0-5.93,2.66-5.93,5.93v21.141 c0,3.27,2.66,5.929,5.93,5.929H12v10c0,0.413,0.254,0.784,0.64,0.933c0.117,0.045,0.239,0.067,0.36,0.067 c0.276,0,0.547-0.115,0.74-0.327l9.704-10.675l16.626-0.068c3.27,0,5.93-2.66,5.93-5.929v-0.113l5.26,5.786 c0.193,0.212,0.464,0.327,0.74,0.327c0.121,0,0.243-0.022,0.36-0.067c0.386-0.149,0.64-0.52,0.64-0.933v-10h1.07 c3.27,0,5.93-2.66,5.93-5.929V8.465C60,5.196,57.341,2.536,54.072,2.535z M44,40.536c0,2.167-1.763,3.929-3.934,3.929l-17.07,0.07 c-0.28,0.001-0.548,0.12-0.736,0.327L14,53.949v-8.414c0-0.552-0.447-1-1-1H5.93c-2.167,0-3.93-1.763-3.93-3.929V19.465 c0-2.167,1.763-3.93,3.932-3.93l9.068-0.019c0,0,0,0,0,0c0.001,0,0.001,0,0.002,0l25.068-0.052c2.167,0,3.93,1.763,3.93,3.93 v18.441V40.536z M58,29.606c0,2.167-1.763,3.929-3.93,3.929H52c-0.553,0-1,0.448-1,1v8.414l-5-5.5V19.395 c0-3.27-2.66-5.93-5.932-5.93L16,13.514v-5.12c0-2.167,1.763-3.93,3.928-3.93l34.141,0.07c0.001,0,0.001,0,0.002,0 c2.167,0,3.93,1.763,3.93,3.93V29.606z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
51
- 'check': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M497.36,69.995c-7.532-7.545-19.753-7.558-27.285-0.032L238.582,300.845l-83.522-90.713 c-7.217-7.834-19.419-8.342-27.266-1.126c-7.841,7.217-8.343,19.425-1.126,27.266l97.126,105.481 c3.557,3.866,8.535,6.111,13.784,6.22c0.141,0.006,0.277,0.006,0.412,0.006c5.101,0,10.008-2.026,13.623-5.628L497.322,97.286 C504.873,89.761,504.886,77.54,497.36,69.995z"/></g></g><g><g><path d="M492.703,236.703c-10.658,0-19.296,8.638-19.296,19.297c0,119.883-97.524,217.407-217.407,217.407 c-119.876,0-217.407-97.524-217.407-217.407c0-119.876,97.531-217.407,217.407-217.407c10.658,0,19.297-8.638,19.297-19.296 C275.297,8.638,266.658,0,256,0C114.84,0,0,114.84,0,256c0,141.154,114.84,256,256,256c141.154,0,256-114.846,256-256 C512,245.342,503.362,236.703,492.703,236.703z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
52
- 'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
53
- 'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
54
- 'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
55
- 'chevrons-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>`,
56
- 'chevrons-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>`,
57
- 'clipboard': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.891 438.891" style="enable-background:new 0 0 438.891 438.891;" xml:space="preserve"><g><g><g><path d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347 c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923 c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045 c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735 c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51 c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808 H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645 c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706 c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"/><path d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629 c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135 c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025 C179.628,233.962,179.427,233.761,179.217,233.569z"/><path d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16 c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"/><path d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629 c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135 c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025 C179.628,150.37,179.427,150.169,179.217,149.977z"/><path d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16 c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"/><path d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629 c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135 c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025 C179.628,317.554,179.427,317.353,179.217,317.16z"/><path d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16 c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
58
- 'close': `<svg id="Capa_1" enable-background="new 0 0 320.591 320.591" height="512" viewBox="0 0 320.591 320.591" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="close_1_"><path d="m30.391 318.583c-7.86.457-15.59-2.156-21.56-7.288-11.774-11.844-11.774-30.973 0-42.817l257.812-257.813c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875l-259.331 259.331c-5.893 5.058-13.499 7.666-21.256 7.288z"/><path d="m287.9 318.583c-7.966-.034-15.601-3.196-21.257-8.806l-257.813-257.814c-10.908-12.738-9.425-31.908 3.313-42.817 11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414-6.35 5.522-14.707 8.161-23.078 7.288z"/></g></g></svg>`,
59
- 'comments': `<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m480.052 369.741c49.476-69.417 41.913-164.522-25.665-226.473-30.877-28.305-70.24-45.926-112.761-50.847-.265-.326-.536-.649-.833-.958-36.991-38.425-90.135-60.463-145.805-60.463-105.939 0-194.988 78.933-194.988 180 0 35.435 11.007 69.404 31.916 98.741l-29.209 91.706c-1.836 5.764-.03 12.065 4.579 15.982 4.617 3.924 11.13 4.678 16.511 1.941l88.827-45.167c18.242 7.855 37.586 13.009 57.618 15.354 38.642 40.636 92.073 61.443 146.738 61.443 28.416 0 56.729-5.791 82.36-16.798l88.831 45.169c2.151 1.094 4.48 1.629 6.795 1.629 10.123 0 17.38-9.865 14.295-19.553zm-361.374-25.72c-4.201-1.995-9.088-1.929-13.233.179l-63.267 32.17 20.66-64.866c1.504-4.723.579-9.883-2.473-13.788-19.866-25.43-30.367-55.415-30.367-86.716 0-82.71 74.014-150 164.99-150 36.636 0 71.905 11.099 100.514 31.086-96.348 9.688-173.51 84.942-173.51 178.914 0 29.228 7.492 57.366 21.617 82.576-8.552-2.547-16.881-5.732-24.931-9.555zm287.845 60.178c-4.085-2.077-8.976-2.202-13.233-.178-23.385 11.108-49.772 16.979-76.31 16.979-90.976 0-164.99-67.29-164.99-150s74.014-150 164.99-150 164.99 67.29 164.99 150c0 31.301-10.501 61.286-30.368 86.715-3.051 3.905-3.976 9.065-2.473 13.788l20.66 64.866z"/><circle cx="255.984" cy="271" r="15"/><circle cx="315.981" cy="271" r="15"/><circle cx="375.977" cy="271" r="15"/></svg>`,
60
- 'copy': `<svg height="682.66669pt" viewBox="-21 -21 682.66669 682.66669" width="682.66669pt" xmlns="http://www.w3.org/2000/svg"><path d="m565 640h-340c-41.359375 0-75-33.640625-75-75v-340c0-41.359375 33.640625-75 75-75h340c41.359375 0 75 33.640625 75 75v340c0 41.359375-33.640625 75-75 75zm-340-440c-13.785156 0-25 11.214844-25 25v340c0 13.785156 11.214844 25 25 25h340c13.785156 0 25-11.214844 25-25v-340c0-13.785156-11.214844-25-25-25zm-125 240h-25c-13.785156 0-25-11.214844-25-25v-340c0-13.785156 11.214844-25 25-25h340c13.785156 0 25 11.214844 25 25v23.75h50v-23.75c0-41.359375-33.640625-75-75-75h-340c-41.359375 0-75 33.640625-75 75v340c0 41.359375 33.640625 75 75 75h25zm0 0"/></svg>`,
61
- 'customers': `<svg id="Capa_1" enable-background="new 0 0 183.729 183.729" height="512" viewBox="0 0 183.729 183.729" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="Line_1_"><path d="m4.213 137.816h33.391v41.739c0 2.305 1.869 4.174 4.174 4.174h100.174c2.305 0 4.174-1.869 4.174-4.174v-41.739h33.391c2.305 0 4.174-1.869 4.174-4.174v-59.394c0-8.692-5.388-16.474-13.523-19.534l-12.021-4.55c11.569-11.249 11.827-29.747.578-41.316s-29.747-11.827-41.316-.578c-5.676 5.52-8.869 13.107-8.848 21.024-10.503-5.284-22.888-5.284-33.391 0 .042-16.136-13.005-29.251-29.141-29.294s-29.252 13.004-29.295 29.14c-.021 7.917 3.172 15.504 8.848 21.024l-12.021 4.55c-8.135 3.059-13.522 10.841-13.522 19.534v59.395c0 2.305 1.868 4.173 4.174 4.173zm41.739-19.325c.003-4.574 2.499-8.782 6.511-10.977l15.903-8.64 18.198 76.508h-40.612zm61.314-21.579-11.228 47.082v-35.395c0-2.305-1.869-4.174-4.174-4.174s-4.174 1.869-4.174 4.174v35.395l-11.227-47.082c9.785 4.452 21.018 4.452 30.803 0zm30.512 78.47h-40.612l18.198-76.508 15.903 8.64c4.012 2.195 6.509 6.404 6.511 10.977zm29.217-112.696c4.977 1.759 8.315 6.45 8.348 11.729v55.054h-29.217v-10.977c-.033-7.612-4.208-14.602-10.894-18.24l-18.032-9.81c7.797-7.122 12.236-17.197 12.23-27.757-.004-1.86-.158-3.716-.459-5.551 2.849.901 5.819 1.365 8.807 1.377 4.101.003 8.155-.865 11.896-2.546zm-50.087-33.391c0-11.526 9.344-20.87 20.87-20.87s20.87 9.344 20.87 20.87-9.344 20.87-20.87 20.87c-4.418-.045-8.706-1.508-12.23-4.174-1.899-3.887-4.454-7.417-7.555-10.435-.699-2.015-1.066-4.129-1.085-6.261zm4.174 33.391c0 16.136-13.081 29.217-29.217 29.217s-29.218-13.081-29.218-29.217 13.081-29.217 29.217-29.217 29.218 13.081 29.218 29.217zm-96-33.391c0-11.526 9.344-20.87 20.87-20.87s20.87 9.344 20.87 20.87c-.001 2.188-.368 4.361-1.085 6.428-3.085 2.967-5.64 6.44-7.555 10.268-3.524 2.666-7.811 4.129-12.23 4.174-11.526-.001-20.87-9.344-20.87-20.87zm-16.696 44.953c.102-5.217 3.428-9.823 8.348-11.562l17.53-6.553c3.688 1.595 7.668 2.405 11.687 2.379 2.988-.012 5.958-.477 8.807-1.377-.301 1.835-.455 3.692-.459 5.551.017 10.531 4.454 20.571 12.23 27.673l-18.031 9.892c-6.686 3.638-10.861 10.628-10.894 18.24v10.977h-29.218z"/></g></g></svg>`,
62
- 'employee': `<svg id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m44.585 14.585c0-6.939-5.646-12.585-12.585-12.585s-12.585 5.646-12.585 12.585 5.646 12.585 12.585 12.585 12.585-5.646 12.585-12.585zm-23.17 0c0-5.837 4.749-10.585 10.585-10.585s10.585 4.748 10.585 10.585-4.749 10.585-10.585 10.585-10.585-4.748-10.585-10.585z"/><path d="m36.468 28.62s-.003 0-.005 0c-.073 0-.143-.011-.216-.011h-8.492c-.073 0-.143.01-.215.011-.003 0-.006 0-.01 0-9.353.122-16.926 7.758-16.926 17.139v15.241c0 .553.448 1 1 1h40.793c.552 0 1-.447 1-1v-15.241c0-9.382-7.575-17.019-16.929-17.139zm-4.468 7.477h1.306l4.436 18.002-5.741 5.515-5.741-5.515 4.436-18.002h1.306zm0-2h-1.432l-1.507-3.488h5.879l-1.507 3.488h-1.432zm-19.397 11.662c0-8.066 6.341-14.661 14.298-15.107l1.959 4.533-4.681 18.996c-.085.347.021.713.278.96l5.059 4.859h-16.913zm38.794 14.241h-16.913l5.059-4.859c.257-.247.364-.613.278-.96l-4.681-18.996 1.959-4.533c7.956.446 14.298 7.042 14.298 15.107z"/></svg>`,
63
- 'eye-closed': `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.26408 6.66615C1.57529 6.4126 2.03769 6.45387 2.29687 6.75831C4.01035 8.77104 7.1184 11.2826 12 11.2826C16.8815 11.2826 19.9895 8.77106 21.703 6.75833C21.9622 6.45389 22.4246 6.41263 22.7358 6.66617C23.047 6.91972 23.0892 7.37206 22.83 7.67651C22.3016 8.29723 21.6469 8.96667 20.8577 9.60857C20.9001 9.65503 20.937 9.7077 20.9669 9.7661L22.9224 13.5921C23.1035 13.9465 22.9567 14.3774 22.5945 14.5546C22.2322 14.7318 21.7917 14.5881 21.6106 14.2338L19.6856 10.4674C18.4652 11.2689 16.9983 11.959 15.2651 12.3565L16.1412 16.6418C16.2206 17.0303 15.9631 17.4082 15.5659 17.4859C15.1688 17.5636 14.7825 17.3117 14.703 16.9232L13.8209 12.6086C13.2402 12.6793 12.6334 12.7173 12 12.7173C11.3665 12.7173 10.7597 12.6793 10.1789 12.6086L9.29684 16.9232C9.21741 17.3117 8.83107 17.5636 8.43393 17.4859C8.03679 17.4082 7.77924 17.0303 7.85866 16.6418L8.73478 12.3564C7.30485 12.0285 6.0562 11.5014 4.97768 10.8769L2.32003 14.3434C2.07703 14.6603 1.61738 14.7246 1.29337 14.4869C0.96937 14.2491 0.903705 13.7995 1.14671 13.4825L3.75501 10.0804C2.6858 9.30207 1.8295 8.45132 1.16987 7.67649C0.910686 7.37204 0.952866 6.9197 1.26408 6.66615Z" fill="black"/></svg>`,
64
- 'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
65
- 'eye-open': `<svg clip-rule="evenodd" fill-rule="evenodd" height="512" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path d="m12 10.75c-2.346 0-4.25 1.904-4.25 4.25s1.904 4.25 4.25 4.25 4.25-1.904 4.25-4.25-1.904-4.25-4.25-4.25zm0 1.5c1.518 0 2.75 1.232 2.75 2.75s-1.232 2.75-2.75 2.75-2.75-1.232-2.75-2.75 1.232-2.75 2.75-2.75z"/><path d="m22.53 12.97s-.604-.604-1.514-1.515c-4.98-4.979-13.052-4.979-18.032 0-.91.911-1.514 1.515-1.514 1.515-.293.292-.293.768 0 1.06.292.293.768.293 1.06 0 0 0 .604-.604 1.515-1.514 4.393-4.394 11.517-4.394 15.91 0 .911.91 1.515 1.514 1.515 1.514.292.293.768.293 1.06 0 .293-.292.293-.768 0-1.06z"/><path d="m18.85 6.867-1.5 2.598c-.206.358-.083.817.275 1.024s.818.084 1.025-.274l1.5-2.598c.206-.359.083-.818-.275-1.025s-.818-.084-1.025.275z"/><path d="m11.25 5.5v3c0 .414.336.75.75.75s.75-.336.75-.75v-3c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"/><path d="m3.85 7.617 1.5 2.598c.207.358.667.481 1.025.274s.481-.666.275-1.024l-1.5-2.598c-.207-.359-.667-.482-1.025-.275s-.481.666-.275 1.025z"/></g></svg>`,
66
- 'eye': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
67
- 'important-1': `<svg id="Layer_1" enable-background="new 0 0 100 100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m53.6308289 62.660614h-7.3402634c-2.3325844 0-4.2989349-1.739502-4.5834389-4.0546722l-6.2579918-50.924778c-.3383217-2.7531052 1.8096237-5.1811638 4.5834389-5.1811638h19.9348373c2.7766304 0 4.9254341 2.4327488 4.5825768 5.1881289l-6.3365822 50.924778c-.287693 2.3120809-2.2526665 4.0477071-4.5825767 4.0477071z"/><path d="m63.6071815 83.8928223c0 7.4706039-6.1365699 13.6071777-13.6071815 13.6071777s-13.6071815-6.1365738-13.6071815-13.6071777c0-7.4706116 6.13657-13.6071777 13.6071815-13.6071777s13.6071815 6.1365585 13.6071815 13.6071777"/></svg>`,
68
- 'important': `<svg id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m46.0722656 25.6606445c-.390625.390625-.390625 1.0239258 0 1.4140625 1.3154297 1.315918 2.0400391 3.0649414 2.0400391 4.925293s-.7246094 3.609375-2.0400391 4.925293c-.390625.3901367-.390625 1.0234375 0 1.4140625.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c1.6933594-1.6933594 2.6259766-3.9448242 2.6259766-6.3393555s-.9326172-4.6459961-2.6259766-6.3393555c-.390625-.390625-1.0234375-.390625-1.4140625 0z"/><path d="m50.9248047 20.8085938c-.390625.390625-.390625 1.0234375 0 1.4140625 5.390625 5.3911133 5.390625 14.1635742 0 19.5546875-.390625.390625-.390625 1.0234375 0 1.4140625.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c6.1708984-6.1708984 6.1708984-16.2119141 0-22.3828125-.390625-.390625-1.0234375-.390625-1.4140625 0z"/><path d="m17.9277344 25.6606445c-.390625-.390625-1.0234375-.390625-1.4140625 0-1.6933594 1.6933594-2.6259766 3.9448242-2.6259766 6.3393555s.9326172 4.6459961 2.6259766 6.3393555c.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c.390625-.390625.390625-1.0239258 0-1.4140625-1.3154297-1.315918-2.0400391-3.0649414-2.0400391-4.925293s.7246094-3.609375 2.0400391-4.925293c.390625-.3901367.390625-1.0234375 0-1.4140625z"/><path d="m13.0751953 20.8085938c-.390625-.390625-1.0234375-.390625-1.4140625 0-6.1708984 6.1708984-6.1708984 16.2119141 0 22.3828125.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c.390625-.390625.390625-1.0234375 0-1.4140625-5.390625-5.3911133-5.390625-14.1635742 0-19.5546875.390625-.390625.390625-1.0234375 0-1.4140625z"/><path d="m39.2626953 2h-14.5253906c-.2744141 0-.5361328.112793-.7255859.3115234-.1884766.1987305-.2871094.4663086-.2734375.7402344l2.0253906 38.9492188c.0283203.5317383.4667969.9482422.9990234.9482422h10.4746094c.5322266 0 .9707031-.4165039.9990234-.9482422l2.0253907-38.9492188c.0136719-.2739258-.0849609-.5415039-.2734375-.7402344-.1894531-.1987305-.4511719-.3115234-.7255859-.3115234zm-2.9746094 38.9492188h-8.5761719l-1.9208984-36.9492188h12.4179688l-1.9208984 36.9492188z"/><path d="m32 47.3198242c-4.046875 0-7.3398438 3.2924805-7.3398438 7.3398438s3.2929688 7.340332 7.3398438 7.340332 7.3398438-3.2929688 7.3398438-7.340332-3.2929688-7.3398438-7.3398438-7.3398438zm0 12.6801758c-2.9443359 0-5.3398438-2.3955078-5.3398438-5.340332 0-2.9443359 2.3955078-5.3398438 5.3398438-5.3398438s5.3398438 2.3955078 5.3398438 5.3398438c0 2.9448242-2.3955078 5.340332-5.3398438 5.340332z"/></svg>`,
69
- 'key': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M463.743,48.257c-64.343-64.343-169.037-64.342-233.38,0c-43.946,43.946-59.206,108.725-40.185,167.483L4.395,401.524 C1.581,404.337,0,408.153,0,412.132v84.866C0,505.284,6.717,512,15.002,512h84.866c3.98,0,7.794-1.581,10.609-4.395l21.22-21.22 c3.241-3.242,4.823-7.787,4.293-12.341l-2.648-22.783l31.584-2.977c7.172-0.676,12.852-6.355,13.528-13.527l2.979-31.588 l22.785,2.648c4.254,0.497,8.512-0.851,11.71-3.698c3.196-2.846,5.025-6.923,5.025-11.204v-27.938h27.43 c3.949,0,7.738-1.557,10.547-4.333l37.272-36.842c58.772,19.051,123.583,3.794,167.542-40.166 C528.085,217.294,528.085,112.599,463.743,48.257z M442.527,260.421c-37.866,37.865-94.666,49.684-144.703,30.114 c-5.522-2.159-11.796-0.865-16.011,3.302l-39.593,39.136H205.95c-8.285,0-15.002,6.717-15.002,15.002v26.093l-21.28-2.473 c-4.009-0.465-8.035,0.703-11.172,3.241c-3.136,2.539-5.118,6.234-5.497,10.252l-3.253,34.489l-34.486,3.25 c-4.018,0.379-7.713,2.36-10.253,5.497c-2.539,3.136-3.708,7.164-3.242,11.172l3.582,30.804l-11.694,11.697h-63.65v-63.649 l188.097-188.097c4.214-4.214,5.535-10.523,3.364-16.073c-19.572-50.038-7.751-106.836,30.114-144.703 c52.646-52.644,138.304-52.644,190.948,0C495.17,122.118,495.17,207.777,442.527,260.421z"/></g></g><g><g><path d="M421.309,90.69c-17.548-17.549-46.102-17.548-63.649,0c-17.548,17.548-17.548,46.101,0,63.649 c17.547,17.548,46.101,17.55,63.649,0C438.857,136.791,438.857,108.238,421.309,90.69z M400.093,133.123 c-5.849,5.849-15.366,5.85-21.216,0c-5.849-5.849-5.849-15.366,0-21.216c5.865-5.864,15.352-5.864,21.216,0 C405.957,117.771,405.956,127.259,400.093,133.123z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
70
- 'list': `<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><g id="Todo"><path d="m20.4 12.349a.5.5 0 0 1 -.5.5h-8.612a.5.5 0 0 1 0-1h8.612a.5.5 0 0 1 .5.5zm-9.112-5.549h8.612a.5.5 0 0 0 0-1h-8.612a.5.5 0 0 0 0 1zm-2.9-2.271-2.05 2.418-.84-1.1a.5.5 0 1 0 -.795.606l1.217 1.6a.5.5 0 0 0 .385.2h.013a.5.5 0 0 0 .382-.185l2.451-2.895a.5.5 0 1 0 -.763-.647zm11.512 13.371h-8.612a.5.5 0 0 0 0 1h8.612a.5.5 0 0 0 0-1zm-10.8-5.551a2.249 2.249 0 1 1 -2.251-2.249 2.252 2.252 0 0 1 2.251 2.249zm-1 0a1.249 1.249 0 1 0 -1.251 1.251 1.25 1.25 0 0 0 1.251-1.251zm1 6.053a2.249 2.249 0 1 1 -2.249-2.249 2.251 2.251 0 0 1 2.249 2.247zm-1 0a1.249 1.249 0 1 0 -1.251 1.248 1.25 1.25 0 0 0 1.251-1.25z"/></g></svg>`,
71
- 'load': `<svg id="Layer_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m12 23c-6.1 0-11-4.9-11-11 0-.6.4-1 1-1s1 .4 1 1c0 5 4 9 9 9s9-4 9-9-4-9-9-9c-.6 0-1-.4-1-1s.4-1 1-1c6.1 0 11 4.9 11 11s-4.9 11-11 11z" fill="rgb(0,0,0)"/></g></svg>`,
72
- 'lock': `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g id="Layer_11" fill="rgb(0,0,0)" data-name="Layer 11"><path d="m24 11.57h-.53v-3.1a7.47 7.47 0 1 0 -14.94 0v3.1h-.53a4 4 0 0 0 -4 4v11.43a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-11.43a4 4 0 0 0 -4-4zm-13.47-3.1a5.47 5.47 0 1 1 10.94 0v3.1h-10.94zm15.47 18.53a2 2 0 0 1 -2 2h-16a2 2 0 0 1 -2-2v-11.43a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/><path d="m16 17.926a1.948 1.948 0 0 0 -1.354 3.348v2.371a1 1 0 0 0 1 1h.708a1 1 0 0 0 1-1v-2.371a1.948 1.948 0 0 0 -1.354-3.348z"/></g></svg>`,
73
- 'minus': `<svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m18 11h-12c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z" fill="rgb(0,0,0)"/></svg>`,
74
- 'padlock': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;M96,437v30c0,16.569,13.431,30,30,30h300c16.569,0,30-13.431,30-30V247c0-16.569-13.431-30-30-30H126c-16.569,0-30,13.431-30,30v30&#10;&#9;&#9;"/><rect x="56" y="277" style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" width="80" height="160"/><line style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="136" y1="357" x2="56" y2="357"/><path style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;M196,217v-62c0-44.183,35.817-80,80-80h0c44.183,0,80,35.817,80,80v62h60v-62c0-77.32-62.68-140-140-140h0&#10;&#9;&#9;c-77.32,0-140,62.68-140,140v62H196z"/><circle style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="276" cy="357" r="30"/><line style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="276" y1="387" x2="276" y2="417"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
75
- 'plus': `<svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="rgb(0,0,0)" fill-rule="evenodd"><path d="m12.0313 4.25c.4142.00054.7496.33677.749.75098l-.0183 14.00002c-.0006.4142-.3368.7495-.751.749s-.7496-.3368-.749-.751l.0183-13.99998c.0006-.41422.3368-.74956.751-.74902z"/><path d="m4.25 12c0-.4142.33579-.75.75-.75h14c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-14c-.41421 0-.75-.3358-.75-.75z"/></g></svg>`,
76
- 'question': `<svg id="Layer_1" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="LWPOLYLINE"><g><path d="m31.321 38.904c-.006 0-.012 0-.018 0-1.104-.01-1.992-.913-1.982-2.018l.009-1c0-.057.003-.115.009-.172.277-2.909 2.208-4.692 3.761-6.125.526-.486 1.024-.945 1.448-1.424.517-.583 1.267-1.777.478-3.218-.909-1.664-3.129-2.135-4.854-1.74-1.802.412-2.466 1.951-2.702 2.831-.286 1.067-1.383 1.7-2.45 1.415-1.067-.286-1.7-1.383-1.415-2.45.797-2.977 2.865-5.052 5.673-5.695 3.779-.863 7.585.664 9.256 3.719 1.391 2.544 1.01 5.529-.995 7.791-.557.628-1.152 1.178-1.728 1.709-1.435 1.325-2.332 2.211-2.484 3.49l-.008.903c-.008 1.101-.902 1.984-1.998 1.984z"/></g></g><g id="POINT"><g><path d="m31.32 44.9c-.52 0-1.04-.21-1.41-.58-.38-.37-.59-.89-.59-1.42 0-.52.21-1.04.59-1.41.74-.74 2.08-.74 2.82 0 .38.37.59.89.59 1.41 0 .53-.21 1.04-.58 1.42-.38.37-.89.58-1.42.58z"/></g></g><g id="CIRCLE_2_"><g><path d="m31.923 57.997c-2.275 0-4.53-.296-6.703-.881-9.364-2.519-16.696-10.276-18.679-19.763-2.021-9.665 1.709-19.825 9.504-25.884 4.506-3.503 10.189-5.433 16.003-5.433 4.025 0 8.022.936 11.56 2.705 8.737 4.371 14.382 13.503 14.382 23.266 0 7.966-3.759 15.644-10.055 20.538-4.522 3.516-10.209 5.452-16.012 5.452zm.126-47.961c-4.929 0-9.741 1.63-13.548 4.591-6.597 5.128-9.755 13.727-8.044 21.907 1.678 8.025 7.881 14.588 15.803 16.719 1.834.493 3.74.744 5.663.744h.001c4.918 0 9.732-1.637 13.557-4.61 5.329-4.142 8.51-10.639 8.51-17.38 0-8.261-4.777-15.989-12.171-19.688-2.986-1.493-6.364-2.283-9.771-2.283z"/></g></g></g></svg>`,
77
- 'settings': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M493.758,234.717h-86.347c-10.076,0-18.242,8.166-18.242,18.242c0,10.076,8.166,18.242,18.242,18.242h86.347 c10.076,0,18.242-8.166,18.242-18.242C512,242.884,503.834,234.717,493.758,234.717z"/></g></g><g><g><path d="M275.458,234.717H18.242C8.166,234.717,0,242.884,0,252.96c0,10.076,8.166,18.242,18.242,18.242h257.216 c10.076,0,18.242-8.166,18.242-18.242C293.701,242.884,285.534,234.717,275.458,234.717z"/></g></g><g><g><path d="M341.131,169.045c-46.275,0-83.914,37.646-83.914,83.914c0,46.275,37.646,83.915,83.914,83.915 c46.268,0,83.914-37.64,83.914-83.915C425.045,206.691,387.405,169.045,341.131,169.045z M341.131,300.39 c-26.153,0-47.43-21.277-47.43-47.43c0-26.153,21.277-47.43,47.43-47.43c26.153,0,47.436,21.277,47.436,47.43 C388.567,279.113,367.29,300.39,341.131,300.39z"/></g></g><g><g><path d="M104.589,385.52H18.242C8.166,385.52,0,393.687,0,403.763s8.166,18.242,18.242,18.242h86.347 c10.076,0,18.242-8.166,18.242-18.242S114.665,385.52,104.589,385.52z"/></g></g><g><g><path d="M493.758,385.52H236.542c-10.076,0-18.242,8.167-18.242,18.242s8.166,18.242,18.242,18.242h257.216 c10.076,0,18.242-8.166,18.242-18.242S503.834,385.52,493.758,385.52z"/></g></g><g><g><path d="M170.869,319.848c-46.269,0-83.914,37.64-83.914,83.914s37.646,83.915,83.914,83.915s83.914-37.646,83.914-83.914 S217.138,319.848,170.869,319.848z M170.869,451.199c-26.153,0-47.43-21.277-47.43-47.43c0-26.159,21.277-47.436,47.43-47.436 c26.153,0,47.43,21.277,47.43,47.436C218.299,429.922,197.023,451.199,170.869,451.199z"/></g></g><g><g><path d="M104.589,89.995H18.242C8.166,89.995,0,98.162,0,108.238s8.166,18.242,18.242,18.242h86.347 c10.076,0,18.242-8.166,18.242-18.242S114.665,89.995,104.589,89.995z"/></g></g><g><g><path d="M493.758,89.995H236.542c-10.076,0-18.242,8.167-18.242,18.242s8.166,18.242,18.242,18.242h257.216 c10.076,0,18.242-8.166,18.242-18.242S503.834,89.995,493.758,89.995z"/></g></g><g><g><path d="M170.869,24.323c-46.269,0-83.914,37.646-83.914,83.914c0,46.268,37.646,83.914,83.914,83.914s83.914-37.64,83.914-83.914 C254.784,61.963,217.138,24.323,170.869,24.323z M170.869,155.667c-26.153,0-47.43-21.277-47.43-47.43 c0-26.153,21.277-47.43,47.43-47.43c26.153,0,47.43,21.277,47.43,47.43C218.299,134.391,197.023,155.667,170.869,155.667z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
78
- 'square-rounded-dashed': `<svg fill="none" height="25" viewBox="0 0 24 25" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m11.9979 2.0271h.0042c.6824 0 1.3167 0 1.9043.00498.4142.00351.7471.34213.7436.75633s-.3422.74713-.7564.74362c-.5806-.00493-1.2089-.00493-1.8936-.00493s-1.313 0-1.8937.00493c-.41416.00351-.75278-.32942-.75629-.74362s.32941-.75282.74359-.75633c.5876-.00498 1.2219-.00498 1.9043-.00498zm-4.96054.86429c.07573.40723-.19299.79875-.60022.87449-.9433.17544-1.55071.46794-2.01557.93279-.46485.46486-.75735 1.07227-.93279 2.01557-.07574.40723-.46726.67595-.87449.60022-.40723-.07574-.67596-.46727-.60022-.8745.21113-1.13518.60236-2.05746 1.34684-2.80195.74449-.74449 1.66677-1.13572 2.80195-1.34684.40723-.07574.79876.19299.8745.60022zm9.92524 0c.0758-.40723.4673-.67596.8745-.60022 1.1352.21112 2.0575.60236 2.802 1.34684.7445.74449 1.1357 1.66677 1.3468 2.80195.0758.40723-.193.79876-.6002.8745-.4072.07573-.7987-.19299-.8745-.60022-.1754-.9433-.4679-1.55071-.9328-2.01557-.4648-.46485-1.0722-.75735-2.0155-.93279-.4073-.07574-.676-.46726-.6003-.87449zm-14.45129 6.73574c.4142.00351.74713.34213.74362.75637-.00492.5806-.00493 1.2089-.00493 1.8936s.00001 1.3131.00493 1.8937c.00351.4142-.32942.7528-.74362.7563-.41419.0036-.75282-.3294-.75633-.7436-.00498-.5876-.00498-1.2219-.00498-1.9043v-.0042c0-.6824 0-1.3167.00498-1.9043.00351-.41416.34213-.74709.75633-.74357zm18.97739 0c.4142-.00352.7528.32941.7563.74357.005.5878.005 1.2223.005 1.9048v.0039c0 .6823 0 1.3166-.005 1.9041-.0035.4142-.3421.7472-.7563.7436-.4142-.0035-.7471-.3421-.7436-.7563.0049-.5806.0049-1.209.0049-1.8937s0-1.313-.0049-1.8936c-.0035-.41424.3294-.75286.7436-.75637zm-18.87441 7.61257c.40723-.0757.79875.193.87449.6003.17544.9433.46794 1.5507.93279 2.0155.46486.4649 1.07227.7574 2.01557.9328.40723.0758.67595.4673.60022.8745-.07574.4072-.46727.676-.8745.6002-1.13518-.2111-2.05746-.6023-2.80195-1.3468s-1.13571-1.6668-1.34684-2.802c-.07574-.4072.19299-.7987.60022-.8745zm18.77141 0c.4072.0758.676.4673.6002.8745-.2111 1.1352-.6023 2.0575-1.3468 2.802s-1.6668 1.1357-2.802 1.3468c-.4072.0758-.7987-.193-.8745-.6002-.0757-.4072.193-.7987.6003-.8745.9433-.1754 1.5507-.4679 2.0155-.9328.4649-.4648.7574-1.0722.9328-2.0155.0758-.4073.4673-.676.8745-.6003zm-12.03552 4.5261c.00351-.4142.34214-.7471.75632-.7436.5806.0049 1.2089.0049 1.8935.0049.6847 0 1.313 0 1.8936-.0049.4142-.0035.7529.3294.7564.7436s-.3294.7528-.7436.7563c-.5876.005-1.2218.005-1.9041.005h-.0039c-.6824 0-1.3169 0-1.9046-.005-.4142-.0035-.74713-.3421-.74362-.7563z" fill="rgb(0,0,0)" fill-rule="evenodd"/></svg>`,
79
- 'trash': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>`,
80
- 'user': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
81
- 'users': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M437.76,195.421c14.561-14.261,23.04-33.742,23.04-54.621c0-42.346-34.45-76.8-76.8-76.8 c-13.992,0-27.758,3.846-39.825,11.125c-4.033,2.438-5.333,7.679-2.9,11.717c2.433,4.038,7.683,5.325,11.717,2.9 c9.408-5.675,20.125-8.675,31.008-8.675c32.933,0,59.733,26.796,59.733,59.733c0,20.283-10.158,38.979-27.208,50.037 c-14.317,9.392-32.467,12.1-49.042,7.379c-4.483-1.292-9.25,1.325-10.55,5.858c-1.292,4.533,1.333,9.254,5.867,10.55 c6.9,1.975,14.033,2.975,21.2,2.975c13.418,0,26.388-3.66,37.903-10.27c43.806,15.873,73.03,57.232,73.03,104.137v42.667h-77.812 c-6.044-56.996-41.902-106.872-94.205-130.555c16.644-16.946,26.95-40.138,26.95-65.711C349.867,106.108,307.758,64,256,64 c-51.758,0-93.867,42.108-93.867,93.867c0,25.581,10.312,48.78,26.965,65.728c-17.602,7.997-33.927,19.185-47.773,32.952 c-26.543,26.619-42.695,60.784-46.529,97.588H17.067v-42.667c0-29.55,11.542-57.412,32.467-78.425 c11.519-11.446,25.543-20.178,40.643-25.666C101.694,213.96,114.625,217.6,128,217.6c7.167,0,14.3-1,21.2-2.975 c4.533-1.296,7.158-6.017,5.867-10.55c-1.3-4.533-6.067-7.146-10.55-5.858c-16.567,4.729-34.708,2.025-49.083-7.4 c-17.008-11.038-27.167-29.733-27.167-50.017c0-32.937,26.8-59.733,59.733-59.733c10.883,0,21.6,3,31.008,8.675 c4.05,2.425,9.275,1.125,11.717-2.9c2.433-4.037,1.133-9.279-2.9-11.717C155.758,67.846,141.992,64,128,64 c-42.35,0-76.8,34.454-76.8,76.8c0,20.863,8.465,40.329,22.984,54.577c-13.533,6.291-26.032,14.976-36.717,25.59 C13.308,245.233,0,277.371,0,311.467v51.2c0,4.713,3.817,8.533,8.533,8.533h85.333v68.267c0,4.713,3.817,8.533,8.533,8.533h307.2 c4.717,0,8.533-3.821,8.533-8.533V371.2h85.333c4.717,0,8.533-3.821,8.533-8.533v-51.2 C512,261.012,482.678,216.128,437.76,195.421z M179.2,157.867c0-42.346,34.45-76.8,76.8-76.8c42.35,0,76.8,34.454,76.8,76.8 s-34.45,76.8-76.8,76.8C213.65,234.667,179.2,200.212,179.2,157.867z M401.067,430.933H110.933V371.2 c0-38.692,15.083-75.129,42.45-102.579c14.417-14.34,31.895-25.463,50.634-32.659c14.895,9.947,32.767,15.771,51.983,15.771 c19.248,0,37.151-5.841,52.06-15.818c55.778,21.431,93.007,75.205,93.007,135.285V430.933z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
82
- 'x': `<svg id="Icons" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m4.59 59.41a2 2 0 0 0 2.83 0l24.58-24.58 24.59 24.58a2 2 0 0 0 2.83-2.83l-24.59-24.58 24.58-24.59a2 2 0 0 0 -2.83-2.83l-24.58 24.59-24.59-24.58a2 2 0 0 0 -2.82 2.82l24.58 24.59-24.58 24.59a2 2 0 0 0 0 2.82z"/></svg>`,
83
- };
84
-
85
- /**
86
- * Service for loading and caching icons from both built-in registry and customer uploads.
87
- *
88
- * Built-in icons are stored in memory and returned immediately.
89
- * Customer icons are fetched from the API and cached after first request.
90
- */
91
- class CoarIconService {
92
- http = inject(HttpClient);
93
- customerIconCache = new Map();
94
- /**
95
- * Get an icon by name. Handles both built-in and customer icons.
96
- *
97
- * @param name - Icon identifier (e.g., "settings" or "customer:invoicePaid")
98
- * @returns Observable of SVG string, or null if not found
99
- */
25
+ const COAR_ICON_SOURCE_ENTRY = new InjectionToken('COAR_ICON_SOURCE_ENTRY');
26
+ const COAR_DEFAULT_ICON_SOURCE_KEY = new InjectionToken('COAR_DEFAULT_ICON_SOURCE_KEY');
27
+ function provideCoarIconSource(options) {
28
+ return {
29
+ provide: COAR_ICON_SOURCE_ENTRY,
30
+ useValue: {
31
+ key: options.key,
32
+ source: options.source,
33
+ },
34
+ multi: true,
35
+ };
36
+ }
37
+ function provideCoarIconMapSource(options) {
38
+ return provideCoarIconSource({
39
+ key: options.key,
40
+ source: new CoarIconMapSource(options.icons),
41
+ });
42
+ }
43
+ function provideCoarDefaultIconSource(key) {
44
+ return {
45
+ provide: COAR_DEFAULT_ICON_SOURCE_KEY,
46
+ useValue: key,
47
+ multi: true,
48
+ };
49
+ }
50
+ function provideCoarHttpIconSource(options) {
51
+ return {
52
+ provide: COAR_ICON_SOURCE_ENTRY,
53
+ multi: true,
54
+ useFactory: () => {
55
+ const http = inject(HttpClient);
56
+ const getAvailableIconKeys = options.getAvailableIconKeys;
57
+ return {
58
+ key: options.key,
59
+ source: new CoarHttpIconSource(http, options.getUrl, getAvailableIconKeys ? () => getAvailableIconKeys(http) : undefined),
60
+ };
61
+ },
62
+ };
63
+ }
64
+ class CoarIconMapSource {
65
+ icons;
66
+ constructor(icons) {
67
+ this.icons = icons;
68
+ }
100
69
  getIcon(name) {
101
- const parsed = this.parseIconName(name);
102
- if (parsed.source === 'builtin') {
103
- return this.getBuiltInIcon(parsed.key);
104
- }
105
- else if (parsed.source === 'customer') {
106
- return this.getCustomerIcon(parsed.key);
107
- }
108
- return of(null);
70
+ return of(this.icons[name] ?? null);
109
71
  }
110
- /**
111
- * Parse icon name into source type and key.
112
- *
113
- * Examples:
114
- * - "settings" -> { source: "builtin", key: "settings" }
115
- * - "customer:invoicePaid" -> { source: "customer", key: "invoicePaid" }
116
- */
117
- parseIconName(name) {
118
- if (name.startsWith('customer:')) {
119
- return {
120
- source: 'customer',
121
- key: name.substring(9),
72
+ getAvailableIconKeys() {
73
+ return of(Object.keys(this.icons).sort());
74
+ }
75
+ }
76
+ class CoarHttpIconSource {
77
+ http;
78
+ getUrl;
79
+ cache = new Map();
80
+ iconKeys$;
81
+ getAvailableIconKeys;
82
+ constructor(http, getUrl, getAvailableIconKeysFactory) {
83
+ this.http = http;
84
+ this.getUrl = getUrl;
85
+ if (getAvailableIconKeysFactory) {
86
+ this.getAvailableIconKeys = () => {
87
+ if (!this.iconKeys$) {
88
+ this.iconKeys$ = getAvailableIconKeysFactory().pipe(shareReplay(1));
89
+ }
90
+ return this.iconKeys$;
122
91
  };
123
92
  }
124
- return {
125
- source: 'builtin',
126
- key: name,
127
- };
128
93
  }
129
- /**
130
- * Get a built-in icon from the in-memory registry.
131
- */
132
- getBuiltInIcon(key) {
133
- const svg = CORE_ICONS[key] || null;
134
- return of(svg || null);
135
- }
136
- /**
137
- * Get a customer icon from the API, with caching.
138
- * Uses shareReplay(1) to ensure only one network request per icon.
139
- */
140
- getCustomerIcon(key) {
141
- const cached = this.customerIconCache.get(key);
142
- if (cached) {
94
+ getIcon(name) {
95
+ const cached = this.cache.get(name);
96
+ if (cached)
143
97
  return cached;
144
- }
145
98
  const request$ = this.http
146
- .get(`/api/icons/${key}.svg`, {
99
+ .get(this.getUrl(name), {
147
100
  responseType: 'text',
148
101
  })
149
102
  .pipe(catchError(() => of(null)), shareReplay(1));
150
- this.customerIconCache.set(key, request$);
103
+ this.cache.set(name, request$);
151
104
  return request$;
152
105
  }
106
+ clearCache() {
107
+ this.cache.clear();
108
+ this.iconKeys$ = undefined;
109
+ }
110
+ clearIconCache(name) {
111
+ this.cache.delete(name);
112
+ }
113
+ }
114
+
115
+ class CoarIconService {
116
+ sourceEntries = (inject(COAR_ICON_SOURCE_ENTRY, { optional: true }) ?? []);
117
+ defaultSourceOverrides = (inject(COAR_DEFAULT_ICON_SOURCE_KEY, {
118
+ optional: true,
119
+ }) ?? []);
120
+ sourceByKey = new Map((this.sourceEntries ?? []).map((entry) => [entry.key, entry.source]));
153
121
  /**
154
- * Clear the customer icon cache.
155
- * Useful when icons are updated on the server.
122
+ * Get an icon by name from a specific icon source.
123
+ *
124
+ * - If `sourceKey` is omitted, the default source is used.
125
+ * - If no source is configured, this throws to make misconfiguration obvious.
156
126
  */
157
- clearCache() {
158
- this.customerIconCache.clear();
127
+ getIcon(name, sourceKey) {
128
+ const source = this.getSourceOrThrow(sourceKey);
129
+ return source.getIcon(name);
159
130
  }
160
131
  /**
161
- * Clear a specific icon from the cache.
132
+ * List all registered icon sources.
133
+ *
134
+ * This is useful for UIs that allow users to browse icons grouped by source.
162
135
  */
136
+ getRegisteredSources() {
137
+ if (this.sourceByKey.size === 0)
138
+ return [];
139
+ const defaultKey = this.getDefaultSourceKeyOrThrow();
140
+ const entries = this.sourceEntries ??
141
+ Array.from(this.sourceByKey.entries()).map(([key, source]) => ({ key, source }));
142
+ return entries.map((entry) => ({
143
+ key: entry.key,
144
+ isDefault: entry.key === defaultKey,
145
+ canProvideIconKeys: typeof entry.source.getAvailableIconKeys === 'function',
146
+ }));
147
+ }
148
+ /**
149
+ * Get the available icon keys from a specific source.
150
+ *
151
+ * Throws if the source does not support listing keys.
152
+ */
153
+ getAvailableIconKeys(sourceKey) {
154
+ const entry = this.getSourceEntryOrThrow(sourceKey);
155
+ if (!entry.source.getAvailableIconKeys) {
156
+ throw new Error(`Coar icon source "${entry.key}" does not support listing available icon keys.`);
157
+ }
158
+ return entry.source.getAvailableIconKeys();
159
+ }
160
+ clearCache() {
161
+ for (const source of this.sourceByKey.values()) {
162
+ source.clearCache?.();
163
+ }
164
+ }
163
165
  clearIconCache(name) {
164
- const parsed = this.parseIconName(name);
165
- if (parsed.source === 'customer') {
166
- this.customerIconCache.delete(parsed.key);
166
+ for (const source of this.sourceByKey.values()) {
167
+ source.clearIconCache?.(name);
168
+ }
169
+ }
170
+ getSourceOrThrow(sourceKey) {
171
+ if (this.sourceByKey.size === 0) {
172
+ throw new Error('No Coar icon source is configured. Provide at least one source via provideCoarIconSource(), provideCoarIconMapSource(), provideCoarIconBuiltInSourceAs(), or provideCoarHttpIconSource().');
173
+ }
174
+ const effectiveKey = sourceKey ?? this.getDefaultSourceKeyOrThrow();
175
+ const source = this.sourceByKey.get(effectiveKey);
176
+ if (!source) {
177
+ throw new Error(`Unknown Coar icon source key: "${effectiveKey}".`);
178
+ }
179
+ return source;
180
+ }
181
+ getSourceEntryOrThrow(sourceKey) {
182
+ if (this.sourceByKey.size === 0) {
183
+ throw new Error('No Coar icon source is configured. Provide at least one source via provideCoarIconSource(), provideCoarIconMapSource(), provideCoarIconBuiltInSourceAs(), or provideCoarHttpIconSource().');
184
+ }
185
+ const effectiveKey = sourceKey ?? this.getDefaultSourceKeyOrThrow();
186
+ const source = this.sourceByKey.get(effectiveKey);
187
+ if (!source) {
188
+ throw new Error(`Unknown Coar icon source key: "${effectiveKey}".`);
167
189
  }
190
+ return { key: effectiveKey, source };
191
+ }
192
+ getDefaultSourceKeyOrThrow() {
193
+ const overrideKey = this.defaultSourceOverrides
194
+ ? this.defaultSourceOverrides[this.defaultSourceOverrides.length - 1]
195
+ : undefined;
196
+ if (overrideKey) {
197
+ if (!this.sourceByKey.has(overrideKey)) {
198
+ throw new Error(`Default Coar icon source key "${overrideKey}" was provided but no source with that key is registered.`);
199
+ }
200
+ return overrideKey;
201
+ }
202
+ // First registered source becomes default.
203
+ return this.sourceEntries?.[0]?.key ?? Array.from(this.sourceByKey.keys())[0];
168
204
  }
169
205
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
170
206
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconService, providedIn: 'root' });
@@ -179,12 +215,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
179
215
  /**
180
216
  * COAR Icon Component
181
217
  *
182
- * Hybrid icon system supporting built-in icons and customer-uploaded SVGs.
218
+ * Icon component supporting DI-provided icon registries.
183
219
  *
184
220
  * Usage:
185
221
  * ```html
186
222
  * <coar-icon name="settings" size="md"></coar-icon>
187
- * <coar-icon name="customer:invoicePaid" size="lg"></coar-icon>
188
223
  * ```
189
224
  *
190
225
  * Size tokens:
@@ -198,11 +233,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
198
233
  class CoarIconComponent {
199
234
  iconService = inject(CoarIconService);
200
235
  sanitizer = inject(DomSanitizer);
236
+ iconLoadVersion = 0;
201
237
  /**
202
238
  * Icon identifier.
203
- * Examples: "settings", "user", "customer:invoicePaid"
239
+ * Examples: "settings", "user"
204
240
  */
205
241
  name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
242
+ /**
243
+ * Optional icon source key.
244
+ *
245
+ * - If omitted, the default source is used.
246
+ * - If multiple sources are registered, this can be used to target a specific one.
247
+ */
248
+ source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : []));
206
249
  /**
207
250
  * Icon size. Defaults to 'md' (20px).
208
251
  * Can be a preset token (xs, sm, md, lg, xl, auto) or a custom CSS value (e.g., '42px', '3rem').
@@ -233,11 +276,6 @@ class CoarIconComponent {
233
276
  * Optional text label to display next to the icon.
234
277
  */
235
278
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
236
- /**
237
- * Optional fallback icon to show if the requested icon fails to load.
238
- * If not specified and the icon fails, nothing will be rendered.
239
- */
240
- fallback;
241
279
  /**
242
280
  * Signal holding the sanitized SVG HTML ready for rendering.
243
281
  */
@@ -270,126 +308,114 @@ class CoarIconComponent {
270
308
  constructor() {
271
309
  effect(() => {
272
310
  const iconName = this.name();
311
+ const sourceKey = this.source();
273
312
  if (!iconName) {
313
+ this.iconLoadVersion++;
274
314
  this.sanitizedSvg.set(null);
315
+ this.isLoading.set(false);
275
316
  return;
276
317
  }
277
- this.loadIcon(iconName);
278
- });
279
- }
280
- /**
281
- * Load an icon from the service and sanitize it.
282
- */
283
- loadIcon(name) {
284
- this.isLoading.set(true);
285
- this.iconService.getIcon(name).subscribe({
286
- next: (svg) => {
287
- if (svg) {
288
- this.sanitizedSvg.set(this.sanitizer.bypassSecurityTrustHtml(svg));
318
+ const loadVersion = ++this.iconLoadVersion;
319
+ // Clear any previously rendered SVG so the template can show the loading placeholder.
320
+ this.sanitizedSvg.set(null);
321
+ this.isLoading.set(true);
322
+ const subscription = this.resolveIcon$(iconName, sourceKey)
323
+ .pipe(finalize(() => {
324
+ if (loadVersion === this.iconLoadVersion) {
289
325
  this.isLoading.set(false);
290
326
  }
291
- else {
292
- console.debug(`Loading customer icon: ${name}`);
293
- this.loadFallback();
327
+ }))
328
+ .subscribe((svg) => {
329
+ if (loadVersion !== this.iconLoadVersion) {
330
+ return;
294
331
  }
295
- },
296
- error: () => {
297
- console.debug(`Loading customer icon: ${name}`);
298
- this.loadFallback();
299
- },
332
+ if (!svg) {
333
+ this.sanitizedSvg.set(null);
334
+ return;
335
+ }
336
+ this.sanitizedSvg.set(this.sanitizer.bypassSecurityTrustHtml(svg));
337
+ });
338
+ // Important: cancel in-flight icon loads if `name` changes or the component is destroyed.
339
+ return () => subscription.unsubscribe();
300
340
  });
301
341
  }
302
342
  /**
303
- * Load fallback icon if available.
343
+ * Resolve an icon name to an SVG string.
344
+ *
345
+ * This is kept as a single observable chain so callers can cancel it.
304
346
  */
305
- loadFallback() {
306
- if (this.fallback) {
307
- this.iconService.getIcon(this.fallback).subscribe({
308
- next: (svg) => {
309
- if (svg) {
310
- this.sanitizedSvg.set(this.sanitizer.bypassSecurityTrustHtml(svg));
311
- }
312
- else {
313
- this.sanitizedSvg.set(null);
314
- }
315
- this.isLoading.set(false);
316
- },
317
- error: () => {
318
- this.sanitizedSvg.set(null);
319
- this.isLoading.set(false);
320
- },
321
- });
322
- }
323
- else {
324
- this.sanitizedSvg.set(null);
325
- this.isLoading.set(false);
326
- }
347
+ resolveIcon$(name, sourceKey) {
348
+ return this.iconService.getIcon(name, sourceKey).pipe(catchError(() => of(null)));
327
349
  }
328
350
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
329
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarIconComponent, isStandalone: true, selector: "coar-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, rotateTransition: { classPropertyName: "rotateTransition", publicName: "rotateTransition", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-name": "name()" } }, ngImport: i0, template: `
330
- @if(name()) { @if (sanitizedSvg(); as svg) {
331
- <div
332
- class="coar-icon"
333
- [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
334
- [class.coar-icon--spin]="spin()"
335
- [style.transform]="'rotate(' + rotate() + 'deg)'"
336
- [style.color]="color()"
337
- [style.width]="!isPresetSize(size()) ? size() : null"
338
- [style.height]="!isPresetSize(size()) ? size() : null"
339
- [style.transition]="getRotateTransitionValue()"
340
- [innerHTML]="svg"
341
- ></div>
342
- } @else if (isLoading()) {
343
- <div
344
- class="coar-icon coar-icon--loading"
345
- [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
346
- [style.width]="!isPresetSize(size()) ? size() : null"
347
- [style.height]="!isPresetSize(size()) ? size() : null"
348
- ></div>
349
- } } @if (label()) {
350
- <span class="coar-icon__label">{{ label() }}</span>
351
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarIconComponent, isStandalone: true, selector: "coar-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, rotateTransition: { classPropertyName: "rotateTransition", publicName: "rotateTransition", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-name": "name()" } }, ngImport: i0, template: `
352
+ @if (name()) {
353
+ @if (sanitizedSvg(); as svg) {
354
+ <div
355
+ class="coar-icon"
356
+ [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
357
+ [class.coar-icon--spin]="spin()"
358
+ [style.transform]="'rotate(' + rotate() + 'deg)'"
359
+ [style.color]="color()"
360
+ [style.width]="!isPresetSize(size()) ? size() : null"
361
+ [style.height]="!isPresetSize(size()) ? size() : null"
362
+ [style.transition]="getRotateTransitionValue()"
363
+ [innerHTML]="svg"
364
+ ></div>
365
+ } @else if (isLoading()) {
366
+ <div
367
+ class="coar-icon coar-icon--loading"
368
+ [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
369
+ [style.width]="!isPresetSize(size()) ? size() : null"
370
+ [style.height]="!isPresetSize(size()) ? size() : null"
371
+ ></div>
372
+ }
373
+ }
374
+ @if (label()) {
375
+ <span class="coar-icon__label">{{ label() }}</span>
351
376
  } @else {
352
- <span class="coar-icon__label">
353
- <ng-content></ng-content>
354
- </span>
377
+ <span class="coar-icon__label">
378
+ <ng-content></ng-content>
379
+ </span>
355
380
  }
356
381
  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;max-width:100%;max-height:100%}.coar-icon{display:flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;aspect-ratio:1}.coar-icon ::ng-deep svg{width:100%;height:100%;display:block;fill:currentColor}.coar-icon ::ng-deep svg path,.coar-icon ::ng-deep svg circle,.coar-icon ::ng-deep svg rect,.coar-icon ::ng-deep svg polygon,.coar-icon ::ng-deep svg polyline,.coar-icon ::ng-deep svg line,.coar-icon ::ng-deep svg ellipse{fill:currentColor}.coar-icon ::ng-deep svg[stroke=currentColor] path,.coar-icon ::ng-deep svg[stroke=currentColor] circle,.coar-icon ::ng-deep svg[stroke=currentColor] line{fill:none;stroke:currentColor}.coar-icon--xs{width:12px;height:12px}.coar-icon--sm{width:16px;height:16px}.coar-icon--md{width:20px;height:20px}.coar-icon--lg{width:24px;height:24px}.coar-icon--xl{width:32px;height:32px}.coar-icon--auto{width:auto;height:100%;max-width:1em;max-height:1em}.coar-icon--loading{opacity:.3;background:currentColor;border-radius:2px}.coar-icon--spin{animation:coar-icon-spin 1s linear infinite}.coar-icon__label{margin-left:var(--coar-spacing-xs)}.coar-icon__label:empty{margin-left:0}@keyframes coar-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
357
382
  }
358
383
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconComponent, decorators: [{
359
384
  type: Component,
360
385
  args: [{ selector: 'coar-icon', standalone: true, imports: [], template: `
361
- @if(name()) { @if (sanitizedSvg(); as svg) {
362
- <div
363
- class="coar-icon"
364
- [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
365
- [class.coar-icon--spin]="spin()"
366
- [style.transform]="'rotate(' + rotate() + 'deg)'"
367
- [style.color]="color()"
368
- [style.width]="!isPresetSize(size()) ? size() : null"
369
- [style.height]="!isPresetSize(size()) ? size() : null"
370
- [style.transition]="getRotateTransitionValue()"
371
- [innerHTML]="svg"
372
- ></div>
373
- } @else if (isLoading()) {
374
- <div
375
- class="coar-icon coar-icon--loading"
376
- [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
377
- [style.width]="!isPresetSize(size()) ? size() : null"
378
- [style.height]="!isPresetSize(size()) ? size() : null"
379
- ></div>
380
- } } @if (label()) {
381
- <span class="coar-icon__label">{{ label() }}</span>
386
+ @if (name()) {
387
+ @if (sanitizedSvg(); as svg) {
388
+ <div
389
+ class="coar-icon"
390
+ [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
391
+ [class.coar-icon--spin]="spin()"
392
+ [style.transform]="'rotate(' + rotate() + 'deg)'"
393
+ [style.color]="color()"
394
+ [style.width]="!isPresetSize(size()) ? size() : null"
395
+ [style.height]="!isPresetSize(size()) ? size() : null"
396
+ [style.transition]="getRotateTransitionValue()"
397
+ [innerHTML]="svg"
398
+ ></div>
399
+ } @else if (isLoading()) {
400
+ <div
401
+ class="coar-icon coar-icon--loading"
402
+ [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
403
+ [style.width]="!isPresetSize(size()) ? size() : null"
404
+ [style.height]="!isPresetSize(size()) ? size() : null"
405
+ ></div>
406
+ }
407
+ }
408
+ @if (label()) {
409
+ <span class="coar-icon__label">{{ label() }}</span>
382
410
  } @else {
383
- <span class="coar-icon__label">
384
- <ng-content></ng-content>
385
- </span>
411
+ <span class="coar-icon__label">
412
+ <ng-content></ng-content>
413
+ </span>
386
414
  }
387
415
  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
388
416
  '[attr.icon-name]': 'name()',
389
417
  }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;max-width:100%;max-height:100%}.coar-icon{display:flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;aspect-ratio:1}.coar-icon ::ng-deep svg{width:100%;height:100%;display:block;fill:currentColor}.coar-icon ::ng-deep svg path,.coar-icon ::ng-deep svg circle,.coar-icon ::ng-deep svg rect,.coar-icon ::ng-deep svg polygon,.coar-icon ::ng-deep svg polyline,.coar-icon ::ng-deep svg line,.coar-icon ::ng-deep svg ellipse{fill:currentColor}.coar-icon ::ng-deep svg[stroke=currentColor] path,.coar-icon ::ng-deep svg[stroke=currentColor] circle,.coar-icon ::ng-deep svg[stroke=currentColor] line{fill:none;stroke:currentColor}.coar-icon--xs{width:12px;height:12px}.coar-icon--sm{width:16px;height:16px}.coar-icon--md{width:20px;height:20px}.coar-icon--lg{width:24px;height:24px}.coar-icon--xl{width:32px;height:32px}.coar-icon--auto{width:auto;height:100%;max-width:1em;max-height:1em}.coar-icon--loading{opacity:.3;background:currentColor;border-radius:2px}.coar-icon--spin{animation:coar-icon-spin 1s linear infinite}.coar-icon__label{margin-left:var(--coar-spacing-xs)}.coar-icon__label:empty{margin-left:0}@keyframes coar-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
390
- }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], rotateTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateTransition", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fallback: [{
391
- type: Input
392
- }] } });
418
+ }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], rotateTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateTransition", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
393
419
 
394
420
  function coarProvideValueAccessor(type) {
395
421
  return {
@@ -498,7 +524,7 @@ class CoarTextInputComponent extends CoarControlValueAccessor {
498
524
  this.inputRef()?.nativeElement.focus();
499
525
  }
500
526
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
501
- 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 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", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
527
+ 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 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 });
502
528
  }
503
529
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, decorators: [{
504
530
  type: Component,
@@ -998,7 +1024,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
998
1024
  }
999
1025
  }
1000
1026
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1001
- 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 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\" [size]=\"iconSize()\"></coar-icon>\n </button>\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\" [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", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1027
+ 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 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\" [size]=\"iconSize()\"></coar-icon>\n </button>\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\" [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 });
1002
1028
  }
1003
1029
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, decorators: [{
1004
1030
  type: Component,
@@ -1105,7 +1131,7 @@ class CoarPasswordInputComponent extends CoarControlValueAccessor {
1105
1131
  }
1106
1132
  }
1107
1133
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1108
- 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\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\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", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1134
+ 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\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\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 });
1109
1135
  }
1110
1136
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, decorators: [{
1111
1137
  type: Component,
@@ -1939,7 +1965,7 @@ class CoarSingleSelectComponent extends CoarSelectBase {
1939
1965
  return chromeHeight + searchHeight + listHeight;
1940
1966
  }
1941
1967
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1942
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarSingleSelectComponent, isStandalone: true, selector: "coar-single-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-single-select--xs": "size() === \"xs\"", "class.coar-single-select--sm": "size() === \"sm\"", "class.coar-single-select--md": "size() === \"md\"", "class.coar-single-select--lg": "size() === \"lg\"", "class.coar-single-select--disabled": "isDisabled()", "class.coar-single-select--readonly": "readonly()", "class.coar-single-select--error": "hasError()", "class.coar-single-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarSingleSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Select Trigger -->\n <div\n class=\"coar-select-trigger\"\n #trigger\n [class.coar-select-trigger--focused]=\"isFocused()\"\n [class.coar-select-trigger--disabled]=\"isDisabled()\"\n [class.coar-select-trigger--readonly]=\"readonly()\"\n [class.coar-select-trigger--error]=\"hasError()\"\n [class.coar-select-trigger--open]=\"isOpen()\"\n [id]=\"inputId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n role=\"combobox\"\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n <!-- Selected Value or Placeholder -->\n <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOption()\">\n @if (selectedOption(); as option) {\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-value-icon\" />\n }\n {{ option.label }}\n } @else {\n {{ placeholder() }}\n }\n </span>\n\n <!-- Actions -->\n <span class=\"coar-select-actions\">\n <!-- Clear Button -->\n @if (showClearButton()) {\n <button\n type=\"button\"\n class=\"coar-select-clear\"\n tabindex=\"-1\"\n aria-label=\"Clear selection\"\n (click)=\"clearSelection($event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon\n name=\"caret-right\"\n size=\"auto\"\n class=\"coar-select-arrow\"\n [class.coar-select-arrow--open]=\"isOpen()\"\n />\n </span>\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Search Input -->\n @if (searchable()) {\n <div class=\"coar-select-search\">\n <input\n #searchInput\n type=\"text\"\n class=\"coar-select-search-input\"\n [id]=\"searchInputId()\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n </div>\n }\n\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-select-option\"\n [class.coar-select-option--selected]=\"isSelected(option)\"\n [class.coar-select-option--highlighted]=\"isHighlighted(i)\"\n [class.coar-select-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"selectOption($any(option))\"\n (keydown.enter)=\"selectOption($any(option))\"\n (mouseenter)=\"setHighlightFromDisplay(i)\"\n >\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-option-icon\" />\n }\n <span class=\"coar-select-option-label\">{{ option.label }}</span>\n @if (isSelected(option)) {\n <coar-icon name=\"check\" size=\"sm\" class=\"coar-select-option-check\" />\n }\n </div>\n } @empty {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No results found\n } @else {\n No options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-single-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-single-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-single-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-single-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-single-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-single-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-single-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-single-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-single-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-single-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-select-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-select-option:hover:not(.coar-select-option--disabled),.coar-select-option--highlighted:not(.coar-select-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-select-option--selected{background:var(--coar-surface-accent-secondary);color:var(--coar-text-accent-primary)}.coar-select-option--selected:hover,.coar-select-option--selected.coar-select-option--highlighted{background:var(--coar-surface-accent-secondary)}.coar-select-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-select-option-icon{flex-shrink:0;color:inherit}.coar-select-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-option-check{flex-shrink:0;color:var(--coar-icon-accent-primary)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1968
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarSingleSelectComponent, isStandalone: true, selector: "coar-single-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-single-select--xs": "size() === \"xs\"", "class.coar-single-select--sm": "size() === \"sm\"", "class.coar-single-select--md": "size() === \"md\"", "class.coar-single-select--lg": "size() === \"lg\"", "class.coar-single-select--disabled": "isDisabled()", "class.coar-single-select--readonly": "readonly()", "class.coar-single-select--error": "hasError()", "class.coar-single-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarSingleSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Select Trigger -->\n <div\n class=\"coar-select-trigger\"\n #trigger\n [class.coar-select-trigger--focused]=\"isFocused()\"\n [class.coar-select-trigger--disabled]=\"isDisabled()\"\n [class.coar-select-trigger--readonly]=\"readonly()\"\n [class.coar-select-trigger--error]=\"hasError()\"\n [class.coar-select-trigger--open]=\"isOpen()\"\n [id]=\"inputId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n role=\"combobox\"\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n <!-- Selected Value or Placeholder -->\n <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOption()\">\n @if (selectedOption(); as option) {\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-value-icon\" />\n }\n {{ option.label }}\n } @else {\n {{ placeholder() }}\n }\n </span>\n\n <!-- Actions -->\n <span class=\"coar-select-actions\">\n <!-- Clear Button -->\n @if (showClearButton()) {\n <button\n type=\"button\"\n class=\"coar-select-clear\"\n tabindex=\"-1\"\n aria-label=\"Clear selection\"\n (click)=\"clearSelection($event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon\n name=\"caret-right\"\n size=\"auto\"\n class=\"coar-select-arrow\"\n [class.coar-select-arrow--open]=\"isOpen()\"\n />\n </span>\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Search Input -->\n @if (searchable()) {\n <div class=\"coar-select-search\">\n <input\n #searchInput\n type=\"text\"\n class=\"coar-select-search-input\"\n [id]=\"searchInputId()\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n </div>\n }\n\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-select-option\"\n [class.coar-select-option--selected]=\"isSelected(option)\"\n [class.coar-select-option--highlighted]=\"isHighlighted(i)\"\n [class.coar-select-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"selectOption($any(option))\"\n (keydown.enter)=\"selectOption($any(option))\"\n (mouseenter)=\"setHighlightFromDisplay(i)\"\n >\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-option-icon\" />\n }\n <span class=\"coar-select-option-label\">{{ option.label }}</span>\n @if (isSelected(option)) {\n <coar-icon name=\"check\" size=\"sm\" class=\"coar-select-option-check\" />\n }\n </div>\n } @empty {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No results found\n } @else {\n No options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-single-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-single-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-single-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-single-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-single-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-single-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-single-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-single-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-single-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-single-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-select-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-select-option:hover:not(.coar-select-option--disabled),.coar-select-option--highlighted:not(.coar-select-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-select-option--selected{background:var(--coar-surface-accent-secondary);color:var(--coar-text-accent-primary)}.coar-select-option--selected:hover,.coar-select-option--selected.coar-select-option--highlighted{background:var(--coar-surface-accent-secondary)}.coar-select-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-select-option-icon{flex-shrink:0;color:inherit}.coar-select-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-option-check{flex-shrink:0;color:var(--coar-icon-accent-primary)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-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"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1943
1969
  }
1944
1970
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSingleSelectComponent, decorators: [{
1945
1971
  type: Component,
@@ -2200,7 +2226,7 @@ class CoarMultiSelectComponent extends CoarSelectBase {
2200
2226
  return chromeHeight + searchHeight + selectAllHeight + listHeight;
2201
2227
  }
2202
2228
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2203
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMultiSelectComponent, isStandalone: true, selector: "coar-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-multi-select--xs": "size() === \"xs\"", "class.coar-multi-select--sm": "size() === \"sm\"", "class.coar-multi-select--md": "size() === \"md\"", "class.coar-multi-select--lg": "size() === \"lg\"", "class.coar-multi-select--disabled": "isDisabled()", "class.coar-multi-select--readonly": "readonly()", "class.coar-multi-select--error": "hasError()", "class.coar-multi-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarMultiSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Select Trigger -->\n <div\n class=\"coar-select-trigger\"\n #trigger\n [class.coar-select-trigger--focused]=\"isFocused()\"\n [class.coar-select-trigger--disabled]=\"isDisabled()\"\n [class.coar-select-trigger--readonly]=\"readonly()\"\n [class.coar-select-trigger--error]=\"hasError()\"\n [class.coar-select-trigger--open]=\"isOpen()\"\n [id]=\"inputId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n role=\"combobox\"\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n <!-- Selected Values or Placeholder -->\n <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOptions().length\">\n @if (selectedOptions().length) {\n {{ getDisplayText() }}\n } @else {\n {{ placeholder() }}\n }\n </span>\n\n <!-- Actions -->\n <span class=\"coar-select-actions\">\n <!-- Selection Count Badge -->\n @if (selectedOptions().length > 0) {\n <span class=\"coar-multi-count\">{{ selectedOptions().length }}</span>\n }\n\n <!-- Clear Button -->\n @if (showClearButton()) {\n <button\n type=\"button\"\n class=\"coar-select-clear\"\n tabindex=\"-1\"\n aria-label=\"Clear all selections\"\n (click)=\"clearSelection($event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon\n name=\"caret-right\"\n size=\"auto\"\n class=\"coar-select-arrow\"\n [class.coar-select-arrow--open]=\"isOpen()\"\n />\n </span>\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Search Input -->\n @if (searchable()) {\n <div class=\"coar-select-search\">\n <input\n #searchInput\n type=\"text\"\n class=\"coar-select-search-input\"\n [id]=\"searchInputId()\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n </div>\n }\n\n <!-- Select All Option -->\n @if (showSelectAll() && !searchQuery()) {\n <div\n class=\"coar-multi-option coar-multi-option--select-all\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"allSelected()\"\n (click)=\"toggleAll($event)\"\n (keydown.enter)=\"toggleAll($event)\"\n >\n <span\n class=\"coar-multi-checkbox\"\n [class.coar-multi-checkbox--checked]=\"allSelected()\"\n [class.coar-multi-checkbox--indeterminate]=\"someSelected()\"\n >\n @if (allSelected()) {\n <coar-icon name=\"check\" size=\"auto\" />\n } @else if (someSelected()) {\n <coar-icon name=\"minus\" size=\"auto\" />\n }\n </span>\n <span class=\"coar-multi-option-label\">Select All</span>\n </div>\n <div class=\"coar-multi-divider\"></div>\n }\n\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-multi-option\"\n [class.coar-multi-option--selected]=\"isSelected(option)\"\n [class.coar-multi-option--highlighted]=\"isHighlighted(i)\"\n [class.coar-multi-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"toggleOption($any(option), $event)\"\n (keydown.enter)=\"toggleOption($any(option), $event)\"\n (mouseenter)=\"setHighlightFromDisplay(i)\"\n >\n <span\n class=\"coar-multi-checkbox\"\n [class.coar-multi-checkbox--checked]=\"isSelected(option)\"\n >\n @if (isSelected(option)) {\n <coar-icon name=\"check\" size=\"auto\" />\n }\n </span>\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-multi-option-icon\" />\n }\n <span class=\"coar-multi-option-label\">{{ option.label }}</span>\n </div>\n } @empty {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No results found\n } @else {\n No options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-multi-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-multi-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-multi-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-multi-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-multi-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-multi-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-multi-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-multi-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-multi-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-multi-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--coar-spacing-xs);background:var(--coar-surface-accent-primary);color:var(--coar-text-on-bold);font-size:11px;font-weight:600;border-radius:var(--coar-radius-full)}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-multi-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-dropdown--top .coar-multi-divider{order:-1}.coar-select-dropdown--top .coar-multi-option--select-all{border-bottom:none}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-multi-option{display:flex;align-items:center;gap:var(--coar-spacing-s);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-multi-option:hover:not(.coar-multi-option--disabled),.coar-multi-option--highlighted:not(.coar-multi-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-multi-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-multi-option--select-all{font-weight:600}.coar-multi-checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}.coar-multi-checkbox--checked,.coar-multi-checkbox--indeterminate{background:var(--coar-surface-accent-primary);border-color:var(--coar-border-accent-primary);color:var(--coar-icon-on-bold)}.coar-multi-checkbox coar-icon{width:10px;height:10px}.coar-multi-option-icon{flex-shrink:0;color:inherit}.coar-multi-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-multi-divider{height:1px;margin:var(--coar-spacing-xs) 0;background:var(--coar-border-neutral)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2229
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMultiSelectComponent, isStandalone: true, selector: "coar-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-multi-select--xs": "size() === \"xs\"", "class.coar-multi-select--sm": "size() === \"sm\"", "class.coar-multi-select--md": "size() === \"md\"", "class.coar-multi-select--lg": "size() === \"lg\"", "class.coar-multi-select--disabled": "isDisabled()", "class.coar-multi-select--readonly": "readonly()", "class.coar-multi-select--error": "hasError()", "class.coar-multi-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarMultiSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Select Trigger -->\n <div\n class=\"coar-select-trigger\"\n #trigger\n [class.coar-select-trigger--focused]=\"isFocused()\"\n [class.coar-select-trigger--disabled]=\"isDisabled()\"\n [class.coar-select-trigger--readonly]=\"readonly()\"\n [class.coar-select-trigger--error]=\"hasError()\"\n [class.coar-select-trigger--open]=\"isOpen()\"\n [id]=\"inputId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n role=\"combobox\"\n (click)=\"toggleDropdown(); $event.stopPropagation()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >\n <!-- Selected Values or Placeholder -->\n <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOptions().length\">\n @if (selectedOptions().length) {\n {{ getDisplayText() }}\n } @else {\n {{ placeholder() }}\n }\n </span>\n\n <!-- Actions -->\n <span class=\"coar-select-actions\">\n <!-- Selection Count Badge -->\n @if (selectedOptions().length > 0) {\n <span class=\"coar-multi-count\">{{ selectedOptions().length }}</span>\n }\n\n <!-- Clear Button -->\n @if (showClearButton()) {\n <button\n type=\"button\"\n class=\"coar-select-clear\"\n tabindex=\"-1\"\n aria-label=\"Clear all selections\"\n (click)=\"clearSelection($event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon\n name=\"caret-right\"\n size=\"auto\"\n class=\"coar-select-arrow\"\n [class.coar-select-arrow--open]=\"isOpen()\"\n />\n </span>\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Search Input -->\n @if (searchable()) {\n <div class=\"coar-select-search\">\n <input\n #searchInput\n type=\"text\"\n class=\"coar-select-search-input\"\n [id]=\"searchInputId()\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n </div>\n }\n\n <!-- Select All Option -->\n @if (showSelectAll() && !searchQuery()) {\n <div\n class=\"coar-multi-option coar-multi-option--select-all\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"allSelected()\"\n (click)=\"toggleAll($event)\"\n (keydown.enter)=\"toggleAll($event)\"\n >\n <span\n class=\"coar-multi-checkbox\"\n [class.coar-multi-checkbox--checked]=\"allSelected()\"\n [class.coar-multi-checkbox--indeterminate]=\"someSelected()\"\n >\n @if (allSelected()) {\n <coar-icon name=\"check\" size=\"auto\" />\n } @else if (someSelected()) {\n <coar-icon name=\"minus\" size=\"auto\" />\n }\n </span>\n <span class=\"coar-multi-option-label\">Select All</span>\n </div>\n <div class=\"coar-multi-divider\"></div>\n }\n\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-multi-option\"\n [class.coar-multi-option--selected]=\"isSelected(option)\"\n [class.coar-multi-option--highlighted]=\"isHighlighted(i)\"\n [class.coar-multi-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"toggleOption($any(option), $event)\"\n (keydown.enter)=\"toggleOption($any(option), $event)\"\n (mouseenter)=\"setHighlightFromDisplay(i)\"\n >\n <span\n class=\"coar-multi-checkbox\"\n [class.coar-multi-checkbox--checked]=\"isSelected(option)\"\n >\n @if (isSelected(option)) {\n <coar-icon name=\"check\" size=\"auto\" />\n }\n </span>\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-multi-option-icon\" />\n }\n <span class=\"coar-multi-option-label\">{{ option.label }}</span>\n </div>\n } @empty {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No results found\n } @else {\n No options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-multi-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-multi-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-multi-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-multi-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-multi-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-multi-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-multi-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-multi-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-multi-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-multi-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--coar-spacing-xs);background:var(--coar-surface-accent-primary);color:var(--coar-text-on-bold);font-size:11px;font-weight:600;border-radius:var(--coar-radius-full)}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-multi-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-dropdown--top .coar-multi-divider{order:-1}.coar-select-dropdown--top .coar-multi-option--select-all{border-bottom:none}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-multi-option{display:flex;align-items:center;gap:var(--coar-spacing-s);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-multi-option:hover:not(.coar-multi-option--disabled),.coar-multi-option--highlighted:not(.coar-multi-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-multi-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-multi-option--select-all{font-weight:600}.coar-multi-checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}.coar-multi-checkbox--checked,.coar-multi-checkbox--indeterminate{background:var(--coar-surface-accent-primary);border-color:var(--coar-border-accent-primary);color:var(--coar-icon-on-bold)}.coar-multi-checkbox coar-icon{width:10px;height:10px}.coar-multi-option-icon{flex-shrink:0;color:inherit}.coar-multi-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-multi-divider{height:1px;margin:var(--coar-spacing-xs) 0;background:var(--coar-border-neutral)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-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"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2204
2230
  }
2205
2231
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMultiSelectComponent, decorators: [{
2206
2232
  type: Component,
@@ -2575,7 +2601,7 @@ class CoarTagSelectComponent extends CoarSelectBase {
2575
2601
  return chromeHeight + listHeight;
2576
2602
  }
2577
2603
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2578
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTagSelectComponent, isStandalone: true, selector: "coar-tag-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, createPrefix: { classPropertyName: "createPrefix", publicName: "createPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tagCreated: "tagCreated" }, host: { properties: { "class.coar-tag-select--xs": "size() === \"xs\"", "class.coar-tag-select--sm": "size() === \"sm\"", "class.coar-tag-select--md": "size() === \"md\"", "class.coar-tag-select--lg": "size() === \"lg\"", "class.coar-tag-select--disabled": "isDisabled()", "class.coar-tag-select--readonly": "readonly()", "class.coar-tag-select--error": "hasError()", "class.coar-tag-select--open": "isOpen()", "class.coar-tag-select--focused": "isFocused()" } }, providers: [coarProvideValueAccessor(() => CoarTagSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "inlineInputRef", first: true, predicate: ["inlineInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Tag Input Container -->\n <div\n class=\"coar-tag-container\"\n #trigger\n [class.coar-tag-container--focused]=\"isFocused()\"\n [class.coar-tag-container--disabled]=\"isDisabled()\"\n [class.coar-tag-container--readonly]=\"readonly()\"\n [class.coar-tag-container--error]=\"hasError()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n tabindex=\"0\"\n (click)=\"focusInput()\"\n (keydown.enter)=\"focusInput()\"\n >\n <!-- Selected Tags -->\n @for (option of selectedOptions(); track option.value) {\n <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n }\n <span class=\"coar-tag-label\">{{ option.label }}</span>\n @if (!isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"coar-tag-remove\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ option.label }}\"\n (click)=\"removeTag($any(option.value), $event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n </span>\n }\n\n <!-- Inline Input -->\n @if (!maxReached()) {\n <input\n #inlineInput\n type=\"text\"\n class=\"coar-tag-input\"\n [id]=\"inputId()\"\n [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n [value]=\"searchQuery()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n />\n }\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-tag-option\"\n [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n [class.coar-tag-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"false\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"addTag($any(option))\"\n (keydown.enter)=\"addTag($any(option))\"\n (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n >\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n }\n <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n </div>\n }\n\n <!-- Create New Option -->\n @if (showCreateOption()) {\n <div\n class=\"coar-tag-option coar-tag-option--create\"\n [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"false\"\n (click)=\"createTag()\"\n (keydown.enter)=\"createTag()\"\n (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n >\n <coar-icon name=\"plus\" size=\"sm\" class=\"coar-tag-option-icon\" />\n <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n </div>\n }\n\n @if (!displayAvailableOptions().length && !showCreateOption()) {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No matching options\n } @else {\n No more options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2604
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTagSelectComponent, isStandalone: true, selector: "coar-tag-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, createPrefix: { classPropertyName: "createPrefix", publicName: "createPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tagCreated: "tagCreated" }, host: { properties: { "class.coar-tag-select--xs": "size() === \"xs\"", "class.coar-tag-select--sm": "size() === \"sm\"", "class.coar-tag-select--md": "size() === \"md\"", "class.coar-tag-select--lg": "size() === \"lg\"", "class.coar-tag-select--disabled": "isDisabled()", "class.coar-tag-select--readonly": "readonly()", "class.coar-tag-select--error": "hasError()", "class.coar-tag-select--open": "isOpen()", "class.coar-tag-select--focused": "isFocused()" } }, providers: [coarProvideValueAccessor(() => CoarTagSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "inlineInputRef", first: true, predicate: ["inlineInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Tag Input Container -->\n <div\n class=\"coar-tag-container\"\n #trigger\n [class.coar-tag-container--focused]=\"isFocused()\"\n [class.coar-tag-container--disabled]=\"isDisabled()\"\n [class.coar-tag-container--readonly]=\"readonly()\"\n [class.coar-tag-container--error]=\"hasError()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n tabindex=\"0\"\n (click)=\"focusInput()\"\n (keydown.enter)=\"focusInput()\"\n >\n <!-- Selected Tags -->\n @for (option of selectedOptions(); track option.value) {\n <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n }\n <span class=\"coar-tag-label\">{{ option.label }}</span>\n @if (!isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"coar-tag-remove\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ option.label }}\"\n (click)=\"removeTag($any(option.value), $event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n </span>\n }\n\n <!-- Inline Input -->\n @if (!maxReached()) {\n <input\n #inlineInput\n type=\"text\"\n class=\"coar-tag-input\"\n [id]=\"inputId()\"\n [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n [value]=\"searchQuery()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n />\n }\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-tag-option\"\n [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n [class.coar-tag-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"false\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"addTag($any(option))\"\n (keydown.enter)=\"addTag($any(option))\"\n (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n >\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n }\n <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n </div>\n }\n\n <!-- Create New Option -->\n @if (showCreateOption()) {\n <div\n class=\"coar-tag-option coar-tag-option--create\"\n [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"false\"\n (click)=\"createTag()\"\n (keydown.enter)=\"createTag()\"\n (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n >\n <coar-icon name=\"plus\" size=\"sm\" class=\"coar-tag-option-icon\" />\n <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n </div>\n }\n\n @if (!displayAvailableOptions().length && !showCreateOption()) {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No matching options\n } @else {\n No more options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-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"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2579
2605
  }
2580
2606
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagSelectComponent, decorators: [{
2581
2607
  type: Component,
@@ -2592,6 +2618,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
2592
2618
  }, template: "<div class=\"coar-select-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-select-required\">*</span>\n }\n </label>\n }\n\n <!-- Tag Input Container -->\n <div\n class=\"coar-tag-container\"\n #trigger\n [class.coar-tag-container--focused]=\"isFocused()\"\n [class.coar-tag-container--disabled]=\"isDisabled()\"\n [class.coar-tag-container--readonly]=\"readonly()\"\n [class.coar-tag-container--error]=\"hasError()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n tabindex=\"0\"\n (click)=\"focusInput()\"\n (keydown.enter)=\"focusInput()\"\n >\n <!-- Selected Tags -->\n @for (option of selectedOptions(); track option.value) {\n <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n }\n <span class=\"coar-tag-label\">{{ option.label }}</span>\n @if (!isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"coar-tag-remove\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ option.label }}\"\n (click)=\"removeTag($any(option.value), $event)\"\n >\n <coar-icon name=\"x\" size=\"auto\" />\n </button>\n }\n </span>\n }\n\n <!-- Inline Input -->\n @if (!maxReached()) {\n <input\n #inlineInput\n type=\"text\"\n class=\"coar-tag-input\"\n [id]=\"inputId()\"\n [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n [value]=\"searchQuery()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n />\n }\n </div>\n\n <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n <ng-template #dropdownTemplate>\n <div\n class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n role=\"presentation\"\n >\n <!-- Options List -->\n <div\n #optionsList\n class=\"coar-select-options\"\n [id]=\"listboxId()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"label() || 'Options'\"\n coarScrollbar\n [overflowX]=\"'hidden'\"\n [autoHide]=\"'never'\"\n [overscrollBehavior]=\"'contain'\"\n [defer]=\"false\"\n >\n @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n <div\n class=\"coar-tag-option\"\n [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n [class.coar-tag-option--disabled]=\"option.disabled\"\n [id]=\"inputId() + '-option-' + i\"\n [attr.aria-selected]=\"false\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [tabindex]=\"option.disabled ? -1 : 0\"\n role=\"option\"\n (click)=\"addTag($any(option))\"\n (keydown.enter)=\"addTag($any(option))\"\n (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n >\n @if (option.icon) {\n <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n }\n <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n </div>\n }\n\n <!-- Create New Option -->\n @if (showCreateOption()) {\n <div\n class=\"coar-tag-option coar-tag-option--create\"\n [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"false\"\n (click)=\"createTag()\"\n (keydown.enter)=\"createTag()\"\n (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n >\n <coar-icon name=\"plus\" size=\"sm\" class=\"coar-tag-option-icon\" />\n <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n </div>\n }\n\n @if (!displayAvailableOptions().length && !showCreateOption()) {\n <div class=\"coar-select-empty\">\n @if (searchQuery()) {\n No matching options\n } @else {\n No more options available\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div\n [id]=\"messageId()\"\n class=\"coar-select-message\"\n [class.coar-select-message--error]=\"hasError()\"\n >\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-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-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-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-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
2593
2619
  }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], dropdownTemplateRef: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], createPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "createPrefix", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tagCreated: [{ type: i0.Output, args: ["tagCreated"] }], inlineInputRef: [{ type: i0.ViewChild, args: ['inlineInput', { isSignal: true }] }] } });
2594
2620
 
2621
+ /**
2622
+ * Built-in icon registry.
2623
+ *
2624
+ * ⚠️ DO NOT EDIT THIS FILE MANUALLY
2625
+ *
2626
+ * This file is auto-generated from /assets/icons/*.svg files.
2627
+ * To add new icons:
2628
+ * 1. Add SVG files to /assets/icons/
2629
+ * 2. Run: npm run build:icons
2630
+ * 3. Commit the generated file
2631
+ *
2632
+ * Icons are inlined as strings for maximum portability.
2633
+ *
2634
+ * Generated: 2026-01-03T10:25:22.816Z
2635
+ * Source: C:\git\cocoar\cocoar-ui\assets\icons
2636
+ */
2637
+ const CORE_ICONS = {
2638
+ 'add-list': `<svg id="Layer_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m10 18h-7c-.6 0-1-.4-1-1s.4-1 1-1h7c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m21 17h-6c-.6 0-1-.4-1-1s.4-1 1-1h6c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m18 20c-.6 0-1-.4-1-1v-6c0-.6.4-1 1-1s1 .4 1 1v6c0 .6-.4 1-1 1z"/></g><g><path d="m14 13h-11c-.6 0-1-.4-1-1s.4-1 1-1h11c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m14 8h-11c-.6 0-1-.4-1-1s.4-1 1-1h11c.6 0 1 .4 1 1s-.4 1-1 1z"/></g></svg>`,
2639
+ 'add-user': `<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m17 6c0 2.76142-2.2386 5-5 5-2.76142 0-5-2.23858-5-5s2.23858-5 5-5c2.7614 0 5 2.23858 5 5zm-5 4c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.20914 0-4 1.79086-4 4s1.79086 4 4 4zm-2 3c-3.86599 0-7 3.134-7 7 0 1.6569 1.34315 3 3 3h6.5c.2761 0 .5-.2239.5-.5s-.2239-.5-.5-.5h-6.5c-1.10457 0-2-.8954-2-2 0-3.3137 2.68629-6 6-6h4.5c.2761 0 .5-.2239.5-.5 0-.2762-.2239-.5-.5-.5zm9 2c.2761 0 .5.2239.5.5v3h3c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-3v3c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5v-3h-3c-.2761 0-.5-.2239-.5-.5s.2239-.5.5-.5h3v-3c0-.2761.2239-.5.5-.5z" fill="rgb(0,0,0)" fill-rule="evenodd"/></svg>`,
2640
+ 'add': `<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_03_Login" data-name="03 Login"><path d="m256 512a25 25 0 0 1 -25-25v-462a25 25 0 0 1 50 0v462a25 25 0 0 1 -25 25z"/><path d="m487 281h-462a25 25 0 0 1 0-50h462a25 25 0 0 1 0 50z"/></g></svg>`,
2641
+ 'arrow-right': `<svg id="Layer_2" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 2"><path d="m22.707 11.293-7-7a1 1 0 0 0 -1.414 1.414l5.293 5.293h-17.586a1 1 0 0 0 0 2h17.586l-5.293 5.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414z"/></svg>`,
2642
+ 'back': `<svg id="Layer_1" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 14c-.3 0-.5-.1-.7-.3l-4-4c-.4-.4-.4-1 0-1.4l4-4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-3.3 3.3 3.3 3.3c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z"/><path d="m14 19h-7c-.6 0-1-.4-1-1s.4-1 1-1h7c2.3 0 4-1.5 4-3.5s-1.7-3.5-4-3.5h-9c-.6 0-1-.4-1-1s.4-1 1-1h9c3.4 0 6 2.4 6 5.5s-2.6 5.5-6 5.5z"/></svg>`,
2643
+ 'bin': `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M436,60h-75V45c0-24.813-20.187-45-45-45H196c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45 c0,19.928,13.025,36.861,31.005,42.761L88.76,470.736C90.687,493.875,110.385,512,133.604,512h244.792 c23.22,0,42.918-18.125,44.846-41.271l26.753-322.969C467.975,141.861,481,124.928,481,105C481,80.187,460.813,60,436,60z M181,45 c0-8.271,6.729-15,15-15h120c8.271,0,15,6.729,15,15v15H181V45z M393.344,468.246c-0.643,7.712-7.208,13.754-14.948,13.754 H133.604c-7.739,0-14.305-6.042-14.946-13.747L92.294,150h327.412L393.344,468.246z M436,120H76c-8.271,0-15-6.729-15-15 s6.729-15,15-15h360c8.271,0,15,6.729,15,15S444.271,120,436,120z"/></g></g><g><g><path d="M195.971,436.071l-15-242c-0.513-8.269-7.67-14.558-15.899-14.043c-8.269,0.513-14.556,7.631-14.044,15.899l15,242.001 c0.493,7.953,7.097,14.072,14.957,14.072C189.672,452,196.504,444.684,195.971,436.071z"/></g></g><g><g><path d="M256,180c-8.284,0-15,6.716-15,15v242c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z"/></g></g><g><g><path d="M346.927,180.029c-8.25-0.513-15.387,5.774-15.899,14.043l-15,242c-0.511,8.268,5.776,15.386,14.044,15.899 c8.273,0.512,15.387-5.778,15.899-14.043l15-242C361.483,187.659,355.196,180.541,346.927,180.029z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2644
+ 'calendar': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M21,2H18V0H16V2H8V0H6V2H3A3,3,0,0,0,0,5V24H24V5A3,3,0,0,0,21,2ZM2,5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1V8H2ZM2,22V10H22V22Z"/><rect x="15" y="13" width="2" height="2"/><rect x="11" y="13" width="2" height="2"/><rect x="7" y="13" width="2" height="2"/><rect x="15" y="17" width="2" height="2"/><rect x="11" y="17" width="2" height="2"/><rect x="7" y="17" width="2" height="2"/></g></svg>`,
2645
+ 'caret-right': `<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m190.06 414 163.12-139.78a24 24 0 0 0 0-36.44l-163.12-139.78c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/></svg>`,
2646
+ 'chat': `<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve"><g><path d="M10,25.465h13c0.553,0,1-0.448,1-1s-0.447-1-1-1H10c-0.553,0-1,0.448-1,1S9.447,25.465,10,25.465z"/><path d="M36,29.465H10c-0.553,0-1,0.448-1,1s0.447,1,1,1h26c0.553,0,1-0.448,1-1S36.553,29.465,36,29.465z"/><path d="M36,35.465H10c-0.553,0-1,0.448-1,1s0.447,1,1,1h26c0.553,0,1-0.448,1-1S36.553,35.465,36,35.465z"/><path d="M54.072,2.535L19.93,2.465c-3.27,0-5.93,2.66-5.93,5.93v5.124l-8.07,0.017c-3.27,0-5.93,2.66-5.93,5.93v21.141 c0,3.27,2.66,5.929,5.93,5.929H12v10c0,0.413,0.254,0.784,0.64,0.933c0.117,0.045,0.239,0.067,0.36,0.067 c0.276,0,0.547-0.115,0.74-0.327l9.704-10.675l16.626-0.068c3.27,0,5.93-2.66,5.93-5.929v-0.113l5.26,5.786 c0.193,0.212,0.464,0.327,0.74,0.327c0.121,0,0.243-0.022,0.36-0.067c0.386-0.149,0.64-0.52,0.64-0.933v-10h1.07 c3.27,0,5.93-2.66,5.93-5.929V8.465C60,5.196,57.341,2.536,54.072,2.535z M44,40.536c0,2.167-1.763,3.929-3.934,3.929l-17.07,0.07 c-0.28,0.001-0.548,0.12-0.736,0.327L14,53.949v-8.414c0-0.552-0.447-1-1-1H5.93c-2.167,0-3.93-1.763-3.93-3.929V19.465 c0-2.167,1.763-3.93,3.932-3.93l9.068-0.019c0,0,0,0,0,0c0.001,0,0.001,0,0.002,0l25.068-0.052c2.167,0,3.93,1.763,3.93,3.93 v18.441V40.536z M58,29.606c0,2.167-1.763,3.929-3.93,3.929H52c-0.553,0-1,0.448-1,1v8.414l-5-5.5V19.395 c0-3.27-2.66-5.93-5.932-5.93L16,13.514v-5.12c0-2.167,1.763-3.93,3.928-3.93l34.141,0.07c0.001,0,0.001,0,0.002,0 c2.167,0,3.93,1.763,3.93,3.93V29.606z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2647
+ 'check': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M497.36,69.995c-7.532-7.545-19.753-7.558-27.285-0.032L238.582,300.845l-83.522-90.713 c-7.217-7.834-19.419-8.342-27.266-1.126c-7.841,7.217-8.343,19.425-1.126,27.266l97.126,105.481 c3.557,3.866,8.535,6.111,13.784,6.22c0.141,0.006,0.277,0.006,0.412,0.006c5.101,0,10.008-2.026,13.623-5.628L497.322,97.286 C504.873,89.761,504.886,77.54,497.36,69.995z"/></g></g><g><g><path d="M492.703,236.703c-10.658,0-19.296,8.638-19.296,19.297c0,119.883-97.524,217.407-217.407,217.407 c-119.876,0-217.407-97.524-217.407-217.407c0-119.876,97.531-217.407,217.407-217.407c10.658,0,19.297-8.638,19.297-19.296 C275.297,8.638,266.658,0,256,0C114.84,0,0,114.84,0,256c0,141.154,114.84,256,256,256c141.154,0,256-114.846,256-256 C512,245.342,503.362,236.703,492.703,236.703z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2648
+ 'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
2649
+ 'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
2650
+ 'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
2651
+ 'chevrons-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>`,
2652
+ 'chevrons-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>`,
2653
+ 'clipboard': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.891 438.891" style="enable-background:new 0 0 438.891 438.891;" xml:space="preserve"><g><g><g><path d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347 c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923 c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045 c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735 c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51 c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808 H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645 c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706 c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"/><path d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629 c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135 c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025 C179.628,233.962,179.427,233.761,179.217,233.569z"/><path d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16 c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"/><path d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629 c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135 c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025 C179.628,150.37,179.427,150.169,179.217,149.977z"/><path d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16 c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"/><path d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629 c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135 c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025 C179.628,317.554,179.427,317.353,179.217,317.16z"/><path d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16 c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2654
+ 'close': `<svg id="Capa_1" enable-background="new 0 0 320.591 320.591" height="512" viewBox="0 0 320.591 320.591" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="close_1_"><path d="m30.391 318.583c-7.86.457-15.59-2.156-21.56-7.288-11.774-11.844-11.774-30.973 0-42.817l257.812-257.813c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875l-259.331 259.331c-5.893 5.058-13.499 7.666-21.256 7.288z"/><path d="m287.9 318.583c-7.966-.034-15.601-3.196-21.257-8.806l-257.813-257.814c-10.908-12.738-9.425-31.908 3.313-42.817 11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414-6.35 5.522-14.707 8.161-23.078 7.288z"/></g></g></svg>`,
2655
+ 'comments': `<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m480.052 369.741c49.476-69.417 41.913-164.522-25.665-226.473-30.877-28.305-70.24-45.926-112.761-50.847-.265-.326-.536-.649-.833-.958-36.991-38.425-90.135-60.463-145.805-60.463-105.939 0-194.988 78.933-194.988 180 0 35.435 11.007 69.404 31.916 98.741l-29.209 91.706c-1.836 5.764-.03 12.065 4.579 15.982 4.617 3.924 11.13 4.678 16.511 1.941l88.827-45.167c18.242 7.855 37.586 13.009 57.618 15.354 38.642 40.636 92.073 61.443 146.738 61.443 28.416 0 56.729-5.791 82.36-16.798l88.831 45.169c2.151 1.094 4.48 1.629 6.795 1.629 10.123 0 17.38-9.865 14.295-19.553zm-361.374-25.72c-4.201-1.995-9.088-1.929-13.233.179l-63.267 32.17 20.66-64.866c1.504-4.723.579-9.883-2.473-13.788-19.866-25.43-30.367-55.415-30.367-86.716 0-82.71 74.014-150 164.99-150 36.636 0 71.905 11.099 100.514 31.086-96.348 9.688-173.51 84.942-173.51 178.914 0 29.228 7.492 57.366 21.617 82.576-8.552-2.547-16.881-5.732-24.931-9.555zm287.845 60.178c-4.085-2.077-8.976-2.202-13.233-.178-23.385 11.108-49.772 16.979-76.31 16.979-90.976 0-164.99-67.29-164.99-150s74.014-150 164.99-150 164.99 67.29 164.99 150c0 31.301-10.501 61.286-30.368 86.715-3.051 3.905-3.976 9.065-2.473 13.788l20.66 64.866z"/><circle cx="255.984" cy="271" r="15"/><circle cx="315.981" cy="271" r="15"/><circle cx="375.977" cy="271" r="15"/></svg>`,
2656
+ 'copy': `<svg height="682.66669pt" viewBox="-21 -21 682.66669 682.66669" width="682.66669pt" xmlns="http://www.w3.org/2000/svg"><path d="m565 640h-340c-41.359375 0-75-33.640625-75-75v-340c0-41.359375 33.640625-75 75-75h340c41.359375 0 75 33.640625 75 75v340c0 41.359375-33.640625 75-75 75zm-340-440c-13.785156 0-25 11.214844-25 25v340c0 13.785156 11.214844 25 25 25h340c13.785156 0 25-11.214844 25-25v-340c0-13.785156-11.214844-25-25-25zm-125 240h-25c-13.785156 0-25-11.214844-25-25v-340c0-13.785156 11.214844-25 25-25h340c13.785156 0 25 11.214844 25 25v23.75h50v-23.75c0-41.359375-33.640625-75-75-75h-340c-41.359375 0-75 33.640625-75 75v340c0 41.359375 33.640625 75 75 75h25zm0 0"/></svg>`,
2657
+ 'customers': `<svg id="Capa_1" enable-background="new 0 0 183.729 183.729" height="512" viewBox="0 0 183.729 183.729" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="Line_1_"><path d="m4.213 137.816h33.391v41.739c0 2.305 1.869 4.174 4.174 4.174h100.174c2.305 0 4.174-1.869 4.174-4.174v-41.739h33.391c2.305 0 4.174-1.869 4.174-4.174v-59.394c0-8.692-5.388-16.474-13.523-19.534l-12.021-4.55c11.569-11.249 11.827-29.747.578-41.316s-29.747-11.827-41.316-.578c-5.676 5.52-8.869 13.107-8.848 21.024-10.503-5.284-22.888-5.284-33.391 0 .042-16.136-13.005-29.251-29.141-29.294s-29.252 13.004-29.295 29.14c-.021 7.917 3.172 15.504 8.848 21.024l-12.021 4.55c-8.135 3.059-13.522 10.841-13.522 19.534v59.395c0 2.305 1.868 4.173 4.174 4.173zm41.739-19.325c.003-4.574 2.499-8.782 6.511-10.977l15.903-8.64 18.198 76.508h-40.612zm61.314-21.579-11.228 47.082v-35.395c0-2.305-1.869-4.174-4.174-4.174s-4.174 1.869-4.174 4.174v35.395l-11.227-47.082c9.785 4.452 21.018 4.452 30.803 0zm30.512 78.47h-40.612l18.198-76.508 15.903 8.64c4.012 2.195 6.509 6.404 6.511 10.977zm29.217-112.696c4.977 1.759 8.315 6.45 8.348 11.729v55.054h-29.217v-10.977c-.033-7.612-4.208-14.602-10.894-18.24l-18.032-9.81c7.797-7.122 12.236-17.197 12.23-27.757-.004-1.86-.158-3.716-.459-5.551 2.849.901 5.819 1.365 8.807 1.377 4.101.003 8.155-.865 11.896-2.546zm-50.087-33.391c0-11.526 9.344-20.87 20.87-20.87s20.87 9.344 20.87 20.87-9.344 20.87-20.87 20.87c-4.418-.045-8.706-1.508-12.23-4.174-1.899-3.887-4.454-7.417-7.555-10.435-.699-2.015-1.066-4.129-1.085-6.261zm4.174 33.391c0 16.136-13.081 29.217-29.217 29.217s-29.218-13.081-29.218-29.217 13.081-29.217 29.217-29.217 29.218 13.081 29.218 29.217zm-96-33.391c0-11.526 9.344-20.87 20.87-20.87s20.87 9.344 20.87 20.87c-.001 2.188-.368 4.361-1.085 6.428-3.085 2.967-5.64 6.44-7.555 10.268-3.524 2.666-7.811 4.129-12.23 4.174-11.526-.001-20.87-9.344-20.87-20.87zm-16.696 44.953c.102-5.217 3.428-9.823 8.348-11.562l17.53-6.553c3.688 1.595 7.668 2.405 11.687 2.379 2.988-.012 5.958-.477 8.807-1.377-.301 1.835-.455 3.692-.459 5.551.017 10.531 4.454 20.571 12.23 27.673l-18.031 9.892c-6.686 3.638-10.861 10.628-10.894 18.24v10.977h-29.218z"/></g></g></svg>`,
2658
+ 'employee': `<svg id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m44.585 14.585c0-6.939-5.646-12.585-12.585-12.585s-12.585 5.646-12.585 12.585 5.646 12.585 12.585 12.585 12.585-5.646 12.585-12.585zm-23.17 0c0-5.837 4.749-10.585 10.585-10.585s10.585 4.748 10.585 10.585-4.749 10.585-10.585 10.585-10.585-4.748-10.585-10.585z"/><path d="m36.468 28.62s-.003 0-.005 0c-.073 0-.143-.011-.216-.011h-8.492c-.073 0-.143.01-.215.011-.003 0-.006 0-.01 0-9.353.122-16.926 7.758-16.926 17.139v15.241c0 .553.448 1 1 1h40.793c.552 0 1-.447 1-1v-15.241c0-9.382-7.575-17.019-16.929-17.139zm-4.468 7.477h1.306l4.436 18.002-5.741 5.515-5.741-5.515 4.436-18.002h1.306zm0-2h-1.432l-1.507-3.488h5.879l-1.507 3.488h-1.432zm-19.397 11.662c0-8.066 6.341-14.661 14.298-15.107l1.959 4.533-4.681 18.996c-.085.347.021.713.278.96l5.059 4.859h-16.913zm38.794 14.241h-16.913l5.059-4.859c.257-.247.364-.613.278-.96l-4.681-18.996 1.959-4.533c7.956.446 14.298 7.042 14.298 15.107z"/></svg>`,
2659
+ 'eye-closed': `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.26408 6.66615C1.57529 6.4126 2.03769 6.45387 2.29687 6.75831C4.01035 8.77104 7.1184 11.2826 12 11.2826C16.8815 11.2826 19.9895 8.77106 21.703 6.75833C21.9622 6.45389 22.4246 6.41263 22.7358 6.66617C23.047 6.91972 23.0892 7.37206 22.83 7.67651C22.3016 8.29723 21.6469 8.96667 20.8577 9.60857C20.9001 9.65503 20.937 9.7077 20.9669 9.7661L22.9224 13.5921C23.1035 13.9465 22.9567 14.3774 22.5945 14.5546C22.2322 14.7318 21.7917 14.5881 21.6106 14.2338L19.6856 10.4674C18.4652 11.2689 16.9983 11.959 15.2651 12.3565L16.1412 16.6418C16.2206 17.0303 15.9631 17.4082 15.5659 17.4859C15.1688 17.5636 14.7825 17.3117 14.703 16.9232L13.8209 12.6086C13.2402 12.6793 12.6334 12.7173 12 12.7173C11.3665 12.7173 10.7597 12.6793 10.1789 12.6086L9.29684 16.9232C9.21741 17.3117 8.83107 17.5636 8.43393 17.4859C8.03679 17.4082 7.77924 17.0303 7.85866 16.6418L8.73478 12.3564C7.30485 12.0285 6.0562 11.5014 4.97768 10.8769L2.32003 14.3434C2.07703 14.6603 1.61738 14.7246 1.29337 14.4869C0.96937 14.2491 0.903705 13.7995 1.14671 13.4825L3.75501 10.0804C2.6858 9.30207 1.8295 8.45132 1.16987 7.67649C0.910686 7.37204 0.952866 6.9197 1.26408 6.66615Z" fill="black"/></svg>`,
2660
+ 'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
2661
+ 'eye-open': `<svg clip-rule="evenodd" fill-rule="evenodd" height="512" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path d="m12 10.75c-2.346 0-4.25 1.904-4.25 4.25s1.904 4.25 4.25 4.25 4.25-1.904 4.25-4.25-1.904-4.25-4.25-4.25zm0 1.5c1.518 0 2.75 1.232 2.75 2.75s-1.232 2.75-2.75 2.75-2.75-1.232-2.75-2.75 1.232-2.75 2.75-2.75z"/><path d="m22.53 12.97s-.604-.604-1.514-1.515c-4.98-4.979-13.052-4.979-18.032 0-.91.911-1.514 1.515-1.514 1.515-.293.292-.293.768 0 1.06.292.293.768.293 1.06 0 0 0 .604-.604 1.515-1.514 4.393-4.394 11.517-4.394 15.91 0 .911.91 1.515 1.514 1.515 1.514.292.293.768.293 1.06 0 .293-.292.293-.768 0-1.06z"/><path d="m18.85 6.867-1.5 2.598c-.206.358-.083.817.275 1.024s.818.084 1.025-.274l1.5-2.598c.206-.359.083-.818-.275-1.025s-.818-.084-1.025.275z"/><path d="m11.25 5.5v3c0 .414.336.75.75.75s.75-.336.75-.75v-3c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"/><path d="m3.85 7.617 1.5 2.598c.207.358.667.481 1.025.274s.481-.666.275-1.024l-1.5-2.598c-.207-.359-.667-.482-1.025-.275s-.481.666-.275 1.025z"/></g></svg>`,
2662
+ 'eye': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
2663
+ 'important-1': `<svg id="Layer_1" enable-background="new 0 0 100 100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m53.6308289 62.660614h-7.3402634c-2.3325844 0-4.2989349-1.739502-4.5834389-4.0546722l-6.2579918-50.924778c-.3383217-2.7531052 1.8096237-5.1811638 4.5834389-5.1811638h19.9348373c2.7766304 0 4.9254341 2.4327488 4.5825768 5.1881289l-6.3365822 50.924778c-.287693 2.3120809-2.2526665 4.0477071-4.5825767 4.0477071z"/><path d="m63.6071815 83.8928223c0 7.4706039-6.1365699 13.6071777-13.6071815 13.6071777s-13.6071815-6.1365738-13.6071815-13.6071777c0-7.4706116 6.13657-13.6071777 13.6071815-13.6071777s13.6071815 6.1365585 13.6071815 13.6071777"/></svg>`,
2664
+ 'important': `<svg id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m46.0722656 25.6606445c-.390625.390625-.390625 1.0239258 0 1.4140625 1.3154297 1.315918 2.0400391 3.0649414 2.0400391 4.925293s-.7246094 3.609375-2.0400391 4.925293c-.390625.3901367-.390625 1.0234375 0 1.4140625.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c1.6933594-1.6933594 2.6259766-3.9448242 2.6259766-6.3393555s-.9326172-4.6459961-2.6259766-6.3393555c-.390625-.390625-1.0234375-.390625-1.4140625 0z"/><path d="m50.9248047 20.8085938c-.390625.390625-.390625 1.0234375 0 1.4140625 5.390625 5.3911133 5.390625 14.1635742 0 19.5546875-.390625.390625-.390625 1.0234375 0 1.4140625.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c6.1708984-6.1708984 6.1708984-16.2119141 0-22.3828125-.390625-.390625-1.0234375-.390625-1.4140625 0z"/><path d="m17.9277344 25.6606445c-.390625-.390625-1.0234375-.390625-1.4140625 0-1.6933594 1.6933594-2.6259766 3.9448242-2.6259766 6.3393555s.9326172 4.6459961 2.6259766 6.3393555c.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c.390625-.390625.390625-1.0239258 0-1.4140625-1.3154297-1.315918-2.0400391-3.0649414-2.0400391-4.925293s.7246094-3.609375 2.0400391-4.925293c.390625-.3901367.390625-1.0234375 0-1.4140625z"/><path d="m13.0751953 20.8085938c-.390625-.390625-1.0234375-.390625-1.4140625 0-6.1708984 6.1708984-6.1708984 16.2119141 0 22.3828125.1953125.1953125.4511719.2929688.7070312.2929688s.5117188-.0976562.7070312-.2929688c.390625-.390625.390625-1.0234375 0-1.4140625-5.390625-5.3911133-5.390625-14.1635742 0-19.5546875.390625-.390625.390625-1.0234375 0-1.4140625z"/><path d="m39.2626953 2h-14.5253906c-.2744141 0-.5361328.112793-.7255859.3115234-.1884766.1987305-.2871094.4663086-.2734375.7402344l2.0253906 38.9492188c.0283203.5317383.4667969.9482422.9990234.9482422h10.4746094c.5322266 0 .9707031-.4165039.9990234-.9482422l2.0253907-38.9492188c.0136719-.2739258-.0849609-.5415039-.2734375-.7402344-.1894531-.1987305-.4511719-.3115234-.7255859-.3115234zm-2.9746094 38.9492188h-8.5761719l-1.9208984-36.9492188h12.4179688l-1.9208984 36.9492188z"/><path d="m32 47.3198242c-4.046875 0-7.3398438 3.2924805-7.3398438 7.3398438s3.2929688 7.340332 7.3398438 7.340332 7.3398438-3.2929688 7.3398438-7.340332-3.2929688-7.3398438-7.3398438-7.3398438zm0 12.6801758c-2.9443359 0-5.3398438-2.3955078-5.3398438-5.340332 0-2.9443359 2.3955078-5.3398438 5.3398438-5.3398438s5.3398438 2.3955078 5.3398438 5.3398438c0 2.9448242-2.3955078 5.340332-5.3398438 5.340332z"/></svg>`,
2665
+ 'key': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M463.743,48.257c-64.343-64.343-169.037-64.342-233.38,0c-43.946,43.946-59.206,108.725-40.185,167.483L4.395,401.524 C1.581,404.337,0,408.153,0,412.132v84.866C0,505.284,6.717,512,15.002,512h84.866c3.98,0,7.794-1.581,10.609-4.395l21.22-21.22 c3.241-3.242,4.823-7.787,4.293-12.341l-2.648-22.783l31.584-2.977c7.172-0.676,12.852-6.355,13.528-13.527l2.979-31.588 l22.785,2.648c4.254,0.497,8.512-0.851,11.71-3.698c3.196-2.846,5.025-6.923,5.025-11.204v-27.938h27.43 c3.949,0,7.738-1.557,10.547-4.333l37.272-36.842c58.772,19.051,123.583,3.794,167.542-40.166 C528.085,217.294,528.085,112.599,463.743,48.257z M442.527,260.421c-37.866,37.865-94.666,49.684-144.703,30.114 c-5.522-2.159-11.796-0.865-16.011,3.302l-39.593,39.136H205.95c-8.285,0-15.002,6.717-15.002,15.002v26.093l-21.28-2.473 c-4.009-0.465-8.035,0.703-11.172,3.241c-3.136,2.539-5.118,6.234-5.497,10.252l-3.253,34.489l-34.486,3.25 c-4.018,0.379-7.713,2.36-10.253,5.497c-2.539,3.136-3.708,7.164-3.242,11.172l3.582,30.804l-11.694,11.697h-63.65v-63.649 l188.097-188.097c4.214-4.214,5.535-10.523,3.364-16.073c-19.572-50.038-7.751-106.836,30.114-144.703 c52.646-52.644,138.304-52.644,190.948,0C495.17,122.118,495.17,207.777,442.527,260.421z"/></g></g><g><g><path d="M421.309,90.69c-17.548-17.549-46.102-17.548-63.649,0c-17.548,17.548-17.548,46.101,0,63.649 c17.547,17.548,46.101,17.55,63.649,0C438.857,136.791,438.857,108.238,421.309,90.69z M400.093,133.123 c-5.849,5.849-15.366,5.85-21.216,0c-5.849-5.849-5.849-15.366,0-21.216c5.865-5.864,15.352-5.864,21.216,0 C405.957,117.771,405.956,127.259,400.093,133.123z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2666
+ 'list': `<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><g id="Todo"><path d="m20.4 12.349a.5.5 0 0 1 -.5.5h-8.612a.5.5 0 0 1 0-1h8.612a.5.5 0 0 1 .5.5zm-9.112-5.549h8.612a.5.5 0 0 0 0-1h-8.612a.5.5 0 0 0 0 1zm-2.9-2.271-2.05 2.418-.84-1.1a.5.5 0 1 0 -.795.606l1.217 1.6a.5.5 0 0 0 .385.2h.013a.5.5 0 0 0 .382-.185l2.451-2.895a.5.5 0 1 0 -.763-.647zm11.512 13.371h-8.612a.5.5 0 0 0 0 1h8.612a.5.5 0 0 0 0-1zm-10.8-5.551a2.249 2.249 0 1 1 -2.251-2.249 2.252 2.252 0 0 1 2.251 2.249zm-1 0a1.249 1.249 0 1 0 -1.251 1.251 1.25 1.25 0 0 0 1.251-1.251zm1 6.053a2.249 2.249 0 1 1 -2.249-2.249 2.251 2.251 0 0 1 2.249 2.247zm-1 0a1.249 1.249 0 1 0 -1.251 1.248 1.25 1.25 0 0 0 1.251-1.25z"/></g></svg>`,
2667
+ 'load': `<svg id="Layer_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m12 23c-6.1 0-11-4.9-11-11 0-.6.4-1 1-1s1 .4 1 1c0 5 4 9 9 9s9-4 9-9-4-9-9-9c-.6 0-1-.4-1-1s.4-1 1-1c6.1 0 11 4.9 11 11s-4.9 11-11 11z" fill="rgb(0,0,0)"/></g></svg>`,
2668
+ 'lock': `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g id="Layer_11" fill="rgb(0,0,0)" data-name="Layer 11"><path d="m24 11.57h-.53v-3.1a7.47 7.47 0 1 0 -14.94 0v3.1h-.53a4 4 0 0 0 -4 4v11.43a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-11.43a4 4 0 0 0 -4-4zm-13.47-3.1a5.47 5.47 0 1 1 10.94 0v3.1h-10.94zm15.47 18.53a2 2 0 0 1 -2 2h-16a2 2 0 0 1 -2-2v-11.43a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/><path d="m16 17.926a1.948 1.948 0 0 0 -1.354 3.348v2.371a1 1 0 0 0 1 1h.708a1 1 0 0 0 1-1v-2.371a1.948 1.948 0 0 0 -1.354-3.348z"/></g></svg>`,
2669
+ 'minus': `<svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m18 11h-12c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z" fill="rgb(0,0,0)"/></svg>`,
2670
+ 'padlock': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;M96,437v30c0,16.569,13.431,30,30,30h300c16.569,0,30-13.431,30-30V247c0-16.569-13.431-30-30-30H126c-16.569,0-30,13.431-30,30v30&#10;&#9;&#9;"/><rect x="56" y="277" style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" width="80" height="160"/><line style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="136" y1="357" x2="56" y2="357"/><path style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;M196,217v-62c0-44.183,35.817-80,80-80h0c44.183,0,80,35.817,80,80v62h60v-62c0-77.32-62.68-140-140-140h0&#10;&#9;&#9;c-77.32,0-140,62.68-140,140v62H196z"/><circle style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="276" cy="357" r="30"/><line style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="276" y1="387" x2="276" y2="417"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2671
+ 'plus': `<svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="rgb(0,0,0)" fill-rule="evenodd"><path d="m12.0313 4.25c.4142.00054.7496.33677.749.75098l-.0183 14.00002c-.0006.4142-.3368.7495-.751.749s-.7496-.3368-.749-.751l.0183-13.99998c.0006-.41422.3368-.74956.751-.74902z"/><path d="m4.25 12c0-.4142.33579-.75.75-.75h14c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-14c-.41421 0-.75-.3358-.75-.75z"/></g></svg>`,
2672
+ 'question': `<svg id="Layer_1" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="LWPOLYLINE"><g><path d="m31.321 38.904c-.006 0-.012 0-.018 0-1.104-.01-1.992-.913-1.982-2.018l.009-1c0-.057.003-.115.009-.172.277-2.909 2.208-4.692 3.761-6.125.526-.486 1.024-.945 1.448-1.424.517-.583 1.267-1.777.478-3.218-.909-1.664-3.129-2.135-4.854-1.74-1.802.412-2.466 1.951-2.702 2.831-.286 1.067-1.383 1.7-2.45 1.415-1.067-.286-1.7-1.383-1.415-2.45.797-2.977 2.865-5.052 5.673-5.695 3.779-.863 7.585.664 9.256 3.719 1.391 2.544 1.01 5.529-.995 7.791-.557.628-1.152 1.178-1.728 1.709-1.435 1.325-2.332 2.211-2.484 3.49l-.008.903c-.008 1.101-.902 1.984-1.998 1.984z"/></g></g><g id="POINT"><g><path d="m31.32 44.9c-.52 0-1.04-.21-1.41-.58-.38-.37-.59-.89-.59-1.42 0-.52.21-1.04.59-1.41.74-.74 2.08-.74 2.82 0 .38.37.59.89.59 1.41 0 .53-.21 1.04-.58 1.42-.38.37-.89.58-1.42.58z"/></g></g><g id="CIRCLE_2_"><g><path d="m31.923 57.997c-2.275 0-4.53-.296-6.703-.881-9.364-2.519-16.696-10.276-18.679-19.763-2.021-9.665 1.709-19.825 9.504-25.884 4.506-3.503 10.189-5.433 16.003-5.433 4.025 0 8.022.936 11.56 2.705 8.737 4.371 14.382 13.503 14.382 23.266 0 7.966-3.759 15.644-10.055 20.538-4.522 3.516-10.209 5.452-16.012 5.452zm.126-47.961c-4.929 0-9.741 1.63-13.548 4.591-6.597 5.128-9.755 13.727-8.044 21.907 1.678 8.025 7.881 14.588 15.803 16.719 1.834.493 3.74.744 5.663.744h.001c4.918 0 9.732-1.637 13.557-4.61 5.329-4.142 8.51-10.639 8.51-17.38 0-8.261-4.777-15.989-12.171-19.688-2.986-1.493-6.364-2.283-9.771-2.283z"/></g></g></g></svg>`,
2673
+ 'settings': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M493.758,234.717h-86.347c-10.076,0-18.242,8.166-18.242,18.242c0,10.076,8.166,18.242,18.242,18.242h86.347 c10.076,0,18.242-8.166,18.242-18.242C512,242.884,503.834,234.717,493.758,234.717z"/></g></g><g><g><path d="M275.458,234.717H18.242C8.166,234.717,0,242.884,0,252.96c0,10.076,8.166,18.242,18.242,18.242h257.216 c10.076,0,18.242-8.166,18.242-18.242C293.701,242.884,285.534,234.717,275.458,234.717z"/></g></g><g><g><path d="M341.131,169.045c-46.275,0-83.914,37.646-83.914,83.914c0,46.275,37.646,83.915,83.914,83.915 c46.268,0,83.914-37.64,83.914-83.915C425.045,206.691,387.405,169.045,341.131,169.045z M341.131,300.39 c-26.153,0-47.43-21.277-47.43-47.43c0-26.153,21.277-47.43,47.43-47.43c26.153,0,47.436,21.277,47.436,47.43 C388.567,279.113,367.29,300.39,341.131,300.39z"/></g></g><g><g><path d="M104.589,385.52H18.242C8.166,385.52,0,393.687,0,403.763s8.166,18.242,18.242,18.242h86.347 c10.076,0,18.242-8.166,18.242-18.242S114.665,385.52,104.589,385.52z"/></g></g><g><g><path d="M493.758,385.52H236.542c-10.076,0-18.242,8.167-18.242,18.242s8.166,18.242,18.242,18.242h257.216 c10.076,0,18.242-8.166,18.242-18.242S503.834,385.52,493.758,385.52z"/></g></g><g><g><path d="M170.869,319.848c-46.269,0-83.914,37.64-83.914,83.914s37.646,83.915,83.914,83.915s83.914-37.646,83.914-83.914 S217.138,319.848,170.869,319.848z M170.869,451.199c-26.153,0-47.43-21.277-47.43-47.43c0-26.159,21.277-47.436,47.43-47.436 c26.153,0,47.43,21.277,47.43,47.436C218.299,429.922,197.023,451.199,170.869,451.199z"/></g></g><g><g><path d="M104.589,89.995H18.242C8.166,89.995,0,98.162,0,108.238s8.166,18.242,18.242,18.242h86.347 c10.076,0,18.242-8.166,18.242-18.242S114.665,89.995,104.589,89.995z"/></g></g><g><g><path d="M493.758,89.995H236.542c-10.076,0-18.242,8.167-18.242,18.242s8.166,18.242,18.242,18.242h257.216 c10.076,0,18.242-8.166,18.242-18.242S503.834,89.995,493.758,89.995z"/></g></g><g><g><path d="M170.869,24.323c-46.269,0-83.914,37.646-83.914,83.914c0,46.268,37.646,83.914,83.914,83.914s83.914-37.64,83.914-83.914 C254.784,61.963,217.138,24.323,170.869,24.323z M170.869,155.667c-26.153,0-47.43-21.277-47.43-47.43 c0-26.153,21.277-47.43,47.43-47.43c26.153,0,47.43,21.277,47.43,47.43C218.299,134.391,197.023,155.667,170.869,155.667z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2674
+ 'square-rounded-dashed': `<svg fill="none" height="25" viewBox="0 0 24 25" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m11.9979 2.0271h.0042c.6824 0 1.3167 0 1.9043.00498.4142.00351.7471.34213.7436.75633s-.3422.74713-.7564.74362c-.5806-.00493-1.2089-.00493-1.8936-.00493s-1.313 0-1.8937.00493c-.41416.00351-.75278-.32942-.75629-.74362s.32941-.75282.74359-.75633c.5876-.00498 1.2219-.00498 1.9043-.00498zm-4.96054.86429c.07573.40723-.19299.79875-.60022.87449-.9433.17544-1.55071.46794-2.01557.93279-.46485.46486-.75735 1.07227-.93279 2.01557-.07574.40723-.46726.67595-.87449.60022-.40723-.07574-.67596-.46727-.60022-.8745.21113-1.13518.60236-2.05746 1.34684-2.80195.74449-.74449 1.66677-1.13572 2.80195-1.34684.40723-.07574.79876.19299.8745.60022zm9.92524 0c.0758-.40723.4673-.67596.8745-.60022 1.1352.21112 2.0575.60236 2.802 1.34684.7445.74449 1.1357 1.66677 1.3468 2.80195.0758.40723-.193.79876-.6002.8745-.4072.07573-.7987-.19299-.8745-.60022-.1754-.9433-.4679-1.55071-.9328-2.01557-.4648-.46485-1.0722-.75735-2.0155-.93279-.4073-.07574-.676-.46726-.6003-.87449zm-14.45129 6.73574c.4142.00351.74713.34213.74362.75637-.00492.5806-.00493 1.2089-.00493 1.8936s.00001 1.3131.00493 1.8937c.00351.4142-.32942.7528-.74362.7563-.41419.0036-.75282-.3294-.75633-.7436-.00498-.5876-.00498-1.2219-.00498-1.9043v-.0042c0-.6824 0-1.3167.00498-1.9043.00351-.41416.34213-.74709.75633-.74357zm18.97739 0c.4142-.00352.7528.32941.7563.74357.005.5878.005 1.2223.005 1.9048v.0039c0 .6823 0 1.3166-.005 1.9041-.0035.4142-.3421.7472-.7563.7436-.4142-.0035-.7471-.3421-.7436-.7563.0049-.5806.0049-1.209.0049-1.8937s0-1.313-.0049-1.8936c-.0035-.41424.3294-.75286.7436-.75637zm-18.87441 7.61257c.40723-.0757.79875.193.87449.6003.17544.9433.46794 1.5507.93279 2.0155.46486.4649 1.07227.7574 2.01557.9328.40723.0758.67595.4673.60022.8745-.07574.4072-.46727.676-.8745.6002-1.13518-.2111-2.05746-.6023-2.80195-1.3468s-1.13571-1.6668-1.34684-2.802c-.07574-.4072.19299-.7987.60022-.8745zm18.77141 0c.4072.0758.676.4673.6002.8745-.2111 1.1352-.6023 2.0575-1.3468 2.802s-1.6668 1.1357-2.802 1.3468c-.4072.0758-.7987-.193-.8745-.6002-.0757-.4072.193-.7987.6003-.8745.9433-.1754 1.5507-.4679 2.0155-.9328.4649-.4648.7574-1.0722.9328-2.0155.0758-.4073.4673-.676.8745-.6003zm-12.03552 4.5261c.00351-.4142.34214-.7471.75632-.7436.5806.0049 1.2089.0049 1.8935.0049.6847 0 1.313 0 1.8936-.0049.4142-.0035.7529.3294.7564.7436s-.3294.7528-.7436.7563c-.5876.005-1.2218.005-1.9041.005h-.0039c-.6824 0-1.3169 0-1.9046-.005-.4142-.0035-.74713-.3421-.74362-.7563z" fill="rgb(0,0,0)" fill-rule="evenodd"/></svg>`,
2675
+ 'trash': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>`,
2676
+ 'user': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
2677
+ 'users': `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M437.76,195.421c14.561-14.261,23.04-33.742,23.04-54.621c0-42.346-34.45-76.8-76.8-76.8 c-13.992,0-27.758,3.846-39.825,11.125c-4.033,2.438-5.333,7.679-2.9,11.717c2.433,4.038,7.683,5.325,11.717,2.9 c9.408-5.675,20.125-8.675,31.008-8.675c32.933,0,59.733,26.796,59.733,59.733c0,20.283-10.158,38.979-27.208,50.037 c-14.317,9.392-32.467,12.1-49.042,7.379c-4.483-1.292-9.25,1.325-10.55,5.858c-1.292,4.533,1.333,9.254,5.867,10.55 c6.9,1.975,14.033,2.975,21.2,2.975c13.418,0,26.388-3.66,37.903-10.27c43.806,15.873,73.03,57.232,73.03,104.137v42.667h-77.812 c-6.044-56.996-41.902-106.872-94.205-130.555c16.644-16.946,26.95-40.138,26.95-65.711C349.867,106.108,307.758,64,256,64 c-51.758,0-93.867,42.108-93.867,93.867c0,25.581,10.312,48.78,26.965,65.728c-17.602,7.997-33.927,19.185-47.773,32.952 c-26.543,26.619-42.695,60.784-46.529,97.588H17.067v-42.667c0-29.55,11.542-57.412,32.467-78.425 c11.519-11.446,25.543-20.178,40.643-25.666C101.694,213.96,114.625,217.6,128,217.6c7.167,0,14.3-1,21.2-2.975 c4.533-1.296,7.158-6.017,5.867-10.55c-1.3-4.533-6.067-7.146-10.55-5.858c-16.567,4.729-34.708,2.025-49.083-7.4 c-17.008-11.038-27.167-29.733-27.167-50.017c0-32.937,26.8-59.733,59.733-59.733c10.883,0,21.6,3,31.008,8.675 c4.05,2.425,9.275,1.125,11.717-2.9c2.433-4.037,1.133-9.279-2.9-11.717C155.758,67.846,141.992,64,128,64 c-42.35,0-76.8,34.454-76.8,76.8c0,20.863,8.465,40.329,22.984,54.577c-13.533,6.291-26.032,14.976-36.717,25.59 C13.308,245.233,0,277.371,0,311.467v51.2c0,4.713,3.817,8.533,8.533,8.533h85.333v68.267c0,4.713,3.817,8.533,8.533,8.533h307.2 c4.717,0,8.533-3.821,8.533-8.533V371.2h85.333c4.717,0,8.533-3.821,8.533-8.533v-51.2 C512,261.012,482.678,216.128,437.76,195.421z M179.2,157.867c0-42.346,34.45-76.8,76.8-76.8c42.35,0,76.8,34.454,76.8,76.8 s-34.45,76.8-76.8,76.8C213.65,234.667,179.2,200.212,179.2,157.867z M401.067,430.933H110.933V371.2 c0-38.692,15.083-75.129,42.45-102.579c14.417-14.34,31.895-25.463,50.634-32.659c14.895,9.947,32.767,15.771,51.983,15.771 c19.248,0,37.151-5.841,52.06-15.818c55.778,21.431,93.007,75.205,93.007,135.285V430.933z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`,
2678
+ 'x': `<svg id="Icons" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m4.59 59.41a2 2 0 0 0 2.83 0l24.58-24.58 24.59 24.58a2 2 0 0 0 2.83-2.83l-24.59-24.58 24.58-24.59a2 2 0 0 0 -2.83-2.83l-24.58 24.59-24.59-24.58a2 2 0 0 0 -2.82 2.82l24.58 24.59-24.58 24.59a2 2 0 0 0 0 2.82z"/></svg>`,
2679
+ };
2680
+
2681
+ function provideCoarIconBuiltInSourceAs(key) {
2682
+ return provideCoarIconMapSource({ key, icons: CORE_ICONS });
2683
+ }
2684
+
2595
2685
  /**
2596
2686
  * Individual tab definition for use within CoarTabGroup.
2597
2687
  *
@@ -2800,7 +2890,7 @@ class CoarButtonComponent {
2800
2890
  }
2801
2891
  }
2802
2892
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2803
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarButtonComponent, isStandalone: true, selector: "coar-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.coar-button-host": "true", "class.coar-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n class=\"coar-button\"\n [class.coar-button--primary]=\"variant() === 'primary'\"\n [class.coar-button--secondary]=\"variant() === 'secondary'\"\n [class.coar-button--tertiary]=\"variant() === 'tertiary'\"\n [class.coar-button--danger]=\"variant() === 'danger'\"\n [class.coar-button--ghost]=\"variant() === 'ghost'\"\n [class.coar-button--xs]=\"size() === 'xs'\"\n [class.coar-button--sm]=\"size() === 'sm'\"\n [class.coar-button--md]=\"size() === 'md'\"\n [class.coar-button--lg]=\"size() === 'lg'\"\n [class.coar-button--loading]=\"loading()\"\n [class.coar-button--loading-overlay]=\"loading() && !iconStart() && !iconEnd()\"\n [class.coar-button--disabled]=\"disabled()\"\n [class.coar-button--full-width]=\"fullWidth()\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-disabled]=\"disabled() || loading()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"onClick($event)\"\n>\n <!-- Loading Spinner: Centered overlay when no icons, inline replacement when icons exist -->\n @if (loading() && !iconStart() && !iconEnd()) {\n <!-- Overlay spinner (centered, content hidden via opacity) -->\n <span class=\"coar-button__spinner coar-button__spinner--overlay\" aria-hidden=\"true\">\n <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n </span>\n }\n\n <!-- Icon Start: Show spinner instead when loading -->\n @if (loading() && iconStart()) {\n <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n </span>\n } @else if (iconStart()) {\n <span class=\"coar-button__icon coar-button__icon--start\" aria-hidden=\"true\">\n <coar-icon [name]=\"iconStart()\" [size]=\"iconSize()\" />\n </span>\n }\n\n <!-- Content -->\n <span class=\"coar-button__content\">\n <ng-content />\n </span>\n\n <!-- Icon End: Show spinner instead when loading (only if no iconStart) -->\n @if (loading() && !iconStart() && iconEnd()) {\n <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n </span>\n } @else if (iconEnd()) {\n <span class=\"coar-button__icon coar-button__icon--end\" aria-hidden=\"true\">\n <coar-icon [name]=\"iconEnd()\" [size]=\"iconSize()\" />\n </span>\n }\n</button>\n", styles: [":host{display:inline-block}:host(.coar-button--full-width){display:block;width:100%}.coar-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--coar-radius-xs);font-family:var(--coar-body-base-family);font-weight:var(--coar-body-base-weight);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}.coar-button:focus-visible{outline:2px solid var(--coar-border-accent-primary);outline-offset:2px}.coar-button--xs{height:var(--coar-component-xs-height);padding:0 10px;font-size:var(--coar-component-xs-font-size);gap:.375rem}.coar-button--sm{height:var(--coar-component-sm-height);padding:0 12px;font-size:var(--coar-component-sm-font-size);gap:.375rem}.coar-button--md{height:var(--coar-component-md-height);padding:0 16px;font-size:var(--coar-component-md-font-size)}.coar-button--lg{height:var(--coar-component-lg-height);padding:0 24px;font-size:var(--coar-component-lg-font-size);gap:.625rem}.coar-button--primary{background:var(--coar-background-accent-primary);color:var(--coar-color-white)}.coar-button--primary:hover:not(:disabled){background:var(--coar-background-accent-hover)}.coar-button--primary:active:not(:disabled){background:var(--coar-background-accent-active)}.coar-button--secondary{background:var(--coar-background-neutral-secondary);color:var(--coar-text-neutral-secondary);border:1px solid var(--coar-border-neutral-tertiary)}.coar-button--secondary:hover:not(:disabled){background:var(--coar-background-neutral-tertiary);color:var(--coar-text-neutral-primary)}.coar-button--secondary:active:not(:disabled){background:var(--coar-color-gray-500)}.coar-button--tertiary{background:var(--coar-background-accent-tertiary);color:var(--coar-text-accent-primary)}.coar-button--tertiary:hover:not(:disabled){background:var(--coar-background-accent-secondary)}.coar-button--tertiary:active:not(:disabled){background:var(--coar-color-accent-300)}.coar-button--danger{background:var(--coar-background-semantic-error-bold);color:var(--coar-text-on-bold)}.coar-button--danger:hover:not(:disabled){background:var(--coar-color-red-700)}.coar-button--danger:active:not(:disabled){background:var(--coar-color-red-800)}.coar-button--ghost{background:transparent;color:var(--coar-text-neutral-primary)}.coar-button--ghost:hover:not(:disabled){background:var(--coar-background-neutral-secondary)}.coar-button--ghost:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-button--disabled,.coar-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.coar-button--loading{cursor:wait;pointer-events:none;-webkit-user-select:none;user-select:none}.coar-button--loading-overlay .coar-button__content{opacity:0}.coar-button--full-width{width:100%}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty){padding:0;aspect-ratio:1}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__icon{margin:0}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__spinner--inline{margin:0}.coar-button__content{display:inline-flex;align-items:center;gap:inherit}.coar-button__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__icon--start{margin-left:-.125rem}.coar-button__icon--end{margin-right:-.125rem}.coar-button__spinner{display:inline-flex;align-items:center;justify-content:center}.coar-button__spinner--overlay{position:absolute}.coar-button__spinner--inline{width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__spinner--inline:first-child{margin-left:-.125rem}.coar-button__spinner--inline:last-of-type{margin-right:-.125rem}:host-context(.dark-mode) .coar-button--primary,:host-context(:root.dark-mode) .coar-button--primary{color:var(--coar-color-black)}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2893
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarButtonComponent, isStandalone: true, selector: "coar-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.coar-button-host": "true", "class.coar-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n class=\"coar-button\"\n [class.coar-button--primary]=\"variant() === 'primary'\"\n [class.coar-button--secondary]=\"variant() === 'secondary'\"\n [class.coar-button--tertiary]=\"variant() === 'tertiary'\"\n [class.coar-button--danger]=\"variant() === 'danger'\"\n [class.coar-button--ghost]=\"variant() === 'ghost'\"\n [class.coar-button--xs]=\"size() === 'xs'\"\n [class.coar-button--sm]=\"size() === 'sm'\"\n [class.coar-button--md]=\"size() === 'md'\"\n [class.coar-button--lg]=\"size() === 'lg'\"\n [class.coar-button--loading]=\"loading()\"\n [class.coar-button--loading-overlay]=\"loading() && !iconStart() && !iconEnd()\"\n [class.coar-button--disabled]=\"disabled()\"\n [class.coar-button--full-width]=\"fullWidth()\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-disabled]=\"disabled() || loading()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"onClick($event)\"\n>\n <!-- Loading Spinner: Centered overlay when no icons, inline replacement when icons exist -->\n @if (loading() && !iconStart() && !iconEnd()) {\n <!-- Overlay spinner (centered, content hidden via opacity) -->\n <span class=\"coar-button__spinner coar-button__spinner--overlay\" aria-hidden=\"true\">\n <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n </span>\n }\n\n <!-- Icon Start: Show spinner instead when loading -->\n @if (loading() && iconStart()) {\n <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n </span>\n } @else if (iconStart()) {\n <span class=\"coar-button__icon coar-button__icon--start\" aria-hidden=\"true\">\n <coar-icon [name]=\"iconStart()\" [size]=\"iconSize()\" />\n </span>\n }\n\n <!-- Content -->\n <span class=\"coar-button__content\">\n <ng-content />\n </span>\n\n <!-- Icon End: Show spinner instead when loading (only if no iconStart) -->\n @if (loading() && !iconStart() && iconEnd()) {\n <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n </span>\n } @else if (iconEnd()) {\n <span class=\"coar-button__icon coar-button__icon--end\" aria-hidden=\"true\">\n <coar-icon [name]=\"iconEnd()\" [size]=\"iconSize()\" />\n </span>\n }\n</button>\n", styles: [":host{display:inline-block}:host(.coar-button--full-width){display:block;width:100%}.coar-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--coar-radius-xs);font-family:var(--coar-body-base-family);font-weight:var(--coar-body-base-weight);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}.coar-button:focus-visible{outline:2px solid var(--coar-border-accent-primary);outline-offset:2px}.coar-button--xs{height:var(--coar-component-xs-height);padding:0 10px;font-size:var(--coar-component-xs-font-size);gap:.375rem}.coar-button--sm{height:var(--coar-component-sm-height);padding:0 12px;font-size:var(--coar-component-sm-font-size);gap:.375rem}.coar-button--md{height:var(--coar-component-md-height);padding:0 16px;font-size:var(--coar-component-md-font-size)}.coar-button--lg{height:var(--coar-component-lg-height);padding:0 24px;font-size:var(--coar-component-lg-font-size);gap:.625rem}.coar-button--primary{background:var(--coar-background-accent-primary);color:var(--coar-color-white)}.coar-button--primary:hover:not(:disabled){background:var(--coar-background-accent-hover)}.coar-button--primary:active:not(:disabled){background:var(--coar-background-accent-active)}.coar-button--secondary{background:var(--coar-background-neutral-secondary);color:var(--coar-text-neutral-secondary);border:1px solid var(--coar-border-neutral-tertiary)}.coar-button--secondary:hover:not(:disabled){background:var(--coar-background-neutral-tertiary);color:var(--coar-text-neutral-primary)}.coar-button--secondary:active:not(:disabled){background:var(--coar-color-gray-500)}.coar-button--tertiary{background:var(--coar-background-accent-tertiary);color:var(--coar-text-accent-primary)}.coar-button--tertiary:hover:not(:disabled){background:var(--coar-background-accent-secondary)}.coar-button--tertiary:active:not(:disabled){background:var(--coar-color-accent-300)}.coar-button--danger{background:var(--coar-background-semantic-error-bold);color:var(--coar-text-on-bold)}.coar-button--danger:hover:not(:disabled){background:var(--coar-color-red-700)}.coar-button--danger:active:not(:disabled){background:var(--coar-color-red-800)}.coar-button--ghost{background:transparent;color:var(--coar-text-neutral-primary)}.coar-button--ghost:hover:not(:disabled){background:var(--coar-background-neutral-secondary)}.coar-button--ghost:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-button--disabled,.coar-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.coar-button--loading{cursor:wait;pointer-events:none;-webkit-user-select:none;user-select:none}.coar-button--loading-overlay .coar-button__content{opacity:0}.coar-button--full-width{width:100%}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty){padding:0;aspect-ratio:1}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__icon{margin:0}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__spinner--inline{margin:0}.coar-button__content{display:inline-flex;align-items:center;gap:inherit}.coar-button__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__icon--start{margin-left:-.125rem}.coar-button__icon--end{margin-right:-.125rem}.coar-button__spinner{display:inline-flex;align-items:center;justify-content:center}.coar-button__spinner--overlay{position:absolute}.coar-button__spinner--inline{width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__spinner--inline:first-child{margin-left:-.125rem}.coar-button__spinner--inline:last-of-type{margin-right:-.125rem}:host-context(.dark-mode) .coar-button--primary,:host-context(:root.dark-mode) .coar-button--primary{color:var(--coar-color-black)}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2804
2894
  }
2805
2895
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarButtonComponent, decorators: [{
2806
2896
  type: Component,
@@ -4718,7 +4808,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
4718
4808
  this.viewDate.set(newDate.toPlainYearMonth());
4719
4809
  }
4720
4810
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4721
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarDatePickerComponent, isStandalone: true, selector: "coar-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, message: { classPropertyName: "message", publicName: "message", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class.coar-date-picker--xs": "size() === \"xs\"", "class.coar-date-picker--sm": "size() === \"sm\"", "class.coar-date-picker--md": "size() === \"md\"", "class.coar-date-picker--lg": "size() === \"lg\"", "class.coar-date-picker--disabled": "isDisabled()", "class.coar-date-picker--readonly": "readonly()", "class.coar-date-picker--error": "hasError()", "class.coar-date-picker--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent), CoarPopoverGroupService], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"coar-date-picker-wrapper\"\n>\n <!-- Label -->\n @if (label()) {\n <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n }\n </span>\n }\n\n <!-- Trigger -->\n <div\n #trigger\n class=\"coar-date-picker-trigger\"\n [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n [class.coar-date-picker-trigger--error]=\"hasError()\"\n [class.coar-date-picker-trigger--open]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n role=\"combobox\"\n >\n <!-- Clear Button (left side) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n size=\"auto\"\n class=\"coar-date-picker-clear\"\n [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n aria-hidden=\"true\"\n (click)=\"clearDate($event)\"\n />\n\n <!-- Date Input -->\n <input\n #dateInput\n type=\"text\"\n class=\"coar-date-picker-input\"\n [attr.id]=\"inputId()\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder() || inputPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-invalid]=\"hasError()\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <!-- Calendar Icon (right side) -->\n <button\n type=\"button\"\n class=\"coar-date-picker-calendar-btn\"\n aria-label=\"Open calendar\"\n [disabled]=\"isDisabled() || readonly()\"\n (click)=\"onTriggerClick()\"\n >\n <coar-icon name=\"calendar\" size=\"sm\" />\n </button>\n </div>\n\n <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n <ng-template #calendarTemplate>\n <div\n class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n [attr.id]=\"calendarId()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Calendar\"\n >\n <!-- Calendar Header -->\n <div class=\"coar-date-picker-header\">\n <button\n type=\"button\"\n class=\"coar-date-picker-nav\"\n aria-label=\"Previous year\"\n (click)=\"previousYear()\"\n >\n <coar-icon name=\"chevrons-left\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n class=\"coar-date-picker-nav\"\n aria-label=\"Previous month\"\n (click)=\"previousMonth()\"\n >\n <coar-icon name=\"chevron-left\" size=\"sm\" />\n </button>\n\n <span class=\"coar-date-picker-month-year\">\n <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n </span>\n\n <button\n type=\"button\"\n class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n aria-label=\"Next month\"\n (click)=\"nextMonth()\"\n >\n <coar-icon name=\"chevron-right\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n aria-label=\"Next year\"\n (click)=\"nextYear()\"\n >\n <coar-icon name=\"chevrons-right\" size=\"sm\" />\n </button>\n </div>\n\n <!-- Days of Week Header -->\n <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n @if (showWeekNumbers()) {\n <span class=\"coar-date-picker-week-spacer\"></span>\n }\n @for (day of daysOfWeek(); track day) {\n <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n <!-- Week number at start of each row -->\n @if (showWeekNumbers() && i % 7 === 0) {\n <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n }\n <coar-popover\n [disabled]=\"day.isDisabled || day.markers.length === 0\"\n [openOnClick]=\"true\"\n [openOnHover]=\"true\"\n [interactive]=\"false\"\n >\n <button\n coarPopoverTrigger\n type=\"button\"\n class=\"coar-date-picker-day\"\n [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n [class.coar-date-picker-day--today]=\"day.isToday\"\n [class.coar-date-picker-day--selected]=\"day.isSelected\"\n [class.coar-date-picker-day--focused]=\"day.isFocused\"\n [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n [class]=\"day.markerCssClass\"\n [disabled]=\"day.isDisabled\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDate(day.date)\"\n >\n {{ day.day }}\n </button>\n\n @if (day.markers.length > 0) {\n <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n <div class=\"coar-date-picker-marker-popover__list\">\n @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n <div class=\"coar-date-picker-marker-popover__item\">\n {{ marker.description }}\n </div>\n }\n\n @if (getHiddenMarkerCount(day.markers) > 0) {\n <div class=\"coar-date-picker-marker-popover__more\">\n +{{ getHiddenMarkerCount(day.markers) }} other events\n </div>\n }\n </div>\n </div>\n }\n </coar-popover>\n }\n </div>\n\n <!-- Footer with Today Button -->\n @if (showTodayButton()) {\n <div class=\"coar-date-picker-footer\">\n <button\n type=\"button\"\n class=\"coar-date-picker-today\"\n (click)=\"selectToday()\"\n >\n Today\n </button>\n </div>\n }\n </div>\n </ng-template>\n\n <!-- Helper/Error Message -->\n @if (message()) {\n <span\n class=\"coar-date-picker-message\"\n [class.coar-date-picker-message--error]=\"hasError()\"\n >\n {{ message() }}\n </span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-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-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "component", type: CoarPopoverComponent, selector: "coar-popover", inputs: ["disabled", "openOnHover", "openOnClick", "interactive", "fallbackToBestFit", "clampToViewport"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4811
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarDatePickerComponent, isStandalone: true, selector: "coar-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, message: { classPropertyName: "message", publicName: "message", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class.coar-date-picker--xs": "size() === \"xs\"", "class.coar-date-picker--sm": "size() === \"sm\"", "class.coar-date-picker--md": "size() === \"md\"", "class.coar-date-picker--lg": "size() === \"lg\"", "class.coar-date-picker--disabled": "isDisabled()", "class.coar-date-picker--readonly": "readonly()", "class.coar-date-picker--error": "hasError()", "class.coar-date-picker--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent), CoarPopoverGroupService], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"coar-date-picker-wrapper\"\n>\n <!-- Label -->\n @if (label()) {\n <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n }\n </span>\n }\n\n <!-- Trigger -->\n <div\n #trigger\n class=\"coar-date-picker-trigger\"\n [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n [class.coar-date-picker-trigger--error]=\"hasError()\"\n [class.coar-date-picker-trigger--open]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n role=\"combobox\"\n >\n <!-- Clear Button (left side) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n size=\"auto\"\n class=\"coar-date-picker-clear\"\n [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n aria-hidden=\"true\"\n (click)=\"clearDate($event)\"\n />\n\n <!-- Date Input -->\n <input\n #dateInput\n type=\"text\"\n class=\"coar-date-picker-input\"\n [attr.id]=\"inputId()\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder() || inputPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-invalid]=\"hasError()\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <!-- Calendar Icon (right side) -->\n <button\n type=\"button\"\n class=\"coar-date-picker-calendar-btn\"\n aria-label=\"Open calendar\"\n [disabled]=\"isDisabled() || readonly()\"\n (click)=\"onTriggerClick()\"\n >\n <coar-icon name=\"calendar\" size=\"sm\" />\n </button>\n </div>\n\n <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n <ng-template #calendarTemplate>\n <div\n class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n [attr.id]=\"calendarId()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Calendar\"\n >\n <!-- Calendar Header -->\n <div class=\"coar-date-picker-header\">\n <button\n type=\"button\"\n class=\"coar-date-picker-nav\"\n aria-label=\"Previous year\"\n (click)=\"previousYear()\"\n >\n <coar-icon name=\"chevrons-left\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n class=\"coar-date-picker-nav\"\n aria-label=\"Previous month\"\n (click)=\"previousMonth()\"\n >\n <coar-icon name=\"chevron-left\" size=\"sm\" />\n </button>\n\n <span class=\"coar-date-picker-month-year\">\n <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n </span>\n\n <button\n type=\"button\"\n class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n aria-label=\"Next month\"\n (click)=\"nextMonth()\"\n >\n <coar-icon name=\"chevron-right\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n aria-label=\"Next year\"\n (click)=\"nextYear()\"\n >\n <coar-icon name=\"chevrons-right\" size=\"sm\" />\n </button>\n </div>\n\n <!-- Days of Week Header -->\n <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n @if (showWeekNumbers()) {\n <span class=\"coar-date-picker-week-spacer\"></span>\n }\n @for (day of daysOfWeek(); track day) {\n <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n <!-- Week number at start of each row -->\n @if (showWeekNumbers() && i % 7 === 0) {\n <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n }\n <coar-popover\n [disabled]=\"day.isDisabled || day.markers.length === 0\"\n [openOnClick]=\"true\"\n [openOnHover]=\"true\"\n [interactive]=\"false\"\n >\n <button\n coarPopoverTrigger\n type=\"button\"\n class=\"coar-date-picker-day\"\n [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n [class.coar-date-picker-day--today]=\"day.isToday\"\n [class.coar-date-picker-day--selected]=\"day.isSelected\"\n [class.coar-date-picker-day--focused]=\"day.isFocused\"\n [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n [class]=\"day.markerCssClass\"\n [disabled]=\"day.isDisabled\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDate(day.date)\"\n >\n {{ day.day }}\n </button>\n\n @if (day.markers.length > 0) {\n <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n <div class=\"coar-date-picker-marker-popover__list\">\n @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n <div class=\"coar-date-picker-marker-popover__item\">\n {{ marker.description }}\n </div>\n }\n\n @if (getHiddenMarkerCount(day.markers) > 0) {\n <div class=\"coar-date-picker-marker-popover__more\">\n +{{ getHiddenMarkerCount(day.markers) }} other events\n </div>\n }\n </div>\n </div>\n }\n </coar-popover>\n }\n </div>\n\n <!-- Footer with Today Button -->\n @if (showTodayButton()) {\n <div class=\"coar-date-picker-footer\">\n <button\n type=\"button\"\n class=\"coar-date-picker-today\"\n (click)=\"selectToday()\"\n >\n Today\n </button>\n </div>\n }\n </div>\n </ng-template>\n\n <!-- Helper/Error Message -->\n @if (message()) {\n <span\n class=\"coar-date-picker-message\"\n [class.coar-date-picker-message--error]=\"hasError()\"\n >\n {{ message() }}\n </span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-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-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-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"] }, { kind: "component", type: CoarPopoverComponent, selector: "coar-popover", inputs: ["disabled", "openOnHover", "openOnClick", "interactive", "fallbackToBestFit", "clampToViewport"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4722
4812
  }
4723
4813
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, decorators: [{
4724
4814
  type: Component,
@@ -4739,5 +4829,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
4739
4829
  * Generated bundle index. Do not edit.
4740
4830
  */
4741
4831
 
4742
- export { COAR_LOCALE_SERVICE, CORE_ICONS, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor };
4832
+ export { COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, COAR_LOCALE_SERVICE, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInSourceAs, provideCoarIconMapSource, provideCoarIconSource };
4743
4833
  //# sourceMappingURL=cocoar-ui-components.mjs.map