@lumaui/angular 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/lumaui-angular.mjs +876 -125
  2. package/fesm2022/lumaui-angular.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/lumaui-angular.d.ts +361 -87
package/fesm2022/lumaui-angular.mjs CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, computed, HostBinding, Directive, ChangeDetectionStrategy, Component, output, InjectionToken, inject, ElementRef, Renderer2, effect, signal, HostListener, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
3
- import { buttonVariants, badgeVariants, cardVariants, cardContentVariants, cardTitleVariants, cardDescriptionVariants, accordionItemVariants, accordionContentWrapperVariants, accordionTriggerVariants, accordionTitleVariants, accordionIconVariants, accordionContentVariants, tooltipVariants, tabsListVariants, tabsTriggerVariants, tabsPanelVariants, tabsIndicatorVariants, modalOverlayVariants, modalContainerVariants, modalHeaderVariants, modalTitleVariants, modalContentVariants, modalFooterVariants, modalCloseVariants } from '@lumaui/core';
2
+ import { input, computed, HostBinding, Directive, ChangeDetectionStrategy, Component, output, InjectionToken, inject, ElementRef, Renderer2, effect, signal, HostListener, PLATFORM_ID, TemplateRef, ViewContainerRef, ApplicationRef, Injector, createComponent, Injectable } from '@angular/core';
3
+ import { buttonVariants, badgeVariants, cardVariants, cardContentVariants, cardTitleVariants, cardDescriptionVariants, accordionItemVariants, accordionContentWrapperVariants, accordionTriggerVariants, accordionTitleVariants, accordionIconVariants, accordionContentVariants, tooltipVariants, tabsListVariants, tabsTriggerVariants, tabsPanelVariants, tabsIndicatorVariants, modalOverlayVariants, modalContainerVariants, modalHeaderVariants, modalTitleVariants, modalContentVariants, modalFooterVariants, modalCloseVariants, toastCloseVariants, toastItemVariants, toastIconVariants, toastContentVariants, toastTitleVariants, toastMessageVariants, toastContainerVariants } from '@lumaui/core';
4
4
  import { isPlatformBrowser, DOCUMENT } from '@angular/common';
5
+ import { Subject, interval } from 'rxjs';
6
+ import { takeWhile, filter } from 'rxjs/operators';
5
7
 
6
- class ButtonDirective {
8
+ class LmButtonDirective {
7
9
  // Signal-based inputs with lm prefix (Angular 20+)
8
10
  lmVariant = input('primary', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
9
11
  lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
@@ -17,10 +19,10 @@ class ButtonDirective {
17
19
  get hostClasses() {
18
20
  return this.classes();
19
21
  }
20
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
21
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ButtonDirective, isStandalone: true, selector: "button[lumaButton], a[lumaButton]", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmType: { classPropertyName: "lmType", publicName: "lmType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "lmType()", "attr.disabled": "lmDisabled() ? \"\" : null", "class": "this.hostClasses" } }, ngImport: i0 });
22
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
23
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmButtonDirective, isStandalone: true, selector: "button[lumaButton], a[lumaButton]", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmType: { classPropertyName: "lmType", publicName: "lmType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "lmType()", "attr.disabled": "lmDisabled() ? \"\" : null", "class": "this.hostClasses" } }, ngImport: i0 });
22
24
  }
23
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ButtonDirective, decorators: [{
25
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmButtonDirective, decorators: [{
24
26
  type: Directive,
25
27
  args: [{
26
28
  selector: 'button[lumaButton], a[lumaButton]',
@@ -34,16 +36,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
34
36
  args: ['class']
35
37
  }] } });
36
38
 
37
- class BadgeDirective {
39
+ class LmBadgeDirective {
38
40
  // Computed class string - layout only, no variants
39
41
  classes = computed(() => badgeVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
40
42
  get hostClasses() {
41
43
  return this.classes();
42
44
  }
43
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
44
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: BadgeDirective, isStandalone: true, selector: "[lumaBadge]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
45
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
46
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmBadgeDirective, isStandalone: true, selector: "[lumaBadge]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
45
47
  }
46
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BadgeDirective, decorators: [{
48
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmBadgeDirective, decorators: [{
47
49
  type: Directive,
48
50
  args: [{
49
51
  selector: '[lumaBadge]',
@@ -53,7 +55,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
53
55
  args: ['class']
54
56
  }] } });
55
57
 
56
- class CardComponent {
58
+ class LmCardComponent {
57
59
  /**
58
60
  * Card visual style variant
59
61
  * - default: Gradient border wrapper style (default)
@@ -65,23 +67,23 @@ class CardComponent {
65
67
  // Computed class strings based on variant
66
68
  wrapperClasses = computed(() => cardVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
67
69
  contentClasses = computed(() => cardContentVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
68
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
69
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: CardComponent, isStandalone: true, selector: "luma-card", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n <div [class]=\"contentClasses()\">\n <ng-content></ng-content>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
70
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
71
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmCardComponent, isStandalone: true, selector: "luma-card", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n <div [class]=\"contentClasses()\">\n <ng-content></ng-content>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
70
72
  }
71
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardComponent, decorators: [{
73
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardComponent, decorators: [{
72
74
  type: Component,
73
75
  args: [{ selector: 'luma-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n <div [class]=\"contentClasses()\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
74
76
  }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }] } });
75
77
 
76
- class CardTitleDirective {
78
+ class LmCardTitleDirective {
77
79
  // Signal-based inputs with lm prefix (Angular 20+)
78
80
  lmSize = input('normal', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
79
81
  // Computed class string
80
82
  classes = computed(() => cardTitleVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
81
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
82
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: CardTitleDirective, isStandalone: true, selector: "[lumaCardTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
83
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
84
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmCardTitleDirective, isStandalone: true, selector: "[lumaCardTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
83
85
  }
84
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardTitleDirective, decorators: [{
86
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardTitleDirective, decorators: [{
85
87
  type: Directive,
86
88
  args: [{
87
89
  selector: '[lumaCardTitle]',
@@ -91,15 +93,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
91
93
  }]
92
94
  }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
93
95
 
94
- class CardDescriptionDirective {
96
+ class LmCardDescriptionDirective {
95
97
  // Signal-based inputs with lm prefix (Angular 20+)
96
98
  lmSize = input('normal', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
97
99
  // Computed class string
98
100
  classes = computed(() => cardDescriptionVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
99
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
100
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: CardDescriptionDirective, isStandalone: true, selector: "[lumaCardDescription]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
101
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
102
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmCardDescriptionDirective, isStandalone: true, selector: "[lumaCardDescription]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
101
103
  }
102
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardDescriptionDirective, decorators: [{
104
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardDescriptionDirective, decorators: [{
103
105
  type: Directive,
104
106
  args: [{
105
107
  selector: '[lumaCardDescription]',
@@ -109,11 +111,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
109
111
  }]
110
112
  }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
111
113
 
112
- class CardHeaderDirective {
113
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
114
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: CardHeaderDirective, isStandalone: true, selector: "[lumaCardHeader]", host: { classAttribute: "mb-4" }, ngImport: i0 });
114
+ class LmCardHeaderDirective {
115
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
116
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmCardHeaderDirective, isStandalone: true, selector: "[lumaCardHeader]", host: { classAttribute: "mb-4" }, ngImport: i0 });
115
117
  }
116
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardHeaderDirective, decorators: [{
118
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardHeaderDirective, decorators: [{
117
119
  type: Directive,
118
120
  args: [{
119
121
  selector: '[lumaCardHeader]',
@@ -123,11 +125,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
123
125
  }]
124
126
  }] });
125
127
 
126
- class CardContentDirective {
127
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
128
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: CardContentDirective, isStandalone: true, selector: "[lumaCardContent]", ngImport: i0 });
128
+ class LmCardContentDirective {
129
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
130
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmCardContentDirective, isStandalone: true, selector: "[lumaCardContent]", ngImport: i0 });
129
131
  }
130
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardContentDirective, decorators: [{
132
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardContentDirective, decorators: [{
131
133
  type: Directive,
132
134
  args: [{
133
135
  selector: '[lumaCardContent]',
@@ -163,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
163
165
  * </luma-accordion-group>
164
166
  * ```
165
167
  */
166
- class AccordionGroupComponent {
168
+ class LmAccordionGroupComponent {
167
169
  /**
168
170
  * Controlled value for which items are open
169
171
  * - null: uncontrolled mode (each item manages its own state)
@@ -210,10 +212,10 @@ class AccordionGroupComponent {
210
212
  }
211
213
  this.lmValueChange.emit(newValue);
212
214
  }
213
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
214
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: AccordionGroupComponent, isStandalone: true, selector: "luma-accordion-group", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmSingle: { classPropertyName: "lmSingle", publicName: "lmSingle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "style.gap": "\"var(--luma-accordion-item-gap)\"" }, classAttribute: "flex flex-col" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
215
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
216
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmAccordionGroupComponent, isStandalone: true, selector: "luma-accordion-group", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmSingle: { classPropertyName: "lmSingle", publicName: "lmSingle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "style.gap": "\"var(--luma-accordion-item-gap)\"" }, classAttribute: "flex flex-col" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
215
217
  }
216
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionGroupComponent, decorators: [{
218
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionGroupComponent, decorators: [{
217
219
  type: Component,
218
220
  args: [{
219
221
  selector: 'luma-accordion-group',
@@ -256,8 +258,8 @@ const ACCORDION_ITEM = new InjectionToken('AccordionItem');
256
258
  * </luma-accordion-item>
257
259
  * ```
258
260
  */
259
- class AccordionItemComponent {
260
- group = inject(AccordionGroupComponent, { optional: true });
261
+ class LmAccordionItemComponent {
262
+ group = inject(LmAccordionGroupComponent, { optional: true });
261
263
  el = inject(ElementRef);
262
264
  renderer = inject(Renderer2);
263
265
  previousClasses = [];
@@ -339,12 +341,16 @@ class AccordionItemComponent {
339
341
  }
340
342
  this.lmOpenChange.emit(this.isOpen());
341
343
  }
342
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
343
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: AccordionItemComponent, isStandalone: true, selector: "luma-accordion-item", inputs: { lmId: { classPropertyName: "lmId", publicName: "lmId", isSignal: true, isRequired: false, transformFunction: null }, lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmOpen: { classPropertyName: "lmOpen", publicName: "lmOpen", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmOpenChange: "lmOpenChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "lmVariant()" } }, providers: [{ provide: ACCORDION_ITEM, useExisting: AccordionItemComponent }], ngImport: i0, template: "<!-- Slot for trigger button -->\n<ng-content select=\"[lumaAccordionTrigger]\"></ng-content>\n\n<!-- Content wrapper with grid-rows animation -->\n<div [class]=\"contentWrapperClasses()\">\n <div class=\"overflow-hidden\">\n <ng-content select=\"[lumaAccordionContent]\"></ng-content>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
344
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
345
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmAccordionItemComponent, isStandalone: true, selector: "luma-accordion-item", inputs: { lmId: { classPropertyName: "lmId", publicName: "lmId", isSignal: true, isRequired: false, transformFunction: null }, lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmOpen: { classPropertyName: "lmOpen", publicName: "lmOpen", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmOpenChange: "lmOpenChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "lmVariant()" } }, providers: [
346
+ { provide: ACCORDION_ITEM, useExisting: LmAccordionItemComponent },
347
+ ], ngImport: i0, template: "<!-- Slot for trigger button -->\n<ng-content select=\"[lumaAccordionTrigger]\"></ng-content>\n\n<!-- Content wrapper with grid-rows animation -->\n<div [class]=\"contentWrapperClasses()\">\n <div class=\"overflow-hidden\">\n <ng-content select=\"[lumaAccordionContent]\"></ng-content>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
344
348
  }
345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionItemComponent, decorators: [{
349
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionItemComponent, decorators: [{
346
350
  type: Component,
347
- args: [{ selector: 'luma-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: ACCORDION_ITEM, useExisting: AccordionItemComponent }], host: {
351
+ args: [{ selector: 'luma-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
352
+ { provide: ACCORDION_ITEM, useExisting: LmAccordionItemComponent },
353
+ ], host: {
348
354
  '[attr.data-state]': 'isOpen() ? "open" : "closed"',
349
355
  '[attr.data-variant]': 'lmVariant()',
350
356
  }, template: "<!-- Slot for trigger button -->\n<ng-content select=\"[lumaAccordionTrigger]\"></ng-content>\n\n<!-- Content wrapper with grid-rows animation -->\n<div [class]=\"contentWrapperClasses()\">\n <div class=\"overflow-hidden\">\n <ng-content select=\"[lumaAccordionContent]\"></ng-content>\n </div>\n</div>\n" }]
@@ -382,7 +388,7 @@ let uniqueId$2 = 0;
382
388
  * </div>
383
389
  * ```
384
390
  */
385
- class AccordionTriggerDirective {
391
+ class LmAccordionTriggerDirective {
386
392
  item = inject(ACCORDION_ITEM);
387
393
  id = ++uniqueId$2;
388
394
  triggerId = `luma-accordion-trigger-${this.id}`;
@@ -403,10 +409,10 @@ class AccordionTriggerDirective {
403
409
  this.item.toggle();
404
410
  }
405
411
  }
406
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
407
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AccordionTriggerDirective, isStandalone: true, selector: "div[lumaAccordionTrigger]", host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "classes()", "attr.tabindex": "item.lmDisabled() ? -1 : 0", "attr.aria-expanded": "item.isOpen()", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.lmDisabled() ? \"true\" : null", "id": "triggerId" } }, ngImport: i0 });
412
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
413
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmAccordionTriggerDirective, isStandalone: true, selector: "div[lumaAccordionTrigger]", host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "classes()", "attr.tabindex": "item.lmDisabled() ? -1 : 0", "attr.aria-expanded": "item.isOpen()", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.lmDisabled() ? \"true\" : null", "id": "triggerId" } }, ngImport: i0 });
408
414
  }
409
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTriggerDirective, decorators: [{
415
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionTriggerDirective, decorators: [{
410
416
  type: Directive,
411
417
  args: [{
412
418
  selector: 'div[lumaAccordionTrigger]',
@@ -444,7 +450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
444
450
  * <span lumaAccordionTitle lmSize="lg">Large Title</span>
445
451
  * ```
446
452
  */
447
- class AccordionTitleDirective {
453
+ class LmAccordionTitleDirective {
448
454
  /**
449
455
  * Size variant for the title
450
456
  * - sm: Small text for compact UIs
@@ -453,10 +459,10 @@ class AccordionTitleDirective {
453
459
  */
454
460
  lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
455
461
  classes = computed(() => accordionTitleVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
456
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
457
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: AccordionTitleDirective, isStandalone: true, selector: "[lumaAccordionTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
462
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
463
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmAccordionTitleDirective, isStandalone: true, selector: "[lumaAccordionTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
458
464
  }
459
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTitleDirective, decorators: [{
465
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionTitleDirective, decorators: [{
460
466
  type: Directive,
461
467
  args: [{
462
468
  selector: '[lumaAccordionTitle]',
@@ -496,13 +502,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
496
502
  * </span>
497
503
  * ```
498
504
  */
499
- class AccordionIconDirective {
505
+ class LmAccordionIconDirective {
500
506
  item = inject(ACCORDION_ITEM);
501
507
  classes = computed(() => accordionIconVariants({ open: this.item.isOpen() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
502
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
503
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AccordionIconDirective, isStandalone: true, selector: "span[lumaAccordionIcon], div[lumaAccordionIcon]", host: { properties: { "class": "classes()", "attr.aria-hidden": "true" } }, ngImport: i0 });
508
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
509
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmAccordionIconDirective, isStandalone: true, selector: "span[lumaAccordionIcon], div[lumaAccordionIcon]", host: { properties: { "class": "classes()", "attr.aria-hidden": "true" } }, ngImport: i0 });
504
510
  }
505
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionIconDirective, decorators: [{
511
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionIconDirective, decorators: [{
506
512
  type: Directive,
507
513
  args: [{
508
514
  selector: 'span[lumaAccordionIcon], div[lumaAccordionIcon]',
@@ -527,17 +533,17 @@ let uniqueId$1 = 0;
527
533
  * </div>
528
534
  * ```
529
535
  */
530
- class AccordionContentDirective {
536
+ class LmAccordionContentDirective {
531
537
  item = inject(ACCORDION_ITEM);
532
- trigger = inject(AccordionTriggerDirective, { optional: true });
538
+ trigger = inject(LmAccordionTriggerDirective, { optional: true });
533
539
  id = ++uniqueId$1;
534
540
  contentId = `luma-accordion-content-${this.id}`;
535
541
  triggerId = computed(() => this.trigger?.triggerId ?? null, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
536
542
  classes = computed(() => accordionContentVariants({ open: this.item.isOpen() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
537
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
538
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AccordionContentDirective, isStandalone: true, selector: "[lumaAccordionContent]", host: { attributes: { "role": "region" }, properties: { "class": "classes()", "id": "contentId", "attr.aria-labelledby": "triggerId()", "attr.hidden": "!item.isOpen() ? \"\" : null" } }, ngImport: i0 });
543
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
544
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmAccordionContentDirective, isStandalone: true, selector: "[lumaAccordionContent]", host: { attributes: { "role": "region" }, properties: { "class": "classes()", "id": "contentId", "attr.aria-labelledby": "triggerId()", "attr.hidden": "!item.isOpen() ? \"\" : null" } }, ngImport: i0 });
539
545
  }
540
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionContentDirective, decorators: [{
546
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmAccordionContentDirective, decorators: [{
541
547
  type: Directive,
542
548
  args: [{
543
549
  selector: '[lumaAccordionContent]',
@@ -551,7 +557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
551
557
  }]
552
558
  }] });
553
559
 
554
- class TooltipDirective {
560
+ class LmTooltipDirective {
555
561
  el = inject(ElementRef);
556
562
  renderer = inject(Renderer2);
557
563
  platformId = inject(PLATFORM_ID);
@@ -734,10 +740,10 @@ class TooltipDirective {
734
740
  this.renderer.removeChild(this.el.nativeElement, this.tooltipElement);
735
741
  }
736
742
  }
737
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
738
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: TooltipDirective, isStandalone: true, selector: "[lumaTooltip]", inputs: { lumaTooltip: { classPropertyName: "lumaTooltip", publicName: "lumaTooltip", isSignal: true, isRequired: true, transformFunction: null }, lmPosition: { classPropertyName: "lmPosition", publicName: "lmPosition", isSignal: true, isRequired: false, transformFunction: null }, lmHtml: { classPropertyName: "lmHtml", publicName: "lmHtml", isSignal: true, isRequired: false, transformFunction: null }, lmTrigger: { classPropertyName: "lmTrigger", publicName: "lmTrigger", isSignal: true, isRequired: false, transformFunction: null }, lmDelay: { classPropertyName: "lmDelay", publicName: "lmDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event)", "document:touchstart": "onDocumentTouch($event)" }, properties: { "attr.aria-describedby": "tooltipId", "style.position": "\"relative\"" } }, ngImport: i0 });
743
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
744
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTooltipDirective, isStandalone: true, selector: "[lumaTooltip]", inputs: { lumaTooltip: { classPropertyName: "lumaTooltip", publicName: "lumaTooltip", isSignal: true, isRequired: true, transformFunction: null }, lmPosition: { classPropertyName: "lmPosition", publicName: "lmPosition", isSignal: true, isRequired: false, transformFunction: null }, lmHtml: { classPropertyName: "lmHtml", publicName: "lmHtml", isSignal: true, isRequired: false, transformFunction: null }, lmTrigger: { classPropertyName: "lmTrigger", publicName: "lmTrigger", isSignal: true, isRequired: false, transformFunction: null }, lmDelay: { classPropertyName: "lmDelay", publicName: "lmDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event)", "document:touchstart": "onDocumentTouch($event)" }, properties: { "attr.aria-describedby": "tooltipId", "style.position": "\"relative\"" } }, ngImport: i0 });
739
745
  }
740
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TooltipDirective, decorators: [{
746
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTooltipDirective, decorators: [{
741
747
  type: Directive,
742
748
  args: [{
743
749
  selector: '[lumaTooltip]',
@@ -801,13 +807,13 @@ const TABS_LIST = new InjectionToken('TabsList');
801
807
  * </luma-tabs>
802
808
  * ```
803
809
  */
804
- class TabsComponent {
810
+ class LmTabsComponent {
805
811
  /** Controlled value - currently selected tab */
806
812
  lmValue = input(null, ...(ngDevMode ? [{ debugName: "lmValue" }] : []));
807
813
  /** Default value for uncontrolled mode */
808
814
  lmDefaultValue = input('', ...(ngDevMode ? [{ debugName: "lmDefaultValue" }] : []));
809
815
  /** Visual style: underline, background, or pill */
810
- lmStyle = input('underline', ...(ngDevMode ? [{ debugName: "lmStyle" }] : []));
816
+ lmVariant = input('underline', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
811
817
  /** Whether to lazy load panel content */
812
818
  lmLazy = input(true, ...(ngDevMode ? [{ debugName: "lmLazy" }] : []));
813
819
  /** Emits when selected tab changes */
@@ -902,15 +908,15 @@ class TabsComponent {
902
908
  this.select(value);
903
909
  }
904
910
  }
905
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
906
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: TabsComponent, isStandalone: true, selector: "luma-tabs", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmDefaultValue: { classPropertyName: "lmDefaultValue", publicName: "lmDefaultValue", isSignal: true, isRequired: false, transformFunction: null }, lmStyle: { classPropertyName: "lmStyle", publicName: "lmStyle", isSignal: true, isRequired: false, transformFunction: null }, lmLazy: { classPropertyName: "lmLazy", publicName: "lmLazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "class": "\"block w-full\"" } }, providers: [
911
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
912
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmTabsComponent, isStandalone: true, selector: "luma-tabs", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmDefaultValue: { classPropertyName: "lmDefaultValue", publicName: "lmDefaultValue", isSignal: true, isRequired: false, transformFunction: null }, lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmLazy: { classPropertyName: "lmLazy", publicName: "lmLazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "class": "\"block w-full\"" } }, providers: [
907
913
  {
908
914
  provide: TABS_GROUP,
909
- useExisting: TabsComponent,
915
+ useExisting: LmTabsComponent,
910
916
  },
911
917
  ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
912
918
  }
913
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsComponent, decorators: [{
919
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsComponent, decorators: [{
914
920
  type: Component,
915
921
  args: [{
916
922
  selector: 'luma-tabs',
@@ -919,14 +925,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
919
925
  providers: [
920
926
  {
921
927
  provide: TABS_GROUP,
922
- useExisting: TabsComponent,
928
+ useExisting: LmTabsComponent,
923
929
  },
924
930
  ],
925
931
  host: {
926
932
  '[class]': '"block w-full"',
927
933
  },
928
934
  }]
929
- }], ctorParameters: () => [], propDecorators: { lmValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmValue", required: false }] }], lmDefaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDefaultValue", required: false }] }], lmStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmStyle", required: false }] }], lmLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmLazy", required: false }] }], lmValueChange: [{ type: i0.Output, args: ["lmValueChange"] }] } });
935
+ }], ctorParameters: () => [], propDecorators: { lmValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmValue", required: false }] }], lmDefaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDefaultValue", required: false }] }], lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }], lmLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmLazy", required: false }] }], lmValueChange: [{ type: i0.Output, args: ["lmValueChange"] }] } });
930
936
 
931
937
  /**
932
938
  * Tabs list directive
@@ -942,13 +948,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
942
948
  * </div>
943
949
  * ```
944
950
  */
945
- class TabsListDirective {
951
+ class LmTabsListDirective {
946
952
  elementRef = inject((ElementRef));
947
953
  tabsGroup = inject(TABS_GROUP);
948
954
  /** Whether horizontal scrolling is enabled */
949
955
  lmScrollable = false;
950
956
  classes = computed(() => tabsListVariants({
951
- style: this.tabsGroup.lmStyle(),
957
+ style: this.tabsGroup.lmVariant(),
952
958
  scrollable: this.lmScrollable,
953
959
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
954
960
  /**
@@ -970,22 +976,22 @@ class TabsListDirective {
970
976
  this.elementRef.nativeElement.scrollLeft += event.deltaY;
971
977
  }
972
978
  }
973
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
974
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: TabsListDirective, isStandalone: true, selector: "[lumaTabsList]", host: { attributes: { "role": "tablist" }, listeners: { "wheel": "onWheel($event)" }, properties: { "attr.aria-orientation": "\"horizontal\"", "class": "classes()" } }, providers: [
979
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
980
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmTabsListDirective, isStandalone: true, selector: "[lumaTabsList]", host: { attributes: { "role": "tablist" }, listeners: { "wheel": "onWheel($event)" }, properties: { "attr.aria-orientation": "\"horizontal\"", "class": "classes()" } }, providers: [
975
981
  {
976
982
  provide: TABS_LIST,
977
- useExisting: TabsListDirective,
983
+ useExisting: LmTabsListDirective,
978
984
  },
979
985
  ], ngImport: i0 });
980
986
  }
981
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsListDirective, decorators: [{
987
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsListDirective, decorators: [{
982
988
  type: Directive,
983
989
  args: [{
984
990
  selector: '[lumaTabsList]',
985
991
  providers: [
986
992
  {
987
993
  provide: TABS_LIST,
988
- useExisting: TabsListDirective,
994
+ useExisting: LmTabsListDirective,
989
995
  },
990
996
  ],
991
997
  host: {
@@ -1010,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1010
1016
  * <button lumaTabsTrigger="tab-1">Tab 1</button>
1011
1017
  * ```
1012
1018
  */
1013
- class TabsTriggerDirective {
1019
+ class LmTabsTriggerDirective {
1014
1020
  el = inject((ElementRef));
1015
1021
  tabsGroup = inject(TABS_GROUP);
1016
1022
  /** Tab value identifier */
@@ -1025,7 +1031,7 @@ class TabsTriggerDirective {
1025
1031
  panelId = computed(() => `tab-panel-${this.lumaTabsTrigger()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
1026
1032
  /** Computed: CSS classes from CVA */
1027
1033
  classes = computed(() => tabsTriggerVariants({
1028
- style: this.tabsGroup.lmStyle(),
1034
+ style: this.tabsGroup.lmVariant(),
1029
1035
  selected: this.isSelected(),
1030
1036
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1031
1037
  ngOnInit() {
@@ -1066,10 +1072,10 @@ class TabsTriggerDirective {
1066
1072
  break;
1067
1073
  }
1068
1074
  }
1069
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1070
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: TabsTriggerDirective, isStandalone: true, selector: "[lumaTabsTrigger]", inputs: { lumaTabsTrigger: { classPropertyName: "lumaTabsTrigger", publicName: "lumaTabsTrigger", isSignal: true, isRequired: true, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "triggerId()", "attr.aria-selected": "isSelected()", "attr.aria-controls": "panelId()", "attr.tabindex": "isSelected() ? 0 : -1", "class": "classes()" } }, ngImport: i0 });
1075
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1076
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTabsTriggerDirective, isStandalone: true, selector: "[lumaTabsTrigger]", inputs: { lumaTabsTrigger: { classPropertyName: "lumaTabsTrigger", publicName: "lumaTabsTrigger", isSignal: true, isRequired: true, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "triggerId()", "attr.aria-selected": "isSelected()", "attr.aria-controls": "panelId()", "attr.tabindex": "isSelected() ? 0 : -1", "class": "classes()" } }, ngImport: i0 });
1071
1077
  }
1072
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsTriggerDirective, decorators: [{
1078
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsTriggerDirective, decorators: [{
1073
1079
  type: Directive,
1074
1080
  args: [{
1075
1081
  selector: '[lumaTabsTrigger]',
@@ -1107,7 +1113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1107
1113
  * </ng-template>
1108
1114
  * ```
1109
1115
  */
1110
- class TabsPanelDirective {
1116
+ class LmTabsPanelDirective {
1111
1117
  tabsGroup = inject(TABS_GROUP);
1112
1118
  templateRef = inject((TemplateRef), {
1113
1119
  optional: true,
@@ -1158,10 +1164,10 @@ class TabsPanelDirective {
1158
1164
  }
1159
1165
  });
1160
1166
  }
1161
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1162
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: TabsPanelDirective, isStandalone: true, selector: "[lumaTabsPanel]", inputs: { lumaTabsPanel: { classPropertyName: "lumaTabsPanel", publicName: "lumaTabsPanel", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.aria-labelledby": "triggerId()", "attr.tabindex": "0", "class": "classes()", "hidden": "!isVisible()" } }, ngImport: i0 });
1167
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1168
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTabsPanelDirective, isStandalone: true, selector: "[lumaTabsPanel]", inputs: { lumaTabsPanel: { classPropertyName: "lumaTabsPanel", publicName: "lumaTabsPanel", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.aria-labelledby": "triggerId()", "attr.tabindex": "0", "class": "classes()", "hidden": "!isVisible()" } }, ngImport: i0 });
1163
1169
  }
1164
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsPanelDirective, decorators: [{
1170
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsPanelDirective, decorators: [{
1165
1171
  type: Directive,
1166
1172
  args: [{
1167
1173
  selector: '[lumaTabsPanel]',
@@ -1191,7 +1197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1191
1197
  * </div>
1192
1198
  * ```
1193
1199
  */
1194
- class TabsIndicatorComponent {
1200
+ class LmTabsIndicatorComponent {
1195
1201
  platformId = inject(PLATFORM_ID);
1196
1202
  tabsGroup = inject(TABS_GROUP);
1197
1203
  tabsList = inject(TABS_LIST);
@@ -1203,7 +1209,7 @@ class TabsIndicatorComponent {
1203
1209
  resizeObserver = null;
1204
1210
  /** Computed: CSS classes from CVA */
1205
1211
  classes = computed(() => {
1206
- const style = this.tabsGroup.lmStyle();
1212
+ const style = this.tabsGroup.lmVariant();
1207
1213
  // Only show indicator for underline style
1208
1214
  const isVisible = style === 'underline';
1209
1215
  return tabsIndicatorVariants({
@@ -1252,10 +1258,10 @@ class TabsIndicatorComponent {
1252
1258
  this.indicatorPosition.set(triggerRect.left - listRect.left);
1253
1259
  this.indicatorWidth.set(triggerRect.width);
1254
1260
  }
1255
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1256
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TabsIndicatorComponent, isStandalone: true, selector: "luma-tabs-indicator", host: { properties: { "class": "classes()", "style.width.px": "indicatorWidth()", "style.transform": "indicatorTransform()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1261
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1262
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LmTabsIndicatorComponent, isStandalone: true, selector: "luma-tabs-indicator", host: { properties: { "class": "classes()", "style.width.px": "indicatorWidth()", "style.transform": "indicatorTransform()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1257
1263
  }
1258
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsIndicatorComponent, decorators: [{
1264
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsIndicatorComponent, decorators: [{
1259
1265
  type: Component,
1260
1266
  args: [{
1261
1267
  selector: 'luma-tabs-indicator',
@@ -1311,7 +1317,7 @@ let uniqueId = 0;
1311
1317
  * <button (click)="modal.open()">Open</button>
1312
1318
  * ```
1313
1319
  */
1314
- class ModalComponent {
1320
+ class LmModalComponent {
1315
1321
  platformId = inject(PLATFORM_ID);
1316
1322
  document = inject(DOCUMENT);
1317
1323
  /** Controlled open state (null = uncontrolled mode) */
@@ -1434,15 +1440,15 @@ class ModalComponent {
1434
1440
  this.escapeHandler = null;
1435
1441
  }
1436
1442
  }
1437
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1438
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ModalComponent, isStandalone: true, selector: "luma-modal", inputs: { lmOpen: { classPropertyName: "lmOpen", publicName: "lmOpen", isSignal: true, isRequired: false, transformFunction: null }, lmDefaultOpen: { classPropertyName: "lmDefaultOpen", publicName: "lmDefaultOpen", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmCloseOnOverlay: { classPropertyName: "lmCloseOnOverlay", publicName: "lmCloseOnOverlay", isSignal: true, isRequired: false, transformFunction: null }, lmCloseOnEscape: { classPropertyName: "lmCloseOnEscape", publicName: "lmCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmOpenChange: "lmOpenChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, providers: [
1443
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1444
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmModalComponent, isStandalone: true, selector: "luma-modal", inputs: { lmOpen: { classPropertyName: "lmOpen", publicName: "lmOpen", isSignal: true, isRequired: false, transformFunction: null }, lmDefaultOpen: { classPropertyName: "lmDefaultOpen", publicName: "lmDefaultOpen", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmCloseOnOverlay: { classPropertyName: "lmCloseOnOverlay", publicName: "lmCloseOnOverlay", isSignal: true, isRequired: false, transformFunction: null }, lmCloseOnEscape: { classPropertyName: "lmCloseOnEscape", publicName: "lmCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmOpenChange: "lmOpenChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, providers: [
1439
1445
  {
1440
1446
  provide: MODAL_CONTEXT,
1441
- useExisting: ModalComponent,
1447
+ useExisting: LmModalComponent,
1442
1448
  },
1443
1449
  ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1444
1450
  }
1445
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalComponent, decorators: [{
1451
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalComponent, decorators: [{
1446
1452
  type: Component,
1447
1453
  args: [{
1448
1454
  selector: 'luma-modal',
@@ -1451,7 +1457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1451
1457
  providers: [
1452
1458
  {
1453
1459
  provide: MODAL_CONTEXT,
1454
- useExisting: ModalComponent,
1460
+ useExisting: LmModalComponent,
1455
1461
  },
1456
1462
  ],
1457
1463
  host: {
@@ -1475,7 +1481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1475
1481
  * </luma-modal>
1476
1482
  * ```
1477
1483
  */
1478
- class ModalOverlayComponent {
1484
+ class LmModalOverlayComponent {
1479
1485
  modal = inject(MODAL_CONTEXT);
1480
1486
  /** Computed classes from CVA */
1481
1487
  classes = computed(() => modalOverlayVariants({
@@ -1490,10 +1496,10 @@ class ModalOverlayComponent {
1490
1496
  this.modal.close();
1491
1497
  }
1492
1498
  }
1493
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1494
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: ModalOverlayComponent, isStandalone: true, selector: "luma-modal-overlay", host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1499
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1500
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LmModalOverlayComponent, isStandalone: true, selector: "luma-modal-overlay", host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1495
1501
  }
1496
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalOverlayComponent, decorators: [{
1502
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalOverlayComponent, decorators: [{
1497
1503
  type: Component,
1498
1504
  args: [{
1499
1505
  selector: 'luma-modal-overlay',
@@ -1527,7 +1533,7 @@ const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:
1527
1533
  * </luma-modal-overlay>
1528
1534
  * ```
1529
1535
  */
1530
- class ModalContainerComponent {
1536
+ class LmModalContainerComponent {
1531
1537
  modal = inject(MODAL_CONTEXT);
1532
1538
  elementRef = inject((ElementRef));
1533
1539
  platformId = inject(PLATFORM_ID);
@@ -1616,10 +1622,10 @@ class ModalContainerComponent {
1616
1622
  this.focusTrapHandler = null;
1617
1623
  }
1618
1624
  }
1619
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1620
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: ModalContainerComponent, isStandalone: true, selector: "luma-modal-container", host: { attributes: { "role": "dialog" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "titleId()", "class": "classes()", "attr.data-state": "modal.isOpen() ? \"open\" : \"closed\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1625
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1626
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LmModalContainerComponent, isStandalone: true, selector: "luma-modal-container", host: { attributes: { "role": "dialog" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "titleId()", "class": "classes()", "attr.data-state": "modal.isOpen() ? \"open\" : \"closed\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1621
1627
  }
1622
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContainerComponent, decorators: [{
1628
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalContainerComponent, decorators: [{
1623
1629
  type: Component,
1624
1630
  args: [{
1625
1631
  selector: 'luma-modal-container',
@@ -1649,13 +1655,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1649
1655
  * </div>
1650
1656
  * ```
1651
1657
  */
1652
- class ModalHeaderDirective {
1658
+ class LmModalHeaderDirective {
1653
1659
  /** Computed classes from CVA */
1654
1660
  classes = computed(() => modalHeaderVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1655
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1656
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ModalHeaderDirective, isStandalone: true, selector: "[lumaModalHeader]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
1661
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1662
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmModalHeaderDirective, isStandalone: true, selector: "[lumaModalHeader]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
1657
1663
  }
1658
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalHeaderDirective, decorators: [{
1664
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalHeaderDirective, decorators: [{
1659
1665
  type: Directive,
1660
1666
  args: [{
1661
1667
  selector: '[lumaModalHeader]',
@@ -1677,7 +1683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1677
1683
  * <h2 lumaModalTitle lmSize="lg">Large Title</h2>
1678
1684
  * ```
1679
1685
  */
1680
- class ModalTitleDirective {
1686
+ class LmModalTitleDirective {
1681
1687
  modal = inject(MODAL_CONTEXT);
1682
1688
  /** Title size variant */
1683
1689
  lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
@@ -1687,10 +1693,10 @@ class ModalTitleDirective {
1687
1693
  classes = computed(() => modalTitleVariants({
1688
1694
  size: this.lmSize(),
1689
1695
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1690
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1691
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ModalTitleDirective, isStandalone: true, selector: "[lumaModalTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "titleId()", "class": "classes()" } }, ngImport: i0 });
1696
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1697
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmModalTitleDirective, isStandalone: true, selector: "[lumaModalTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "titleId()", "class": "classes()" } }, ngImport: i0 });
1692
1698
  }
1693
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalTitleDirective, decorators: [{
1699
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalTitleDirective, decorators: [{
1694
1700
  type: Directive,
1695
1701
  args: [{
1696
1702
  selector: '[lumaModalTitle]',
@@ -1718,17 +1724,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1718
1724
  * </div>
1719
1725
  * ```
1720
1726
  */
1721
- class ModalContentDirective {
1727
+ class LmModalContentDirective {
1722
1728
  /** Enable scroll when content overflows */
1723
1729
  lmScrollable = input(true, ...(ngDevMode ? [{ debugName: "lmScrollable" }] : []));
1724
1730
  /** Computed classes from CVA */
1725
1731
  classes = computed(() => modalContentVariants({
1726
1732
  scrollable: this.lmScrollable(),
1727
1733
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1728
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1729
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ModalContentDirective, isStandalone: true, selector: "[lumaModalContent]", inputs: { lmScrollable: { classPropertyName: "lmScrollable", publicName: "lmScrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
1734
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1735
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmModalContentDirective, isStandalone: true, selector: "[lumaModalContent]", inputs: { lmScrollable: { classPropertyName: "lmScrollable", publicName: "lmScrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
1730
1736
  }
1731
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContentDirective, decorators: [{
1737
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalContentDirective, decorators: [{
1732
1738
  type: Directive,
1733
1739
  args: [{
1734
1740
  selector: '[lumaModalContent]',
@@ -1757,17 +1763,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1757
1763
  * </div>
1758
1764
  * ```
1759
1765
  */
1760
- class ModalFooterDirective {
1766
+ class LmModalFooterDirective {
1761
1767
  /** Alignment of footer content */
1762
1768
  lmAlign = input('end', ...(ngDevMode ? [{ debugName: "lmAlign" }] : []));
1763
1769
  /** Computed classes from CVA */
1764
1770
  classes = computed(() => modalFooterVariants({
1765
1771
  align: this.lmAlign(),
1766
1772
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1767
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1768
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ModalFooterDirective, isStandalone: true, selector: "[lumaModalFooter]", inputs: { lmAlign: { classPropertyName: "lmAlign", publicName: "lmAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
1773
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1774
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmModalFooterDirective, isStandalone: true, selector: "[lumaModalFooter]", inputs: { lmAlign: { classPropertyName: "lmAlign", publicName: "lmAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
1769
1775
  }
1770
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalFooterDirective, decorators: [{
1776
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalFooterDirective, decorators: [{
1771
1777
  type: Directive,
1772
1778
  args: [{
1773
1779
  selector: '[lumaModalFooter]',
@@ -1797,7 +1803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1797
1803
  * </luma-modal-close>
1798
1804
  * ```
1799
1805
  */
1800
- class ModalCloseComponent {
1806
+ class LmModalCloseComponent {
1801
1807
  modal = inject(MODAL_CONTEXT);
1802
1808
  /** Accessible label for the close button */
1803
1809
  lmAriaLabel = input('Close modal', ...(ngDevMode ? [{ debugName: "lmAriaLabel" }] : []));
@@ -1805,8 +1811,8 @@ class ModalCloseComponent {
1805
1811
  ariaLabel = computed(() => this.lmAriaLabel(), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
1806
1812
  /** Computed classes from CVA */
1807
1813
  classes = computed(() => modalCloseVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1808
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1809
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ModalCloseComponent, isStandalone: true, selector: "luma-modal-close", inputs: { lmAriaLabel: { classPropertyName: "lmAriaLabel", publicName: "lmAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
1814
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1815
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmModalCloseComponent, isStandalone: true, selector: "luma-modal-close", inputs: { lmAriaLabel: { classPropertyName: "lmAriaLabel", publicName: "lmAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
1810
1816
  <button
1811
1817
  type="button"
1812
1818
  [attr.aria-label]="ariaLabel()"
@@ -1832,7 +1838,7 @@ class ModalCloseComponent {
1832
1838
  </button>
1833
1839
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1834
1840
  }
1835
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalCloseComponent, decorators: [{
1841
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalCloseComponent, decorators: [{
1836
1842
  type: Component,
1837
1843
  args: [{
1838
1844
  selector: 'luma-modal-close',
@@ -1870,11 +1876,756 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
1870
1876
 
1871
1877
  // Modal Component & Directives
1872
1878
 
1879
+ /**
1880
+ * Internal toast reference implementation
1881
+ */
1882
+ class ToastRefImpl {
1883
+ id;
1884
+ dismissFn;
1885
+ _afterDismissed = new Subject();
1886
+ constructor(id, dismissFn) {
1887
+ this.id = id;
1888
+ this.dismissFn = dismissFn;
1889
+ }
1890
+ dismiss() {
1891
+ this.dismissFn(this.id);
1892
+ }
1893
+ get afterDismissed() {
1894
+ return this._afterDismissed.asObservable();
1895
+ }
1896
+ /** @internal Called when toast is actually dismissed */
1897
+ _notifyDismissed() {
1898
+ this._afterDismissed.next();
1899
+ this._afterDismissed.complete();
1900
+ }
1901
+ }
1902
+ /**
1903
+ * Default toast configuration
1904
+ */
1905
+ const DEFAULT_TOAST_CONFIG = {
1906
+ position: 'top-right',
1907
+ duration: 5000,
1908
+ dismissible: true,
1909
+ maxVisible: 5,
1910
+ pauseOnHover: true,
1911
+ };
1912
+ /**
1913
+ * Injection token for global toast configuration
1914
+ */
1915
+ const TOAST_CONFIG = new InjectionToken('ToastConfig', {
1916
+ providedIn: 'root',
1917
+ factory: () => DEFAULT_TOAST_CONFIG,
1918
+ });
1919
+ /**
1920
+ * Provider function for custom toast configuration
1921
+ */
1922
+ function provideToastConfig(config) {
1923
+ return {
1924
+ provide: TOAST_CONFIG,
1925
+ useValue: { ...DEFAULT_TOAST_CONFIG, ...config },
1926
+ };
1927
+ }
1928
+
1929
+ /**
1930
+ * ToastCloseComponent
1931
+ *
1932
+ * Close button for toast notifications.
1933
+ * Styled according to the toast variant.
1934
+ *
1935
+ * @internal Used by ToastItemComponent
1936
+ */
1937
+ class LmToastCloseComponent {
1938
+ /** Toast variant for styling */
1939
+ lmVariant = input('info', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
1940
+ /** CSS classes */
1941
+ classes = computed(() => toastCloseVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
1942
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1943
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmToastCloseComponent, isStandalone: true, selector: "luma-toast-close", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "aria-label": "Close notification" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
1944
+ <svg
1945
+ xmlns="http://www.w3.org/2000/svg"
1946
+ viewBox="0 0 20 20"
1947
+ fill="currentColor"
1948
+ class="lm-size-toast-close"
1949
+ aria-hidden="true"
1950
+ >
1951
+ <path
1952
+ d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
1953
+ />
1954
+ </svg>
1955
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1956
+ }
1957
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastCloseComponent, decorators: [{
1958
+ type: Component,
1959
+ args: [{
1960
+ selector: 'luma-toast-close',
1961
+ template: `
1962
+ <svg
1963
+ xmlns="http://www.w3.org/2000/svg"
1964
+ viewBox="0 0 20 20"
1965
+ fill="currentColor"
1966
+ class="lm-size-toast-close"
1967
+ aria-hidden="true"
1968
+ >
1969
+ <path
1970
+ d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
1971
+ />
1972
+ </svg>
1973
+ `,
1974
+ host: {
1975
+ type: 'button',
1976
+ '[class]': 'classes()',
1977
+ 'aria-label': 'Close notification',
1978
+ },
1979
+ changeDetection: ChangeDetectionStrategy.OnPush,
1980
+ }]
1981
+ }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }] } });
1982
+
1983
+ /**
1984
+ * ToastItemComponent
1985
+ *
1986
+ * Individual toast notification with timer and icon.
1987
+ *
1988
+ * @internal Created by ToastContainerComponent
1989
+ */
1990
+ class LmToastItemComponent {
1991
+ /** Toast data */
1992
+ toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : []));
1993
+ /** Emits when toast should be dismissed */
1994
+ dismiss = output();
1995
+ /** Timer subscription */
1996
+ timerSubscription = null;
1997
+ /** Remaining time in ms */
1998
+ remainingTime = signal(0, ...(ngDevMode ? [{ debugName: "remainingTime" }] : []));
1999
+ /** Whether timer is paused */
2000
+ isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
2001
+ /** Animation state */
2002
+ animationState = signal('entering', ...(ngDevMode ? [{ debugName: "animationState" }] : []));
2003
+ /** Item CSS classes */
2004
+ itemClasses = computed(() => toastItemVariants({
2005
+ variant: this.toast().variant,
2006
+ state: this.toast().isExiting ? 'exiting' : this.animationState(),
2007
+ }), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
2008
+ /** Icon CSS classes */
2009
+ iconClasses = computed(() => toastIconVariants({ variant: this.toast().variant }), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
2010
+ /** Content CSS classes */
2011
+ contentClasses = computed(() => toastContentVariants(), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
2012
+ /** Title CSS classes */
2013
+ titleClasses = computed(() => toastTitleVariants(), ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
2014
+ /** Message CSS classes */
2015
+ messageClasses = computed(() => toastMessageVariants(), ...(ngDevMode ? [{ debugName: "messageClasses" }] : []));
2016
+ /** Whether toast has interactive elements */
2017
+ hasInteractiveElements = computed(() => this.toast().dismissible, ...(ngDevMode ? [{ debugName: "hasInteractiveElements" }] : []));
2018
+ ngOnInit() {
2019
+ // Start animation
2020
+ requestAnimationFrame(() => {
2021
+ this.animationState.set('visible');
2022
+ });
2023
+ // Start timer if duration > 0
2024
+ const duration = this.toast().duration;
2025
+ if (duration > 0) {
2026
+ this.startTimer(duration);
2027
+ }
2028
+ }
2029
+ ngOnDestroy() {
2030
+ this.stopTimer();
2031
+ }
2032
+ /** Start auto-close timer */
2033
+ startTimer(duration) {
2034
+ this.remainingTime.set(duration);
2035
+ this.timerSubscription = interval(100)
2036
+ .pipe(takeWhile(() => this.remainingTime() > 0), filter(() => !this.isPaused()))
2037
+ .subscribe(() => {
2038
+ this.remainingTime.update((t) => t - 100);
2039
+ if (this.remainingTime() <= 0) {
2040
+ this.dismissToast();
2041
+ }
2042
+ });
2043
+ }
2044
+ /** Stop timer */
2045
+ stopTimer() {
2046
+ if (this.timerSubscription) {
2047
+ this.timerSubscription.unsubscribe();
2048
+ this.timerSubscription = null;
2049
+ }
2050
+ }
2051
+ /** Dismiss this toast */
2052
+ dismissToast() {
2053
+ this.dismiss.emit(this.toast().id);
2054
+ }
2055
+ /** Handle close button click */
2056
+ onClose() {
2057
+ this.dismissToast();
2058
+ }
2059
+ /** Pause timer on mouse enter */
2060
+ onMouseEnter() {
2061
+ if (this.toast().pauseOnHover) {
2062
+ this.isPaused.set(true);
2063
+ }
2064
+ }
2065
+ /** Resume timer on mouse leave */
2066
+ onMouseLeave() {
2067
+ this.isPaused.set(false);
2068
+ }
2069
+ /** Pause timer on focus */
2070
+ onFocus() {
2071
+ this.isPaused.set(true);
2072
+ }
2073
+ /** Resume timer on blur */
2074
+ onBlur() {
2075
+ this.isPaused.set(false);
2076
+ }
2077
+ /** Dismiss on Escape key */
2078
+ onEscapeKey() {
2079
+ if (this.toast().dismissible) {
2080
+ this.dismissToast();
2081
+ }
2082
+ }
2083
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2084
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: LmToastItemComponent, isStandalone: true, selector: "luma-toast-item", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "keydown.escape": "onEscapeKey()" }, properties: { "class": "itemClasses()", "attr.role": "toast().role", "attr.aria-live": "toast().variant === \"error\" ? \"assertive\" : \"polite\"", "attr.aria-atomic": "\"true\"", "tabindex": "hasInteractiveElements() ? 0 : -1" } }, ngImport: i0, template: `
2085
+ <!-- Icon -->
2086
+ <div [class]="iconClasses()">
2087
+ @switch (toast().variant) {
2088
+ @case ('info') {
2089
+ <svg
2090
+ xmlns="http://www.w3.org/2000/svg"
2091
+ viewBox="0 0 20 20"
2092
+ fill="currentColor"
2093
+ >
2094
+ <path
2095
+ fill-rule="evenodd"
2096
+ d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
2097
+ clip-rule="evenodd"
2098
+ />
2099
+ </svg>
2100
+ }
2101
+ @case ('success') {
2102
+ <svg
2103
+ xmlns="http://www.w3.org/2000/svg"
2104
+ viewBox="0 0 20 20"
2105
+ fill="currentColor"
2106
+ >
2107
+ <path
2108
+ fill-rule="evenodd"
2109
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
2110
+ clip-rule="evenodd"
2111
+ />
2112
+ </svg>
2113
+ }
2114
+ @case ('warning') {
2115
+ <svg
2116
+ xmlns="http://www.w3.org/2000/svg"
2117
+ viewBox="0 0 20 20"
2118
+ fill="currentColor"
2119
+ >
2120
+ <path
2121
+ fill-rule="evenodd"
2122
+ d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
2123
+ clip-rule="evenodd"
2124
+ />
2125
+ </svg>
2126
+ }
2127
+ @case ('error') {
2128
+ <svg
2129
+ xmlns="http://www.w3.org/2000/svg"
2130
+ viewBox="0 0 20 20"
2131
+ fill="currentColor"
2132
+ >
2133
+ <path
2134
+ fill-rule="evenodd"
2135
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
2136
+ clip-rule="evenodd"
2137
+ />
2138
+ </svg>
2139
+ }
2140
+ }
2141
+ </div>
2142
+
2143
+ <!-- Content -->
2144
+ <div [class]="contentClasses()">
2145
+ @if (toast().title) {
2146
+ <div [class]="titleClasses()">{{ toast().title }}</div>
2147
+ }
2148
+ <div [class]="messageClasses()">{{ toast().message }}</div>
2149
+ </div>
2150
+
2151
+ <!-- Close button -->
2152
+ @if (toast().dismissible) {
2153
+ <luma-toast-close [lmVariant]="toast().variant" (click)="onClose()" />
2154
+ }
2155
+ `, isInline: true, dependencies: [{ kind: "component", type: LmToastCloseComponent, selector: "luma-toast-close", inputs: ["lmVariant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2156
+ }
2157
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastItemComponent, decorators: [{
2158
+ type: Component,
2159
+ args: [{
2160
+ selector: 'luma-toast-item',
2161
+ template: `
2162
+ <!-- Icon -->
2163
+ <div [class]="iconClasses()">
2164
+ @switch (toast().variant) {
2165
+ @case ('info') {
2166
+ <svg
2167
+ xmlns="http://www.w3.org/2000/svg"
2168
+ viewBox="0 0 20 20"
2169
+ fill="currentColor"
2170
+ >
2171
+ <path
2172
+ fill-rule="evenodd"
2173
+ d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
2174
+ clip-rule="evenodd"
2175
+ />
2176
+ </svg>
2177
+ }
2178
+ @case ('success') {
2179
+ <svg
2180
+ xmlns="http://www.w3.org/2000/svg"
2181
+ viewBox="0 0 20 20"
2182
+ fill="currentColor"
2183
+ >
2184
+ <path
2185
+ fill-rule="evenodd"
2186
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
2187
+ clip-rule="evenodd"
2188
+ />
2189
+ </svg>
2190
+ }
2191
+ @case ('warning') {
2192
+ <svg
2193
+ xmlns="http://www.w3.org/2000/svg"
2194
+ viewBox="0 0 20 20"
2195
+ fill="currentColor"
2196
+ >
2197
+ <path
2198
+ fill-rule="evenodd"
2199
+ d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
2200
+ clip-rule="evenodd"
2201
+ />
2202
+ </svg>
2203
+ }
2204
+ @case ('error') {
2205
+ <svg
2206
+ xmlns="http://www.w3.org/2000/svg"
2207
+ viewBox="0 0 20 20"
2208
+ fill="currentColor"
2209
+ >
2210
+ <path
2211
+ fill-rule="evenodd"
2212
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
2213
+ clip-rule="evenodd"
2214
+ />
2215
+ </svg>
2216
+ }
2217
+ }
2218
+ </div>
2219
+
2220
+ <!-- Content -->
2221
+ <div [class]="contentClasses()">
2222
+ @if (toast().title) {
2223
+ <div [class]="titleClasses()">{{ toast().title }}</div>
2224
+ }
2225
+ <div [class]="messageClasses()">{{ toast().message }}</div>
2226
+ </div>
2227
+
2228
+ <!-- Close button -->
2229
+ @if (toast().dismissible) {
2230
+ <luma-toast-close [lmVariant]="toast().variant" (click)="onClose()" />
2231
+ }
2232
+ `,
2233
+ host: {
2234
+ '[class]': 'itemClasses()',
2235
+ '[attr.role]': 'toast().role',
2236
+ '[attr.aria-live]': 'toast().variant === "error" ? "assertive" : "polite"',
2237
+ '[attr.aria-atomic]': '"true"',
2238
+ '[tabindex]': 'hasInteractiveElements() ? 0 : -1',
2239
+ '(mouseenter)': 'onMouseEnter()',
2240
+ '(mouseleave)': 'onMouseLeave()',
2241
+ '(focus)': 'onFocus()',
2242
+ '(blur)': 'onBlur()',
2243
+ '(keydown.escape)': 'onEscapeKey()',
2244
+ },
2245
+ changeDetection: ChangeDetectionStrategy.OnPush,
2246
+ imports: [LmToastCloseComponent],
2247
+ }]
2248
+ }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
2249
+
2250
+ /**
2251
+ * ToastContainerComponent
2252
+ *
2253
+ * Fixed-position container that renders all active toasts.
2254
+ * Supports all 6 positions simultaneously by grouping toasts by their position.
2255
+ *
2256
+ * @internal This component is created programmatically by ToastService
2257
+ */
2258
+ class LmToastContainerComponent {
2259
+ /** Toasts signal passed from ToastService */
2260
+ _toasts;
2261
+ /** Dismiss callback passed from ToastService */
2262
+ _onDismiss;
2263
+ /** Group toasts by their position */
2264
+ toastsByPosition = computed(() => {
2265
+ const groups = {
2266
+ 'top-left': [],
2267
+ 'top-center': [],
2268
+ 'top-right': [],
2269
+ 'bottom-left': [],
2270
+ 'bottom-center': [],
2271
+ 'bottom-right': [],
2272
+ };
2273
+ if (!this._toasts)
2274
+ return groups;
2275
+ for (const toast of this._toasts()) {
2276
+ const position = toast.position;
2277
+ if (groups[position]) {
2278
+ groups[position].push(toast);
2279
+ }
2280
+ }
2281
+ return groups;
2282
+ }, ...(ngDevMode ? [{ debugName: "toastsByPosition" }] : []));
2283
+ /** Get CSS classes for a specific position */
2284
+ getPositionClasses(position) {
2285
+ return toastContainerVariants({ position });
2286
+ }
2287
+ /** Handle dismiss event from toast item */
2288
+ onDismiss(id) {
2289
+ this._onDismiss?.(id);
2290
+ }
2291
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2292
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: LmToastContainerComponent, isStandalone: true, selector: "luma-toast-container", ngImport: i0, template: `
2293
+ <!-- Top Left -->
2294
+ @if (toastsByPosition()['top-left'].length) {
2295
+ <div
2296
+ role="region"
2297
+ aria-label="Top left notifications"
2298
+ [class]="getPositionClasses('top-left')"
2299
+ >
2300
+ @for (toast of toastsByPosition()['top-left']; track toast.id) {
2301
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2302
+ }
2303
+ </div>
2304
+ }
2305
+
2306
+ <!-- Top Center -->
2307
+ @if (toastsByPosition()['top-center'].length) {
2308
+ <div
2309
+ role="region"
2310
+ aria-label="Top center notifications"
2311
+ [class]="getPositionClasses('top-center')"
2312
+ >
2313
+ @for (toast of toastsByPosition()['top-center']; track toast.id) {
2314
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2315
+ }
2316
+ </div>
2317
+ }
2318
+
2319
+ <!-- Top Right -->
2320
+ @if (toastsByPosition()['top-right'].length) {
2321
+ <div
2322
+ role="region"
2323
+ aria-label="Top right notifications"
2324
+ [class]="getPositionClasses('top-right')"
2325
+ >
2326
+ @for (toast of toastsByPosition()['top-right']; track toast.id) {
2327
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2328
+ }
2329
+ </div>
2330
+ }
2331
+
2332
+ <!-- Bottom Left -->
2333
+ @if (toastsByPosition()['bottom-left'].length) {
2334
+ <div
2335
+ role="region"
2336
+ aria-label="Bottom left notifications"
2337
+ [class]="getPositionClasses('bottom-left')"
2338
+ >
2339
+ @for (toast of toastsByPosition()['bottom-left']; track toast.id) {
2340
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2341
+ }
2342
+ </div>
2343
+ }
2344
+
2345
+ <!-- Bottom Center -->
2346
+ @if (toastsByPosition()['bottom-center'].length) {
2347
+ <div
2348
+ role="region"
2349
+ aria-label="Bottom center notifications"
2350
+ [class]="getPositionClasses('bottom-center')"
2351
+ >
2352
+ @for (toast of toastsByPosition()['bottom-center']; track toast.id) {
2353
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2354
+ }
2355
+ </div>
2356
+ }
2357
+
2358
+ <!-- Bottom Right -->
2359
+ @if (toastsByPosition()['bottom-right'].length) {
2360
+ <div
2361
+ role="region"
2362
+ aria-label="Bottom right notifications"
2363
+ [class]="getPositionClasses('bottom-right')"
2364
+ >
2365
+ @for (toast of toastsByPosition()['bottom-right']; track toast.id) {
2366
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2367
+ }
2368
+ </div>
2369
+ }
2370
+ `, isInline: true, dependencies: [{ kind: "component", type: LmToastItemComponent, selector: "luma-toast-item", inputs: ["toast"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2371
+ }
2372
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastContainerComponent, decorators: [{
2373
+ type: Component,
2374
+ args: [{
2375
+ selector: 'luma-toast-container',
2376
+ template: `
2377
+ <!-- Top Left -->
2378
+ @if (toastsByPosition()['top-left'].length) {
2379
+ <div
2380
+ role="region"
2381
+ aria-label="Top left notifications"
2382
+ [class]="getPositionClasses('top-left')"
2383
+ >
2384
+ @for (toast of toastsByPosition()['top-left']; track toast.id) {
2385
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2386
+ }
2387
+ </div>
2388
+ }
2389
+
2390
+ <!-- Top Center -->
2391
+ @if (toastsByPosition()['top-center'].length) {
2392
+ <div
2393
+ role="region"
2394
+ aria-label="Top center notifications"
2395
+ [class]="getPositionClasses('top-center')"
2396
+ >
2397
+ @for (toast of toastsByPosition()['top-center']; track toast.id) {
2398
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2399
+ }
2400
+ </div>
2401
+ }
2402
+
2403
+ <!-- Top Right -->
2404
+ @if (toastsByPosition()['top-right'].length) {
2405
+ <div
2406
+ role="region"
2407
+ aria-label="Top right notifications"
2408
+ [class]="getPositionClasses('top-right')"
2409
+ >
2410
+ @for (toast of toastsByPosition()['top-right']; track toast.id) {
2411
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2412
+ }
2413
+ </div>
2414
+ }
2415
+
2416
+ <!-- Bottom Left -->
2417
+ @if (toastsByPosition()['bottom-left'].length) {
2418
+ <div
2419
+ role="region"
2420
+ aria-label="Bottom left notifications"
2421
+ [class]="getPositionClasses('bottom-left')"
2422
+ >
2423
+ @for (toast of toastsByPosition()['bottom-left']; track toast.id) {
2424
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2425
+ }
2426
+ </div>
2427
+ }
2428
+
2429
+ <!-- Bottom Center -->
2430
+ @if (toastsByPosition()['bottom-center'].length) {
2431
+ <div
2432
+ role="region"
2433
+ aria-label="Bottom center notifications"
2434
+ [class]="getPositionClasses('bottom-center')"
2435
+ >
2436
+ @for (toast of toastsByPosition()['bottom-center']; track toast.id) {
2437
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2438
+ }
2439
+ </div>
2440
+ }
2441
+
2442
+ <!-- Bottom Right -->
2443
+ @if (toastsByPosition()['bottom-right'].length) {
2444
+ <div
2445
+ role="region"
2446
+ aria-label="Bottom right notifications"
2447
+ [class]="getPositionClasses('bottom-right')"
2448
+ >
2449
+ @for (toast of toastsByPosition()['bottom-right']; track toast.id) {
2450
+ <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
2451
+ }
2452
+ </div>
2453
+ }
2454
+ `,
2455
+ changeDetection: ChangeDetectionStrategy.OnPush,
2456
+ imports: [LmToastItemComponent],
2457
+ }]
2458
+ }] });
2459
+
2460
+ /**
2461
+ * ToastService
2462
+ *
2463
+ * Injectable service for showing toast notifications programmatically.
2464
+ * Provides convenience methods for info, success, warning, and error toasts.
2465
+ *
2466
+ * @example
2467
+ * ```typescript
2468
+ * private toast = inject(ToastService);
2469
+ *
2470
+ * showSuccess() {
2471
+ * this.toast.success('Changes saved successfully!');
2472
+ * }
2473
+ *
2474
+ * showError() {
2475
+ * this.toast.error('Failed to save', {
2476
+ * title: 'Error',
2477
+ * duration: 0
2478
+ * });
2479
+ * }
2480
+ * ```
2481
+ */
2482
+ class LmToastService {
2483
+ config = inject(TOAST_CONFIG);
2484
+ appRef = inject(ApplicationRef);
2485
+ injector = inject(Injector);
2486
+ document = inject(DOCUMENT);
2487
+ platformId = inject(PLATFORM_ID);
2488
+ _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
2489
+ containerRef = null;
2490
+ nextId = 0;
2491
+ toastRefs = new Map();
2492
+ /** Observable list of current toasts */
2493
+ toasts = computed(() => this._toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
2494
+ ngOnDestroy() {
2495
+ this.destroyContainer();
2496
+ }
2497
+ /**
2498
+ * Show a toast notification
2499
+ * @param options - Toast configuration options
2500
+ * @returns ToastRef for programmatic control
2501
+ */
2502
+ show(options) {
2503
+ this.ensureContainer();
2504
+ const toast = {
2505
+ id: `toast-${this.nextId++}`,
2506
+ message: options.message,
2507
+ title: options.title ?? '',
2508
+ variant: options.variant ?? 'info',
2509
+ position: options.position ?? this.config.position,
2510
+ duration: options.duration ?? this.config.duration,
2511
+ dismissible: options.dismissible ?? this.config.dismissible,
2512
+ pauseOnHover: options.pauseOnHover ?? this.config.pauseOnHover,
2513
+ role: options.role ?? (options.variant === 'error' ? 'alert' : 'status'),
2514
+ createdAt: Date.now(),
2515
+ isExiting: false,
2516
+ };
2517
+ // Enforce max visible limit
2518
+ const currentToasts = this._toasts();
2519
+ if (currentToasts.length >= this.config.maxVisible) {
2520
+ // Remove oldest toast
2521
+ const oldest = currentToasts[0];
2522
+ this.dismiss(oldest.id);
2523
+ }
2524
+ this._toasts.update((toasts) => [...toasts, toast]);
2525
+ const toastRef = new ToastRefImpl(toast.id, (id) => this.dismiss(id));
2526
+ this.toastRefs.set(toast.id, toastRef);
2527
+ return toastRef;
2528
+ }
2529
+ /**
2530
+ * Show info toast
2531
+ * @param message - Toast message
2532
+ * @param options - Additional options
2533
+ */
2534
+ info(message, options) {
2535
+ return this.show({ ...options, message, variant: 'info' });
2536
+ }
2537
+ /**
2538
+ * Show success toast
2539
+ * @param message - Toast message
2540
+ * @param options - Additional options
2541
+ */
2542
+ success(message, options) {
2543
+ return this.show({ ...options, message, variant: 'success' });
2544
+ }
2545
+ /**
2546
+ * Show warning toast
2547
+ * @param message - Toast message
2548
+ * @param options - Additional options
2549
+ */
2550
+ warning(message, options) {
2551
+ return this.show({ ...options, message, variant: 'warning' });
2552
+ }
2553
+ /**
2554
+ * Show error toast
2555
+ * @param message - Toast message
2556
+ * @param options - Additional options
2557
+ */
2558
+ error(message, options) {
2559
+ return this.show({ ...options, message, variant: 'error' });
2560
+ }
2561
+ /**
2562
+ * Dismiss a specific toast
2563
+ * @param id - Toast ID to dismiss
2564
+ */
2565
+ dismiss(id) {
2566
+ // Mark as exiting for animation
2567
+ this._toasts.update((toasts) => toasts.map((t) => (t.id === id ? { ...t, isExiting: true } : t)));
2568
+ // Remove after animation completes (200ms)
2569
+ setTimeout(() => {
2570
+ this._toasts.update((toasts) => toasts.filter((t) => t.id !== id));
2571
+ // Notify ref
2572
+ const toastRef = this.toastRefs.get(id);
2573
+ if (toastRef) {
2574
+ toastRef._notifyDismissed();
2575
+ this.toastRefs.delete(id);
2576
+ }
2577
+ }, 200);
2578
+ }
2579
+ /**
2580
+ * Dismiss all toasts
2581
+ */
2582
+ dismissAll() {
2583
+ const ids = this._toasts().map((t) => t.id);
2584
+ ids.forEach((id) => this.dismiss(id));
2585
+ }
2586
+ /**
2587
+ * Ensure toast container exists in DOM
2588
+ */
2589
+ ensureContainer() {
2590
+ if (!isPlatformBrowser(this.platformId))
2591
+ return;
2592
+ if (this.containerRef)
2593
+ return;
2594
+ this.containerRef = createComponent(LmToastContainerComponent, {
2595
+ environmentInjector: this.appRef.injector,
2596
+ elementInjector: this.injector,
2597
+ });
2598
+ // Pass toasts signal to container
2599
+ this.containerRef.instance._toasts = this._toasts;
2600
+ this.containerRef.instance._onDismiss = (id) => this.dismiss(id);
2601
+ this.appRef.attachView(this.containerRef.hostView);
2602
+ this.document.body.appendChild(this.containerRef.location.nativeElement);
2603
+ }
2604
+ /**
2605
+ * Remove container from DOM
2606
+ */
2607
+ destroyContainer() {
2608
+ if (this.containerRef) {
2609
+ this.appRef.detachView(this.containerRef.hostView);
2610
+ this.containerRef.destroy();
2611
+ this.containerRef = null;
2612
+ }
2613
+ }
2614
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2615
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastService, providedIn: 'root' });
2616
+ }
2617
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastService, decorators: [{
2618
+ type: Injectable,
2619
+ args: [{ providedIn: 'root' }]
2620
+ }] });
2621
+
2622
+ // Toast public API
2623
+
1873
2624
  // Button exports
1874
2625
 
1875
2626
  /**
1876
2627
  * Generated bundle index. Do not edit.
1877
2628
  */
1878
2629
 
1879
- export { ACCORDION_ITEM, AccordionContentDirective, AccordionGroupComponent, AccordionIconDirective, AccordionItemComponent, AccordionTitleDirective, AccordionTriggerDirective, BadgeDirective, ButtonDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardHeaderDirective, CardTitleDirective, MODAL_CONTEXT, ModalCloseComponent, ModalComponent, ModalContainerComponent, ModalContentDirective, ModalFooterDirective, ModalHeaderDirective, ModalOverlayComponent, ModalTitleDirective, TABS_GROUP, TABS_LIST, TabsComponent, TabsIndicatorComponent, TabsListDirective, TabsPanelDirective, TabsTriggerDirective, TooltipDirective };
2630
+ export { ACCORDION_ITEM, DEFAULT_TOAST_CONFIG, LmAccordionContentDirective, LmAccordionGroupComponent, LmAccordionIconDirective, LmAccordionItemComponent, LmAccordionTitleDirective, LmAccordionTriggerDirective, LmBadgeDirective, LmButtonDirective, LmCardComponent, LmCardContentDirective, LmCardDescriptionDirective, LmCardHeaderDirective, LmCardTitleDirective, LmModalCloseComponent, LmModalComponent, LmModalContainerComponent, LmModalContentDirective, LmModalFooterDirective, LmModalHeaderDirective, LmModalOverlayComponent, LmModalTitleDirective, LmTabsComponent, LmTabsIndicatorComponent, LmTabsListDirective, LmTabsPanelDirective, LmTabsTriggerDirective, LmToastCloseComponent, LmToastContainerComponent, LmToastItemComponent, LmToastService, LmTooltipDirective, MODAL_CONTEXT, TABS_GROUP, TABS_LIST, TOAST_CONFIG, provideToastConfig };
1880
2631
  //# sourceMappingURL=lumaui-angular.mjs.map