@vsn-ux/ngx-gaia 0.6.1 → 0.6.2
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.
|
@@ -4,7 +4,7 @@ import * as i1 from 'lucide-angular';
|
|
|
4
4
|
import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Minus, Check, ChevronUp, ChevronDown } from 'lucide-angular';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
|
|
6
6
|
import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
|
|
7
|
-
import * as i1$
|
|
7
|
+
import * as i1$4 from '@angular/cdk/overlay';
|
|
8
8
|
import { Overlay, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
|
|
9
9
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { Subject, takeUntil, map, merge, filter, Observable, isObservable } from 'rxjs';
|
|
@@ -13,7 +13,9 @@ import * as i1$1 from '@angular/cdk/menu';
|
|
|
13
13
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
14
14
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
15
15
|
import { Router, ResolveStart } from '@angular/router';
|
|
16
|
-
import * as i1$2 from '@angular/cdk/
|
|
16
|
+
import * as i1$2 from '@angular/cdk/a11y';
|
|
17
|
+
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
18
|
+
import * as i1$3 from '@angular/cdk/listbox';
|
|
17
19
|
import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
|
|
18
20
|
|
|
19
21
|
/**
|
|
@@ -1396,11 +1398,12 @@ class GaModalService {
|
|
|
1396
1398
|
skipSelf: true,
|
|
1397
1399
|
});
|
|
1398
1400
|
/** @ignore */
|
|
1399
|
-
openModalsAtThisLevel = [];
|
|
1401
|
+
openModalsAtThisLevel = signal([]);
|
|
1400
1402
|
get activeModals() {
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1403
|
+
if (this.parentModalService) {
|
|
1404
|
+
return this.parentModalService.activeModals;
|
|
1405
|
+
}
|
|
1406
|
+
return this.openModalsAtThisLevel;
|
|
1404
1407
|
}
|
|
1405
1408
|
open(component, ...args) {
|
|
1406
1409
|
let [data] = args;
|
|
@@ -1408,9 +1411,12 @@ class GaModalService {
|
|
|
1408
1411
|
return this.attachContent(component, data, overlayRef);
|
|
1409
1412
|
}
|
|
1410
1413
|
closeAll() {
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
+
this.activeModals.update((modals) => {
|
|
1415
|
+
while (modals.length > 0) {
|
|
1416
|
+
modals.pop()?.close();
|
|
1417
|
+
}
|
|
1418
|
+
return modals;
|
|
1419
|
+
});
|
|
1414
1420
|
}
|
|
1415
1421
|
/** @ignore */
|
|
1416
1422
|
attachContent(component, data, overlayRef) {
|
|
@@ -1419,13 +1425,19 @@ class GaModalService {
|
|
|
1419
1425
|
const modalPortal = new ComponentPortal(component, null, injector);
|
|
1420
1426
|
const result = overlayRef.attach(modalPortal);
|
|
1421
1427
|
modalRef.instance = result.instance;
|
|
1422
|
-
this.activeModals.
|
|
1428
|
+
this.activeModals.update((modals) => {
|
|
1429
|
+
modals.push(modalRef.instance);
|
|
1430
|
+
return modals;
|
|
1431
|
+
});
|
|
1423
1432
|
modalRef.instance
|
|
1424
1433
|
.afterClosed({ closeOnUnsubscribe: false })
|
|
1425
1434
|
.subscribe(() => {
|
|
1426
|
-
const index = this.activeModals.indexOf(modalRef.instance);
|
|
1435
|
+
const index = this.activeModals().indexOf(modalRef.instance);
|
|
1427
1436
|
if (index > -1) {
|
|
1428
|
-
this.activeModals.
|
|
1437
|
+
this.activeModals.update((modals) => {
|
|
1438
|
+
modals.splice(index, 1);
|
|
1439
|
+
return modals;
|
|
1440
|
+
});
|
|
1429
1441
|
}
|
|
1430
1442
|
});
|
|
1431
1443
|
return result.instance;
|
|
@@ -1524,13 +1536,18 @@ class GaModalComponent {
|
|
|
1524
1536
|
closeSubject = new Subject();
|
|
1525
1537
|
overlayRef = inject(OverlayRef);
|
|
1526
1538
|
destroyRef = inject(DestroyRef);
|
|
1539
|
+
_modalService = inject(GaModalService);
|
|
1527
1540
|
router = inject(Router, { optional: true });
|
|
1528
1541
|
globalOptions = inject(GaModalOptions, { optional: true });
|
|
1529
1542
|
options = this.createOptions();
|
|
1543
|
+
trapfocus = inject(CdkTrapFocus);
|
|
1530
1544
|
data = inject(GA_MODAL_DATA);
|
|
1531
1545
|
labelledBy = signal(null);
|
|
1532
1546
|
describedBy = signal(null);
|
|
1547
|
+
modalStackIndex = computed(() => this._modalService.activeModals().length - 1);
|
|
1533
1548
|
constructor() {
|
|
1549
|
+
this.trapfocus.enabled = true;
|
|
1550
|
+
this.trapfocus.autoCapture = true;
|
|
1534
1551
|
// Using next render to delay the initialization, so that there is more time
|
|
1535
1552
|
// to set the modal options
|
|
1536
1553
|
afterNextRender({
|
|
@@ -1605,7 +1622,7 @@ class GaModalComponent {
|
|
|
1605
1622
|
};
|
|
1606
1623
|
}
|
|
1607
1624
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'" }, classAttribute: "ga-modal" }, ngImport: i0, template: '', isInline: true });
|
|
1625
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'", "style.margin-top": "'calc(var(--ga-base-scaling-factor, 1)*4rem*'+modalStackIndex()+')'" }, classAttribute: "ga-modal" }, hostDirectives: [{ directive: i1$2.CdkTrapFocus }], ngImport: i0, template: '', isInline: true });
|
|
1609
1626
|
}
|
|
1610
1627
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalComponent, decorators: [{
|
|
1611
1628
|
type: Component,
|
|
@@ -1623,7 +1640,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1623
1640
|
'[class.ga-modal--danger]': "options.type === 'danger'",
|
|
1624
1641
|
'[class.ga-modal--warning]': "options.type === 'warning'",
|
|
1625
1642
|
'[class.ga-modal--success]': "options.type === 'success'",
|
|
1643
|
+
'[style.margin-top]': `'calc(var(--ga-base-scaling-factor, 1)*4rem*'+modalStackIndex()+')'`,
|
|
1626
1644
|
},
|
|
1645
|
+
hostDirectives: [CdkTrapFocus],
|
|
1627
1646
|
}]
|
|
1628
1647
|
}], ctorParameters: () => [] });
|
|
1629
1648
|
|
|
@@ -2107,7 +2126,7 @@ class GaOptionComponent {
|
|
|
2107
2126
|
}
|
|
2108
2127
|
}
|
|
2109
2128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2110
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$
|
|
2129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$3.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n @if (selectComponent.multiple()) {\n <ga-checkbox\n [checked]=\"selected()\"\n [disabled]=\"disabled()\"\n aria-hidden=\"true\"\n style=\"pointer-events: none\"\n tabindex=\"-1\"\n />\n } @else {\n <ga-radio-button\n [checked]=\"selected()\"\n [disabled]=\"disabled()\"\n aria-hidden=\"true\"\n style=\"pointer-events: none\"\n tabindex=\"-1\"\n />\n }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
|
|
2111
2130
|
}
|
|
2112
2131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, decorators: [{
|
|
2113
2132
|
type: Component,
|
|
@@ -2438,7 +2457,7 @@ class GaSelectComponent {
|
|
|
2438
2457
|
provide: GA_FORM_CONTROL,
|
|
2439
2458
|
useExisting: forwardRef(() => GaSelectComponent),
|
|
2440
2459
|
},
|
|
2441
|
-
], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$
|
|
2460
|
+
], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$4.CdkOverlayOrigin }], ngImport: i0, template: "@if (leftIcon()) {\n <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n @if (hasValue() && (!textValue() || multiple())) {\n @if (customSelectValue()) {\n <div class=\"ga-select__value\">\n <ng-content select=\"ga-select-value\" />\n </div>\n } @else {\n <ga-select-default-value />\n }\n } @else if (!searchable()) {\n <div class=\"ga-select__placeholder\">\n {{ placeholder() }}\n </div>\n }\n\n @if (searchable()) {\n <input\n #inputSearch\n type=\"text\"\n class=\"ga-select__input\"\n aria-autocomplete=\"list\"\n [value]=\"textValue()\"\n (input)=\"open(); textValue.set(inputSearch.value)\"\n (click)=\"open(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"cdkListbox().id\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [placeholder]=\"hasValue() ? '' : placeholder()\"\n (keydown)=\"onInputKeyDown($event)\"\n tabindex=\"-1\"\n />\n }\n</div>\n\n<div class=\"ga-select__suffix\">\n <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (overlayOutsideClick)=\"close()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
|
|
2442
2461
|
}
|
|
2443
2462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, decorators: [{
|
|
2444
2463
|
type: Component,
|
|
@@ -2515,7 +2534,7 @@ class GaSpinnerComponent {
|
|
|
2515
2534
|
circumference = computed(() => 2 * Math.PI * this.radius());
|
|
2516
2535
|
arcCircumference = computed(() => this.circumference() * 0.25);
|
|
2517
2536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2518
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSpinnerComponent, isStandalone: true, selector: "ga-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-spinner" }, ngImport: i0, template: `
|
|
2537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSpinnerComponent, isStandalone: true, selector: "ga-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.mode": "'indeterminate'" }, classAttribute: "ga-spinner" }, ngImport: i0, template: `
|
|
2519
2538
|
<svg
|
|
2520
2539
|
[attr.width]="size()"
|
|
2521
2540
|
[attr.height]="size()"
|
|
@@ -2575,6 +2594,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2575
2594
|
</svg>
|
|
2576
2595
|
`, encapsulation: ViewEncapsulation.None, host: {
|
|
2577
2596
|
class: 'ga-spinner',
|
|
2597
|
+
role: 'progressbar',
|
|
2598
|
+
'[attr.aria-valuemin]': '0',
|
|
2599
|
+
'[attr.aria-valuemax]': '100',
|
|
2600
|
+
'[attr.mode]': "'indeterminate'",
|
|
2601
|
+
tabindex: '-1',
|
|
2578
2602
|
}, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"] }]
|
|
2579
2603
|
}] });
|
|
2580
2604
|
|
|
@@ -2610,7 +2634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2610
2634
|
class GaSelectDropdownComponent {
|
|
2611
2635
|
loading = input(false, { transform: booleanAttribute });
|
|
2612
2636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$
|
|
2637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$3.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n <ga-select-dropdown-spinner />\n} @else {\n <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }] });
|
|
2614
2638
|
}
|
|
2615
2639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
|
|
2616
2640
|
type: Component,
|