yukit-web 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/.npm/_cacache/content-v2/sha512/4f/1b/f689c8ddedb8797ff60d136bd61b5ed80207bbc30853891a131b94e7318092e7d0a1af4e19f6e699e04bb6e9b29ade310e757f6e1d8b4d3827c222f2f8be +1 -0
  2. package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488 +1 -1
  3. package/.npm/_logs/{2026-08-24T12_50_56_886Z-debug-0.log → 2026-08-25T12_25_25_519Z-debug-0.log} +10 -10
  4. package/.npm/_logs/{2026-08-24T12_50_57_442Z-debug-0.log → 2026-08-25T12_25_26_005Z-debug-0.log} +2 -2
  5. package/README.md +56 -1
  6. package/fesm2022/yukit-web.mjs +497 -108
  7. package/fesm2022/yukit-web.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/src/lib/theme/tokens/component-colors.css +4 -1
  10. package/types/yukit-web.d.ts +276 -23
  11. package/.npm/_cacache/content-v2/sha512/eb/7a/68501a82cc7271aaa1f0a48858c14b5c0f4e0a4cba643f7db7917ec76f90038089e5585323a72f65f739e434adb8b52a24b90387dac24cc6a24181783867 +0 -1
package/fesm2022/yukit-web.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { twMerge } from 'tailwind-merge';
3
3
  import * as i0 from '@angular/core';
4
- import { forwardRef, signal, Directive, input, inject, TemplateRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, ElementRef, Injector, afterNextRender, effect, numberAttribute, linkedSignal } from '@angular/core';
4
+ import { forwardRef, signal, Directive, input, inject, TemplateRef, ElementRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal } from '@angular/core';
5
5
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
6
  import { NgTemplateOutlet } from '@angular/common';
7
7
  import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
@@ -10,7 +10,7 @@ import * as i2 from 'yukit-web/helm/dropdown-menu';
10
10
  import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
11
11
  import { cva } from 'class-variance-authority';
12
12
  import { NgIcon, provideIcons } from '@ng-icons/core';
13
- import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye } from '@ng-icons/lucide';
13
+ import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
14
14
  import * as i1 from 'yukit-web/helm/badge';
15
15
  import { HlmBadge } from 'yukit-web/helm/badge';
16
16
  import * as i1$1 from 'yukit-web/helm/breadcrumb';
@@ -64,7 +64,7 @@ import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
64
64
  import * as i1$j from '@spartan-ng/brain/tooltip';
65
65
  import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
66
66
  import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
67
- import { hlm } from 'yukit-web/helm/utils';
67
+ import { hlm, classes } from 'yukit-web/helm/utils';
68
68
  import { HlmSpinner } from 'yukit-web/helm/spinner';
69
69
  import { HlmToaster } from 'yukit-web/helm/sonner';
70
70
  export { toast as yuwToast } from '@spartan-ng/brain/sonner';
@@ -82,8 +82,9 @@ import { HlmTabsImports } from 'yukit-web/helm/tabs';
82
82
  import * as i1$p from 'yukit-web/helm/attachment';
83
83
  import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
84
84
  import * as i1$q from 'yukit-web/helm/sidebar';
85
- import { injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset } from 'yukit-web/helm/sidebar';
85
+ import { HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
86
86
  export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
87
+ import { RouterLink, RouterLinkActive } from '@angular/router';
87
88
 
88
89
  /**
89
90
  * Merges class lists the shadcn/Spartan way: `clsx` resolves conditionals/arrays, `twMerge`
@@ -246,13 +247,17 @@ const yuwButtonVariants = cva('', {
246
247
  true: 'border-transparent bg-transparent text-foreground hover:bg-transparent aria-expanded:bg-transparent aria-expanded:text-foreground dark:border-transparent dark:bg-transparent dark:hover:bg-transparent [a]:hover:bg-transparent',
247
248
  false: '',
248
249
  },
250
+ animationDisabled: {
251
+ true: 'active:translate-y-0!',
252
+ false: '',
253
+ }
249
254
  },
250
255
  defaultVariants: {
251
256
  variant: 'default',
252
257
  transparent: false,
253
258
  },
254
259
  });
255
- const yuwButtonGroupTextClass = 'bg-transparent text-foreground';
260
+ const yuwButtonGroupTextClass = 'bg-transparent text-foreground border-border dark:border-input';
256
261
 
257
262
  /**
258
263
  * Button component supporting single action button or grouped button options.
@@ -304,6 +309,7 @@ const yuwButtonGroupTextClass = 'bg-transparent text-foreground';
304
309
  */
305
310
  class YuwButtonComponent {
306
311
  constructor() {
312
+ this._host = inject(ElementRef);
307
313
  this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
308
314
  this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
309
315
  this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
@@ -317,18 +323,16 @@ class YuwButtonComponent {
317
323
  this.buttons = input(undefined, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
318
324
  this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
319
325
  this.groupAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
320
- /**
321
- * Consumer CSS classes for the inner button/anchor (single and link mode). Merged last with
322
- * `cn`, so they win over the component's own variant/transparent classes.
323
- */
326
+ this.animationDisabled = input(false, ...(ngDevMode ? [{ debugName: "animationDisabled" }] : /* istanbul ignore next */ []));
324
327
  this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
325
328
  this.clicked = output();
326
329
  this.buttonClicked = output();
327
330
  this._textClass = yuwButtonGroupTextClass;
328
331
  this._isGroup = computed(() => (this.buttons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
332
+ this._animationDisabled = computed(() => this.animationDisabled() || this._host.nativeElement.hasAttribute('aria-haspopup'), ...(ngDevMode ? [{ debugName: "_animationDisabled" }] : /* istanbul ignore next */ []));
329
333
  this._effectiveVariant = computed(() => this.transparent() ? 'ghost' : this.variant(), ...(ngDevMode ? [{ debugName: "_effectiveVariant" }] : /* istanbul ignore next */ []));
330
334
  /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
331
- this._btnClass = computed(() => cn(yuwButtonVariants({ size: this.size(), variant: this._effectiveVariant(), transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
335
+ this._btnClass = computed(() => cn(yuwButtonVariants({ size: this.size(), variant: this._effectiveVariant(), transparent: this.transparent(), animationDisabled: this._animationDisabled() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
332
336
  this._texts = contentChildren(YuwButtonGroupTextDirective, ...(ngDevMode ? [{ debugName: "_texts" }] : /* istanbul ignore next */ []));
333
337
  /**
334
338
  * The group's entries, each carrying everything its branch of the template needs.
@@ -353,7 +357,7 @@ class YuwButtonComponent {
353
357
  color: entry.color ?? this.color(),
354
358
  disabled: entry.disabled ?? false,
355
359
  type: entry.type ?? 'button',
356
- class: yuwButtonVariants({ variant, transparent }),
360
+ class: yuwButtonVariants({ variant, transparent, animationDisabled: this._animationDisabled() }),
357
361
  };
358
362
  });
359
363
  }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
@@ -371,7 +375,7 @@ class YuwButtonComponent {
371
375
  this.buttonClicked.emit({ id: button.id, event });
372
376
  }
373
377
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
374
- 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 }, 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\n } @else if (button.href && !button.disabled) {\n <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\">\n {{ button.label }}\n </a>\n } @else {\n <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\">\n {{ button.label }}\n </button>\n }\n }\n </div>\n \n} @else if (href(); as hrefValue) {\n <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n <ng-content select=\"[yuwButtonIcon]\"/>\n <ng-content/>\n </a>\n\n} @else {\n <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\">\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 }); }
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\n } @else if (button.href && !button.disabled) {\n <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\">\n {{ button.label }}\n </a>\n } @else {\n <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\">\n {{ button.label }}\n </button>\n }\n }\n </div>\n \n} @else if (href(); as hrefValue) {\n <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n <ng-content select=\"[yuwButtonIcon]\"/>\n <ng-content/>\n </a>\n\n} @else {\n <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\">\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 }); }
375
379
  }
376
380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, decorators: [{
377
381
  type: Component,
@@ -380,7 +384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
380
384
  '[class.cursor-not-allowed]': 'disabled()',
381
385
  '[attr.data-yuw-color]': 'color()',
382
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\n } @else if (button.href && !button.disabled) {\n <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\">\n {{ button.label }}\n </a>\n } @else {\n <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n [class]=\"button.class\">\n {{ button.label }}\n </button>\n }\n }\n </div>\n \n} @else if (href(); as hrefValue) {\n <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n <ng-content select=\"[yuwButtonIcon]\"/>\n <ng-content/>\n </a>\n\n} @else {\n <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n [class]=\"_btnClass()\">\n <ng-content select=\"[yuwButtonIcon]\"/>\n <ng-content/>\n </button>\n}\n" }]
383
- }], 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 }] }], 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 }] }] } });
387
+ }], 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 }] }] } });
384
388
 
385
389
  /** Text class for the remove button per helm badge variant, mirroring each variant's own foreground. */
386
390
  const REMOVE_TEXT_CLASS = {
@@ -420,7 +424,7 @@ class YuwBadgeComponent {
420
424
  this.removed.emit();
421
425
  }
422
426
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
423
- 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 variant=\"ghost\" size=\"icon-xs\" [color]=\"color()\" [ariaLabel]=\"removeLabel()\"\n [class]=\"removeClass()\" (clicked)=\"onRemoveClick($event)\">\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", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
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 variant=\"ghost\" size=\"icon-xs\" [color]=\"color()\" [ariaLabel]=\"removeLabel()\"\n [class]=\"removeClass()\" (clicked)=\"onRemoveClick($event)\">\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 }); }
424
428
  }
425
429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, decorators: [{
426
430
  type: Component,
@@ -533,6 +537,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
533
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\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" }]
534
538
  }], 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 }] }] } });
535
539
 
540
+ /**
541
+ * Height classes for field-shaped controls, keyed by `YuwFieldSizeDto`.
542
+ *
543
+ * Values are copied from `yuwButtonVariants`' `size` group on purpose, so a field and a button of
544
+ * the same size name are the same number of pixels tall. Both helm shells the fields render
545
+ * (`hlmInput` and `hlm-input-group`) hard-code `h-8`, so every size — `default` included — has to
546
+ * emit a class; an empty string for the default would leave the helm height standing.
547
+ *
548
+ * @see yuwFieldMinHeightVariants for the wrapping variant used by the multi-select chips shell.
549
+ */
550
+ const yuwFieldSizeVariants = cva('', {
551
+ variants: {
552
+ size: {
553
+ default: 'h-10',
554
+ xs: 'h-7',
555
+ sm: 'h-9',
556
+ lg: 'h-11',
557
+ },
558
+ },
559
+ defaultVariants: {
560
+ size: 'default',
561
+ },
562
+ });
563
+ /**
564
+ * `min-height` counterpart of `yuwFieldSizeVariants`, for shells that grow past one row.
565
+ *
566
+ * The combobox chips shell wraps its selected chips onto further lines, so it is sized by the
567
+ * helm's `min-h-8` rather than a fixed height; pinning `h-*` there would clip the second row.
568
+ */
569
+ const yuwFieldMinHeightVariants = cva('', {
570
+ variants: {
571
+ size: {
572
+ default: 'min-h-10',
573
+ xs: 'min-h-7',
574
+ sm: 'min-h-9',
575
+ lg: 'min-h-11',
576
+ },
577
+ },
578
+ defaultVariants: {
579
+ size: 'default',
580
+ },
581
+ });
582
+
536
583
  /**
537
584
  * Structural directive for custom option item templates in `yuw-combobox`.
538
585
  *
@@ -575,6 +622,9 @@ let nextUniqueId$2 = 0;
575
622
  * - `options`: Required array of option items (`YuwComboboxOptionDto<TData>[]`).
576
623
  * - `value`: Two-way selected value(s) (`string` for single mode, `string[]` for multiple mode).
577
624
  * Emits `valueChange` on every selection change.
625
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
626
+ * `<yuw-button>` size of the same name. Applies to whichever control shape renders; the popover
627
+ * panel and its inner search field keep their own compact sizing.
578
628
  * - `multiple`: Enables multi-selection mode with removable tags/chips.
579
629
  * - `disabled`: Disables combobox interaction.
580
630
  * - `placeholder`: Placeholder text when no option is selected.
@@ -609,6 +659,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
609
659
  super(...arguments);
610
660
  this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
611
661
  this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
662
+ this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
612
663
  this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
613
664
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
614
665
  this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -624,6 +675,9 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
624
675
  this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
625
676
  this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
626
677
  this._clearVisible = computed(() => this.clearAriaLabel() !== undefined, ...(ngDevMode ? [{ debugName: "_clearVisible" }] : /* istanbul ignore next */ []));
678
+ this._fieldClass = computed(() => yuwFieldSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_fieldClass" }] : /* istanbul ignore next */ []));
679
+ this._chipsClass = computed(() => yuwFieldMinHeightVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_chipsClass" }] : /* istanbul ignore next */ []));
680
+ this._triggerClass = computed(() => yuwButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
627
681
  this._generatedId = `yuw-combobox-${++nextUniqueId$2}`;
628
682
  this._controlId = computed(() => this.inputId() ?? this._generatedId, ...(ngDevMode ? [{ debugName: "_controlId" }] : /* istanbul ignore next */ []));
629
683
  this._singleValue = computed(() => {
@@ -665,14 +719,14 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
665
719
  this._onBlur();
666
720
  }
667
721
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
668
- 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 }, 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 [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n <hlm-combobox-chips [forceInvalid]=\"invalid()\">\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 [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n @if (readonlyTrigger()) {\n <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\">\n <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\"/>\n </hlm-combobox-trigger>\n } @else {\n <hlm-combobox-input [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"/>\n }\n\n <hlm-combobox-content *hlmComboboxPortal>\n @if (readonlyTrigger()) {\n <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n [showTrigger]=\"false\"/>\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 }); }
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 [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\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 [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\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 [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"\n [class]=\"_fieldClass()\"/>\n }\n\n <hlm-combobox-content *hlmComboboxPortal>\n @if (readonlyTrigger()) {\n <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n [showTrigger]=\"false\"/>\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 }); }
669
723
  }
670
724
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, decorators: [{
671
725
  type: Component,
672
726
  args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
673
727
  class: 'contents',
674
- }, 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 [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n <hlm-combobox-chips [forceInvalid]=\"invalid()\">\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 [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n @if (readonlyTrigger()) {\n <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\">\n <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\"/>\n </hlm-combobox-trigger>\n } @else {\n <hlm-combobox-input [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"/>\n }\n\n <hlm-combobox-content *hlmComboboxPortal>\n @if (readonlyTrigger()) {\n <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n [showTrigger]=\"false\"/>\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" }]
675
- }], 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"] }], 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 }] }] } });
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 [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\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 [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\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 [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"\n [class]=\"_fieldClass()\"/>\n }\n\n <hlm-combobox-content *hlmComboboxPortal>\n @if (readonlyTrigger()) {\n <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n [showTrigger]=\"false\"/>\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
+ }], 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 }] }] } });
676
730
 
677
731
  /**
678
732
  * Container directive for collapsible accordion items.
@@ -814,6 +868,8 @@ let nextYuwInputId = 0;
814
868
  * - `value`: Two-way text string.
815
869
  * - `inputId`: `id` applied to the native input, for external `<label for>` association.
816
870
  * - `type`: HTML input type (`'text'`, `'email'`, `'number'`, etc.). Default is `'text'`.
871
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
872
+ * `<yuw-button>` size of the same name. Default is `'default'`.
817
873
  * - `inputmode`: Virtual keyboard hint (e.g. `'numeric'`).
818
874
  * - `disabled`: Disables input interaction.
819
875
  * - `readonly`: Makes the field read-only.
@@ -843,6 +899,7 @@ class YuwInputComponent extends YuwValueAccessorBase {
843
899
  this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
844
900
  this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
845
901
  this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
902
+ this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
846
903
  this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
847
904
  this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
848
905
  this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -856,7 +913,7 @@ class YuwInputComponent extends YuwValueAccessorBase {
856
913
  this.committed = output();
857
914
  this._autoId = `yuw-input-${++nextYuwInputId}`;
858
915
  this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
859
- this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
916
+ this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
860
917
  this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
861
918
  this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
862
919
  this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
@@ -874,14 +931,14 @@ class YuwInputComponent extends YuwValueAccessorBase {
874
931
  this.committed.emit(this.value());
875
932
  }
876
933
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
877
- 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 }, 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 hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\" [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 }); }
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 hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\" [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 }); }
878
935
  }
879
936
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, decorators: [{
880
937
  type: Component,
881
938
  args: [{ selector: 'yuw-input', imports: [HlmInput, HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon], providers: [provideValueAccessor(YuwInputComponent)], host: {
882
939
  class: 'contents',
883
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 hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\" [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n}\n" }]
884
- }], 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 }] }], 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 }] }] } });
941
+ }], 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 }] }] } });
885
942
 
886
943
  let nextYuwTextareaId = 0;
887
944
  /**
@@ -1026,6 +1083,28 @@ const searchInputFieldVariants = cva('', {
1026
1083
  collapsible: false,
1027
1084
  },
1028
1085
  });
1086
+ /**
1087
+ * Class map for the input group shell.
1088
+ *
1089
+ * `transparent` strips the helm's resting border and background. Each helm class is countered in
1090
+ * the same variant prefix it was declared with (`dark:`, and the `has-[…:disabled]:` stack), because
1091
+ * tailwind-merge resolves conflicts per prefix and a bare `bg-transparent` would leave the
1092
+ * prefixed helm declarations standing.
1093
+ *
1094
+ * The focus ring and the invalid-state ring are deliberately left in place: they are feedback, not
1095
+ * chrome, and a transparent field still has to show where focus is and when it is invalid.
1096
+ */
1097
+ const searchInputGroupVariants = cva('', {
1098
+ variants: {
1099
+ transparent: {
1100
+ true: 'border-transparent bg-transparent dark:bg-transparent has-[[data-slot=input-group-control]:disabled]:bg-transparent dark:has-[[data-slot=input-group-control]:disabled]:bg-transparent',
1101
+ false: '',
1102
+ },
1103
+ },
1104
+ defaultVariants: {
1105
+ transparent: false,
1106
+ },
1107
+ });
1029
1108
 
1030
1109
  /** Module-level counter backing each instance's stable fallback `id`. */
1031
1110
  let nextYuwSearchInputId = 0;
@@ -1052,6 +1131,8 @@ let nextYuwSearchInputId = 0;
1052
1131
  * app is responsible for translating.
1053
1132
  * - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
1054
1133
  * Collapsible mode only.
1134
+ * - `transparent`: Removes the field's resting border and background so it sits directly on its
1135
+ * container — for search inside a toolbar or a colored surface. The focus and invalid rings stay.
1055
1136
  * - `class`: Extra classes merged onto the input group.
1056
1137
  *
1057
1138
  * Outputs:
@@ -1097,6 +1178,7 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
1097
1178
  this.collapseFrom = input(undefined, ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
1098
1179
  this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
1099
1180
  this.expandAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
1181
+ this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
1100
1182
  this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
1101
1183
  this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
1102
1184
  this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
@@ -1105,7 +1187,7 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
1105
1187
  this.searched = output();
1106
1188
  this.committed = output();
1107
1189
  this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
1108
- this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
1190
+ this._classes = computed(() => cn(searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
1109
1191
  this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
1110
1192
  this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
1111
1193
  this._expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
@@ -1172,14 +1254,14 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
1172
1254
  }
1173
1255
  }
1174
1256
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1175
- 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 }, 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=\"pointer-events-auto\"\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 }); }
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=\"pointer-events-auto\"\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 }); }
1176
1258
  }
1177
1259
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
1178
1260
  type: Component,
1179
1261
  args: [{ selector: 'yuw-search-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
1180
1262
  class: 'contents',
1181
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=\"pointer-events-auto\"\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" }]
1182
- }], 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 }] }], 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"] }] } });
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"] }] } });
1183
1265
 
1184
1266
  /** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
1185
1267
  * directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
@@ -2406,7 +2488,82 @@ const YuwTableImports = [
2406
2488
  YuwCaptionDirective,
2407
2489
  ];
2408
2490
 
2491
+ /**
2492
+ * Class maps for `yuw-datatable`, layered on top of the Hlm table directives' own classes.
2493
+ *
2494
+ * `DATATABLE_ALIGN_CLASS` is keyed by a column's `meta.align` and shared by header and body cells,
2495
+ * so a column declares its alignment once and both honour it; `start` maps to an empty string
2496
+ * rather than re-stating what `HlmTh`/`HlmTd` already apply.
2497
+ *
2498
+ * The `appearance` maps are split per element because the treatment is not uniform: `card` frames
2499
+ * the container so the header tint clips to the radius instead of squaring off against a
2500
+ * consumer's wrapper, then drops the header's bottom border, since a rule underneath a filled
2501
+ * strip reads as a seam. `default` resolves to an empty string throughout, leaving a table that
2502
+ * does not opt in byte-identical to what the Hlm directives render alone.
2503
+ */
2504
+ const DATATABLE_ALIGN_CLASS = {
2505
+ start: '',
2506
+ center: 'text-center',
2507
+ end: 'text-end',
2508
+ };
2509
+ const datatableContainerVariants = cva('', {
2510
+ variants: {
2511
+ appearance: {
2512
+ default: '',
2513
+ card: 'overflow-hidden rounded-(--radius-container-sm) border bg-(--neutrals-surface)',
2514
+ },
2515
+ },
2516
+ defaultVariants: {
2517
+ appearance: 'default',
2518
+ },
2519
+ });
2520
+ const datatableHeadVariants = cva('', {
2521
+ variants: {
2522
+ appearance: {
2523
+ default: '',
2524
+ card: 'bg-(--neutrals-background) [&_tr]:border-b-0',
2525
+ },
2526
+ },
2527
+ defaultVariants: {
2528
+ appearance: 'default',
2529
+ },
2530
+ });
2531
+ const datatableHeaderCellVariants = cva('', {
2532
+ variants: {
2533
+ appearance: {
2534
+ default: '',
2535
+ card: 'h-12 px-4 text-xs font-normal tracking-wider uppercase text-(--neutrals-element-mid)',
2536
+ },
2537
+ },
2538
+ defaultVariants: {
2539
+ appearance: 'default',
2540
+ },
2541
+ });
2542
+ const datatableCellVariants = cva('', {
2543
+ variants: {
2544
+ appearance: {
2545
+ default: '',
2546
+ card: 'h-16 px-4',
2547
+ },
2548
+ },
2549
+ defaultVariants: {
2550
+ appearance: 'default',
2551
+ },
2552
+ });
2553
+ const datatableRowVariants = cva('', {
2554
+ variants: {
2555
+ appearance: {
2556
+ default: '',
2557
+ card: 'border-(--neutrals-outline)',
2558
+ },
2559
+ },
2560
+ defaultVariants: {
2561
+ appearance: 'default',
2562
+ },
2563
+ });
2564
+
2409
2565
  const YUW_DATATABLE_FEATURES = {
2566
+ columnMeta: {},
2410
2567
  columnFilteringFeature,
2411
2568
  columnVisibilityFeature,
2412
2569
  rowPaginationFeature,
@@ -2443,6 +2600,15 @@ const YUW_DATATABLE_FEATURES = {
2443
2600
  * responsible for translating; when absent, no caption is rendered.
2444
2601
  * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
2445
2602
  * `display: contents`, so a plain `class` on `<yuw-datatable>` would never reach the table.
2603
+ * - `appearance`: Visual treatment (`YuwDatatableAppearanceDto`). Default is `'default'` —
2604
+ * Spartan's plain table. `'card'` frames the table in its own rounded bordered surface with a
2605
+ * tinted uppercase header strip and taller rows; the consumer needs no wrapper of its own.
2606
+ *
2607
+ * Per-column, through TanStack's `meta`:
2608
+ * - `meta.align`: `'start' | 'center' | 'end'`, applied to both the header and body cells of that
2609
+ * column. Default is `'start'`. Alignment and the appearance's own cell classes are resolved
2610
+ * once into a per-column-id lookup rather than in the template, because a template method would
2611
+ * re-run the class merge for every cell on every change-detection pass.
2446
2612
  * - `sorting`: Two-way sorting state (`SortingState`).
2447
2613
  * - `columnFilters`: Two-way column filters state (`ColumnFiltersState`).
2448
2614
  * - `columnVisibility`: Two-way column visibility state (`ColumnVisibilityState`).
@@ -2459,6 +2625,7 @@ const YUW_DATATABLE_FEATURES = {
2459
2625
  * [columns]="columns"
2460
2626
  * [data]="users"
2461
2627
  * [(sorting)]="sorting"
2628
+ * appearance="card"
2462
2629
  * paginated
2463
2630
  * selectable
2464
2631
  * previousPageLabel="Página anterior"
@@ -2466,6 +2633,13 @@ const YUW_DATATABLE_FEATURES = {
2466
2633
  * (selectedRowsChange)="onSelect($event)"
2467
2634
  * />
2468
2635
  * ```
2636
+ *
2637
+ * ```ts
2638
+ * const columns: YuwDatatableColumnDef<Client>[] = [
2639
+ * { accessorKey: 'name', header: 'Nombre' },
2640
+ * { accessorKey: 'cif', header: 'CIF', meta: { align: 'center' } },
2641
+ * ];
2642
+ * ```
2469
2643
  */
2470
2644
  class YuwDatatableComponent {
2471
2645
  constructor() {
@@ -2483,6 +2657,7 @@ class YuwDatatableComponent {
2483
2657
  this.paginationAriaLabel = input.required(...(ngDevMode ? [{ debugName: "paginationAriaLabel" }] : /* istanbul ignore next */ []));
2484
2658
  this.caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
2485
2659
  this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
2660
+ this.appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
2486
2661
  this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
2487
2662
  this.columnFilters = model([], ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
2488
2663
  this.columnVisibility = model({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
@@ -2526,10 +2701,29 @@ class YuwDatatableComponent {
2526
2701
  this._columnCount = computed(() => this.table.getVisibleLeafColumns().length, ...(ngDevMode ? [{ debugName: "_columnCount" }] : /* istanbul ignore next */ []));
2527
2702
  this._skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_skeletonRows" }] : /* istanbul ignore next */ []));
2528
2703
  this._tableClass = computed(() => cn(this.tableClass()), ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
2704
+ this._containerClass = computed(() => datatableContainerVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
2705
+ this._headClass = computed(() => datatableHeadVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_headClass" }] : /* istanbul ignore next */ []));
2706
+ this._rowClass = computed(() => datatableRowVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_rowClass" }] : /* istanbul ignore next */ []));
2707
+ this._cellClasses = computed(() => {
2708
+ const header = datatableHeaderCellVariants({ appearance: this.appearance() });
2709
+ const cell = datatableCellVariants({ appearance: this.appearance() });
2710
+ return new Map(this.columns().map((column, index) => {
2711
+ const align = DATATABLE_ALIGN_CLASS[column.meta?.align ?? 'start'];
2712
+ return [
2713
+ column.id ?? ('accessorKey' in column ? String(column.accessorKey) : String(index)),
2714
+ { header: cn(header, align), cell: cn(cell, align) },
2715
+ ];
2716
+ }));
2717
+ }, ...(ngDevMode ? [{ debugName: "_cellClasses" }] : /* istanbul ignore next */ []));
2529
2718
  this._ariaSort = {
2530
2719
  asc: 'ascending',
2531
2720
  desc: 'descending',
2532
2721
  };
2722
+ this._sortIcon = {
2723
+ asc: 'lucideChevronUp',
2724
+ desc: 'lucideChevronDown',
2725
+ none: 'lucideChevronsUpDown',
2726
+ };
2533
2727
  }
2534
2728
  /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
2535
2729
  onPageChange(page) {
@@ -2554,14 +2748,14 @@ class YuwDatatableComponent {
2554
2748
  this.table.setOptions((previous) => ({ ...previous, ...options }));
2555
2749
  }
2556
2750
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2557
- 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 }, 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" }, ngImport: i0, template: "<div yuwTableContainer>\n <table yuwTable [class]=\"_tableClass()\">\n @if (caption()) {\n <caption yuwCaption>{{ caption() }}</caption>\n }\n\n <thead yuwTHead>\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n <tr yuwTr>\n @for (header of headerGroup.headers; track header.id) {\n @let sorted = header.column.getIsSorted();\n <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n @if (!header.isPlaceholder) {\n @if (sortable() && header.column.getCanSort()) {\n <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n (click)=\"header.column.toggleSorting()\">\n <ng-container\n *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n {{ rendered }}\n </ng-container>\n\n @if (sorted === 'asc') {\n <span aria-hidden=\"true\">\u2191</span>\n } @else if (sorted === 'desc') {\n <span aria-hidden=\"true\">\u2193</span>\n } @else {\n <span aria-hidden=\"true\">\u2195</span>\n }\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>\n @for (column of table.getVisibleLeafColumns(); track column.id) {\n <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n }\n </tr>\n }\n } @else if (_isEmpty()) {\n <tr yuwTr>\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 [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n @for (cell of row.getVisibleCells(); track cell.id) {\n <td yuwTd>\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 [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
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 yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n [class]=\"_cellClasses().get(header.column.id)?.header\">\n @if (!header.isPlaceholder) {\n @if (sortable() && header.column.getCanSort()) {\n <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n (click)=\"header.column.toggleSorting()\">\n <ng-container\n *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\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 [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n [ariaLabel]=\"paginationAriaLabel()\" color=\"secondary\" size=\"icon-sm\"/>\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 }); }
2558
2752
  }
2559
2753
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, decorators: [{
2560
2754
  type: Component,
2561
- args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective], host: {
2755
+ args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
2562
2756
  class: 'contents',
2563
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n <table yuwTable [class]=\"_tableClass()\">\n @if (caption()) {\n <caption yuwCaption>{{ caption() }}</caption>\n }\n\n <thead yuwTHead>\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n <tr yuwTr>\n @for (header of headerGroup.headers; track header.id) {\n @let sorted = header.column.getIsSorted();\n <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n @if (!header.isPlaceholder) {\n @if (sortable() && header.column.getCanSort()) {\n <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n (click)=\"header.column.toggleSorting()\">\n <ng-container\n *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n {{ rendered }}\n </ng-container>\n\n @if (sorted === 'asc') {\n <span aria-hidden=\"true\">\u2191</span>\n } @else if (sorted === 'desc') {\n <span aria-hidden=\"true\">\u2193</span>\n } @else {\n <span aria-hidden=\"true\">\u2195</span>\n }\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>\n @for (column of table.getVisibleLeafColumns(); track column.id) {\n <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n }\n </tr>\n }\n } @else if (_isEmpty()) {\n <tr yuwTr>\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 [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n @for (cell of row.getVisibleCells(); track cell.id) {\n <td yuwTd>\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 [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n </div>\n </div>\n}\n" }]
2564
- }], 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 }] }], 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"] }] } });
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 yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n [class]=\"_cellClasses().get(header.column.id)?.header\">\n @if (!header.isPlaceholder) {\n @if (sortable() && header.column.getCanSort()) {\n <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n (click)=\"header.column.toggleSorting()\">\n <ng-container\n *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\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 [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n [ariaLabel]=\"paginationAriaLabel()\" color=\"secondary\" size=\"icon-sm\"/>\n </div>\n </div>\n}\n" }]
2758
+ }], 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"] }] } });
2565
2759
 
2566
2760
  /**
2567
2761
  * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
@@ -2868,7 +3062,7 @@ class YuwSheetComponent {
2868
3062
  this.open.set(state === 'open');
2869
3063
  }
2870
3064
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2871
- 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", "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 }); }
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 }); }
2872
3066
  }
2873
3067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, decorators: [{
2874
3068
  type: Component,
@@ -2955,7 +3149,7 @@ class YuwPopoverComponent {
2955
3149
  this.open.set(state === 'open');
2956
3150
  }
2957
3151
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2958
- 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 hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n (stateChanged)=\"onOpenChange($event)\">\n @if (showTrigger()) {\n <yuw-button yuwPopoverTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\"\n [transparent]=\"triggerTransparent()\" [class]=\"triggerClass()\">\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", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
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 hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n (stateChanged)=\"onOpenChange($event)\">\n @if (showTrigger()) {\n <yuw-button yuwPopoverTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\"\n [transparent]=\"triggerTransparent()\" [class]=\"triggerClass()\">\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 }); }
2959
3153
  }
2960
3154
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, decorators: [{
2961
3155
  type: Component,
@@ -3305,7 +3499,7 @@ class YuwDialogComponent {
3305
3499
  this.open.set(state === 'open');
3306
3500
  }
3307
3501
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3308
- 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 *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n [class]=\"panelClass()\">\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", "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 }); }
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 *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n [class]=\"panelClass()\">\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 }); }
3309
3503
  }
3310
3504
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, decorators: [{
3311
3505
  type: Component,
@@ -3412,7 +3606,7 @@ class YuwAlertDialogComponent {
3412
3606
  this.open.set(state === 'open');
3413
3607
  }
3414
3608
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3415
- 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", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
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 }); }
3416
3610
  }
3417
3611
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
3418
3612
  type: Component,
@@ -3633,81 +3827,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
3633
3827
  }] });
3634
3828
 
3635
3829
  /**
3636
- * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
3637
- * mobile, and reads its colors from the `--sidebar-*` theme tokens.
3638
- *
3639
- * Place it inside a `[yuwSidebarWrapper]` alongside a `<main yuwSidebarInset>`, and compose its
3640
- * inner structure with the `yuwSidebar*` directives. Open state is shared through
3641
- * `YuwSidebarService`, so `<yuw-sidebar-trigger>` works from anywhere in the page.
3642
- *
3643
- * Inputs:
3644
- * - `side`: Edge the sidebar is docked to (`'left'`, `'right'`). Default is `'left'`.
3645
- * - `variant`: Panel treatment (`'sidebar'` flush, `'floating'` card, `'inset'` inset page). Default is `'sidebar'`.
3646
- * - `collapsible`: Collapse behaviour (`'offcanvas'` slides away, `'icon'` shrinks to icons, `'none'` always open). Default is `'offcanvas'`.
3647
- * - `sidebarWidthMobile`: Width of the mobile slide-in sheet (any CSS length). Defaults to the helm sidebar config (`18rem`).
3648
- * - `sidebarContainerClass`: Extra classes merged onto the desktop fixed container (the helm merges them last, so they win).
3649
- *
3650
- * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
3651
- * them): `HlmSidebarMenuAction`, `HlmSidebarMenuSkeleton`, `HlmSidebarInput` and
3652
- * `HlmSidebarGroupAction`.
3653
- *
3654
- * Usage:
3655
- * ```html
3656
- * <yuw-sidebar collapsible="icon">
3657
- * <div yuwSidebarHeader>Yurest</div>
3658
- * <div yuwSidebarContent>
3659
- * <ul yuwSidebarMenu>
3660
- * <li yuwSidebarMenuItem><a yuwSidebarMenuButton isActive tooltip="Pedidos">Pedidos</a></li>
3661
- * </ul>
3662
- * </div>
3663
- * </yuw-sidebar>
3664
- * ```
3830
+ * yukit-web's class layer for the sidebar menu button, applied on top of the helm
3831
+ * `sidebarMenuButtonVariants()` output.
3832
+ *
3833
+ * Registered through the helm `classes()` utility from the `yuwSidebarMenuButton` directive, which
3834
+ * runs *after* the helm directive's own registration on the same element. `classes()` merges its
3835
+ * sources in registration order through `twMerge`, so each class here displaces the helm class of
3836
+ * the same Tailwind group and modifier stack without needing `!important`.
3837
+ *
3838
+ * These live on the button rather than on `li[yuwSidebarMenuItem]` because every selector here
3839
+ * resolves against the button's own box or subtree: the `<li>` is not the hovered control, never
3840
+ * carries `aria-expanded`, and its `> span:last-child` is the `yuwSidebarMenuBadge`, not the label.
3841
+ *
3842
+ * Three details in the collapsed-to-icon block are load-bearing:
3843
+ *
3844
+ * - `size-auto!`, `w-full!` and `justify-center!` keep their `!` because the helm declarations they
3845
+ * replace (`size-8!`, `p-2!`) are themselves `!important`, which `twMerge` cannot outrank on
3846
+ * specificity alone. The helm pins the button to a square; ours fills the rail width and centres
3847
+ * the icon.
3848
+ * - `[&>span:last-child]:hidden` drops the label while collapsed, leaving the icon alone — the
3849
+ * tooltip carries the name in that state.
3850
+ * - `text-[length:--spacing(6)]` bumps the icon from the helm's 4 units to 6. The `length:` hint is
3851
+ * not optional: `text-[…]` is ambiguous between colour and size, and Tailwind resolves the bare
3852
+ * form as a colour, so the icon would never resize.
3665
3853
  */
3666
- class YuwSidebarComponent {
3667
- constructor() {
3668
- this.config = injectHlmSidebarConfig();
3669
- this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
3670
- this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
3671
- this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
3672
- this.sidebarWidthMobile = input(this.config.sidebarWidthMobile, ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
3673
- this.sidebarContainerClass = input('', ...(ngDevMode ? [{ debugName: "sidebarContainerClass" }] : /* istanbul ignore next */ []));
3674
- }
3675
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3676
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, 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/>\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3677
- }
3678
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
3679
- type: Component,
3680
- args: [{ selector: 'yuw-sidebar', imports: [HlmSidebar], host: {
3681
- class: 'contents',
3682
- }, 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/>\n</hlm-sidebar>\n" }]
3683
- }], 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 }] }] } });
3684
-
3685
- /**
3686
- * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
3687
- * inside `<main yuwSidebarInset>`, since the open state lives in `YuwSidebarService`.
3688
- *
3689
- * Inputs:
3690
- * - `label`: Screen-reader-only label for the button. User-facing text the consuming app is
3691
- * responsible for translating.
3692
- *
3693
- * Usage:
3694
- * ```html
3695
- * <yuw-sidebar-trigger label="Alternar menú" />
3696
- * ```
3697
- */
3698
- class YuwSidebarTriggerComponent {
3699
- constructor() {
3700
- this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
3701
- }
3702
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3703
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3704
- }
3705
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, decorators: [{
3706
- type: Component,
3707
- args: [{ selector: 'yuw-sidebar-trigger', imports: [HlmSidebarTrigger], host: {
3708
- class: 'contents',
3709
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n" }]
3710
- }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
3854
+ const yuwSidebarMenuButtonClass = [
3855
+ 'hover:bg-muted',
3856
+ 'hover:text-foreground',
3857
+ 'dark:hover:bg-muted/50',
3858
+ 'aria-expanded:bg-muted',
3859
+ 'aria-expanded:text-foreground',
3860
+ 'transition-all',
3861
+ 'group-data-[collapsible=icon]:size-auto!',
3862
+ 'group-data-[collapsible=icon]:w-full!',
3863
+ 'group-data-[collapsible=icon]:justify-center!',
3864
+ 'group-data-[collapsible=icon]:[&>span:last-child]:hidden',
3865
+ 'group-data-[collapsible=icon]:[&_ng-icon]:text-[length:--spacing(6)]',
3866
+ ].join(' ');
3711
3867
 
3712
3868
  /**
3713
3869
  * Outermost layout directive for a sidebar page. Wraps the sidebar and the main content, and owns
@@ -3834,6 +3990,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
3834
3990
  hostDirectives: [HlmSidebarMenu],
3835
3991
  }]
3836
3992
  }] });
3993
+ /**
3994
+ * Marks projected markup that belongs *inside* the region `<yuw-sidebar>` renders from its `content`
3995
+ * input, after the object-driven groups — a hand-written group alongside a data-driven nav.
3996
+ *
3997
+ * Only meaningful when `content` is set; without it the marker is inert and the element falls
3998
+ * through to the default slot like any other projected node. Carries no styling of its own: it is a
3999
+ * projection selector, and whatever it is applied to (usually a `[yuwSidebarGroup]`) keeps its own.
4000
+ */
4001
+ class YuwSidebarContentExtraDirective {
4002
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
4003
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentExtraDirective, isStandalone: true, selector: "[yuwSidebarContentExtra]", ngImport: i0 }); }
4004
+ }
4005
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentExtraDirective, decorators: [{
4006
+ type: Directive,
4007
+ args: [{
4008
+ selector: '[yuwSidebarContentExtra]',
4009
+ }]
4010
+ }] });
4011
+ /** The `footer` counterpart of {@link YuwSidebarContentExtraDirective}. */
4012
+ class YuwSidebarFooterExtraDirective {
4013
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
4014
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFooterExtraDirective, isStandalone: true, selector: "[yuwSidebarFooterExtra]", ngImport: i0 }); }
4015
+ }
4016
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterExtraDirective, decorators: [{
4017
+ type: Directive,
4018
+ args: [{
4019
+ selector: '[yuwSidebarFooterExtra]',
4020
+ }]
4021
+ }] });
3837
4022
  /** A single entry of a sidebar menu. Apply to an `<li>`. */
3838
4023
  class YuwSidebarMenuItemDirective {
3839
4024
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3852,9 +4037,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
3852
4037
  *
3853
4038
  * To label the item while the sidebar is collapsed to icons, add Spartan's `tooltip` input
3854
4039
  * alongside this directive — it comes from the underlying menu-button primitive and is only shown
3855
- * in the collapsed state.
4040
+ * in the collapsed state. It cannot be re-forwarded through this wrapper's `hostDirectives`
4041
+ * (`tooltip` is the alias `HlmSidebarMenuButton` gives its own composed `BrnTooltip`, not a public
4042
+ * input of its own), so bind it with `[attr.tooltip]` rather than `[tooltip]` when the value comes
4043
+ * from an expression.
4044
+ *
4045
+ * Carries `yuwSidebarMenuButtonClass`, our hover/expanded colouring and collapsed-to-icon geometry.
4046
+ * The `classes()` registration below runs after the composed `HlmSidebarMenuButton`'s own, so our
4047
+ * classes merge last and win — see `sidebar.variants.ts`.
3856
4048
  */
3857
4049
  class YuwSidebarMenuButtonDirective {
4050
+ constructor() {
4051
+ classes(() => yuwSidebarMenuButtonClass);
4052
+ }
3858
4053
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3859
4054
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
3860
4055
  }
@@ -3869,7 +4064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
3869
4064
  },
3870
4065
  ],
3871
4066
  }]
3872
- }] });
4067
+ }], ctorParameters: () => [] });
3873
4068
  /** Trailing count or status badge of a sidebar menu item. */
3874
4069
  class YuwSidebarMenuBadgeDirective {
3875
4070
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3967,6 +4162,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
3967
4162
  }]
3968
4163
  }] });
3969
4164
 
4165
+ /**
4166
+ * Renders one {@link YuwSidebarContentDto} as the group/menu/item tree.
4167
+ *
4168
+ * Internal to the library — it is not exported from `public-api.ts`, and consumers reach it through
4169
+ * `<yuw-sidebar>`'s `content` and `footer` inputs. It exists as its own component because those two
4170
+ * inputs need the identical tree; inlining it in `sidebar.component.html` would duplicate the whole
4171
+ * block.
4172
+ *
4173
+ * The host is `display: contents`, so the groups it renders become direct children of whichever
4174
+ * `[yuwSidebarContent]` / `[yuwSidebarFooter]` wrapper it sits inside. That is what keeps the
4175
+ * `group-data-[collapsible=icon]:` selectors — which resolve against the sidebar root — working
4176
+ * identically for object-rendered and hand-written markup.
4177
+ */
4178
+ class YuwSidebarNavComponent {
4179
+ constructor() {
4180
+ this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
4181
+ this.itemClicked = output();
4182
+ /**
4183
+ * The groups, with each entry's derived render state resolved once.
4184
+ *
4185
+ * `routerLinkActiveOptions` has to be a stable object identity per entry: a literal in the
4186
+ * template (`[routerLinkActiveOptions]="{exact: item.exact ?? false}"`) allocates a new object on
4187
+ * every change-detection pass, which `RouterLinkActive` treats as a changed input and re-runs its
4188
+ * subscription for. Precomputing it here also keeps the template free of the `?? false` fallback.
4189
+ */
4190
+ this._groups = computed(() => this.content().groups.map((group) => ({
4191
+ ...group,
4192
+ items: group.items.map((item) => ({
4193
+ ...item,
4194
+ tooltipText: item.tooltip ?? item.label,
4195
+ activeOptions: { exact: item.exact ?? false },
4196
+ children: (item.children ?? []).map((child) => ({
4197
+ ...child,
4198
+ activeOptions: { exact: child.exact ?? false },
4199
+ })),
4200
+ })),
4201
+ })), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
4202
+ }
4203
+ onItemClick(id, event) {
4204
+ this.itemClicked.emit({ id, event });
4205
+ }
4206
+ 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 }); }
4208
+ }
4209
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
4210
+ type: Component,
4211
+ args: [{ selector: 'yuw-sidebar-nav', imports: [
4212
+ NgIcon,
4213
+ RouterLink,
4214
+ RouterLinkActive,
4215
+ YuwSidebarGroupDirective,
4216
+ YuwSidebarGroupLabelDirective,
4217
+ YuwSidebarGroupContentDirective,
4218
+ YuwSidebarMenuDirective,
4219
+ YuwSidebarMenuItemDirective,
4220
+ YuwSidebarMenuButtonDirective,
4221
+ YuwSidebarMenuBadgeDirective,
4222
+ YuwSidebarMenuSubDirective,
4223
+ YuwSidebarMenuSubItemDirective,
4224
+ YuwSidebarMenuSubButtonDirective,
4225
+ YuwSidebarSeparatorDirective,
4226
+ ], host: {
4227
+ 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" }]
4229
+ }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
4230
+
4231
+ /**
4232
+ * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
4233
+ * mobile, and reads its colors from the `--sidebar-*` theme tokens.
4234
+ *
4235
+ * Place it inside a `[yuwSidebarWrapper]` alongside a `<main yuwSidebarInset>`, and compose its
4236
+ * inner structure with the `yuwSidebar*` directives. Open state is shared through
4237
+ * `YuwSidebarService`, so `<yuw-sidebar-trigger>` works from anywhere in the page.
4238
+ *
4239
+ * Inputs:
4240
+ * - `side`: Edge the sidebar is docked to (`'left'`, `'right'`). Default is `'left'`.
4241
+ * - `variant`: Panel treatment (`'sidebar'` flush, `'floating'` card, `'inset'` inset page). Default is `'sidebar'`.
4242
+ * - `collapsible`: Collapse behaviour (`'offcanvas'` slides away, `'icon'` shrinks to icons, `'none'` always open). Default is `'offcanvas'`.
4243
+ * - `sidebarWidthMobile`: Width of the mobile slide-in sheet (any CSS length). Defaults to the helm sidebar config (`18rem`).
4244
+ * - `sidebarContainerClass`: Extra classes merged onto the desktop fixed container (the helm merges them last, so they win).
4245
+ * - `content`: Renders the scrollable nav from a `YuwSidebarContentDto` instead of hand-written
4246
+ * markup. Groups → items → optional one level of children. An item with a `route` becomes a
4247
+ * `[routerLink]` anchor whose active state, `aria-current` and pointer-lock resolve automatically
4248
+ * from `routerLinkActive`; one with an `href` becomes a plain anchor; one with neither becomes a
4249
+ * button that reports through `itemClicked`.
4250
+ * - `footer`: The same, rendered into the footer region.
4251
+ *
4252
+ * Outputs:
4253
+ * - `itemClicked`: Emits `{id, event}` when a non-navigating entry (no `route`, no `href`) is
4254
+ * activated, in either `content` or `footer`.
4255
+ *
4256
+ * The two forms compose rather than exclude each other, unlike `<yuw-button>`'s `buttons` input
4257
+ * which drops projected content when set. `content`/`footer` render their own region; anything
4258
+ * projected still renders, so a data-driven nav can sit alongside a hand-written block. To place
4259
+ * extra markup *inside* the object-rendered regions — where it scrolls with the nav and inherits the
4260
+ * content area's flex sizing — mark it `[yuwSidebarContentExtra]` or `[yuwSidebarFooterExtra]`; the
4261
+ * default slot keeps everything else, so existing projection-only usage is unaffected.
4262
+ *
4263
+ * `header` has no object form: it is a free-form branding area with no repeating structure to model.
4264
+ *
4265
+ * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
4266
+ * them): `HlmSidebarMenuAction`, `HlmSidebarMenuSkeleton`, `HlmSidebarInput` and
4267
+ * `HlmSidebarGroupAction`.
4268
+ *
4269
+ * Usage:
4270
+ * ```html
4271
+ * <yuw-sidebar collapsible="icon">
4272
+ * <div yuwSidebarHeader>Yurest</div>
4273
+ * <div yuwSidebarContent>
4274
+ * <ul yuwSidebarMenu>
4275
+ * <li yuwSidebarMenuItem><a yuwSidebarMenuButton isActive tooltip="Pedidos">Pedidos</a></li>
4276
+ * </ul>
4277
+ * </div>
4278
+ * </yuw-sidebar>
4279
+ * ```
4280
+ *
4281
+ * Object form:
4282
+ * ```html
4283
+ * <yuw-sidebar collapsible="icon" [content]="nav" [footer]="footerNav"
4284
+ * (itemClicked)="onAction($event.id)">
4285
+ * <div yuwSidebarHeader>Yurest</div>
4286
+ * </yuw-sidebar>
4287
+ * ```
4288
+ * ```ts
4289
+ * nav: YuwSidebarContentDto = {
4290
+ * groups: [{
4291
+ * id: 'management',
4292
+ * label: 'Gestión',
4293
+ * items: [
4294
+ * {id: 'orders', label: 'Pedidos', icon: 'lucideReceipt', route: '/orders', badge: '12'},
4295
+ * {id: 'reports', label: 'Informes', icon: 'lucideChartLine', children: [
4296
+ * {id: 'sales', label: 'Ventas', route: '/reports/sales'},
4297
+ * ]},
4298
+ * {id: 'sync', label: 'Sincronizar'},
4299
+ * ],
4300
+ * }],
4301
+ * };
4302
+ * ```
4303
+ */
4304
+ class YuwSidebarComponent {
4305
+ constructor() {
4306
+ this.config = injectHlmSidebarConfig();
4307
+ this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
4308
+ this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
4309
+ this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
4310
+ this.sidebarWidthMobile = input(this.config.sidebarWidthMobile, ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
4311
+ this.sidebarContainerClass = input('', ...(ngDevMode ? [{ debugName: "sidebarContainerClass" }] : /* istanbul ignore next */ []));
4312
+ this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
4313
+ this.footer = input(undefined, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
4314
+ this.itemClicked = output();
4315
+ }
4316
+ 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 }); }
4318
+ }
4319
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
4320
+ type: Component,
4321
+ args: [{ selector: 'yuw-sidebar', imports: [
4322
+ HlmSidebar,
4323
+ YuwSidebarNavComponent,
4324
+ YuwSidebarContentDirective,
4325
+ YuwSidebarFooterDirective,
4326
+ YuwSidebarSeparatorDirective,
4327
+ ], host: {
4328
+ 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" }]
4330
+ }], 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
+
4332
+ /**
4333
+ * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
4334
+ * inside `<main yuwSidebarInset>`, since the open state lives in `YuwSidebarService`.
4335
+ *
4336
+ * Inputs:
4337
+ * - `label`: Screen-reader-only label for the button. User-facing text the consuming app is
4338
+ * responsible for translating.
4339
+ *
4340
+ * Usage:
4341
+ * ```html
4342
+ * <yuw-sidebar-trigger label="Alternar menú" />
4343
+ * ```
4344
+ */
4345
+ class YuwSidebarTriggerComponent {
4346
+ constructor() {
4347
+ this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
4348
+ }
4349
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4350
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4351
+ }
4352
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, decorators: [{
4353
+ type: Component,
4354
+ args: [{ selector: 'yuw-sidebar-trigger', imports: [HlmSidebarTrigger], host: {
4355
+ class: 'contents',
4356
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n" }]
4357
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
4358
+
3970
4359
  /*
3971
4360
  * Public API Surface of yukit-web
3972
4361
  */
@@ -3975,5 +4364,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
3975
4364
  * Generated bundle index. Do not edit.
3976
4365
  */
3977
4366
 
3978
- export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
4367
+ export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
3979
4368
  //# sourceMappingURL=yukit-web.mjs.map