yukit-web 0.0.5 → 0.0.6
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/5c/85/bb1c09e93463a4461695dd6985e6a880f798478a59a329c10b1bf523b1c25e83e63a0ddcbb91313dffaeddfd56603f65207c7c17b0a38d47ab1726407457 +1 -0
- package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488 +1 -1
- package/.npm/_logs/{2026-08-25T12_25_25_519Z-debug-0.log → 2026-08-26T07_41_27_966Z-debug-0.log} +10 -10
- package/.npm/_logs/{2026-08-25T12_25_26_005Z-debug-0.log → 2026-08-26T07_41_28_532Z-debug-0.log} +2 -2
- package/fesm2022/yukit-web.mjs +282 -95
- package/fesm2022/yukit-web.mjs.map +1 -1
- package/package.json +1 -1
- package/types/yukit-web.d.ts +30 -12
- package/.npm/_cacache/content-v2/sha512/4f/1b/f689c8ddedb8797ff60d136bd61b5ed80207bbc30853891a131b94e7318092e7d0a1af4e19f6e699e04bb6e9b29ade310e757f6e1d8b4d3827c222f2f8be +0 -1
package/fesm2022/yukit-web.mjs
CHANGED
|
@@ -228,11 +228,11 @@ const yuwButtonVariants = cva('', {
|
|
|
228
228
|
},
|
|
229
229
|
size: {
|
|
230
230
|
default: 'h-10',
|
|
231
|
-
xs:
|
|
232
|
-
sm:
|
|
231
|
+
xs: 'h-7',
|
|
232
|
+
sm: 'h-9',
|
|
233
233
|
lg: 'h-11',
|
|
234
234
|
icon: 'size-10',
|
|
235
|
-
'icon-xs':
|
|
235
|
+
'icon-xs': 'size-7',
|
|
236
236
|
'icon-sm': 'size-9',
|
|
237
237
|
'icon-lg': 'size-11',
|
|
238
238
|
},
|
|
@@ -250,7 +250,7 @@ const yuwButtonVariants = cva('', {
|
|
|
250
250
|
animationDisabled: {
|
|
251
251
|
true: 'active:translate-y-0!',
|
|
252
252
|
false: '',
|
|
253
|
-
}
|
|
253
|
+
},
|
|
254
254
|
},
|
|
255
255
|
defaultVariants: {
|
|
256
256
|
variant: 'default',
|
|
@@ -332,7 +332,12 @@ class YuwButtonComponent {
|
|
|
332
332
|
this._animationDisabled = computed(() => this.animationDisabled() || this._host.nativeElement.hasAttribute('aria-haspopup'), ...(ngDevMode ? [{ debugName: "_animationDisabled" }] : /* istanbul ignore next */ []));
|
|
333
333
|
this._effectiveVariant = computed(() => this.transparent() ? 'ghost' : this.variant(), ...(ngDevMode ? [{ debugName: "_effectiveVariant" }] : /* istanbul ignore next */ []));
|
|
334
334
|
/** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
|
|
335
|
-
this._btnClass = computed(() => cn(yuwButtonVariants({
|
|
335
|
+
this._btnClass = computed(() => cn(yuwButtonVariants({
|
|
336
|
+
size: this.size(),
|
|
337
|
+
variant: this._effectiveVariant(),
|
|
338
|
+
transparent: this.transparent(),
|
|
339
|
+
animationDisabled: this._animationDisabled(),
|
|
340
|
+
}), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
|
|
336
341
|
this._texts = contentChildren(YuwButtonGroupTextDirective, ...(ngDevMode ? [{ debugName: "_texts" }] : /* istanbul ignore next */ []));
|
|
337
342
|
/**
|
|
338
343
|
* The group's entries, each carrying everything its branch of the template needs.
|
|
@@ -375,7 +380,7 @@ class YuwButtonComponent {
|
|
|
375
380
|
this.buttonClicked.emit({ id: button.id, event });
|
|
376
381
|
}
|
|
377
382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" }, classAttribute: "inline-flex" }, queries: [{ propertyName: "_texts", predicate: YuwButtonGroupTextDirective, isSignal: true }], ngImport: i0, template: "@if (_isGroup()) {\n <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n @for (button of _resolved(); track button.id) {\n @if (button.kind === 'text') {\n <hlm-button-group-text [class]=\"_textClass\">\n @if (button.template) {\n <ng-container [ngTemplateOutlet]=\"button.template\"/>\n } @else {\n {{ button.label }}\n }\n </hlm-button-group-text>\n
|
|
383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" }, classAttribute: "inline-flex" }, queries: [{ propertyName: "_texts", predicate: YuwButtonGroupTextDirective, isSignal: true }], ngImport: i0, template: "@if (_isGroup()) {\n <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n @for (button of _resolved(); track button.id) {\n @if (button.kind === 'text') {\n <hlm-button-group-text [class]=\"_textClass\">\n @if (button.template) {\n <ng-container [ngTemplateOutlet]=\"button.template\" />\n } @else {\n {{ button.label }}\n }\n </hlm-button-group-text>\n } @else if (button.href && !button.disabled) {\n <a\n hlmBtn\n [variant]=\"button.variant\"\n [size]=\"button.size\"\n [href]=\"button.href\"\n [target]=\"button.target\"\n [attr.data-yuw-color]=\"button.color\"\n [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\"\n [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\"\n >\n {{ button.label }}\n </a>\n } @else {\n <button\n hlmBtn\n [variant]=\"button.variant\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [disabled]=\"button.disabled\"\n [attr.data-yuw-color]=\"button.color\"\n [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\"\n [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\"\n >\n {{ button.label }}\n </button>\n }\n }\n </div>\n} @else if (href(); as hrefValue) {\n <a\n hlmBtn\n [variant]=\"_effectiveVariant()\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [href]=\"disabled() ? null : hrefValue\"\n [target]=\"target()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\"\n >\n <ng-content select=\"[yuwButtonIcon]\" />\n <ng-content />\n </a>\n} @else {\n <button\n hlmBtn\n [variant]=\"_effectiveVariant()\"\n [size]=\"size()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\"\n >\n <ng-content select=\"[yuwButtonIcon]\" />\n <ng-content />\n </button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmButtonGroupText, selector: "[hlmButtonGroupText],hlm-button-group-text" }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
379
384
|
}
|
|
380
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, decorators: [{
|
|
381
386
|
type: Component,
|
|
@@ -383,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
383
388
|
class: 'inline-flex',
|
|
384
389
|
'[class.cursor-not-allowed]': 'disabled()',
|
|
385
390
|
'[attr.data-yuw-color]': 'color()',
|
|
386
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n @for (button of _resolved(); track button.id) {\n @if (button.kind === 'text') {\n <hlm-button-group-text [class]=\"_textClass\">\n @if (button.template) {\n <ng-container [ngTemplateOutlet]=\"button.template\"/>\n } @else {\n {{ button.label }}\n }\n </hlm-button-group-text>\n
|
|
391
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n @for (button of _resolved(); track button.id) {\n @if (button.kind === 'text') {\n <hlm-button-group-text [class]=\"_textClass\">\n @if (button.template) {\n <ng-container [ngTemplateOutlet]=\"button.template\" />\n } @else {\n {{ button.label }}\n }\n </hlm-button-group-text>\n } @else if (button.href && !button.disabled) {\n <a\n hlmBtn\n [variant]=\"button.variant\"\n [size]=\"button.size\"\n [href]=\"button.href\"\n [target]=\"button.target\"\n [attr.data-yuw-color]=\"button.color\"\n [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\"\n [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\"\n >\n {{ button.label }}\n </a>\n } @else {\n <button\n hlmBtn\n [variant]=\"button.variant\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [disabled]=\"button.disabled\"\n [attr.data-yuw-color]=\"button.color\"\n [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\"\n [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\"\n >\n {{ button.label }}\n </button>\n }\n }\n </div>\n} @else if (href(); as hrefValue) {\n <a\n hlmBtn\n [variant]=\"_effectiveVariant()\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [href]=\"disabled() ? null : hrefValue\"\n [target]=\"target()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\"\n >\n <ng-content select=\"[yuwButtonIcon]\" />\n <ng-content />\n </a>\n} @else {\n <button\n hlmBtn\n [variant]=\"_effectiveVariant()\"\n [size]=\"size()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\"\n >\n <ng-content select=\"[yuwButtonIcon]\" />\n <ng-content />\n </button>\n}\n" }]
|
|
387
392
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], animationDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDisabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], _texts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupTextDirective), { isSignal: true }] }] } });
|
|
388
393
|
|
|
389
394
|
/** Text class for the remove button per helm badge variant, mirroring each variant's own foreground. */
|
|
@@ -424,14 +429,14 @@ class YuwBadgeComponent {
|
|
|
424
429
|
this.removed.emit();
|
|
425
430
|
}
|
|
426
431
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
427
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n <ng-content select=\"[yuwBadgeIcon]\"/>\n <span class=\"truncate\"><ng-content/></span>\n\n @if (removeLabel()) {\n <yuw-button
|
|
432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n <ng-content select=\"[yuwBadgeIcon]\" />\n <span class=\"truncate\"><ng-content /></span>\n\n @if (removeLabel()) {\n <yuw-button\n variant=\"ghost\"\n size=\"icon-xs\"\n [color]=\"color()\"\n [ariaLabel]=\"removeLabel()\"\n [class]=\"removeClass()\"\n (clicked)=\"onRemoveClick($event)\"\n >\n <ng-icon name=\"lucideX\" />\n </yuw-button>\n }\n}\n", dependencies: [{ kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
428
433
|
}
|
|
429
434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, decorators: [{
|
|
430
435
|
type: Component,
|
|
431
436
|
args: [{ selector: 'yuw-badge', hostDirectives: [{ directive: HlmBadge, inputs: ['variant'] }], imports: [YuwButtonComponent, NgIcon], providers: [provideIcons({ lucideX })], host: {
|
|
432
437
|
'[class]': 'dotClass()',
|
|
433
438
|
'[attr.data-yuw-color]': 'color()',
|
|
434
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n <ng-content select=\"[yuwBadgeIcon]\"/>\n <span class=\"truncate\"><ng-content/></span>\n\n @if (removeLabel()) {\n <yuw-button
|
|
439
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n <ng-content select=\"[yuwBadgeIcon]\" />\n <span class=\"truncate\"><ng-content /></span>\n\n @if (removeLabel()) {\n <yuw-button\n variant=\"ghost\"\n size=\"icon-xs\"\n [color]=\"color()\"\n [ariaLabel]=\"removeLabel()\"\n [class]=\"removeClass()\"\n (clicked)=\"onRemoveClick($event)\"\n >\n <ng-icon name=\"lucideX\" />\n </yuw-button>\n }\n}\n" }]
|
|
435
440
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
436
441
|
|
|
437
442
|
/**
|
|
@@ -527,14 +532,14 @@ class YuwPaginationComponent {
|
|
|
527
532
|
this.page.set(target);
|
|
528
533
|
}
|
|
529
534
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
530
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 type=\"button\"\n hlmPaginationLink\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [attr.aria-label]=\"previousLabel()\"\n (click)=\"goTo(page() - 1)\"\n >\n <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\"/>\n </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
|
|
535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 type=\"button\"\n hlmPaginationLink\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [attr.aria-label]=\"previousLabel()\"\n (click)=\"goTo(page() - 1)\"\n >\n <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n </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 <button\n type=\"button\"\n hlmPaginationLink\n isActive\n [size]=\"size()\"\n class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n (click)=\"goTo(entry)\"\n >\n {{ entry }}\n </button>\n } @else {\n <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n {{ entry }}\n </button>\n }\n </li>\n }\n\n <li hlmPaginationItem>\n <button\n type=\"button\"\n hlmPaginationLink\n [size]=\"size()\"\n [disabled]=\"page() >= totalPages()\"\n [attr.aria-label]=\"nextLabel()\"\n (click)=\"goTo(page() + 1)\"\n >\n <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n </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: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
531
536
|
}
|
|
532
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPaginationComponent, decorators: [{
|
|
533
538
|
type: Component,
|
|
534
539
|
args: [{ selector: 'yuw-pagination', imports: [HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLink, HlmPaginationEllipsis, NgIcon], providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], host: {
|
|
535
540
|
class: 'contents',
|
|
536
541
|
'[attr.data-yuw-color]': 'color()',
|
|
537
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n <ul hlmPaginationContent>\n <li hlmPaginationItem>\n <button\n type=\"button\"\n hlmPaginationLink\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [attr.aria-label]=\"previousLabel()\"\n (click)=\"goTo(page() - 1)\"\n >\n <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\"/>\n </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
|
|
542
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n <ul hlmPaginationContent>\n <li hlmPaginationItem>\n <button\n type=\"button\"\n hlmPaginationLink\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [attr.aria-label]=\"previousLabel()\"\n (click)=\"goTo(page() - 1)\"\n >\n <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n </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 <button\n type=\"button\"\n hlmPaginationLink\n isActive\n [size]=\"size()\"\n class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n (click)=\"goTo(entry)\"\n >\n {{ entry }}\n </button>\n } @else {\n <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n {{ entry }}\n </button>\n }\n </li>\n }\n\n <li hlmPaginationItem>\n <button\n type=\"button\"\n hlmPaginationLink\n [size]=\"size()\"\n [disabled]=\"page() >= totalPages()\"\n [attr.aria-label]=\"nextLabel()\"\n (click)=\"goTo(page() + 1)\"\n >\n <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n </button>\n </li>\n </ul>\n</nav>\n" }]
|
|
538
543
|
}], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }, { type: i0.Output, args: ["pageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: true }] }], ellipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsisSrText", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
|
|
539
544
|
|
|
540
545
|
/**
|
|
@@ -719,13 +724,13 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
|
|
|
719
724
|
this._onBlur();
|
|
720
725
|
}
|
|
721
726
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, 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
|
|
727
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, 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 [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\" [class]=\"_triggerClass()\">\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 }); }
|
|
723
728
|
}
|
|
724
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, decorators: [{
|
|
725
730
|
type: Component,
|
|
726
731
|
args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
|
|
727
732
|
class: 'contents',
|
|
728
|
-
}, 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
|
|
733
|
+
}, 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 [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\" [class]=\"_triggerClass()\">\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" }]
|
|
729
734
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
730
735
|
|
|
731
736
|
/**
|
|
@@ -795,13 +800,13 @@ class YuwAccordionTriggerComponent {
|
|
|
795
800
|
this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
|
|
796
801
|
}
|
|
797
802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
798
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwAccordionTriggerComponent, isStandalone: true, selector: "yuw-accordion-trigger", inputs: { triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n <ng-content/>\n</hlm-accordion-trigger>\n", dependencies: [{ kind: "component", type: HlmAccordionTrigger, selector: "hlm-accordion-trigger", inputs: ["triggerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwAccordionTriggerComponent, isStandalone: true, selector: "yuw-accordion-trigger", inputs: { triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n <ng-content />\n</hlm-accordion-trigger>\n", dependencies: [{ kind: "component", type: HlmAccordionTrigger, selector: "hlm-accordion-trigger", inputs: ["triggerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
799
804
|
}
|
|
800
805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionTriggerComponent, decorators: [{
|
|
801
806
|
type: Component,
|
|
802
807
|
args: [{ selector: 'yuw-accordion-trigger', imports: [HlmAccordionTrigger], host: {
|
|
803
808
|
class: 'contents',
|
|
804
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n <ng-content/>\n</hlm-accordion-trigger>\n" }]
|
|
809
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n <ng-content />\n</hlm-accordion-trigger>\n" }]
|
|
805
810
|
}], propDecorators: { triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }] } });
|
|
806
811
|
|
|
807
812
|
/**
|
|
@@ -811,13 +816,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
811
816
|
*/
|
|
812
817
|
class YuwAccordionContentComponent {
|
|
813
818
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordionContentComponent, isStandalone: true, selector: "yuw-accordion-content", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-content>\n <ng-content/>\n</hlm-accordion-content>\n", dependencies: [{ kind: "component", type: HlmAccordionContent, selector: "hlm-accordion-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
819
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordionContentComponent, isStandalone: true, selector: "yuw-accordion-content", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-content>\n <ng-content />\n</hlm-accordion-content>\n", dependencies: [{ kind: "component", type: HlmAccordionContent, selector: "hlm-accordion-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
815
820
|
}
|
|
816
821
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionContentComponent, decorators: [{
|
|
817
822
|
type: Component,
|
|
818
823
|
args: [{ selector: 'yuw-accordion-content', imports: [HlmAccordionContent], host: {
|
|
819
824
|
class: 'contents',
|
|
820
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-content>\n <ng-content/>\n</hlm-accordion-content>\n" }]
|
|
825
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-content>\n <ng-content />\n</hlm-accordion-content>\n" }]
|
|
821
826
|
}] });
|
|
822
827
|
|
|
823
828
|
/** Bundle for consumers who want every `yuw-accordion-*` piece in one `imports: [...]` entry —
|
|
@@ -931,13 +936,13 @@ class YuwInputComponent extends YuwValueAccessorBase {
|
|
|
931
936
|
this.committed.emit(this.value());
|
|
932
937
|
}
|
|
933
938
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@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
|
|
939
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@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]=\"invalid()\"\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]=\"invalid()\"\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", dependencies: [{ 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 }); }
|
|
935
940
|
}
|
|
936
941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, decorators: [{
|
|
937
942
|
type: Component,
|
|
938
943
|
args: [{ selector: 'yuw-input', imports: [HlmInput, HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon], providers: [provideValueAccessor(YuwInputComponent)], host: {
|
|
939
944
|
class: 'contents',
|
|
940
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@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
|
|
945
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@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]=\"invalid()\"\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]=\"invalid()\"\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" }]
|
|
941
946
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }] } });
|
|
942
947
|
|
|
943
948
|
let nextYuwTextareaId = 0;
|
|
@@ -1003,13 +1008,13 @@ class YuwTextareaComponent extends YuwValueAccessorBase {
|
|
|
1003
1008
|
this.committed.emit(this.value());
|
|
1004
1009
|
}
|
|
1005
1010
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1006
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, 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@if (_hasAddons()) {\n<hlm-input-group [class]=\"_classes()\">\n
|
|
1011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, 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@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]=\"invalid()\"\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]=\"invalid()\"\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", dependencies: [{ 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 }); }
|
|
1007
1012
|
}
|
|
1008
1013
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTextareaComponent, decorators: [{
|
|
1009
1014
|
type: Component,
|
|
1010
1015
|
args: [{ selector: 'yuw-textarea', imports: [HlmTextarea, HlmInputGroup, HlmInputGroupTextarea, HlmInputGroupAddon], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
|
|
1011
1016
|
class: 'contents',
|
|
1012
|
-
}, 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@if (_hasAddons()) {\n<hlm-input-group [class]=\"_classes()\">\n
|
|
1017
|
+
}, 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@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]=\"invalid()\"\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]=\"invalid()\"\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" }]
|
|
1013
1018
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }] } });
|
|
1014
1019
|
|
|
1015
1020
|
/**
|
|
@@ -1036,19 +1041,35 @@ const searchInputCollapsibleVariants = cva('w-full', {
|
|
|
1036
1041
|
},
|
|
1037
1042
|
expanded: {
|
|
1038
1043
|
true: '',
|
|
1039
|
-
false: '
|
|
1044
|
+
false: '',
|
|
1045
|
+
},
|
|
1046
|
+
size: {
|
|
1047
|
+
default: '',
|
|
1048
|
+
xs: '',
|
|
1049
|
+
sm: '',
|
|
1050
|
+
lg: '',
|
|
1040
1051
|
},
|
|
1041
1052
|
},
|
|
1053
|
+
compoundVariants: [
|
|
1054
|
+
{ expanded: false, size: 'default', class: 'max-w-10' },
|
|
1055
|
+
{ expanded: false, size: 'xs', class: 'max-w-7' },
|
|
1056
|
+
{ expanded: false, size: 'sm', class: 'max-w-9' },
|
|
1057
|
+
{ expanded: false, size: 'lg', class: 'max-w-11' },
|
|
1058
|
+
],
|
|
1042
1059
|
defaultVariants: {
|
|
1043
1060
|
expanded: true,
|
|
1061
|
+
size: 'default',
|
|
1044
1062
|
},
|
|
1045
1063
|
});
|
|
1046
1064
|
/**
|
|
1047
1065
|
* Classes for the search icon slot.
|
|
1048
1066
|
*
|
|
1049
|
-
*
|
|
1050
|
-
* wrapper mid-transition, sliding the icon toward the middle and snapping it
|
|
1051
|
-
* `shrink-0` holds that width against the sibling input's `flex-1`.
|
|
1067
|
+
* A fixed square matching the control height, never a share of the wrapper: sizing it with `w-full`
|
|
1068
|
+
* would make it track the wrapper mid-transition, sliding the icon toward the middle and snapping it
|
|
1069
|
+
* back at the end. `shrink-0` holds that width against the sibling input's `flex-1`.
|
|
1070
|
+
*
|
|
1071
|
+
* The width is keyed by `size` through compound variants so the collapsed control stays square at
|
|
1072
|
+
* every size, mirroring the `icon-*` sizes of `<yuw-button>`.
|
|
1052
1073
|
*
|
|
1053
1074
|
* `ps-0` cancels the addon's own `ps-2`, and `has-[>button]:ms-0` cancels the helm's
|
|
1054
1075
|
* `has-[>button]:ms-[-0.3rem]`; the prefix has to be repeated because tailwind-merge keys conflicts
|
|
@@ -1057,12 +1078,25 @@ const searchInputCollapsibleVariants = cva('w-full', {
|
|
|
1057
1078
|
const searchInputIconVariants = cva('', {
|
|
1058
1079
|
variants: {
|
|
1059
1080
|
collapsible: {
|
|
1060
|
-
true: '
|
|
1081
|
+
true: 'shrink-0 justify-center ps-0 has-[>button]:ms-0',
|
|
1061
1082
|
false: '',
|
|
1062
1083
|
},
|
|
1084
|
+
size: {
|
|
1085
|
+
default: '',
|
|
1086
|
+
xs: '',
|
|
1087
|
+
sm: '',
|
|
1088
|
+
lg: '',
|
|
1089
|
+
},
|
|
1063
1090
|
},
|
|
1091
|
+
compoundVariants: [
|
|
1092
|
+
{ collapsible: true, size: 'default', class: 'w-10' },
|
|
1093
|
+
{ collapsible: true, size: 'xs', class: 'w-7' },
|
|
1094
|
+
{ collapsible: true, size: 'sm', class: 'w-9' },
|
|
1095
|
+
{ collapsible: true, size: 'lg', class: 'w-11' },
|
|
1096
|
+
],
|
|
1064
1097
|
defaultVariants: {
|
|
1065
1098
|
collapsible: false,
|
|
1099
|
+
size: 'default',
|
|
1066
1100
|
},
|
|
1067
1101
|
});
|
|
1068
1102
|
/**
|
|
@@ -1105,6 +1139,44 @@ const searchInputGroupVariants = cva('', {
|
|
|
1105
1139
|
transparent: false,
|
|
1106
1140
|
},
|
|
1107
1141
|
});
|
|
1142
|
+
/**
|
|
1143
|
+
* Size override for the collapsed expand button.
|
|
1144
|
+
*
|
|
1145
|
+
* The helm `hlmInputGroupButton` caps its `size` input at `icon-sm` (`size-8`), so the input is left
|
|
1146
|
+
* at `icon-sm` and the real dimensions come from here instead — the same approach `<yuw-switch>`
|
|
1147
|
+
* takes with its track. Without this the tap target stays 32px inside a 44px square at `lg`, leaving
|
|
1148
|
+
* a ring of dead space, and the glyph stops tracking the control.
|
|
1149
|
+
*
|
|
1150
|
+
* Each square is the control height minus 2px, one for the group's border on each side. Filling the
|
|
1151
|
+
* full height instead would paint the button's `hover:bg-muted` over that border and make it vanish
|
|
1152
|
+
* on hover — the addon cannot be used as the reference box either, since it is `h-auto` and stretches
|
|
1153
|
+
* taller than the group.
|
|
1154
|
+
*
|
|
1155
|
+
* Only the box scales; the glyph is left alone deliberately. The template passes `size="icon-sm"`
|
|
1156
|
+
* rather than letting the helm default to `xs`, because the `xs` variant declares its own 14px glyph
|
|
1157
|
+
* while `icon-sm` declares none — so the icon falls through to `hlmBtn`'s `--spacing(4)`, the same
|
|
1158
|
+
* 16px the addon renders when the control is expanded. Without that the icon changes size as the
|
|
1159
|
+
* control collapses.
|
|
1160
|
+
*
|
|
1161
|
+
* Overriding the glyph from here does not work: the helm registers its classes through `classes()`,
|
|
1162
|
+
* which merges its own sources last, so a `[class]` binding loses that particular conflict.
|
|
1163
|
+
*
|
|
1164
|
+
* `pointer-events-auto` is in the base because the collapsed icon slot sets `pointer-events-none` on
|
|
1165
|
+
* its subtree; the button is the one thing inside it that must stay clickable.
|
|
1166
|
+
*/
|
|
1167
|
+
const searchInputExpandButtonVariants = cva('pointer-events-auto', {
|
|
1168
|
+
variants: {
|
|
1169
|
+
size: {
|
|
1170
|
+
default: 'size-[38px]',
|
|
1171
|
+
xs: 'size-[26px]',
|
|
1172
|
+
sm: 'size-[34px]',
|
|
1173
|
+
lg: 'size-[42px]',
|
|
1174
|
+
},
|
|
1175
|
+
},
|
|
1176
|
+
defaultVariants: {
|
|
1177
|
+
size: 'default',
|
|
1178
|
+
},
|
|
1179
|
+
});
|
|
1108
1180
|
|
|
1109
1181
|
/** Module-level counter backing each instance's stable fallback `id`. */
|
|
1110
1182
|
let nextYuwSearchInputId = 0;
|
|
@@ -1131,6 +1203,8 @@ let nextYuwSearchInputId = 0;
|
|
|
1131
1203
|
* app is responsible for translating.
|
|
1132
1204
|
* - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
|
|
1133
1205
|
* Collapsible mode only.
|
|
1206
|
+
* - `size`: Control height, matching the `<yuw-button>` of the same name. While collapsed the
|
|
1207
|
+
* control is a square of that height.
|
|
1134
1208
|
* - `transparent`: Removes the field's resting border and background so it sits directly on its
|
|
1135
1209
|
* container — for search inside a toolbar or a colored surface. The focus and invalid rings stay.
|
|
1136
1210
|
* - `class`: Extra classes merged onto the input group.
|
|
@@ -1178,6 +1252,7 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1178
1252
|
this.collapseFrom = input(undefined, ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
|
|
1179
1253
|
this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
|
|
1180
1254
|
this.expandAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1255
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1181
1256
|
this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1182
1257
|
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
1183
1258
|
this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
|
|
@@ -1187,15 +1262,21 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1187
1262
|
this.searched = output();
|
|
1188
1263
|
this.committed = output();
|
|
1189
1264
|
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1190
|
-
this._classes = computed(() => cn(searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1265
|
+
this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1191
1266
|
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1192
1267
|
this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
|
|
1193
1268
|
this._expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
|
|
1194
|
-
this._wrapperClasses = computed(() => searchInputCollapsibleVariants({
|
|
1269
|
+
this._wrapperClasses = computed(() => searchInputCollapsibleVariants({
|
|
1270
|
+
collapseFrom: this.collapseFrom(),
|
|
1271
|
+
expanded: this._expanded(),
|
|
1272
|
+
size: this.size(),
|
|
1273
|
+
}), ...(ngDevMode ? [{ debugName: "_wrapperClasses" }] : /* istanbul ignore next */ []));
|
|
1195
1274
|
this._wrapperMaxWidth = computed(() => (this._expanded() ? this.expandedWidth() : null), ...(ngDevMode ? [{ debugName: "_wrapperMaxWidth" }] : /* istanbul ignore next */ []));
|
|
1196
|
-
this._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_iconClasses" }] : /* istanbul ignore next */ []));
|
|
1275
|
+
this._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible(), size: this.size() }), ...(ngDevMode ? [{ debugName: "_iconClasses" }] : /* istanbul ignore next */ []));
|
|
1197
1276
|
this._fieldClasses = computed(() => searchInputFieldVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_fieldClasses" }] : /* istanbul ignore next */ []));
|
|
1198
1277
|
this._showExpandButton = computed(() => !this._expanded() && !this._disabled(), ...(ngDevMode ? [{ debugName: "_showExpandButton" }] : /* istanbul ignore next */ []));
|
|
1278
|
+
/** Geometry for the collapsed expand button, which the helm's capped `size` input cannot express. */
|
|
1279
|
+
this._expandButtonClasses = computed(() => searchInputExpandButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_expandButtonClasses" }] : /* istanbul ignore next */ []));
|
|
1199
1280
|
this._showClear = computed(() => this.clearAriaLabel() !== undefined &&
|
|
1200
1281
|
this.value().length > 0 &&
|
|
1201
1282
|
this._expanded() &&
|
|
@@ -1254,14 +1335,14 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1254
1335
|
}
|
|
1255
1336
|
}
|
|
1256
1337
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1257
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, 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: "<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=\"
|
|
1338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, 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: "<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]=\"invalid()\"\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", dependencies: [{ 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 }); }
|
|
1258
1339
|
}
|
|
1259
1340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
|
|
1260
1341
|
type: Component,
|
|
1261
1342
|
args: [{ selector: 'yuw-search-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
|
|
1262
1343
|
class: 'contents',
|
|
1263
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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=\"
|
|
1264
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1344
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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]=\"invalid()\"\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" }]
|
|
1345
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1265
1346
|
|
|
1266
1347
|
/** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
|
|
1267
1348
|
* directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
|
|
@@ -1278,6 +1359,7 @@ let nextYuwPasswordInputId = 0;
|
|
|
1278
1359
|
*
|
|
1279
1360
|
* Inputs / Models:
|
|
1280
1361
|
* - `value`: Two-way password string.
|
|
1362
|
+
* - `size`: Control height, matching the `<yuw-button>` of the same name.
|
|
1281
1363
|
* - `inputId`: `id` applied to the native input, for external `<label for>` association.
|
|
1282
1364
|
* - `disabled`: Disables input interaction.
|
|
1283
1365
|
* - `readonly`: Makes the field read-only.
|
|
@@ -1304,6 +1386,7 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
|
|
|
1304
1386
|
super(...arguments);
|
|
1305
1387
|
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1306
1388
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1389
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1307
1390
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1308
1391
|
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1309
1392
|
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1317,7 +1400,7 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
|
|
|
1317
1400
|
this.masked = model(true, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
|
|
1318
1401
|
this._autoId = `yuw-password-input-${++nextYuwPasswordInputId}`;
|
|
1319
1402
|
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1320
|
-
this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1403
|
+
this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1321
1404
|
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1322
1405
|
this._reveal = computed(() => YUW_PASSWORD_REVEAL_STATES[`${this.masked()}`], ...(ngDevMode ? [{ debugName: "_reveal" }] : /* istanbul ignore next */ []));
|
|
1323
1406
|
}
|
|
@@ -1334,14 +1417,40 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
|
|
|
1334
1417
|
this.masked.update((masked) => !masked);
|
|
1335
1418
|
}
|
|
1336
1419
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1337
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", masked: "maskedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\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]=\"invalid()\"\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", dependencies: [{ 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 }); }
|
|
1420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", masked: "maskedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\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]=\"invalid()\"\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", dependencies: [{ 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 }); }
|
|
1338
1421
|
}
|
|
1339
1422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
|
|
1340
1423
|
type: Component,
|
|
1341
1424
|
args: [{ selector: 'yuw-password-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], host: {
|
|
1342
1425
|
class: 'contents',
|
|
1343
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\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]=\"invalid()\"\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" }]
|
|
1344
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }] } });
|
|
1426
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\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]=\"invalid()\"\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" }]
|
|
1427
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }] } });
|
|
1428
|
+
|
|
1429
|
+
/**
|
|
1430
|
+
* Cell size for `<yuw-input-otp>`, applied to the container and reaching each
|
|
1431
|
+
* `<hlm-input-otp-slot>` through a descendant selector.
|
|
1432
|
+
*
|
|
1433
|
+
* The slots are separate components with their own `size-8`, and the container has no class
|
|
1434
|
+
* passthrough to them, so the scale is expressed as an arbitrary descendant variant keyed on the
|
|
1435
|
+
* slot's `data-slot` attribute. `!` is not needed: the generated rule is more specific than the
|
|
1436
|
+
* slot's own single utility class.
|
|
1437
|
+
*
|
|
1438
|
+
* Cells are square, so the values are `size-*` rather than `h-*`, matching the `icon-*` sizes of
|
|
1439
|
+
* `<yuw-button>` at the same name.
|
|
1440
|
+
*/
|
|
1441
|
+
const yuwInputOtpSizeVariants = cva('', {
|
|
1442
|
+
variants: {
|
|
1443
|
+
size: {
|
|
1444
|
+
default: '[&_[data-slot=input-otp-slot]]:size-10',
|
|
1445
|
+
xs: '[&_[data-slot=input-otp-slot]]:size-7',
|
|
1446
|
+
sm: '[&_[data-slot=input-otp-slot]]:size-9',
|
|
1447
|
+
lg: '[&_[data-slot=input-otp-slot]]:size-11',
|
|
1448
|
+
},
|
|
1449
|
+
},
|
|
1450
|
+
defaultVariants: {
|
|
1451
|
+
size: 'default',
|
|
1452
|
+
},
|
|
1453
|
+
});
|
|
1345
1454
|
|
|
1346
1455
|
/**
|
|
1347
1456
|
* Expands a list of group sizes (`[3, 3]`) into the groups the template renders, assigning
|
|
@@ -1382,6 +1491,7 @@ let nextYuwInputOtpId = 0;
|
|
|
1382
1491
|
* - `groupSizes`: Slot counts per visual group (`number[]`). A separator renders between groups, e.g. `[3, 3]` gives `000-000`. Default is `[6]`.
|
|
1383
1492
|
* - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
|
|
1384
1493
|
* - `disabled`: Disables input interaction.
|
|
1494
|
+
* - `size`: Cell size, matching the `<yuw-button>` of the same name.
|
|
1385
1495
|
* - `invalid`: Forces invalid styling.
|
|
1386
1496
|
* - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
|
|
1387
1497
|
* - `transformPaste`: Normalizes pasted text before it fills the slots.
|
|
@@ -1403,6 +1513,7 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
|
|
|
1403
1513
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1404
1514
|
this.groupSizes = input([6], ...(ngDevMode ? [{ debugName: "groupSizes" }] : /* istanbul ignore next */ []));
|
|
1405
1515
|
this.mode = input('numeric', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
1516
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1406
1517
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1407
1518
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1408
1519
|
this.autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1411,7 +1522,7 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
|
|
|
1411
1522
|
this.completed = output();
|
|
1412
1523
|
this._autoId = `yuw-input-otp-${++nextYuwInputOtpId}`;
|
|
1413
1524
|
this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
|
|
1414
|
-
this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1525
|
+
this._classes = computed(() => cn(yuwInputOtpSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
|
|
1415
1526
|
this._groups = computed(() => buildInputOtpGroups(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
|
|
1416
1527
|
this._length = computed(() => totalInputOtpLength(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_length" }] : /* istanbul ignore next */ []));
|
|
1417
1528
|
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -1423,14 +1534,14 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
|
|
|
1423
1534
|
this._commit(next);
|
|
1424
1535
|
}
|
|
1425
1536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<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]=\"invalid()\"/>\n }\n </hlm-input-otp-group>\n }\n</brn-input-otp>\n", dependencies: [{ 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 }); }
|
|
1537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<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]=\"invalid()\" />\n }\n </hlm-input-otp-group>\n }\n</brn-input-otp>\n", dependencies: [{ 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 }); }
|
|
1427
1538
|
}
|
|
1428
1539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
|
|
1429
1540
|
type: Component,
|
|
1430
1541
|
args: [{ selector: 'yuw-input-otp', imports: [BrnInputOtp, ...HlmInputOtpImports], providers: [provideValueAccessor(YuwInputOtpComponent)], host: {
|
|
1431
1542
|
class: 'contents',
|
|
1432
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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]=\"invalid()\"/>\n }\n </hlm-input-otp-group>\n }\n</brn-input-otp>\n" }]
|
|
1433
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
1543
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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]=\"invalid()\" />\n }\n </hlm-input-otp-group>\n }\n</brn-input-otp>\n" }]
|
|
1544
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
1434
1545
|
|
|
1435
1546
|
/**
|
|
1436
1547
|
* Form label directive applied directly to a native `<label>` element.
|
|
@@ -1556,15 +1667,62 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
|
|
|
1556
1667
|
this._commit(checked);
|
|
1557
1668
|
}
|
|
1558
1669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange", indeterminate: "indeterminateChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-checkbox
|
|
1670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange", indeterminate: "indeterminateChange" }, 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 }); }
|
|
1560
1671
|
}
|
|
1561
1672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCheckboxComponent, decorators: [{
|
|
1562
1673
|
type: Component,
|
|
1563
1674
|
args: [{ selector: 'yuw-checkbox', imports: [HlmCheckbox, YuwLabel], providers: [provideValueAccessor(YuwCheckboxComponent)], host: {
|
|
1564
1675
|
class: 'contents',
|
|
1565
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-checkbox
|
|
1676
|
+
}, 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" }]
|
|
1566
1677
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }] } });
|
|
1567
1678
|
|
|
1679
|
+
/**
|
|
1680
|
+
* Helm switch size each of our sizes maps onto.
|
|
1681
|
+
*
|
|
1682
|
+
* The helm ships two real scales — `sm` (14x24 track, 12px thumb) and `default` (18.4x32, 16px) —
|
|
1683
|
+
* and keys both the track and the thumb off the resulting `data-size` attribute. Mapping onto the
|
|
1684
|
+
* nearer of the two keeps that attribute truthful, so `yuwSwitchSizeVariants` only has to override
|
|
1685
|
+
* the sizes that genuinely differ, under the prefix the helm actually emits.
|
|
1686
|
+
*/
|
|
1687
|
+
const YUW_SWITCH_HELM_SIZE = {
|
|
1688
|
+
xs: 'sm',
|
|
1689
|
+
sm: 'default',
|
|
1690
|
+
default: 'default',
|
|
1691
|
+
lg: 'default',
|
|
1692
|
+
};
|
|
1693
|
+
/**
|
|
1694
|
+
* Track and thumb geometry for `<yuw-switch>`.
|
|
1695
|
+
*
|
|
1696
|
+
* A switch is not a field, so these are not the field heights — a 40px-tall switch would dominate any
|
|
1697
|
+
* row it sits in. The scale keeps the helm's ~1.75:1 track ratio and its 2px inset, and shifts the
|
|
1698
|
+
* whole thing up one step so `default` reads at 22x36 instead of the helm's cramped 18.4x32.
|
|
1699
|
+
* Sizes are named to match the rest of the library, not to match its pixel values.
|
|
1700
|
+
*
|
|
1701
|
+
* Each track width is exactly twice its thumb. That is not cosmetic: the helm moves the thumb with
|
|
1702
|
+
* `translate-x-[calc(100%-2px)]`, which is thumb-relative, so the travel it produces (`thumb - 2`)
|
|
1703
|
+
* only equals the space available (`track - 2*border - thumb`) when `track == 2 * thumb`. Break that
|
|
1704
|
+
* and the thumb stops short of the far edge, leaving the on state visibly off-centre.
|
|
1705
|
+
*
|
|
1706
|
+
* Only the sizes that differ from the mapped helm scale are declared, each under the prefix that
|
|
1707
|
+
* scale emits (see {@link YUW_SWITCH_HELM_SIZE}) — a plain `h-*` does not displace the helm's
|
|
1708
|
+
* `data-[size=…]:h-*`, it just loses to it on specificity. `xs` maps exactly onto the helm's `sm`
|
|
1709
|
+
* scale, so it needs nothing. The thumb's `translate-x-[calc(100%-2px)]` is thumb-relative and
|
|
1710
|
+
* follows any size change on its own.
|
|
1711
|
+
*/
|
|
1712
|
+
const yuwSwitchSizeVariants = cva('', {
|
|
1713
|
+
variants: {
|
|
1714
|
+
size: {
|
|
1715
|
+
xs: '',
|
|
1716
|
+
sm: 'data-[size=default]:h-[18px] data-[size=default]:w-[28px] [&_[data-slot=switch-thumb]]:group-data-[size=default]/switch:size-3.5',
|
|
1717
|
+
default: 'data-[size=default]:h-[22px] data-[size=default]:w-[36px] [&_[data-slot=switch-thumb]]:group-data-[size=default]/switch:size-[18px]',
|
|
1718
|
+
lg: 'data-[size=default]:h-[26px] data-[size=default]:w-[44px] [&_[data-slot=switch-thumb]]:group-data-[size=default]/switch:size-[22px]',
|
|
1719
|
+
},
|
|
1720
|
+
},
|
|
1721
|
+
defaultVariants: {
|
|
1722
|
+
size: 'default',
|
|
1723
|
+
},
|
|
1724
|
+
});
|
|
1725
|
+
|
|
1568
1726
|
/**
|
|
1569
1727
|
* Toggle switch control for binary settings and immediate state changes.
|
|
1570
1728
|
*
|
|
@@ -1574,7 +1732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1574
1732
|
*
|
|
1575
1733
|
* Inputs / Models:
|
|
1576
1734
|
* - `checked` (alias for `value`): Two-way boolean on/off state. Bind as `[(checked)]`.
|
|
1577
|
-
* - `size`: Track size
|
|
1735
|
+
* - `size`: Track size (`'default'`, `'xs'`, `'sm'`, `'lg'`). Named to match the rest of the
|
|
1736
|
+
* library; the pixel values keep a switch's own proportions rather than the field heights.
|
|
1578
1737
|
* - `disabled`: Disables switch interaction.
|
|
1579
1738
|
* - `inputId`: HTML `id` for the underlying control, enabling external `<label for="...">` association.
|
|
1580
1739
|
* - `ariaLabel`: Accessible name for switches with no visible adjacent label.
|
|
@@ -1590,6 +1749,8 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
|
|
|
1590
1749
|
super(...arguments);
|
|
1591
1750
|
this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
|
|
1592
1751
|
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1752
|
+
this._helmSize = computed(() => YUW_SWITCH_HELM_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "_helmSize" }] : /* istanbul ignore next */ []));
|
|
1753
|
+
this._switchClass = computed(() => yuwSwitchSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_switchClass" }] : /* istanbul ignore next */ []));
|
|
1593
1754
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1594
1755
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1595
1756
|
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -1604,13 +1765,13 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
|
|
|
1604
1765
|
this._commit(checked);
|
|
1605
1766
|
}
|
|
1606
1767
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1607
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", 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]=\"
|
|
1768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", 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 }); }
|
|
1608
1769
|
}
|
|
1609
1770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSwitchComponent, decorators: [{
|
|
1610
1771
|
type: Component,
|
|
1611
1772
|
args: [{ selector: 'yuw-switch', imports: [...HlmSwitchImports, YuwLabel], providers: [provideValueAccessor(YuwSwitchComponent)], host: {
|
|
1612
1773
|
class: 'contents',
|
|
1613
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n <hlm-switch\n [checked]=\"value()\"\n [size]=\"
|
|
1774
|
+
}, 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" }]
|
|
1614
1775
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
|
|
1615
1776
|
|
|
1616
1777
|
/** Module-level counter so every unnamed group gets its own radio `name`. Binding `[name]`
|
|
@@ -1662,13 +1823,13 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
|
|
|
1662
1823
|
this._commit(next);
|
|
1663
1824
|
}
|
|
1664
1825
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1665
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", 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 }); }
|
|
1826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", 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 }); }
|
|
1666
1827
|
}
|
|
1667
1828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
|
|
1668
1829
|
type: Component,
|
|
1669
1830
|
args: [{ selector: 'yuw-radio-group', imports: [...HlmRadioGroupImports, YuwLabel], providers: [provideValueAccessor(YuwRadioGroupComponent)], host: {
|
|
1670
1831
|
class: 'contents',
|
|
1671
|
-
}, 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" }]
|
|
1832
|
+
}, 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" }]
|
|
1672
1833
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
1673
1834
|
|
|
1674
1835
|
/**
|
|
@@ -1923,13 +2084,13 @@ const YuwEmptyImports = [
|
|
|
1923
2084
|
*/
|
|
1924
2085
|
class YuwContextMenuCheckboxIndicatorComponent {
|
|
1925
2086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1926
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuCheckboxIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-checkbox-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-checkbox-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuCheckboxIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-checkbox-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-checkbox-indicator />\n", dependencies: [{ kind: "component", type: HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1927
2088
|
}
|
|
1928
2089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxIndicatorComponent, decorators: [{
|
|
1929
2090
|
type: Component,
|
|
1930
2091
|
args: [{ selector: 'yuw-context-menu-checkbox-indicator', imports: [HlmDropdownMenuCheckboxIndicator], host: {
|
|
1931
2092
|
class: 'contents',
|
|
1932
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-checkbox-indicator/>\n" }]
|
|
2093
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-checkbox-indicator />\n" }]
|
|
1933
2094
|
}] });
|
|
1934
2095
|
|
|
1935
2096
|
/**
|
|
@@ -1948,13 +2109,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1948
2109
|
*/
|
|
1949
2110
|
class YuwContextMenuRadioIndicatorComponent {
|
|
1950
2111
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuRadioIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-radio-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-radio-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuRadioIndicator, selector: "hlm-dropdown-menu-radio-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuRadioIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-radio-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-radio-indicator />\n", dependencies: [{ kind: "component", type: HlmDropdownMenuRadioIndicator, selector: "hlm-dropdown-menu-radio-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1952
2113
|
}
|
|
1953
2114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioIndicatorComponent, decorators: [{
|
|
1954
2115
|
type: Component,
|
|
1955
2116
|
args: [{ selector: 'yuw-context-menu-radio-indicator', imports: [HlmDropdownMenuRadioIndicator], host: {
|
|
1956
2117
|
class: 'contents',
|
|
1957
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-radio-indicator/>\n" }]
|
|
2118
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-radio-indicator />\n" }]
|
|
1958
2119
|
}] });
|
|
1959
2120
|
|
|
1960
2121
|
/**
|
|
@@ -1971,13 +2132,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1971
2132
|
*/
|
|
1972
2133
|
class YuwContextMenuSubIndicatorComponent {
|
|
1973
2134
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSubIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-sub-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-item-sub-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuItemSubIndicator, selector: "hlm-dropdown-menu-item-sub-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2135
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSubIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-sub-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-item-sub-indicator />\n", dependencies: [{ kind: "component", type: HlmDropdownMenuItemSubIndicator, selector: "hlm-dropdown-menu-item-sub-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1975
2136
|
}
|
|
1976
2137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubIndicatorComponent, decorators: [{
|
|
1977
2138
|
type: Component,
|
|
1978
2139
|
args: [{ selector: 'yuw-context-menu-sub-indicator', imports: [HlmDropdownMenuItemSubIndicator], host: {
|
|
1979
2140
|
class: 'contents',
|
|
1980
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-item-sub-indicator/>\n" }]
|
|
2141
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-item-sub-indicator />\n" }]
|
|
1981
2142
|
}] });
|
|
1982
2143
|
|
|
1983
2144
|
/**
|
|
@@ -2281,6 +2442,10 @@ let nextUniqueId = 0;
|
|
|
2281
2442
|
class YuwDatepickerComponent extends YuwValueAccessorBase {
|
|
2282
2443
|
constructor() {
|
|
2283
2444
|
super(...arguments);
|
|
2445
|
+
this._singleConfig = injectHlmDatePickerConfig();
|
|
2446
|
+
this._rangeConfig = injectHlmDateRangePickerConfig();
|
|
2447
|
+
this._multiConfig = injectHlmDatePickerMultiConfig();
|
|
2448
|
+
this._monthYearConfig = injectHlmMonthYearPickerConfig();
|
|
2284
2449
|
this.mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
2285
2450
|
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2286
2451
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -2290,16 +2455,14 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
|
|
|
2290
2455
|
this.captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
|
|
2291
2456
|
this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
2292
2457
|
this.buttonId = input(undefined, ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
|
|
2458
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2293
2459
|
this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
2294
2460
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2295
2461
|
this.formatDate = input(undefined, ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
|
|
2296
|
-
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
2297
2462
|
this._generatedButtonId = `yuw-datepicker-${++nextUniqueId}`;
|
|
2463
|
+
this._triggerClass = computed(() => cn(yuwButtonVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
|
|
2464
|
+
this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
2298
2465
|
this._buttonId = computed(() => this.buttonId() ?? this._generatedButtonId, ...(ngDevMode ? [{ debugName: "_buttonId" }] : /* istanbul ignore next */ []));
|
|
2299
|
-
this._singleConfig = injectHlmDatePickerConfig();
|
|
2300
|
-
this._rangeConfig = injectHlmDateRangePickerConfig();
|
|
2301
|
-
this._multiConfig = injectHlmDatePickerMultiConfig();
|
|
2302
|
-
this._monthYearConfig = injectHlmMonthYearPickerConfig();
|
|
2303
2466
|
this._formatSingle = computed(() => this.formatDate() ?? this._singleConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatSingle" }] : /* istanbul ignore next */ []));
|
|
2304
2467
|
this._formatMonthYear = computed(() => this.formatDate() ?? this._monthYearConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatMonthYear" }] : /* istanbul ignore next */ []));
|
|
2305
2468
|
this._formatRange = computed(() => {
|
|
@@ -2342,14 +2505,14 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
|
|
|
2342
2505
|
this._commit(next);
|
|
2343
2506
|
}
|
|
2344
2507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", 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
|
|
2508
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", 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 }); }
|
|
2346
2509
|
}
|
|
2347
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
|
|
2348
2511
|
type: Component,
|
|
2349
2512
|
args: [{ selector: 'yuw-datepicker', imports: [...HlmDatePickerImports], providers: [provideValueAccessor(YuwDatepickerComponent)], host: {
|
|
2350
2513
|
class: 'contents',
|
|
2351
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode()) {\n @case ('range') {\n <hlm-date-range-picker
|
|
2352
|
-
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }] } });
|
|
2514
|
+
}, 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" }]
|
|
2515
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }] } });
|
|
2353
2516
|
|
|
2354
2517
|
/**
|
|
2355
2518
|
* Outer wrapper container directive for responsive HTML table scroll container.
|
|
@@ -2670,9 +2833,7 @@ class YuwDatatableComponent {
|
|
|
2670
2833
|
...YUW_DATATABLE_FEATURES,
|
|
2671
2834
|
coreRowModel: createCoreRowModel(),
|
|
2672
2835
|
filteredRowModel: createFilteredRowModel(),
|
|
2673
|
-
...(this.sortable()
|
|
2674
|
-
? { sortedRowModel: createSortedRowModel(), sortFns }
|
|
2675
|
-
: {}),
|
|
2836
|
+
...(this.sortable() ? { sortedRowModel: createSortedRowModel(), sortFns } : {}),
|
|
2676
2837
|
...(this.paginated() ? { paginatedRowModel: createPaginatedRowModel() } : {}),
|
|
2677
2838
|
},
|
|
2678
2839
|
data: this.data(),
|
|
@@ -2748,13 +2909,13 @@ class YuwDatatableComponent {
|
|
|
2748
2909
|
this.table.setOptions((previous) => ({ ...previous, ...options }));
|
|
2749
2910
|
}
|
|
2750
2911
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n <table yuwTable [class]=\"_tableClass()\">\n @if (caption()) {\n <caption yuwCaption>{{ caption() }}</caption>\n }\n\n <thead yuwTHead [class]=\"_headClass()\">\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n <tr yuwTr [class]=\"_rowClass()\">\n @for (header of headerGroup.headers; track header.id) {\n @let sorted = header.column.getIsSorted();\n <th
|
|
2912
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n <table yuwTable [class]=\"_tableClass()\">\n @if (caption()) {\n <caption yuwCaption>{{ caption() }}</caption>\n }\n\n <thead yuwTHead [class]=\"_headClass()\">\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n <tr yuwTr [class]=\"_rowClass()\">\n @for (header of headerGroup.headers; track header.id) {\n @let sorted = header.column.getIsSorted();\n <th\n yuwTh\n scope=\"col\"\n [attr.colspan]=\"header.colSpan\"\n [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n [class]=\"_cellClasses().get(header.column.id)?.header\"\n >\n @if (!header.isPlaceholder) {\n @if (sortable() && header.column.getCanSort()) {\n <button\n type=\"button\"\n class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n (click)=\"header.column.toggleSorting()\"\n >\n <ng-container\n *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n >\n {{ rendered }}\n </ng-container>\n\n <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n </button>\n } @else {\n <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n {{ rendered }}\n </ng-container>\n }\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody yuwTBody>\n @if (loading()) {\n @for (row of _skeletonRows(); track row) {\n <tr yuwTr [class]=\"_rowClass()\">\n @for (column of table.getVisibleLeafColumns(); track column.id) {\n <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n <span yuwSkeleton class=\"block h-4 w-full\"></span>\n </td>\n }\n </tr>\n }\n } @else if (_isEmpty()) {\n <tr yuwTr [class]=\"_rowClass()\">\n <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n {{ emptyText() ?? '' }}\n </td>\n </tr>\n } @else {\n @for (row of table.getRowModel().rows; track row.id) {\n <tr yuwTr [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n @for (cell of row.getVisibleCells(); track cell.id) {\n <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n {{ rendered }}\n </ng-container>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (paginated()) {\n <div class=\"flex items-center justify-between gap-4 py-3\">\n @if (selectable()) {\n <p class=\"text-sm text-muted-foreground\">\n {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n </p>\n } @else {\n <span></span>\n }\n\n <div class=\"flex items-center\">\n <yuw-pagination\n [page]=\"currentPage()\"\n (pageChange)=\"onPageChange($event)\"\n [totalPages]=\"table.getPageCount() || 1\"\n [previousLabel]=\"previousPageLabel()\"\n [nextLabel]=\"nextPageLabel()\"\n [ellipsisSrText]=\"paginationEllipsisSrText()\"\n [ariaLabel]=\"paginationAriaLabel()\"\n color=\"secondary\"\n size=\"icon-sm\"\n />\n </div>\n </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["page", "totalPages", "previousLabel", "nextLabel", "ellipsisSrText", "size", "color", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2752
2913
|
}
|
|
2753
2914
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, decorators: [{
|
|
2754
2915
|
type: Component,
|
|
2755
2916
|
args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
|
|
2756
2917
|
class: 'contents',
|
|
2757
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n <table yuwTable [class]=\"_tableClass()\">\n @if (caption()) {\n <caption yuwCaption>{{ caption() }}</caption>\n }\n\n <thead yuwTHead [class]=\"_headClass()\">\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n <tr yuwTr [class]=\"_rowClass()\">\n @for (header of headerGroup.headers; track header.id) {\n @let sorted = header.column.getIsSorted();\n <th
|
|
2918
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n <table yuwTable [class]=\"_tableClass()\">\n @if (caption()) {\n <caption yuwCaption>{{ caption() }}</caption>\n }\n\n <thead yuwTHead [class]=\"_headClass()\">\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n <tr yuwTr [class]=\"_rowClass()\">\n @for (header of headerGroup.headers; track header.id) {\n @let sorted = header.column.getIsSorted();\n <th\n yuwTh\n scope=\"col\"\n [attr.colspan]=\"header.colSpan\"\n [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n [class]=\"_cellClasses().get(header.column.id)?.header\"\n >\n @if (!header.isPlaceholder) {\n @if (sortable() && header.column.getCanSort()) {\n <button\n type=\"button\"\n class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n (click)=\"header.column.toggleSorting()\"\n >\n <ng-container\n *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n >\n {{ rendered }}\n </ng-container>\n\n <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n </button>\n } @else {\n <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n {{ rendered }}\n </ng-container>\n }\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody yuwTBody>\n @if (loading()) {\n @for (row of _skeletonRows(); track row) {\n <tr yuwTr [class]=\"_rowClass()\">\n @for (column of table.getVisibleLeafColumns(); track column.id) {\n <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n <span yuwSkeleton class=\"block h-4 w-full\"></span>\n </td>\n }\n </tr>\n }\n } @else if (_isEmpty()) {\n <tr yuwTr [class]=\"_rowClass()\">\n <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n {{ emptyText() ?? '' }}\n </td>\n </tr>\n } @else {\n @for (row of table.getRowModel().rows; track row.id) {\n <tr yuwTr [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n @for (cell of row.getVisibleCells(); track cell.id) {\n <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n {{ rendered }}\n </ng-container>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (paginated()) {\n <div class=\"flex items-center justify-between gap-4 py-3\">\n @if (selectable()) {\n <p class=\"text-sm text-muted-foreground\">\n {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n </p>\n } @else {\n <span></span>\n }\n\n <div class=\"flex items-center\">\n <yuw-pagination\n [page]=\"currentPage()\"\n (pageChange)=\"onPageChange($event)\"\n [totalPages]=\"table.getPageCount() || 1\"\n [previousLabel]=\"previousPageLabel()\"\n [nextLabel]=\"nextPageLabel()\"\n [ellipsisSrText]=\"paginationEllipsisSrText()\"\n [ariaLabel]=\"paginationAriaLabel()\"\n color=\"secondary\"\n size=\"icon-sm\"\n />\n </div>\n </div>\n}\n" }]
|
|
2758
2919
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
|
|
2759
2920
|
|
|
2760
2921
|
/**
|
|
@@ -2795,13 +2956,13 @@ class YuwAvatarComponent {
|
|
|
2795
2956
|
this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
|
|
2796
2957
|
}
|
|
2797
2958
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2798
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", 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 }, 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
|
|
2959
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", 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 }, 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$d.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$d.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$d.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$d.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$d.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$d.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2799
2960
|
}
|
|
2800
2961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAvatarComponent, decorators: [{
|
|
2801
2962
|
type: Component,
|
|
2802
2963
|
args: [{ selector: 'yuw-avatar', imports: [NgTemplateOutlet, ...HlmAvatarImports], host: {
|
|
2803
2964
|
class: 'contents',
|
|
2804
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, 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
|
|
2965
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
2805
2966
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
2806
2967
|
|
|
2807
2968
|
/**
|
|
@@ -3062,13 +3223,13 @@ class YuwSheetComponent {
|
|
|
3062
3223
|
this.open.set(state === 'open');
|
|
3063
3224
|
}
|
|
3064
3225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", 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 }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\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 yuwButtonIcon 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: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { 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 }); }
|
|
3226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", 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 }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\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 yuwButtonIcon 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: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { 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 }); }
|
|
3066
3227
|
}
|
|
3067
3228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, decorators: [{
|
|
3068
3229
|
type: Component,
|
|
3069
3230
|
args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
|
|
3070
3231
|
class: 'contents',
|
|
3071
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\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 yuwButtonIcon name=\"lucideX\"/>\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-sheet-content>\n</hlm-sheet>\n" }]
|
|
3232
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\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 yuwButtonIcon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-sheet-content>\n</hlm-sheet>\n" }]
|
|
3072
3233
|
}], propDecorators: { 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 }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }] } });
|
|
3073
3234
|
const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
|
|
3074
3235
|
|
|
@@ -3149,13 +3310,13 @@ class YuwPopoverComponent {
|
|
|
3149
3310
|
this.open.set(state === 'open');
|
|
3150
3311
|
}
|
|
3151
3312
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div
|
|
3313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", 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 (stateChanged)=\"onOpenChange($event)\"\n>\n @if (showTrigger()) {\n <yuw-button\n yuwPopoverTriggerButton\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: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3153
3314
|
}
|
|
3154
3315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, decorators: [{
|
|
3155
3316
|
type: Component,
|
|
3156
3317
|
args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
|
|
3157
3318
|
class: 'contents',
|
|
3158
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
3319
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n hlmPopover\n [state]=\"_popoverState()\"\n [align]=\"align()\"\n [sideOffset]=\"sideOffset()\"\n (stateChanged)=\"onOpenChange($event)\"\n>\n @if (showTrigger()) {\n <yuw-button\n yuwPopoverTriggerButton\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" }]
|
|
3159
3320
|
}], propDecorators: { 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 }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }] } });
|
|
3160
3321
|
|
|
3161
3322
|
/**
|
|
@@ -3226,13 +3387,13 @@ class YuwSpinnerComponent {
|
|
|
3226
3387
|
this.icon = input('lucideLoader2', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
3227
3388
|
}
|
|
3228
3389
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSpinnerComponent, isStandalone: true, selector: "yuw-spinner", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\"/>\n", dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["icon", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3390
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSpinnerComponent, isStandalone: true, selector: "yuw-spinner", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\" />\n", dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["icon", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3230
3391
|
}
|
|
3231
3392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSpinnerComponent, decorators: [{
|
|
3232
3393
|
type: Component,
|
|
3233
3394
|
args: [{ selector: 'yuw-spinner', imports: [HlmSpinner], host: {
|
|
3234
3395
|
class: 'contents',
|
|
3235
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\"/>\n" }]
|
|
3396
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\" />\n" }]
|
|
3236
3397
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
3237
3398
|
|
|
3238
3399
|
/**
|
|
@@ -3269,13 +3430,13 @@ class YuwToasterComponent {
|
|
|
3269
3430
|
this.expand = input(false, { ...(ngDevMode ? { debugName: "expand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3270
3431
|
}
|
|
3271
3432
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwToasterComponent, isStandalone: true, selector: "yuw-toaster", inputs: { richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-toaster\n [richColors]=\"richColors()\"\n [theme]=\"theme()\"\n [toastOptions]=\"toastOptions()\"\n [position]=\"position()\"\n [duration]=\"duration()\"\n [visibleToasts]=\"visibleToasts()\"\n [closeButton]=\"closeButton()\"\n [expand]=\"expand()\"/>\n", dependencies: [{ kind: "component", type: HlmToaster, selector: "hlm-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwToasterComponent, isStandalone: true, selector: "yuw-toaster", inputs: { richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-toaster\n [richColors]=\"richColors()\"\n [theme]=\"theme()\"\n [toastOptions]=\"toastOptions()\"\n [position]=\"position()\"\n [duration]=\"duration()\"\n [visibleToasts]=\"visibleToasts()\"\n [closeButton]=\"closeButton()\"\n [expand]=\"expand()\"\n/>\n", dependencies: [{ kind: "component", type: HlmToaster, selector: "hlm-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3273
3434
|
}
|
|
3274
3435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwToasterComponent, decorators: [{
|
|
3275
3436
|
type: Component,
|
|
3276
3437
|
args: [{ selector: 'yuw-toaster', imports: [HlmToaster], host: {
|
|
3277
3438
|
class: 'contents',
|
|
3278
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-toaster\n [richColors]=\"richColors()\"\n [theme]=\"theme()\"\n [toastOptions]=\"toastOptions()\"\n [position]=\"position()\"\n [duration]=\"duration()\"\n [visibleToasts]=\"visibleToasts()\"\n [closeButton]=\"closeButton()\"\n [expand]=\"expand()\"/>\n" }]
|
|
3439
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-toaster\n [richColors]=\"richColors()\"\n [theme]=\"theme()\"\n [toastOptions]=\"toastOptions()\"\n [position]=\"position()\"\n [duration]=\"duration()\"\n [visibleToasts]=\"visibleToasts()\"\n [closeButton]=\"closeButton()\"\n [expand]=\"expand()\"\n/>\n" }]
|
|
3279
3440
|
}], propDecorators: { richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], visibleToasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleToasts", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }] } });
|
|
3280
3441
|
|
|
3281
3442
|
/**
|
|
@@ -3372,13 +3533,13 @@ class YuwAlertComponent {
|
|
|
3372
3533
|
this.descriptionSlot = contentChild(YuwAlertDescriptionDirective, ...(ngDevMode ? [{ debugName: "descriptionSlot" }] : /* istanbul ignore next */ []));
|
|
3373
3534
|
}
|
|
3374
3535
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertComponent, isStandalone: true, selector: "yuw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasAction", first: true, predicate: YuwAlertActionDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: YuwAlertTitleDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: YuwAlertDescriptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n <ng-content select=\"[yuwAlertIcon]\"/>\n\n @if (titleSlot()) {\n <div hlmAlertTitle>\n <ng-content select=\"[yuwAlertTitle]\"/>\n </div>\n } @else if (title()) {\n <div hlmAlertTitle>{{ title() }}</div>\n }\n\n @if (descriptionSlot()) {\n <div hlmAlertDescription>\n <ng-content select=\"[yuwAlertDescription]\"/>\n </div>\n } @else if (description()) {\n <div hlmAlertDescription>{{ description() }}</div>\n }\n\n <ng-content/>\n\n @if (hasAction()) {\n <div hlmAlertAction>\n <ng-content select=\"[yuwAlertAction]\"/>\n </div>\n }\n</hlm-alert>\n", dependencies: [{ kind: "directive", type: HlmAlert, selector: "hlm-alert,[hlmAlert]", inputs: ["variant"] }, { kind: "directive", type: HlmAlertTitle, selector: "[hlmAlertTitle]" }, { kind: "directive", type: HlmAlertDescription, selector: "[hlmAlertDescription]" }, { kind: "directive", type: HlmAlertAction, selector: "[hlmAlertAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3536
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertComponent, isStandalone: true, selector: "yuw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasAction", first: true, predicate: YuwAlertActionDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: YuwAlertTitleDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: YuwAlertDescriptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n <ng-content select=\"[yuwAlertIcon]\" />\n\n @if (titleSlot()) {\n <div hlmAlertTitle>\n <ng-content select=\"[yuwAlertTitle]\" />\n </div>\n } @else if (title()) {\n <div hlmAlertTitle>{{ title() }}</div>\n }\n\n @if (descriptionSlot()) {\n <div hlmAlertDescription>\n <ng-content select=\"[yuwAlertDescription]\" />\n </div>\n } @else if (description()) {\n <div hlmAlertDescription>{{ description() }}</div>\n }\n\n <ng-content />\n\n @if (hasAction()) {\n <div hlmAlertAction>\n <ng-content select=\"[yuwAlertAction]\" />\n </div>\n }\n</hlm-alert>\n", dependencies: [{ kind: "directive", type: HlmAlert, selector: "hlm-alert,[hlmAlert]", inputs: ["variant"] }, { kind: "directive", type: HlmAlertTitle, selector: "[hlmAlertTitle]" }, { kind: "directive", type: HlmAlertDescription, selector: "[hlmAlertDescription]" }, { kind: "directive", type: HlmAlertAction, selector: "[hlmAlertAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3376
3537
|
}
|
|
3377
3538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertComponent, decorators: [{
|
|
3378
3539
|
type: Component,
|
|
3379
3540
|
args: [{ selector: 'yuw-alert', imports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertAction], host: {
|
|
3380
3541
|
class: 'contents',
|
|
3381
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n <ng-content select=\"[yuwAlertIcon]\"/>\n\n @if (titleSlot()) {\n <div hlmAlertTitle>\n <ng-content select=\"[yuwAlertTitle]\"/>\n </div>\n } @else if (title()) {\n <div hlmAlertTitle>{{ title() }}</div>\n }\n\n @if (descriptionSlot()) {\n <div hlmAlertDescription>\n <ng-content select=\"[yuwAlertDescription]\"/>\n </div>\n } @else if (description()) {\n <div hlmAlertDescription>{{ description() }}</div>\n }\n\n <ng-content/>\n\n @if (hasAction()) {\n <div hlmAlertAction>\n <ng-content select=\"[yuwAlertAction]\"/>\n </div>\n }\n</hlm-alert>\n" }]
|
|
3542
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n <ng-content select=\"[yuwAlertIcon]\" />\n\n @if (titleSlot()) {\n <div hlmAlertTitle>\n <ng-content select=\"[yuwAlertTitle]\" />\n </div>\n } @else if (title()) {\n <div hlmAlertTitle>{{ title() }}</div>\n }\n\n @if (descriptionSlot()) {\n <div hlmAlertDescription>\n <ng-content select=\"[yuwAlertDescription]\" />\n </div>\n } @else if (description()) {\n <div hlmAlertDescription>{{ description() }}</div>\n }\n\n <ng-content />\n\n @if (hasAction()) {\n <div hlmAlertAction>\n <ng-content select=\"[yuwAlertAction]\" />\n </div>\n }\n</hlm-alert>\n" }]
|
|
3382
3543
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], hasAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertActionDirective), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertTitleDirective), { isSignal: true }] }], descriptionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDescriptionDirective), { isSignal: true }] }] } });
|
|
3383
3544
|
const YuwAlertImports = [
|
|
3384
3545
|
YuwAlertComponent,
|
|
@@ -3404,9 +3565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3404
3565
|
type: Directive,
|
|
3405
3566
|
args: [{
|
|
3406
3567
|
selector: 'yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]',
|
|
3407
|
-
hostDirectives: [
|
|
3408
|
-
{ directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: yuwDialogTriggerFor', 'type'] },
|
|
3409
|
-
],
|
|
3568
|
+
hostDirectives: [{ directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: yuwDialogTriggerFor', 'type'] }],
|
|
3410
3569
|
host: { 'data-slot': 'dialog-trigger' },
|
|
3411
3570
|
}]
|
|
3412
3571
|
}] });
|
|
@@ -3499,13 +3658,13 @@ class YuwDialogComponent {
|
|
|
3499
3658
|
this.open.set(state === 'open');
|
|
3500
3659
|
}
|
|
3501
3660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3502
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", 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 [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwDialogTrigger]\"/>\n </yuw-button>\n }\n\n <hlm-dialog-content
|
|
3661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", 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 [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 inset-t-2\">\n <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon yuwButtonIcon 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$l.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$l.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$l.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$l.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$l.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$l.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$l.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { 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 }); }
|
|
3503
3662
|
}
|
|
3504
3663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, decorators: [{
|
|
3505
3664
|
type: Component,
|
|
3506
3665
|
args: [{ selector: 'yuw-dialog', imports: [...HlmDialogImports, YuwButtonComponent, YuwDialogTriggerDirective, YuwDialogCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
|
|
3507
3666
|
class: 'contents',
|
|
3508
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n <ng-content select=\"[yuwDialogTrigger]\"/>\n </yuw-button>\n }\n\n <hlm-dialog-content
|
|
3667
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n @if (showTrigger()) {\n <yuw-button yuwDialogTriggerButton [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 inset-t-2\">\n <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n <ng-icon yuwButtonIcon name=\"lucideX\" />\n <span class=\"sr-only\">{{ closeLabel() }}</span>\n </yuw-button>\n </div>\n }\n </hlm-dialog-content>\n</hlm-dialog>\n" }]
|
|
3509
3668
|
}], propDecorators: { 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 }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDialogFooterDirective), { isSignal: true }] }] } });
|
|
3510
3669
|
const YuwDialogImports = [YuwDialogComponent, YuwDialogFooterDirective];
|
|
3511
3670
|
|
|
@@ -3606,15 +3765,42 @@ class YuwAlertDialogComponent {
|
|
|
3606
3765
|
this.open.set(state === 'open');
|
|
3607
3766
|
}
|
|
3608
3767
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3609
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", 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: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, 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$n.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$n.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$n.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$n.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$n.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$n.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$n.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$n.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", 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: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, 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$n.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$n.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$n.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$n.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$n.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$n.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$n.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$n.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3610
3769
|
}
|
|
3611
3770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
|
|
3612
3771
|
type: Component,
|
|
3613
3772
|
args: [{ selector: 'yuw-alert-dialog', imports: [...HlmAlertDialogImports, YuwButtonComponent, YuwAlertDialogTriggerDirective], host: {
|
|
3614
3773
|
class: 'contents',
|
|
3615
|
-
}, 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" }]
|
|
3774
|
+
}, 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" }]
|
|
3616
3775
|
}], propDecorators: { 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 }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: true }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: true }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], hasMedia: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDialogMediaDirective), { isSignal: true }] }] } });
|
|
3617
3776
|
|
|
3777
|
+
/**
|
|
3778
|
+
* Size classes for `<yuw-tabs>`, applied to the `hlm-tabs-list`.
|
|
3779
|
+
*
|
|
3780
|
+
* Two things scale, and both have to be written with the helm's own modifier prefixes so
|
|
3781
|
+
* tailwind-merge displaces the helm class rather than leaving it standing:
|
|
3782
|
+
*
|
|
3783
|
+
* - The list height, declared by the helm as `group-data-horizontal/tabs:h-8`. Only the horizontal
|
|
3784
|
+
* orientation has a fixed height; the vertical one is `h-fit` and is left alone.
|
|
3785
|
+
* - The triggers' horizontal padding, reached through a descendant selector. The helm's `px-1.5` is
|
|
3786
|
+
* tight enough that a taller list would look cramped, and the triggers are separate components
|
|
3787
|
+
* with no class passthrough. Their height needs nothing — `h-[calc(100%-1px)]` already tracks the
|
|
3788
|
+
* list.
|
|
3789
|
+
*/
|
|
3790
|
+
const yuwTabsSizeVariants = cva('', {
|
|
3791
|
+
variants: {
|
|
3792
|
+
size: {
|
|
3793
|
+
default: 'group-data-horizontal/tabs:h-10 [&_[data-slot=tabs-trigger]]:px-2.5',
|
|
3794
|
+
xs: 'group-data-horizontal/tabs:h-7 [&_[data-slot=tabs-trigger]]:px-1.5',
|
|
3795
|
+
sm: 'group-data-horizontal/tabs:h-9 [&_[data-slot=tabs-trigger]]:px-2',
|
|
3796
|
+
lg: 'group-data-horizontal/tabs:h-11 [&_[data-slot=tabs-trigger]]:px-3',
|
|
3797
|
+
},
|
|
3798
|
+
},
|
|
3799
|
+
defaultVariants: {
|
|
3800
|
+
size: 'default',
|
|
3801
|
+
},
|
|
3802
|
+
});
|
|
3803
|
+
|
|
3618
3804
|
/**
|
|
3619
3805
|
* Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
|
|
3620
3806
|
* id of the tab it belongs to, matching an entry in the `tabs` input.
|
|
@@ -3651,6 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3651
3837
|
* - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
|
|
3652
3838
|
* - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
|
|
3653
3839
|
* programmatically; listen to `activeTabChange` to react to activations.
|
|
3840
|
+
* - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
|
|
3654
3841
|
* - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
|
|
3655
3842
|
* - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
|
|
3656
3843
|
* - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
|
|
@@ -3669,6 +3856,8 @@ class YuwTabsComponent {
|
|
|
3669
3856
|
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
3670
3857
|
this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
3671
3858
|
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3859
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3860
|
+
this._listClass = computed(() => yuwTabsSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
|
|
3672
3861
|
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
3673
3862
|
this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
|
|
3674
3863
|
this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
|
|
@@ -3677,14 +3866,14 @@ class YuwTabsComponent {
|
|
|
3677
3866
|
this.activeTab.set(tabId);
|
|
3678
3867
|
}
|
|
3679
3868
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3680
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ 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()\">\n @for (tab of tabs(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</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 }); }
|
|
3869
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ 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 tabs(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</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 }); }
|
|
3681
3870
|
}
|
|
3682
3871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, decorators: [{
|
|
3683
3872
|
type: Component,
|
|
3684
3873
|
args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
|
|
3685
3874
|
class: 'contents',
|
|
3686
|
-
}, 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()\">\n @for (tab of tabs(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</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" }]
|
|
3687
|
-
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }] } });
|
|
3875
|
+
}, 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 tabs(); track tab.id) {\n <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</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" }]
|
|
3876
|
+
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }] } });
|
|
3688
3877
|
|
|
3689
3878
|
/**
|
|
3690
3879
|
* Container directive for a single file attachment card.
|
|
@@ -4110,9 +4299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
4110
4299
|
type: Directive,
|
|
4111
4300
|
args: [{
|
|
4112
4301
|
selector: 'a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]',
|
|
4113
|
-
hostDirectives: [
|
|
4114
|
-
{ directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] },
|
|
4115
|
-
],
|
|
4302
|
+
hostDirectives: [{ directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] }],
|
|
4116
4303
|
}]
|
|
4117
4304
|
}] });
|
|
4118
4305
|
/** Divider between sidebar sections. */
|
|
@@ -4204,7 +4391,7 @@ class YuwSidebarNavComponent {
|
|
|
4204
4391
|
this.itemClicked.emit({ id, event });
|
|
4205
4392
|
}
|
|
4206
4393
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4207
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@for (group of _groups(); track group.id) {\n <div yuwSidebarGroup>\n @if (group.label) {\n <div yuwSidebarGroupLabel>{{ group.label }}</div>\n }\n\n <div yuwSidebarGroupContent>\n <ul yuwSidebarMenu>\n @for (item of group.items; track item.id) {\n <li yuwSidebarMenuItem>\n @if (item.route) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [routerLink]=\"item.route\"\n routerLinkActive\n #link=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"item.activeOptions\"\n [isActive]=\"link.isActive\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-current]=\"link.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"link.isActive || item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\"/>\n }\n <span>{{ item.label }}</span>\n </a>\n } @else if (item.href) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [href]=\"item.href\"\n [attr.target]=\"item.target\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\"/>\n }\n <span>{{ item.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n type=\"button\"\n [tooltip]=\"item.tooltipText\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"onItemClick(item.id, $event)\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\"/>\n }\n <span>{{ item.label }}</span>\n </button>\n }\n\n @if (item.badge) {\n <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n }\n\n @if (item.children.length) {\n <ul yuwSidebarMenuSub>\n @for (child of item.children; track child.id) {\n <li yuwSidebarMenuSubItem>\n @if (child.route) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [routerLink]=\"child.route\"\n routerLinkActive\n #childLink=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"child.activeOptions\"\n [isActive]=\"childLink.isActive\"\n [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else if (child.href) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [href]=\"child.href\"\n [attr.target]=\"child.target\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n type=\"button\"\n [disabled]=\"child.disabled ?? false\"\n (click)=\"onItemClick(child.id, $event)\"\n >\n <span>{{ child.label }}</span>\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n </div>\n\n @if (group.separatorAfter) {\n <div yuwSidebarSeparator></div>\n }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4394
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@for (group of _groups(); track group.id) {\n <div yuwSidebarGroup>\n @if (group.label) {\n <div yuwSidebarGroupLabel>{{ group.label }}</div>\n }\n\n <div yuwSidebarGroupContent>\n <ul yuwSidebarMenu class=\"gap-1\">\n @for (item of group.items; track item.id) {\n <li yuwSidebarMenuItem>\n @if (item.route) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [routerLink]=\"item.route\"\n routerLinkActive\n #link=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"item.activeOptions\"\n [isActive]=\"link.isActive\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-current]=\"link.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"link.isActive || item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\" />\n }\n <span>{{ item.label }}</span>\n </a>\n } @else if (item.href) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [href]=\"item.href\"\n [attr.target]=\"item.target\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\" />\n }\n <span>{{ item.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n type=\"button\"\n [tooltip]=\"item.tooltipText\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"onItemClick(item.id, $event)\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\" />\n }\n <span>{{ item.label }}</span>\n </button>\n }\n\n @if (item.badge) {\n <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n }\n\n @if (item.children.length) {\n <ul yuwSidebarMenuSub>\n @for (child of item.children; track child.id) {\n <li yuwSidebarMenuSubItem>\n @if (child.route) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [routerLink]=\"child.route\"\n routerLinkActive\n #childLink=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"child.activeOptions\"\n [isActive]=\"childLink.isActive\"\n [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else if (child.href) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [href]=\"child.href\"\n [attr.target]=\"child.target\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n type=\"button\"\n [disabled]=\"child.disabled ?? false\"\n (click)=\"onItemClick(child.id, $event)\"\n >\n <span>{{ child.label }}</span>\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n </div>\n\n @if (group.separatorAfter) {\n <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4208
4395
|
}
|
|
4209
4396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
|
|
4210
4397
|
type: Component,
|
|
@@ -4225,7 +4412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
4225
4412
|
YuwSidebarSeparatorDirective,
|
|
4226
4413
|
], host: {
|
|
4227
4414
|
class: 'contents',
|
|
4228
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of _groups(); track group.id) {\n <div yuwSidebarGroup>\n @if (group.label) {\n <div yuwSidebarGroupLabel>{{ group.label }}</div>\n }\n\n <div yuwSidebarGroupContent>\n <ul yuwSidebarMenu>\n @for (item of group.items; track item.id) {\n <li yuwSidebarMenuItem>\n @if (item.route) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [routerLink]=\"item.route\"\n routerLinkActive\n #link=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"item.activeOptions\"\n [isActive]=\"link.isActive\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-current]=\"link.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"link.isActive || item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\"/>\n }\n <span>{{ item.label }}</span>\n </a>\n } @else if (item.href) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [href]=\"item.href\"\n [attr.target]=\"item.target\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\"/>\n }\n <span>{{ item.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n type=\"button\"\n [tooltip]=\"item.tooltipText\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"onItemClick(item.id, $event)\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\"/>\n }\n <span>{{ item.label }}</span>\n </button>\n }\n\n @if (item.badge) {\n <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n }\n\n @if (item.children.length) {\n <ul yuwSidebarMenuSub>\n @for (child of item.children; track child.id) {\n <li yuwSidebarMenuSubItem>\n @if (child.route) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [routerLink]=\"child.route\"\n routerLinkActive\n #childLink=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"child.activeOptions\"\n [isActive]=\"childLink.isActive\"\n [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else if (child.href) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [href]=\"child.href\"\n [attr.target]=\"child.target\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n type=\"button\"\n [disabled]=\"child.disabled ?? false\"\n (click)=\"onItemClick(child.id, $event)\"\n >\n <span>{{ child.label }}</span>\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n </div>\n\n @if (group.separatorAfter) {\n <div yuwSidebarSeparator></div>\n }\n}\n" }]
|
|
4415
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of _groups(); track group.id) {\n <div yuwSidebarGroup>\n @if (group.label) {\n <div yuwSidebarGroupLabel>{{ group.label }}</div>\n }\n\n <div yuwSidebarGroupContent>\n <ul yuwSidebarMenu class=\"gap-1\">\n @for (item of group.items; track item.id) {\n <li yuwSidebarMenuItem>\n @if (item.route) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [routerLink]=\"item.route\"\n routerLinkActive\n #link=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"item.activeOptions\"\n [isActive]=\"link.isActive\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-current]=\"link.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"link.isActive || item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\" />\n }\n <span>{{ item.label }}</span>\n </a>\n } @else if (item.href) {\n <a\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n [href]=\"item.href\"\n [attr.target]=\"item.target\"\n [tooltip]=\"item.tooltipText\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"item.disabled\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\" />\n }\n <span>{{ item.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuButton\n closeMobileSidebarOnClick\n type=\"button\"\n [tooltip]=\"item.tooltipText\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"onItemClick(item.id, $event)\"\n >\n @if (item.icon) {\n <ng-icon [name]=\"item.icon\" />\n }\n <span>{{ item.label }}</span>\n </button>\n }\n\n @if (item.badge) {\n <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n }\n\n @if (item.children.length) {\n <ul yuwSidebarMenuSub>\n @for (child of item.children; track child.id) {\n <li yuwSidebarMenuSubItem>\n @if (child.route) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [routerLink]=\"child.route\"\n routerLinkActive\n #childLink=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"child.activeOptions\"\n [isActive]=\"childLink.isActive\"\n [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else if (child.href) {\n <a\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n [href]=\"child.href\"\n [attr.target]=\"child.target\"\n [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n [class.pointer-events-none]=\"child.disabled\"\n >\n <span>{{ child.label }}</span>\n </a>\n } @else {\n <button\n yuwSidebarMenuSubButton\n closeMobileSidebarOnClick\n type=\"button\"\n [disabled]=\"child.disabled ?? false\"\n (click)=\"onItemClick(child.id, $event)\"\n >\n <span>{{ child.label }}</span>\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </div>\n </div>\n\n @if (group.separatorAfter) {\n <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n }\n}\n" }]
|
|
4229
4416
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
|
|
4230
4417
|
|
|
4231
4418
|
/**
|
|
@@ -4314,7 +4501,7 @@ class YuwSidebarComponent {
|
|
|
4314
4501
|
this.itemClicked = output();
|
|
4315
4502
|
}
|
|
4316
4503
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n [side]=\"side()\"\n [variant]=\"variant()\"\n [collapsible]=\"collapsible()\"\n [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\"/>\n\n @if (content(); as nav) {\n <div yuwSidebarContent>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\"/>\n <ng-content select=\"[yuwSidebarContentExtra]\"/>\n </div>\n }\n\n <ng-content/>\n\n @if (footer(); as nav) {\n <div yuwSidebarFooter>\n <div yuwSidebarSeparator></div>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\"/>\n <ng-content select=\"[yuwSidebarFooterExtra]\"/>\n </div>\n }\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content"], outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4504
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n [side]=\"side()\"\n [variant]=\"variant()\"\n [collapsible]=\"collapsible()\"\n [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n @if (content(); as nav) {\n <div yuwSidebarContent>\n <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n <ng-content select=\"[yuwSidebarContentExtra]\" />\n </div>\n }\n\n <ng-content />\n\n @if (footer(); as nav) {\n <div yuwSidebarFooter>\n <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n <ng-content select=\"[yuwSidebarFooterExtra]\" />\n </div>\n }\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content"], outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4318
4505
|
}
|
|
4319
4506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
|
|
4320
4507
|
type: Component,
|
|
@@ -4326,7 +4513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
4326
4513
|
YuwSidebarSeparatorDirective,
|
|
4327
4514
|
], host: {
|
|
4328
4515
|
class: 'contents',
|
|
4329
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n [side]=\"side()\"\n [variant]=\"variant()\"\n [collapsible]=\"collapsible()\"\n [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\"/>\n\n @if (content(); as nav) {\n <div yuwSidebarContent>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\"/>\n <ng-content select=\"[yuwSidebarContentExtra]\"/>\n </div>\n }\n\n <ng-content/>\n\n @if (footer(); as nav) {\n <div yuwSidebarFooter>\n <div yuwSidebarSeparator></div>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\"/>\n <ng-content select=\"[yuwSidebarFooterExtra]\"/>\n </div>\n }\n</hlm-sidebar>\n" }]
|
|
4516
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n [side]=\"side()\"\n [variant]=\"variant()\"\n [collapsible]=\"collapsible()\"\n [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n @if (content(); as nav) {\n <div yuwSidebarContent>\n <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n <ng-content select=\"[yuwSidebarContentExtra]\" />\n </div>\n }\n\n <ng-content />\n\n @if (footer(); as nav) {\n <div yuwSidebarFooter>\n <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n <ng-content select=\"[yuwSidebarFooterExtra]\" />\n </div>\n }\n</hlm-sidebar>\n" }]
|
|
4330
4517
|
}], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
|
|
4331
4518
|
|
|
4332
4519
|
/**
|