@lumaui/angular 0.2.0 → 0.2.1

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