@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.
- package/README.md +41 -0
- package/esm/components/accordion-item.d.ts +32 -0
- package/esm/components/accordion-item.js +89 -0
- package/esm/components/accordion.d.ts +38 -0
- package/esm/components/accordion.js +107 -0
- package/esm/components/action-bar.d.ts +32 -0
- package/esm/components/action-bar.js +83 -0
- package/esm/components/action-button.d.ts +59 -0
- package/esm/components/action-button.js +205 -0
- package/esm/components/action-group.d.ts +42 -0
- package/esm/components/action-group.js +155 -0
- package/esm/components/action-menu.d.ts +75 -0
- package/esm/components/action-menu.js +337 -0
- package/esm/components/avatar.d.ts +35 -0
- package/esm/components/avatar.js +94 -0
- package/esm/components/badge.d.ts +31 -0
- package/esm/components/badge.js +86 -0
- package/esm/components/button-group.d.ts +28 -0
- package/esm/components/button-group.js +71 -0
- package/esm/components/button.d.ts +40 -0
- package/esm/components/button.js +140 -0
- package/esm/components/calendar.d.ts +64 -0
- package/esm/components/calendar.js +218 -0
- package/esm/components/chat-message-group.d.ts +29 -0
- package/esm/components/chat-message-group.js +76 -0
- package/esm/components/chat-message.d.ts +50 -0
- package/esm/components/chat-message.js +156 -0
- package/esm/components/checkbox.d.ts +55 -0
- package/esm/components/checkbox.js +196 -0
- package/esm/components/clear-button.d.ts +32 -0
- package/esm/components/clear-button.js +88 -0
- package/esm/components/close-button.d.ts +33 -0
- package/esm/components/close-button.js +95 -0
- package/esm/components/color-area.d.ts +45 -0
- package/esm/components/color-area.js +167 -0
- package/esm/components/color-field.d.ts +91 -0
- package/esm/components/color-field.js +321 -0
- package/esm/components/color-handle.d.ts +31 -0
- package/esm/components/color-handle.js +90 -0
- package/esm/components/color-loupe.d.ts +29 -0
- package/esm/components/color-loupe.js +76 -0
- package/esm/components/color-menu.d.ts +36 -0
- package/esm/components/color-menu.js +97 -0
- package/esm/components/color-palette-group.d.ts +40 -0
- package/esm/components/color-palette-group.js +117 -0
- package/esm/components/color-palette.d.ts +43 -0
- package/esm/components/color-palette.js +126 -0
- package/esm/components/color-picker.d.ts +49 -0
- package/esm/components/color-picker.js +143 -0
- package/esm/components/color-slider.d.ts +53 -0
- package/esm/components/color-slider.js +215 -0
- package/esm/components/date-range-picker.d.ts +69 -0
- package/esm/components/date-range-picker.js +228 -0
- package/esm/components/date-time-picker.d.ts +71 -0
- package/esm/components/date-time-picker.js +249 -0
- package/esm/components/divider.d.ts +31 -0
- package/esm/components/divider.js +78 -0
- package/esm/components/field-group.d.ts +32 -0
- package/esm/components/field-group.js +101 -0
- package/esm/components/field-label.d.ts +37 -0
- package/esm/components/field-label.js +104 -0
- package/esm/components/help-text.d.ts +30 -0
- package/esm/components/help-text.js +77 -0
- package/esm/components/icon.d.ts +33 -0
- package/esm/components/icon.js +104 -0
- package/esm/components/infield-button.d.ts +35 -0
- package/esm/components/infield-button.js +103 -0
- package/esm/components/label.d.ts +29 -0
- package/esm/components/label.js +76 -0
- package/esm/components/menu.d.ts +53 -0
- package/esm/components/menu.js +218 -0
- package/esm/components/multi-language-field.d.ts +58 -0
- package/esm/components/multi-language-field.js +263 -0
- package/esm/components/number-field.d.ts +103 -0
- package/esm/components/number-field.js +372 -0
- package/esm/components/options.d.ts +58 -0
- package/esm/components/options.js +207 -0
- package/esm/components/overlay.d.ts +67 -0
- package/esm/components/overlay.js +212 -0
- package/esm/components/picker-button.d.ts +32 -0
- package/esm/components/picker-button.js +94 -0
- package/esm/components/picker.d.ts +79 -0
- package/esm/components/picker.js +340 -0
- package/esm/components/popover.d.ts +33 -0
- package/esm/components/popover.js +93 -0
- package/esm/components/progress-bar.d.ts +35 -0
- package/esm/components/progress-bar.js +121 -0
- package/esm/components/progress-circle.d.ts +35 -0
- package/esm/components/progress-circle.js +94 -0
- package/esm/components/progress-steps.d.ts +46 -0
- package/esm/components/progress-steps.js +127 -0
- package/esm/components/prompt-box.d.ts +88 -0
- package/esm/components/prompt-box.js +280 -0
- package/esm/components/radio-group.d.ts +39 -0
- package/esm/components/radio-group.js +136 -0
- package/esm/components/radio.d.ts +46 -0
- package/esm/components/radio.js +172 -0
- package/esm/components/search.d.ts +95 -0
- package/esm/components/search.js +351 -0
- package/esm/components/select.d.ts +82 -0
- package/esm/components/select.js +351 -0
- package/esm/components/slider.d.ts +47 -0
- package/esm/components/slider.js +185 -0
- package/esm/components/status-light.d.ts +30 -0
- package/esm/components/status-light.js +78 -0
- package/esm/components/swatch-group.d.ts +37 -0
- package/esm/components/swatch-group.js +126 -0
- package/esm/components/swatch.d.ts +49 -0
- package/esm/components/swatch.js +197 -0
- package/esm/components/switch.d.ts +48 -0
- package/esm/components/switch.js +160 -0
- package/esm/components/tab-panel.d.ts +29 -0
- package/esm/components/tab-panel.js +78 -0
- package/esm/components/tab.d.ts +32 -0
- package/esm/components/tab.js +100 -0
- package/esm/components/tabs-overflow.d.ts +33 -0
- package/esm/components/tabs-overflow.js +97 -0
- package/esm/components/tabs.d.ts +43 -0
- package/esm/components/tabs.js +150 -0
- package/esm/components/tag.d.ts +31 -0
- package/esm/components/tag.js +90 -0
- package/esm/components/tags.d.ts +30 -0
- package/esm/components/tags.js +81 -0
- package/esm/components/text-field.d.ts +87 -0
- package/esm/components/text-field.js +308 -0
- package/esm/components/toast.d.ts +30 -0
- package/esm/components/toast.js +68 -0
- package/esm/components/tooltip.d.ts +44 -0
- package/esm/components/tooltip.js +154 -0
- package/esm/components/top-nav-item.d.ts +35 -0
- package/esm/components/top-nav-item.js +120 -0
- package/esm/components/top-nav.d.ts +35 -0
- package/esm/components/top-nav.js +110 -0
- package/esm/index.d.ts +135 -0
- package/esm/index.js +269 -0
- 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;
|