@luzmo/ngx-lucero 1.0.1-alpha.78

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 (136) hide show
  1. package/README.md +41 -0
  2. package/esm/components/accordion-item.d.ts +32 -0
  3. package/esm/components/accordion-item.js +89 -0
  4. package/esm/components/accordion.d.ts +38 -0
  5. package/esm/components/accordion.js +107 -0
  6. package/esm/components/action-bar.d.ts +32 -0
  7. package/esm/components/action-bar.js +83 -0
  8. package/esm/components/action-button.d.ts +59 -0
  9. package/esm/components/action-button.js +205 -0
  10. package/esm/components/action-group.d.ts +42 -0
  11. package/esm/components/action-group.js +155 -0
  12. package/esm/components/action-menu.d.ts +75 -0
  13. package/esm/components/action-menu.js +337 -0
  14. package/esm/components/avatar.d.ts +35 -0
  15. package/esm/components/avatar.js +94 -0
  16. package/esm/components/badge.d.ts +31 -0
  17. package/esm/components/badge.js +86 -0
  18. package/esm/components/button-group.d.ts +28 -0
  19. package/esm/components/button-group.js +71 -0
  20. package/esm/components/button.d.ts +40 -0
  21. package/esm/components/button.js +140 -0
  22. package/esm/components/calendar.d.ts +64 -0
  23. package/esm/components/calendar.js +218 -0
  24. package/esm/components/chat-message-group.d.ts +29 -0
  25. package/esm/components/chat-message-group.js +76 -0
  26. package/esm/components/chat-message.d.ts +50 -0
  27. package/esm/components/chat-message.js +156 -0
  28. package/esm/components/checkbox.d.ts +55 -0
  29. package/esm/components/checkbox.js +196 -0
  30. package/esm/components/clear-button.d.ts +32 -0
  31. package/esm/components/clear-button.js +88 -0
  32. package/esm/components/close-button.d.ts +33 -0
  33. package/esm/components/close-button.js +95 -0
  34. package/esm/components/color-area.d.ts +45 -0
  35. package/esm/components/color-area.js +167 -0
  36. package/esm/components/color-field.d.ts +91 -0
  37. package/esm/components/color-field.js +321 -0
  38. package/esm/components/color-handle.d.ts +31 -0
  39. package/esm/components/color-handle.js +90 -0
  40. package/esm/components/color-loupe.d.ts +29 -0
  41. package/esm/components/color-loupe.js +76 -0
  42. package/esm/components/color-menu.d.ts +36 -0
  43. package/esm/components/color-menu.js +97 -0
  44. package/esm/components/color-palette-group.d.ts +40 -0
  45. package/esm/components/color-palette-group.js +117 -0
  46. package/esm/components/color-palette.d.ts +43 -0
  47. package/esm/components/color-palette.js +126 -0
  48. package/esm/components/color-picker.d.ts +49 -0
  49. package/esm/components/color-picker.js +143 -0
  50. package/esm/components/color-slider.d.ts +53 -0
  51. package/esm/components/color-slider.js +215 -0
  52. package/esm/components/date-range-picker.d.ts +69 -0
  53. package/esm/components/date-range-picker.js +228 -0
  54. package/esm/components/date-time-picker.d.ts +71 -0
  55. package/esm/components/date-time-picker.js +249 -0
  56. package/esm/components/divider.d.ts +31 -0
  57. package/esm/components/divider.js +78 -0
  58. package/esm/components/field-group.d.ts +32 -0
  59. package/esm/components/field-group.js +101 -0
  60. package/esm/components/field-label.d.ts +37 -0
  61. package/esm/components/field-label.js +104 -0
  62. package/esm/components/help-text.d.ts +30 -0
  63. package/esm/components/help-text.js +77 -0
  64. package/esm/components/icon.d.ts +33 -0
  65. package/esm/components/icon.js +104 -0
  66. package/esm/components/infield-button.d.ts +35 -0
  67. package/esm/components/infield-button.js +103 -0
  68. package/esm/components/label.d.ts +29 -0
  69. package/esm/components/label.js +76 -0
  70. package/esm/components/menu.d.ts +53 -0
  71. package/esm/components/menu.js +218 -0
  72. package/esm/components/multi-language-field.d.ts +58 -0
  73. package/esm/components/multi-language-field.js +263 -0
  74. package/esm/components/number-field.d.ts +103 -0
  75. package/esm/components/number-field.js +372 -0
  76. package/esm/components/options.d.ts +58 -0
  77. package/esm/components/options.js +207 -0
  78. package/esm/components/overlay.d.ts +67 -0
  79. package/esm/components/overlay.js +212 -0
  80. package/esm/components/picker-button.d.ts +32 -0
  81. package/esm/components/picker-button.js +94 -0
  82. package/esm/components/picker.d.ts +79 -0
  83. package/esm/components/picker.js +340 -0
  84. package/esm/components/popover.d.ts +33 -0
  85. package/esm/components/popover.js +93 -0
  86. package/esm/components/progress-bar.d.ts +35 -0
  87. package/esm/components/progress-bar.js +121 -0
  88. package/esm/components/progress-circle.d.ts +35 -0
  89. package/esm/components/progress-circle.js +94 -0
  90. package/esm/components/progress-steps.d.ts +46 -0
  91. package/esm/components/progress-steps.js +127 -0
  92. package/esm/components/prompt-box.d.ts +88 -0
  93. package/esm/components/prompt-box.js +280 -0
  94. package/esm/components/radio-group.d.ts +39 -0
  95. package/esm/components/radio-group.js +136 -0
  96. package/esm/components/radio.d.ts +46 -0
  97. package/esm/components/radio.js +172 -0
  98. package/esm/components/search.d.ts +95 -0
  99. package/esm/components/search.js +351 -0
  100. package/esm/components/select.d.ts +82 -0
  101. package/esm/components/select.js +351 -0
  102. package/esm/components/slider.d.ts +47 -0
  103. package/esm/components/slider.js +185 -0
  104. package/esm/components/status-light.d.ts +30 -0
  105. package/esm/components/status-light.js +78 -0
  106. package/esm/components/swatch-group.d.ts +37 -0
  107. package/esm/components/swatch-group.js +126 -0
  108. package/esm/components/swatch.d.ts +49 -0
  109. package/esm/components/swatch.js +197 -0
  110. package/esm/components/switch.d.ts +48 -0
  111. package/esm/components/switch.js +160 -0
  112. package/esm/components/tab-panel.d.ts +29 -0
  113. package/esm/components/tab-panel.js +78 -0
  114. package/esm/components/tab.d.ts +32 -0
  115. package/esm/components/tab.js +100 -0
  116. package/esm/components/tabs-overflow.d.ts +33 -0
  117. package/esm/components/tabs-overflow.js +97 -0
  118. package/esm/components/tabs.d.ts +43 -0
  119. package/esm/components/tabs.js +150 -0
  120. package/esm/components/tag.d.ts +31 -0
  121. package/esm/components/tag.js +90 -0
  122. package/esm/components/tags.d.ts +30 -0
  123. package/esm/components/tags.js +81 -0
  124. package/esm/components/text-field.d.ts +87 -0
  125. package/esm/components/text-field.js +308 -0
  126. package/esm/components/toast.d.ts +30 -0
  127. package/esm/components/toast.js +68 -0
  128. package/esm/components/tooltip.d.ts +44 -0
  129. package/esm/components/tooltip.js +154 -0
  130. package/esm/components/top-nav-item.d.ts +35 -0
  131. package/esm/components/top-nav-item.js +120 -0
  132. package/esm/components/top-nav.d.ts +35 -0
  133. package/esm/components/top-nav.js +110 -0
  134. package/esm/index.d.ts +135 -0
  135. package/esm/index.js +269 -0
  136. package/package.json +40 -0
@@ -0,0 +1,160 @@
1
+ import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
3
+ import '@luzmo/lucero/switch';
4
+ import * as i0 from "@angular/core";
5
+ const _c0 = ["*"];
6
+ /**
7
+ * Angular wrapper component for <luzmo-switch>
8
+ *
9
+ * @slot (default) - text label of the Switch
10
+ */
11
+ export class LuzmoSwitch {
12
+ elementRef = inject(ElementRef);
13
+ renderer = inject(Renderer2);
14
+ destroyRef = inject(DestroyRef);
15
+ host = this.elementRef.nativeElement;
16
+ listenerCleanup = [];
17
+ /** The underlying custom element instance. Use to call imperative methods. */
18
+ get nativeElement() {
19
+ return this.host;
20
+ }
21
+ /** Deliver the Switch with additional visual emphasis. */
22
+ emphasized;
23
+ /** Whether the thumb is within the Switch or overflows it. */
24
+ thumb;
25
+ /** The `checked` attribute reflects the state of the element */
26
+ checked;
27
+ /** The name attribute of the element */
28
+ name;
29
+ /** Whether the element is read-only */
30
+ readonly;
31
+ /** Announces a change in the `checked` property of a Switch */
32
+ changeEvent = output({ alias: 'change' });
33
+ constructor() {
34
+ this.bindEvents();
35
+ this.destroyRef.onDestroy(() => {
36
+ for (const cleanup of this.listenerCleanup) {
37
+ cleanup();
38
+ }
39
+ });
40
+ }
41
+ ngOnChanges(changes) {
42
+ for (const key of Object.keys(changes)) {
43
+ switch (key) {
44
+ case 'emphasized':
45
+ this.setHostProperty('emphasized', changes['emphasized'].currentValue);
46
+ break;
47
+ case 'thumb':
48
+ this.setHostProperty('thumb', changes['thumb'].currentValue);
49
+ break;
50
+ case 'checked':
51
+ this.setHostProperty('checked', changes['checked'].currentValue);
52
+ break;
53
+ case 'name':
54
+ this.setHostProperty('name', changes['name'].currentValue);
55
+ break;
56
+ case 'readonly':
57
+ this.setHostProperty('readonly', changes['readonly'].currentValue);
58
+ break;
59
+ default:
60
+ break;
61
+ }
62
+ }
63
+ }
64
+ /**
65
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
66
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
67
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
68
+ * undefined / null by clearing their bindings.
69
+ */
70
+ setHostProperty(key, value) {
71
+ this.renderer.setProperty(this.host, key, value);
72
+ }
73
+ bindEvents() {
74
+ this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
75
+ this.changeEvent.emit(event);
76
+ if (!this.isWritingValue) {
77
+ const eventWithDetail = event;
78
+ const eventTarget = event.target;
79
+ const detail = 'detail' in eventWithDetail ? eventWithDetail.detail : undefined;
80
+ const hostRecord = this.host;
81
+ const nextValue = (detail
82
+ ?? eventTarget?.['checked']
83
+ ?? hostRecord['checked']);
84
+ if (Object.is(this.lastCvaValue, nextValue)) {
85
+ return;
86
+ }
87
+ this.lastCvaValue = nextValue;
88
+ this.setHostProperty('checked', nextValue);
89
+ this.onChange(nextValue);
90
+ }
91
+ }));
92
+ this.listenerCleanup.push(this.renderer.listen(this.host, 'blur', () => {
93
+ this.onTouched();
94
+ }));
95
+ }
96
+ onChange = () => { };
97
+ onTouched = () => { };
98
+ isWritingValue = false;
99
+ lastCvaValue;
100
+ writeValue(value) {
101
+ this.isWritingValue = true;
102
+ this.lastCvaValue = value;
103
+ this.setHostProperty('checked', value);
104
+ this.isWritingValue = false;
105
+ }
106
+ registerOnChange(fn) {
107
+ this.onChange = fn;
108
+ }
109
+ registerOnTouched(fn) {
110
+ this.onTouched = fn;
111
+ }
112
+ setDisabledState(isDisabled) {
113
+ // Underlying element does not declare a 'disabled' field; nothing to do.
114
+ void isDisabled;
115
+ }
116
+ static ɵfac = function LuzmoSwitch_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSwitch)(); };
117
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwitch, selectors: [["luzmo-switch"]], inputs: { emphasized: "emphasized", thumb: "thumb", checked: "checked", name: "name", readonly: "readonly" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoSwitch"], features: [i0.ɵɵProvidersFeature([
118
+ {
119
+ provide: NG_VALUE_ACCESSOR,
120
+ useExisting: forwardRef(() => LuzmoSwitch),
121
+ multi: true
122
+ }
123
+ ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSwitch_Template(rf, ctx) { if (rf & 1) {
124
+ i0.ɵɵprojectionDef();
125
+ i0.ɵɵprojection(0);
126
+ } }, encapsulation: 2, changeDetection: 0 });
127
+ }
128
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoSwitch, [{
129
+ type: Component,
130
+ args: [{
131
+ selector: 'luzmo-switch',
132
+ exportAs: 'luzmoSwitch',
133
+ standalone: true,
134
+ changeDetection: ChangeDetectionStrategy.OnPush,
135
+ template: '<ng-content />',
136
+ providers: [
137
+ {
138
+ provide: NG_VALUE_ACCESSOR,
139
+ useExisting: forwardRef(() => LuzmoSwitch),
140
+ multi: true
141
+ }
142
+ ]
143
+ }]
144
+ }], () => [], { emphasized: [{
145
+ type: Input,
146
+ args: [{ alias: 'emphasized' }]
147
+ }], thumb: [{
148
+ type: Input,
149
+ args: [{ alias: 'thumb' }]
150
+ }], checked: [{
151
+ type: Input,
152
+ args: [{ alias: 'checked' }]
153
+ }], name: [{
154
+ type: Input,
155
+ args: [{ alias: 'name' }]
156
+ }], readonly: [{
157
+ type: Input,
158
+ args: [{ alias: 'readonly' }]
159
+ }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
160
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoSwitch, { className: "LuzmoSwitch", filePath: "components/switch.ts", lineNumber: 25 }); })();
@@ -0,0 +1,29 @@
1
+ import { OnChanges, SimpleChanges } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import type { LuzmoTabPanel as LuzmoTabPanelHostElement } from '@luzmo/lucero/tabs';
4
+ import * as i0 from "@angular/core";
5
+ export declare class LuzmoTabPanel implements OnChanges {
6
+ private readonly elementRef;
7
+ private readonly renderer;
8
+ private readonly destroyRef;
9
+ private readonly host;
10
+ private readonly listenerCleanup;
11
+ /** The underlying custom element instance. Use to call imperative methods. */
12
+ get nativeElement(): LuzmoTabPanelHostElement;
13
+ selected?: boolean;
14
+ value?: string;
15
+ constructor();
16
+ ngOnChanges(changes: SimpleChanges): void;
17
+ /**
18
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
19
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
20
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
21
+ * undefined / null by clearing their bindings.
22
+ */
23
+ private setHostProperty;
24
+ private bindEvents;
25
+ static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTabPanel, never>;
26
+ static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTabPanel, "luzmo-tab-panel", ["luzmoTabPanel"], { "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], true, never>;
27
+ }
28
+ /** The underlying custom element type for LuzmoTabPanel */
29
+ export type LuzmoTabPanelElement = LuzmoTabPanelHostElement;
@@ -0,0 +1,78 @@
1
+ import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import * as i0 from "@angular/core";
4
+ const _c0 = ["*"];
5
+ /**
6
+ * Angular wrapper component for <luzmo-tab-panel>
7
+ *
8
+ * @slot (default) - content of the Tab Panel
9
+ */
10
+ export class LuzmoTabPanel {
11
+ elementRef = inject(ElementRef);
12
+ renderer = inject(Renderer2);
13
+ destroyRef = inject(DestroyRef);
14
+ host = this.elementRef.nativeElement;
15
+ listenerCleanup = [];
16
+ /** The underlying custom element instance. Use to call imperative methods. */
17
+ get nativeElement() {
18
+ return this.host;
19
+ }
20
+ selected;
21
+ value;
22
+ constructor() {
23
+ this.bindEvents();
24
+ this.destroyRef.onDestroy(() => {
25
+ for (const cleanup of this.listenerCleanup) {
26
+ cleanup();
27
+ }
28
+ });
29
+ }
30
+ ngOnChanges(changes) {
31
+ for (const key of Object.keys(changes)) {
32
+ switch (key) {
33
+ case 'selected':
34
+ this.setHostProperty('selected', changes['selected'].currentValue);
35
+ break;
36
+ case 'value':
37
+ this.setHostProperty('value', changes['value'].currentValue);
38
+ break;
39
+ default:
40
+ break;
41
+ }
42
+ }
43
+ }
44
+ /**
45
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
46
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
47
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
48
+ * undefined / null by clearing their bindings.
49
+ */
50
+ setHostProperty(key, value) {
51
+ this.renderer.setProperty(this.host, key, value);
52
+ }
53
+ bindEvents() {
54
+ // No custom events for this wrapper.
55
+ }
56
+ static ɵfac = function LuzmoTabPanel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTabPanel)(); };
57
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTabPanel, selectors: [["luzmo-tab-panel"]], inputs: { selected: "selected", value: "value" }, exportAs: ["luzmoTabPanel"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTabPanel_Template(rf, ctx) { if (rf & 1) {
58
+ i0.ɵɵprojectionDef();
59
+ i0.ɵɵprojection(0);
60
+ } }, encapsulation: 2, changeDetection: 0 });
61
+ }
62
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTabPanel, [{
63
+ type: Component,
64
+ args: [{
65
+ selector: 'luzmo-tab-panel',
66
+ exportAs: 'luzmoTabPanel',
67
+ standalone: true,
68
+ changeDetection: ChangeDetectionStrategy.OnPush,
69
+ template: '<ng-content />'
70
+ }]
71
+ }], () => [], { selected: [{
72
+ type: Input,
73
+ args: [{ alias: 'selected' }]
74
+ }], value: [{
75
+ type: Input,
76
+ args: [{ alias: 'value' }]
77
+ }] }); })();
78
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTabPanel, { className: "LuzmoTabPanel", filePath: "components/tab-panel.ts", lineNumber: 17 }); })();
@@ -0,0 +1,32 @@
1
+ import { OnChanges, SimpleChanges } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import type { LuzmoTab as LuzmoTabHostElement } from '@luzmo/lucero/tabs';
4
+ import * as i0 from "@angular/core";
5
+ export declare class LuzmoTab implements OnChanges {
6
+ private readonly elementRef;
7
+ private readonly renderer;
8
+ private readonly destroyRef;
9
+ private readonly host;
10
+ private readonly listenerCleanup;
11
+ /** The underlying custom element instance. Use to call imperative methods. */
12
+ get nativeElement(): LuzmoTabHostElement;
13
+ disabled?: boolean;
14
+ label?: string;
15
+ selected?: boolean;
16
+ vertical?: boolean;
17
+ value?: string;
18
+ constructor();
19
+ ngOnChanges(changes: SimpleChanges): void;
20
+ /**
21
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
22
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
23
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
24
+ * undefined / null by clearing their bindings.
25
+ */
26
+ private setHostProperty;
27
+ private bindEvents;
28
+ static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTab, never>;
29
+ static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTab, "luzmo-tab", ["luzmoTab"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], true, never>;
30
+ }
31
+ /** The underlying custom element type for LuzmoTab */
32
+ export type LuzmoTabElement = LuzmoTabHostElement;
@@ -0,0 +1,100 @@
1
+ import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import * as i0 from "@angular/core";
4
+ const _c0 = ["*"];
5
+ /**
6
+ * Angular wrapper component for <luzmo-tab>
7
+ *
8
+ * @slot (default) - text label of the Tab
9
+ * @slot icon - The icon that appears on the left of the label
10
+ */
11
+ export class LuzmoTab {
12
+ elementRef = inject(ElementRef);
13
+ renderer = inject(Renderer2);
14
+ destroyRef = inject(DestroyRef);
15
+ host = this.elementRef.nativeElement;
16
+ listenerCleanup = [];
17
+ /** The underlying custom element instance. Use to call imperative methods. */
18
+ get nativeElement() {
19
+ return this.host;
20
+ }
21
+ disabled;
22
+ label;
23
+ selected;
24
+ vertical;
25
+ value;
26
+ constructor() {
27
+ this.bindEvents();
28
+ this.destroyRef.onDestroy(() => {
29
+ for (const cleanup of this.listenerCleanup) {
30
+ cleanup();
31
+ }
32
+ });
33
+ }
34
+ ngOnChanges(changes) {
35
+ for (const key of Object.keys(changes)) {
36
+ switch (key) {
37
+ case 'disabled':
38
+ this.setHostProperty('disabled', changes['disabled'].currentValue);
39
+ break;
40
+ case 'label':
41
+ this.setHostProperty('label', changes['label'].currentValue);
42
+ break;
43
+ case 'selected':
44
+ this.setHostProperty('selected', changes['selected'].currentValue);
45
+ break;
46
+ case 'vertical':
47
+ this.setHostProperty('vertical', changes['vertical'].currentValue);
48
+ break;
49
+ case 'value':
50
+ this.setHostProperty('value', changes['value'].currentValue);
51
+ break;
52
+ default:
53
+ break;
54
+ }
55
+ }
56
+ }
57
+ /**
58
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
59
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
60
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
61
+ * undefined / null by clearing their bindings.
62
+ */
63
+ setHostProperty(key, value) {
64
+ this.renderer.setProperty(this.host, key, value);
65
+ }
66
+ bindEvents() {
67
+ // No custom events for this wrapper.
68
+ }
69
+ static ɵfac = function LuzmoTab_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTab)(); };
70
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTab, selectors: [["luzmo-tab"]], inputs: { disabled: "disabled", label: "label", selected: "selected", vertical: "vertical", value: "value" }, exportAs: ["luzmoTab"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTab_Template(rf, ctx) { if (rf & 1) {
71
+ i0.ɵɵprojectionDef();
72
+ i0.ɵɵprojection(0);
73
+ } }, encapsulation: 2, changeDetection: 0 });
74
+ }
75
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTab, [{
76
+ type: Component,
77
+ args: [{
78
+ selector: 'luzmo-tab',
79
+ exportAs: 'luzmoTab',
80
+ standalone: true,
81
+ changeDetection: ChangeDetectionStrategy.OnPush,
82
+ template: '<ng-content />'
83
+ }]
84
+ }], () => [], { disabled: [{
85
+ type: Input,
86
+ args: [{ alias: 'disabled' }]
87
+ }], label: [{
88
+ type: Input,
89
+ args: [{ alias: 'label' }]
90
+ }], selected: [{
91
+ type: Input,
92
+ args: [{ alias: 'selected' }]
93
+ }], vertical: [{
94
+ type: Input,
95
+ args: [{ alias: 'vertical' }]
96
+ }], value: [{
97
+ type: Input,
98
+ args: [{ alias: 'value' }]
99
+ }] }); })();
100
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTab, { className: "LuzmoTab", filePath: "components/tab.ts", lineNumber: 18 }); })();
@@ -0,0 +1,33 @@
1
+ import { OnChanges, SimpleChanges } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import type { LuzmoTabsOverflow as LuzmoTabsOverflowHostElement } from '@luzmo/lucero/tabs';
4
+ import type { ResizeController as __extt_ResizeController } from '@lit-labs/observers/resize-controller.js';
5
+ import * as i0 from "@angular/core";
6
+ export declare class LuzmoTabsOverflow implements OnChanges {
7
+ private readonly elementRef;
8
+ private readonly renderer;
9
+ private readonly destroyRef;
10
+ private readonly host;
11
+ private readonly listenerCleanup;
12
+ /** The underlying custom element instance. Use to call imperative methods. */
13
+ get nativeElement(): LuzmoTabsOverflowHostElement;
14
+ compact?: boolean;
15
+ labelPrevious?: string;
16
+ labelNext?: string;
17
+ dir?: 'ltr' | 'rtl';
18
+ resizeController?: __extt_ResizeController;
19
+ constructor();
20
+ ngOnChanges(changes: SimpleChanges): void;
21
+ /**
22
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
23
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
24
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
25
+ * undefined / null by clearing their bindings.
26
+ */
27
+ private setHostProperty;
28
+ private bindEvents;
29
+ static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTabsOverflow, never>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTabsOverflow, "luzmo-tabs-overflow", ["luzmoTabsOverflow"], { "compact": { "alias": "compact"; "required": false; }; "labelPrevious": { "alias": "label-previous"; "required": false; }; "labelNext": { "alias": "label-next"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "resizeController": { "alias": "resize-controller"; "required": false; }; }, {}, never, ["*"], true, never>;
31
+ }
32
+ /** The underlying custom element type for LuzmoTabsOverflow */
33
+ export type LuzmoTabsOverflowElement = LuzmoTabsOverflowHostElement;
@@ -0,0 +1,97 @@
1
+ import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import * as i0 from "@angular/core";
4
+ const _c0 = ["*"];
5
+ /**
6
+ * Angular wrapper component for <luzmo-tabs-overflow>
7
+ */
8
+ export class LuzmoTabsOverflow {
9
+ elementRef = inject(ElementRef);
10
+ renderer = inject(Renderer2);
11
+ destroyRef = inject(DestroyRef);
12
+ host = this.elementRef.nativeElement;
13
+ listenerCleanup = [];
14
+ /** The underlying custom element instance. Use to call imperative methods. */
15
+ get nativeElement() {
16
+ return this.host;
17
+ }
18
+ compact;
19
+ labelPrevious;
20
+ labelNext;
21
+ dir;
22
+ resizeController;
23
+ constructor() {
24
+ this.bindEvents();
25
+ this.destroyRef.onDestroy(() => {
26
+ for (const cleanup of this.listenerCleanup) {
27
+ cleanup();
28
+ }
29
+ });
30
+ }
31
+ ngOnChanges(changes) {
32
+ for (const key of Object.keys(changes)) {
33
+ switch (key) {
34
+ case 'compact':
35
+ this.setHostProperty('compact', changes['compact'].currentValue);
36
+ break;
37
+ case 'labelPrevious':
38
+ this.setHostProperty('labelPrevious', changes['labelPrevious'].currentValue);
39
+ break;
40
+ case 'labelNext':
41
+ this.setHostProperty('labelNext', changes['labelNext'].currentValue);
42
+ break;
43
+ case 'dir':
44
+ this.setHostProperty('dir', changes['dir'].currentValue);
45
+ break;
46
+ case 'resizeController':
47
+ this.setHostProperty('resizeController', changes['resizeController'].currentValue);
48
+ break;
49
+ default:
50
+ break;
51
+ }
52
+ }
53
+ }
54
+ /**
55
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
56
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
57
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
58
+ * undefined / null by clearing their bindings.
59
+ */
60
+ setHostProperty(key, value) {
61
+ this.renderer.setProperty(this.host, key, value);
62
+ }
63
+ bindEvents() {
64
+ // No custom events for this wrapper.
65
+ }
66
+ static ɵfac = function LuzmoTabsOverflow_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTabsOverflow)(); };
67
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTabsOverflow, selectors: [["luzmo-tabs-overflow"]], inputs: { compact: "compact", labelPrevious: [0, "label-previous", "labelPrevious"], labelNext: [0, "label-next", "labelNext"], dir: "dir", resizeController: [0, "resize-controller", "resizeController"] }, exportAs: ["luzmoTabsOverflow"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTabsOverflow_Template(rf, ctx) { if (rf & 1) {
68
+ i0.ɵɵprojectionDef();
69
+ i0.ɵɵprojection(0);
70
+ } }, encapsulation: 2, changeDetection: 0 });
71
+ }
72
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTabsOverflow, [{
73
+ type: Component,
74
+ args: [{
75
+ selector: 'luzmo-tabs-overflow',
76
+ exportAs: 'luzmoTabsOverflow',
77
+ standalone: true,
78
+ changeDetection: ChangeDetectionStrategy.OnPush,
79
+ template: '<ng-content />'
80
+ }]
81
+ }], () => [], { compact: [{
82
+ type: Input,
83
+ args: [{ alias: 'compact' }]
84
+ }], labelPrevious: [{
85
+ type: Input,
86
+ args: [{ alias: 'label-previous' }]
87
+ }], labelNext: [{
88
+ type: Input,
89
+ args: [{ alias: 'label-next' }]
90
+ }], dir: [{
91
+ type: Input,
92
+ args: [{ alias: 'dir' }]
93
+ }], resizeController: [{
94
+ type: Input,
95
+ args: [{ alias: 'resize-controller' }]
96
+ }] }); })();
97
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTabsOverflow, { className: "LuzmoTabsOverflow", filePath: "components/tabs-overflow.ts", lineNumber: 16 }); })();
@@ -0,0 +1,43 @@
1
+ import { OnChanges, SimpleChanges } from '@angular/core';
2
+ import '@luzmo/lucero/tabs';
3
+ import type { LuzmoTabs as LuzmoTabsHostElement } from '@luzmo/lucero/tabs';
4
+ import * as i0 from "@angular/core";
5
+ export declare class LuzmoTabs implements OnChanges {
6
+ private readonly elementRef;
7
+ private readonly renderer;
8
+ private readonly destroyRef;
9
+ private readonly host;
10
+ private readonly listenerCleanup;
11
+ /** The underlying custom element instance. Use to call imperative methods. */
12
+ get nativeElement(): LuzmoTabsHostElement;
13
+ /** Whether to activate a tab on keyboard focus or not. By default a tab is activated via a "click" interaction. This is specifically intended for when tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc. To learn more about "Deciding When to Make Selection Automatically Follow Focus", visit: https://w3c.github.io/aria-practices/#kbd_selection_follows_focus */
14
+ auto?: boolean;
15
+ /** The tab items are displayed closer together. */
16
+ compact?: boolean;
17
+ dir?: 'ltr' | 'rtl';
18
+ direction?: 'vertical' | 'vertical-right' | 'horizontal';
19
+ emphasized?: boolean;
20
+ label?: string;
21
+ enableTabsScroll?: boolean;
22
+ /** The tab list is displayed without a border. */
23
+ quiet?: boolean;
24
+ selectionIndicatorStyle?: unknown;
25
+ shouldAnimate?: boolean;
26
+ selected?: string;
27
+ /** The selected Tab child has changed. */
28
+ readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
29
+ constructor();
30
+ ngOnChanges(changes: SimpleChanges): void;
31
+ /**
32
+ * Forward a wrapper @Input to the underlying host element via Renderer2 so
33
+ * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
34
+ * Unlike a "skip undefined" guard, this lets consumers reset values back to
35
+ * undefined / null by clearing their bindings.
36
+ */
37
+ private setHostProperty;
38
+ private bindEvents;
39
+ static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTabs, never>;
40
+ static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTabs, "luzmo-tabs", ["luzmoTabs"], { "auto": { "alias": "auto"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "label": { "alias": "label"; "required": false; }; "enableTabsScroll": { "alias": "enable-tabs-scroll"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "selectionIndicatorStyle": { "alias": "selection-indicator-style"; "required": false; }; "shouldAnimate": { "alias": "should-animate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
41
+ }
42
+ /** The underlying custom element type for LuzmoTabs */
43
+ export type LuzmoTabsElement = LuzmoTabsHostElement;