@cocoar/ui-components 0.1.0-beta.79 → 0.1.0-beta.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,7 +8,7 @@ import { HttpClient } from '@angular/common/http';
|
|
|
8
8
|
import { Maskito } from '@maskito/core';
|
|
9
9
|
import { maskitoNumberOptionsGenerator, maskitoDateOptionsGenerator } from '@maskito/kit';
|
|
10
10
|
import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
|
|
11
|
-
import {
|
|
11
|
+
import { createOverlayBuilder } from '@cocoar/ui-overlay';
|
|
12
12
|
import * as i1 from '@angular/common';
|
|
13
13
|
import { CommonModule, NgComponentOutlet } from '@angular/common';
|
|
14
14
|
import Prism from 'prismjs';
|
|
@@ -112,12 +112,97 @@ class CoarHttpIconSource {
|
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
+
/**
|
|
116
|
+
* Built-in icon registry.
|
|
117
|
+
*
|
|
118
|
+
* ⚠️ DO NOT EDIT THIS FILE MANUALLY
|
|
119
|
+
*
|
|
120
|
+
* This file is auto-generated from /assets/icons/*.svg files.
|
|
121
|
+
* To add new icons:
|
|
122
|
+
* 1. Add SVG files to /assets/icons/
|
|
123
|
+
* 2. Run: npm run build:icons
|
|
124
|
+
* 3. Commit the generated file
|
|
125
|
+
*
|
|
126
|
+
* Icons are inlined as strings for maximum portability.
|
|
127
|
+
*
|
|
128
|
+
* Generated: 2026-01-03T10:25:22.816Z
|
|
129
|
+
* Source: C:\git\cocoar\cocoar-ui\assets\icons
|
|
130
|
+
*/
|
|
131
|
+
const CORE_ICONS = {
|
|
132
|
+
'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>`,
|
|
133
|
+
'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>`,
|
|
134
|
+
'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>`,
|
|
135
|
+
'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>`,
|
|
136
|
+
'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>`,
|
|
137
|
+
'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>`,
|
|
138
|
+
'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>`,
|
|
139
|
+
'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>`,
|
|
140
|
+
'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>`,
|
|
141
|
+
'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>`,
|
|
142
|
+
'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>`,
|
|
143
|
+
'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>`,
|
|
144
|
+
'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>`,
|
|
145
|
+
'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>`,
|
|
146
|
+
'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>`,
|
|
147
|
+
'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>`,
|
|
148
|
+
'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>`,
|
|
149
|
+
'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>`,
|
|
150
|
+
'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>`,
|
|
151
|
+
'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>`,
|
|
152
|
+
'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>`,
|
|
153
|
+
'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>`,
|
|
154
|
+
'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>`,
|
|
155
|
+
'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>`,
|
|
156
|
+
'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>`,
|
|
157
|
+
'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>`,
|
|
158
|
+
'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>`,
|
|
159
|
+
'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>`,
|
|
160
|
+
'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>`,
|
|
161
|
+
'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>`,
|
|
162
|
+
'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>`,
|
|
163
|
+
'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>`,
|
|
164
|
+
'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=" 		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 		"/><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=" 		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 		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>`,
|
|
165
|
+
'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>`,
|
|
166
|
+
'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>`,
|
|
167
|
+
'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>`,
|
|
168
|
+
'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>`,
|
|
169
|
+
'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>`,
|
|
170
|
+
'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>`,
|
|
171
|
+
'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>`,
|
|
172
|
+
'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>`,
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
const COAR_BUILTIN_ICON_SOURCE_KEY = 'coar-builtin';
|
|
176
|
+
/**
|
|
177
|
+
* Overrides (and/or adds) built-in icons while keeping the built-in set as a base.
|
|
178
|
+
*
|
|
179
|
+
* This registers a map source under the fixed key `coar-builtin`, so it replaces the
|
|
180
|
+
* built-in fallback source inside `CoarIconService`.
|
|
181
|
+
*/
|
|
182
|
+
function provideCoarIconBuiltInOverrides(overrides) {
|
|
183
|
+
return provideCoarIconMapSource({
|
|
184
|
+
key: COAR_BUILTIN_ICON_SOURCE_KEY,
|
|
185
|
+
icons: {
|
|
186
|
+
...CORE_ICONS,
|
|
187
|
+
...overrides,
|
|
188
|
+
},
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
|
|
115
192
|
class CoarIconService {
|
|
116
|
-
|
|
193
|
+
builtInSource = {
|
|
194
|
+
getIcon: (name) => of(CORE_ICONS[name] ?? null),
|
|
195
|
+
getAvailableIconKeys: () => of(Object.keys(CORE_ICONS).sort()),
|
|
196
|
+
};
|
|
197
|
+
sourceEntries = [
|
|
198
|
+
{ key: COAR_BUILTIN_ICON_SOURCE_KEY, source: this.builtInSource },
|
|
199
|
+
...((inject(COAR_ICON_SOURCE_ENTRY, { optional: true }) ?? []) ??
|
|
200
|
+
[]),
|
|
201
|
+
];
|
|
117
202
|
defaultSourceOverrides = (inject(COAR_DEFAULT_ICON_SOURCE_KEY, {
|
|
118
203
|
optional: true,
|
|
119
204
|
}) ?? []);
|
|
120
|
-
sourceByKey = new Map(
|
|
205
|
+
sourceByKey = new Map(this.sourceEntries.map((entry) => [entry.key, entry.source]));
|
|
121
206
|
/**
|
|
122
207
|
* Get an icon by name from a specific icon source.
|
|
123
208
|
*
|
|
@@ -134,15 +219,11 @@ class CoarIconService {
|
|
|
134
219
|
* This is useful for UIs that allow users to browse icons grouped by source.
|
|
135
220
|
*/
|
|
136
221
|
getRegisteredSources() {
|
|
137
|
-
if (this.sourceByKey.size === 0)
|
|
138
|
-
return [];
|
|
139
222
|
const defaultKey = this.getDefaultSourceKeyOrThrow();
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
isDefault: entry.key === defaultKey,
|
|
145
|
-
canProvideIconKeys: typeof entry.source.getAvailableIconKeys === 'function',
|
|
223
|
+
return Array.from(this.sourceByKey.entries()).map(([key, source]) => ({
|
|
224
|
+
key,
|
|
225
|
+
isDefault: key === defaultKey,
|
|
226
|
+
canProvideIconKeys: typeof source.getAvailableIconKeys === 'function',
|
|
146
227
|
}));
|
|
147
228
|
}
|
|
148
229
|
/**
|
|
@@ -168,9 +249,6 @@ class CoarIconService {
|
|
|
168
249
|
}
|
|
169
250
|
}
|
|
170
251
|
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
252
|
const effectiveKey = sourceKey ?? this.getDefaultSourceKeyOrThrow();
|
|
175
253
|
const source = this.sourceByKey.get(effectiveKey);
|
|
176
254
|
if (!source) {
|
|
@@ -179,9 +257,6 @@ class CoarIconService {
|
|
|
179
257
|
return source;
|
|
180
258
|
}
|
|
181
259
|
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
260
|
const effectiveKey = sourceKey ?? this.getDefaultSourceKeyOrThrow();
|
|
186
261
|
const source = this.sourceByKey.get(effectiveKey);
|
|
187
262
|
if (!source) {
|
|
@@ -199,8 +274,7 @@ class CoarIconService {
|
|
|
199
274
|
}
|
|
200
275
|
return overrideKey;
|
|
201
276
|
}
|
|
202
|
-
|
|
203
|
-
return this.sourceEntries?.[0]?.key ?? Array.from(this.sourceByKey.keys())[0];
|
|
277
|
+
return COAR_BUILTIN_ICON_SOURCE_KEY;
|
|
204
278
|
}
|
|
205
279
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
206
280
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconService, providedIn: 'root' });
|
|
@@ -492,7 +566,8 @@ class CoarTextInputComponent extends CoarControlValueAccessor {
|
|
|
492
566
|
}, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
|
|
493
567
|
hasError = computed(() => this.error().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
494
568
|
displayMessage = computed(() => this.error() || this.hint(), ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
|
|
495
|
-
|
|
569
|
+
autoId = `coar-text-input-${cryptoRandomId$3()}`;
|
|
570
|
+
inputId = computed(() => this.id() || this.autoId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
496
571
|
messageId = computed(() => `${this.inputId()}-message`, ...(ngDevMode ? [{ debugName: "messageId" }] : []));
|
|
497
572
|
writeValue(value) {
|
|
498
573
|
this.value.set(value ?? '');
|
|
@@ -524,7 +599,7 @@ class CoarTextInputComponent extends CoarControlValueAccessor {
|
|
|
524
599
|
this.inputRef()?.nativeElement.focus();
|
|
525
600
|
}
|
|
526
601
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
602
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTextInputComponent, isStandalone: true, selector: "coar-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-text-input--xs": "size() === \"xs\"", "class.coar-text-input--sm": "size() === \"sm\"", "class.coar-text-input--md": "size() === \"md\"", "class.coar-text-input--lg": "size() === \"lg\"", "class.coar-text-input--multiline": "isMultiline()" } }, providers: [coarProvideValueAccessor(() => CoarTextInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-text-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-text-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-text-input-container\"\n [class.coar-text-input-focused]=\"isFocused()\"\n [class.coar-text-input-disabled]=\"isDisabled()\"\n [class.coar-text-input-readonly]=\"readonly()\"\n [class.coar-text-input-error]=\"hasError()\"\n >\n <!-- Prefix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n }\n\n <!-- Input Element (single-line) -->\n @if (!isMultiline()) {\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-text-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n }\n\n <!-- Textarea (multiline) -->\n @if (isMultiline()) {\n <textarea\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [rows]=\"rows()\"\n class=\"coar-text-input-field coar-text-input-textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n }\n\n <!-- Suffix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n }\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-text-input-clear\"\n [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n }\n\n <!-- Suffix Actions (always visible, e.g., action buttons) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix-actions\">\n <ng-content select=\"[suffixAction]\"></ng-content>\n </span>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:calc(var(--coar-component-md-height) + var(--coar-component-md-height))}:host(.coar-text-input--xs) .coar-text-input-textarea{min-height:calc(var(--coar-component-xs-height) + var(--coar-component-xs-height))}:host(.coar-text-input--sm) .coar-text-input-textarea{min-height:calc(var(--coar-component-sm-height) + var(--coar-component-sm-height))}:host(.coar-text-input--lg) .coar-text-input-textarea{min-height:calc(var(--coar-component-lg-height) + var(--coar-component-lg-height))}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-prefix:empty{padding-left:0;flex-basis:0}.coar-text-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{padding-right:0;flex-basis:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
528
603
|
}
|
|
529
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, decorators: [{
|
|
530
605
|
type: Component,
|
|
@@ -534,8 +609,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
534
609
|
'[class.coar-text-input--md]': 'size() === "md"',
|
|
535
610
|
'[class.coar-text-input--lg]': 'size() === "lg"',
|
|
536
611
|
'[class.coar-text-input--multiline]': 'isMultiline()',
|
|
537
|
-
}, 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"] }]
|
|
612
|
+
}, template: "<div class=\"coar-text-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-text-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-text-input-container\"\n [class.coar-text-input-focused]=\"isFocused()\"\n [class.coar-text-input-disabled]=\"isDisabled()\"\n [class.coar-text-input-readonly]=\"readonly()\"\n [class.coar-text-input-error]=\"hasError()\"\n >\n <!-- Prefix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n }\n\n <!-- Input Element (single-line) -->\n @if (!isMultiline()) {\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-text-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n }\n\n <!-- Textarea (multiline) -->\n @if (isMultiline()) {\n <textarea\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [rows]=\"rows()\"\n class=\"coar-text-input-field coar-text-input-textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n }\n\n <!-- Suffix (only for single-line) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n }\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-text-input-clear\"\n [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n }\n\n <!-- Suffix Actions (always visible, e.g., action buttons) -->\n @if (!isMultiline()) {\n <span class=\"coar-text-input-suffix-actions\">\n <ng-content select=\"[suffixAction]\"></ng-content>\n </span>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:calc(var(--coar-component-md-height) + var(--coar-component-md-height))}:host(.coar-text-input--xs) .coar-text-input-textarea{min-height:calc(var(--coar-component-xs-height) + var(--coar-component-xs-height))}:host(.coar-text-input--sm) .coar-text-input-textarea{min-height:calc(var(--coar-component-sm-height) + var(--coar-component-sm-height))}:host(.coar-text-input--lg) .coar-text-input-textarea{min-height:calc(var(--coar-component-lg-height) + var(--coar-component-lg-height))}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-prefix:empty{padding-left:0;flex-basis:0}.coar-text-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{padding-right:0;flex-basis:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
|
|
538
613
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
|
|
614
|
+
function cryptoRandomId$3() {
|
|
615
|
+
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
|
|
616
|
+
return crypto.randomUUID();
|
|
617
|
+
}
|
|
618
|
+
return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
|
|
619
|
+
}
|
|
539
620
|
|
|
540
621
|
/**
|
|
541
622
|
* Injection token for the locale service.
|
|
@@ -791,7 +872,8 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
|
|
|
791
872
|
}, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
|
|
792
873
|
hasError = computed(() => this.error().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
793
874
|
displayMessage = computed(() => this.error() || this.hint(), ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
|
|
794
|
-
|
|
875
|
+
autoId = `coar-number-input-${cryptoRandomId$2()}`;
|
|
876
|
+
inputId = computed(() => this.id() || this.autoId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
795
877
|
messageId = computed(() => `${this.inputId()}-message`, ...(ngDevMode ? [{ debugName: "messageId" }] : []));
|
|
796
878
|
iconSize = computed(() => {
|
|
797
879
|
const sizeMap = {
|
|
@@ -1024,7 +1106,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
|
|
|
1024
1106
|
}
|
|
1025
1107
|
}
|
|
1026
1108
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
1109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarNumberInputComponent, isStandalone: true, selector: "coar-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, stepperButtons: { classPropertyName: "stepperButtons", publicName: "stepperButtons", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { listeners: { "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" }, properties: { "class.coar-number-input--xs": "size() === \"xs\"", "class.coar-number-input--sm": "size() === \"sm\"", "class.coar-number-input--md": "size() === \"md\"", "class.coar-number-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarNumberInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-number-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label\n [for]=\"inputId()\"\n class=\"coar-number-input-label\"\n [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n (mousedown)=\"onDragStart($event)\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"coar-number-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-number-input-container\"\n [class.coar-number-input-focused]=\"isFocused()\"\n [class.coar-number-input-disabled]=\"isDisabled()\"\n [class.coar-number-input-readonly]=\"readonly()\"\n [class.coar-number-input-error]=\"hasError()\"\n [class.coar-number-input-dragging]=\"isDragging()\"\n >\n <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-number-input-clear\"\n [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n\n <!-- Prefix -->\n <span class=\"coar-number-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n class=\"coar-number-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Suffix -->\n <span class=\"coar-number-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n\n <!-- Increment/Decrement Buttons -->\n @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n <div class=\"coar-number-input-buttons\">\n @if (showDecrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--decrement\"\n [disabled]=\"!canDecrement()\"\n aria-label=\"Decrease value\"\n (click)=\"decrement()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n @if (showIncrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--increment\"\n [disabled]=\"!canIncrement()\"\n aria-label=\"Increase value\"\n (click)=\"increment()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1028
1110
|
}
|
|
1029
1111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, decorators: [{
|
|
1030
1112
|
type: Component,
|
|
@@ -1033,7 +1115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1033
1115
|
'[class.coar-number-input--sm]': 'size() === "sm"',
|
|
1034
1116
|
'[class.coar-number-input--md]': 'size() === "md"',
|
|
1035
1117
|
'[class.coar-number-input--lg]': 'size() === "lg"',
|
|
1036
|
-
}, 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"] }]
|
|
1118
|
+
}, template: "<div class=\"coar-number-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label\n [for]=\"inputId()\"\n class=\"coar-number-input-label\"\n [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n (mousedown)=\"onDragStart($event)\"\n >\n {{ label() }}\n @if (required()) {\n <span class=\"coar-number-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-number-input-container\"\n [class.coar-number-input-focused]=\"isFocused()\"\n [class.coar-number-input-disabled]=\"isDisabled()\"\n [class.coar-number-input-readonly]=\"readonly()\"\n [class.coar-number-input-error]=\"hasError()\"\n [class.coar-number-input-dragging]=\"isDragging()\"\n >\n <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n <coar-icon\n name=\"x\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-number-input-clear\"\n [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n aria-hidden=\"true\"\n (click)=\"onClear()\"\n />\n\n <!-- Prefix -->\n <span class=\"coar-number-input-prefix\">\n @if (prefix()) {\n {{ prefix() }}\n }\n <ng-content select=\"[prefix]\"></ng-content>\n </span>\n\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n class=\"coar-number-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Suffix -->\n <span class=\"coar-number-input-suffix\">\n @if (suffix()) {\n {{ suffix() }}\n }\n <ng-content select=\"[suffix]\"></ng-content>\n </span>\n\n <!-- Increment/Decrement Buttons -->\n @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n <div class=\"coar-number-input-buttons\">\n @if (showDecrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--decrement\"\n [disabled]=\"!canDecrement()\"\n aria-label=\"Decrease value\"\n (click)=\"decrement()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n @if (showIncrementButton()) {\n <button\n type=\"button\"\n class=\"coar-number-input-button coar-number-input-button--increment\"\n [disabled]=\"!canIncrement()\"\n aria-label=\"Increase value\"\n (click)=\"increment()\"\n tabindex=\"-1\"\n >\n <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
|
|
1037
1119
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], stepperButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperButtons", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], onDragMove: [{
|
|
1038
1120
|
type: HostListener,
|
|
1039
1121
|
args: ['document:mousemove', ['$event']]
|
|
@@ -1041,6 +1123,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1041
1123
|
type: HostListener,
|
|
1042
1124
|
args: ['document:mouseup']
|
|
1043
1125
|
}] } });
|
|
1126
|
+
function cryptoRandomId$2() {
|
|
1127
|
+
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
|
|
1128
|
+
return crypto.randomUUID();
|
|
1129
|
+
}
|
|
1130
|
+
return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
|
|
1131
|
+
}
|
|
1044
1132
|
|
|
1045
1133
|
class CoarPasswordInputComponent extends CoarControlValueAccessor {
|
|
1046
1134
|
/** Label text displayed above the input */
|
|
@@ -1095,7 +1183,8 @@ class CoarPasswordInputComponent extends CoarControlValueAccessor {
|
|
|
1095
1183
|
}, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
|
|
1096
1184
|
hasError = computed(() => this.error().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
1097
1185
|
displayMessage = computed(() => this.error() || this.hint(), ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
|
|
1098
|
-
|
|
1186
|
+
autoId = `coar-password-input-${cryptoRandomId$1()}`;
|
|
1187
|
+
inputId = computed(() => this.id() || this.autoId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
1099
1188
|
messageId = computed(() => `${this.inputId()}-message`, ...(ngDevMode ? [{ debugName: "messageId" }] : []));
|
|
1100
1189
|
writeValue(value) {
|
|
1101
1190
|
this.value.set(value ?? '');
|
|
@@ -1131,7 +1220,7 @@ class CoarPasswordInputComponent extends CoarControlValueAccessor {
|
|
|
1131
1220
|
}
|
|
1132
1221
|
}
|
|
1133
1222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
1223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarPasswordInputComponent, isStandalone: true, selector: "coar-password-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-password-input--xs": "size() === \"xs\"", "class.coar-password-input--sm": "size() === \"sm\"", "class.coar-password-input--md": "size() === \"md\"", "class.coar-password-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarPasswordInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-password-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-password-input-container\"\n [class.coar-password-input-focused]=\"isFocused()\"\n [class.coar-password-input-disabled]=\"isDisabled()\"\n [class.coar-password-input-readonly]=\"readonly()\"\n [class.coar-password-input-error]=\"hasError()\"\n >\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [type]=\"inputType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-password-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-password-input-toggle\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n aria-hidden=\"true\"\n (click)=\"togglePasswordVisibility()\"\n />\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:var(--coar-component-xs-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-xs) + var(--coar-spacing-xxs))}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:var(--coar-component-sm-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-s) - var(--coar-spacing-xxs))}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:var(--coar-component-lg-font-size);padding:var(--coar-spacing-xs) calc(var(--coar-spacing-s) + var(--coar-spacing-xs))}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1135
1224
|
}
|
|
1136
1225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, decorators: [{
|
|
1137
1226
|
type: Component,
|
|
@@ -1140,8 +1229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1140
1229
|
'[class.coar-password-input--sm]': 'size() === "sm"',
|
|
1141
1230
|
'[class.coar-password-input--md]': 'size() === "md"',
|
|
1142
1231
|
'[class.coar-password-input--lg]': 'size() === "lg"',
|
|
1143
|
-
}, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n
|
|
1232
|
+
}, template: "<div class=\"coar-password-input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"coar-password-input-required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"coar-password-input-container\"\n [class.coar-password-input-focused]=\"isFocused()\"\n [class.coar-password-input-disabled]=\"isDisabled()\"\n [class.coar-password-input-readonly]=\"readonly()\"\n [class.coar-password-input-error]=\"hasError()\"\n >\n <!-- Input Element -->\n <input\n #inputElement\n [id]=\"inputId()\"\n [name]=\"name()\"\n [type]=\"inputType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n class=\"coar-password-input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- Clear indicator -->\n @if (showClearButton()) {\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n }\n\n <!-- Toggle Visibility -->\n <coar-icon\n [name]=\"toggleIcon()\"\n source=\"coar-builtin\"\n size=\"auto\"\n class=\"coar-password-input-toggle\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n aria-hidden=\"true\"\n (click)=\"togglePasswordVisibility()\"\n />\n </div>\n\n <!-- Hint/Error Message -->\n @if (displayMessage()) {\n <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n {{ displayMessage() }}\n </div>\n }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 calc(var(--coar-spacing-s) + var(--coar-spacing-xs));border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:var(--coar-component-lg-font-size)}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:var(--coar-component-xs-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-xs) + var(--coar-spacing-xxs))}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:var(--coar-component-sm-font-size);padding:var(--coar-spacing-xxs) calc(var(--coar-spacing-s) - var(--coar-spacing-xxs))}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:var(--coar-component-lg-font-size);padding:var(--coar-spacing-xs) calc(var(--coar-spacing-s) + var(--coar-spacing-xs))}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
|
|
1144
1233
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
|
|
1234
|
+
function cryptoRandomId$1() {
|
|
1235
|
+
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
|
|
1236
|
+
return crypto.randomUUID();
|
|
1237
|
+
}
|
|
1238
|
+
return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
|
|
1239
|
+
}
|
|
1145
1240
|
|
|
1146
1241
|
class CoarCheckboxComponent extends CoarControlValueAccessor {
|
|
1147
1242
|
/** Label text displayed next to the checkbox */
|
|
@@ -1812,7 +1907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1812
1907
|
* ```
|
|
1813
1908
|
*/
|
|
1814
1909
|
class CoarSingleSelectComponent extends CoarSelectBase {
|
|
1815
|
-
|
|
1910
|
+
overlayBuilder = createOverlayBuilder();
|
|
1816
1911
|
destroyRefLocal = inject(DestroyRef);
|
|
1817
1912
|
triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
|
|
1818
1913
|
dropdownTemplateRef = viewChild('dropdownTemplate', ...(ngDevMode ? [{ debugName: "dropdownTemplateRef" }] : []));
|
|
@@ -1897,18 +1992,17 @@ class CoarSingleSelectComponent extends CoarSelectBase {
|
|
|
1897
1992
|
return;
|
|
1898
1993
|
const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
|
|
1899
1994
|
this.dropdownPosition.set(placement === 'top' ? 'top' : 'bottom');
|
|
1900
|
-
const spec = Overlay.define((b) => {
|
|
1901
|
-
b.content((c) => c.fromTemplate(template));
|
|
1902
|
-
b.anchor({ kind: 'element', element: trigger });
|
|
1903
|
-
b.position({ placement, offset: 4, flip: false, shift: false });
|
|
1904
|
-
b.scroll({ strategy: 'reposition' });
|
|
1905
|
-
b.dismiss({ outsideClick: true, escapeKey: true });
|
|
1906
|
-
b.size({ mode: 'content', minWidth: 'anchor' });
|
|
1907
|
-
});
|
|
1908
1995
|
this.isOpen.set(true);
|
|
1909
1996
|
this.searchQuery.set('');
|
|
1910
1997
|
this.highlightedIndex.set(-1);
|
|
1911
|
-
const ref = this.
|
|
1998
|
+
const ref = this.overlayBuilder
|
|
1999
|
+
.anchor({ kind: 'element', element: trigger })
|
|
2000
|
+
.position({ placement, offset: 4, flip: false, shift: false })
|
|
2001
|
+
.scroll({ strategy: 'reposition' })
|
|
2002
|
+
.dismiss({ outsideClick: true, escapeKey: true })
|
|
2003
|
+
.size({ mode: 'content', minWidth: 'anchor' })
|
|
2004
|
+
.fromTemplate(template)
|
|
2005
|
+
.open({});
|
|
1912
2006
|
this.overlayRef = ref;
|
|
1913
2007
|
ref.afterClosed$.subscribe(() => {
|
|
1914
2008
|
if (this.overlayRef !== ref)
|
|
@@ -1965,7 +2059,7 @@ class CoarSingleSelectComponent extends CoarSelectBase {
|
|
|
1965
2059
|
return chromeHeight + searchHeight + listHeight;
|
|
1966
2060
|
}
|
|
1967
2061
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
2062
|
+
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 type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear selection\" (click)=\"clearSelection($event)\">\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\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\" source=\"coar-builtin\" 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 [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\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 });
|
|
1969
2063
|
}
|
|
1970
2064
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSingleSelectComponent, decorators: [{
|
|
1971
2065
|
type: Component,
|
|
@@ -1978,7 +2072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1978
2072
|
'[class.coar-single-select--readonly]': 'readonly()',
|
|
1979
2073
|
'[class.coar-single-select--error]': 'hasError()',
|
|
1980
2074
|
'[class.coar-single-select--open]': 'isOpen()',
|
|
1981
|
-
}, 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"] }]
|
|
2075
|
+
}, 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 type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear selection\" (click)=\"clearSelection($event)\">\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\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\" source=\"coar-builtin\" 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 [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\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"] }]
|
|
1982
2076
|
}], 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"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1983
2077
|
|
|
1984
2078
|
/**
|
|
@@ -1998,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1998
2092
|
* ```
|
|
1999
2093
|
*/
|
|
2000
2094
|
class CoarMultiSelectComponent extends CoarSelectBase {
|
|
2001
|
-
|
|
2095
|
+
overlayBuilder = createOverlayBuilder();
|
|
2002
2096
|
triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
|
|
2003
2097
|
dropdownTemplateRef = viewChild('dropdownTemplate', ...(ngDevMode ? [{ debugName: "dropdownTemplateRef" }] : []));
|
|
2004
2098
|
overlayRef = null;
|
|
@@ -2157,18 +2251,17 @@ class CoarMultiSelectComponent extends CoarSelectBase {
|
|
|
2157
2251
|
return;
|
|
2158
2252
|
const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
|
|
2159
2253
|
this.dropdownPosition.set(placement === 'top' ? 'top' : 'bottom');
|
|
2160
|
-
const spec = Overlay.define((b) => {
|
|
2161
|
-
b.content((c) => c.fromTemplate(template));
|
|
2162
|
-
b.anchor({ kind: 'element', element: trigger });
|
|
2163
|
-
b.position({ placement, offset: 4, flip: false, shift: false });
|
|
2164
|
-
b.scroll({ strategy: 'reposition' });
|
|
2165
|
-
b.dismiss({ outsideClick: true, escapeKey: true });
|
|
2166
|
-
b.size({ mode: 'content', minWidth: 'anchor' });
|
|
2167
|
-
});
|
|
2168
2254
|
this.isOpen.set(true);
|
|
2169
2255
|
this.searchQuery.set('');
|
|
2170
2256
|
this.highlightedIndex.set(-1);
|
|
2171
|
-
const ref = this.
|
|
2257
|
+
const ref = this.overlayBuilder
|
|
2258
|
+
.anchor({ kind: 'element', element: trigger })
|
|
2259
|
+
.position({ placement, offset: 4, flip: false, shift: false })
|
|
2260
|
+
.scroll({ strategy: 'reposition' })
|
|
2261
|
+
.dismiss({ outsideClick: true, escapeKey: true })
|
|
2262
|
+
.size({ mode: 'content', minWidth: 'anchor' })
|
|
2263
|
+
.fromTemplate(template)
|
|
2264
|
+
.open({});
|
|
2172
2265
|
this.overlayRef = ref;
|
|
2173
2266
|
ref.afterClosed$.subscribe(() => {
|
|
2174
2267
|
if (this.overlayRef !== ref)
|
|
@@ -2219,14 +2312,12 @@ class CoarMultiSelectComponent extends CoarSelectBase {
|
|
|
2219
2312
|
const optionCount = this.displayOptions().length;
|
|
2220
2313
|
const listHeight = Math.min(maxListHeight, optionCount * optionRowHeight + listPadding);
|
|
2221
2314
|
const searchHeight = this.searchable() ? 56 : 0;
|
|
2222
|
-
const selectAllHeight = this.showSelectAll() && !this.searchQuery()
|
|
2223
|
-
? 37
|
|
2224
|
-
: 0;
|
|
2315
|
+
const selectAllHeight = this.showSelectAll() && !this.searchQuery() ? 37 : 0;
|
|
2225
2316
|
const chromeHeight = 2;
|
|
2226
2317
|
return chromeHeight + searchHeight + selectAllHeight + listHeight;
|
|
2227
2318
|
}
|
|
2228
2319
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
2320
|
+
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 type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear all selections\" (click)=\"clearSelection($event)\">\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\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\" source=\"coar-builtin\" size=\"auto\" />\n } @else if (someSelected()) {\n <coar-icon name=\"minus\" source=\"coar-builtin\" 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 class=\"coar-multi-checkbox\" [class.coar-multi-checkbox--checked]=\"isSelected(option)\">\n @if (isSelected(option)) {\n <coar-icon name=\"check\" source=\"coar-builtin\" 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 [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\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 });
|
|
2230
2321
|
}
|
|
2231
2322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMultiSelectComponent, decorators: [{
|
|
2232
2323
|
type: Component,
|
|
@@ -2239,7 +2330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2239
2330
|
'[class.coar-multi-select--readonly]': 'readonly()',
|
|
2240
2331
|
'[class.coar-multi-select--error]': 'hasError()',
|
|
2241
2332
|
'[class.coar-multi-select--open]': 'isOpen()',
|
|
2242
|
-
}, 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"] }]
|
|
2333
|
+
}, 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 type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear all selections\" (click)=\"clearSelection($event)\">\n <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n </button>\n }\n\n <!-- Dropdown Arrow -->\n <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\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\" source=\"coar-builtin\" size=\"auto\" />\n } @else if (someSelected()) {\n <coar-icon name=\"minus\" source=\"coar-builtin\" 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 class=\"coar-multi-checkbox\" [class.coar-multi-checkbox--checked]=\"isSelected(option)\">\n @if (isSelected(option)) {\n <coar-icon name=\"check\" source=\"coar-builtin\" 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 [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\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"] }]
|
|
2243
2334
|
}], 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"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxDisplayItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDisplayItems", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
2244
2335
|
|
|
2245
2336
|
/**
|
|
@@ -2261,7 +2352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2261
2352
|
* ```
|
|
2262
2353
|
*/
|
|
2263
2354
|
class CoarTagSelectComponent extends CoarSelectBase {
|
|
2264
|
-
|
|
2355
|
+
overlayBuilder = createOverlayBuilder();
|
|
2265
2356
|
triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
|
|
2266
2357
|
dropdownTemplateRef = viewChild('dropdownTemplate', ...(ngDevMode ? [{ debugName: "dropdownTemplateRef" }] : []));
|
|
2267
2358
|
overlayRef = null;
|
|
@@ -2538,17 +2629,16 @@ class CoarTagSelectComponent extends CoarSelectBase {
|
|
|
2538
2629
|
return;
|
|
2539
2630
|
const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
|
|
2540
2631
|
this.dropdownPosition.set(placement === 'top' ? 'top' : 'bottom');
|
|
2541
|
-
const spec = Overlay.define((b) => {
|
|
2542
|
-
b.content((c) => c.fromTemplate(template));
|
|
2543
|
-
b.anchor({ kind: 'element', element: trigger });
|
|
2544
|
-
b.position({ placement, offset: 4, flip: false, shift: false });
|
|
2545
|
-
b.scroll({ strategy: 'reposition' });
|
|
2546
|
-
b.dismiss({ outsideClick: true, escapeKey: true });
|
|
2547
|
-
b.size({ mode: 'content', minWidth: 'anchor' });
|
|
2548
|
-
});
|
|
2549
2632
|
this.isOpen.set(true);
|
|
2550
2633
|
this.highlightedIndex.set(-1);
|
|
2551
|
-
const ref = this.
|
|
2634
|
+
const ref = this.overlayBuilder
|
|
2635
|
+
.anchor({ kind: 'element', element: trigger })
|
|
2636
|
+
.position({ placement, offset: 4, flip: false, shift: false })
|
|
2637
|
+
.scroll({ strategy: 'reposition' })
|
|
2638
|
+
.dismiss({ outsideClick: true, escapeKey: true })
|
|
2639
|
+
.size({ mode: 'content', minWidth: 'anchor' })
|
|
2640
|
+
.fromTemplate(template)
|
|
2641
|
+
.open({});
|
|
2552
2642
|
this.overlayRef = ref;
|
|
2553
2643
|
ref.afterClosed$.subscribe(() => {
|
|
2554
2644
|
if (this.overlayRef !== ref)
|
|
@@ -2601,7 +2691,7 @@ class CoarTagSelectComponent extends CoarSelectBase {
|
|
|
2601
2691
|
return chromeHeight + listHeight;
|
|
2602
2692
|
}
|
|
2603
2693
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
2694
|
+
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\" source=\"coar-builtin\" 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\" source=\"coar-builtin\" 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 [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\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 });
|
|
2605
2695
|
}
|
|
2606
2696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagSelectComponent, decorators: [{
|
|
2607
2697
|
type: Component,
|
|
@@ -2615,73 +2705,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2615
2705
|
'[class.coar-tag-select--error]': 'hasError()',
|
|
2616
2706
|
'[class.coar-tag-select--open]': 'isOpen()',
|
|
2617
2707
|
'[class.coar-tag-select--focused]': 'isFocused()',
|
|
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"] }]
|
|
2708
|
+
}, 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\" source=\"coar-builtin\" 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\" source=\"coar-builtin\" 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 [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\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"] }]
|
|
2619
2709
|
}], 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 }] }] } });
|
|
2620
2710
|
|
|
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=" 		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 		"/><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=" 		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 		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
|
-
|
|
2685
2711
|
/**
|
|
2686
2712
|
* Individual tab definition for use within CoarTabGroup.
|
|
2687
2713
|
*
|
|
@@ -2890,14 +2916,14 @@ class CoarButtonComponent {
|
|
|
2890
2916
|
}
|
|
2891
2917
|
}
|
|
2892
2918
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
2919
|
+
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\" source=\"coar-builtin\" [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\" source=\"coar-builtin\" [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\" source=\"coar-builtin\" [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 });
|
|
2894
2920
|
}
|
|
2895
2921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarButtonComponent, decorators: [{
|
|
2896
2922
|
type: Component,
|
|
2897
2923
|
args: [{ selector: 'coar-button', standalone: true, imports: [CoarIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2898
2924
|
'[class.coar-button-host]': 'true',
|
|
2899
2925
|
'[class.coar-button--full-width]': 'fullWidth()',
|
|
2900
|
-
}, 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
|
|
2926
|
+
}, 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\" source=\"coar-builtin\" [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\" source=\"coar-builtin\" [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\" source=\"coar-builtin\" [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"] }]
|
|
2901
2927
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
2902
2928
|
|
|
2903
2929
|
class CoarCodeBlockComponent {
|
|
@@ -3277,7 +3303,7 @@ class CoarPopoverComponent {
|
|
|
3277
3303
|
elementRef = inject(ElementRef);
|
|
3278
3304
|
destroyRef = inject(DestroyRef);
|
|
3279
3305
|
popoverGroup = inject(CoarPopoverGroupService, { optional: true });
|
|
3280
|
-
|
|
3306
|
+
overlayBuilder = createOverlayBuilder();
|
|
3281
3307
|
static nextId = 0;
|
|
3282
3308
|
popoverId = `coar-popover-${CoarPopoverComponent.nextId++}`;
|
|
3283
3309
|
panelId = `${this.popoverId}-panel`;
|
|
@@ -3366,21 +3392,20 @@ class CoarPopoverComponent {
|
|
|
3366
3392
|
else {
|
|
3367
3393
|
this.pinnedByClick.set(false);
|
|
3368
3394
|
}
|
|
3369
|
-
const
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
})
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
const ref = this.overlayService.open(spec, {});
|
|
3395
|
+
const ref = this.overlayBuilder
|
|
3396
|
+
.anchor({ kind: 'element', element: trigger })
|
|
3397
|
+
.position({
|
|
3398
|
+
placement: ['bottom', 'top', 'right', 'left'],
|
|
3399
|
+
offset: 6,
|
|
3400
|
+
flip: false,
|
|
3401
|
+
shift: this.clampToViewport(),
|
|
3402
|
+
})
|
|
3403
|
+
.scroll({ strategy: 'reposition' })
|
|
3404
|
+
.dismiss({ outsideClick: false, escapeKey: true })
|
|
3405
|
+
.size({ mode: 'content' })
|
|
3406
|
+
.a11y({ role: 'tooltip' })
|
|
3407
|
+
.fromTemplate(template)
|
|
3408
|
+
.open({});
|
|
3384
3409
|
this.overlayRef = ref;
|
|
3385
3410
|
this.isOpen.set(true);
|
|
3386
3411
|
ref.afterClosed$.subscribe(() => {
|
|
@@ -3657,7 +3682,6 @@ class CoarTooltipDirective {
|
|
|
3657
3682
|
elementRef = inject((ElementRef));
|
|
3658
3683
|
destroyRef = inject(DestroyRef);
|
|
3659
3684
|
injector = inject(Injector);
|
|
3660
|
-
overlayService = inject(CoarOverlayService);
|
|
3661
3685
|
tooltipService = inject(CoarTooltipService);
|
|
3662
3686
|
/** Tooltip content (string, TemplateRef, or Component type). */
|
|
3663
3687
|
coarTooltip = input(null, ...(ngDevMode ? [{ debugName: "coarTooltip" }] : []));
|
|
@@ -3677,6 +3701,7 @@ class CoarTooltipDirective {
|
|
|
3677
3701
|
coarTooltipFallbackToBestFit = input(false, { ...(ngDevMode ? { debugName: "coarTooltipFallbackToBestFit" } : {}), transform: booleanAttribute });
|
|
3678
3702
|
tooltipId = `coar-tooltip-${cryptoRandomId()}`;
|
|
3679
3703
|
overlayRef = null;
|
|
3704
|
+
overlayBuilder = createOverlayBuilder();
|
|
3680
3705
|
openTimerId = null;
|
|
3681
3706
|
closeTimerId = null;
|
|
3682
3707
|
openReason = null;
|
|
@@ -3699,7 +3724,7 @@ class CoarTooltipDirective {
|
|
|
3699
3724
|
const currentOpenReason = this.openReason;
|
|
3700
3725
|
const hasOpenOverlay = this.overlayRef != null;
|
|
3701
3726
|
// When the tooltip is open and config changes, re-open to apply changes.
|
|
3702
|
-
//
|
|
3727
|
+
// Overlays do not support updating spec/content in-place.
|
|
3703
3728
|
if (!this.coarTooltipDisabled() && hasOpenOverlay && currentOpenReason && this.hasContent()) {
|
|
3704
3729
|
this.close(true);
|
|
3705
3730
|
Promise.resolve().then(() => this.openInternal(currentOpenReason));
|
|
@@ -3738,16 +3763,15 @@ class CoarTooltipDirective {
|
|
|
3738
3763
|
if (!content)
|
|
3739
3764
|
return;
|
|
3740
3765
|
const position = this.resolveOverlayPosition();
|
|
3741
|
-
const
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
const ref = this.overlayService.open(spec, {
|
|
3766
|
+
const ref = this.overlayBuilder
|
|
3767
|
+
.anchor({ kind: 'element', element: trigger })
|
|
3768
|
+
.position(position)
|
|
3769
|
+
.scroll({ strategy: 'reposition' })
|
|
3770
|
+
.dismiss({ outsideClick: false, escapeKey: true })
|
|
3771
|
+
.size({ mode: 'content' })
|
|
3772
|
+
.a11y({ role: 'tooltip' })
|
|
3773
|
+
.fromComponent(CoarTooltipOverlayComponent)
|
|
3774
|
+
.open({
|
|
3751
3775
|
tooltipId: this.tooltipId,
|
|
3752
3776
|
content,
|
|
3753
3777
|
context: this.coarTooltipContext(),
|
|
@@ -4089,7 +4113,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
|
|
|
4089
4113
|
elementRef = inject(ElementRef);
|
|
4090
4114
|
destroyRef = inject(DestroyRef);
|
|
4091
4115
|
localeService = inject(COAR_LOCALE_SERVICE, { optional: true });
|
|
4092
|
-
|
|
4116
|
+
overlayBuilder = createOverlayBuilder();
|
|
4093
4117
|
overlayRef = null;
|
|
4094
4118
|
// ============================================================
|
|
4095
4119
|
// Inputs
|
|
@@ -4371,15 +4395,14 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
|
|
|
4371
4395
|
return;
|
|
4372
4396
|
const placement = this.resolvePlacement(trigger, this.estimatePanelHeight());
|
|
4373
4397
|
this.calendarPosition.set(placement === 'top' ? 'top' : 'bottom');
|
|
4374
|
-
const
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
const ref = this.overlayService.open(spec, {});
|
|
4398
|
+
const ref = this.overlayBuilder
|
|
4399
|
+
.anchor({ kind: 'element', element: trigger })
|
|
4400
|
+
.position({ placement, offset: 4, flip: false, shift: false })
|
|
4401
|
+
.scroll({ strategy: 'reposition' })
|
|
4402
|
+
.dismiss({ outsideClick: true, escapeKey: true })
|
|
4403
|
+
.size({ mode: 'content' })
|
|
4404
|
+
.fromTemplate(template)
|
|
4405
|
+
.open({});
|
|
4383
4406
|
this.overlayRef = ref;
|
|
4384
4407
|
this.isOpen.set(true);
|
|
4385
4408
|
// Set initial focus date
|
|
@@ -4687,7 +4710,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
|
|
|
4687
4710
|
if (parts.length !== 3)
|
|
4688
4711
|
return null;
|
|
4689
4712
|
// Check all parts are complete numbers
|
|
4690
|
-
if (parts.some(p => p.length === 0 || !/^\d+$/.test(p)))
|
|
4713
|
+
if (parts.some((p) => p.length === 0 || !/^\d+$/.test(p)))
|
|
4691
4714
|
return null;
|
|
4692
4715
|
const format = this.dateFormat();
|
|
4693
4716
|
let year, month, day;
|
|
@@ -4808,7 +4831,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
|
|
|
4808
4831
|
this.viewDate.set(newDate.toPlainYearMonth());
|
|
4809
4832
|
}
|
|
4810
4833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
4834
|
+
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 class=\"coar-date-picker-wrapper\">\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 source=\"coar-builtin\"\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\" source=\"coar-builtin\" 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 type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n <coar-icon name=\"chevron-left\" source=\"coar-builtin\" 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 type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" 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 [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\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\">+{{ getHiddenMarkerCount(day.markers) }} other events</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 type=\"button\" class=\"coar-date-picker-today\" (click)=\"selectToday()\">Today</button>\n </div>\n }\n </div>\n </ng-template>\n\n <!-- Helper/Error Message -->\n @if (message()) {\n <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\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 });
|
|
4812
4835
|
}
|
|
4813
4836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, decorators: [{
|
|
4814
4837
|
type: Component,
|
|
@@ -4822,12 +4845,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4822
4845
|
'[class.coar-date-picker--error]': 'hasError()',
|
|
4823
4846
|
'[class.coar-date-picker--open]': 'isOpen()',
|
|
4824
4847
|
'(document:keydown)': 'onDocumentKeydown($event)',
|
|
4825
|
-
}, 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"] }]
|
|
4848
|
+
}, template: "<div class=\"coar-date-picker-wrapper\">\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 source=\"coar-builtin\"\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\" source=\"coar-builtin\" 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 type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n <coar-icon name=\"chevron-left\" source=\"coar-builtin\" 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 type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" 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 [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\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\">+{{ getHiddenMarkerCount(day.markers) }} other events</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 type=\"button\" class=\"coar-date-picker-today\" (click)=\"selectToday()\">Today</button>\n </div>\n }\n </div>\n </ng-template>\n\n <!-- Helper/Error Message -->\n @if (message()) {\n <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\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"] }]
|
|
4826
4849
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormatConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormatConfig", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], highlightWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightWeekends", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputRef: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], calendarTemplateRef: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }] } });
|
|
4827
4850
|
|
|
4828
4851
|
/**
|
|
4829
4852
|
* Generated bundle index. Do not edit.
|
|
4830
4853
|
*/
|
|
4831
4854
|
|
|
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,
|
|
4855
|
+
export { COAR_BUILTIN_ICON_SOURCE_KEY, 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, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
|
|
4833
4856
|
//# sourceMappingURL=cocoar-ui-components.mjs.map
|