yukit-web 0.0.24 → 0.0.26
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.
- package/.npm/_cacache/content-v2/sha512/{0a/f4/f46ee944cfa56515f59919c37e36555549b9673a225f9cbb8f10a9c442169efcbee8ae7653b6cb06d383370553ab9ad1a94e7b61260a83938a1620699125 → fb/87/9878e3001f02f090709ff1e324ced24700673cb090b7a3005e8c065363fad7d6f04608b7e7f5dfb60e9cbe7ebca0297102f554593b366d266efd733bea0a} +1 -1
- package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488 +1 -1
- package/.npm/_logs/{2026-09-28T08_26_46_654Z-debug-0.log → 2026-09-29T09_39_31_628Z-debug-0.log} +10 -10
- package/.npm/_logs/{2026-09-28T08_26_47_112Z-debug-0.log → 2026-09-29T09_39_32_132Z-debug-0.log} +2 -2
- package/fesm2022/yukit-web.mjs +1089 -593
- package/fesm2022/yukit-web.mjs.map +1 -1
- package/package.json +1 -1
- package/types/yukit-web.d.ts +459 -236
package/fesm2022/yukit-web.mjs
CHANGED
|
@@ -1,23 +1,27 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, Directive, forwardRef,
|
|
4
|
+
import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, runInInjectionContext, DestroyRef } from '@angular/core';
|
|
5
5
|
import { classes, hlm } from 'yukit-web/helm/utils';
|
|
6
6
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
+
import { toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
8
|
+
import { debounceTime, distinctUntilChanged, filter, startWith, map, skip, switchMap, of, timer } from 'rxjs';
|
|
7
9
|
import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
|
|
8
10
|
import * as i2 from 'yukit-web/helm/dropdown-menu';
|
|
9
11
|
import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
|
|
10
12
|
import { cva } from 'class-variance-authority';
|
|
11
13
|
import { NgTemplateOutlet } from '@angular/common';
|
|
12
14
|
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
13
|
-
import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
|
|
15
|
+
import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideDownload, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown, lucideSettings } from '@ng-icons/lucide';
|
|
14
16
|
import * as i1 from 'yukit-web/helm/badge';
|
|
15
17
|
import { HlmBadge } from 'yukit-web/helm/badge';
|
|
16
18
|
import * as i1$1 from 'yukit-web/helm/breadcrumb';
|
|
17
19
|
import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
|
|
18
|
-
import {
|
|
20
|
+
import { Router, NavigationEnd, isActive, RouterLink, RouterLinkActive } from '@angular/router';
|
|
21
|
+
import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
|
|
19
22
|
import * as i1$2 from 'yukit-web/helm/combobox';
|
|
20
23
|
import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
|
|
24
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
21
25
|
import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
|
|
22
26
|
import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
|
|
23
27
|
import { HlmInput } from 'yukit-web/helm/input';
|
|
@@ -41,52 +45,49 @@ import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction
|
|
|
41
45
|
import * as i1$9 from 'yukit-web/helm/empty';
|
|
42
46
|
import { HlmEmpty, HlmEmptyHeader, HlmEmptyMedia, HlmEmptyTitle, HlmEmptyDescription, HlmEmptyContent } from 'yukit-web/helm/empty';
|
|
43
47
|
import { CdkContextMenuTrigger, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
44
|
-
import { outputFromObservable, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
45
48
|
import * as i1$a from 'yukit-web/helm/context-menu';
|
|
46
49
|
import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
|
|
47
50
|
import * as i1$b from 'yukit-web/helm/date-picker';
|
|
48
51
|
import { injectHlmMonthYearPickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, injectHlmDatePickerConfig, HlmDatePickerImports } from 'yukit-web/helm/date-picker';
|
|
49
52
|
import * as i1$c from 'yukit-web/helm/table';
|
|
50
53
|
import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
|
|
51
|
-
import
|
|
52
|
-
import {
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
import { HlmAvatarImports } from 'yukit-web/helm/avatar';
|
|
56
|
-
import * as i1$e from 'yukit-web/helm/item';
|
|
57
|
-
import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, HlmItemDescription, HlmItemActions, HlmItemFooter, HlmItemGroup, HlmItemSeparator } from 'yukit-web/helm/item';
|
|
54
|
+
import * as i1$e from 'yukit-web/helm/popover';
|
|
55
|
+
import { HlmPopoverImports } from 'yukit-web/helm/popover';
|
|
56
|
+
import * as i1$d from '@spartan-ng/brain/popover';
|
|
57
|
+
import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
|
|
58
58
|
import * as i1$f from '@spartan-ng/brain/sheet';
|
|
59
59
|
import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
|
|
60
60
|
import * as i1$g from 'yukit-web/helm/sheet';
|
|
61
61
|
import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
|
|
62
|
-
import * as i1$
|
|
63
|
-
import {
|
|
64
|
-
import
|
|
65
|
-
import {
|
|
66
|
-
import * as i1$
|
|
62
|
+
import * as i1$h from 'yukit-web/helm/tabs';
|
|
63
|
+
import { HlmTabsImports } from 'yukit-web/helm/tabs';
|
|
64
|
+
import { rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, sortFns, createPaginatedRowModel, createSortedRowModel, createFilteredRowModel, createCoreRowModel } from '@tanstack/table-core';
|
|
65
|
+
import { injectTable, FlexRenderDirective, flexRenderComponent } from '@tanstack/angular-table';
|
|
66
|
+
import * as i1$i from 'yukit-web/helm/avatar';
|
|
67
|
+
import { HlmAvatarImports } from 'yukit-web/helm/avatar';
|
|
68
|
+
import * as i1$j from 'yukit-web/helm/item';
|
|
69
|
+
import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, HlmItemDescription, HlmItemActions, HlmItemFooter, HlmItemGroup, HlmItemSeparator } from 'yukit-web/helm/item';
|
|
70
|
+
import * as i1$k from '@spartan-ng/brain/tooltip';
|
|
67
71
|
import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
|
|
68
72
|
import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
|
|
69
73
|
import { HlmSpinner } from 'yukit-web/helm/spinner';
|
|
70
74
|
import { HlmToaster } from 'yukit-web/helm/sonner';
|
|
71
75
|
export { toast as yuwToast } from '@spartan-ng/brain/sonner';
|
|
72
76
|
import { HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertAction } from 'yukit-web/helm/alert';
|
|
73
|
-
import * as i1$
|
|
77
|
+
import * as i1$l from '@spartan-ng/brain/dialog';
|
|
74
78
|
import { BrnDialogTrigger, BrnDialogClose } from '@spartan-ng/brain/dialog';
|
|
75
|
-
import * as i1$
|
|
79
|
+
import * as i1$m from 'yukit-web/helm/dialog';
|
|
76
80
|
import { HlmDialogImports } from 'yukit-web/helm/dialog';
|
|
77
|
-
import * as i1$
|
|
81
|
+
import * as i1$o from 'yukit-web/helm/alert-dialog';
|
|
78
82
|
import { HlmAlertDialogImports } from 'yukit-web/helm/alert-dialog';
|
|
79
|
-
import * as i1$
|
|
83
|
+
import * as i1$n from '@spartan-ng/brain/alert-dialog';
|
|
80
84
|
import { BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
|
|
81
|
-
import * as i1$o from 'yukit-web/helm/tabs';
|
|
82
|
-
import { HlmTabsImports } from 'yukit-web/helm/tabs';
|
|
83
85
|
import * as i1$p from 'yukit-web/helm/attachment';
|
|
84
86
|
import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
|
|
85
|
-
import { map, distinctUntilChanged } from 'rxjs/operators';
|
|
87
|
+
import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
|
|
86
88
|
import * as i1$q from 'yukit-web/helm/sidebar';
|
|
87
89
|
import { HlmSidebarService, provideHlmSidebarConfig, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
|
|
88
90
|
export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
|
|
89
|
-
import { Router, isActive, RouterLink, RouterLinkActive } from '@angular/router';
|
|
90
91
|
import { OverlayContainer } from '@angular/cdk/overlay';
|
|
91
92
|
import * as i1$r from 'yukit-web/helm/command';
|
|
92
93
|
import { HlmCommandImports, HlmCommandDialog } from 'yukit-web/helm/command';
|
|
@@ -175,14 +176,23 @@ function provideValueAccessor(component) {
|
|
|
175
176
|
* and `control.disable()` go through). Letting either one own a single signal means the last
|
|
176
177
|
* writer wins and the other is silently ignored — the classic bug in hand-rolled accessors.
|
|
177
178
|
*
|
|
178
|
-
* They're kept as two separate signals and OR'd together in `
|
|
179
|
+
* They're kept as two separate signals and OR'd together in `_disabled`: disabled by *either*
|
|
179
180
|
* source means disabled. That's the only combination that never drops a caller's intent.
|
|
180
181
|
*/
|
|
181
182
|
class YuwValueAccessorBase {
|
|
182
183
|
constructor() {
|
|
184
|
+
this._host = inject(ElementRef);
|
|
185
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
183
186
|
this._formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
|
|
184
187
|
this._onChange = () => undefined;
|
|
185
188
|
this._onTouched = () => undefined;
|
|
189
|
+
this._disabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
190
|
+
}
|
|
191
|
+
blur() {
|
|
192
|
+
this._focusTarget()?.blur();
|
|
193
|
+
}
|
|
194
|
+
focus(options) {
|
|
195
|
+
this._focusTarget()?.focus(options);
|
|
186
196
|
}
|
|
187
197
|
registerOnChange(fn) {
|
|
188
198
|
this._onChange = fn;
|
|
@@ -200,19 +210,166 @@ class YuwValueAccessorBase {
|
|
|
200
210
|
this.value.set(next);
|
|
201
211
|
this._onChange(next);
|
|
202
212
|
}
|
|
203
|
-
_isDisabled(ownDisabled) {
|
|
204
|
-
return ownDisabled || this._formDisabled();
|
|
205
|
-
}
|
|
206
213
|
_onBlur() {
|
|
207
214
|
this._onTouched();
|
|
208
215
|
}
|
|
216
|
+
_focusTarget() {
|
|
217
|
+
for (const selector of this._focusSelectors) {
|
|
218
|
+
const element = this._host.nativeElement.querySelector(selector);
|
|
219
|
+
if (element) {
|
|
220
|
+
return element;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
return undefined;
|
|
224
|
+
}
|
|
209
225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwValueAccessorBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
210
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
226
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwValueAccessorBase, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
211
227
|
}
|
|
212
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwValueAccessorBase, decorators: [{
|
|
213
229
|
type: Directive,
|
|
214
230
|
args: [{}]
|
|
215
|
-
}] });
|
|
231
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Shared surface of every string-valued field that renders helper and error text under itself
|
|
235
|
+
* (`yuw-input-otp` and, through `YuwTextFieldBase`, the four text controls).
|
|
236
|
+
*
|
|
237
|
+
* Holds only what all of them honor: the value, the control `id` with its generated fallback, the
|
|
238
|
+
* invalid flag, the feedback texts and the `class` passthrough. Anything a subset can't support —
|
|
239
|
+
* `placeholder`, `readonly`, `required`, `name`, `autocomplete`, which `brn-input-otp` doesn't
|
|
240
|
+
* forward to its native input — lives one level down, per the Liskov rule in `AGENTS.md`.
|
|
241
|
+
*
|
|
242
|
+
* Subclasses provide `_autoId`, the fallback `id` used when the consumer sets no `inputId`.
|
|
243
|
+
*/
|
|
244
|
+
class YuwFieldBase extends YuwValueAccessorBase {
|
|
245
|
+
constructor() {
|
|
246
|
+
super(...arguments);
|
|
247
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
248
|
+
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
249
|
+
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
250
|
+
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
251
|
+
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
252
|
+
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
253
|
+
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
254
|
+
}
|
|
255
|
+
_emptyValue() {
|
|
256
|
+
return '';
|
|
257
|
+
}
|
|
258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
259
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFieldBase, isStandalone: true, inputs: { errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0 }); }
|
|
260
|
+
}
|
|
261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldBase, decorators: [{
|
|
262
|
+
type: Directive,
|
|
263
|
+
args: [{}]
|
|
264
|
+
}], propDecorators: { errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Shared surface of the single-value text controls (`yuw-input`, `yuw-password-input`,
|
|
268
|
+
* `yuw-textarea`, `yuw-search-input`).
|
|
269
|
+
*
|
|
270
|
+
* Adds to `YuwFieldBase` the native text-input attributes all four forward, plus `committed`, so
|
|
271
|
+
* the controls can't drift apart — the Liskov rule in `AGENTS.md`: same-role components share one
|
|
272
|
+
* input contract. Anything only some of them honor (`maxlength`, `size`, `enterPressed`, …) stays
|
|
273
|
+
* on the component, never here.
|
|
274
|
+
*/
|
|
275
|
+
class YuwTextFieldBase extends YuwFieldBase {
|
|
276
|
+
constructor() {
|
|
277
|
+
super(...arguments);
|
|
278
|
+
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
279
|
+
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
280
|
+
this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
281
|
+
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
282
|
+
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
283
|
+
this.committed = output();
|
|
284
|
+
}
|
|
285
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextFieldBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
286
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTextFieldBase, isStandalone: true, inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 } }, outputs: { committed: "committed" }, usesInheritance: true, ngImport: i0 }); }
|
|
287
|
+
}
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextFieldBase, decorators: [{
|
|
289
|
+
type: Directive,
|
|
290
|
+
args: [{}]
|
|
291
|
+
}], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
292
|
+
|
|
293
|
+
const YUW_DEFAULT_PAGE_SIZE = 20;
|
|
294
|
+
/** `pageIndex` returns to 0 whenever `pageSize` or any of `resetSignals` changes. */
|
|
295
|
+
function createPagination(pageSize, ...resetSignals) {
|
|
296
|
+
return linkedSignal(() => {
|
|
297
|
+
const size = pageSize();
|
|
298
|
+
resetSignals.forEach((resetSignal) => resetSignal());
|
|
299
|
+
return {
|
|
300
|
+
pageIndex: 0,
|
|
301
|
+
pageSize: typeof size === 'string' ? Number(size) : YUW_DEFAULT_PAGE_SIZE,
|
|
302
|
+
};
|
|
303
|
+
});
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/** Starts with the current value of `source`; must be created in an injection context. */
|
|
307
|
+
function debouncedSignal(source, ms) {
|
|
308
|
+
return toSignal(toObservable(source).pipe(debounceTime(ms), distinctUntilChanged()), {
|
|
309
|
+
initialValue: source(),
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
const PAGE_SIZES = [200, 100, 50, 20, 10];
|
|
314
|
+
const SEARCH_DEBOUNCE_MS = 300;
|
|
315
|
+
/**
|
|
316
|
+
* State of a list paged at the source and the query derived from it. Changing search, filters,
|
|
317
|
+
* sorting or size returns to the first page within the same query; a total below the current page
|
|
318
|
+
* steps back to the last existing one. Must be created in an injection context.
|
|
319
|
+
*/
|
|
320
|
+
function createPagedList(options) {
|
|
321
|
+
const initialSize = options.pageSize ?? YUW_DEFAULT_PAGE_SIZE;
|
|
322
|
+
const searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
323
|
+
const pageSize = signal(String(initialSize), ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
324
|
+
const sorting = signal([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
|
|
325
|
+
const search = debouncedSignal(searchTerm, SEARCH_DEBOUNCE_MS);
|
|
326
|
+
const pagination = createPagination(pageSize, options.filters, search, sorting);
|
|
327
|
+
const query = computed(() => {
|
|
328
|
+
const { pageIndex, pageSize: limit } = pagination();
|
|
329
|
+
const [sort] = sorting();
|
|
330
|
+
return {
|
|
331
|
+
offset: pageIndex * limit,
|
|
332
|
+
limit,
|
|
333
|
+
search: search().trim(),
|
|
334
|
+
filters: options.filters(),
|
|
335
|
+
sort: sort ? { field: sort.id, direction: sort.desc ? 'desc' : 'asc' } : undefined,
|
|
336
|
+
};
|
|
337
|
+
}, { ...(ngDevMode ? { debugName: "query" } : /* istanbul ignore next */ {}), equal: (left, right) => JSON.stringify(left) === JSON.stringify(right) });
|
|
338
|
+
const totalPages = computed(() => Math.max(1, Math.ceil(options.total() / pagination().pageSize)), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
339
|
+
const range = computed(() => {
|
|
340
|
+
const { pageIndex, pageSize: size } = pagination();
|
|
341
|
+
const total = options.total();
|
|
342
|
+
return {
|
|
343
|
+
start: total === 0 ? 0 : pageIndex * size + 1,
|
|
344
|
+
end: Math.min((pageIndex + 1) * size, total),
|
|
345
|
+
total,
|
|
346
|
+
};
|
|
347
|
+
}, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
|
|
348
|
+
effect(() => {
|
|
349
|
+
const current = query();
|
|
350
|
+
untracked(() => options.load(current));
|
|
351
|
+
});
|
|
352
|
+
effect(() => {
|
|
353
|
+
const lastPageIndex = totalPages() - 1;
|
|
354
|
+
if (untracked(pagination).pageIndex > lastPageIndex && options.total() > 0) {
|
|
355
|
+
pagination.update((state) => ({ ...state, pageIndex: lastPageIndex }));
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
return {
|
|
359
|
+
searchTerm,
|
|
360
|
+
pageSize,
|
|
361
|
+
pageSizeOptions: [...new Set([...PAGE_SIZES, initialSize])]
|
|
362
|
+
.sort((left, right) => right - left)
|
|
363
|
+
.map((size) => ({ value: String(size), label: String(size) })),
|
|
364
|
+
sorting,
|
|
365
|
+
pagination,
|
|
366
|
+
query,
|
|
367
|
+
page: computed(() => pagination().pageIndex + 1),
|
|
368
|
+
totalPages,
|
|
369
|
+
range,
|
|
370
|
+
goToPage: (page) => pagination.update((state) => ({ ...state, pageIndex: page - 1 })),
|
|
371
|
+
};
|
|
372
|
+
}
|
|
216
373
|
|
|
217
374
|
/**
|
|
218
375
|
* yukit-web's own class layer for `<yuw-button>`, applied on top of the helm `buttonVariants()`
|
|
@@ -553,6 +710,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
553
710
|
args: [{ selector: 'yuw-breadcrumb', imports: [...HlmBreadcrumbImports], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n <ol hlmBreadcrumbList>\n @for (item of items(); track $index; let last = $last) {\n <li hlmBreadcrumbItem>\n @if (last) {\n <span hlmBreadcrumbPage>{{ item.label }}</span>\n } @else if (item.href) {\n <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n } @else {\n <span class=\"font-normal\">{{ item.label }}</span>\n }\n </li>\n @if (!last) {\n <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n }\n }\n </ol>\n</nav>\n" }]
|
|
554
711
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
|
|
555
712
|
|
|
713
|
+
/**
|
|
714
|
+
* Deepest `data.breadcrumb` along the primary outlet, so a child route overrides its parent. The
|
|
715
|
+
* walk starts at `router.routerState.root` because, as a root service, this is built by whichever
|
|
716
|
+
* routed component asks first, whose own route is not the tree's root.
|
|
717
|
+
*/
|
|
718
|
+
class YuwBreadcrumbTrailService {
|
|
719
|
+
constructor() {
|
|
720
|
+
this.router = inject(Router);
|
|
721
|
+
this.crumbs = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd), startWith(null), map(() => this.resolveDeepestTrail())), { initialValue: [] });
|
|
722
|
+
}
|
|
723
|
+
resolveDeepestTrail() {
|
|
724
|
+
let route = this.router.routerState.root;
|
|
725
|
+
let trail = [];
|
|
726
|
+
while (route) {
|
|
727
|
+
const declared = route.snapshot?.data['breadcrumb'];
|
|
728
|
+
if (declared?.length) {
|
|
729
|
+
trail = declared;
|
|
730
|
+
}
|
|
731
|
+
route = route.firstChild;
|
|
732
|
+
}
|
|
733
|
+
return trail;
|
|
734
|
+
}
|
|
735
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBreadcrumbTrailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
736
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBreadcrumbTrailService, providedIn: 'root' }); }
|
|
737
|
+
}
|
|
738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBreadcrumbTrailService, decorators: [{
|
|
739
|
+
type: Injectable,
|
|
740
|
+
args: [{ providedIn: 'root' }]
|
|
741
|
+
}] });
|
|
742
|
+
|
|
556
743
|
/**
|
|
557
744
|
* Pure function on purpose: the page-range math has nothing to do with Angular, so it's testable
|
|
558
745
|
* in isolation and keeps `pagination.component.ts` limited to wiring inputs/outputs.
|
|
@@ -616,14 +803,14 @@ class YuwPaginationComponent {
|
|
|
616
803
|
this.page.set(target);
|
|
617
804
|
}
|
|
618
805
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "pageChange" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n <ul hlmPaginationContent>\n <li hlmPaginationItem>\n <button\n
|
|
806
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "pageChange" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n <ul hlmPaginationContent>\n <li hlmPaginationItem>\n <yuw-button\n variant=\"ghost\"\n [color]=\"color()\"\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [ariaLabel]=\"previousLabel()\"\n (clicked)=\"goTo(page() - 1)\"\n >\n <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n </yuw-button>\n </li>\n\n @for (entry of range(); track $index) {\n <li hlmPaginationItem>\n @if (entry === 'ellipsis') {\n <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\" />\n } @else if (entry === page()) {\n <yuw-button [color]=\"color()\" [size]=\"size()\" aria-current=\"page\" (clicked)=\"goTo(entry)\">\n {{ entry }}\n </yuw-button>\n } @else {\n <yuw-button variant=\"ghost\" [color]=\"color()\" [size]=\"size()\" (clicked)=\"goTo(entry)\">\n {{ entry }}\n </yuw-button>\n }\n </li>\n }\n\n <li hlmPaginationItem>\n <yuw-button\n variant=\"ghost\"\n [color]=\"color()\"\n [size]=\"size()\"\n [disabled]=\"page() >= totalPages()\"\n [ariaLabel]=\"nextLabel()\"\n (clicked)=\"goTo(page() + 1)\"\n >\n <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n </yuw-button>\n </li>\n </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
620
807
|
}
|
|
621
808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPaginationComponent, decorators: [{
|
|
622
809
|
type: Component,
|
|
623
|
-
args: [{ selector: 'yuw-pagination', imports: [HlmPagination, HlmPaginationContent, HlmPaginationItem,
|
|
810
|
+
args: [{ selector: 'yuw-pagination', imports: [HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationEllipsis, NgIcon, YuwButtonComponent], providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], host: {
|
|
624
811
|
class: 'contents',
|
|
625
812
|
'[attr.data-yuw-color]': 'color()',
|
|
626
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n <ul hlmPaginationContent>\n <li hlmPaginationItem>\n <button\n
|
|
813
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n <ul hlmPaginationContent>\n <li hlmPaginationItem>\n <yuw-button\n variant=\"ghost\"\n [color]=\"color()\"\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [ariaLabel]=\"previousLabel()\"\n (clicked)=\"goTo(page() - 1)\"\n >\n <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n </yuw-button>\n </li>\n\n @for (entry of range(); track $index) {\n <li hlmPaginationItem>\n @if (entry === 'ellipsis') {\n <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\" />\n } @else if (entry === page()) {\n <yuw-button [color]=\"color()\" [size]=\"size()\" aria-current=\"page\" (clicked)=\"goTo(entry)\">\n {{ entry }}\n </yuw-button>\n } @else {\n <yuw-button variant=\"ghost\" [color]=\"color()\" [size]=\"size()\" (clicked)=\"goTo(entry)\">\n {{ entry }}\n </yuw-button>\n }\n </li>\n }\n\n <li hlmPaginationItem>\n <yuw-button\n variant=\"ghost\"\n [color]=\"color()\"\n [size]=\"size()\"\n [disabled]=\"page() >= totalPages()\"\n [ariaLabel]=\"nextLabel()\"\n (clicked)=\"goTo(page() + 1)\"\n >\n <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n </yuw-button>\n </li>\n </ul>\n</nav>\n" }]
|
|
627
814
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ellipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsisSrText", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }, { type: i0.Output, args: ["pageChange"] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }] } });
|
|
628
815
|
|
|
629
816
|
/**
|
|
@@ -749,7 +936,6 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
|
|
|
749
936
|
this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
750
937
|
this.itemTemplate = contentChild(YuwComboboxItemDirective, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
|
|
751
938
|
this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
|
|
752
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
753
939
|
this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
754
940
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
755
941
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -762,12 +948,12 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
|
|
|
762
948
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
763
949
|
this.triggerAriaLabel = input.required(...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
|
|
764
950
|
this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
951
|
+
this._focusSelectors = ['input', 'button'];
|
|
765
952
|
this._generatedId = `yuw-combobox-${++nextUniqueId$2}`;
|
|
766
953
|
this._itemToString = (value) => this._labelByValue().get(value) ?? value;
|
|
767
954
|
this._chipsClass = computed(() => yuwFieldMinHeightVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_chipsClass" }] : /* istanbul ignore next */ []));
|
|
768
955
|
this._clearVisible = computed(() => this.clearAriaLabel() !== undefined, ...(ngDevMode ? [{ debugName: "_clearVisible" }] : /* istanbul ignore next */ []));
|
|
769
956
|
this._controlId = computed(() => this.inputId() ?? this._generatedId, ...(ngDevMode ? [{ debugName: "_controlId" }] : /* istanbul ignore next */ []));
|
|
770
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
771
957
|
this._fieldClass = computed(() => yuwFieldSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_fieldClass" }] : /* istanbul ignore next */ []));
|
|
772
958
|
this._labelByValue = computed(() => new Map(this.options().map((option) => [option.value, option.label])), ...(ngDevMode ? [{ debugName: "_labelByValue" }] : /* istanbul ignore next */ []));
|
|
773
959
|
this._multipleValue = computed(() => {
|
|
@@ -808,14 +994,82 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
|
|
|
808
994
|
this._commit(next ?? this._emptyValue());
|
|
809
995
|
}
|
|
810
996
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
811
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null },
|
|
997
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n @if (itemTemplate(); as custom) {\n <ng-container\n [ngTemplateOutlet]=\"custom.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: option,\n option: option,\n selected: _selectedValues().has(option.value),\n }\"\n />\n } @else {\n {{ option.label }}\n }\n</ng-template>\n\n@if (multiple()) {\n <hlm-combobox-multiple\n [disabled]=\"_disabled()\"\n [value]=\"_multipleValue()\"\n (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\"\n [itemToString]=\"_itemToString\"\n (focusout)=\"_onFocusOut($event)\"\n >\n <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n @for (chip of _selectedChips(); track chip.value) {\n <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n }\n <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n </hlm-combobox-chips>\n\n <hlm-combobox-content *hlmComboboxPortal>\n <div hlmComboboxList>\n @for (option of options(); track option.value) {\n <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </hlm-combobox-item>\n }\n </div>\n <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n </hlm-combobox-content>\n </hlm-combobox-multiple>\n} @else {\n <hlm-combobox\n [disabled]=\"_disabled()\"\n [value]=\"_singleValue()\"\n (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\"\n [itemToString]=\"_itemToString\"\n (focusout)=\"_onFocusOut($event)\"\n >\n @if (readonlyTrigger()) {\n <hlm-combobox-trigger\n [buttonId]=\"_controlId()\"\n [forceInvalid]=\"invalid()\"\n [class]=\"_triggerClass()\"\n class=\"w-full justify-between items-center\"\n >\n <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n </hlm-combobox-trigger>\n } @else {\n <hlm-combobox-input\n [inputId]=\"_controlId()\"\n [placeholder]=\"placeholder() ?? ''\"\n [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\"\n [forceInvalid]=\"invalid()\"\n [class]=\"_fieldClass()\"\n />\n }\n\n <hlm-combobox-content *hlmComboboxPortal>\n @if (readonlyTrigger()) {\n <hlm-combobox-input\n [placeholder]=\"searchPlaceholder() ?? ''\"\n [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\"\n [showTrigger]=\"false\"\n />\n }\n <div hlmComboboxList>\n @for (option of options(); track option.value) {\n <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </hlm-combobox-item>\n }\n </div>\n <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n </hlm-combobox-content>\n </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
812
998
|
}
|
|
813
999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, decorators: [{
|
|
814
1000
|
type: Component,
|
|
815
1001
|
args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
|
|
816
1002
|
class: 'contents',
|
|
817
1003
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n @if (itemTemplate(); as custom) {\n <ng-container\n [ngTemplateOutlet]=\"custom.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: option,\n option: option,\n selected: _selectedValues().has(option.value),\n }\"\n />\n } @else {\n {{ option.label }}\n }\n</ng-template>\n\n@if (multiple()) {\n <hlm-combobox-multiple\n [disabled]=\"_disabled()\"\n [value]=\"_multipleValue()\"\n (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\"\n [itemToString]=\"_itemToString\"\n (focusout)=\"_onFocusOut($event)\"\n >\n <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n @for (chip of _selectedChips(); track chip.value) {\n <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n }\n <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n </hlm-combobox-chips>\n\n <hlm-combobox-content *hlmComboboxPortal>\n <div hlmComboboxList>\n @for (option of options(); track option.value) {\n <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </hlm-combobox-item>\n }\n </div>\n <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n </hlm-combobox-content>\n </hlm-combobox-multiple>\n} @else {\n <hlm-combobox\n [disabled]=\"_disabled()\"\n [value]=\"_singleValue()\"\n (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\"\n [itemToString]=\"_itemToString\"\n (focusout)=\"_onFocusOut($event)\"\n >\n @if (readonlyTrigger()) {\n <hlm-combobox-trigger\n [buttonId]=\"_controlId()\"\n [forceInvalid]=\"invalid()\"\n [class]=\"_triggerClass()\"\n class=\"w-full justify-between items-center\"\n >\n <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n </hlm-combobox-trigger>\n } @else {\n <hlm-combobox-input\n [inputId]=\"_controlId()\"\n [placeholder]=\"placeholder() ?? ''\"\n [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\"\n [forceInvalid]=\"invalid()\"\n [class]=\"_fieldClass()\"\n />\n }\n\n <hlm-combobox-content *hlmComboboxPortal>\n @if (readonlyTrigger()) {\n <hlm-combobox-input\n [placeholder]=\"searchPlaceholder() ?? ''\"\n [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\"\n [showTrigger]=\"false\"\n />\n }\n <div hlmComboboxList>\n @for (option of options(); track option.value) {\n <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </hlm-combobox-item>\n }\n </div>\n <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n </hlm-combobox-content>\n </hlm-combobox>\n}\n" }]
|
|
818
|
-
}], propDecorators: { _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }],
|
|
1004
|
+
}], propDecorators: { _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1005
|
+
|
|
1006
|
+
/** Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot. */
|
|
1007
|
+
class YuwPageSizeComponent {
|
|
1008
|
+
constructor() {
|
|
1009
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1010
|
+
this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
1011
|
+
this.list = input.required(...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
|
|
1012
|
+
this.message = computed(() => this.labels().range(this.list().range()), ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1013
|
+
}
|
|
1014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwPageSizeComponent, isStandalone: true, selector: "yuw-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n readonlyTrigger\n class=\"w-32\"\n [disabled]=\"disabled()\"\n [options]=\"list().pageSizeOptions\"\n [triggerAriaLabel]=\"labels().label\"\n [value]=\"list().pageSize()\"\n [emptyText]=\"labels().empty\"\n (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1016
|
+
}
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageSizeComponent, decorators: [{
|
|
1018
|
+
type: Component,
|
|
1019
|
+
args: [{ selector: 'yuw-page-size', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwComboboxComponent], host: { class: 'flex items-center gap-2' }, template: "<yuw-combobox\n readonlyTrigger\n class=\"w-32\"\n [disabled]=\"disabled()\"\n [options]=\"list().pageSizeOptions\"\n [triggerAriaLabel]=\"labels().label\"\n [value]=\"list().pageSize()\"\n [emptyText]=\"labels().empty\"\n (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n" }]
|
|
1020
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }] } });
|
|
1021
|
+
|
|
1022
|
+
/** Pagination footer for lists without a datatable. A disabled `fieldset` blocks its buttons. */
|
|
1023
|
+
class YuwListPaginationComponent {
|
|
1024
|
+
constructor() {
|
|
1025
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1026
|
+
this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
1027
|
+
this.list = input.required(...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
|
|
1028
|
+
}
|
|
1029
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwListPaginationComponent, isStandalone: true, selector: "yuw-list-pagination", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<fieldset class=\"flex flex-wrap items-center justify-between gap-3\" [disabled]=\"disabled()\">\n <yuw-page-size [list]=\"list()\" [labels]=\"labels().pageSize\" [disabled]=\"disabled()\" />\n <yuw-pagination\n [page]=\"list().page()\"\n [totalPages]=\"list().totalPages()\"\n [ariaLabel]=\"labels().ariaLabel\"\n [previousLabel]=\"labels().previous\"\n [nextLabel]=\"labels().next\"\n [ellipsisSrText]=\"labels().ellipsis\"\n (pageChange)=\"list().goToPage($event)\"\n />\n</fieldset>\n", dependencies: [{ kind: "component", type: YuwPageSizeComponent, selector: "yuw-page-size", inputs: ["disabled", "labels", "list"] }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["ariaLabel", "color", "ellipsisSrText", "nextLabel", "page", "previousLabel", "size", "totalPages"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1031
|
+
}
|
|
1032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListPaginationComponent, decorators: [{
|
|
1033
|
+
type: Component,
|
|
1034
|
+
args: [{ selector: 'yuw-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwPageSizeComponent, YuwPaginationComponent], template: "<fieldset class=\"flex flex-wrap items-center justify-between gap-3\" [disabled]=\"disabled()\">\n <yuw-page-size [list]=\"list()\" [labels]=\"labels().pageSize\" [disabled]=\"disabled()\" />\n <yuw-pagination\n [page]=\"list().page()\"\n [totalPages]=\"list().totalPages()\"\n [ariaLabel]=\"labels().ariaLabel\"\n [previousLabel]=\"labels().previous\"\n [nextLabel]=\"labels().next\"\n [ellipsisSrText]=\"labels().ellipsis\"\n (pageChange)=\"list().goToPage($event)\"\n />\n</fieldset>\n" }]
|
|
1035
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }] } });
|
|
1036
|
+
|
|
1037
|
+
const DESKTOP_QUERY = '(min-width: 48rem)';
|
|
1038
|
+
/** True below `md`. Must be called in an injection context. */
|
|
1039
|
+
function injectIsMobile() {
|
|
1040
|
+
const breakpointObserver = inject(BreakpointObserver);
|
|
1041
|
+
return toSignal(breakpointObserver.observe(DESKTOP_QUERY).pipe(map((state) => !state.matches)), {
|
|
1042
|
+
initialValue: !breakpointObserver.isMatched(DESKTOP_QUERY),
|
|
1043
|
+
});
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
/**
|
|
1047
|
+
* Page title, optional description and up to two actions, each rendered when its label is set.
|
|
1048
|
+
* On mobile the primary action shows only its icon, or `primaryMobileLabel`. Icons are `@ng-icons`
|
|
1049
|
+
* names; the consumer registers any beyond `lucidePlus` with `provideIcons`.
|
|
1050
|
+
*/
|
|
1051
|
+
class YuwPageHeaderComponent {
|
|
1052
|
+
constructor() {
|
|
1053
|
+
this.backLabel = input(...(ngDevMode ? [undefined, { debugName: "backLabel" }] : /* istanbul ignore next */ []));
|
|
1054
|
+
this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
1055
|
+
this.primaryIcon = input(...(ngDevMode ? [undefined, { debugName: "primaryIcon" }] : /* istanbul ignore next */ []));
|
|
1056
|
+
this.primaryLabel = input(...(ngDevMode ? [undefined, { debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
|
|
1057
|
+
this.primaryMobileLabel = input(...(ngDevMode ? [undefined, { debugName: "primaryMobileLabel" }] : /* istanbul ignore next */ []));
|
|
1058
|
+
this.secondaryIcon = input(...(ngDevMode ? [undefined, { debugName: "secondaryIcon" }] : /* istanbul ignore next */ []));
|
|
1059
|
+
this.secondaryLabel = input(...(ngDevMode ? [undefined, { debugName: "secondaryLabel" }] : /* istanbul ignore next */ []));
|
|
1060
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1061
|
+
this.backClicked = output();
|
|
1062
|
+
this.primaryClicked = output();
|
|
1063
|
+
this.secondaryClicked = output();
|
|
1064
|
+
this.isMobile = injectIsMobile();
|
|
1065
|
+
}
|
|
1066
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPageHeaderComponent, isStandalone: true, selector: "yuw-page-header", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryMobileLabel: { classPropertyName: "primaryMobileLabel", publicName: "primaryMobileLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryIcon: { classPropertyName: "secondaryIcon", publicName: "secondaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backClicked: "backClicked", primaryClicked: "primaryClicked", secondaryClicked: "secondaryClicked" }, providers: [provideIcons({ lucidePlus, lucideArrowLeft })], ngImport: i0, template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n <div class=\"flex items-center gap-4\">\n @if (backLabel(); as label) {\n <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n <span class=\"max-sm:hidden\">{{ label }}</span>\n </yuw-button>\n }\n <div class=\"flex flex-col overflow-hidden\">\n <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n @if (description()) {\n <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (primaryLabel() || secondaryLabel()) {\n <div class=\"flex shrink-0 items-center gap-2\">\n @if (secondaryLabel(); as label) {\n <yuw-button\n variant=\"outline\"\n class=\"gap-2\"\n [size]=\"isMobile() ? 'sm' : 'default'\"\n (clicked)=\"secondaryClicked.emit($event)\"\n >\n @if (secondaryIcon(); as icon) {\n <ng-icon [name]=\"icon\" size=\"16\" />\n }\n <span class=\"max-md:hidden\">{{ label }}</span>\n </yuw-button>\n }\n\n @if (primaryLabel(); as label) {\n <yuw-button\n color=\"primary\"\n class=\"gap-2\"\n [size]=\"isMobile() ? 'sm' : 'default'\"\n (clicked)=\"primaryClicked.emit($event)\"\n >\n @if (primaryIcon(); as icon) {\n <ng-icon [name]=\"icon\" size=\"16\" />\n }\n <span class=\"max-sm:hidden\">{{ label }}</span>\n @if (primaryMobileLabel(); as mobileLabel) {\n <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n }\n </yuw-button>\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1068
|
+
}
|
|
1069
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageHeaderComponent, decorators: [{
|
|
1070
|
+
type: Component,
|
|
1071
|
+
args: [{ selector: 'yuw-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent], providers: [provideIcons({ lucidePlus, lucideArrowLeft })], template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n <div class=\"flex items-center gap-4\">\n @if (backLabel(); as label) {\n <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n <span class=\"max-sm:hidden\">{{ label }}</span>\n </yuw-button>\n }\n <div class=\"flex flex-col overflow-hidden\">\n <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n @if (description()) {\n <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (primaryLabel() || secondaryLabel()) {\n <div class=\"flex shrink-0 items-center gap-2\">\n @if (secondaryLabel(); as label) {\n <yuw-button\n variant=\"outline\"\n class=\"gap-2\"\n [size]=\"isMobile() ? 'sm' : 'default'\"\n (clicked)=\"secondaryClicked.emit($event)\"\n >\n @if (secondaryIcon(); as icon) {\n <ng-icon [name]=\"icon\" size=\"16\" />\n }\n <span class=\"max-md:hidden\">{{ label }}</span>\n </yuw-button>\n }\n\n @if (primaryLabel(); as label) {\n <yuw-button\n color=\"primary\"\n class=\"gap-2\"\n [size]=\"isMobile() ? 'sm' : 'default'\"\n (clicked)=\"primaryClicked.emit($event)\"\n >\n @if (primaryIcon(); as icon) {\n <ng-icon [name]=\"icon\" size=\"16\" />\n }\n <span class=\"max-sm:hidden\">{{ label }}</span>\n @if (primaryMobileLabel(); as mobileLabel) {\n <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n }\n </yuw-button>\n }\n </div>\n }\n</div>\n" }]
|
|
1072
|
+
}], propDecorators: { backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryMobileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryMobileLabel", required: false }] }], secondaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryIcon", required: false }] }], secondaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], primaryClicked: [{ type: i0.Output, args: ["primaryClicked"] }], secondaryClicked: [{ type: i0.Output, args: ["secondaryClicked"] }] } });
|
|
819
1073
|
|
|
820
1074
|
/**
|
|
821
1075
|
* Container directive for collapsible accordion items.
|
|
@@ -1035,47 +1289,34 @@ let nextYuwInputId = 0;
|
|
|
1035
1289
|
* </yuw-input>
|
|
1036
1290
|
* ```
|
|
1037
1291
|
*/
|
|
1038
|
-
class YuwInputComponent extends
|
|
1292
|
+
class YuwInputComponent extends YuwTextFieldBase {
|
|
1039
1293
|
constructor() {
|
|
1040
1294
|
super(...arguments);
|
|
1041
1295
|
this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
|
|
1042
1296
|
this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
|
|
1043
|
-
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
1044
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1045
|
-
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1046
|
-
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1047
|
-
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1048
1297
|
this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
|
|
1049
|
-
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1050
1298
|
this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
|
|
1051
|
-
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1052
|
-
this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1053
|
-
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1054
|
-
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1055
1299
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1056
1300
|
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1057
|
-
this.
|
|
1058
|
-
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1059
|
-
this.committed = output();
|
|
1301
|
+
this.enterPressed = output();
|
|
1060
1302
|
this._autoId = `yuw-input-${++nextYuwInputId}`;
|
|
1303
|
+
this._focusSelectors = ['input'];
|
|
1061
1304
|
this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1062
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1063
1305
|
this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
|
|
1064
1306
|
this._hasRightAddon = computed(() => this._rightAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasRightAddon" }] : /* istanbul ignore next */ []));
|
|
1065
1307
|
this._hasAddons = computed(() => this._hasLeftAddon() || this._hasRightAddon(), ...(ngDevMode ? [{ debugName: "_hasAddons" }] : /* istanbul ignore next */ []));
|
|
1066
|
-
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1067
|
-
}
|
|
1068
|
-
_emptyValue() {
|
|
1069
|
-
return '';
|
|
1070
1308
|
}
|
|
1071
1309
|
onChange() {
|
|
1072
1310
|
this.committed.emit(this.value());
|
|
1073
1311
|
}
|
|
1312
|
+
onEnterPressed() {
|
|
1313
|
+
this.enterPressed.emit();
|
|
1314
|
+
}
|
|
1074
1315
|
onInput(event) {
|
|
1075
1316
|
this._commit(event.target.value);
|
|
1076
1317
|
}
|
|
1077
1318
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1078
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: {
|
|
1319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n (keydown.enter)=\"onEnterPressed()\"\n />\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"inline-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <input\n hlmInput\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n (keydown.enter)=\"onEnterPressed()\"\n />\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1079
1320
|
}
|
|
1080
1321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, decorators: [{
|
|
1081
1322
|
type: Component,
|
|
@@ -1089,8 +1330,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
1089
1330
|
HlmInputGroupAddon,
|
|
1090
1331
|
], providers: [provideValueAccessor(YuwInputComponent)], host: {
|
|
1091
1332
|
class: 'contents',
|
|
1092
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"inline-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <input\n hlmInput\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1093
|
-
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }],
|
|
1333
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n (keydown.enter)=\"onEnterPressed()\"\n />\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"inline-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <input\n hlmInput\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n (keydown.enter)=\"onEnterPressed()\"\n />\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1334
|
+
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
1094
1335
|
|
|
1095
1336
|
let nextYuwTextareaId = 0;
|
|
1096
1337
|
/**
|
|
@@ -1123,36 +1364,19 @@ let nextYuwTextareaId = 0;
|
|
|
1123
1364
|
* <yuw-textarea formControlName="comments" [maxlength]="500" />
|
|
1124
1365
|
* ```
|
|
1125
1366
|
*/
|
|
1126
|
-
class YuwTextareaComponent extends
|
|
1367
|
+
class YuwTextareaComponent extends YuwTextFieldBase {
|
|
1127
1368
|
constructor() {
|
|
1128
1369
|
super(...arguments);
|
|
1129
1370
|
this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
|
|
1130
1371
|
this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
|
|
1131
|
-
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
1132
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1133
|
-
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1134
|
-
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1135
|
-
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1136
|
-
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1137
1372
|
this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
|
|
1138
|
-
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1139
|
-
this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1140
|
-
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1141
|
-
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1142
1373
|
this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1143
|
-
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
1144
|
-
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1145
|
-
this.committed = output();
|
|
1146
1374
|
this._autoId = `yuw-textarea-${++nextYuwTextareaId}`;
|
|
1375
|
+
this._focusSelectors = ['textarea'];
|
|
1147
1376
|
this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1148
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1149
1377
|
this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
|
|
1150
1378
|
this._hasRightAddon = computed(() => this._rightAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasRightAddon" }] : /* istanbul ignore next */ []));
|
|
1151
1379
|
this._hasAddons = computed(() => this._hasLeftAddon() || this._hasRightAddon(), ...(ngDevMode ? [{ debugName: "_hasAddons" }] : /* istanbul ignore next */ []));
|
|
1152
|
-
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1153
|
-
}
|
|
1154
|
-
_emptyValue() {
|
|
1155
|
-
return '';
|
|
1156
1380
|
}
|
|
1157
1381
|
onChange() {
|
|
1158
1382
|
this.committed.emit(this.value());
|
|
@@ -1161,7 +1385,7 @@ class YuwTextareaComponent extends YuwValueAccessorBase {
|
|
|
1161
1385
|
this._commit(event.target.value);
|
|
1162
1386
|
}
|
|
1163
1387
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: {
|
|
1388
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"block-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <textarea\n hlmInputGroupTextarea\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"block-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <textarea\n hlmTextarea\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1165
1389
|
}
|
|
1166
1390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, decorators: [{
|
|
1167
1391
|
type: Component,
|
|
@@ -1176,7 +1400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
1176
1400
|
], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
|
|
1177
1401
|
class: 'contents',
|
|
1178
1402
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"block-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <textarea\n hlmInputGroupTextarea\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"block-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <textarea\n hlmTextarea\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1179
|
-
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }],
|
|
1403
|
+
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
|
|
1180
1404
|
|
|
1181
1405
|
/**
|
|
1182
1406
|
* Class map for the collapsible wrapper of `yuw-search-input`.
|
|
@@ -1401,40 +1625,26 @@ let nextYuwSearchInputId = 0;
|
|
|
1401
1625
|
* />
|
|
1402
1626
|
* ```
|
|
1403
1627
|
*/
|
|
1404
|
-
class YuwSearchInputComponent extends
|
|
1628
|
+
class YuwSearchInputComponent extends YuwTextFieldBase {
|
|
1405
1629
|
constructor() {
|
|
1406
1630
|
super(...arguments);
|
|
1407
1631
|
this._injector = inject(Injector);
|
|
1408
1632
|
this._input = viewChild.required('searchInput');
|
|
1409
|
-
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
1410
1633
|
this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1411
1634
|
this.collapseFrom = input(undefined, ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
|
|
1412
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1413
|
-
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1414
1635
|
this.expandAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1415
1636
|
this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
|
|
1416
|
-
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1417
|
-
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1418
|
-
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1419
|
-
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1420
|
-
this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1421
|
-
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1422
|
-
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1423
1637
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1424
1638
|
this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1425
|
-
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
1426
|
-
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1427
|
-
this.committed = output();
|
|
1428
1639
|
this.searched = output();
|
|
1429
1640
|
this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
|
|
1641
|
+
this._focusSelectors = ['input'];
|
|
1430
1642
|
this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
|
|
1431
1643
|
this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1432
1644
|
this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
|
|
1433
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1434
1645
|
this._expandButtonClasses = computed(() => searchInputExpandButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_expandButtonClasses" }] : /* istanbul ignore next */ []));
|
|
1435
1646
|
this._fieldClasses = computed(() => searchInputFieldVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_fieldClasses" }] : /* istanbul ignore next */ []));
|
|
1436
1647
|
this._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible(), size: this.size() }), ...(ngDevMode ? [{ debugName: "_iconClasses" }] : /* istanbul ignore next */ []));
|
|
1437
|
-
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1438
1648
|
this.expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
1439
1649
|
this._showClear = computed(() => this.clearAriaLabel() !== undefined &&
|
|
1440
1650
|
this.value().length > 0 &&
|
|
@@ -1449,8 +1659,12 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1449
1659
|
}), ...(ngDevMode ? [{ debugName: "_wrapperClasses" }] : /* istanbul ignore next */ []));
|
|
1450
1660
|
this._wrapperMaxWidth = computed(() => (this.expanded() ? this.expandedWidth() : null), ...(ngDevMode ? [{ debugName: "_wrapperMaxWidth" }] : /* istanbul ignore next */ []));
|
|
1451
1661
|
}
|
|
1452
|
-
|
|
1453
|
-
|
|
1662
|
+
/**
|
|
1663
|
+
* Routed through `onExpand()` so a collapsed field opens before it takes focus; a plain focus
|
|
1664
|
+
* would land on an input that is still `tabindex="-1"` and `aria-hidden`.
|
|
1665
|
+
*/
|
|
1666
|
+
focus() {
|
|
1667
|
+
this.onExpand();
|
|
1454
1668
|
}
|
|
1455
1669
|
onBlur() {
|
|
1456
1670
|
this._onBlur();
|
|
@@ -1501,14 +1715,14 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1501
1715
|
this.searched.emit(next);
|
|
1502
1716
|
}
|
|
1503
1717
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1504
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: {
|
|
1718
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n <hlm-input-group [class]=\"_classes()\">\n <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n @if (_showExpandButton()) {\n <button\n hlmInputGroupButton\n size=\"icon-sm\"\n [class]=\"_expandButtonClasses()\"\n [attr.aria-label]=\"expandAriaLabel()\"\n [attr.aria-expanded]=\"false\"\n (focus)=\"onExpandFocus($event)\"\n (click)=\"onExpand()\"\n >\n <ng-icon name=\"lucideSearch\" />\n </button>\n } @else {\n <ng-icon name=\"lucideSearch\" />\n }\n </hlm-input-group-addon>\n\n <input\n #searchInput\n hlmInputGroupInput\n [class]=\"_fieldClasses()\"\n [id]=\"_inputId()\"\n type=\"text\"\n inputmode=\"search\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.tabindex]=\"expanded() ? null : -1\"\n [attr.aria-hidden]=\"expanded() ? null : true\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (blur)=\"onBlur()\"\n />\n\n @if (_showClear()) {\n <hlm-input-group-addon align=\"inline-end\">\n <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n <ng-icon name=\"lucideX\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n </div>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1505
1719
|
}
|
|
1506
1720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
|
|
1507
1721
|
type: Component,
|
|
1508
1722
|
args: [{ selector: 'yuw-search-input', imports: [HlmField, HlmFieldDescription, YuwFieldFeedbackDirective, ...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
|
|
1509
1723
|
class: 'contents',
|
|
1510
1724
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n <hlm-input-group [class]=\"_classes()\">\n <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n @if (_showExpandButton()) {\n <button\n hlmInputGroupButton\n size=\"icon-sm\"\n [class]=\"_expandButtonClasses()\"\n [attr.aria-label]=\"expandAriaLabel()\"\n [attr.aria-expanded]=\"false\"\n (focus)=\"onExpandFocus($event)\"\n (click)=\"onExpand()\"\n >\n <ng-icon name=\"lucideSearch\" />\n </button>\n } @else {\n <ng-icon name=\"lucideSearch\" />\n }\n </hlm-input-group-addon>\n\n <input\n #searchInput\n hlmInputGroupInput\n [class]=\"_fieldClasses()\"\n [id]=\"_inputId()\"\n type=\"text\"\n inputmode=\"search\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.tabindex]=\"expanded() ? null : -1\"\n [attr.aria-hidden]=\"expanded() ? null : true\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (blur)=\"onBlur()\"\n />\n\n @if (_showClear()) {\n <hlm-input-group-addon align=\"inline-end\">\n <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n <ng-icon name=\"lucideX\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n </div>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1511
|
-
}], propDecorators: { _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }],
|
|
1725
|
+
}], propDecorators: { _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
1512
1726
|
|
|
1513
1727
|
/** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
|
|
1514
1728
|
* directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
|
|
@@ -1551,39 +1765,26 @@ let nextYuwPasswordInputId = 0;
|
|
|
1551
1765
|
* <yuw-password-input formControlName="password" autocomplete="current-password" />
|
|
1552
1766
|
* ```
|
|
1553
1767
|
*/
|
|
1554
|
-
class YuwPasswordInputComponent extends
|
|
1768
|
+
class YuwPasswordInputComponent extends YuwTextFieldBase {
|
|
1555
1769
|
constructor() {
|
|
1556
1770
|
super(...arguments);
|
|
1557
1771
|
this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
|
|
1558
|
-
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
1559
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1560
|
-
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1561
|
-
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1562
|
-
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1563
|
-
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1564
1772
|
this.masked = model(true, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
|
|
1565
|
-
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1566
|
-
this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1567
|
-
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1568
|
-
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1569
1773
|
this.revealAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "revealAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1570
1774
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1571
|
-
this.
|
|
1572
|
-
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1573
|
-
this.committed = output();
|
|
1775
|
+
this.enterPressed = output();
|
|
1574
1776
|
this._autoId = `yuw-password-input-${++nextYuwPasswordInputId}`;
|
|
1777
|
+
this._focusSelectors = ['input'];
|
|
1575
1778
|
this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1576
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1577
1779
|
this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
|
|
1578
|
-
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1579
1780
|
this._reveal = computed(() => YUW_PASSWORD_REVEAL_STATES[`${this.masked()}`], ...(ngDevMode ? [{ debugName: "_reveal" }] : /* istanbul ignore next */ []));
|
|
1580
1781
|
}
|
|
1581
|
-
_emptyValue() {
|
|
1582
|
-
return '';
|
|
1583
|
-
}
|
|
1584
1782
|
onChange() {
|
|
1585
1783
|
this.committed.emit(this.value());
|
|
1586
1784
|
}
|
|
1785
|
+
onEnterPressed() {
|
|
1786
|
+
this.enterPressed.emit();
|
|
1787
|
+
}
|
|
1587
1788
|
onInput(event) {
|
|
1588
1789
|
this._commit(event.target.value);
|
|
1589
1790
|
}
|
|
@@ -1591,14 +1792,14 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
|
|
|
1591
1792
|
this.masked.update((masked) => !masked);
|
|
1592
1793
|
}
|
|
1593
1794
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1594
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: {
|
|
1795
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"_reveal().inputType\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n (keydown.enter)=\"onEnterPressed()\"\n />\n\n @if (revealAriaLabel(); as label) {\n <hlm-input-group-addon align=\"inline-end\">\n <button\n hlmInputGroupButton\n size=\"icon-xs\"\n [disabled]=\"_disabled()\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"!_reveal().struck\"\n (click)=\"onToggleReveal()\"\n >\n <ng-icon [name]=\"_reveal().icon\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1595
1796
|
}
|
|
1596
1797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
|
|
1597
1798
|
type: Component,
|
|
1598
1799
|
args: [{ selector: 'yuw-password-input', imports: [HlmField, HlmFieldDescription, YuwFieldFeedbackDirective, ...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], host: {
|
|
1599
1800
|
class: 'contents',
|
|
1600
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"_reveal().inputType\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n\n @if (revealAriaLabel(); as label) {\n <hlm-input-group-addon align=\"inline-end\">\n <button\n hlmInputGroupButton\n size=\"icon-xs\"\n [disabled]=\"_disabled()\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"!_reveal().struck\"\n (click)=\"onToggleReveal()\"\n >\n <ng-icon [name]=\"_reveal().icon\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1601
|
-
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }],
|
|
1801
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"_reveal().inputType\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n (keydown.enter)=\"onEnterPressed()\"\n />\n\n @if (revealAriaLabel(); as label) {\n <hlm-input-group-addon align=\"inline-end\">\n <button\n hlmInputGroupButton\n size=\"icon-xs\"\n [disabled]=\"_disabled()\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"!_reveal().struck\"\n (click)=\"onToggleReveal()\"\n >\n <ng-icon [name]=\"_reveal().icon\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1802
|
+
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
1602
1803
|
|
|
1603
1804
|
/**
|
|
1604
1805
|
* Cell size for `<yuw-input-otp>`, applied to the container and reaching each
|
|
@@ -1684,44 +1885,37 @@ let nextYuwInputOtpId = 0;
|
|
|
1684
1885
|
* <yuw-input-otp formControlName="otpCode" [groupSizes]="[6]" mode="numeric" />
|
|
1685
1886
|
* ```
|
|
1686
1887
|
*/
|
|
1687
|
-
class YuwInputOtpComponent extends
|
|
1888
|
+
class YuwInputOtpComponent extends YuwFieldBase {
|
|
1688
1889
|
constructor() {
|
|
1689
1890
|
super(...arguments);
|
|
1690
1891
|
this.autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1691
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1692
|
-
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1693
1892
|
this.groupSizes = input([6], ...(ngDevMode ? [{ debugName: "groupSizes" }] : /* istanbul ignore next */ []));
|
|
1694
|
-
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1695
|
-
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1696
|
-
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1697
1893
|
this.mode = input('numeric', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
1698
1894
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1699
1895
|
this.transformPaste = input((pastedText) => pastedText, ...(ngDevMode ? [{ debugName: "transformPaste" }] : /* istanbul ignore next */ []));
|
|
1700
|
-
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
1701
|
-
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1702
1896
|
this.completed = output();
|
|
1897
|
+
this.enterPressed = output();
|
|
1703
1898
|
this._autoId = `yuw-input-otp-${++nextYuwInputOtpId}`;
|
|
1899
|
+
this._focusSelectors = ['input'];
|
|
1704
1900
|
this._classes = computed(() => cn(yuwInputOtpSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1705
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1706
1901
|
this._groups = computed(() => buildInputOtpGroups(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
|
|
1707
|
-
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1708
1902
|
this._length = computed(() => totalInputOtpLength(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_length" }] : /* istanbul ignore next */ []));
|
|
1709
1903
|
}
|
|
1710
|
-
|
|
1711
|
-
|
|
1904
|
+
onEnterPressed() {
|
|
1905
|
+
this.enterPressed.emit();
|
|
1712
1906
|
}
|
|
1713
1907
|
onValueChange(next) {
|
|
1714
1908
|
this._commit(next);
|
|
1715
1909
|
}
|
|
1716
1910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null },
|
|
1911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <brn-input-otp\n hlmInputOtp\n [class]=\"_classes()\"\n [inputId]=\"_inputId()\"\n [length]=\"_length()\"\n [value]=\"value()\"\n [inputMode]=\"mode()\"\n [disabled]=\"_disabled()\"\n [autofocus]=\"autofocus()\"\n [transformPaste]=\"transformPaste()\"\n inputAutocomplete=\"one-time-code\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n (completed)=\"completed.emit($event)\"\n (keydown.enter)=\"onEnterPressed()\"\n >\n @for (group of _groups(); track $index) {\n @if (group.precededBySeparator) {\n <hlm-input-otp-separator />\n }\n\n <hlm-input-otp-group>\n @for (index of group.indices; track index) {\n <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n }\n </hlm-input-otp-group>\n }\n </brn-input-otp>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$4.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$4.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$4.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$4.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1718
1912
|
}
|
|
1719
1913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
|
|
1720
1914
|
type: Component,
|
|
1721
1915
|
args: [{ selector: 'yuw-input-otp', imports: [HlmField, HlmFieldDescription, YuwFieldFeedbackDirective, BrnInputOtp, ...HlmInputOtpImports], providers: [provideValueAccessor(YuwInputOtpComponent)], host: {
|
|
1722
1916
|
class: 'contents',
|
|
1723
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <brn-input-otp\n hlmInputOtp\n [class]=\"_classes()\"\n [inputId]=\"_inputId()\"\n [length]=\"_length()\"\n [value]=\"value()\"\n [inputMode]=\"mode()\"\n [disabled]=\"_disabled()\"\n [autofocus]=\"autofocus()\"\n [transformPaste]=\"transformPaste()\"\n inputAutocomplete=\"one-time-code\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n (completed)=\"completed.emit($event)\"\n >\n @for (group of _groups(); track $index) {\n @if (group.precededBySeparator) {\n <hlm-input-otp-separator />\n }\n\n <hlm-input-otp-group>\n @for (index of group.indices; track index) {\n <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n }\n </hlm-input-otp-group>\n }\n </brn-input-otp>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1724
|
-
}], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }],
|
|
1917
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <brn-input-otp\n hlmInputOtp\n [class]=\"_classes()\"\n [inputId]=\"_inputId()\"\n [length]=\"_length()\"\n [value]=\"value()\"\n [inputMode]=\"mode()\"\n [disabled]=\"_disabled()\"\n [autofocus]=\"autofocus()\"\n [transformPaste]=\"transformPaste()\"\n inputAutocomplete=\"one-time-code\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n (completed)=\"completed.emit($event)\"\n (keydown.enter)=\"onEnterPressed()\"\n >\n @for (group of _groups(); track $index) {\n @if (group.precededBySeparator) {\n <hlm-input-otp-separator />\n }\n\n <hlm-input-otp-group>\n @for (index of group.indices; track index) {\n <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n }\n </hlm-input-otp-group>\n }\n </brn-input-otp>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1918
|
+
}], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
1725
1919
|
|
|
1726
1920
|
/**
|
|
1727
1921
|
* Form label directive applied directly to a native `<label>` element.
|
|
@@ -1829,7 +2023,6 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
|
|
|
1829
2023
|
this.ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
|
|
1830
2024
|
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1831
2025
|
this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
|
|
1832
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1833
2026
|
this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
1834
2027
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1835
2028
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1837,8 +2030,8 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
|
|
|
1837
2030
|
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1838
2031
|
this.secondary = input(false, { ...(ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1839
2032
|
this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
|
|
2033
|
+
this._focusSelectors = ['[role="checkbox"]'];
|
|
1840
2034
|
this._class = computed(() => cn(checkboxVariants({ secondary: this.secondary() })), ...(ngDevMode ? [{ debugName: "_class" }] : /* istanbul ignore next */ []));
|
|
1841
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1842
2035
|
}
|
|
1843
2036
|
_emptyValue() {
|
|
1844
2037
|
return false;
|
|
@@ -1847,14 +2040,14 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
|
|
|
1847
2040
|
this._commit(checked);
|
|
1848
2041
|
}
|
|
1849
2042
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null },
|
|
2043
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-checkbox\n [class]=\"_class()\"\n [checked]=\"value()\"\n [(indeterminate)]=\"indeterminate\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [forceInvalid]=\"invalid()\"\n [name]=\"name() ?? null\"\n [inputId]=\"inputId() ?? null\"\n [aria-label]=\"ariaLabel() ?? null\"\n [aria-labelledby]=\"ariaLabelledby() ?? null\"\n [aria-describedby]=\"ariaDescribedby() ?? null\"\n (checkedChange)=\"onCheckedChange($event)\"\n />\n <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "checked", "indeterminate", "name", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1851
2044
|
}
|
|
1852
2045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCheckboxComponent, decorators: [{
|
|
1853
2046
|
type: Component,
|
|
1854
2047
|
args: [{ selector: 'yuw-checkbox', imports: [HlmCheckbox, YuwLabel], providers: [provideValueAccessor(YuwCheckboxComponent)], host: {
|
|
1855
2048
|
class: 'contents',
|
|
1856
2049
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-checkbox\n [class]=\"_class()\"\n [checked]=\"value()\"\n [(indeterminate)]=\"indeterminate\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [forceInvalid]=\"invalid()\"\n [name]=\"name() ?? null\"\n [inputId]=\"inputId() ?? null\"\n [aria-label]=\"ariaLabel() ?? null\"\n [aria-labelledby]=\"ariaLabelledby() ?? null\"\n [aria-describedby]=\"ariaDescribedby() ?? null\"\n (checkedChange)=\"onCheckedChange($event)\"\n />\n <ng-content />\n</label>\n" }]
|
|
1857
|
-
}], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }],
|
|
2050
|
+
}], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
1858
2051
|
|
|
1859
2052
|
/**
|
|
1860
2053
|
* Helm switch size each of our sizes maps onto.
|
|
@@ -1930,11 +2123,10 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
|
|
|
1930
2123
|
this.ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
|
|
1931
2124
|
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1932
2125
|
this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
|
|
1933
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1934
2126
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1935
2127
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1936
2128
|
this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
|
|
1937
|
-
this.
|
|
2129
|
+
this._focusSelectors = ['[role="switch"]'];
|
|
1938
2130
|
this._helmSize = computed(() => YUW_SWITCH_HELM_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "_helmSize" }] : /* istanbul ignore next */ []));
|
|
1939
2131
|
this._switchClass = computed(() => yuwSwitchSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_switchClass" }] : /* istanbul ignore next */ []));
|
|
1940
2132
|
}
|
|
@@ -1945,14 +2137,14 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
|
|
|
1945
2137
|
this._commit(checked);
|
|
1946
2138
|
}
|
|
1947
2139
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1948
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null },
|
|
2140
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-switch\n [checked]=\"value()\"\n [size]=\"_helmSize()\"\n [class]=\"_switchClass()\"\n [disabled]=\"_disabled()\"\n [inputId]=\"inputId() ?? null\"\n [aria-label]=\"ariaLabel() ?? null\"\n [aria-labelledby]=\"ariaLabelledby() ?? null\"\n [aria-describedby]=\"ariaDescribedby() ?? null\"\n (checkedChange)=\"onCheckedChange($event)\"\n />\n <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$5.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1949
2141
|
}
|
|
1950
2142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, decorators: [{
|
|
1951
2143
|
type: Component,
|
|
1952
2144
|
args: [{ selector: 'yuw-switch', imports: [...HlmSwitchImports, YuwLabel], providers: [provideValueAccessor(YuwSwitchComponent)], host: {
|
|
1953
2145
|
class: 'contents',
|
|
1954
2146
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-switch\n [checked]=\"value()\"\n [size]=\"_helmSize()\"\n [class]=\"_switchClass()\"\n [disabled]=\"_disabled()\"\n [inputId]=\"inputId() ?? null\"\n [aria-label]=\"ariaLabel() ?? null\"\n [aria-labelledby]=\"ariaLabelledby() ?? null\"\n [aria-describedby]=\"ariaDescribedby() ?? null\"\n (checkedChange)=\"onCheckedChange($event)\"\n />\n <ng-content />\n</label>\n" }]
|
|
1955
|
-
}], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }],
|
|
2147
|
+
}], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
1956
2148
|
|
|
1957
2149
|
/** Module-level counter so every unnamed group gets its own radio `name`. Binding `[name]`
|
|
1958
2150
|
* unconditionally overrides Brain's autogenerated unique name, and an empty-string fallback
|
|
@@ -1985,14 +2177,13 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
|
|
|
1985
2177
|
super(...arguments);
|
|
1986
2178
|
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1987
2179
|
this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
|
|
1988
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1989
2180
|
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1990
2181
|
this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1991
2182
|
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1992
2183
|
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
1993
2184
|
this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2185
|
+
this._focusSelectors = ['input:checked', 'input:not(:disabled)'];
|
|
1994
2186
|
this._generatedName = `yuw-radio-group-${++nextUniqueId$1}`;
|
|
1995
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1996
2187
|
this._groupClass = computed(() => cn('gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
|
|
1997
2188
|
this._name = computed(() => this.name() ?? this._generatedName, ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
|
|
1998
2189
|
}
|
|
@@ -2003,14 +2194,14 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
|
|
|
2003
2194
|
this._commit(next);
|
|
2004
2195
|
}
|
|
2005
2196
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2006
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null },
|
|
2197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n [class]=\"_groupClass()\"\n [value]=\"value() ?? ''\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [name]=\"_name()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n>\n @for (option of options(); track option.value) {\n <label yuwLabel class=\"gap-3\">\n <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n <hlm-radio-indicator indicator />\n </hlm-radio>\n\n {{ option.label }}\n </label>\n }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2007
2198
|
}
|
|
2008
2199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
|
|
2009
2200
|
type: Component,
|
|
2010
2201
|
args: [{ selector: 'yuw-radio-group', imports: [...HlmRadioGroupImports, YuwLabel], providers: [provideValueAccessor(YuwRadioGroupComponent)], host: {
|
|
2011
2202
|
class: 'contents',
|
|
2012
2203
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-radio-group\n [class]=\"_groupClass()\"\n [value]=\"value() ?? ''\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [name]=\"_name()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n>\n @for (option of options(); track option.value) {\n <label yuwLabel class=\"gap-3\">\n <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n <hlm-radio-indicator indicator />\n </hlm-radio>\n\n {{ option.label }}\n </label>\n }\n</hlm-radio-group>\n" }]
|
|
2013
|
-
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }],
|
|
2204
|
+
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
2014
2205
|
|
|
2015
2206
|
/**
|
|
2016
2207
|
* Loading skeleton placeholder directive with pulse animation effect.
|
|
@@ -2038,6 +2229,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
2038
2229
|
}]
|
|
2039
2230
|
}] });
|
|
2040
2231
|
|
|
2232
|
+
/**
|
|
2233
|
+
* Grid of projected cards, usually `yuw-card-grid-item`s in an `@for`. `loading` shows
|
|
2234
|
+
* `skeletonCount` placeholders shaped by `skeletonClass`; `empty` shows `emptyText`; `columnsClass`
|
|
2235
|
+
* holds the Tailwind column utilities.
|
|
2236
|
+
*/
|
|
2237
|
+
class YuwCardGridComponent {
|
|
2238
|
+
constructor() {
|
|
2239
|
+
this.columnsClass = input('grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', ...(ngDevMode ? [{ debugName: "columnsClass" }] : /* istanbul ignore next */ []));
|
|
2240
|
+
this.empty = input(false, { ...(ngDevMode ? { debugName: "empty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2241
|
+
this.emptyText = input.required(...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
2242
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2243
|
+
this.skeletonClass = input('h-16', ...(ngDevMode ? [{ debugName: "skeletonClass" }] : /* istanbul ignore next */ []));
|
|
2244
|
+
this.skeletonCount = input(12, { ...(ngDevMode ? { debugName: "skeletonCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
2245
|
+
this.skeletons = computed(() => Array.from({ length: this.skeletonCount() }, (_, index) => index), ...(ngDevMode ? [{ debugName: "skeletons" }] : /* istanbul ignore next */ []));
|
|
2246
|
+
}
|
|
2247
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2248
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwCardGridComponent, isStandalone: true, selector: "yuw-card-grid", inputs: { columnsClass: { classPropertyName: "columnsClass", publicName: "columnsClass", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonClass: { classPropertyName: "skeletonClass", publicName: "skeletonClass", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loading()) {\n <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n @for (skeleton of skeletons(); track skeleton) {\n <span yuwSkeleton class=\"block w-full rounded-xl\" [class]=\"skeletonClass()\"></span>\n }\n </div>\n} @else if (empty()) {\n <p class=\"text-sm text-muted-foreground\">{{ emptyText() }}</p>\n} @else {\n <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n <ng-content />\n </div>\n}\n", dependencies: [{ kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2249
|
+
}
|
|
2250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardGridComponent, decorators: [{
|
|
2251
|
+
type: Component,
|
|
2252
|
+
args: [{ selector: 'yuw-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwSkeletonDirective], template: "@if (loading()) {\n <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n @for (skeleton of skeletons(); track skeleton) {\n <span yuwSkeleton class=\"block w-full rounded-xl\" [class]=\"skeletonClass()\"></span>\n }\n </div>\n} @else if (empty()) {\n <p class=\"text-sm text-muted-foreground\">{{ emptyText() }}</p>\n} @else {\n <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n <ng-content />\n </div>\n}\n" }]
|
|
2253
|
+
}], propDecorators: { columnsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsClass", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonClass", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }] } });
|
|
2254
|
+
|
|
2255
|
+
/** While `pending` the card stays hidden in place under a skeleton, so the grid does not jump. */
|
|
2256
|
+
class YuwCardGridItemComponent {
|
|
2257
|
+
constructor() {
|
|
2258
|
+
this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2259
|
+
}
|
|
2260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwCardGridItemComponent, isStandalone: true, selector: "yuw-card-grid-item", inputs: { pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative block" }, ngImport: i0, template: "<div class=\"h-full\" [class.invisible]=\"pending()\">\n <ng-content />\n</div>\n\n@if (pending()) {\n <span yuwSkeleton class=\"absolute inset-0 rounded-xl\"></span>\n}\n", dependencies: [{ kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2262
|
+
}
|
|
2263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardGridItemComponent, decorators: [{
|
|
2264
|
+
type: Component,
|
|
2265
|
+
args: [{ selector: 'yuw-card-grid-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwSkeletonDirective], host: { class: 'relative block' }, template: "<div class=\"h-full\" [class.invisible]=\"pending()\">\n <ng-content />\n</div>\n\n@if (pending()) {\n <span yuwSkeleton class=\"absolute inset-0 rounded-xl\"></span>\n}\n" }]
|
|
2266
|
+
}], propDecorators: { pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }] } });
|
|
2267
|
+
|
|
2041
2268
|
/**
|
|
2042
2269
|
* Container directive for card components.
|
|
2043
2270
|
* Accepts optional `size` input (e.g. `'default'` or `'sm'`).
|
|
@@ -2625,7 +2852,6 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
|
|
|
2625
2852
|
this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
2626
2853
|
this.buttonId = input(undefined, ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
|
|
2627
2854
|
this.captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
|
|
2628
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2629
2855
|
this.formatDate = input(undefined, ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
|
|
2630
2856
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2631
2857
|
this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
@@ -2635,13 +2861,13 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
|
|
|
2635
2861
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2636
2862
|
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
2637
2863
|
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2864
|
+
this._focusSelectors = ['button'];
|
|
2638
2865
|
this._generatedButtonId = `yuw-datepicker-${++nextUniqueId}`;
|
|
2639
2866
|
this._monthYearConfig = injectHlmMonthYearPickerConfig();
|
|
2640
2867
|
this._multiConfig = injectHlmDatePickerMultiConfig();
|
|
2641
2868
|
this._rangeConfig = injectHlmDateRangePickerConfig();
|
|
2642
2869
|
this._singleConfig = injectHlmDatePickerConfig();
|
|
2643
2870
|
this._buttonId = computed(() => this.buttonId() ?? this._generatedButtonId, ...(ngDevMode ? [{ debugName: "_buttonId" }] : /* istanbul ignore next */ []));
|
|
2644
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
2645
2871
|
this._formatMonthYear = computed(() => this.formatDate() ?? this._monthYearConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatMonthYear" }] : /* istanbul ignore next */ []));
|
|
2646
2872
|
this._formatMulti = computed(() => {
|
|
2647
2873
|
const format = this.formatDate();
|
|
@@ -2685,14 +2911,14 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
|
|
|
2685
2911
|
this._commit(next);
|
|
2686
2912
|
}
|
|
2687
2913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null },
|
|
2914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n @case ('range') {\n <hlm-date-range-picker\n [date]=\"_rangeValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [captionLayout]=\"captionLayout()\"\n [align]=\"align()\"\n [formatDates]=\"_formatRange()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-date-range-picker>\n }\n @case ('multiple') {\n <hlm-date-picker-multi\n [date]=\"_multipleValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [captionLayout]=\"captionLayout()\"\n [align]=\"align()\"\n [formatDates]=\"_formatMulti()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-date-picker-multi>\n }\n @case ('monthYear') {\n <hlm-month-year-picker\n [date]=\"_singleValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [align]=\"align()\"\n [formatDate]=\"_formatMonthYear()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-month-year-picker>\n }\n @default {\n <hlm-date-picker\n [date]=\"_singleValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [captionLayout]=\"captionLayout()\"\n [align]=\"align()\"\n [formatDate]=\"_formatSingle()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-date-picker>\n }\n}\n", dependencies: [{ kind: "component", type: i1$b.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$b.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2689
2915
|
}
|
|
2690
2916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
|
|
2691
2917
|
type: Component,
|
|
2692
2918
|
args: [{ selector: 'yuw-datepicker', imports: [...HlmDatePickerImports], providers: [provideValueAccessor(YuwDatepickerComponent)], host: {
|
|
2693
2919
|
class: 'contents',
|
|
2694
2920
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode()) {\n @case ('range') {\n <hlm-date-range-picker\n [date]=\"_rangeValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [captionLayout]=\"captionLayout()\"\n [align]=\"align()\"\n [formatDates]=\"_formatRange()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-date-range-picker>\n }\n @case ('multiple') {\n <hlm-date-picker-multi\n [date]=\"_multipleValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [captionLayout]=\"captionLayout()\"\n [align]=\"align()\"\n [formatDates]=\"_formatMulti()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-date-picker-multi>\n }\n @case ('monthYear') {\n <hlm-month-year-picker\n [date]=\"_singleValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [align]=\"align()\"\n [formatDate]=\"_formatMonthYear()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-month-year-picker>\n }\n @default {\n <hlm-date-picker\n [date]=\"_singleValue()\"\n [disabled]=\"_disabled()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [captionLayout]=\"captionLayout()\"\n [align]=\"align()\"\n [formatDate]=\"_formatSingle()\"\n (dateChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n >\n <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n {{ placeholder() ?? '' }}\n </hlm-date-picker-trigger>\n </hlm-date-picker>\n }\n}\n" }]
|
|
2695
|
-
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }],
|
|
2921
|
+
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
2696
2922
|
|
|
2697
2923
|
/**
|
|
2698
2924
|
* Outer wrapper container directive for responsive HTML table scroll container.
|
|
@@ -2843,33 +3069,623 @@ const YuwTableImports = [
|
|
|
2843
3069
|
YuwDatatablePaginationDirective,
|
|
2844
3070
|
];
|
|
2845
3071
|
|
|
2846
|
-
const YUW_DATATABLE_FEATURES = {
|
|
2847
|
-
columnMeta: {},
|
|
2848
|
-
columnFilteringFeature,
|
|
2849
|
-
columnVisibilityFeature,
|
|
2850
|
-
rowPaginationFeature,
|
|
2851
|
-
rowSelectionFeature,
|
|
2852
|
-
rowSortingFeature,
|
|
2853
|
-
};
|
|
2854
|
-
|
|
2855
3072
|
/**
|
|
2856
|
-
*
|
|
3073
|
+
* Makes a `<yuw-button>` the trigger of the surrounding `<yuw-popover>`.
|
|
2857
3074
|
*
|
|
2858
|
-
*
|
|
2859
|
-
*
|
|
2860
|
-
*
|
|
2861
|
-
*
|
|
3075
|
+
* The helm trigger directive's selector only matches a native `button`, so composing the brain
|
|
3076
|
+
* directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
|
|
3077
|
+
* Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
|
|
3078
|
+
* bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
|
|
3079
|
+
* anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
|
|
3080
|
+
* host has no rect for the overlay to position from.
|
|
2862
3081
|
*
|
|
2863
|
-
*
|
|
2864
|
-
* while the table still had free space beside it, which reads as broken; letting the column take
|
|
2865
|
-
* its share of the row means text wraps only once it genuinely no longer fits.
|
|
3082
|
+
* `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
|
|
2866
3083
|
*/
|
|
2867
|
-
|
|
3084
|
+
class YuwPopoverTriggerDirective {
|
|
3085
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3086
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$d.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
|
|
3087
|
+
}
|
|
3088
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, decorators: [{
|
|
3089
|
+
type: Directive,
|
|
3090
|
+
args: [{
|
|
3091
|
+
selector: 'yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]',
|
|
3092
|
+
hostDirectives: [
|
|
3093
|
+
{ directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
|
|
3094
|
+
],
|
|
3095
|
+
host: { 'data-slot': 'popover-trigger' },
|
|
3096
|
+
}]
|
|
3097
|
+
}] });
|
|
3098
|
+
|
|
2868
3099
|
/**
|
|
2869
|
-
*
|
|
3100
|
+
* Popover component for displaying anchored floating overlay panels.
|
|
2870
3101
|
*
|
|
2871
|
-
*
|
|
2872
|
-
*
|
|
3102
|
+
* Inputs / Models:
|
|
3103
|
+
* - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
|
|
3104
|
+
* - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
|
|
3105
|
+
* - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
|
|
3106
|
+
* - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
|
|
3107
|
+
* - `sideOffset`: Pixel offset for X sides. Positive px for right, negative for left side.
|
|
3108
|
+
* - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
|
|
3109
|
+
* - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
|
|
3110
|
+
* - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
|
|
3111
|
+
* over the library defaults via `twMerge`.
|
|
3112
|
+
* - `triggerVariant`: Button style variant for the trigger button.
|
|
3113
|
+
* - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
|
|
3114
|
+
* `'secondary'`.
|
|
3115
|
+
* - `triggerSize`: Button size for the trigger button.
|
|
3116
|
+
* - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
|
|
3117
|
+
* open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
|
|
3118
|
+
* - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
|
|
3119
|
+
* variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
|
|
3120
|
+
*
|
|
3121
|
+
* The trigger is a `<yuw-button>`; `YuwPopoverTriggerDirective` composes the brain trigger onto it,
|
|
3122
|
+
* so the popover reuses our button component instead of applying `[hlmBtn]` directly.
|
|
3123
|
+
*
|
|
3124
|
+
* Usage:
|
|
3125
|
+
* ```html
|
|
3126
|
+
* <yuw-popover [(open)]="isOpen" title="Notifications" description="You're all caught up.">
|
|
3127
|
+
* <ng-container yuwPopoverTrigger>View Notifications</ng-container>
|
|
3128
|
+
*
|
|
3129
|
+
* <p>Popover content body goes here.</p>
|
|
3130
|
+
* </yuw-popover>
|
|
3131
|
+
* ```
|
|
3132
|
+
*/
|
|
3133
|
+
class YuwPopoverComponent {
|
|
3134
|
+
constructor() {
|
|
3135
|
+
this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
3136
|
+
this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
3137
|
+
this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
|
|
3138
|
+
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3139
|
+
this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
3140
|
+
this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3141
|
+
this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
|
|
3142
|
+
this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3143
|
+
this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
|
|
3144
|
+
this.triggerColor = input('secondary', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
|
|
3145
|
+
this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
|
|
3146
|
+
this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3147
|
+
this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
|
|
3148
|
+
this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
|
|
3149
|
+
}
|
|
3150
|
+
onOpenChange(state) {
|
|
3151
|
+
this.open.set(state === 'open');
|
|
3152
|
+
}
|
|
3153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n hlmPopover\n [state]=\"_popoverState()\"\n [align]=\"align()\"\n [sideOffset]=\"sideOffset()\"\n [offsetX]=\"offsetX()\"\n (stateChanged)=\"onOpenChange($event)\"\n>\n @if (showTrigger()) {\n <yuw-button\n yuwPopoverTriggerButton\n [color]=\"triggerColor()\"\n [variant]=\"triggerVariant()\"\n [size]=\"triggerSize()\"\n [transparent]=\"triggerTransparent()\"\n [class]=\"triggerClass()\"\n >\n <ng-content select=\"[yuwPopoverTrigger]\" />\n </yuw-button>\n }\n\n <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n @if (title() || description()) {\n <div hlmPopoverHeader>\n @if (title()) {\n <p hlmPopoverTitle>{{ title() }}</p>\n }\n @if (description()) {\n <p hlmPopoverDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <ng-content />\n </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$e.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$e.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$e.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$e.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$e.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$e.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3155
|
+
}
|
|
3156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
|
|
3157
|
+
type: Component,
|
|
3158
|
+
args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
|
|
3159
|
+
class: 'contents',
|
|
3160
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n hlmPopover\n [state]=\"_popoverState()\"\n [align]=\"align()\"\n [sideOffset]=\"sideOffset()\"\n [offsetX]=\"offsetX()\"\n (stateChanged)=\"onOpenChange($event)\"\n>\n @if (showTrigger()) {\n <yuw-button\n yuwPopoverTriggerButton\n [color]=\"triggerColor()\"\n [variant]=\"triggerVariant()\"\n [size]=\"triggerSize()\"\n [transparent]=\"triggerTransparent()\"\n [class]=\"triggerClass()\"\n >\n <ng-content select=\"[yuwPopoverTrigger]\" />\n </yuw-button>\n }\n\n <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n @if (title() || description()) {\n <div hlmPopoverHeader>\n @if (title()) {\n <p hlmPopoverTitle>{{ title() }}</p>\n }\n @if (description()) {\n <p hlmPopoverDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <ng-content />\n </hlm-popover-content>\n</div>\n" }]
|
|
3161
|
+
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
|
|
3162
|
+
|
|
3163
|
+
/**
|
|
3164
|
+
* Action row of `yuw-list-toolbar`: search, export and column visibility, each rendered only when
|
|
3165
|
+
* its input is set. Below `md` the search collapses into a popover; both widths bind the same
|
|
3166
|
+
* `search` model and carry their own `yuw-search-input` because the popover anchors to the element
|
|
3167
|
+
* holding `yuwPopoverTrigger`.
|
|
3168
|
+
*/
|
|
3169
|
+
class YuwListToolbarActionsComponent {
|
|
3170
|
+
constructor() {
|
|
3171
|
+
this.hideableColumns = input(...(ngDevMode ? [undefined, { debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
|
|
3172
|
+
this.isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
3173
|
+
this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
3174
|
+
this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
|
|
3175
|
+
this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
3176
|
+
this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3177
|
+
this.exported = output();
|
|
3178
|
+
this.hiddenColumnsChange = output();
|
|
3179
|
+
this.searched = output();
|
|
3180
|
+
this.hiddenColumns = signal([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
|
|
3181
|
+
this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
|
|
3182
|
+
this.settingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "settingsOpen" }] : /* istanbul ignore next */ []));
|
|
3183
|
+
}
|
|
3184
|
+
onHiddenColumnsChange(value) {
|
|
3185
|
+
this.hiddenColumns.set(Array.isArray(value) ? value : value ? [value] : []);
|
|
3186
|
+
this.hiddenColumnsChange.emit(this.hiddenColumns());
|
|
3187
|
+
}
|
|
3188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", exported: "exported", hiddenColumnsChange: "hiddenColumnsChange", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideSearch, lucideSettings2 })], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n @if (isMobile()) {\n <yuw-popover\n align=\"center\"\n class=\"mr-5\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n [offsetX]=\"-16\"\n [(open)]=\"searchOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n <ng-icon name=\"lucideSearch\" size=\"16\" />\n </span>\n\n <yuw-search-input\n expandedWidth=\"100%\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n (searched)=\"searched.emit($event)\"\n />\n </yuw-popover>\n } @else {\n <yuw-search-input\n collapseFrom=\"right\"\n expandedWidth=\"18rem\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n [expandAriaLabel]=\"labels().search.expand\"\n (searched)=\"searched.emit($event)\"\n />\n }\n}\n\n@if (showExport()) {\n <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n <ng-icon name=\"lucideDownload\" size=\"16\" />\n <span class=\"max-md:hidden\">\n {{ labels().export }}\n </span>\n </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n <yuw-popover\n align=\"end\"\n panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n [(open)]=\"settingsOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n <ng-icon name=\"lucideSettings2\" size=\"16\" />\n </span>\n\n <div>\n <yuw-combobox\n multiple\n [options]=\"columns\"\n [value]=\"hiddenColumns()\"\n [placeholder]=\"labels().columns.placeholder\"\n [emptyText]=\"labels().columns.empty\"\n [triggerAriaLabel]=\"labels().columns.toggle\"\n (valueChange)=\"onHiddenColumnsChange($event)\"\n />\n </div>\n </yuw-popover>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3190
|
+
}
|
|
3191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
|
|
3192
|
+
type: Component,
|
|
3193
|
+
args: [{ selector: 'yuw-list-toolbar-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwComboboxComponent, YuwPopoverComponent, YuwSearchInputComponent], providers: [provideIcons({ lucideDownload, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n @if (isMobile()) {\n <yuw-popover\n align=\"center\"\n class=\"mr-5\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n [offsetX]=\"-16\"\n [(open)]=\"searchOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n <ng-icon name=\"lucideSearch\" size=\"16\" />\n </span>\n\n <yuw-search-input\n expandedWidth=\"100%\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n (searched)=\"searched.emit($event)\"\n />\n </yuw-popover>\n } @else {\n <yuw-search-input\n collapseFrom=\"right\"\n expandedWidth=\"18rem\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n [expandAriaLabel]=\"labels().search.expand\"\n (searched)=\"searched.emit($event)\"\n />\n }\n}\n\n@if (showExport()) {\n <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n <ng-icon name=\"lucideDownload\" size=\"16\" />\n <span class=\"max-md:hidden\">\n {{ labels().export }}\n </span>\n </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n <yuw-popover\n align=\"end\"\n panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n [(open)]=\"settingsOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n <ng-icon name=\"lucideSettings2\" size=\"16\" />\n </span>\n\n <div>\n <yuw-combobox\n multiple\n [options]=\"columns\"\n [value]=\"hiddenColumns()\"\n [placeholder]=\"labels().columns.placeholder\"\n [emptyText]=\"labels().columns.empty\"\n [triggerAriaLabel]=\"labels().columns.toggle\"\n (valueChange)=\"onHiddenColumnsChange($event)\"\n />\n </div>\n </yuw-popover>\n}\n" }]
|
|
3194
|
+
}], propDecorators: { hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], hiddenColumnsChange: [{ type: i0.Output, args: ["hiddenColumnsChange"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
3195
|
+
|
|
3196
|
+
/**
|
|
3197
|
+
* Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
|
|
3198
|
+
*
|
|
3199
|
+
* Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
|
|
3200
|
+
* directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
|
|
3201
|
+
* so a trigger can override which edge the sheet appears from.
|
|
3202
|
+
*/
|
|
3203
|
+
class YuwSheetTriggerDirective {
|
|
3204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3205
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$f.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
|
|
3206
|
+
}
|
|
3207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
|
|
3208
|
+
type: Directive,
|
|
3209
|
+
args: [{
|
|
3210
|
+
selector: 'yuw-button[yuwSheetTriggerButton]',
|
|
3211
|
+
hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
|
|
3212
|
+
host: { 'data-slot': 'sheet-trigger' },
|
|
3213
|
+
}]
|
|
3214
|
+
}] });
|
|
3215
|
+
/** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
|
|
3216
|
+
class YuwSheetCloseDirective {
|
|
3217
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3218
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$f.BrnSheetClose }], ngImport: i0 }); }
|
|
3219
|
+
}
|
|
3220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
|
|
3221
|
+
type: Directive,
|
|
3222
|
+
args: [{
|
|
3223
|
+
selector: 'yuw-button[yuwSheetClose]',
|
|
3224
|
+
hostDirectives: [BrnSheetClose],
|
|
3225
|
+
host: { 'data-slot': 'sheet-close' },
|
|
3226
|
+
}]
|
|
3227
|
+
}] });
|
|
3228
|
+
|
|
3229
|
+
/**
|
|
3230
|
+
* Marks an element as the sheet's footer content, projected into the footer slot.
|
|
3231
|
+
* Its presence is also what makes the footer render at all — without it the sheet
|
|
3232
|
+
* shows no empty footer strip.
|
|
3233
|
+
*/
|
|
3234
|
+
class YuwSheetFooterDirective {
|
|
3235
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3236
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
|
|
3237
|
+
}
|
|
3238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
|
|
3239
|
+
type: Directive,
|
|
3240
|
+
args: [{
|
|
3241
|
+
selector: '[yuwSheetFooter]',
|
|
3242
|
+
}]
|
|
3243
|
+
}] });
|
|
3244
|
+
|
|
3245
|
+
const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
|
|
3246
|
+
/**
|
|
3247
|
+
* Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
|
|
3248
|
+
*
|
|
3249
|
+
* Accessibility: provide either `title` or `ariaLabel` — a modal panel without an accessible name
|
|
3250
|
+
* is announced as an anonymous dialog by screen readers.
|
|
3251
|
+
*
|
|
3252
|
+
* Inputs / Models:
|
|
3253
|
+
* - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
|
|
3254
|
+
* - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
|
|
3255
|
+
* - `side`: Edge of the screen the panel slides in from (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'right'`.
|
|
3256
|
+
* - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
|
|
3257
|
+
* - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
|
|
3258
|
+
* - `ariaLabel`: Accessible name for the sheet when no visible `title` is rendered. User-facing
|
|
3259
|
+
* text the consuming app is responsible for translating.
|
|
3260
|
+
* - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
|
|
3261
|
+
* renders and screen readers read this label; when absent there is no close button. User-facing
|
|
3262
|
+
* text the consuming app is responsible for translating.
|
|
3263
|
+
* - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
|
|
3264
|
+
* They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
|
|
3265
|
+
* plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
|
|
3266
|
+
* the class has to be `data-[side=left]:w-64`, not `w-64`.
|
|
3267
|
+
* - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
|
|
3268
|
+
* viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
|
|
3269
|
+
* the overlay too, and the helm's own class always wins the `class` input it exposes.
|
|
3270
|
+
* - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
|
|
3271
|
+
* strategy; pass `'reposition'` for a panel that should leave the page scrollable.
|
|
3272
|
+
* - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
|
|
3273
|
+
* modal; set `false` when content outside stays visible and usable, so the claim stays honest.
|
|
3274
|
+
* - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it, backdrop
|
|
3275
|
+
* clicks included. Default is `true`, matching the brain from `@spartan-ng/brain` 1.3.4 on; pass
|
|
3276
|
+
* `false` for a panel that must be dismissed deliberately.
|
|
3277
|
+
* - `triggerVariant`: Button style variant for the trigger button.
|
|
3278
|
+
* - `triggerSize`: Button size for the trigger button.
|
|
3279
|
+
*
|
|
3280
|
+
* Usage:
|
|
3281
|
+
* ```html
|
|
3282
|
+
* <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
|
|
3283
|
+
* <ng-container yuwSheetTrigger>Edit Profile</ng-container>
|
|
3284
|
+
*
|
|
3285
|
+
* <p>Sheet form content goes here.</p>
|
|
3286
|
+
*
|
|
3287
|
+
* <div yuwSheetFooter>
|
|
3288
|
+
* <yuw-button (clicked)="save()">Save Changes</yuw-button>
|
|
3289
|
+
* </div>
|
|
3290
|
+
* </yuw-sheet>
|
|
3291
|
+
* ```
|
|
3292
|
+
*/
|
|
3293
|
+
class YuwSheetComponent {
|
|
3294
|
+
constructor() {
|
|
3295
|
+
this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
3296
|
+
this.sheet = viewChild.required(HlmSheet);
|
|
3297
|
+
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3298
|
+
this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3299
|
+
this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
3300
|
+
this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3301
|
+
this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
3302
|
+
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3303
|
+
this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
|
|
3304
|
+
this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
3305
|
+
this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
|
|
3306
|
+
this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3307
|
+
this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
3308
|
+
this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3309
|
+
this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
|
|
3310
|
+
this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
|
|
3311
|
+
this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
|
|
3312
|
+
effect(() => {
|
|
3313
|
+
const overlayClass = this.overlayClass();
|
|
3314
|
+
if (overlayClass === undefined)
|
|
3315
|
+
return;
|
|
3316
|
+
this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
|
|
3317
|
+
});
|
|
3318
|
+
}
|
|
3319
|
+
onStateChanged(state) {
|
|
3320
|
+
this.open.set(state === 'open');
|
|
3321
|
+
}
|
|
3322
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n [side]=\"side()\"\n [state]=\"_sheetState()\"\n [aria-label]=\"ariaLabel()\"\n [aria-modal]=\"ariaModal()\"\n [scrollStrategy]=\"scrollStrategy()\"\n [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n (stateChanged)=\"onStateChanged($event)\"\n>\n @if (showTrigger()) {\n <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwSheetTrigger]\" />\n </yuw-button>\n }\n\n <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n @if (title() || description()) {\n <div hlmSheetHeader>\n @if (title()) {\n <h2 hlmSheetTitle>{{ title() }}</h2>\n }\n @if (description()) {\n <p hlmSheetDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <div class=\"flex-1 overflow-y-auto px-4\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div hlmSheetFooter>\n <ng-content select=\"[yuwSheetFooter]\" />\n </div>\n }\n\n @if (closeLabel()) {\n <div class=\"absolute inset-e-3 top-3\">\n <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3324
|
+
}
|
|
3325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
|
|
3326
|
+
type: Component,
|
|
3327
|
+
args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
|
|
3328
|
+
class: 'contents',
|
|
3329
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n [side]=\"side()\"\n [state]=\"_sheetState()\"\n [aria-label]=\"ariaLabel()\"\n [aria-modal]=\"ariaModal()\"\n [scrollStrategy]=\"scrollStrategy()\"\n [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n (stateChanged)=\"onStateChanged($event)\"\n>\n @if (showTrigger()) {\n <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwSheetTrigger]\" />\n </yuw-button>\n }\n\n <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n @if (title() || description()) {\n <div hlmSheetHeader>\n @if (title()) {\n <h2 hlmSheetTitle>{{ title() }}</h2>\n }\n @if (description()) {\n <p hlmSheetDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <div class=\"flex-1 overflow-y-auto px-4\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div hlmSheetFooter>\n <ng-content select=\"[yuwSheetFooter]\" />\n </div>\n }\n\n @if (closeLabel()) {\n <div class=\"absolute inset-e-3 top-3\">\n <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-sheet-content>\n</hlm-sheet>\n" }]
|
|
3330
|
+
}], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
|
|
3331
|
+
const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
|
|
3332
|
+
|
|
3333
|
+
class YuwTabContentDirective {
|
|
3334
|
+
constructor() {
|
|
3335
|
+
this.templateRef = inject(TemplateRef);
|
|
3336
|
+
this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwTabContent' });
|
|
3337
|
+
}
|
|
3338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3339
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabContentDirective, isStandalone: true, selector: "ng-template[yuwTabContent]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwTabContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
3340
|
+
}
|
|
3341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, decorators: [{
|
|
3342
|
+
type: Directive,
|
|
3343
|
+
args: [{
|
|
3344
|
+
selector: 'ng-template[yuwTabContent]',
|
|
3345
|
+
}]
|
|
3346
|
+
}], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabContent", required: true }] }] } });
|
|
3347
|
+
|
|
3348
|
+
/**
|
|
3349
|
+
* Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
|
|
3350
|
+
* id of the tab it belongs to, matching an entry in the `tabs` input.
|
|
3351
|
+
*
|
|
3352
|
+
* Usage:
|
|
3353
|
+
* ```html
|
|
3354
|
+
* <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
|
|
3355
|
+
* ```
|
|
3356
|
+
*/
|
|
3357
|
+
class YuwTabPanelDirective {
|
|
3358
|
+
constructor() {
|
|
3359
|
+
this.templateRef = inject(TemplateRef);
|
|
3360
|
+
this.tabId = input.required({ ...(ngDevMode ? { debugName: "tabId" } : /* istanbul ignore next */ {}), alias: 'yuwTabPanel' });
|
|
3361
|
+
}
|
|
3362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3363
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabPanelDirective, isStandalone: true, selector: "ng-template[yuwTabPanel]", inputs: { tabId: { classPropertyName: "tabId", publicName: "yuwTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
3364
|
+
}
|
|
3365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, decorators: [{
|
|
3366
|
+
type: Directive,
|
|
3367
|
+
args: [{
|
|
3368
|
+
selector: 'ng-template[yuwTabPanel]',
|
|
3369
|
+
}]
|
|
3370
|
+
}], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabPanel", required: true }] }] } });
|
|
3371
|
+
|
|
3372
|
+
/**
|
|
3373
|
+
* Size classes for `<yuw-tabs>`, applied to the `hlm-tabs-list`.
|
|
3374
|
+
*
|
|
3375
|
+
* Two things scale, and both have to be written with the helm's own modifier prefixes so
|
|
3376
|
+
* tailwind-merge displaces the helm class rather than leaving it standing:
|
|
3377
|
+
*
|
|
3378
|
+
* - The list height, declared by the helm as `group-data-horizontal/tabs:h-8`. Only the horizontal
|
|
3379
|
+
* orientation has a fixed height; the vertical one is `h-fit` and is left alone.
|
|
3380
|
+
* - The triggers' horizontal padding, reached through a descendant selector. The helm's `px-1.5` is
|
|
3381
|
+
* tight enough that a taller list would look cramped, and the triggers are separate components
|
|
3382
|
+
* with no class passthrough. Their height needs nothing — `h-[calc(100%-1px)]` already tracks the
|
|
3383
|
+
* list.
|
|
3384
|
+
*/
|
|
3385
|
+
const yuwTabsSizeVariants = cva('', {
|
|
3386
|
+
variants: {
|
|
3387
|
+
size: {
|
|
3388
|
+
default: 'group-data-horizontal/tabs:h-10 [&_[data-slot=tabs-trigger]]:px-2.5',
|
|
3389
|
+
xs: 'group-data-horizontal/tabs:h-7 [&_[data-slot=tabs-trigger]]:px-1.5',
|
|
3390
|
+
sm: 'group-data-horizontal/tabs:h-9 [&_[data-slot=tabs-trigger]]:px-2',
|
|
3391
|
+
lg: 'group-data-horizontal/tabs:h-11 [&_[data-slot=tabs-trigger]]:px-3',
|
|
3392
|
+
},
|
|
3393
|
+
},
|
|
3394
|
+
defaultVariants: {
|
|
3395
|
+
size: 'default',
|
|
3396
|
+
},
|
|
3397
|
+
});
|
|
3398
|
+
|
|
3399
|
+
/**
|
|
3400
|
+
* Tabbed navigation between sibling panels.
|
|
3401
|
+
*
|
|
3402
|
+
* Triggers come from the `tabs` input; each panel's content is declared by the consumer as an
|
|
3403
|
+
* `<ng-template yuwTabPanel="<id>">` whose id matches a tab. Panels are lazy: a panel's content
|
|
3404
|
+
* is only instantiated the first time its tab becomes active (and stays alive, hidden, after
|
|
3405
|
+
* switching away).
|
|
3406
|
+
*
|
|
3407
|
+
* Inputs / Models:
|
|
3408
|
+
* - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
|
|
3409
|
+
* - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
|
|
3410
|
+
* programmatically; listen to `activeTabChange` to react to activations.
|
|
3411
|
+
* - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
|
|
3412
|
+
* - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
|
|
3413
|
+
* - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
|
|
3414
|
+
* - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
|
|
3415
|
+
* `'manual'` requires Enter/Space). Default is `'automatic'`.
|
|
3416
|
+
*
|
|
3417
|
+
* Usage:
|
|
3418
|
+
* ```html
|
|
3419
|
+
* <yuw-tabs [tabs]="tabs" [(activeTab)]="selected">
|
|
3420
|
+
* <ng-template yuwTabPanel="general">Contenido general</ng-template>
|
|
3421
|
+
* <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
|
|
3422
|
+
* </yuw-tabs>
|
|
3423
|
+
* ```
|
|
3424
|
+
*/
|
|
3425
|
+
class YuwTabsComponent {
|
|
3426
|
+
constructor() {
|
|
3427
|
+
this._contents = contentChildren(YuwTabContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
|
|
3428
|
+
this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
|
|
3429
|
+
this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
|
|
3430
|
+
this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
3431
|
+
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
3432
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3433
|
+
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
3434
|
+
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
3435
|
+
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3436
|
+
this._listClass = computed(() => cn(yuwTabsSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
|
|
3437
|
+
this._resolved = computed(() => {
|
|
3438
|
+
const templates = new Map(this._contents().map((content) => [content.entryId(), content.templateRef]));
|
|
3439
|
+
const entries = this.tabs();
|
|
3440
|
+
return entries.map((entry) => {
|
|
3441
|
+
return {
|
|
3442
|
+
...entry,
|
|
3443
|
+
template: templates.get(entry.id),
|
|
3444
|
+
};
|
|
3445
|
+
});
|
|
3446
|
+
}, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
|
|
3447
|
+
}
|
|
3448
|
+
onTabActivated(tabId) {
|
|
3449
|
+
this.activeTab.set(tabId);
|
|
3450
|
+
}
|
|
3451
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n [tab]=\"activeTab()\"\n [orientation]=\"orientation()\"\n [activationMode]=\"activationMode()\"\n (tabActivated)=\"onTabActivated($event)\"\n>\n <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n @for (tab of _resolved(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n @if (tab.template) {\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n } @else {\n {{ tab.label }}\n }\n </button>\n }\n </hlm-tabs-list>\n\n @for (panel of panels(); track panel.tabId()) {\n <div [hlmTabsContent]=\"panel.tabId()\">\n <ng-template hlmTabsContentLazy>\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </ng-template>\n </div>\n }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$h.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$h.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$h.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$h.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$h.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3453
|
+
}
|
|
3454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
|
|
3455
|
+
type: Component,
|
|
3456
|
+
args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
|
|
3457
|
+
class: 'contents',
|
|
3458
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n [tab]=\"activeTab()\"\n [orientation]=\"orientation()\"\n [activationMode]=\"activationMode()\"\n (tabActivated)=\"onTabActivated($event)\"\n>\n <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n @for (tab of _resolved(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n @if (tab.template) {\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n } @else {\n {{ tab.label }}\n }\n </button>\n }\n </hlm-tabs-list>\n\n @for (panel of panels(); track panel.tabId()) {\n <div [hlmTabsContent]=\"panel.tabId()\">\n <ng-template hlmTabsContentLazy>\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </ng-template>\n </div>\n }\n</hlm-tabs>\n" }]
|
|
3459
|
+
}], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
3460
|
+
|
|
3461
|
+
/** Number of selected values across every group, not the number of groups. */
|
|
3462
|
+
function countSelectedValues(selection) {
|
|
3463
|
+
return Object.values(selection).reduce((total, entry) => total + (Array.isArray(entry) ? entry.length : 1), 0);
|
|
3464
|
+
}
|
|
3465
|
+
/**
|
|
3466
|
+
* Staged selection behind the filter editor. Picking an option changes the draft, not the applied
|
|
3467
|
+
* selection, so the page does not re-query on every click; only `snapshot()` is committed.
|
|
3468
|
+
*/
|
|
3469
|
+
class YuwFilterDraft {
|
|
3470
|
+
clear() {
|
|
3471
|
+
this._entries.set({});
|
|
3472
|
+
}
|
|
3473
|
+
constructor(applied) {
|
|
3474
|
+
this.applied = applied;
|
|
3475
|
+
this._entries = linkedSignal(() => ({ ...this.applied() }), ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
|
|
3476
|
+
this.pendingGroupIds = computed(() => {
|
|
3477
|
+
const committed = this.applied();
|
|
3478
|
+
const staged = this._entries();
|
|
3479
|
+
return new Set([...new Set([...Object.keys(committed), ...Object.keys(staged)])].filter((groupId) => !YuwFilterDraft.isSameEntry(committed[groupId], staged[groupId])));
|
|
3480
|
+
}, ...(ngDevMode ? [{ debugName: "pendingGroupIds" }] : /* istanbul ignore next */ []));
|
|
3481
|
+
this.checkedValues = computed(() => Object.fromEntries(Object.entries(this._entries()).map(([groupId, entry]) => [
|
|
3482
|
+
groupId,
|
|
3483
|
+
new Set(Array.isArray(entry) ? entry : [entry]),
|
|
3484
|
+
])), ...(ngDevMode ? [{ debugName: "checkedValues" }] : /* istanbul ignore next */ []));
|
|
3485
|
+
this.selectedCount = computed(() => countSelectedValues(this._entries()), ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
|
|
3486
|
+
}
|
|
3487
|
+
reset() {
|
|
3488
|
+
this._entries.set({ ...this.applied() });
|
|
3489
|
+
}
|
|
3490
|
+
snapshot() {
|
|
3491
|
+
return this._entries();
|
|
3492
|
+
}
|
|
3493
|
+
/**
|
|
3494
|
+
* A `single` group behaves like a radio that can also be emptied: checking replaces the held
|
|
3495
|
+
* value, and unchecking only clears the group when it names the value actually held.
|
|
3496
|
+
*/
|
|
3497
|
+
toggle(group, value, checked) {
|
|
3498
|
+
if (group.mode === 'multiple') {
|
|
3499
|
+
this._setMultiple(group.id, value, checked);
|
|
3500
|
+
return;
|
|
3501
|
+
}
|
|
3502
|
+
if (checked) {
|
|
3503
|
+
this._setSingle(group.id, value);
|
|
3504
|
+
return;
|
|
3505
|
+
}
|
|
3506
|
+
if (this.checkedValues()[group.id]?.has(value)) {
|
|
3507
|
+
this._setSingle(group.id, undefined);
|
|
3508
|
+
}
|
|
3509
|
+
}
|
|
3510
|
+
_setMultiple(groupId, value, checked) {
|
|
3511
|
+
this._entries.update((entries) => {
|
|
3512
|
+
const entry = entries[groupId];
|
|
3513
|
+
const current = Array.isArray(entry) ? entry : [];
|
|
3514
|
+
const next = checked ? [...current, value] : current.filter((item) => item !== value);
|
|
3515
|
+
return next.length === 0 ? YuwFilterDraft.without(entries, groupId) : { ...entries, [groupId]: next };
|
|
3516
|
+
});
|
|
3517
|
+
}
|
|
3518
|
+
_setSingle(groupId, value) {
|
|
3519
|
+
this._entries.update((entries) => value === undefined ? YuwFilterDraft.without(entries, groupId) : { ...entries, [groupId]: value });
|
|
3520
|
+
}
|
|
3521
|
+
static isSameEntry(applied, staged) {
|
|
3522
|
+
if (Array.isArray(applied) && Array.isArray(staged)) {
|
|
3523
|
+
return applied.length === staged.length && new Set(applied).size === new Set([...applied, ...staged]).size;
|
|
3524
|
+
}
|
|
3525
|
+
return applied === staged;
|
|
3526
|
+
}
|
|
3527
|
+
static without(entries, groupId) {
|
|
3528
|
+
const { [groupId]: _removed, ...rest } = entries;
|
|
3529
|
+
return rest;
|
|
3530
|
+
}
|
|
3531
|
+
}
|
|
3532
|
+
|
|
3533
|
+
/**
|
|
3534
|
+
* Filter control of `yuw-list-toolbar`. From `md` up the editor is a two-pane panel in a popover;
|
|
3535
|
+
* below it, one tab per group in a bottom sheet.
|
|
3536
|
+
*
|
|
3537
|
+
* Each layout keeps its own trigger: the popover anchors to the element holding
|
|
3538
|
+
* `yuwPopoverTrigger`, so it cannot come from a shared `ng-template`. `activeCount` reads the
|
|
3539
|
+
* applied selection, not the draft. Opening the editor discards unapplied draft changes.
|
|
3540
|
+
*/
|
|
3541
|
+
class YuwListToolbarFiltersComponent {
|
|
3542
|
+
constructor() {
|
|
3543
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3544
|
+
this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
3545
|
+
this.idleColor = input.required(...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
|
|
3546
|
+
this.isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
3547
|
+
this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
3548
|
+
this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
3549
|
+
this._activeGroupId = signal(null, ...(ngDevMode ? [{ debugName: "_activeGroupId" }] : /* istanbul ignore next */ []));
|
|
3550
|
+
this.draft = new YuwFilterDraft(this.selection);
|
|
3551
|
+
this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3552
|
+
this.activeCount = computed(() => countSelectedValues(this.selection()), ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
|
|
3553
|
+
this.activeGroup = computed(() => {
|
|
3554
|
+
const groups = this.groups();
|
|
3555
|
+
const id = this._activeGroupId();
|
|
3556
|
+
return groups.find((group) => group.id === id) ?? groups.at(0) ?? null;
|
|
3557
|
+
}, ...(ngDevMode ? [{ debugName: "activeGroup" }] : /* istanbul ignore next */ []));
|
|
3558
|
+
this.hasActive = computed(() => this.activeCount() > 0, ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
|
|
3559
|
+
this.buttons = computed(() => {
|
|
3560
|
+
const active = this.hasActive();
|
|
3561
|
+
const disabled = this.disabled();
|
|
3562
|
+
const { title, clearAll } = this.labels();
|
|
3563
|
+
const entries = [
|
|
3564
|
+
{
|
|
3565
|
+
id: 'filters',
|
|
3566
|
+
label: active ? `${title} : ${this.activeCount()}` : title,
|
|
3567
|
+
variant: active ? 'secondary' : 'outline',
|
|
3568
|
+
disabled,
|
|
3569
|
+
},
|
|
3570
|
+
];
|
|
3571
|
+
if (active) {
|
|
3572
|
+
entries.push({ id: 'clear', ariaLabel: clearAll, size: 'icon', disabled });
|
|
3573
|
+
}
|
|
3574
|
+
return entries;
|
|
3575
|
+
}, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
3576
|
+
this.buttonsColor = computed(() => (this.hasActive() ? 'primary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
|
|
3577
|
+
this.selectedText = computed(() => this.labels().selected(this.draft.selectedCount()), ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
|
|
3578
|
+
this.tabs = computed(() => this.groups().map((group) => ({ id: group.id, label: group.label })), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
3579
|
+
effect(() => {
|
|
3580
|
+
if (this.open()) {
|
|
3581
|
+
untracked(() => this.draft.reset());
|
|
3582
|
+
}
|
|
3583
|
+
});
|
|
3584
|
+
}
|
|
3585
|
+
onApply() {
|
|
3586
|
+
this.commit(this.draft.snapshot());
|
|
3587
|
+
}
|
|
3588
|
+
onButtonClicked({ id, event }) {
|
|
3589
|
+
if (id === 'clear') {
|
|
3590
|
+
event.stopPropagation();
|
|
3591
|
+
event.preventDefault();
|
|
3592
|
+
this.commit({});
|
|
3593
|
+
return;
|
|
3594
|
+
}
|
|
3595
|
+
if (this.isMobile()) {
|
|
3596
|
+
this.open.set(true);
|
|
3597
|
+
}
|
|
3598
|
+
}
|
|
3599
|
+
onOptionChange(group, value, checked) {
|
|
3600
|
+
this.draft.toggle(group, value, checked);
|
|
3601
|
+
}
|
|
3602
|
+
selectGroup(groupId) {
|
|
3603
|
+
this._activeGroupId.set(groupId);
|
|
3604
|
+
}
|
|
3605
|
+
commit(selection) {
|
|
3606
|
+
this.selection.set(selection);
|
|
3607
|
+
this.open.set(false);
|
|
3608
|
+
}
|
|
3609
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, providers: [provideIcons({ lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <li>\n <label\n class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n [for]=\"`${group.id}-option-${option.value}`\"\n >\n <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n <yuw-checkbox\n [inputId]=\"`${group.id}-option-${option.value}`\"\n [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n [disabled]=\"option.disabled ?? false\"\n [ariaLabel]=\"option.label\"\n (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n />\n </label>\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #commitRow>\n @if (selectedText(); as text) {\n <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n }\n\n <div class=\"flex justify-end gap-2 pt-3\">\n <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n {{ labels().clear }}\n </yuw-button>\n\n <yuw-button (clicked)=\"onApply()\">\n {{ labels().apply }}\n </yuw-button>\n </div>\n</ng-template>\n\n@if (isMobile()) {\n <yuw-button-group\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"labels().title\"\n [closeLabel]=\"labels().close\"\n [(open)]=\"open\"\n >\n <div class=\"flex min-h-0 flex-col gap-3\">\n <yuw-tabs\n class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n [tabs]=\"tabs()\"\n [activeTab]=\"activeGroup()?.id ?? ''\"\n (activeTabChange)=\"selectGroup($event)\"\n >\n @for (group of groups(); track group.id) {\n <ng-template [yuwTabContent]=\"group.id\">\n <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n {{ group.label }}\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"primary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </span>\n </ng-template>\n\n <ng-template [yuwTabPanel]=\"group.id\">\n <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n </div>\n </ng-template>\n }\n </yuw-tabs>\n\n <div class=\"pb-3\">\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n </div>\n </yuw-sheet>\n} @else {\n <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n <yuw-button-group\n yuwPopoverTrigger\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <div class=\"flex min-w-0\">\n <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n @for (group of groups(); track group.id) {\n <li>\n <button\n type=\"button\"\n class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n (click)=\"selectGroup(group.id)\"\n >\n <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"primary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </button>\n </li>\n }\n </ul>\n\n @if (activeGroup(); as group) {\n <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n }\n </div>\n </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "required", "secondary", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3611
|
+
}
|
|
3612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
|
|
3613
|
+
type: Component,
|
|
3614
|
+
args: [{ selector: 'yuw-list-toolbar-filters', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3615
|
+
NgTemplateOutlet,
|
|
3616
|
+
NgIcon,
|
|
3617
|
+
YuwBadgeComponent,
|
|
3618
|
+
YuwButtonComponent,
|
|
3619
|
+
YuwButtonGroupComponent,
|
|
3620
|
+
YuwButtonGroupContentDirective,
|
|
3621
|
+
YuwCheckboxComponent,
|
|
3622
|
+
YuwPopoverComponent,
|
|
3623
|
+
YuwSheetComponent,
|
|
3624
|
+
YuwTabContentDirective,
|
|
3625
|
+
YuwTabPanelDirective,
|
|
3626
|
+
YuwTabsComponent,
|
|
3627
|
+
], providers: [provideIcons({ lucideX })], template: "<ng-template #options let-group>\n <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <li>\n <label\n class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n [for]=\"`${group.id}-option-${option.value}`\"\n >\n <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n <yuw-checkbox\n [inputId]=\"`${group.id}-option-${option.value}`\"\n [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n [disabled]=\"option.disabled ?? false\"\n [ariaLabel]=\"option.label\"\n (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n />\n </label>\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #commitRow>\n @if (selectedText(); as text) {\n <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n }\n\n <div class=\"flex justify-end gap-2 pt-3\">\n <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n {{ labels().clear }}\n </yuw-button>\n\n <yuw-button (clicked)=\"onApply()\">\n {{ labels().apply }}\n </yuw-button>\n </div>\n</ng-template>\n\n@if (isMobile()) {\n <yuw-button-group\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"labels().title\"\n [closeLabel]=\"labels().close\"\n [(open)]=\"open\"\n >\n <div class=\"flex min-h-0 flex-col gap-3\">\n <yuw-tabs\n class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n [tabs]=\"tabs()\"\n [activeTab]=\"activeGroup()?.id ?? ''\"\n (activeTabChange)=\"selectGroup($event)\"\n >\n @for (group of groups(); track group.id) {\n <ng-template [yuwTabContent]=\"group.id\">\n <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n {{ group.label }}\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"primary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </span>\n </ng-template>\n\n <ng-template [yuwTabPanel]=\"group.id\">\n <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n </div>\n </ng-template>\n }\n </yuw-tabs>\n\n <div class=\"pb-3\">\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n </div>\n </yuw-sheet>\n} @else {\n <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n <yuw-button-group\n yuwPopoverTrigger\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <div class=\"flex min-w-0\">\n <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n @for (group of groups(); track group.id) {\n <li>\n <button\n type=\"button\"\n class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n (click)=\"selectGroup(group.id)\"\n >\n <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"primary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </button>\n </li>\n }\n </ul>\n\n @if (activeGroup(); as group) {\n <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n }\n </div>\n </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
|
|
3628
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }] } });
|
|
3629
|
+
|
|
3630
|
+
/**
|
|
3631
|
+
* Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
|
|
3632
|
+
* trailing one, and projected content after them.
|
|
3633
|
+
*
|
|
3634
|
+
* Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
|
|
3635
|
+
* `showExport`, `hideableColumns`. `labels` holds every text and the consumer translates it;
|
|
3636
|
+
* `idleColor` is the filter trigger tone while nothing is applied.
|
|
3637
|
+
*/
|
|
3638
|
+
class YuwListToolbarComponent {
|
|
3639
|
+
constructor() {
|
|
3640
|
+
this.filterGroups = input(...(ngDevMode ? [undefined, { debugName: "filterGroups" }] : /* istanbul ignore next */ []));
|
|
3641
|
+
this.filtersDisabled = input(false, { ...(ngDevMode ? { debugName: "filtersDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3642
|
+
this.hideableColumns = input(...(ngDevMode ? [undefined, { debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
|
|
3643
|
+
this.idleColor = input('secondary', ...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
|
|
3644
|
+
this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
3645
|
+
this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
|
|
3646
|
+
this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
3647
|
+
this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
3648
|
+
this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3649
|
+
this.exported = output();
|
|
3650
|
+
this.hiddenColumnsChange = output();
|
|
3651
|
+
this.searched = output();
|
|
3652
|
+
this.isMobile = injectIsMobile();
|
|
3653
|
+
}
|
|
3654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", selection: "selectionChange", exported: "exported", hiddenColumnsChange: "hiddenColumnsChange", searched: "searched" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex items-center\">\n @if (filterGroups(); as groups) {\n <yuw-list-toolbar-filters\n [disabled]=\"filtersDisabled()\"\n [groups]=\"groups\"\n [idleColor]=\"idleColor()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels().filters\"\n [(selection)]=\"selection\"\n />\n }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n <yuw-list-toolbar-actions\n [hideableColumns]=\"hideableColumns()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [showExport]=\"showExport()\"\n [(search)]=\"search\"\n (exported)=\"exported.emit($event)\"\n (hiddenColumnsChange)=\"hiddenColumnsChange.emit($event)\"\n (searched)=\"searched.emit($event)\"\n />\n\n <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport"], outputs: ["searchChange", "exported", "hiddenColumnsChange", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["disabled", "groups", "idleColor", "isMobile", "labels", "selection"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3656
|
+
}
|
|
3657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, decorators: [{
|
|
3658
|
+
type: Component,
|
|
3659
|
+
args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex flex-wrap items-center justify-between gap-3' }, template: "<!-- Filters -->\n<div class=\"flex items-center\">\n @if (filterGroups(); as groups) {\n <yuw-list-toolbar-filters\n [disabled]=\"filtersDisabled()\"\n [groups]=\"groups\"\n [idleColor]=\"idleColor()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels().filters\"\n [(selection)]=\"selection\"\n />\n }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n <yuw-list-toolbar-actions\n [hideableColumns]=\"hideableColumns()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [showExport]=\"showExport()\"\n [(search)]=\"search\"\n (exported)=\"exported.emit($event)\"\n (hiddenColumnsChange)=\"hiddenColumnsChange.emit($event)\"\n (searched)=\"searched.emit($event)\"\n />\n\n <ng-content />\n</div>\n" }]
|
|
3660
|
+
}], propDecorators: { filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], hiddenColumnsChange: [{ type: i0.Output, args: ["hiddenColumnsChange"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
3661
|
+
|
|
3662
|
+
const YUW_DATATABLE_FEATURES = {
|
|
3663
|
+
columnMeta: {},
|
|
3664
|
+
columnFilteringFeature,
|
|
3665
|
+
columnVisibilityFeature,
|
|
3666
|
+
rowPaginationFeature,
|
|
3667
|
+
rowSelectionFeature,
|
|
3668
|
+
rowSortingFeature,
|
|
3669
|
+
};
|
|
3670
|
+
|
|
3671
|
+
/**
|
|
3672
|
+
* Default floor for a column that opts into `meta.wrap`, as a Tailwind `min-w-*` class.
|
|
3673
|
+
*
|
|
3674
|
+
* This is the only bound a wrapping column needs. It is what makes the responsive behaviour work:
|
|
3675
|
+
* below it the table stops shrinking the column — which would end in a column one word wide — and
|
|
3676
|
+
* the table's own width exceeds the container instead, so `YuwTableContainer`'s `overflow-x-auto`
|
|
3677
|
+
* scrolls horizontally.
|
|
3678
|
+
*
|
|
3679
|
+
* There is deliberately no maximum. A cap would make a wrapping column break onto several lines
|
|
3680
|
+
* while the table still had free space beside it, which reads as broken; letting the column take
|
|
3681
|
+
* its share of the row means text wraps only once it genuinely no longer fits.
|
|
3682
|
+
*/
|
|
3683
|
+
const YUW_DATATABLE_WRAP_MIN_WIDTH = 'min-w-48';
|
|
3684
|
+
/**
|
|
3685
|
+
* Layout classes the `<table>` needs for `meta.wrap` columns to size correctly.
|
|
3686
|
+
*
|
|
3687
|
+
* `w-full` lets the table fill its container so a wrapping column can spread into the free space
|
|
3688
|
+
* instead of wrapping early, and `min-w-max` keeps the table at least as wide as its content
|
|
2873
3689
|
* demands — which is what lets a wrapping column's floor push the table past the container and
|
|
2874
3690
|
* hand the overflow to the scroll container. Applied unconditionally: for a table with no wrapping
|
|
2875
3691
|
* column both halves resolve to the width it already had.
|
|
@@ -3219,7 +4035,7 @@ class YuwDatatableRowSelect {
|
|
|
3219
4035
|
(checkedChange)="toggle()"
|
|
3220
4036
|
(click)="$event.stopPropagation()"
|
|
3221
4037
|
/>
|
|
3222
|
-
`, isInline: true, dependencies: [{ kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "
|
|
4038
|
+
`, isInline: true, dependencies: [{ kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "required", "secondary", "checked"], outputs: ["indeterminateChange", "checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3223
4039
|
}
|
|
3224
4040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatableRowSelect, decorators: [{
|
|
3225
4041
|
type: Component,
|
|
@@ -3240,6 +4056,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3240
4056
|
}]
|
|
3241
4057
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "onToggle", required: false }] }] } });
|
|
3242
4058
|
|
|
4059
|
+
/**
|
|
4060
|
+
* Gear button cell that runs `onEdit`, an input because `flexRenderComponent` does not subscribe
|
|
4061
|
+
* outputs. The host stops the click so a clickable row does not fire twice.
|
|
4062
|
+
*/
|
|
4063
|
+
class YuwActionsCellComponent {
|
|
4064
|
+
constructor() {
|
|
4065
|
+
this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
4066
|
+
this.onEdit = input(() => undefined, ...(ngDevMode ? [{ debugName: "onEdit" }] : /* istanbul ignore next */ []));
|
|
4067
|
+
}
|
|
4068
|
+
edit() {
|
|
4069
|
+
this.onEdit()();
|
|
4070
|
+
}
|
|
4071
|
+
onHostClick(event) {
|
|
4072
|
+
event.stopPropagation();
|
|
4073
|
+
}
|
|
4074
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwActionsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwActionsCellComponent, isStandalone: true, selector: "yuw-actions-cell", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, onEdit: { classPropertyName: "onEdit", publicName: "onEdit", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" } }, providers: [provideIcons({ lucideSettings })], ngImport: i0, template: "<yuw-button variant=\"ghost\" size=\"icon\" [ariaLabel]=\"label()\" (clicked)=\"edit()\">\n <ng-icon name=\"lucideSettings\" size=\"16\" />\n</yuw-button>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4076
|
+
}
|
|
4077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwActionsCellComponent, decorators: [{
|
|
4078
|
+
type: Component,
|
|
4079
|
+
args: [{ selector: 'yuw-actions-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent], providers: [provideIcons({ lucideSettings })], host: { '(click)': 'onHostClick($event)' }, template: "<yuw-button variant=\"ghost\" size=\"icon\" [ariaLabel]=\"label()\" (clicked)=\"edit()\">\n <ng-icon name=\"lucideSettings\" size=\"16\" />\n</yuw-button>\n" }]
|
|
4080
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], onEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "onEdit", required: false }] }] } });
|
|
4081
|
+
|
|
4082
|
+
/** Headerless `actions` column; `label` is the button's accessible name, already translated. */
|
|
4083
|
+
function buildYuwActionsColumn(label, onEdit, cellClass) {
|
|
4084
|
+
return {
|
|
4085
|
+
id: 'actions',
|
|
4086
|
+
header: '',
|
|
4087
|
+
enableSorting: false,
|
|
4088
|
+
meta: cellClass ? { align: 'end', cellClass } : { align: 'end' },
|
|
4089
|
+
cell: ({ row }) => flexRenderComponent(YuwActionsCellComponent, {
|
|
4090
|
+
inputs: { label, onEdit: () => onEdit(row.original) },
|
|
4091
|
+
}),
|
|
4092
|
+
};
|
|
4093
|
+
}
|
|
4094
|
+
|
|
3243
4095
|
/**
|
|
3244
4096
|
* Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
|
|
3245
4097
|
*
|
|
@@ -3278,7 +4130,7 @@ class YuwAvatarComponent {
|
|
|
3278
4130
|
this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
|
|
3279
4131
|
}
|
|
3280
4132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3281
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n @if (src) {\n <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n }\n <span hlmAvatarFallback>{{ fallback }}</span>\n\n @if (showBadge) {\n <span hlmAvatarBadge>\n <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n </span>\n }\n </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n <div hlmAvatarGroup>\n @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n <ng-container\n [ngTemplateOutlet]=\"avatarBox\"\n [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n />\n }\n\n @if (groupCount()) {\n <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n }\n </div>\n} @else {\n <ng-container\n [ngTemplateOutlet]=\"avatarBox\"\n [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$
|
|
4133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n @if (src) {\n <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n }\n <span hlmAvatarFallback>{{ fallback }}</span>\n\n @if (showBadge) {\n <span hlmAvatarBadge>\n <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n </span>\n }\n </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n <div hlmAvatarGroup>\n @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n <ng-container\n [ngTemplateOutlet]=\"avatarBox\"\n [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n />\n }\n\n @if (groupCount()) {\n <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n }\n </div>\n} @else {\n <ng-container\n [ngTemplateOutlet]=\"avatarBox\"\n [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$i.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$i.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$i.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$i.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$i.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$i.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3282
4134
|
}
|
|
3283
4135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, decorators: [{
|
|
3284
4136
|
type: Component,
|
|
@@ -3305,7 +4157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3305
4157
|
*/
|
|
3306
4158
|
class YuwItemDirective {
|
|
3307
4159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3308
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDirective, isStandalone: true, selector: "[yuwItem], yuw-item", hostDirectives: [{ directive: i1$
|
|
4160
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDirective, isStandalone: true, selector: "[yuwItem], yuw-item", hostDirectives: [{ directive: i1$j.HlmItem, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0 }); }
|
|
3309
4161
|
}
|
|
3310
4162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDirective, decorators: [{
|
|
3311
4163
|
type: Directive,
|
|
@@ -3317,7 +4169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3317
4169
|
/** Header slot directive for an item container. */
|
|
3318
4170
|
class YuwItemHeaderDirective {
|
|
3319
4171
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3320
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemHeaderDirective, isStandalone: true, selector: "[yuwItemHeader], yuw-item-header", hostDirectives: [{ directive: i1$
|
|
4172
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemHeaderDirective, isStandalone: true, selector: "[yuwItemHeader], yuw-item-header", hostDirectives: [{ directive: i1$j.HlmItemHeader }], ngImport: i0 }); }
|
|
3321
4173
|
}
|
|
3322
4174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemHeaderDirective, decorators: [{
|
|
3323
4175
|
type: Directive,
|
|
@@ -3329,7 +4181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3329
4181
|
/** Leading media slot directive (for icons, avatars, or images) at the start of an item. Supports `variant` (`'default'`, `'icon'`, `'image'`). */
|
|
3330
4182
|
class YuwItemMediaDirective {
|
|
3331
4183
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3332
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemMediaDirective, isStandalone: true, selector: "[yuwItemMedia], yuw-item-media", hostDirectives: [{ directive: i1$
|
|
4184
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemMediaDirective, isStandalone: true, selector: "[yuwItemMedia], yuw-item-media", hostDirectives: [{ directive: i1$j.HlmItemMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
|
|
3333
4185
|
}
|
|
3334
4186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemMediaDirective, decorators: [{
|
|
3335
4187
|
type: Directive,
|
|
@@ -3341,7 +4193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3341
4193
|
/** Main text content container directive for an item. */
|
|
3342
4194
|
class YuwItemContentDirective {
|
|
3343
4195
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3344
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemContentDirective, isStandalone: true, selector: "[yuwItemContent], yuw-item-content", hostDirectives: [{ directive: i1$
|
|
4196
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemContentDirective, isStandalone: true, selector: "[yuwItemContent], yuw-item-content", hostDirectives: [{ directive: i1$j.HlmItemContent }], ngImport: i0 }); }
|
|
3345
4197
|
}
|
|
3346
4198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemContentDirective, decorators: [{
|
|
3347
4199
|
type: Directive,
|
|
@@ -3353,7 +4205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3353
4205
|
/** Title heading directive for an item. */
|
|
3354
4206
|
class YuwItemTitleDirective {
|
|
3355
4207
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3356
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemTitleDirective, isStandalone: true, selector: "[yuwItemTitle], yuw-item-title", hostDirectives: [{ directive: i1$
|
|
4208
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemTitleDirective, isStandalone: true, selector: "[yuwItemTitle], yuw-item-title", hostDirectives: [{ directive: i1$j.HlmItemTitle }], ngImport: i0 }); }
|
|
3357
4209
|
}
|
|
3358
4210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemTitleDirective, decorators: [{
|
|
3359
4211
|
type: Directive,
|
|
@@ -3365,7 +4217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3365
4217
|
/** Subtitle or description paragraph directive for an item. */
|
|
3366
4218
|
class YuwItemDescriptionDirective {
|
|
3367
4219
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3368
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDescriptionDirective, isStandalone: true, selector: "[yuwItemDescription], yuw-item-description", hostDirectives: [{ directive: i1$
|
|
4220
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDescriptionDirective, isStandalone: true, selector: "[yuwItemDescription], yuw-item-description", hostDirectives: [{ directive: i1$j.HlmItemDescription }], ngImport: i0 }); }
|
|
3369
4221
|
}
|
|
3370
4222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDescriptionDirective, decorators: [{
|
|
3371
4223
|
type: Directive,
|
|
@@ -3377,7 +4229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3377
4229
|
/** Trailing action controls slot directive (for buttons, switches, or menu triggers) at the end of an item. */
|
|
3378
4230
|
class YuwItemActionsDirective {
|
|
3379
4231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3380
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemActionsDirective, isStandalone: true, selector: "[yuwItemActions], yuw-item-actions", hostDirectives: [{ directive: i1$
|
|
4232
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemActionsDirective, isStandalone: true, selector: "[yuwItemActions], yuw-item-actions", hostDirectives: [{ directive: i1$j.HlmItemActions }], ngImport: i0 }); }
|
|
3381
4233
|
}
|
|
3382
4234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemActionsDirective, decorators: [{
|
|
3383
4235
|
type: Directive,
|
|
@@ -3389,286 +4241,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3389
4241
|
/** Footer slot directive for an item. */
|
|
3390
4242
|
class YuwItemFooterDirective {
|
|
3391
4243
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3392
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemFooterDirective, isStandalone: true, selector: "[yuwItemFooter], yuw-item-footer", hostDirectives: [{ directive: i1$
|
|
3393
|
-
}
|
|
3394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemFooterDirective, decorators: [{
|
|
3395
|
-
type: Directive,
|
|
3396
|
-
args: [{
|
|
3397
|
-
selector: '[yuwItemFooter], yuw-item-footer',
|
|
3398
|
-
hostDirectives: [HlmItemFooter],
|
|
3399
|
-
}]
|
|
3400
|
-
}] });
|
|
3401
|
-
/** Container directive for grouping multiple item rows together into a list card or bordered group. */
|
|
3402
|
-
class YuwItemGroupDirective {
|
|
3403
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3404
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemGroupDirective, isStandalone: true, selector: "[yuwItemGroup], yuw-item-group", hostDirectives: [{ directive: i1$e.HlmItemGroup }], ngImport: i0 }); }
|
|
3405
|
-
}
|
|
3406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemGroupDirective, decorators: [{
|
|
3407
|
-
type: Directive,
|
|
3408
|
-
args: [{
|
|
3409
|
-
selector: '[yuwItemGroup], yuw-item-group',
|
|
3410
|
-
hostDirectives: [HlmItemGroup],
|
|
3411
|
-
}]
|
|
3412
|
-
}] });
|
|
3413
|
-
/**
|
|
3414
|
-
* Visual separator line between items inside a group. Accepts `orientation` (`'horizontal'` or
|
|
3415
|
-
* `'vertical'`), reaching the underlying `BrnSeparator`, which owns the `role`,
|
|
3416
|
-
* `aria-orientation` and `data-orientation` attributes. Extends `HlmItemSeparator` (instead of
|
|
3417
|
-
* composing it via `hostDirectives`) because `orientation` is re-exposed by the helm from
|
|
3418
|
-
* `BrnSeparator` through its own `hostDirectives`, and host-directive forwarding is not
|
|
3419
|
-
* transitive (NG2017).
|
|
3420
|
-
*/
|
|
3421
|
-
class YuwItemSeparatorDirective extends HlmItemSeparator {
|
|
3422
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3423
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemSeparatorDirective, isStandalone: true, selector: "[yuwItemSeparator], yuw-item-separator", usesInheritance: true, ngImport: i0 }); }
|
|
3424
|
-
}
|
|
3425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemSeparatorDirective, decorators: [{
|
|
3426
|
-
type: Directive,
|
|
3427
|
-
args: [{
|
|
3428
|
-
selector: '[yuwItemSeparator], yuw-item-separator',
|
|
3429
|
-
}]
|
|
3430
|
-
}] });
|
|
3431
|
-
/** Every item part, for a consumer's `imports`. */
|
|
3432
|
-
const YuwItemImports = [
|
|
3433
|
-
YuwItemDirective,
|
|
3434
|
-
YuwItemHeaderDirective,
|
|
3435
|
-
YuwItemMediaDirective,
|
|
3436
|
-
YuwItemContentDirective,
|
|
3437
|
-
YuwItemTitleDirective,
|
|
3438
|
-
YuwItemDescriptionDirective,
|
|
3439
|
-
YuwItemActionsDirective,
|
|
3440
|
-
YuwItemFooterDirective,
|
|
3441
|
-
YuwItemGroupDirective,
|
|
3442
|
-
YuwItemSeparatorDirective,
|
|
3443
|
-
];
|
|
3444
|
-
|
|
3445
|
-
/**
|
|
3446
|
-
* Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
|
|
3447
|
-
*
|
|
3448
|
-
* Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
|
|
3449
|
-
* directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
|
|
3450
|
-
* so a trigger can override which edge the sheet appears from.
|
|
3451
|
-
*/
|
|
3452
|
-
class YuwSheetTriggerDirective {
|
|
3453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3454
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$f.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
|
|
3455
|
-
}
|
|
3456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
|
|
3457
|
-
type: Directive,
|
|
3458
|
-
args: [{
|
|
3459
|
-
selector: 'yuw-button[yuwSheetTriggerButton]',
|
|
3460
|
-
hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
|
|
3461
|
-
host: { 'data-slot': 'sheet-trigger' },
|
|
3462
|
-
}]
|
|
3463
|
-
}] });
|
|
3464
|
-
/** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
|
|
3465
|
-
class YuwSheetCloseDirective {
|
|
3466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3467
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$f.BrnSheetClose }], ngImport: i0 }); }
|
|
3468
|
-
}
|
|
3469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
|
|
3470
|
-
type: Directive,
|
|
3471
|
-
args: [{
|
|
3472
|
-
selector: 'yuw-button[yuwSheetClose]',
|
|
3473
|
-
hostDirectives: [BrnSheetClose],
|
|
3474
|
-
host: { 'data-slot': 'sheet-close' },
|
|
3475
|
-
}]
|
|
3476
|
-
}] });
|
|
3477
|
-
|
|
3478
|
-
/**
|
|
3479
|
-
* Marks an element as the sheet's footer content, projected into the footer slot.
|
|
3480
|
-
* Its presence is also what makes the footer render at all — without it the sheet
|
|
3481
|
-
* shows no empty footer strip.
|
|
3482
|
-
*/
|
|
3483
|
-
class YuwSheetFooterDirective {
|
|
3484
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3485
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
|
|
3486
|
-
}
|
|
3487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
|
|
3488
|
-
type: Directive,
|
|
3489
|
-
args: [{
|
|
3490
|
-
selector: '[yuwSheetFooter]',
|
|
3491
|
-
}]
|
|
3492
|
-
}] });
|
|
3493
|
-
|
|
3494
|
-
const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
|
|
3495
|
-
/**
|
|
3496
|
-
* Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
|
|
3497
|
-
*
|
|
3498
|
-
* Accessibility: provide either `title` or `ariaLabel` — a modal panel without an accessible name
|
|
3499
|
-
* is announced as an anonymous dialog by screen readers.
|
|
3500
|
-
*
|
|
3501
|
-
* Inputs / Models:
|
|
3502
|
-
* - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
|
|
3503
|
-
* - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
|
|
3504
|
-
* - `side`: Edge of the screen the panel slides in from (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'right'`.
|
|
3505
|
-
* - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
|
|
3506
|
-
* - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
|
|
3507
|
-
* - `ariaLabel`: Accessible name for the sheet when no visible `title` is rendered. User-facing
|
|
3508
|
-
* text the consuming app is responsible for translating.
|
|
3509
|
-
* - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
|
|
3510
|
-
* renders and screen readers read this label; when absent there is no close button. User-facing
|
|
3511
|
-
* text the consuming app is responsible for translating.
|
|
3512
|
-
* - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
|
|
3513
|
-
* They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
|
|
3514
|
-
* plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
|
|
3515
|
-
* the class has to be `data-[side=left]:w-64`, not `w-64`.
|
|
3516
|
-
* - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
|
|
3517
|
-
* viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
|
|
3518
|
-
* the overlay too, and the helm's own class always wins the `class` input it exposes.
|
|
3519
|
-
* - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
|
|
3520
|
-
* strategy; pass `'reposition'` for a panel that should leave the page scrollable.
|
|
3521
|
-
* - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
|
|
3522
|
-
* modal; set `false` when content outside stays visible and usable, so the claim stays honest.
|
|
3523
|
-
* - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it, backdrop
|
|
3524
|
-
* clicks included. Default is `true`, matching the brain from `@spartan-ng/brain` 1.3.4 on; pass
|
|
3525
|
-
* `false` for a panel that must be dismissed deliberately.
|
|
3526
|
-
* - `triggerVariant`: Button style variant for the trigger button.
|
|
3527
|
-
* - `triggerSize`: Button size for the trigger button.
|
|
3528
|
-
*
|
|
3529
|
-
* Usage:
|
|
3530
|
-
* ```html
|
|
3531
|
-
* <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
|
|
3532
|
-
* <ng-container yuwSheetTrigger>Edit Profile</ng-container>
|
|
3533
|
-
*
|
|
3534
|
-
* <p>Sheet form content goes here.</p>
|
|
3535
|
-
*
|
|
3536
|
-
* <div yuwSheetFooter>
|
|
3537
|
-
* <yuw-button (clicked)="save()">Save Changes</yuw-button>
|
|
3538
|
-
* </div>
|
|
3539
|
-
* </yuw-sheet>
|
|
3540
|
-
* ```
|
|
3541
|
-
*/
|
|
3542
|
-
class YuwSheetComponent {
|
|
3543
|
-
constructor() {
|
|
3544
|
-
this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
3545
|
-
this.sheet = viewChild.required(HlmSheet);
|
|
3546
|
-
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3547
|
-
this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3548
|
-
this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
3549
|
-
this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3550
|
-
this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
3551
|
-
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3552
|
-
this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
|
|
3553
|
-
this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
3554
|
-
this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
|
|
3555
|
-
this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3556
|
-
this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
3557
|
-
this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3558
|
-
this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
|
|
3559
|
-
this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
|
|
3560
|
-
this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
|
|
3561
|
-
effect(() => {
|
|
3562
|
-
const overlayClass = this.overlayClass();
|
|
3563
|
-
if (overlayClass === undefined)
|
|
3564
|
-
return;
|
|
3565
|
-
this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
|
|
3566
|
-
});
|
|
3567
|
-
}
|
|
3568
|
-
onStateChanged(state) {
|
|
3569
|
-
this.open.set(state === 'open');
|
|
3570
|
-
}
|
|
3571
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n [side]=\"side()\"\n [state]=\"_sheetState()\"\n [aria-label]=\"ariaLabel()\"\n [aria-modal]=\"ariaModal()\"\n [scrollStrategy]=\"scrollStrategy()\"\n [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n (stateChanged)=\"onStateChanged($event)\"\n>\n @if (showTrigger()) {\n <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwSheetTrigger]\" />\n </yuw-button>\n }\n\n <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n @if (title() || description()) {\n <div hlmSheetHeader>\n @if (title()) {\n <h2 hlmSheetTitle>{{ title() }}</h2>\n }\n @if (description()) {\n <p hlmSheetDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <div class=\"flex-1 overflow-y-auto px-4\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div hlmSheetFooter>\n <ng-content select=\"[yuwSheetFooter]\" />\n </div>\n }\n\n @if (closeLabel()) {\n <div class=\"absolute inset-e-3 top-3\">\n <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4244
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemFooterDirective, isStandalone: true, selector: "[yuwItemFooter], yuw-item-footer", hostDirectives: [{ directive: i1$j.HlmItemFooter }], ngImport: i0 }); }
|
|
3573
4245
|
}
|
|
3574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type:
|
|
3575
|
-
type:
|
|
3576
|
-
args: [{
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
* The helm trigger directive's selector only matches a native `button`, so composing the brain
|
|
3586
|
-
* directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
|
|
3587
|
-
* Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
|
|
3588
|
-
* bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
|
|
3589
|
-
* anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
|
|
3590
|
-
* host has no rect for the overlay to position from.
|
|
3591
|
-
*
|
|
3592
|
-
* `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
|
|
3593
|
-
*/
|
|
3594
|
-
class YuwPopoverTriggerDirective {
|
|
3595
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3596
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$h.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
|
|
4246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemFooterDirective, decorators: [{
|
|
4247
|
+
type: Directive,
|
|
4248
|
+
args: [{
|
|
4249
|
+
selector: '[yuwItemFooter], yuw-item-footer',
|
|
4250
|
+
hostDirectives: [HlmItemFooter],
|
|
4251
|
+
}]
|
|
4252
|
+
}] });
|
|
4253
|
+
/** Container directive for grouping multiple item rows together into a list card or bordered group. */
|
|
4254
|
+
class YuwItemGroupDirective {
|
|
4255
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4256
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemGroupDirective, isStandalone: true, selector: "[yuwItemGroup], yuw-item-group", hostDirectives: [{ directive: i1$j.HlmItemGroup }], ngImport: i0 }); }
|
|
3597
4257
|
}
|
|
3598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type:
|
|
4258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemGroupDirective, decorators: [{
|
|
3599
4259
|
type: Directive,
|
|
3600
4260
|
args: [{
|
|
3601
|
-
selector: '
|
|
3602
|
-
hostDirectives: [
|
|
3603
|
-
{ directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
|
|
3604
|
-
],
|
|
3605
|
-
host: { 'data-slot': 'popover-trigger' },
|
|
4261
|
+
selector: '[yuwItemGroup], yuw-item-group',
|
|
4262
|
+
hostDirectives: [HlmItemGroup],
|
|
3606
4263
|
}]
|
|
3607
4264
|
}] });
|
|
3608
|
-
|
|
3609
4265
|
/**
|
|
3610
|
-
*
|
|
3611
|
-
*
|
|
3612
|
-
*
|
|
3613
|
-
*
|
|
3614
|
-
*
|
|
3615
|
-
*
|
|
3616
|
-
* - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
|
|
3617
|
-
* - `sideOffset`: Pixel offset for X sides. Positive px for right, negative for left side.
|
|
3618
|
-
* - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
|
|
3619
|
-
* - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
|
|
3620
|
-
* - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
|
|
3621
|
-
* over the library defaults via `twMerge`.
|
|
3622
|
-
* - `triggerVariant`: Button style variant for the trigger button.
|
|
3623
|
-
* - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
|
|
3624
|
-
* `'secondary'`.
|
|
3625
|
-
* - `triggerSize`: Button size for the trigger button.
|
|
3626
|
-
* - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
|
|
3627
|
-
* open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
|
|
3628
|
-
* - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
|
|
3629
|
-
* variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
|
|
3630
|
-
*
|
|
3631
|
-
* The trigger is a `<yuw-button>`; `YuwPopoverTriggerDirective` composes the brain trigger onto it,
|
|
3632
|
-
* so the popover reuses our button component instead of applying `[hlmBtn]` directly.
|
|
3633
|
-
*
|
|
3634
|
-
* Usage:
|
|
3635
|
-
* ```html
|
|
3636
|
-
* <yuw-popover [(open)]="isOpen" title="Notifications" description="You're all caught up.">
|
|
3637
|
-
* <ng-container yuwPopoverTrigger>View Notifications</ng-container>
|
|
3638
|
-
*
|
|
3639
|
-
* <p>Popover content body goes here.</p>
|
|
3640
|
-
* </yuw-popover>
|
|
3641
|
-
* ```
|
|
4266
|
+
* Visual separator line between items inside a group. Accepts `orientation` (`'horizontal'` or
|
|
4267
|
+
* `'vertical'`), reaching the underlying `BrnSeparator`, which owns the `role`,
|
|
4268
|
+
* `aria-orientation` and `data-orientation` attributes. Extends `HlmItemSeparator` (instead of
|
|
4269
|
+
* composing it via `hostDirectives`) because `orientation` is re-exposed by the helm from
|
|
4270
|
+
* `BrnSeparator` through its own `hostDirectives`, and host-directive forwarding is not
|
|
4271
|
+
* transitive (NG2017).
|
|
3642
4272
|
*/
|
|
3643
|
-
class
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
3647
|
-
this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
|
|
3648
|
-
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3649
|
-
this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
3650
|
-
this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3651
|
-
this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
|
|
3652
|
-
this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3653
|
-
this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
|
|
3654
|
-
this.triggerColor = input('secondary', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
|
|
3655
|
-
this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
|
|
3656
|
-
this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3657
|
-
this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
|
|
3658
|
-
this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
|
|
3659
|
-
}
|
|
3660
|
-
onOpenChange(state) {
|
|
3661
|
-
this.open.set(state === 'open');
|
|
3662
|
-
}
|
|
3663
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n hlmPopover\n [state]=\"_popoverState()\"\n [align]=\"align()\"\n [sideOffset]=\"sideOffset()\"\n [offsetX]=\"offsetX()\"\n (stateChanged)=\"onOpenChange($event)\"\n>\n @if (showTrigger()) {\n <yuw-button\n yuwPopoverTriggerButton\n [color]=\"triggerColor()\"\n [variant]=\"triggerVariant()\"\n [size]=\"triggerSize()\"\n [transparent]=\"triggerTransparent()\"\n [class]=\"triggerClass()\"\n >\n <ng-content select=\"[yuwPopoverTrigger]\" />\n </yuw-button>\n }\n\n <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n @if (title() || description()) {\n <div hlmPopoverHeader>\n @if (title()) {\n <p hlmPopoverTitle>{{ title() }}</p>\n }\n @if (description()) {\n <p hlmPopoverDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <ng-content />\n </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$i.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$i.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$i.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$i.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$i.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$i.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4273
|
+
class YuwItemSeparatorDirective extends HlmItemSeparator {
|
|
4274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4275
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemSeparatorDirective, isStandalone: true, selector: "[yuwItemSeparator], yuw-item-separator", usesInheritance: true, ngImport: i0 }); }
|
|
3665
4276
|
}
|
|
3666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type:
|
|
3667
|
-
type:
|
|
3668
|
-
args: [{
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
}]
|
|
4277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemSeparatorDirective, decorators: [{
|
|
4278
|
+
type: Directive,
|
|
4279
|
+
args: [{
|
|
4280
|
+
selector: '[yuwItemSeparator], yuw-item-separator',
|
|
4281
|
+
}]
|
|
4282
|
+
}] });
|
|
4283
|
+
/** Every item part, for a consumer's `imports`. */
|
|
4284
|
+
const YuwItemImports = [
|
|
4285
|
+
YuwItemDirective,
|
|
4286
|
+
YuwItemHeaderDirective,
|
|
4287
|
+
YuwItemMediaDirective,
|
|
4288
|
+
YuwItemContentDirective,
|
|
4289
|
+
YuwItemTitleDirective,
|
|
4290
|
+
YuwItemDescriptionDirective,
|
|
4291
|
+
YuwItemActionsDirective,
|
|
4292
|
+
YuwItemFooterDirective,
|
|
4293
|
+
YuwItemGroupDirective,
|
|
4294
|
+
YuwItemSeparatorDirective,
|
|
4295
|
+
];
|
|
3672
4296
|
|
|
3673
4297
|
/**
|
|
3674
4298
|
* Tooltip directive applied directly to the element that should show a hint on hover/focus.
|
|
@@ -3697,7 +4321,7 @@ class YuwTooltipDirective {
|
|
|
3697
4321
|
tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
|
|
3698
4322
|
arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
|
|
3699
4323
|
}),
|
|
3700
|
-
], hostDirectives: [{ directive: i1$
|
|
4324
|
+
], hostDirectives: [{ directive: i1$k.BrnTooltip, inputs: ["brnTooltip", "yuwTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }], ngImport: i0 }); }
|
|
3701
4325
|
}
|
|
3702
4326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTooltipDirective, decorators: [{
|
|
3703
4327
|
type: Directive,
|
|
@@ -3917,7 +4541,7 @@ const YuwAlertImports = [
|
|
|
3917
4541
|
*/
|
|
3918
4542
|
class YuwDialogTriggerDirective {
|
|
3919
4543
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3920
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwDialogTriggerDirective, isStandalone: true, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]", host: { attributes: { "data-slot": "dialog-trigger" } }, hostDirectives: [{ directive: i1$
|
|
4544
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwDialogTriggerDirective, isStandalone: true, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]", host: { attributes: { "data-slot": "dialog-trigger" } }, hostDirectives: [{ directive: i1$l.BrnDialogTrigger, inputs: ["id", "id", "brnDialogTriggerFor", "yuwDialogTriggerFor", "type", "type"] }], ngImport: i0 }); }
|
|
3921
4545
|
}
|
|
3922
4546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogTriggerDirective, decorators: [{
|
|
3923
4547
|
type: Directive,
|
|
@@ -3930,7 +4554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3930
4554
|
/** Closes the surrounding `<yuw-dialog>` when the host `<yuw-button>` is activated. */
|
|
3931
4555
|
class YuwDialogCloseDirective {
|
|
3932
4556
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3933
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwDialogCloseDirective, isStandalone: true, selector: "yuw-button[yuwDialogClose]", host: { attributes: { "data-slot": "dialog-close" } }, hostDirectives: [{ directive: i1$
|
|
4557
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwDialogCloseDirective, isStandalone: true, selector: "yuw-button[yuwDialogClose]", host: { attributes: { "data-slot": "dialog-close" } }, hostDirectives: [{ directive: i1$l.BrnDialogClose }], ngImport: i0 }); }
|
|
3934
4558
|
}
|
|
3935
4559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogCloseDirective, decorators: [{
|
|
3936
4560
|
type: Directive,
|
|
@@ -4017,7 +4641,7 @@ class YuwDialogComponent {
|
|
|
4017
4641
|
this.open.set(state === 'open');
|
|
4018
4642
|
}
|
|
4019
4643
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwDialogTriggerButton [color]=\"triggerColor()\" [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwDialogTrigger]\" />\n </yuw-button>\n }\n\n <hlm-dialog-content\n *hlmDialogPortal\n [showCloseButton]=\"false\"\n class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n [class]=\"panelClass()\"\n >\n @if (title() || description()) {\n <div hlmDialogHeader>\n @if (title()) {\n <h2 hlmDialogTitle>{{ title() }}</h2>\n }\n @if (description()) {\n <p hlmDialogDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <div class=\"flex-1 overflow-y-auto\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div hlmDialogFooter>\n <ng-content select=\"[yuwDialogFooter]\" />\n </div>\n }\n\n @if (closeLabel()) {\n <div class=\"absolute inset-e-2 top-1.5\">\n <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$
|
|
4644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwDialogTriggerButton [color]=\"triggerColor()\" [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwDialogTrigger]\" />\n </yuw-button>\n }\n\n <hlm-dialog-content\n *hlmDialogPortal\n [showCloseButton]=\"false\"\n class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n [class]=\"panelClass()\"\n >\n @if (title() || description()) {\n <div hlmDialogHeader>\n @if (title()) {\n <h2 hlmDialogTitle>{{ title() }}</h2>\n }\n @if (description()) {\n <p hlmDialogDescription>{{ description() }}</p>\n }\n </div>\n }\n\n <div class=\"flex-1 overflow-y-auto\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div hlmDialogFooter>\n <ng-content select=\"[yuwDialogFooter]\" />\n </div>\n }\n\n @if (closeLabel()) {\n <div class=\"absolute inset-e-2 top-1.5\">\n <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$m.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$m.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$m.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$m.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$m.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$m.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$m.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwDialogTriggerDirective, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]" }, { kind: "directive", type: YuwDialogCloseDirective, selector: "yuw-button[yuwDialogClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4021
4645
|
}
|
|
4022
4646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogComponent, decorators: [{
|
|
4023
4647
|
type: Component,
|
|
@@ -4035,7 +4659,7 @@ const YuwDialogImports = [YuwDialogComponent, YuwDialogFooterDirective];
|
|
|
4035
4659
|
*/
|
|
4036
4660
|
class YuwAlertDialogTriggerDirective {
|
|
4037
4661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAlertDialogTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4038
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAlertDialogTriggerDirective, isStandalone: true, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]", host: { attributes: { "data-slot": "alert-dialog-trigger" } }, hostDirectives: [{ directive: i1$
|
|
4662
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAlertDialogTriggerDirective, isStandalone: true, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]", host: { attributes: { "data-slot": "alert-dialog-trigger" } }, hostDirectives: [{ directive: i1$n.BrnAlertDialogTrigger, inputs: ["id", "id", "brnAlertDialogTriggerFor", "yuwAlertDialogTriggerFor", "type", "type"] }], ngImport: i0 }); }
|
|
4039
4663
|
}
|
|
4040
4664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAlertDialogTriggerDirective, decorators: [{
|
|
4041
4665
|
type: Directive,
|
|
@@ -4124,7 +4748,7 @@ class YuwAlertDialogComponent {
|
|
|
4124
4748
|
this.open.set(state === 'open');
|
|
4125
4749
|
}
|
|
4126
4750
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", cancelled: "cancelled", confirmed: "confirmed" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwAlertDialogTrigger]\" />\n </yuw-button>\n }\n\n <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n <div hlmAlertDialogHeader>\n @if (hasMedia()) {\n <div hlmAlertDialogMedia>\n <ng-content select=\"[yuwAlertDialogMedia]\" />\n </div>\n }\n\n <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n @if (description()) {\n <p hlmAlertDialogDescription>{{ description() }}</p>\n }\n </div>\n\n <ng-content />\n\n <div hlmAlertDialogFooter>\n <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n {{ confirmLabel() }}\n </button>\n </div>\n </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$
|
|
4751
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", cancelled: "cancelled", confirmed: "confirmed" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwAlertDialogTrigger]\" />\n </yuw-button>\n }\n\n <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n <div hlmAlertDialogHeader>\n @if (hasMedia()) {\n <div hlmAlertDialogMedia>\n <ng-content select=\"[yuwAlertDialogMedia]\" />\n </div>\n }\n\n <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n @if (description()) {\n <p hlmAlertDialogDescription>{{ description() }}</p>\n }\n </div>\n\n <ng-content />\n\n <div hlmAlertDialogFooter>\n <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n {{ confirmLabel() }}\n </button>\n </div>\n </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$o.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$o.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$o.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$o.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$o.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$o.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$o.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$o.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$o.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$o.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4128
4752
|
}
|
|
4129
4753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
|
|
4130
4754
|
type: Component,
|
|
@@ -4133,134 +4757,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
4133
4757
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwAlertDialogTrigger]\" />\n </yuw-button>\n }\n\n <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n <div hlmAlertDialogHeader>\n @if (hasMedia()) {\n <div hlmAlertDialogMedia>\n <ng-content select=\"[yuwAlertDialogMedia]\" />\n </div>\n }\n\n <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n @if (description()) {\n <p hlmAlertDialogDescription>{{ description() }}</p>\n }\n </div>\n\n <ng-content />\n\n <div hlmAlertDialogFooter>\n <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n {{ confirmLabel() }}\n </button>\n </div>\n </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
|
|
4134
4758
|
}], propDecorators: { hasMedia: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDialogMediaDirective), { isSignal: true }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: true }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: true }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
|
|
4135
4759
|
|
|
4136
|
-
/**
|
|
4137
|
-
* Size classes for `<yuw-tabs>`, applied to the `hlm-tabs-list`.
|
|
4138
|
-
*
|
|
4139
|
-
* Two things scale, and both have to be written with the helm's own modifier prefixes so
|
|
4140
|
-
* tailwind-merge displaces the helm class rather than leaving it standing:
|
|
4141
|
-
*
|
|
4142
|
-
* - The list height, declared by the helm as `group-data-horizontal/tabs:h-8`. Only the horizontal
|
|
4143
|
-
* orientation has a fixed height; the vertical one is `h-fit` and is left alone.
|
|
4144
|
-
* - The triggers' horizontal padding, reached through a descendant selector. The helm's `px-1.5` is
|
|
4145
|
-
* tight enough that a taller list would look cramped, and the triggers are separate components
|
|
4146
|
-
* with no class passthrough. Their height needs nothing — `h-[calc(100%-1px)]` already tracks the
|
|
4147
|
-
* list.
|
|
4148
|
-
*/
|
|
4149
|
-
const yuwTabsSizeVariants = cva('', {
|
|
4150
|
-
variants: {
|
|
4151
|
-
size: {
|
|
4152
|
-
default: 'group-data-horizontal/tabs:h-10 [&_[data-slot=tabs-trigger]]:px-2.5',
|
|
4153
|
-
xs: 'group-data-horizontal/tabs:h-7 [&_[data-slot=tabs-trigger]]:px-1.5',
|
|
4154
|
-
sm: 'group-data-horizontal/tabs:h-9 [&_[data-slot=tabs-trigger]]:px-2',
|
|
4155
|
-
lg: 'group-data-horizontal/tabs:h-11 [&_[data-slot=tabs-trigger]]:px-3',
|
|
4156
|
-
},
|
|
4157
|
-
},
|
|
4158
|
-
defaultVariants: {
|
|
4159
|
-
size: 'default',
|
|
4160
|
-
},
|
|
4161
|
-
});
|
|
4162
|
-
|
|
4163
|
-
/**
|
|
4164
|
-
* Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
|
|
4165
|
-
* id of the tab it belongs to, matching an entry in the `tabs` input.
|
|
4166
|
-
*
|
|
4167
|
-
* Usage:
|
|
4168
|
-
* ```html
|
|
4169
|
-
* <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
|
|
4170
|
-
* ```
|
|
4171
|
-
*/
|
|
4172
|
-
class YuwTabPanelDirective {
|
|
4173
|
-
constructor() {
|
|
4174
|
-
this.templateRef = inject(TemplateRef);
|
|
4175
|
-
this.tabId = input.required({ ...(ngDevMode ? { debugName: "tabId" } : /* istanbul ignore next */ {}), alias: 'yuwTabPanel' });
|
|
4176
|
-
}
|
|
4177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4178
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabPanelDirective, isStandalone: true, selector: "ng-template[yuwTabPanel]", inputs: { tabId: { classPropertyName: "tabId", publicName: "yuwTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
4179
|
-
}
|
|
4180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, decorators: [{
|
|
4181
|
-
type: Directive,
|
|
4182
|
-
args: [{
|
|
4183
|
-
selector: 'ng-template[yuwTabPanel]',
|
|
4184
|
-
}]
|
|
4185
|
-
}], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabPanel", required: true }] }] } });
|
|
4186
|
-
|
|
4187
|
-
class YuwTabContentDirective {
|
|
4188
|
-
constructor() {
|
|
4189
|
-
this.templateRef = inject(TemplateRef);
|
|
4190
|
-
this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwTabContent' });
|
|
4191
|
-
}
|
|
4192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4193
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabContentDirective, isStandalone: true, selector: "ng-template[yuwTabContent]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwTabContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
4194
|
-
}
|
|
4195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, decorators: [{
|
|
4196
|
-
type: Directive,
|
|
4197
|
-
args: [{
|
|
4198
|
-
selector: 'ng-template[yuwTabContent]',
|
|
4199
|
-
}]
|
|
4200
|
-
}], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabContent", required: true }] }] } });
|
|
4201
|
-
|
|
4202
|
-
/**
|
|
4203
|
-
* Tabbed navigation between sibling panels.
|
|
4204
|
-
*
|
|
4205
|
-
* Triggers come from the `tabs` input; each panel's content is declared by the consumer as an
|
|
4206
|
-
* `<ng-template yuwTabPanel="<id>">` whose id matches a tab. Panels are lazy: a panel's content
|
|
4207
|
-
* is only instantiated the first time its tab becomes active (and stays alive, hidden, after
|
|
4208
|
-
* switching away).
|
|
4209
|
-
*
|
|
4210
|
-
* Inputs / Models:
|
|
4211
|
-
* - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
|
|
4212
|
-
* - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
|
|
4213
|
-
* programmatically; listen to `activeTabChange` to react to activations.
|
|
4214
|
-
* - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
|
|
4215
|
-
* - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
|
|
4216
|
-
* - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
|
|
4217
|
-
* - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
|
|
4218
|
-
* `'manual'` requires Enter/Space). Default is `'automatic'`.
|
|
4219
|
-
*
|
|
4220
|
-
* Usage:
|
|
4221
|
-
* ```html
|
|
4222
|
-
* <yuw-tabs [tabs]="tabs" [(activeTab)]="selected">
|
|
4223
|
-
* <ng-template yuwTabPanel="general">Contenido general</ng-template>
|
|
4224
|
-
* <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
|
|
4225
|
-
* </yuw-tabs>
|
|
4226
|
-
* ```
|
|
4227
|
-
*/
|
|
4228
|
-
class YuwTabsComponent {
|
|
4229
|
-
constructor() {
|
|
4230
|
-
this._contents = contentChildren(YuwTabContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
|
|
4231
|
-
this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
|
|
4232
|
-
this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
|
|
4233
|
-
this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
4234
|
-
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
4235
|
-
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4236
|
-
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
4237
|
-
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
4238
|
-
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
4239
|
-
this._listClass = computed(() => cn(yuwTabsSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
|
|
4240
|
-
this._resolved = computed(() => {
|
|
4241
|
-
const templates = new Map(this._contents().map((content) => [content.entryId(), content.templateRef]));
|
|
4242
|
-
const entries = this.tabs();
|
|
4243
|
-
return entries.map((entry) => {
|
|
4244
|
-
return {
|
|
4245
|
-
...entry,
|
|
4246
|
-
template: templates.get(entry.id),
|
|
4247
|
-
};
|
|
4248
|
-
});
|
|
4249
|
-
}, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
|
|
4250
|
-
}
|
|
4251
|
-
onTabActivated(tabId) {
|
|
4252
|
-
this.activeTab.set(tabId);
|
|
4253
|
-
}
|
|
4254
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4255
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n [tab]=\"activeTab()\"\n [orientation]=\"orientation()\"\n [activationMode]=\"activationMode()\"\n (tabActivated)=\"onTabActivated($event)\"\n>\n <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n @for (tab of _resolved(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n @if (tab.template) {\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n } @else {\n {{ tab.label }}\n }\n </button>\n }\n </hlm-tabs-list>\n\n @for (panel of panels(); track panel.tabId()) {\n <div [hlmTabsContent]=\"panel.tabId()\">\n <ng-template hlmTabsContentLazy>\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </ng-template>\n </div>\n }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$o.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$o.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$o.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$o.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$o.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4256
|
-
}
|
|
4257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
|
|
4258
|
-
type: Component,
|
|
4259
|
-
args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
|
|
4260
|
-
class: 'contents',
|
|
4261
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n [tab]=\"activeTab()\"\n [orientation]=\"orientation()\"\n [activationMode]=\"activationMode()\"\n (tabActivated)=\"onTabActivated($event)\"\n>\n <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n @for (tab of _resolved(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n @if (tab.template) {\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n } @else {\n {{ tab.label }}\n }\n </button>\n }\n </hlm-tabs-list>\n\n @for (panel of panels(); track panel.tabId()) {\n <div [hlmTabsContent]=\"panel.tabId()\">\n <ng-template hlmTabsContentLazy>\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </ng-template>\n </div>\n }\n</hlm-tabs>\n" }]
|
|
4262
|
-
}], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
4263
|
-
|
|
4264
4760
|
/**
|
|
4265
4761
|
* Container directive for a single file attachment card.
|
|
4266
4762
|
*
|
|
@@ -4615,8 +5111,8 @@ class YuwSidebarRailService {
|
|
|
4615
5111
|
this.sidebar = inject(HlmSidebarService);
|
|
4616
5112
|
this.collapsed = computed(() => (this.sidebar.isMobile() ? !this.sidebar.openMobile() : !this.sidebar.open()), ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
4617
5113
|
this.collapsed$ = toObservable(this.collapsed);
|
|
4618
|
-
this.railPending = toSignal(this.collapsed$.pipe(switchMap((collapsed) => (collapsed ? of(true) : timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map(() => false))))), { initialValue: false });
|
|
4619
|
-
this.railSettled = toSignal(this.collapsed$.pipe(switchMap((collapsed) => (collapsed ? timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map(() => true)) : of(false)))), { initialValue: false });
|
|
5114
|
+
this.railPending = toSignal(this.collapsed$.pipe(switchMap((collapsed) => (collapsed ? of(true) : timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map$1(() => false))))), { initialValue: false });
|
|
5115
|
+
this.railSettled = toSignal(this.collapsed$.pipe(switchMap((collapsed) => (collapsed ? timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map$1(() => true)) : of(false)))), { initialValue: false });
|
|
4620
5116
|
}
|
|
4621
5117
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarRailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4622
5118
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarRailService, providedIn: 'root' }); }
|
|
@@ -5539,8 +6035,8 @@ class YuwSidebarComponent {
|
|
|
5539
6035
|
this.sidebarWidthMobile = input(this.config.sidebarWidthMobile, ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
|
|
5540
6036
|
this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
5541
6037
|
this.itemClicked = output();
|
|
5542
|
-
this.collapsedChange = outputFromObservable(toObservable(this._rail.collapsed).pipe(distinctUntilChanged()));
|
|
5543
|
-
this.railSettledChange = outputFromObservable(toObservable(this._rail.railSettled).pipe(distinctUntilChanged()));
|
|
6038
|
+
this.collapsedChange = outputFromObservable(toObservable(this._rail.collapsed).pipe(distinctUntilChanged$1()));
|
|
6039
|
+
this.railSettledChange = outputFromObservable(toObservable(this._rail.railSettled).pipe(distinctUntilChanged$1()));
|
|
5544
6040
|
this._containerClass = computed(() => `${yuwSidebarContainerClass} ${this.sidebarContainerClass()}`, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
|
|
5545
6041
|
this._isRail = computed(() => this.collapsible() === 'icon' && this._rail.railSettled(), ...(ngDevMode ? [{ debugName: "_isRail" }] : /* istanbul ignore next */ []));
|
|
5546
6042
|
}
|
|
@@ -5776,5 +6272,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
5776
6272
|
* Generated bundle index. Do not edit.
|
|
5777
6273
|
*/
|
|
5778
6274
|
|
|
5779
|
-
export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
|
|
6275
|
+
export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
|
|
5780
6276
|
//# sourceMappingURL=yukit-web.mjs.map
|