@latitude-ui/widgets 0.0.21 → 0.0.23
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 +7 -7
- package/button/README.md +2 -2
- package/checkbox/README.md +3 -0
- package/fesm2022/latitude-widgets-button.mjs +96 -0
- package/fesm2022/latitude-widgets-button.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-checkbox.mjs → latitude-widgets-checkbox.mjs} +6 -6
- package/fesm2022/latitude-widgets-checkbox.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-icons.mjs → latitude-widgets-icon.mjs} +45 -49
- package/fesm2022/latitude-widgets-icon.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-input.mjs → latitude-widgets-input.mjs} +67 -109
- package/fesm2022/latitude-widgets-input.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-listbox.mjs → latitude-widgets-listbox.mjs} +25 -30
- package/fesm2022/latitude-widgets-listbox.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-select.mjs → latitude-widgets-select.mjs} +67 -73
- package/fesm2022/latitude-widgets-select.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-switch.mjs → latitude-widgets-switch.mjs} +5 -5
- package/fesm2022/latitude-widgets-switch.mjs.map +1 -0
- package/fesm2022/latitude-widgets-textbox-date.mjs +30 -0
- package/fesm2022/latitude-widgets-textbox-date.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-textbox-number.mjs → latitude-widgets-textbox-number.mjs} +50 -58
- package/fesm2022/latitude-widgets-textbox-number.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets-textbox.mjs → latitude-widgets-textbox.mjs} +17 -17
- package/fesm2022/latitude-widgets-textbox.mjs.map +1 -0
- package/fesm2022/{latitude-ui-widgets.mjs → latitude-widgets.mjs} +1 -1
- package/fesm2022/latitude-widgets.mjs.map +1 -0
- package/icon/README.md +3 -0
- package/input/README.md +2 -2
- package/listbox/README.md +3 -0
- package/package.json +34 -54
- package/select/README.md +3 -0
- package/switch/README.md +3 -0
- package/textbox/README.md +3 -0
- package/textbox-date/README.md +3 -0
- package/textbox-number/README.md +3 -0
- package/types/latitude-widgets-button.d.ts +29 -0
- package/{checkbox/index.d.ts → types/latitude-widgets-checkbox.d.ts} +1 -1
- package/types/latitude-widgets-icon.d.ts +44 -0
- package/{input/index.d.ts → types/latitude-widgets-input.d.ts} +6 -32
- package/{listbox/index.d.ts → types/latitude-widgets-listbox.d.ts} +6 -8
- package/{select/index.d.ts → types/latitude-widgets-select.d.ts} +2 -4
- package/{switch/index.d.ts → types/latitude-widgets-switch.d.ts} +1 -1
- package/types/latitude-widgets-textbox-date.d.ts +9 -0
- package/{textbox-number/index.d.ts → types/latitude-widgets-textbox-number.d.ts} +11 -8
- package/{textbox/index.d.ts → types/latitude-widgets-textbox.d.ts} +6 -6
- package/button/index.d.ts +0 -19
- package/core/README.md +0 -3
- package/core/index.d.ts +0 -39
- package/fesm2022/latitude-ui-widgets-button.mjs +0 -51
- package/fesm2022/latitude-ui-widgets-button.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-checkbox.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-core.mjs +0 -116
- package/fesm2022/latitude-ui-widgets-core.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-icons.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-input.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-listbox.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-select.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-switch.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-textbox-number.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-textbox.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets-toolbar.mjs +0 -20
- package/fesm2022/latitude-ui-widgets-toolbar.mjs.map +0 -1
- package/fesm2022/latitude-ui-widgets.mjs.map +0 -1
- package/icons/index.d.ts +0 -19
- package/styles/_colors.scss +0 -99
- package/styles/_defaults.scss +0 -135
- package/styles/_index.scss +0 -11
- package/styles/_typography.scss +0 -37
- package/styles/button/_index.scss +0 -199
- package/styles/forms/_index.scss +0 -888
- package/styles/icons/_index.scss +0 -34
- package/styles/list/_index.scss +0 -0
- package/styles/listbox/_index.scss +0 -30
- package/toolbar/index.d.ts +0 -8
- /package/{index.d.ts → types/latitude-widgets.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
# @latitude
|
|
2
|
-
|
|
3
|
-
This library was generated with [Nx](https://nx.dev).
|
|
4
|
-
|
|
5
|
-
## Running unit tests
|
|
6
|
-
|
|
7
|
-
Run `nx test @latitude
|
|
1
|
+
# @latitude/widgets
|
|
2
|
+
|
|
3
|
+
This library was generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
## Running unit tests
|
|
6
|
+
|
|
7
|
+
Run `nx test @latitude/widgets` to execute the unit tests.
|
package/button/README.md
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# @latitude
|
|
1
|
+
# @latitude/widgets
|
|
2
2
|
|
|
3
|
-
Secondary entry point of `@latitude
|
|
3
|
+
Secondary entry point of `@latitude/widgets`. It can be used by importing from `@latitude/widgets/button`.
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, input, booleanAttribute, numberAttribute, signal, afterRenderEffect, Directive, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class ButtonDirective {
|
|
5
|
+
button = inject((ElementRef)).nativeElement;
|
|
6
|
+
role = input('button', ...(ngDevMode ? [{ debugName: "role" }] : []));
|
|
7
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
9
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
10
|
+
tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : {}), transform: numberAttribute });
|
|
11
|
+
onlyicon = signal(false, ...(ngDevMode ? [{ debugName: "onlyicon" }] : []));
|
|
12
|
+
constructor() {
|
|
13
|
+
// Need to find icon without another DOM node (Polyfill pseudo :has)
|
|
14
|
+
afterRenderEffect(() => {
|
|
15
|
+
const childNodes = this.button.childNodes;
|
|
16
|
+
if (childNodes.length === 1) {
|
|
17
|
+
const node = childNodes.item(0);
|
|
18
|
+
this.onlyicon.update(() => {
|
|
19
|
+
if (node instanceof HTMLElement) {
|
|
20
|
+
return node.tagName === 'LAT-ICON' || node.tagName === 'SVG' || node.role === 'img';
|
|
21
|
+
}
|
|
22
|
+
return false;
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
28
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: ButtonDirective, isStandalone: true, selector: "a[lat-button],button[lat-button]", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "role()", "attr.tabindex": "disabled() ? -1 : tabindex()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-onlyicon": "onlyicon()" } }, exportAs: ["latButton"], ngImport: i0 });
|
|
29
|
+
}
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
31
|
+
type: Directive,
|
|
32
|
+
args: [{
|
|
33
|
+
exportAs: 'latButton',
|
|
34
|
+
selector: 'a[lat-button],button[lat-button]',
|
|
35
|
+
host: {
|
|
36
|
+
'[attr.role]': 'role()',
|
|
37
|
+
'[attr.tabindex]': `disabled() ? -1 : tabindex()`,
|
|
38
|
+
'[attr.data-size]': 'size()',
|
|
39
|
+
'[attr.data-variant]': 'variant()',
|
|
40
|
+
'[attr.data-onlyicon]': 'onlyicon()',
|
|
41
|
+
}
|
|
42
|
+
}]
|
|
43
|
+
}], ctorParameters: () => [], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
|
|
44
|
+
|
|
45
|
+
class ButtonComponent extends ButtonDirective {
|
|
46
|
+
destroyRef = inject(DestroyRef);
|
|
47
|
+
constructor() {
|
|
48
|
+
super();
|
|
49
|
+
this._setUpClickListener();
|
|
50
|
+
}
|
|
51
|
+
// https://github.com/angular/angular/issues/9587
|
|
52
|
+
_setUpClickListener() {
|
|
53
|
+
const handleMouseEvent = (event) => {
|
|
54
|
+
if (this.disabled()) {
|
|
55
|
+
event.stopImmediatePropagation();
|
|
56
|
+
event.preventDefault();
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const handleKeyboardEvent = (event) => {
|
|
60
|
+
if (event.code === 'Space' && !this.disabled()) {
|
|
61
|
+
const click = new MouseEvent('click', { ...event });
|
|
62
|
+
this.button.dispatchEvent(click);
|
|
63
|
+
event.stopImmediatePropagation();
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
this.button.addEventListener('click', handleMouseEvent);
|
|
68
|
+
this.button.addEventListener('keyup', handleKeyboardEvent);
|
|
69
|
+
this.destroyRef.onDestroy(() => {
|
|
70
|
+
this.button.removeEventListener('click', handleMouseEvent);
|
|
71
|
+
this.button.removeEventListener('keyup', handleKeyboardEvent);
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ButtonComponent, isStandalone: true, selector: "lat-button", host: { properties: { "attr.aria-disabled": "disabled() || null" } }, exportAs: ["latButton"], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
76
|
+
}
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
78
|
+
type: Component,
|
|
79
|
+
args: [{
|
|
80
|
+
exportAs: 'latButton',
|
|
81
|
+
selector: 'lat-button',
|
|
82
|
+
template: '<ng-content />',
|
|
83
|
+
encapsulation: ViewEncapsulation.None,
|
|
84
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
85
|
+
host: {
|
|
86
|
+
'[attr.aria-disabled]': `disabled() || null`,
|
|
87
|
+
},
|
|
88
|
+
}]
|
|
89
|
+
}], ctorParameters: () => [] });
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Generated bundle index. Do not edit.
|
|
93
|
+
*/
|
|
94
|
+
|
|
95
|
+
export { ButtonComponent, ButtonDirective };
|
|
96
|
+
//# sourceMappingURL=latitude-widgets-button.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"latitude-widgets-button.mjs","sources":["../../../../packages/widgets/button/lib/button.directive.ts","../../../../packages/widgets/button/lib/button.component.ts","../../../../packages/widgets/button/latitude-widgets-button.ts"],"sourcesContent":["import { afterRenderEffect, booleanAttribute, Directive, ElementRef, inject, input, numberAttribute, signal } from '@angular/core';\r\nimport { ButtonSize, ButtonVariant } from './button.types';\r\n\r\n\r\n@Directive({\r\n exportAs: 'latButton',\r\n selector: 'a[lat-button],button[lat-button]',\r\n host: {\r\n '[attr.role]': 'role()',\r\n '[attr.tabindex]': `disabled() ? -1 : tabindex()`,\r\n '[attr.data-size]': 'size()',\r\n '[attr.data-variant]': 'variant()',\r\n '[attr.data-onlyicon]': 'onlyicon()',\r\n }\r\n})\r\nexport class ButtonDirective {\r\n public readonly button = inject(ElementRef<HTMLElement>).nativeElement;\r\n\r\n public readonly role = input<string>('button');\r\n public readonly size = input<ButtonSize>('md');\r\n public readonly variant = input<ButtonVariant>('default');\r\n public readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n public readonly tabindex = input<number, unknown>(undefined, { transform: numberAttribute });\r\n\r\n public readonly onlyicon = signal<boolean>(false);\r\n\r\n constructor() {\r\n // Need to find icon without another DOM node (Polyfill pseudo :has)\r\n afterRenderEffect(() => {\r\n const childNodes = this.button.childNodes;\r\n\r\n if (childNodes.length === 1) {\r\n const node = childNodes.item(0);\r\n\r\n this.onlyicon.update(() => {\r\n if (node instanceof HTMLElement) {\r\n return node.tagName === 'LAT-ICON' || node.tagName === 'SVG' || node.role === 'img';\r\n }\r\n\r\n return false;\r\n });\r\n }\r\n });\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, DestroyRef, inject, ViewEncapsulation } from '@angular/core';\r\nimport { ButtonDirective } from './button.directive';\r\n\r\n@Component({\r\n exportAs: 'latButton',\r\n selector: 'lat-button',\r\n template: '<ng-content />',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[attr.aria-disabled]': `disabled() || null`,\r\n },\r\n})\r\nexport class ButtonComponent extends ButtonDirective {\r\n public readonly destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n super();\r\n\r\n this._setUpClickListener();\r\n }\r\n\r\n // https://github.com/angular/angular/issues/9587\r\n private _setUpClickListener() {\r\n\r\n const handleMouseEvent = (event: MouseEvent) => {\r\n if (this.disabled()) {\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n const handleKeyboardEvent = (event: KeyboardEvent) => {\r\n if (event.code === 'Space' && !this.disabled()) {\r\n const click = new MouseEvent('click', { ...event });\r\n\r\n this.button.dispatchEvent(click);\r\n\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n this.button.addEventListener('click', handleMouseEvent);\r\n this.button.addEventListener('keyup', handleKeyboardEvent);\r\n\r\n this.destroyRef.onDestroy(() => {\r\n this.button.removeEventListener('click', handleMouseEvent);\r\n this.button.removeEventListener('keyup', handleKeyboardEvent);\r\n });\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
|
-
import { BuildInInputValueAccessor } from '@latitude
|
|
4
|
-
import { IconComponent } from '@latitude
|
|
3
|
+
import { BuildInInputValueAccessor } from '@latitude/widgets/input';
|
|
4
|
+
import { IconComponent } from '@latitude/widgets/icon';
|
|
5
5
|
|
|
6
6
|
class CheckBoxComponent extends BuildInInputValueAccessor {
|
|
7
7
|
toggle() {
|
|
@@ -10,15 +10,15 @@ class CheckBoxComponent extends BuildInInputValueAccessor {
|
|
|
10
10
|
this.writeValue(!value);
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: CheckBoxComponent, isStandalone: true, selector: "lat-checkbox", host: { listeners: { "click": "toggle()" } }, providers: [
|
|
15
15
|
{
|
|
16
16
|
provide: BuildInInputValueAccessor,
|
|
17
17
|
useExisting: forwardRef(() => CheckBoxComponent),
|
|
18
18
|
},
|
|
19
19
|
], exportAs: ["latCheckBox"], usesInheritance: true, ngImport: i0, template: "<button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n [attr.id]=\"inputId()\"\r\n [attr.value]=\"value() ? 'on' : 'off'\"\r\n [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n [attr.disabled]=\"disabled() || undefined\"\r\n [attr.aria-checked]=\"value() || false\"\r\n>\r\n <lat-icon name=\"check\" />\r\n</button>\r\n<ng-content/>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20
20
|
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CheckBoxComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
23
|
args: [{ imports: [
|
|
24
24
|
IconComponent
|
|
@@ -37,4 +37,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
37
37
|
*/
|
|
38
38
|
|
|
39
39
|
export { CheckBoxComponent };
|
|
40
|
-
//# sourceMappingURL=latitude-
|
|
40
|
+
//# sourceMappingURL=latitude-widgets-checkbox.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"latitude-widgets-checkbox.mjs","sources":["../../../../packages/widgets/checkbox/lib/checkbox.component.ts","../../../../packages/widgets/checkbox/lib/checkbox.component.html","../../../../packages/widgets/checkbox/latitude-widgets-checkbox.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\r\nimport { BuildInInputValueAccessor } from '@latitude/widgets/input';\r\nimport { IconComponent } from '@latitude/widgets/icon';\r\n\r\n@Component({\r\n imports: [\r\n IconComponent\r\n ],\r\n exportAs: 'latCheckBox',\r\n selector: 'lat-checkbox',\r\n templateUrl: './checkbox.component.html',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n {\r\n provide: BuildInInputValueAccessor,\r\n useExisting: forwardRef(() => CheckBoxComponent),\r\n },\r\n ],\r\n host: {\r\n '(click)': 'toggle()',\r\n },\r\n})\r\nexport class CheckBoxComponent extends BuildInInputValueAccessor<boolean> {\r\n public toggle() {\r\n if (!this.disabled()) {\r\n const value = this.value() ?? false;\r\n\r\n this.writeValue(!value);\r\n }\r\n }\r\n}\r\n","<button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n [attr.id]=\"inputId()\"\r\n [attr.value]=\"value() ? 'on' : 'off'\"\r\n [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n [attr.disabled]=\"disabled() || undefined\"\r\n [attr.aria-checked]=\"value() || false\"\r\n>\r\n <lat-icon name=\"check\" />\r\n</button>\r\n<ng-content/>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAuBM,MAAO,iBAAkB,SAAQ,yBAAkC,CAAA;IAChE,MAAM,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,KAAK;AAEnC,YAAA,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC;QACzB;IACF;uGAPW,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAVjB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,yBAAyB;AAClC,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AACjD,aAAA;SACF,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBH,4VAYA,4CDNI,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAiBJ,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA;wBACP;qBACD,EAAA,QAAA,EACS,aAAa,EAAA,QAAA,EACb,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,yBAAyB;AAClC,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACjD,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA,EAAA,QAAA,EAAA,4VAAA,EAAA;;;AErBH;;AAEG;;;;"}
|
|
@@ -1,30 +1,28 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject,
|
|
2
|
+
import { InjectionToken, inject, RendererFactory2, ElementRef, Renderer2, DestroyRef, Injectable, Injector, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
3
|
import { of, map, tap, finalize, share, filter, switchMap } from 'rxjs';
|
|
4
|
-
import { HttpClient } from '@angular/common/http';
|
|
5
4
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
+
import { HttpClient } from '@angular/common/http';
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
providedIn: 'root',
|
|
7
|
+
const ICON_ASSETS_PATH = new InjectionToken('ICON_ASSETS_PATH', {
|
|
9
8
|
factory: () => 'assets/latitude-ui/icons',
|
|
10
9
|
});
|
|
11
|
-
const
|
|
12
|
-
providedIn: 'root',
|
|
10
|
+
const ICON_RESOLVER = new InjectionToken('ICON_RESOLVER', {
|
|
13
11
|
factory: () => {
|
|
14
|
-
const assets = inject(
|
|
12
|
+
const assets = inject(ICON_ASSETS_PATH);
|
|
15
13
|
return (icon) => `${assets}/${icon.split('.').join('/')}.svg`;
|
|
16
14
|
},
|
|
17
15
|
});
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
}
|
|
16
|
+
function provideIconAssetsPath(useFactory) {
|
|
17
|
+
return { provide: ICON_ASSETS_PATH, useFactory };
|
|
18
|
+
}
|
|
19
|
+
function provideIconResolver(useFactory) {
|
|
20
|
+
return { provide: ICON_RESOLVER, useFactory };
|
|
21
|
+
}
|
|
24
22
|
|
|
25
23
|
class IconService {
|
|
26
24
|
http = inject(HttpClient);
|
|
27
|
-
|
|
25
|
+
rtree = inject(RendererFactory2).createRenderer(null, null);
|
|
28
26
|
icons = new Map();
|
|
29
27
|
tasks = new Map();
|
|
30
28
|
get(url) {
|
|
@@ -38,11 +36,21 @@ class IconService {
|
|
|
38
36
|
this.tasks.set(url, task);
|
|
39
37
|
return task;
|
|
40
38
|
}
|
|
39
|
+
subscribe(url, injector) {
|
|
40
|
+
const el = injector.get((ElementRef)).nativeElement;
|
|
41
|
+
const rtree = injector.get(Renderer2);
|
|
42
|
+
const destroyRef = injector.get(DestroyRef);
|
|
43
|
+
return toObservable(url, { injector }).pipe(takeUntilDestroyed(destroyRef), tap(() => {
|
|
44
|
+
el.childNodes.forEach((node) => {
|
|
45
|
+
rtree.removeChild(el, node);
|
|
46
|
+
});
|
|
47
|
+
}), filter((url) => url !== undefined), switchMap((url) => this.get(url)), tap((icon) => rtree.appendChild(el, icon.cloneNode(true)))).subscribe();
|
|
48
|
+
}
|
|
41
49
|
normalize(text) {
|
|
42
50
|
text = text.replace(/style\s*=/g, 'data-style=');
|
|
43
51
|
text = text.replace(/class\s*=/g, 'data-class=');
|
|
44
|
-
const nativeElement = this.
|
|
45
|
-
this.
|
|
52
|
+
const nativeElement = this.rtree.createElement('template');
|
|
53
|
+
this.rtree.setProperty(nativeElement, 'innerHTML', text);
|
|
46
54
|
const glyph = nativeElement.content.firstElementChild;
|
|
47
55
|
if (glyph.tagName.toLowerCase() !== 'svg') {
|
|
48
56
|
throw new Error(`<svg>...</svg> not found for <${glyph.tagName.toLowerCase()}>`);
|
|
@@ -53,66 +61,54 @@ class IconService {
|
|
|
53
61
|
if (styles) {
|
|
54
62
|
styles.split(';').forEach((style) => {
|
|
55
63
|
const [property, value] = style.split(':');
|
|
56
|
-
this.
|
|
64
|
+
this.rtree.setStyle(node, property.trim(), value.trim());
|
|
57
65
|
});
|
|
58
|
-
this.
|
|
66
|
+
this.rtree.removeAttribute(node, 'data-style');
|
|
59
67
|
}
|
|
60
68
|
}
|
|
61
|
-
this.
|
|
62
|
-
this.
|
|
69
|
+
this.rtree.setAttribute(glyph, 'width', '1em');
|
|
70
|
+
this.rtree.setAttribute(glyph, 'height', '1em');
|
|
63
71
|
return glyph;
|
|
64
72
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const nativeElement = inject((ElementRef)).nativeElement;
|
|
68
|
-
toObservable(url).pipe(takeUntilDestroyed(), tap(() => {
|
|
69
|
-
nativeElement.childNodes.forEach((node) => {
|
|
70
|
-
renderer.removeChild(nativeElement, node);
|
|
71
|
-
});
|
|
72
|
-
}), filter((url) => url !== undefined), switchMap((url) => this.get(url)), tap((icon) => renderer.appendChild(nativeElement, icon.cloneNode(true)))).subscribe();
|
|
73
|
-
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
75
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, providedIn: 'root' });
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
74
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconService, providedIn: 'root' });
|
|
76
75
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconService, decorators: [{
|
|
78
77
|
type: Injectable,
|
|
79
78
|
args: [{ providedIn: 'root' }]
|
|
80
79
|
}] });
|
|
81
80
|
|
|
82
81
|
class IconComponent {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
name = input();
|
|
82
|
+
injector = inject(Injector);
|
|
83
|
+
url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : []));
|
|
84
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
87
85
|
icon = computed(() => {
|
|
88
86
|
const url = this.url();
|
|
89
87
|
if (url) {
|
|
90
88
|
return url;
|
|
91
89
|
}
|
|
92
90
|
const name = this.name();
|
|
93
|
-
return name ? this.
|
|
94
|
-
});
|
|
91
|
+
return name ? this.iconResolver(name) : '';
|
|
92
|
+
}, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
93
|
+
iconService = this.injector.get(IconService);
|
|
94
|
+
iconResolver = this.injector.get(ICON_RESOLVER);
|
|
95
95
|
constructor() {
|
|
96
|
-
|
|
97
|
-
inject(IconService).toObservable(this.icon);
|
|
98
|
-
}
|
|
96
|
+
this.iconService.subscribe(this.icon, this.injector);
|
|
99
97
|
}
|
|
100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
98
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: IconComponent, isStandalone: true, selector: "lat-icon", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "name()" } }, exportAs: ["latIcon"], ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
102
100
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconComponent, decorators: [{
|
|
104
102
|
type: Component,
|
|
105
103
|
args: [{ exportAs: 'latIcon', selector: 'lat-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
106
104
|
role: 'img',
|
|
107
105
|
'[attr.aria-label]': 'name()',
|
|
108
|
-
'[attr.data-polyfill]': 'polyfill() || undefined',
|
|
109
|
-
'[style.--lat-icon-url]': '`url(${icon()})`',
|
|
110
106
|
}, template: "" }]
|
|
111
|
-
}], ctorParameters: () => [] });
|
|
107
|
+
}], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
|
|
112
108
|
|
|
113
109
|
/**
|
|
114
110
|
* Generated bundle index. Do not edit.
|
|
115
111
|
*/
|
|
116
112
|
|
|
117
|
-
export {
|
|
118
|
-
//# sourceMappingURL=latitude-
|
|
113
|
+
export { ICON_ASSETS_PATH, ICON_RESOLVER, IconComponent, IconService, provideIconAssetsPath, provideIconResolver };
|
|
114
|
+
//# sourceMappingURL=latitude-widgets-icon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"latitude-widgets-icon.mjs","sources":["../../../../packages/widgets/icon/lib/icon.resolver.ts","../../../../packages/widgets/icon/lib/icon.service.ts","../../../../packages/widgets/icon/lib/icon.component.ts","../../../../packages/widgets/icon/lib/icon.component.html","../../../../packages/widgets/icon/latitude-widgets-icon.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\r\n\r\nexport type ResolverFn = (icon: string) => string\r\n\r\nexport const ICON_ASSETS_PATH = new InjectionToken<string>('ICON_ASSETS_PATH', {\r\n factory: () => 'assets/latitude-ui/icons',\r\n});\r\n\r\nexport const ICON_RESOLVER = new InjectionToken<ResolverFn>('ICON_RESOLVER', {\r\n factory: () => {\r\n const assets = inject(ICON_ASSETS_PATH);\r\n\r\n return (icon: string): string => `${assets}/${icon.split('.').join('/')}.svg`;\r\n },\r\n});\r\n\r\nexport function provideIconAssetsPath(useFactory: () => string) {\r\n return { provide: ICON_ASSETS_PATH, useFactory }\r\n}\r\n\r\n\r\nexport function provideIconResolver(useFactory: () => ResolverFn) {\r\n return { provide: ICON_RESOLVER, useFactory }\r\n}\r\n","import { filter, finalize, map, Observable, of, share, Subscription, switchMap, tap } from 'rxjs';\r\n\r\nimport { DestroyRef, ElementRef, inject, Injectable, Injector, Renderer2, RendererFactory2, Signal } from '@angular/core';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class IconService {\r\n public readonly http = inject(HttpClient);\r\n public readonly rtree = inject(RendererFactory2).createRenderer(null, null);\r\n\r\n protected readonly icons = new Map<string, SVGElement>();\r\n protected readonly tasks = new Map<string, Observable<SVGElement>>();\r\n\r\n public get(url: string): Observable<SVGElement> {\r\n if (this.icons.has(url)) {\r\n return of(this.icons.get(url) as SVGElement);\r\n }\r\n\r\n if (this.tasks.has(url)) {\r\n return this.tasks.get(url) as Observable<SVGElement>;\r\n }\r\n\r\n const task = this.http.get(url, { responseType: 'text' }).pipe(\r\n map((text) => this.normalize(text)),\r\n tap((html) => this.icons.set(url, html)),\r\n finalize(() => this.tasks.delete(url)),\r\n share(),\r\n );\r\n\r\n this.tasks.set(url, task);\r\n\r\n return task;\r\n }\r\n\r\n public subscribe(url: Signal<string | undefined>, injector: Injector): Subscription {\r\n const el = injector.get(ElementRef<HTMLElement>).nativeElement;\r\n const rtree = injector.get(Renderer2);\r\n const destroyRef = injector.get(DestroyRef);\r\n\r\n return toObservable(url, { injector }).pipe(\r\n takeUntilDestroyed(destroyRef),\r\n tap(() => {\r\n el.childNodes.forEach((node: ChildNode) => {\r\n rtree.removeChild(el, node);\r\n });\r\n }),\r\n filter((url) => url !== undefined),\r\n switchMap((url) => this.get(url)),\r\n tap((icon) => rtree.appendChild(el, icon.cloneNode(true))),\r\n ).subscribe();\r\n }\r\n\r\n protected normalize(text: string): SVGElement {\r\n text = text.replace(/style\\s*=/g, 'data-style=');\r\n text = text.replace(/class\\s*=/g, 'data-class=');\r\n\r\n const nativeElement = this.rtree.createElement('template');\r\n this.rtree.setProperty(nativeElement, 'innerHTML', text);\r\n\r\n const glyph = nativeElement.content.firstElementChild as SVGElement;\r\n if (glyph.tagName.toLowerCase() !== 'svg') {\r\n throw new Error(`<svg>...</svg> not found for <${glyph.tagName.toLowerCase()}>`);\r\n }\r\n\r\n const nodes = Array.from(glyph.querySelectorAll<HTMLElement | SVGElement>('[data-style]'));\r\n for (const node of nodes) {\r\n const styles = node.getAttribute('data-style');\r\n\r\n if (styles) {\r\n styles.split(';').forEach((style) => {\r\n const [property, value] = style.split(':');\r\n this.rtree.setStyle(node, property.trim(), value.trim());\r\n });\r\n\r\n this.rtree.removeAttribute(node, 'data-style');\r\n }\r\n }\r\n\r\n this.rtree.setAttribute(glyph, 'width', '1em');\r\n this.rtree.setAttribute(glyph, 'height', '1em');\r\n\r\n return glyph;\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, computed, inject, Injector, input, ViewEncapsulation } from '@angular/core';\r\n\r\nimport { ICON_RESOLVER } from './icon.resolver';\r\nimport { IconService } from './icon.service';\r\n\r\n@Component({\r\n exportAs: 'latIcon',\r\n selector: 'lat-icon',\r\n templateUrl: './icon.component.html',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n role: 'img',\r\n '[attr.aria-label]': 'name()',\r\n },\r\n})\r\nexport class IconComponent {\r\n public readonly injector = inject(Injector);\r\n\r\n public readonly url = input<string>();\r\n public readonly name = input<string>();\r\n\r\n public readonly icon = computed(() => {\r\n const url = this.url();\r\n\r\n if (url) {\r\n return url;\r\n }\r\n\r\n const name = this.name();\r\n\r\n return name ? this.iconResolver(name) : '';\r\n });\r\n\r\n protected readonly iconService = this.injector.get(IconService);\r\n protected readonly iconResolver = this.injector.get(ICON_RESOLVER);\r\n\r\n constructor() {\r\n this.iconService.subscribe(this.icon, this.injector);\r\n }\r\n}\r\n","","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAIa,gBAAgB,GAAG,IAAI,cAAc,CAAS,kBAAkB,EAAE;AAC7E,IAAA,OAAO,EAAE,MAAM,0BAA0B;AAC1C,CAAA;MAEY,aAAa,GAAG,IAAI,cAAc,CAAa,eAAe,EAAE;IAC3E,OAAO,EAAE,MAAK;AACZ,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAEvC,OAAO,CAAC,IAAY,KAAa,CAAA,EAAG,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM;IAC/E,CAAC;AACF,CAAA;AAEK,SAAU,qBAAqB,CAAC,UAAwB,EAAA;AAC5D,IAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE;AAClD;AAGM,SAAU,mBAAmB,CAAC,UAA4B,EAAA;AAC9D,IAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE;AAC/C;;MChBa,WAAW,CAAA;AACN,IAAA,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;AACzB,IAAA,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC;AAExD,IAAA,KAAK,GAAG,IAAI,GAAG,EAAsB;AACrC,IAAA,KAAK,GAAG,IAAI,GAAG,EAAkC;AAE7D,IAAA,GAAG,CAAC,GAAW,EAAA;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACvB,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAe,CAAC;QAC9C;QAEA,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACvB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAA2B;QACtD;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAC5D,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EACnC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,EACxC,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EACtC,KAAK,EAAE,CACR;QAED,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC;AAEzB,QAAA,OAAO,IAAI;IACb;IAEO,SAAS,CAAC,GAA+B,EAAE,QAAkB,EAAA;AAClE,QAAA,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,EAAC,UAAuB,EAAC,CAAC,aAAa;QAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC;QACrC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;AAE3C,QAAA,OAAO,YAAY,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,CACzC,kBAAkB,CAAC,UAAU,CAAC,EAC9B,GAAG,CAAC,MAAK;YACP,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAe,KAAI;AACxC,gBAAA,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,IAAI,CAAC;AAC7B,YAAA,CAAC,CAAC;QACJ,CAAC,CAAC,EACF,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,SAAS,CAAC,EAClC,SAAS,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACjC,GAAG,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3D,CAAC,SAAS,EAAE;IACf;AAEU,IAAA,SAAS,CAAC,IAAY,EAAA;QAC9B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC;QAChD,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC;QAEhD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,WAAW,EAAE,IAAI,CAAC;AAExD,QAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,iBAA+B;QACnE,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;AACzC,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA,CAAA,CAAG,CAAC;QAClF;AAEA,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAA2B,cAAc,CAAC,CAAC;AAC1F,QAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;YAE9C,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAClC,oBAAA,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC1C,oBAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;AAC1D,gBAAA,CAAC,CAAC;gBAEF,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,YAAY,CAAC;YAChD;QACF;QAEA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC;QAC9C,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC;AAE/C,QAAA,OAAO,KAAK;IACd;uGA5EW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAX,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,cADE,MAAM,EAAA,CAAA;;2FACnB,WAAW,EAAA,UAAA,EAAA,CAAA;kBADvB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MCUrB,aAAa,CAAA;AACR,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;IAE3B,GAAG,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,KAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;IACrB,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAEtB,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAK;AACnC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;QAEtB,IAAI,GAAG,EAAE;AACP,YAAA,OAAO,GAAG;QACZ;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AAExB,QAAA,OAAO,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE;AAC5C,IAAA,CAAC,gDAAC;IAEiB,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC;IAC5C,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC;AAElE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC;IACtD;uGAvBW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,oaChB1B,EAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDgBa,aAAa,EAAA,UAAA,EAAA,CAAA;kBAXzB,SAAS;+BACE,SAAS,EAAA,QAAA,EACT,UAAU,EAAA,aAAA,EAEL,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,IAAI,EAAE,KAAK;AACX,wBAAA,mBAAmB,EAAE,QAAQ;AAC9B,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA;;;AEdH;;AAEG;;;;"}
|