@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,67 @@
|
|
|
1
|
+
import { OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import '@luzmo/lucero/overlay';
|
|
3
|
+
import type { LuzmoOverlay as LuzmoOverlayHostElement } from '@luzmo/lucero/overlay';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class LuzmoOverlay 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(): LuzmoOverlayHostElement;
|
|
13
|
+
/** An Overlay that is `delayed` will wait until a warm-up period of 1000ms has completed before opening. Once the warm-up period has completed, all subsequent Overlays will open immediately. When no Overlays are opened, a cool-down period of 1000ms will begin. Once the cool-down has completed, the next Overlay to be opened will be subject to the warm-up period if provided that option. This behavior helps to manage the performance and user experience by preventing multiple overlays from opening simultaneously and ensuring a smooth transition between opening and closing overlays. */
|
|
14
|
+
delayed?: boolean;
|
|
15
|
+
/** A reference to the dialog element within the overlay. This element is expected to have `showPopover` and `hidePopover` methods. */
|
|
16
|
+
dialogEl?: unknown;
|
|
17
|
+
/** Indicates whether the overlay is currently functional or not. When set to `true`, the overlay is disabled, and any active strategy is aborted. The overlay will also close if it is currently open. When set to `false`, the overlay will re-bind events and re-open if it was previously open. */
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/** A query to gather all elements slotted into the default slot, excluding elements with the slot name "longpress-describedby-descriptor". */
|
|
20
|
+
elements?: unknown;
|
|
21
|
+
/** A reference to the parent overlay that should be force-closed, if any. */
|
|
22
|
+
parentOverlayToForceClose?: unknown;
|
|
23
|
+
/** The `offset` property accepts either a single number to define the offset of the Overlay along the main axis from the trigger, or a 2-tuple to define the offset along both the main axis and the cross axis. This option has no effect when there is no trigger element. */
|
|
24
|
+
offset?: number | [number, number];
|
|
25
|
+
/** Indicates whether the Overlay is projected onto the "top layer" or not. When set to `true`, the overlay is open and visible. When set to `false`, the overlay is closed and hidden. */
|
|
26
|
+
open?: boolean;
|
|
27
|
+
/** Instruct the Overlay where to place itself in relationship to the trigger element. */
|
|
28
|
+
placement?: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
|
|
29
|
+
/** Whether to pass focus to the overlay once opened, or to the appropriate value based on the "type" of the overlay when set to `"auto"`. */
|
|
30
|
+
receivesFocus?: 'true' | 'false' | 'auto';
|
|
31
|
+
/** A reference to the slot element within the overlay. This element is used to manage the content slotted into the overlay. */
|
|
32
|
+
slotEl?: unknown;
|
|
33
|
+
/** The current state of the overlay. This property reflects the current state of the overlay, such as 'opened' or 'closed'. When the state changes, it triggers the appropriate actions and updates the component. */
|
|
34
|
+
state?: ('closed' | 'opening' | 'opened' | 'closing');
|
|
35
|
+
/** The interaction strategy for opening the overlay. This can be a ClickController, HoverController, or LongpressController. */
|
|
36
|
+
strategy?: unknown;
|
|
37
|
+
/** The padding around the tip of the overlay. This property defines the padding around the tip of the overlay, which can be used to adjust its positioning. */
|
|
38
|
+
tipPadding?: number;
|
|
39
|
+
/** An optional ID reference for the trigger element combined with the optional interaction (click | hover | longpress) by which the overlay should open. The format is `trigger@interaction`, e.g., `trigger@click` opens the overlay when an element with the ID "trigger" is clicked. */
|
|
40
|
+
trigger?: string;
|
|
41
|
+
/** An element reference for the trigger element that the overlay should relate to. This property is not reflected as an attribute. */
|
|
42
|
+
triggerElement?: unknown;
|
|
43
|
+
/** The specific interaction to listen for on the `triggerElement` to open the overlay. This property is not reflected as an attribute. */
|
|
44
|
+
triggerInteraction?: ('click' | 'longpress' | 'hover');
|
|
45
|
+
/** Configures the open/close heuristics of the Overlay. */
|
|
46
|
+
type?: "auto" | "hint" | "manual" | "modal" | "page";
|
|
47
|
+
/** announces that an overlay has completed any entry animations */
|
|
48
|
+
readonly luzmoOpenedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
49
|
+
/** announce that an overlay has compelted any exit animations */
|
|
50
|
+
readonly luzmoClosedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
51
|
+
/** requests to add or remove slottable content */
|
|
52
|
+
readonly slottableRequestEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
53
|
+
constructor();
|
|
54
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
55
|
+
/**
|
|
56
|
+
* Forward a wrapper @Input to the underlying host element via Renderer2 so
|
|
57
|
+
* the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
|
|
58
|
+
* Unlike a "skip undefined" guard, this lets consumers reset values back to
|
|
59
|
+
* undefined / null by clearing their bindings.
|
|
60
|
+
*/
|
|
61
|
+
private setHostProperty;
|
|
62
|
+
private bindEvents;
|
|
63
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoOverlay, never>;
|
|
64
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOverlay, "luzmo-overlay", ["luzmoOverlay"], { "delayed": { "alias": "delayed"; "required": false; }; "dialogEl": { "alias": "dialog-el"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "elements": { "alias": "elements"; "required": false; }; "parentOverlayToForceClose": { "alias": "parent-overlay-to-force-close"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "open": { "alias": "open"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "receivesFocus": { "alias": "receives-focus"; "required": false; }; "slotEl": { "alias": "slot-el"; "required": false; }; "state": { "alias": "state"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "tipPadding": { "alias": "tip-padding"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "triggerElement": { "alias": "trigger-element"; "required": false; }; "triggerInteraction": { "alias": "trigger-interaction"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "luzmoOpenedEvent": "luzmo-opened"; "luzmoClosedEvent": "luzmo-closed"; "slottableRequestEvent": "slottable-request"; }, never, ["*"], true, never>;
|
|
65
|
+
}
|
|
66
|
+
/** The underlying custom element type for LuzmoOverlay */
|
|
67
|
+
export type LuzmoOverlayElement = LuzmoOverlayHostElement;
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
|
|
2
|
+
import '@luzmo/lucero/overlay';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
const _c0 = ["*"];
|
|
5
|
+
/**
|
|
6
|
+
* Angular wrapper component for <luzmo-overlay>
|
|
7
|
+
*/
|
|
8
|
+
export class LuzmoOverlay {
|
|
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
|
+
/** An Overlay that is `delayed` will wait until a warm-up period of 1000ms has completed before opening. Once the warm-up period has completed, all subsequent Overlays will open immediately. When no Overlays are opened, a cool-down period of 1000ms will begin. Once the cool-down has completed, the next Overlay to be opened will be subject to the warm-up period if provided that option. This behavior helps to manage the performance and user experience by preventing multiple overlays from opening simultaneously and ensuring a smooth transition between opening and closing overlays. */
|
|
19
|
+
delayed;
|
|
20
|
+
/** A reference to the dialog element within the overlay. This element is expected to have `showPopover` and `hidePopover` methods. */
|
|
21
|
+
dialogEl;
|
|
22
|
+
/** Indicates whether the overlay is currently functional or not. When set to `true`, the overlay is disabled, and any active strategy is aborted. The overlay will also close if it is currently open. When set to `false`, the overlay will re-bind events and re-open if it was previously open. */
|
|
23
|
+
disabled;
|
|
24
|
+
/** A query to gather all elements slotted into the default slot, excluding elements with the slot name "longpress-describedby-descriptor". */
|
|
25
|
+
elements;
|
|
26
|
+
/** A reference to the parent overlay that should be force-closed, if any. */
|
|
27
|
+
parentOverlayToForceClose;
|
|
28
|
+
/** The `offset` property accepts either a single number to define the offset of the Overlay along the main axis from the trigger, or a 2-tuple to define the offset along both the main axis and the cross axis. This option has no effect when there is no trigger element. */
|
|
29
|
+
offset;
|
|
30
|
+
/** Indicates whether the Overlay is projected onto the "top layer" or not. When set to `true`, the overlay is open and visible. When set to `false`, the overlay is closed and hidden. */
|
|
31
|
+
open;
|
|
32
|
+
/** Instruct the Overlay where to place itself in relationship to the trigger element. */
|
|
33
|
+
placement;
|
|
34
|
+
/** Whether to pass focus to the overlay once opened, or to the appropriate value based on the "type" of the overlay when set to `"auto"`. */
|
|
35
|
+
receivesFocus;
|
|
36
|
+
/** A reference to the slot element within the overlay. This element is used to manage the content slotted into the overlay. */
|
|
37
|
+
slotEl;
|
|
38
|
+
/** The current state of the overlay. This property reflects the current state of the overlay, such as 'opened' or 'closed'. When the state changes, it triggers the appropriate actions and updates the component. */
|
|
39
|
+
state;
|
|
40
|
+
/** The interaction strategy for opening the overlay. This can be a ClickController, HoverController, or LongpressController. */
|
|
41
|
+
strategy;
|
|
42
|
+
/** The padding around the tip of the overlay. This property defines the padding around the tip of the overlay, which can be used to adjust its positioning. */
|
|
43
|
+
tipPadding;
|
|
44
|
+
/** An optional ID reference for the trigger element combined with the optional interaction (click | hover | longpress) by which the overlay should open. The format is `trigger@interaction`, e.g., `trigger@click` opens the overlay when an element with the ID "trigger" is clicked. */
|
|
45
|
+
trigger;
|
|
46
|
+
/** An element reference for the trigger element that the overlay should relate to. This property is not reflected as an attribute. */
|
|
47
|
+
triggerElement;
|
|
48
|
+
/** The specific interaction to listen for on the `triggerElement` to open the overlay. This property is not reflected as an attribute. */
|
|
49
|
+
triggerInteraction;
|
|
50
|
+
/** Configures the open/close heuristics of the Overlay. */
|
|
51
|
+
type;
|
|
52
|
+
/** announces that an overlay has completed any entry animations */
|
|
53
|
+
luzmoOpenedEvent = output({ alias: 'luzmo-opened' });
|
|
54
|
+
/** announce that an overlay has compelted any exit animations */
|
|
55
|
+
luzmoClosedEvent = output({ alias: 'luzmo-closed' });
|
|
56
|
+
/** requests to add or remove slottable content */
|
|
57
|
+
slottableRequestEvent = output({ alias: 'slottable-request' });
|
|
58
|
+
constructor() {
|
|
59
|
+
this.bindEvents();
|
|
60
|
+
this.destroyRef.onDestroy(() => {
|
|
61
|
+
for (const cleanup of this.listenerCleanup) {
|
|
62
|
+
cleanup();
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
ngOnChanges(changes) {
|
|
67
|
+
for (const key of Object.keys(changes)) {
|
|
68
|
+
switch (key) {
|
|
69
|
+
case 'delayed':
|
|
70
|
+
this.setHostProperty('delayed', changes['delayed'].currentValue);
|
|
71
|
+
break;
|
|
72
|
+
case 'dialogEl':
|
|
73
|
+
this.setHostProperty('dialogEl', changes['dialogEl'].currentValue);
|
|
74
|
+
break;
|
|
75
|
+
case 'disabled':
|
|
76
|
+
this.setHostProperty('disabled', changes['disabled'].currentValue);
|
|
77
|
+
break;
|
|
78
|
+
case 'elements':
|
|
79
|
+
this.setHostProperty('elements', changes['elements'].currentValue);
|
|
80
|
+
break;
|
|
81
|
+
case 'parentOverlayToForceClose':
|
|
82
|
+
this.setHostProperty('parentOverlayToForceClose', changes['parentOverlayToForceClose'].currentValue);
|
|
83
|
+
break;
|
|
84
|
+
case 'offset':
|
|
85
|
+
this.setHostProperty('offset', changes['offset'].currentValue);
|
|
86
|
+
break;
|
|
87
|
+
case 'open':
|
|
88
|
+
this.setHostProperty('open', changes['open'].currentValue);
|
|
89
|
+
break;
|
|
90
|
+
case 'placement':
|
|
91
|
+
this.setHostProperty('placement', changes['placement'].currentValue);
|
|
92
|
+
break;
|
|
93
|
+
case 'receivesFocus':
|
|
94
|
+
this.setHostProperty('receivesFocus', changes['receivesFocus'].currentValue);
|
|
95
|
+
break;
|
|
96
|
+
case 'slotEl':
|
|
97
|
+
this.setHostProperty('slotEl', changes['slotEl'].currentValue);
|
|
98
|
+
break;
|
|
99
|
+
case 'state':
|
|
100
|
+
this.setHostProperty('state', changes['state'].currentValue);
|
|
101
|
+
break;
|
|
102
|
+
case 'strategy':
|
|
103
|
+
this.setHostProperty('strategy', changes['strategy'].currentValue);
|
|
104
|
+
break;
|
|
105
|
+
case 'tipPadding':
|
|
106
|
+
this.setHostProperty('tipPadding', changes['tipPadding'].currentValue);
|
|
107
|
+
break;
|
|
108
|
+
case 'trigger':
|
|
109
|
+
this.setHostProperty('trigger', changes['trigger'].currentValue);
|
|
110
|
+
break;
|
|
111
|
+
case 'triggerElement':
|
|
112
|
+
this.setHostProperty('triggerElement', changes['triggerElement'].currentValue);
|
|
113
|
+
break;
|
|
114
|
+
case 'triggerInteraction':
|
|
115
|
+
this.setHostProperty('triggerInteraction', changes['triggerInteraction'].currentValue);
|
|
116
|
+
break;
|
|
117
|
+
case 'type':
|
|
118
|
+
this.setHostProperty('type', changes['type'].currentValue);
|
|
119
|
+
break;
|
|
120
|
+
default:
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Forward a wrapper @Input to the underlying host element via Renderer2 so
|
|
127
|
+
* the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
|
|
128
|
+
* Unlike a "skip undefined" guard, this lets consumers reset values back to
|
|
129
|
+
* undefined / null by clearing their bindings.
|
|
130
|
+
*/
|
|
131
|
+
setHostProperty(key, value) {
|
|
132
|
+
this.renderer.setProperty(this.host, key, value);
|
|
133
|
+
}
|
|
134
|
+
bindEvents() {
|
|
135
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-opened', (event) => {
|
|
136
|
+
this.luzmoOpenedEvent.emit(event);
|
|
137
|
+
}));
|
|
138
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-closed', (event) => {
|
|
139
|
+
this.luzmoClosedEvent.emit(event);
|
|
140
|
+
}));
|
|
141
|
+
this.listenerCleanup.push(this.renderer.listen(this.host, 'slottable-request', (event) => {
|
|
142
|
+
this.slottableRequestEvent.emit(event);
|
|
143
|
+
}));
|
|
144
|
+
}
|
|
145
|
+
static ɵfac = function LuzmoOverlay_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoOverlay)(); };
|
|
146
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoOverlay, selectors: [["luzmo-overlay"]], inputs: { delayed: "delayed", dialogEl: [0, "dialog-el", "dialogEl"], disabled: "disabled", elements: "elements", parentOverlayToForceClose: [0, "parent-overlay-to-force-close", "parentOverlayToForceClose"], offset: "offset", open: "open", placement: "placement", receivesFocus: [0, "receives-focus", "receivesFocus"], slotEl: [0, "slot-el", "slotEl"], state: "state", strategy: "strategy", tipPadding: [0, "tip-padding", "tipPadding"], trigger: "trigger", triggerElement: [0, "trigger-element", "triggerElement"], triggerInteraction: [0, "trigger-interaction", "triggerInteraction"], type: "type" }, outputs: { luzmoOpenedEvent: "luzmo-opened", luzmoClosedEvent: "luzmo-closed", slottableRequestEvent: "slottable-request" }, exportAs: ["luzmoOverlay"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoOverlay_Template(rf, ctx) { if (rf & 1) {
|
|
147
|
+
i0.ɵɵprojectionDef();
|
|
148
|
+
i0.ɵɵprojection(0);
|
|
149
|
+
} }, encapsulation: 2, changeDetection: 0 });
|
|
150
|
+
}
|
|
151
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoOverlay, [{
|
|
152
|
+
type: Component,
|
|
153
|
+
args: [{
|
|
154
|
+
selector: 'luzmo-overlay',
|
|
155
|
+
exportAs: 'luzmoOverlay',
|
|
156
|
+
standalone: true,
|
|
157
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
158
|
+
template: '<ng-content />'
|
|
159
|
+
}]
|
|
160
|
+
}], () => [], { delayed: [{
|
|
161
|
+
type: Input,
|
|
162
|
+
args: [{ alias: 'delayed' }]
|
|
163
|
+
}], dialogEl: [{
|
|
164
|
+
type: Input,
|
|
165
|
+
args: [{ alias: 'dialog-el' }]
|
|
166
|
+
}], disabled: [{
|
|
167
|
+
type: Input,
|
|
168
|
+
args: [{ alias: 'disabled' }]
|
|
169
|
+
}], elements: [{
|
|
170
|
+
type: Input,
|
|
171
|
+
args: [{ alias: 'elements' }]
|
|
172
|
+
}], parentOverlayToForceClose: [{
|
|
173
|
+
type: Input,
|
|
174
|
+
args: [{ alias: 'parent-overlay-to-force-close' }]
|
|
175
|
+
}], offset: [{
|
|
176
|
+
type: Input,
|
|
177
|
+
args: [{ alias: 'offset' }]
|
|
178
|
+
}], open: [{
|
|
179
|
+
type: Input,
|
|
180
|
+
args: [{ alias: 'open' }]
|
|
181
|
+
}], placement: [{
|
|
182
|
+
type: Input,
|
|
183
|
+
args: [{ alias: 'placement' }]
|
|
184
|
+
}], receivesFocus: [{
|
|
185
|
+
type: Input,
|
|
186
|
+
args: [{ alias: 'receives-focus' }]
|
|
187
|
+
}], slotEl: [{
|
|
188
|
+
type: Input,
|
|
189
|
+
args: [{ alias: 'slot-el' }]
|
|
190
|
+
}], state: [{
|
|
191
|
+
type: Input,
|
|
192
|
+
args: [{ alias: 'state' }]
|
|
193
|
+
}], strategy: [{
|
|
194
|
+
type: Input,
|
|
195
|
+
args: [{ alias: 'strategy' }]
|
|
196
|
+
}], tipPadding: [{
|
|
197
|
+
type: Input,
|
|
198
|
+
args: [{ alias: 'tip-padding' }]
|
|
199
|
+
}], trigger: [{
|
|
200
|
+
type: Input,
|
|
201
|
+
args: [{ alias: 'trigger' }]
|
|
202
|
+
}], triggerElement: [{
|
|
203
|
+
type: Input,
|
|
204
|
+
args: [{ alias: 'trigger-element' }]
|
|
205
|
+
}], triggerInteraction: [{
|
|
206
|
+
type: Input,
|
|
207
|
+
args: [{ alias: 'trigger-interaction' }]
|
|
208
|
+
}], type: [{
|
|
209
|
+
type: Input,
|
|
210
|
+
args: [{ alias: 'type' }]
|
|
211
|
+
}], luzmoOpenedEvent: [{ type: i0.Output, args: ["luzmo-opened"] }], luzmoClosedEvent: [{ type: i0.Output, args: ["luzmo-closed"] }], slottableRequestEvent: [{ type: i0.Output, args: ["slottable-request"] }] }); })();
|
|
212
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOverlay, { className: "LuzmoOverlay", filePath: "components/overlay.ts", lineNumber: 15 }); })();
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import '@luzmo/lucero/picker-button';
|
|
3
|
+
import type { LuzmoPickerButton as LuzmoPickerButtonHostElement } from '@luzmo/lucero/picker-button';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class LuzmoPickerButton 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(): LuzmoPickerButtonHostElement;
|
|
13
|
+
invalid?: boolean;
|
|
14
|
+
position?: 'left' | 'right';
|
|
15
|
+
active?: boolean;
|
|
16
|
+
/** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
|
|
17
|
+
type?: 'button' | 'submit' | 'reset';
|
|
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<LuzmoPickerButton, never>;
|
|
29
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoPickerButton, "luzmo-picker-button", ["luzmoPickerButton"], { "invalid": { "alias": "invalid"; "required": false; }; "position": { "alias": "position"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
30
|
+
}
|
|
31
|
+
/** The underlying custom element type for LuzmoPickerButton */
|
|
32
|
+
export type LuzmoPickerButtonElement = LuzmoPickerButtonHostElement;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
|
|
2
|
+
import '@luzmo/lucero/picker-button';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
const _c0 = ["*"];
|
|
5
|
+
/**
|
|
6
|
+
* Angular wrapper component for <luzmo-picker-button>
|
|
7
|
+
*
|
|
8
|
+
* @slot (default) - text content to be displayed in the Button element
|
|
9
|
+
* @slot icon - icon element(s) to display at the start of the button
|
|
10
|
+
*/
|
|
11
|
+
export class LuzmoPickerButton {
|
|
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
|
+
invalid;
|
|
22
|
+
position;
|
|
23
|
+
active;
|
|
24
|
+
/** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
|
|
25
|
+
type;
|
|
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 'invalid':
|
|
38
|
+
this.setHostProperty('invalid', changes['invalid'].currentValue);
|
|
39
|
+
break;
|
|
40
|
+
case 'position':
|
|
41
|
+
this.setHostProperty('position', changes['position'].currentValue);
|
|
42
|
+
break;
|
|
43
|
+
case 'active':
|
|
44
|
+
this.setHostProperty('active', changes['active'].currentValue);
|
|
45
|
+
break;
|
|
46
|
+
case 'type':
|
|
47
|
+
this.setHostProperty('type', changes['type'].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 LuzmoPickerButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoPickerButton)(); };
|
|
67
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoPickerButton, selectors: [["luzmo-picker-button"]], inputs: { invalid: "invalid", position: "position", active: "active", type: "type" }, exportAs: ["luzmoPickerButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoPickerButton_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(LuzmoPickerButton, [{
|
|
73
|
+
type: Component,
|
|
74
|
+
args: [{
|
|
75
|
+
selector: 'luzmo-picker-button',
|
|
76
|
+
exportAs: 'luzmoPickerButton',
|
|
77
|
+
standalone: true,
|
|
78
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
79
|
+
template: '<ng-content />'
|
|
80
|
+
}]
|
|
81
|
+
}], () => [], { invalid: [{
|
|
82
|
+
type: Input,
|
|
83
|
+
args: [{ alias: 'invalid' }]
|
|
84
|
+
}], position: [{
|
|
85
|
+
type: Input,
|
|
86
|
+
args: [{ alias: 'position' }]
|
|
87
|
+
}], active: [{
|
|
88
|
+
type: Input,
|
|
89
|
+
args: [{ alias: 'active' }]
|
|
90
|
+
}], type: [{
|
|
91
|
+
type: Input,
|
|
92
|
+
args: [{ alias: 'type' }]
|
|
93
|
+
}] }); })();
|
|
94
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoPickerButton, { className: "LuzmoPickerButton", filePath: "components/picker-button.ts", lineNumber: 18 }); })();
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
+
import '@luzmo/lucero/picker';
|
|
4
|
+
import type { LuzmoPicker as LuzmoPickerHostElement } from '@luzmo/lucero/picker';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare class LuzmoPicker implements OnChanges, ControlValueAccessor {
|
|
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(): LuzmoPickerHostElement;
|
|
14
|
+
appliedLabel?: string;
|
|
15
|
+
button?: unknown;
|
|
16
|
+
/** Whether the Picker is disabled. */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
focused?: boolean;
|
|
19
|
+
icons?: 'only' | 'none';
|
|
20
|
+
/** Type of dropdown */
|
|
21
|
+
variant?: 'checkmarks' | 'highlight';
|
|
22
|
+
/** Whether the value is invalid. */
|
|
23
|
+
invalid?: boolean;
|
|
24
|
+
/** Whether the items are currently loading. */
|
|
25
|
+
pending?: boolean;
|
|
26
|
+
/** Defines a string value that labels the Picker while it is in pending state. */
|
|
27
|
+
pendingLabel?: string;
|
|
28
|
+
label?: string;
|
|
29
|
+
open?: boolean;
|
|
30
|
+
/** Readonly value */
|
|
31
|
+
readonly?: boolean;
|
|
32
|
+
labelAlignment?: 'inline';
|
|
33
|
+
optionsMenu?: unknown;
|
|
34
|
+
overlayElement?: unknown;
|
|
35
|
+
placement?: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
|
|
36
|
+
/** Display as a quiet picker */
|
|
37
|
+
quiet?: boolean;
|
|
38
|
+
value?: string;
|
|
39
|
+
selectedItem?: unknown;
|
|
40
|
+
selects?: never | 'single';
|
|
41
|
+
dependencyManager?: unknown;
|
|
42
|
+
isMobile?: unknown;
|
|
43
|
+
strategy?: unknown;
|
|
44
|
+
pendingStateController?: unknown;
|
|
45
|
+
handleSlottableRequest?: unknown;
|
|
46
|
+
applyFocusElementLabel?: unknown;
|
|
47
|
+
/** Announces that the `value` of the element has changed */
|
|
48
|
+
readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
49
|
+
/** Announces that the overlay has been opened */
|
|
50
|
+
readonly luzmoOpenedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
51
|
+
/** Announces that the overlay has been closed */
|
|
52
|
+
readonly luzmoClosedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
|
|
53
|
+
readonly scrollEvent: import("@angular/core").OutputEmitterRef<Event>;
|
|
54
|
+
constructor();
|
|
55
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
56
|
+
/**
|
|
57
|
+
* Forward a wrapper @Input to the underlying host element via Renderer2 so
|
|
58
|
+
* the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
|
|
59
|
+
* Unlike a "skip undefined" guard, this lets consumers reset values back to
|
|
60
|
+
* undefined / null by clearing their bindings.
|
|
61
|
+
*/
|
|
62
|
+
private setHostProperty;
|
|
63
|
+
private bindEvents;
|
|
64
|
+
private onChange;
|
|
65
|
+
private onTouched;
|
|
66
|
+
private isWritingValue;
|
|
67
|
+
private lastCvaValue;
|
|
68
|
+
writeValue(value: string): void;
|
|
69
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
70
|
+
registerOnTouched(fn: () => void): void;
|
|
71
|
+
setDisabledState(isDisabled: boolean): void;
|
|
72
|
+
focus(options?: FocusOptions): void;
|
|
73
|
+
toggle(target?: boolean): void;
|
|
74
|
+
close(): void;
|
|
75
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoPicker, never>;
|
|
76
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoPicker, "luzmo-picker", ["luzmoPicker"], { "appliedLabel": { "alias": "applied-label"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pending-label"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "label-alignment"; "required": false; }; "optionsMenu": { "alias": "options-menu"; "required": false; }; "overlayElement": { "alias": "overlay-element"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selected-item"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "dependencyManager": { "alias": "dependency-manager"; "required": false; }; "isMobile": { "alias": "is-mobile"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pending-state-controller"; "required": false; }; "handleSlottableRequest": { "alias": "handle-slottable-request"; "required": false; }; "applyFocusElementLabel": { "alias": "apply-focus-element-label"; "required": false; }; }, { "changeEvent": "change"; "luzmoOpenedEvent": "luzmo-opened"; "luzmoClosedEvent": "luzmo-closed"; "scrollEvent": "scroll"; }, never, ["*"], true, never>;
|
|
77
|
+
}
|
|
78
|
+
/** The underlying custom element type for LuzmoPicker */
|
|
79
|
+
export type LuzmoPickerElement = LuzmoPickerHostElement;
|