@luzmo/ngx-lucero 2.0.1 → 2.1.0
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/esm/components/split-view.d.ts +59 -0
- package/esm/components/split-view.js +181 -0
- package/esm/index.d.ts +4 -2
- package/esm/index.js +4 -0
- package/package.json +2 -2
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import '@luzmo/lucero/split-view';
|
|
3
|
+
import type { LuzmoSplitView as LuzmoSplitViewHostElement } from '@luzmo/lucero/split-view';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class LuzmoSplitView 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(): LuzmoSplitViewHostElement;
|
|
13
|
+
/** Stacks panes vertically instead of side by side. */
|
|
14
|
+
vertical?: boolean;
|
|
15
|
+
/** Enables pointer and keyboard resizing. */
|
|
16
|
+
resizable?: boolean;
|
|
17
|
+
/** Allows either pane to collapse at its edge. */
|
|
18
|
+
collapsible?: boolean;
|
|
19
|
+
/** Accessible name for the separator. */
|
|
20
|
+
label?: string;
|
|
21
|
+
/** Minimum primary pane size in pixels. */
|
|
22
|
+
primaryMin?: number;
|
|
23
|
+
/** Maximum primary pane size in pixels. */
|
|
24
|
+
primaryMax?: number;
|
|
25
|
+
/** Minimum secondary pane size in pixels. */
|
|
26
|
+
secondaryMin?: number;
|
|
27
|
+
/** Maximum secondary pane size in pixels. */
|
|
28
|
+
secondaryMax?: number;
|
|
29
|
+
/** Initial primary pane size in pixels, percentage, or `auto`. */
|
|
30
|
+
primarySize?: string;
|
|
31
|
+
/** Current primary pane size in pixels. */
|
|
32
|
+
splitterPos?: number;
|
|
33
|
+
/** Disable this control. It will not receive focus or events */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** The tab index to apply to this control. See general documentation about the tabindex HTML property */
|
|
36
|
+
tabIndex?: number;
|
|
37
|
+
readonly typeEvent: import("@angular/core").OutputEmitterRef<Event>;
|
|
38
|
+
/** The splitter position changes during interaction. */
|
|
39
|
+
readonly inputEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
40
|
+
/** A splitter position change is committed. */
|
|
41
|
+
readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
42
|
+
/** Trick :focus-visible polyfill into thinking keyboard based focus */
|
|
43
|
+
readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
|
|
44
|
+
constructor();
|
|
45
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
46
|
+
/**
|
|
47
|
+
* Forward a wrapper @Input to the underlying host element via Renderer2 so
|
|
48
|
+
* the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
|
|
49
|
+
* Unlike a "skip undefined" guard, this lets consumers reset values back to
|
|
50
|
+
* undefined / null by clearing their bindings.
|
|
51
|
+
*/
|
|
52
|
+
private setHostProperty;
|
|
53
|
+
private bindEvents;
|
|
54
|
+
focus(options?: FocusOptions): void;
|
|
55
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSplitView, never>;
|
|
56
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSplitView, "luzmo-split-view", ["luzmoSplitView"], { "vertical": { "alias": "vertical"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "label": { "alias": "label"; "required": false; }; "primaryMin": { "alias": "primaryMin"; "required": false; }; "primaryMax": { "alias": "primaryMax"; "required": false; }; "secondaryMin": { "alias": "secondaryMin"; "required": false; }; "secondaryMax": { "alias": "secondaryMax"; "required": false; }; "primarySize": { "alias": "primarySize"; "required": false; }; "splitterPos": { "alias": "splitterPos"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "typeEvent": "type"; "inputEvent": "input"; "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
|
|
57
|
+
}
|
|
58
|
+
/** The underlying custom element type for LuzmoSplitView */
|
|
59
|
+
export type LuzmoSplitViewElement = LuzmoSplitViewHostElement;
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
|
|
2
|
+
import '@luzmo/lucero/split-view';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
const _c0 = ["*"];
|
|
5
|
+
/**
|
|
6
|
+
* Divides two panes with an optionally interactive separator.
|
|
7
|
+
*
|
|
8
|
+
* @slot (default) - The first two elements are rendered as panes.
|
|
9
|
+
*/
|
|
10
|
+
export class LuzmoSplitView {
|
|
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
|
+
/** Stacks panes vertically instead of side by side. */
|
|
21
|
+
vertical;
|
|
22
|
+
/** Enables pointer and keyboard resizing. */
|
|
23
|
+
resizable;
|
|
24
|
+
/** Allows either pane to collapse at its edge. */
|
|
25
|
+
collapsible;
|
|
26
|
+
/** Accessible name for the separator. */
|
|
27
|
+
label;
|
|
28
|
+
/** Minimum primary pane size in pixels. */
|
|
29
|
+
primaryMin;
|
|
30
|
+
/** Maximum primary pane size in pixels. */
|
|
31
|
+
primaryMax;
|
|
32
|
+
/** Minimum secondary pane size in pixels. */
|
|
33
|
+
secondaryMin;
|
|
34
|
+
/** Maximum secondary pane size in pixels. */
|
|
35
|
+
secondaryMax;
|
|
36
|
+
/** Initial primary pane size in pixels, percentage, or `auto`. */
|
|
37
|
+
primarySize;
|
|
38
|
+
/** Current primary pane size in pixels. */
|
|
39
|
+
splitterPos;
|
|
40
|
+
/** Disable this control. It will not receive focus or events */
|
|
41
|
+
disabled;
|
|
42
|
+
/** The tab index to apply to this control. See general documentation about the tabindex HTML property */
|
|
43
|
+
tabIndex;
|
|
44
|
+
typeEvent = output({ alias: 'type' });
|
|
45
|
+
/** The splitter position changes during interaction. */
|
|
46
|
+
inputEvent = output({ alias: 'input' });
|
|
47
|
+
/** A splitter position change is committed. */
|
|
48
|
+
changeEvent = output({ alias: 'change' });
|
|
49
|
+
/** Trick :focus-visible polyfill into thinking keyboard based focus */
|
|
50
|
+
keydownEvent = output({ alias: 'keydown' });
|
|
51
|
+
constructor() {
|
|
52
|
+
this.bindEvents();
|
|
53
|
+
this.destroyRef.onDestroy(() => {
|
|
54
|
+
for (const cleanup of this.listenerCleanup) {
|
|
55
|
+
cleanup();
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
ngOnChanges(changes) {
|
|
60
|
+
for (const key of Object.keys(changes)) {
|
|
61
|
+
switch (key) {
|
|
62
|
+
case 'vertical':
|
|
63
|
+
this.setHostProperty('vertical', changes['vertical'].currentValue);
|
|
64
|
+
break;
|
|
65
|
+
case 'resizable':
|
|
66
|
+
this.setHostProperty('resizable', changes['resizable'].currentValue);
|
|
67
|
+
break;
|
|
68
|
+
case 'collapsible':
|
|
69
|
+
this.setHostProperty('collapsible', changes['collapsible'].currentValue);
|
|
70
|
+
break;
|
|
71
|
+
case 'label':
|
|
72
|
+
this.setHostProperty('label', changes['label'].currentValue);
|
|
73
|
+
break;
|
|
74
|
+
case 'primaryMin':
|
|
75
|
+
this.setHostProperty('primaryMin', changes['primaryMin'].currentValue);
|
|
76
|
+
break;
|
|
77
|
+
case 'primaryMax':
|
|
78
|
+
this.setHostProperty('primaryMax', changes['primaryMax'].currentValue);
|
|
79
|
+
break;
|
|
80
|
+
case 'secondaryMin':
|
|
81
|
+
this.setHostProperty('secondaryMin', changes['secondaryMin'].currentValue);
|
|
82
|
+
break;
|
|
83
|
+
case 'secondaryMax':
|
|
84
|
+
this.setHostProperty('secondaryMax', changes['secondaryMax'].currentValue);
|
|
85
|
+
break;
|
|
86
|
+
case 'primarySize':
|
|
87
|
+
this.setHostProperty('primarySize', changes['primarySize'].currentValue);
|
|
88
|
+
break;
|
|
89
|
+
case 'splitterPos':
|
|
90
|
+
this.setHostProperty('splitterPos', changes['splitterPos'].currentValue);
|
|
91
|
+
break;
|
|
92
|
+
case 'disabled':
|
|
93
|
+
this.setHostProperty('disabled', changes['disabled'].currentValue);
|
|
94
|
+
break;
|
|
95
|
+
case 'tabIndex':
|
|
96
|
+
this.setHostProperty('tabIndex', changes['tabIndex'].currentValue);
|
|
97
|
+
break;
|
|
98
|
+
default:
|
|
99
|
+
break;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Forward a wrapper @Input to the underlying host element via Renderer2 so
|
|
105
|
+
* the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
|
|
106
|
+
* Unlike a "skip undefined" guard, this lets consumers reset values back to
|
|
107
|
+
* undefined / null by clearing their bindings.
|
|
108
|
+
*/
|
|
109
|
+
setHostProperty(key, value) {
|
|
110
|
+
this.renderer.setProperty(this.host, key, value);
|
|
111
|
+
}
|
|
112
|
+
bindEvents() {
|
|
113
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'type', (event) => {
|
|
114
|
+
this.typeEvent.emit(event);
|
|
115
|
+
}));
|
|
116
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
|
|
117
|
+
this.inputEvent.emit(event);
|
|
118
|
+
}));
|
|
119
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
|
|
120
|
+
this.changeEvent.emit(event);
|
|
121
|
+
}));
|
|
122
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
|
|
123
|
+
this.keydownEvent.emit(event);
|
|
124
|
+
}));
|
|
125
|
+
}
|
|
126
|
+
focus(options) {
|
|
127
|
+
return this.host.focus(options);
|
|
128
|
+
}
|
|
129
|
+
static ɵfac = function LuzmoSplitView_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSplitView)(); };
|
|
130
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSplitView, selectors: [["luzmo-split-view"]], inputs: { vertical: "vertical", resizable: "resizable", collapsible: "collapsible", label: "label", primaryMin: "primaryMin", primaryMax: "primaryMax", secondaryMin: "secondaryMin", secondaryMax: "secondaryMax", primarySize: "primarySize", splitterPos: "splitterPos", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { typeEvent: "type", inputEvent: "input", changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoSplitView"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSplitView_Template(rf, ctx) { if (rf & 1) {
|
|
131
|
+
i0.ɵɵprojectionDef();
|
|
132
|
+
i0.ɵɵprojection(0);
|
|
133
|
+
} }, encapsulation: 2 });
|
|
134
|
+
}
|
|
135
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoSplitView, [{
|
|
136
|
+
type: Component,
|
|
137
|
+
args: [{
|
|
138
|
+
selector: 'luzmo-split-view',
|
|
139
|
+
exportAs: 'luzmoSplitView',
|
|
140
|
+
standalone: true,
|
|
141
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
142
|
+
template: '<ng-content />'
|
|
143
|
+
}]
|
|
144
|
+
}], () => [], { vertical: [{
|
|
145
|
+
type: Input,
|
|
146
|
+
args: [{ alias: 'vertical' }]
|
|
147
|
+
}], resizable: [{
|
|
148
|
+
type: Input,
|
|
149
|
+
args: [{ alias: 'resizable' }]
|
|
150
|
+
}], collapsible: [{
|
|
151
|
+
type: Input,
|
|
152
|
+
args: [{ alias: 'collapsible' }]
|
|
153
|
+
}], label: [{
|
|
154
|
+
type: Input,
|
|
155
|
+
args: [{ alias: 'label' }]
|
|
156
|
+
}], primaryMin: [{
|
|
157
|
+
type: Input,
|
|
158
|
+
args: [{ alias: 'primaryMin' }]
|
|
159
|
+
}], primaryMax: [{
|
|
160
|
+
type: Input,
|
|
161
|
+
args: [{ alias: 'primaryMax' }]
|
|
162
|
+
}], secondaryMin: [{
|
|
163
|
+
type: Input,
|
|
164
|
+
args: [{ alias: 'secondaryMin' }]
|
|
165
|
+
}], secondaryMax: [{
|
|
166
|
+
type: Input,
|
|
167
|
+
args: [{ alias: 'secondaryMax' }]
|
|
168
|
+
}], primarySize: [{
|
|
169
|
+
type: Input,
|
|
170
|
+
args: [{ alias: 'primarySize' }]
|
|
171
|
+
}], splitterPos: [{
|
|
172
|
+
type: Input,
|
|
173
|
+
args: [{ alias: 'splitterPos' }]
|
|
174
|
+
}], disabled: [{
|
|
175
|
+
type: Input,
|
|
176
|
+
args: [{ alias: 'disabled' }]
|
|
177
|
+
}], tabIndex: [{
|
|
178
|
+
type: Input,
|
|
179
|
+
args: [{ alias: 'tabIndex' }]
|
|
180
|
+
}], typeEvent: [{ type: i0.Output, args: ["type"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
|
|
181
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoSplitView, { className: "LuzmoSplitView", filePath: "components/split-view.ts", lineNumber: 17 }); })();
|
package/esm/index.d.ts
CHANGED
|
@@ -59,6 +59,7 @@ import { LuzmoSelect } from './components/select.js';
|
|
|
59
59
|
import { LuzmoSkeletonLoader } from './components/skeleton-loader.js';
|
|
60
60
|
import { LuzmoSlider } from './components/slider.js';
|
|
61
61
|
import { LuzmoSliderHandle } from './components/slider-handle.js';
|
|
62
|
+
import { LuzmoSplitView } from './components/split-view.js';
|
|
62
63
|
import { LuzmoStatusLight } from './components/status-light.js';
|
|
63
64
|
import { LuzmoSwatch } from './components/swatch.js';
|
|
64
65
|
import { LuzmoSwatchGroup } from './components/swatch-group.js';
|
|
@@ -135,6 +136,7 @@ export { LuzmoSelect, type LuzmoSelectElement } from './components/select.js';
|
|
|
135
136
|
export { LuzmoSkeletonLoader, type LuzmoSkeletonLoaderElement } from './components/skeleton-loader.js';
|
|
136
137
|
export { LuzmoSlider, type LuzmoSliderElement } from './components/slider.js';
|
|
137
138
|
export { LuzmoSliderHandle, type LuzmoSliderHandleElement } from './components/slider-handle.js';
|
|
139
|
+
export { LuzmoSplitView, type LuzmoSplitViewElement } from './components/split-view.js';
|
|
138
140
|
export { LuzmoStatusLight, type LuzmoStatusLightElement } from './components/status-light.js';
|
|
139
141
|
export { LuzmoSwatch, type LuzmoSwatchElement } from './components/swatch.js';
|
|
140
142
|
export { LuzmoSwatchGroup, type LuzmoSwatchGroupElement } from './components/swatch-group.js';
|
|
@@ -150,6 +152,6 @@ export { LuzmoToast, type LuzmoToastElement } from './components/toast.js';
|
|
|
150
152
|
export { LuzmoTooltip, type LuzmoTooltipElement } from './components/tooltip.js';
|
|
151
153
|
export { LuzmoTopNav, type LuzmoTopNavElement } from './components/top-nav.js';
|
|
152
154
|
export { LuzmoTopNavItem, type LuzmoTopNavItemElement } from './components/top-nav-item.js';
|
|
153
|
-
export declare const LUZMO_ANGULAR_COMPONENTS: readonly [typeof LuzmoAccordion, typeof LuzmoAccordionItem, typeof LuzmoActionBar, typeof LuzmoActionButton, typeof LuzmoActionGroup, typeof LuzmoActionMenu, typeof LuzmoAvatar, typeof LuzmoBadge, typeof LuzmoButton, typeof LuzmoButtonGroup, typeof LuzmoCalendar, typeof LuzmoChatMessage, typeof LuzmoChatMessageGroup, typeof LuzmoCheckbox, typeof LuzmoClearButton, typeof LuzmoCloseButton, typeof LuzmoColorArea, typeof LuzmoColorField, typeof LuzmoColorHandle, typeof LuzmoColorLoupe, typeof LuzmoColorMenu, typeof LuzmoColorPalette, typeof LuzmoColorPaletteGroup, typeof LuzmoColorPicker, typeof LuzmoColorSlider, typeof LuzmoDateRangePicker, typeof LuzmoDateTimePicker, typeof LuzmoDivider, typeof LuzmoFieldGroup, typeof LuzmoFieldLabel, typeof LuzmoHelpText, typeof LuzmoIcon, typeof LuzmoInfieldButton, typeof LuzmoLabel, typeof LuzmoMenu, typeof LuzmoMenuDivider, typeof LuzmoMenuGroup, typeof LuzmoMenuItem, typeof LuzmoMultiLanguageField, typeof LuzmoNotice, typeof LuzmoNumberField, typeof LuzmoOption, typeof LuzmoOptions, typeof LuzmoOptionsDivider, typeof LuzmoOverlay, typeof LuzmoOverlayTrigger, typeof LuzmoPicker, typeof LuzmoPickerButton, typeof LuzmoPopover, typeof LuzmoProgressBar, typeof LuzmoProgressCircle, typeof LuzmoProgressSteps, typeof LuzmoPromptBox, typeof LuzmoQuestionBox, typeof LuzmoRadio, typeof LuzmoRadioGroup, typeof LuzmoSearch, typeof LuzmoSelect, typeof LuzmoSkeletonLoader, typeof LuzmoSlider, typeof LuzmoSliderHandle, typeof LuzmoStatusLight, typeof LuzmoSwatch, typeof LuzmoSwatchGroup, typeof LuzmoSwitch, typeof LuzmoTab, typeof LuzmoTabPanel, typeof LuzmoTabs, typeof LuzmoTabsOverflow, typeof LuzmoTag, typeof LuzmoTags, typeof LuzmoTextField, typeof LuzmoToast, typeof LuzmoTooltip, typeof LuzmoTopNav, typeof LuzmoTopNavItem];
|
|
154
|
-
export declare const LUZMO_ANGULAR_COMPONENT_NAMES: readonly ["LuzmoAccordion", "LuzmoAccordionItem", "LuzmoActionBar", "LuzmoActionButton", "LuzmoActionGroup", "LuzmoActionMenu", "LuzmoAvatar", "LuzmoBadge", "LuzmoButton", "LuzmoButtonGroup", "LuzmoCalendar", "LuzmoChatMessage", "LuzmoChatMessageGroup", "LuzmoCheckbox", "LuzmoClearButton", "LuzmoCloseButton", "LuzmoColorArea", "LuzmoColorField", "LuzmoColorHandle", "LuzmoColorLoupe", "LuzmoColorMenu", "LuzmoColorPalette", "LuzmoColorPaletteGroup", "LuzmoColorPicker", "LuzmoColorSlider", "LuzmoDateRangePicker", "LuzmoDateTimePicker", "LuzmoDivider", "LuzmoFieldGroup", "LuzmoFieldLabel", "LuzmoHelpText", "LuzmoIcon", "LuzmoInfieldButton", "LuzmoLabel", "LuzmoMenu", "LuzmoMenuDivider", "LuzmoMenuGroup", "LuzmoMenuItem", "LuzmoMultiLanguageField", "LuzmoNotice", "LuzmoNumberField", "LuzmoOption", "LuzmoOptions", "LuzmoOptionsDivider", "LuzmoOverlay", "LuzmoOverlayTrigger", "LuzmoPicker", "LuzmoPickerButton", "LuzmoPopover", "LuzmoProgressBar", "LuzmoProgressCircle", "LuzmoProgressSteps", "LuzmoPromptBox", "LuzmoQuestionBox", "LuzmoRadio", "LuzmoRadioGroup", "LuzmoSearch", "LuzmoSelect", "LuzmoSkeletonLoader", "LuzmoSlider", "LuzmoSliderHandle", "LuzmoStatusLight", "LuzmoSwatch", "LuzmoSwatchGroup", "LuzmoSwitch", "LuzmoTab", "LuzmoTabPanel", "LuzmoTabs", "LuzmoTabsOverflow", "LuzmoTag", "LuzmoTags", "LuzmoTextField", "LuzmoToast", "LuzmoTooltip", "LuzmoTopNav", "LuzmoTopNavItem"];
|
|
155
|
+
export declare const LUZMO_ANGULAR_COMPONENTS: readonly [typeof LuzmoAccordion, typeof LuzmoAccordionItem, typeof LuzmoActionBar, typeof LuzmoActionButton, typeof LuzmoActionGroup, typeof LuzmoActionMenu, typeof LuzmoAvatar, typeof LuzmoBadge, typeof LuzmoButton, typeof LuzmoButtonGroup, typeof LuzmoCalendar, typeof LuzmoChatMessage, typeof LuzmoChatMessageGroup, typeof LuzmoCheckbox, typeof LuzmoClearButton, typeof LuzmoCloseButton, typeof LuzmoColorArea, typeof LuzmoColorField, typeof LuzmoColorHandle, typeof LuzmoColorLoupe, typeof LuzmoColorMenu, typeof LuzmoColorPalette, typeof LuzmoColorPaletteGroup, typeof LuzmoColorPicker, typeof LuzmoColorSlider, typeof LuzmoDateRangePicker, typeof LuzmoDateTimePicker, typeof LuzmoDivider, typeof LuzmoFieldGroup, typeof LuzmoFieldLabel, typeof LuzmoHelpText, typeof LuzmoIcon, typeof LuzmoInfieldButton, typeof LuzmoLabel, typeof LuzmoMenu, typeof LuzmoMenuDivider, typeof LuzmoMenuGroup, typeof LuzmoMenuItem, typeof LuzmoMultiLanguageField, typeof LuzmoNotice, typeof LuzmoNumberField, typeof LuzmoOption, typeof LuzmoOptions, typeof LuzmoOptionsDivider, typeof LuzmoOverlay, typeof LuzmoOverlayTrigger, typeof LuzmoPicker, typeof LuzmoPickerButton, typeof LuzmoPopover, typeof LuzmoProgressBar, typeof LuzmoProgressCircle, typeof LuzmoProgressSteps, typeof LuzmoPromptBox, typeof LuzmoQuestionBox, typeof LuzmoRadio, typeof LuzmoRadioGroup, typeof LuzmoSearch, typeof LuzmoSelect, typeof LuzmoSkeletonLoader, typeof LuzmoSlider, typeof LuzmoSliderHandle, typeof LuzmoSplitView, typeof LuzmoStatusLight, typeof LuzmoSwatch, typeof LuzmoSwatchGroup, typeof LuzmoSwitch, typeof LuzmoTab, typeof LuzmoTabPanel, typeof LuzmoTabs, typeof LuzmoTabsOverflow, typeof LuzmoTag, typeof LuzmoTags, typeof LuzmoTextField, typeof LuzmoToast, typeof LuzmoTooltip, typeof LuzmoTopNav, typeof LuzmoTopNavItem];
|
|
156
|
+
export declare const LUZMO_ANGULAR_COMPONENT_NAMES: readonly ["LuzmoAccordion", "LuzmoAccordionItem", "LuzmoActionBar", "LuzmoActionButton", "LuzmoActionGroup", "LuzmoActionMenu", "LuzmoAvatar", "LuzmoBadge", "LuzmoButton", "LuzmoButtonGroup", "LuzmoCalendar", "LuzmoChatMessage", "LuzmoChatMessageGroup", "LuzmoCheckbox", "LuzmoClearButton", "LuzmoCloseButton", "LuzmoColorArea", "LuzmoColorField", "LuzmoColorHandle", "LuzmoColorLoupe", "LuzmoColorMenu", "LuzmoColorPalette", "LuzmoColorPaletteGroup", "LuzmoColorPicker", "LuzmoColorSlider", "LuzmoDateRangePicker", "LuzmoDateTimePicker", "LuzmoDivider", "LuzmoFieldGroup", "LuzmoFieldLabel", "LuzmoHelpText", "LuzmoIcon", "LuzmoInfieldButton", "LuzmoLabel", "LuzmoMenu", "LuzmoMenuDivider", "LuzmoMenuGroup", "LuzmoMenuItem", "LuzmoMultiLanguageField", "LuzmoNotice", "LuzmoNumberField", "LuzmoOption", "LuzmoOptions", "LuzmoOptionsDivider", "LuzmoOverlay", "LuzmoOverlayTrigger", "LuzmoPicker", "LuzmoPickerButton", "LuzmoPopover", "LuzmoProgressBar", "LuzmoProgressCircle", "LuzmoProgressSteps", "LuzmoPromptBox", "LuzmoQuestionBox", "LuzmoRadio", "LuzmoRadioGroup", "LuzmoSearch", "LuzmoSelect", "LuzmoSkeletonLoader", "LuzmoSlider", "LuzmoSliderHandle", "LuzmoSplitView", "LuzmoStatusLight", "LuzmoSwatch", "LuzmoSwatchGroup", "LuzmoSwitch", "LuzmoTab", "LuzmoTabPanel", "LuzmoTabs", "LuzmoTabsOverflow", "LuzmoTag", "LuzmoTags", "LuzmoTextField", "LuzmoToast", "LuzmoTooltip", "LuzmoTopNav", "LuzmoTopNavItem"];
|
|
155
157
|
export type LuzmoAngularComponentName = (typeof LUZMO_ANGULAR_COMPONENT_NAMES)[number];
|
package/esm/index.js
CHANGED
|
@@ -60,6 +60,7 @@ import { LuzmoSelect } from './components/select.js';
|
|
|
60
60
|
import { LuzmoSkeletonLoader } from './components/skeleton-loader.js';
|
|
61
61
|
import { LuzmoSlider } from './components/slider.js';
|
|
62
62
|
import { LuzmoSliderHandle } from './components/slider-handle.js';
|
|
63
|
+
import { LuzmoSplitView } from './components/split-view.js';
|
|
63
64
|
import { LuzmoStatusLight } from './components/status-light.js';
|
|
64
65
|
import { LuzmoSwatch } from './components/swatch.js';
|
|
65
66
|
import { LuzmoSwatchGroup } from './components/swatch-group.js';
|
|
@@ -136,6 +137,7 @@ export { LuzmoSelect } from './components/select.js';
|
|
|
136
137
|
export { LuzmoSkeletonLoader } from './components/skeleton-loader.js';
|
|
137
138
|
export { LuzmoSlider } from './components/slider.js';
|
|
138
139
|
export { LuzmoSliderHandle } from './components/slider-handle.js';
|
|
140
|
+
export { LuzmoSplitView } from './components/split-view.js';
|
|
139
141
|
export { LuzmoStatusLight } from './components/status-light.js';
|
|
140
142
|
export { LuzmoSwatch } from './components/swatch.js';
|
|
141
143
|
export { LuzmoSwatchGroup } from './components/swatch-group.js';
|
|
@@ -213,6 +215,7 @@ export const LUZMO_ANGULAR_COMPONENTS = [
|
|
|
213
215
|
LuzmoSkeletonLoader,
|
|
214
216
|
LuzmoSlider,
|
|
215
217
|
LuzmoSliderHandle,
|
|
218
|
+
LuzmoSplitView,
|
|
216
219
|
LuzmoStatusLight,
|
|
217
220
|
LuzmoSwatch,
|
|
218
221
|
LuzmoSwatchGroup,
|
|
@@ -291,6 +294,7 @@ export const LUZMO_ANGULAR_COMPONENT_NAMES = [
|
|
|
291
294
|
'LuzmoSkeletonLoader',
|
|
292
295
|
'LuzmoSlider',
|
|
293
296
|
'LuzmoSliderHandle',
|
|
297
|
+
'LuzmoSplitView',
|
|
294
298
|
'LuzmoStatusLight',
|
|
295
299
|
'LuzmoSwatch',
|
|
296
300
|
'LuzmoSwatchGroup',
|
package/package.json
CHANGED
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@angular/core": "^17.3.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
|
|
31
31
|
"@angular/forms": "^17.3.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
|
|
32
|
-
"@luzmo/lucero": "2.0
|
|
32
|
+
"@luzmo/lucero": "2.1.0"
|
|
33
33
|
},
|
|
34
|
-
"version": "2.0
|
|
34
|
+
"version": "2.1.0",
|
|
35
35
|
"peerDependenciesMeta": {
|
|
36
36
|
"@angular/forms": {
|
|
37
37
|
"optional": true
|