@design-system-rte/angular 0.15.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/banner/banner.component.mjs +3 -3
- package/esm2022/lib/components/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs +1 -1
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +2 -2
- package/esm2022/lib/components/button/button.component.mjs +2 -2
- package/esm2022/lib/components/card/card.component.mjs +40 -0
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/components/checkbox-group/checkbox-group.component.mjs +3 -3
- package/esm2022/lib/components/divider/divider.component.mjs +3 -3
- package/esm2022/lib/components/icon-button/icon-button.component.mjs +13 -3
- package/esm2022/lib/components/icon-button-toggle/icon-button-toggle.component.mjs +1 -1
- package/esm2022/lib/components/link/link.component.mjs +3 -3
- package/esm2022/lib/components/modal/modal-trigger/modal-trigger.directive.mjs +31 -0
- package/esm2022/lib/components/modal/modal.component.mjs +48 -0
- package/esm2022/lib/components/modal/modal.directive.mjs +118 -0
- package/esm2022/lib/components/modal/modal.module.mjs +17 -0
- package/esm2022/lib/components/popover/popover.component.mjs +11 -28
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/radio-button-group/radio-button-group.component.mjs +3 -3
- package/esm2022/lib/components/side-nav/base-side-nav/base-side-nav.component.mjs +63 -0
- package/esm2022/lib/components/side-nav/nav-item/nav-item.component.mjs +58 -0
- package/esm2022/lib/components/side-nav/nav-menu/nav-menu.component.mjs +90 -0
- package/esm2022/lib/components/side-nav/side-nav.component.mjs +96 -0
- package/esm2022/lib/components/text-input/text-input.component.mjs +3 -3
- package/esm2022/lib/components/textarea/textarea.component.mjs +3 -3
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/lib/components/tooltip/tooltip.directive.mjs +11 -8
- package/esm2022/lib/services/focus-trap.service.mjs +64 -0
- package/esm2022/lib/services/overlay.service.mjs +19 -4
- package/esm2022/public-api.mjs +6 -1
- package/fesm2022/design-system-rte-angular.mjs +727 -153
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/badge/badge.directive.d.ts +1 -1
- package/lib/components/card/card.component.d.ts +19 -0
- package/lib/components/chip/chip.component.d.ts +1 -1
- package/lib/components/icon-button/icon-button.component.d.ts +8 -2
- package/lib/components/icon-button-toggle/icon-button-toggle.component.d.ts +1 -1
- package/lib/components/modal/modal-trigger/modal-trigger.directive.d.ts +11 -0
- package/lib/components/modal/modal.component.d.ts +28 -0
- package/lib/components/modal/modal.directive.d.ts +40 -0
- package/lib/components/modal/modal.module.d.ts +8 -0
- package/lib/components/popover/popover.component.d.ts +4 -5
- package/lib/components/side-nav/base-side-nav/base-side-nav.component.d.ts +26 -0
- package/lib/components/side-nav/nav-item/nav-item.component.d.ts +28 -0
- package/lib/components/side-nav/nav-menu/nav-menu.component.d.ts +42 -0
- package/lib/components/side-nav/side-nav.component.d.ts +33 -0
- package/lib/components/split-button/split-button.component.d.ts +1 -1
- package/lib/components/text-input/text-input.component.d.ts +3 -3
- package/lib/components/tooltip/tooltip.directive.d.ts +4 -3
- package/lib/services/focus-trap.service.d.ts +17 -0
- package/lib/services/overlay.service.d.ts +2 -1
- package/package.json +2 -2
- package/public-api.d.ts +5 -0
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from "@angular/common";
|
|
2
2
|
import { Component, ElementRef, inject, input, output } from "@angular/core";
|
|
3
|
-
import {
|
|
4
|
-
import { TAB_KEY } from "@design-system-rte/core/constants/keyboard/keyboard.constants";
|
|
3
|
+
import { FocusTrapService } from "../../services/focus-trap.service";
|
|
5
4
|
import { ButtonComponent } from "../button/button.component";
|
|
6
5
|
import * as i0 from "@angular/core";
|
|
7
6
|
import * as i1 from "@angular/common";
|
|
@@ -19,44 +18,28 @@ export class PopoverComponent {
|
|
|
19
18
|
this.clickPrimaryButton = output();
|
|
20
19
|
this.clickSecondaryButton = output();
|
|
21
20
|
this.elementRef = inject(ElementRef);
|
|
22
|
-
this.
|
|
21
|
+
this.focusTrap = inject(FocusTrapService);
|
|
23
22
|
}
|
|
24
23
|
ngAfterViewInit() {
|
|
25
|
-
this.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
if (event.key === TAB_KEY) {
|
|
29
|
-
if (this.isOpen()) {
|
|
30
|
-
const focusable = this.element.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
|
|
31
|
-
const first = focusable[0];
|
|
32
|
-
const last = focusable[focusable.length - 1];
|
|
33
|
-
if (event.shiftKey && document.activeElement === first) {
|
|
34
|
-
event.preventDefault();
|
|
35
|
-
last.focus();
|
|
36
|
-
}
|
|
37
|
-
else if (!event.shiftKey && document.activeElement === last) {
|
|
38
|
-
event.preventDefault();
|
|
39
|
-
first.focus();
|
|
40
|
-
}
|
|
41
|
-
}
|
|
24
|
+
const native = this.elementRef?.nativeElement;
|
|
25
|
+
if (native) {
|
|
26
|
+
this.focusTrap.activate(native);
|
|
42
27
|
}
|
|
43
28
|
}
|
|
29
|
+
ngOnDestroy() {
|
|
30
|
+
this.focusTrap.deactivate();
|
|
31
|
+
}
|
|
44
32
|
handleClickPrimaryButton() {
|
|
45
33
|
this.clickPrimaryButton.emit();
|
|
46
34
|
}
|
|
47
35
|
handleClickSecondaryButton() {
|
|
48
36
|
this.clickSecondaryButton.emit();
|
|
49
37
|
}
|
|
50
|
-
focusFirstElement() {
|
|
51
|
-
const focusable = this.element.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
|
|
52
|
-
if (focusable.length > 0)
|
|
53
|
-
focusable[0].focus();
|
|
54
|
-
}
|
|
55
38
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "rte-popover", inputs: { primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, coordinates: { classPropertyName: "coordinates", publicName: "coordinates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, ngImport: i0, template: "<div\n #root\n class=\"rte-popover\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.data-arrow]=\"arrow()\"\n [attr.data-position]=\"position()\"\n [attr.data-alignment]=\"alignment()\"\n [attr.data-open]=\"isOpen()\"\n [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "rte-popover", inputs: { primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, coordinates: { classPropertyName: "coordinates", publicName: "coordinates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, ngImport: i0, template: "<div\n #root\n class=\"rte-popover\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.data-arrow]=\"arrow()\"\n [attr.data-position]=\"position()\"\n [attr.data-alignment]=\"alignment()\"\n [attr.data-open]=\"isOpen()\"\n [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n>\n <div class=\"popoverInner\">\n <div class=\"popoverContentContainer\">\n <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n <div class=\"popoverContent\">{{ content() }}</div>\n </div>\n <div class=\"popoverButtonContainer\">\n <button *ngIf=\"secondaryButtonLabel()\"\n rteButton\n rteButtonVariant=\"secondary\"\n (click)=\"handleClickSecondaryButton()\"\n >{{ secondaryButtonLabel() }}</button>\n <button rteButton\n rteButtonVariant=\"primary\"\n (click)=\"handleClickPrimaryButton()\"\n >{{ primaryButtonLabel() }}</button>\n </div>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize"] }] }); }
|
|
57
40
|
}
|
|
58
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
59
42
|
type: Component,
|
|
60
|
-
args: [{ selector: "rte-popover", imports: [CommonModule, ButtonComponent], standalone: true, template: "<div\n #root\n class=\"rte-popover\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.data-arrow]=\"arrow()\"\n [attr.data-position]=\"position()\"\n [attr.data-alignment]=\"alignment()\"\n [attr.data-open]=\"isOpen()\"\n [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n
|
|
43
|
+
args: [{ selector: "rte-popover", imports: [CommonModule, ButtonComponent], standalone: true, template: "<div\n #root\n class=\"rte-popover\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.data-arrow]=\"arrow()\"\n [attr.data-position]=\"position()\"\n [attr.data-alignment]=\"alignment()\"\n [attr.data-open]=\"isOpen()\"\n [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n>\n <div class=\"popoverInner\">\n <div class=\"popoverContentContainer\">\n <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n <div class=\"popoverContent\">{{ content() }}</div>\n </div>\n <div class=\"popoverButtonContainer\">\n <button *ngIf=\"secondaryButtonLabel()\"\n rteButton\n rteButtonVariant=\"secondary\"\n (click)=\"handleClickSecondaryButton()\"\n >{{ secondaryButtonLabel() }}</button>\n <button rteButton\n rteButtonVariant=\"primary\"\n (click)=\"handleClickPrimaryButton()\"\n >{{ primaryButtonLabel() }}</button>\n </div>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"] }]
|
|
61
44
|
}], ctorParameters: () => [] });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kcy1ydGUtbGliL3NyYy9saWIvY29tcG9uZW50cy9wb3BvdmVyL3BvcG92ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvcG9wb3Zlci9wb3BvdmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBNEIsTUFBTSxlQUFlLENBQUM7QUFHdkcsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDckUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDOzs7QUFTN0QsTUFBTSxPQUFPLGdCQUFnQjtJQWtCM0I7UUFqQlMsdUJBQWtCLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQzlDLGFBQVEsR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFvQyxDQUFDO1FBQzlELGNBQVMsR0FBRyxLQUFLLEVBQW9CLENBQUM7UUFDdEMsWUFBTyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQzFCLFVBQUssR0FBRyxLQUFLLEVBQVcsQ0FBQztRQUN6QixVQUFLLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDeEIseUJBQW9CLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDdkMsV0FBTSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUMvQixnQkFBVyxHQUFHLEtBQUssQ0FBZ0MsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBRXhFLHVCQUFrQixHQUFHLE1BQU0sRUFBUSxDQUFDO1FBQ3BDLHlCQUFvQixHQUFHLE1BQU0sRUFBUSxDQUFDO1FBRXZDLGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFaEMsY0FBUyxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBRTlCLENBQUM7SUFFaEIsZUFBZTtRQUNiLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsYUFBYSxDQUFDO1FBQzlDLElBQUksTUFBTSxFQUFFLENBQUM7WUFDWCxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsQyxDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCx3QkFBd0I7UUFDdEIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2pDLENBQUM7SUFDRCwwQkFBMEI7UUFDeEIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQ25DLENBQUM7K0dBcENVLGdCQUFnQjttR0FBaEIsZ0JBQWdCLGszQ0NkN0IsczhCQTZCQSxpL0ZEcEJZLFlBQVksbUlBQUUsZUFBZTs7NEZBSzVCLGdCQUFnQjtrQkFQNUIsU0FBUzsrQkFDRSxhQUFhLFdBQ2QsQ0FBQyxZQUFZLEVBQUUsZUFBZSxDQUFDLGNBQzVCLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIGluamVjdCwgaW5wdXQsIG91dHB1dCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFBvcG92ZXJBbGlnbm1lbnQsIFBvcG92ZXJQb3NpdGlvbiB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL3BvcG92ZXIvcG9wb3Zlci5pbnRlcmZhY2VcIjtcblxuaW1wb3J0IHsgRm9jdXNUcmFwU2VydmljZSB9IGZyb20gXCIuLi8uLi9zZXJ2aWNlcy9mb2N1cy10cmFwLnNlcnZpY2VcIjtcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9idXR0b24vYnV0dG9uLmNvbXBvbmVudFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLXBvcG92ZXJcIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQnV0dG9uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9wb3BvdmVyLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vcG9wb3Zlci5jb21wb25lbnQuc2Nzc1wiLFxufSlcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgcmVhZG9ubHkgcHJpbWFyeUJ1dHRvbkxhYmVsID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICByZWFkb25seSBwb3NpdGlvbiA9IGlucHV0LnJlcXVpcmVkPEV4Y2x1ZGU8UG9wb3ZlclBvc2l0aW9uLCBcImF1dG9cIj4+KCk7XG4gIHJlYWRvbmx5IGFsaWdubWVudCA9IGlucHV0PFBvcG92ZXJBbGlnbm1lbnQ+KCk7XG4gIHJlYWRvbmx5IGNvbnRlbnQgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGFycm93ID0gaW5wdXQ8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgdGl0bGUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHNlY29uZGFyeUJ1dHRvbkxhYmVsID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBpc09wZW4gPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGNvb3JkaW5hdGVzID0gaW5wdXQ8eyB0b3A6IG51bWJlcjsgbGVmdDogbnVtYmVyIH0+KHsgdG9wOiAwLCBsZWZ0OiAwIH0pO1xuXG4gIHJlYWRvbmx5IGNsaWNrUHJpbWFyeUJ1dHRvbiA9IG91dHB1dDx2b2lkPigpO1xuICByZWFkb25seSBjbGlja1NlY29uZGFyeUJ1dHRvbiA9IG91dHB1dDx2b2lkPigpO1xuXG4gIHByaXZhdGUgZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICBwcml2YXRlIGZvY3VzVHJhcCA9IGluamVjdChGb2N1c1RyYXBTZXJ2aWNlKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGNvbnN0IG5hdGl2ZSA9IHRoaXMuZWxlbWVudFJlZj8ubmF0aXZlRWxlbWVudDtcbiAgICBpZiAobmF0aXZlKSB7XG4gICAgICB0aGlzLmZvY3VzVHJhcC5hY3RpdmF0ZShuYXRpdmUpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZm9jdXNUcmFwLmRlYWN0aXZhdGUoKTtcbiAgfVxuXG4gIGhhbmRsZUNsaWNrUHJpbWFyeUJ1dHRvbigpIHtcbiAgICB0aGlzLmNsaWNrUHJpbWFyeUJ1dHRvbi5lbWl0KCk7XG4gIH1cbiAgaGFuZGxlQ2xpY2tTZWNvbmRhcnlCdXR0b24oKSB7XG4gICAgdGhpcy5jbGlja1NlY29uZGFyeUJ1dHRvbi5lbWl0KCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgI3Jvb3RcbiAgY2xhc3M9XCJydGUtcG9wb3ZlclwiXG4gIHJvbGU9XCJkaWFsb2dcIlxuICBhcmlhLW1vZGFsPVwidHJ1ZVwiXG4gIFthdHRyLmRhdGEtYXJyb3ddPVwiYXJyb3coKVwiXG4gIFthdHRyLmRhdGEtcG9zaXRpb25dPVwicG9zaXRpb24oKVwiXG4gIFthdHRyLmRhdGEtYWxpZ25tZW50XT1cImFsaWdubWVudCgpXCJcbiAgW2F0dHIuZGF0YS1vcGVuXT1cImlzT3BlbigpXCJcbiAgW3N0eWxlXT1cInsgdG9wOiBjb29yZGluYXRlcygpLnRvcCArICdweCcsIGxlZnQ6IGNvb3JkaW5hdGVzKCkubGVmdCArICdweCcgfVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJwb3BvdmVySW5uZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwicG9wb3ZlckNvbnRlbnRDb250YWluZXJcIj5cbiAgICAgIDxkaXYgKm5nSWY9XCJ0aXRsZVwiIGNsYXNzPVwicG9wb3ZlclRpdGxlXCI+e3sgdGl0bGUoKSB9fTwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBvcG92ZXJDb250ZW50XCI+e3sgY29udGVudCgpIH19PC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInBvcG92ZXJCdXR0b25Db250YWluZXJcIj5cbiAgICAgIDxidXR0b24gKm5nSWY9XCJzZWNvbmRhcnlCdXR0b25MYWJlbCgpXCJcbiAgICAgICAgcnRlQnV0dG9uXG4gICAgICAgIHJ0ZUJ1dHRvblZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlQ2xpY2tTZWNvbmRhcnlCdXR0b24oKVwiXG4gICAgICA+e3sgc2Vjb25kYXJ5QnV0dG9uTGFiZWwoKSB9fTwvYnV0dG9uPlxuICAgICAgPGJ1dHRvbiBydGVCdXR0b25cbiAgICAgICAgcnRlQnV0dG9uVmFyaWFudD1cInByaW1hcnlcIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlQ2xpY2tQcmltYXJ5QnV0dG9uKClcIlxuICAgICAgPnt7IHByaW1hcnlCdXR0b25MYWJlbCgpIH19PC9idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -15,10 +15,10 @@ export class RadioButtonComponent {
|
|
|
15
15
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger-default);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger-default)}.rte-radio-button.error:before{background:var(--content-danger-default)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger-default)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
|
|
22
|
+
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger-default);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger-default)}.rte-radio-button.error:before{background:var(--content-danger-default)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger-default)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
|
|
23
23
|
}] });
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL3JhZGlvLWJ1dHRvbi9yYWRpby1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSx3RUFBd0UsQ0FBQzs7O0FBVW5HLE1BQU0sT0FBTyxvQkFBb0I7SUFSakM7UUFTVyxVQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2xCLGNBQVMsR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdEIsY0FBUyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN4QixhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLFVBQUssR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckIsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQyxjQUFTLEdBQUcsU0FBUyxDQUFDO1FBRWIsZ0JBQVcsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0tBQzNFOytHQVZZLG9CQUFvQjttR0FBcEIsb0JBQW9CLGsxQkNaakMscXdCQXdCQSx3ckZEbEJZLFlBQVk7OzRGQU1YLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxrQkFBa0IsV0FDbkIsQ0FBQyxZQUFZLENBQUMsY0FDWCxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgbGFiZWxTaXplIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb25zdGFudHNcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1yYWRpby1idXR0b25cIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBSYWRpb0J1dHRvbkNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGxhYmVsID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IGdyb3VwTmFtZSA9IGlucHV0KFwiXCIpO1xuICByZWFkb25seSBzaG93TGFiZWwgPSBpbnB1dCh0cnVlKTtcbiAgcmVhZG9ubHkgZGlzYWJsZWQgPSBpbnB1dChmYWxzZSk7XG4gIHJlYWRvbmx5IGVycm9yID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSByZWFkT25seSA9IGlucHV0KGZhbHNlKTtcbiAgbGFiZWxTaXplID0gbGFiZWxTaXplO1xuXG4gIHJlYWRvbmx5IGlzRGlzcGxheWVkID0gY29tcHV0ZWQoKCkgPT4gISh0aGlzLmRpc2FibGVkKCkgJiYgdGhpcy5lcnJvcigpKSk7XG59XG4iLCIgICAgPGRpdiAqbmdJZj1cImlzRGlzcGxheWVkKClcIiBjbGFzcz1cInJ0ZS1yYWRpby1idXR0b24tY29udGFpbmVyXCI+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgICAgICAgIGNsYXNzPVwicnRlLXJhZGlvLWJ1dHRvblwiXG4gICAgICAgICAgICBbaWRdPVwibGFiZWwoKVwiXG4gICAgICAgICAgICBbdmFsdWVdPVwibGFiZWwoKVwiXG4gICAgICAgICAgICBbc2l6ZV09XCJsYWJlbFNpemVcIlxuICAgICAgICAgICAgW25hbWVdPVwiZ3JvdXBOYW1lKClcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieydlcnJvcic6IGVycm9yKCksICdyZWFkLW9ubHknOiByZWFkT25seSgpfVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxsYWJlbCBcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd0xhYmVsKClcIiBcbiAgICAgICAgICAgIGNsYXNzPVwicnRlLXJhZGlvLWJ1dHRvbi1sYWJlbFwiIFxuICAgICAgICAgICAgW2Zvcl09XCJsYWJlbCgpXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICAgICAnZXJyb3InOiBlcnJvcigpLFxuICAgICAgICAgICAgICAgICdyZWFkLW9ubHknOiByZWFkT25seSgpLFxuICAgICAgICAgICAgICAgICdkaXNhYmxlZCc6IGRpc2FibGVkKClcbiAgICAgICAgICAgIH1cIlxuICAgICAgICA+XG4gICAgICAgICAgICB7eyBsYWJlbCgpIH19XG4gICAgICAgIDwvbGFiZWw+XG4gICAgPC9kaXY+XG4iXX0=
|
|
@@ -20,10 +20,10 @@ export class RadioButtonGroupComponent {
|
|
|
20
20
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger-default);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
27
|
+
args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger-default);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
28
28
|
}] });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL3JhZGlvLWJ1dHRvbi1ncm91cC9yYWRpby1idXR0b24tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvcmFkaW8tYnV0dG9uLWdyb3VwL3JhZGlvLWJ1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXBGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHdDQUF3QyxDQUFDOzs7QUFVOUUsTUFBTSxPQUFPLHlCQUF5QjtJQVJ0QztRQVNXLGNBQVMsR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdEIsVUFBSyxHQUFHLEtBQUssQ0FBVyxFQUFFLENBQUMsQ0FBQztRQUM1QixjQUFTLEdBQUcsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ2hDLG1CQUFjLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdCLGVBQVUsR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdkIsbUJBQWMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsa0JBQWEsR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDMUIsaUJBQVksR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUIsaUJBQVksR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDekIsVUFBSyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFeEIsZ0JBQVcsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0tBQzNFOytHQWZZLHlCQUF5QjttR0FBekIseUJBQXlCLCtxRENidEMsd3hDQTRDTSw2aEVEckNNLFlBQVksOFZBQUUsb0JBQW9COzs0RkFNakMseUJBQXlCO2tCQVJyQyxTQUFTOytCQUNFLHdCQUF3QixXQUN6QixDQUFDLFlBQVksRUFBRSxvQkFBb0IsQ0FBQyxjQUNqQyxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBSYWRpb0J1dHRvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9yYWRpby1idXR0b24vcmFkaW8tYnV0dG9uLmNvbXBvbmVudFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLXJhZGlvLWJ1dHRvbi1ncm91cFwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBSYWRpb0J1dHRvbkNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcmFkaW8tYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vcmFkaW8tYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBSYWRpb0J1dHRvbkdyb3VwQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgZ3JvdXBOYW1lID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IGl0ZW1zID0gaW5wdXQ8c3RyaW5nW10+KFtdKTtcbiAgcmVhZG9ubHkgZGlyZWN0aW9uID0gaW5wdXQoXCJob3Jpem9udGFsXCIpO1xuICByZWFkb25seSBzaG93SXRlbXNMYWJlbCA9IGlucHV0KHRydWUpO1xuICByZWFkb25seSBncm91cFRpdGxlID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHNob3dHcm91cFRpdGxlID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBncm91cEhlbHBUZXh0ID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHNob3dIZWxwVGV4dCA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgZXJyb3JNZXNzYWdlID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IGVycm9yID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgcmVhZE9ubHkgPSBpbnB1dChmYWxzZSk7XG5cbiAgcmVhZG9ubHkgaXNEaXNwbGF5ZWQgPSBjb21wdXRlZCgoKSA9PiAhKHRoaXMuZGlzYWJsZWQoKSAmJiB0aGlzLmVycm9yKCkpKTtcbn1cbiIsIjxkaXYgIFxuICAgICpuZ0lmPVwiaXNEaXNwbGF5ZWQoKVwiXG4gICAgY2xhc3M9XCJyYWRpby1idXR0b24tZ3JvdXAtY29udGFpbmVyXCI+XG4gICAgPGRpdlxuICAgICAgICBjbGFzcz1cInJhZGlvLWJ1dHRvbi1ncm91cC1oZWFkZXJcIlxuICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAnZGlzYWJsZWQnOiBkaXNhYmxlZCgpLFxuICAgICAgICAgICAgJ2Vycm9yJzogZXJyb3IoKSxcbiAgICAgICAgICAgICdyZWFkLW9ubHknOiByZWFkT25seSgpLFxuICAgICAgICB9XCI+XG4gICAgICAgIDxoM1xuICAgICAgICAgICAgKm5nSWY9XCJzaG93R3JvdXBUaXRsZSgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiZ3JvdXAtdGl0bGVcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAge3sgZ3JvdXBUaXRsZSgpIH19XG4gICAgICAgIDwvaDM+XG4gICAgICAgIDxwXG4gICAgICAgICAgICAqbmdJZj1cInNob3dIZWxwVGV4dCgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiZ3JvdXAtaGVscC10ZXh0XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgIHt7IGdyb3VwSGVscFRleHQoKSB9fVxuXG4gICAgICAgIDwvcD5cbiAgICAgICAgPHBcbiAgICAgICAgICAgICpuZ0lmPVwiZXJyb3IoKVwiXG4gICAgICAgICAgICBjbGFzcz1cImdyb3VwLWVycm9yLW1lc3NhZ2VcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAge3sgZXJyb3JNZXNzYWdlKCkgfX1cbiAgICAgICAgPC9wPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJyYWRpby1idXR0b24tZ3JvdXBcIiBcbiAgICAgICAgW25nQ2xhc3NdPVwieydob3Jpem9udGFsJzogZGlyZWN0aW9uKCkgPT09ICdob3Jpem9udGFsJywgJ3ZlcnRpY2FsJzogZGlyZWN0aW9uKCkgPT09ICd2ZXJ0aWNhbCd9XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgXG4gICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zKClcIj5cbiAgICAgICAgICAgIDxydGUtcmFkaW8tYnV0dG9uXG4gICAgICAgICAgICAgICAgW2xhYmVsXT1cIml0ZW1cIlxuICAgICAgICAgICAgICAgIFtncm91cE5hbWVdPVwiZ3JvdXBOYW1lKClcIlxuICAgICAgICAgICAgICAgIFtzaG93TGFiZWxdPVwic2hvd0l0ZW1zTGFiZWwoKVwiXG4gICAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxuICAgICAgICAgICAgICAgIFtlcnJvcl09XCJlcnJvcigpXCJcbiAgICAgICAgICAgICAgICBbcmVhZE9ubHldPVwicmVhZE9ubHkoKVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, ElementRef, inject, input, viewChild, } from "@angular/core";
|
|
3
|
+
import { sideNavCollapsedSize, sideNavPanelSize } from "@design-system-rte/core/components/side-nav/side-nav.constants";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
export class BaseSideNavComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
9
|
+
this.elementRef = inject((ElementRef));
|
|
10
|
+
this.contentRef = viewChild("contentRef");
|
|
11
|
+
this.collapsedSize = sideNavCollapsedSize;
|
|
12
|
+
this.panelSize = sideNavPanelSize;
|
|
13
|
+
this.size = input("m");
|
|
14
|
+
this.appearance = input("brand");
|
|
15
|
+
this.collapsed = input(false);
|
|
16
|
+
this.showHeader = input(true);
|
|
17
|
+
this.showFooter = input(true);
|
|
18
|
+
this.minWidth = computed(() => {
|
|
19
|
+
return this.collapsed() ? `${this.collapsedSize}px` : `${this.panelSize[this.size()]}px`;
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
ngAfterViewInit() {
|
|
23
|
+
this.setupResizeObserver();
|
|
24
|
+
}
|
|
25
|
+
ngOnDestroy() {
|
|
26
|
+
this.cleanupResizeObserver();
|
|
27
|
+
}
|
|
28
|
+
setupResizeObserver() {
|
|
29
|
+
const containerEl = this.elementRef.nativeElement;
|
|
30
|
+
const contentEl = this.contentRef()?.nativeElement;
|
|
31
|
+
if (!containerEl || !contentEl) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
const setHeightVar = () => {
|
|
35
|
+
const height = contentEl.offsetHeight;
|
|
36
|
+
containerEl.style.setProperty("--content-height", `${height}px`);
|
|
37
|
+
};
|
|
38
|
+
this.resizeHandler = setHeightVar;
|
|
39
|
+
setHeightVar();
|
|
40
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
41
|
+
setHeightVar();
|
|
42
|
+
});
|
|
43
|
+
this.resizeObserver.observe(contentEl);
|
|
44
|
+
window.addEventListener("resize", setHeightVar);
|
|
45
|
+
}
|
|
46
|
+
cleanupResizeObserver() {
|
|
47
|
+
if (this.resizeObserver) {
|
|
48
|
+
this.resizeObserver.disconnect();
|
|
49
|
+
this.resizeObserver = undefined;
|
|
50
|
+
}
|
|
51
|
+
if (this.resizeHandler) {
|
|
52
|
+
window.removeEventListener("resize", this.resizeHandler);
|
|
53
|
+
this.resizeHandler = undefined;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BaseSideNavComponent, isStandalone: true, selector: "rte-base-side-nav", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-nav-container\">\n <nav class=\"side-nav\" [ngClass]=\"{'collapsed': collapsed(), 'appearance': appearance()}\" [style.min-width]=\"minWidth()\">\n @if (showHeader()) {\n <div class=\"side-nav-header\">\n <ng-content select=\"[side-nav-header]\"></ng-content>\n </div>\n }\n\n <div class=\"side-nav-body\">\n <ng-content select=\"[side-nav-body]\"></ng-content>\n </div>\n\n @if (showFooter()) {\n <div class=\"side-nav-footer\">\n <ng-content select=\"[side-nav-footer]\"></ng-content>\n </div>\n }\n </nav>\n <div #contentRef class=\"side-nav-content\">\n <ng-content select=\"[side-nav-content]\"></ng-content>\n </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.side-nav-container{height:auto;padding:0;position:relative;display:flex;align-items:stretch;flex:1}.side-nav-content{flex:1 1 auto;min-width:0;overflow-y:auto}.side-nav{background-color:var(--background-brand-navigation-default);flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column;gap:0px;box-sizing:border-box;border-radius:0;transition:min-width .3s;color:var(--content-brand-navigation-default);max-height:var(--content-height)}.side-nav.neutral{background-color:var(--background-neutral-navigation-default);color:var(--content-secondary)}.side-nav-header{align-items:center;justify-content:space-between;width:100%;box-sizing:border-box}.side-nav-body{width:100%;box-sizing:border-box;flex:1;overflow-y:auto;min-height:0}.side-nav-footer{align-items:center;justify-content:space-between;box-sizing:border-box;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
58
|
+
}
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseSideNavComponent, decorators: [{
|
|
60
|
+
type: Component,
|
|
61
|
+
args: [{ selector: "rte-base-side-nav", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"side-nav-container\">\n <nav class=\"side-nav\" [ngClass]=\"{'collapsed': collapsed(), 'appearance': appearance()}\" [style.min-width]=\"minWidth()\">\n @if (showHeader()) {\n <div class=\"side-nav-header\">\n <ng-content select=\"[side-nav-header]\"></ng-content>\n </div>\n }\n\n <div class=\"side-nav-body\">\n <ng-content select=\"[side-nav-body]\"></ng-content>\n </div>\n\n @if (showFooter()) {\n <div class=\"side-nav-footer\">\n <ng-content select=\"[side-nav-footer]\"></ng-content>\n </div>\n }\n </nav>\n <div #contentRef class=\"side-nav-content\">\n <ng-content select=\"[side-nav-content]\"></ng-content>\n </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.side-nav-container{height:auto;padding:0;position:relative;display:flex;align-items:stretch;flex:1}.side-nav-content{flex:1 1 auto;min-width:0;overflow-y:auto}.side-nav{background-color:var(--background-brand-navigation-default);flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column;gap:0px;box-sizing:border-box;border-radius:0;transition:min-width .3s;color:var(--content-brand-navigation-default);max-height:var(--content-height)}.side-nav.neutral{background-color:var(--background-neutral-navigation-default);color:var(--content-secondary)}.side-nav-header{align-items:center;justify-content:space-between;width:100%;box-sizing:border-box}.side-nav-body{width:100%;box-sizing:border-box;flex:1;overflow-y:auto;min-height:0}.side-nav-footer{align-items:center;justify-content:space-between;box-sizing:border-box;width:100%}\n"] }]
|
|
62
|
+
}] });
|
|
63
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1zaWRlLW5hdi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kcy1ydGUtbGliL3NyYy9saWIvY29tcG9uZW50cy9zaWRlLW5hdi9iYXNlLXNpZGUtbmF2L2Jhc2Utc2lkZS1uYXYuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc2lkZS1uYXYvYmFzZS1zaWRlLW5hdi9iYXNlLXNpZGUtbmF2LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsUUFBUSxFQUNSLFVBQVUsRUFDVixNQUFNLEVBQ04sS0FBSyxFQUVMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnRUFBZ0UsQ0FBQzs7O0FBYXhILE1BQU0sT0FBTyxvQkFBb0I7SUFSakM7UUFTbUIsUUFBRyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQ2hDLGVBQVUsR0FBRyxNQUFNLENBQUMsQ0FBQSxVQUF1QixDQUFBLENBQUMsQ0FBQztRQUVyRCxlQUFVLEdBQUcsU0FBUyxDQUE2QixZQUFZLENBQUMsQ0FBQztRQUV6RCxrQkFBYSxHQUFHLG9CQUFvQixDQUFDO1FBQ3JDLGNBQVMsR0FBRyxnQkFBZ0IsQ0FBQztRQUVyQyxTQUFJLEdBQUcsS0FBSyxDQUFjLEdBQUcsQ0FBQyxDQUFDO1FBQy9CLGVBQVUsR0FBRyxLQUFLLENBQW9CLE9BQU8sQ0FBQyxDQUFDO1FBQy9DLGNBQVMsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDbEMsZUFBVSxHQUFHLEtBQUssQ0FBVSxJQUFJLENBQUMsQ0FBQztRQUNsQyxlQUFVLEdBQUcsS0FBSyxDQUFVLElBQUksQ0FBQyxDQUFDO1FBRWxDLGFBQVEsR0FBRyxRQUFRLENBQVMsR0FBRyxFQUFFO1lBQ3hDLE9BQU8sSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxhQUFhLElBQUksQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUM7UUFDM0YsQ0FBQyxDQUFDLENBQUM7S0E4Q0o7SUF6Q0MsZUFBZTtRQUNiLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVPLG1CQUFtQjtRQUN6QixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUNsRCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLEVBQUUsYUFBYSxDQUFDO1FBQ25ELElBQUksQ0FBQyxXQUFXLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUMvQixPQUFPO1FBQ1QsQ0FBQztRQUVELE1BQU0sWUFBWSxHQUFHLEdBQVMsRUFBRTtZQUM5QixNQUFNLE1BQU0sR0FBRyxTQUFTLENBQUMsWUFBWSxDQUFDO1lBQ3RDLFdBQVcsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLGtCQUFrQixFQUFFLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztRQUNuRSxDQUFDLENBQUM7UUFFRixJQUFJLENBQUMsYUFBYSxHQUFHLFlBQVksQ0FBQztRQUNsQyxZQUFZLEVBQUUsQ0FBQztRQUVmLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxjQUFjLENBQUMsR0FBRyxFQUFFO1lBQzVDLFlBQVksRUFBRSxDQUFDO1FBQ2pCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFdkMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxZQUFZLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRU8scUJBQXFCO1FBQzNCLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLGNBQWMsR0FBRyxTQUFTLENBQUM7UUFDbEMsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQ3ZCLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3pELElBQUksQ0FBQyxhQUFhLEdBQUcsU0FBUyxDQUFDO1FBQ2pDLENBQUM7SUFDSCxDQUFDOytHQTlEVSxvQkFBb0I7bUdBQXBCLG9CQUFvQixpMkJDMUJqQyw4c0JBdUJBLCtsQ0RIWSxZQUFZOzs0RkFNWCxvQkFBb0I7a0JBUmhDLFNBQVM7K0JBQ0UsbUJBQW1CLFdBQ3BCLENBQUMsWUFBWSxDQUFDLGNBQ1gsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIGNvbXB1dGVkLFxuICBFbGVtZW50UmVmLFxuICBpbmplY3QsXG4gIGlucHV0LFxuICBPbkRlc3Ryb3ksXG4gIHZpZXdDaGlsZCxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IHNpZGVOYXZDb2xsYXBzZWRTaXplLCBzaWRlTmF2UGFuZWxTaXplIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvc2lkZS1uYXYvc2lkZS1uYXYuY29uc3RhbnRzXCI7XG5pbXBvcnQgeyBTaWRlTmF2QXBwZWFyYW5jZSB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL3NpZGUtbmF2L3NpZGUtbmF2LmludGVyZmFjZVwiO1xuXG50eXBlIFNpZGVOYXZTaXplID0gXCJzXCIgfCBcIm1cIiB8IFwibFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWJhc2Utc2lkZS1uYXZcIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vYmFzZS1zaWRlLW5hdi5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2Jhc2Utc2lkZS1uYXYuY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEJhc2VTaWRlTmF2Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSByZWFkb25seSBjZHIgPSBpbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpO1xuICBwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRSZWYgPSBpbmplY3QoRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pO1xuXG4gIHJlYWRvbmx5IGNvbnRlbnRSZWYgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD4+KFwiY29udGVudFJlZlwiKTtcblxuICBwcml2YXRlIHJlYWRvbmx5IGNvbGxhcHNlZFNpemUgPSBzaWRlTmF2Q29sbGFwc2VkU2l6ZTtcbiAgcHJpdmF0ZSByZWFkb25seSBwYW5lbFNpemUgPSBzaWRlTmF2UGFuZWxTaXplO1xuXG4gIHJlYWRvbmx5IHNpemUgPSBpbnB1dDxTaWRlTmF2U2l6ZT4oXCJtXCIpO1xuICByZWFkb25seSBhcHBlYXJhbmNlID0gaW5wdXQ8U2lkZU5hdkFwcGVhcmFuY2U+KFwiYnJhbmRcIik7XG4gIHJlYWRvbmx5IGNvbGxhcHNlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgc2hvd0hlYWRlciA9IGlucHV0PGJvb2xlYW4+KHRydWUpO1xuICByZWFkb25seSBzaG93Rm9vdGVyID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7XG5cbiAgcmVhZG9ubHkgbWluV2lkdGggPSBjb21wdXRlZDxzdHJpbmc+KCgpID0+IHtcbiAgICByZXR1cm4gdGhpcy5jb2xsYXBzZWQoKSA/IGAke3RoaXMuY29sbGFwc2VkU2l6ZX1weGAgOiBgJHt0aGlzLnBhbmVsU2l6ZVt0aGlzLnNpemUoKV19cHhgO1xuICB9KTtcblxuICBwcml2YXRlIHJlc2l6ZU9ic2VydmVyPzogUmVzaXplT2JzZXJ2ZXI7XG4gIHByaXZhdGUgcmVzaXplSGFuZGxlcj86ICgpID0+IHZvaWQ7XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0dXBSZXNpemVPYnNlcnZlcigpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5jbGVhbnVwUmVzaXplT2JzZXJ2ZXIoKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0dXBSZXNpemVPYnNlcnZlcigpOiB2b2lkIHtcbiAgICBjb25zdCBjb250YWluZXJFbCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IGNvbnRlbnRFbCA9IHRoaXMuY29udGVudFJlZigpPy5uYXRpdmVFbGVtZW50O1xuICAgIGlmICghY29udGFpbmVyRWwgfHwgIWNvbnRlbnRFbCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IHNldEhlaWdodFZhciA9ICgpOiB2b2lkID0+IHtcbiAgICAgIGNvbnN0IGhlaWdodCA9IGNvbnRlbnRFbC5vZmZzZXRIZWlnaHQ7XG4gICAgICBjb250YWluZXJFbC5zdHlsZS5zZXRQcm9wZXJ0eShcIi0tY29udGVudC1oZWlnaHRcIiwgYCR7aGVpZ2h0fXB4YCk7XG4gICAgfTtcblxuICAgIHRoaXMucmVzaXplSGFuZGxlciA9IHNldEhlaWdodFZhcjtcbiAgICBzZXRIZWlnaHRWYXIoKTtcblxuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIoKCkgPT4ge1xuICAgICAgc2V0SGVpZ2h0VmFyKCk7XG4gICAgfSk7XG4gICAgdGhpcy5yZXNpemVPYnNlcnZlci5vYnNlcnZlKGNvbnRlbnRFbCk7XG5cbiAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcihcInJlc2l6ZVwiLCBzZXRIZWlnaHRWYXIpO1xuICB9XG5cbiAgcHJpdmF0ZSBjbGVhbnVwUmVzaXplT2JzZXJ2ZXIoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucmVzaXplT2JzZXJ2ZXIpIHtcbiAgICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIuZGlzY29ubmVjdCgpO1xuICAgICAgdGhpcy5yZXNpemVPYnNlcnZlciA9IHVuZGVmaW5lZDtcbiAgICB9XG4gICAgaWYgKHRoaXMucmVzaXplSGFuZGxlcikge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoXCJyZXNpemVcIiwgdGhpcy5yZXNpemVIYW5kbGVyKTtcbiAgICAgIHRoaXMucmVzaXplSGFuZGxlciA9IHVuZGVmaW5lZDtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJzaWRlLW5hdi1jb250YWluZXJcIj5cbiAgPG5hdiBjbGFzcz1cInNpZGUtbmF2XCIgW25nQ2xhc3NdPVwieydjb2xsYXBzZWQnOiBjb2xsYXBzZWQoKSwgJ2FwcGVhcmFuY2UnOiBhcHBlYXJhbmNlKCl9XCIgW3N0eWxlLm1pbi13aWR0aF09XCJtaW5XaWR0aCgpXCI+XG4gICAgQGlmIChzaG93SGVhZGVyKCkpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJzaWRlLW5hdi1oZWFkZXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NpZGUtbmF2LWhlYWRlcl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICB9XG5cbiAgICA8ZGl2IGNsYXNzPVwic2lkZS1uYXYtYm9keVwiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NpZGUtbmF2LWJvZHldXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuXG4gICAgQGlmIChzaG93Rm9vdGVyKCkpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJzaWRlLW5hdi1mb290ZXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NpZGUtbmF2LWZvb3Rlcl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvbmF2PlxuICA8ZGl2ICNjb250ZW50UmVmIGNsYXNzPVwic2lkZS1uYXYtY29udGVudFwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzaWRlLW5hdi1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cblxuIl19
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
|
|
3
|
+
import { getNavItemLabelIconSize } from "@design-system-rte/core/components/side-nav/nav-item/nav-item.utils";
|
|
4
|
+
import { ENTER_KEY, SPACE_KEY } from "@design-system-rte/core/constants/keyboard/keyboard.constants";
|
|
5
|
+
import { BadgeComponent } from "../../badge/badge.component";
|
|
6
|
+
import { IconComponent } from "../../icon/icon.component";
|
|
7
|
+
import { TooltipDirective } from "../../tooltip/tooltip.directive";
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
import * as i1 from "@angular/common";
|
|
10
|
+
function getNavTabIndex(parentMenuOpen) {
|
|
11
|
+
return parentMenuOpen === false ? -1 : 0;
|
|
12
|
+
}
|
|
13
|
+
export class NavItemComponent {
|
|
14
|
+
constructor() {
|
|
15
|
+
this.id = input();
|
|
16
|
+
this.icon = input();
|
|
17
|
+
this.showIcon = input(true);
|
|
18
|
+
this.label = input.required();
|
|
19
|
+
this.collapsed = input(false);
|
|
20
|
+
this.link = input();
|
|
21
|
+
this.appearance = input("brand");
|
|
22
|
+
this.active = input(false);
|
|
23
|
+
this.badge = input();
|
|
24
|
+
this.isNested = input(false);
|
|
25
|
+
this.parentMenuOpen = input();
|
|
26
|
+
this.role = input();
|
|
27
|
+
this.showDivider = input(false);
|
|
28
|
+
this.focused = signal(false);
|
|
29
|
+
this.tabIndex = computed(() => getNavTabIndex(this.parentMenuOpen()));
|
|
30
|
+
this.itemClick = output();
|
|
31
|
+
this.iconSize = computed(() => {
|
|
32
|
+
return getNavItemLabelIconSize(this.isNested(), this.collapsed());
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
handleClick(event) {
|
|
36
|
+
event.stopPropagation();
|
|
37
|
+
this.itemClick.emit(this.id() || this.label());
|
|
38
|
+
}
|
|
39
|
+
handleKeyDown(event) {
|
|
40
|
+
if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
|
|
41
|
+
event.preventDefault();
|
|
42
|
+
this.itemClick.emit(this.id() || this.label());
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
handleFocus() {
|
|
46
|
+
this.focused.set(true);
|
|
47
|
+
}
|
|
48
|
+
handleBlur() {
|
|
49
|
+
this.focused.set(false);
|
|
50
|
+
}
|
|
51
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n <div\n class=\"nav-item-container {{appearance()}}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"false\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n} @else {\n <div\n class=\"nav-item-container {{appearance()}}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n}\n\n<ng-template #contentTemplate>\n @if (link()) {\n <a\n class=\"nav-item\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </span>\n }\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
53
|
+
}
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, decorators: [{
|
|
55
|
+
type: Component,
|
|
56
|
+
args: [{ selector: "rte-nav-item", imports: [CommonModule, IconComponent, BadgeComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (collapsed() && label()) {\n <div\n class=\"nav-item-container {{appearance()}}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"false\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n} @else {\n <div\n class=\"nav-item-container {{appearance()}}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n}\n\n<ng-template #contentTemplate>\n @if (link()) {\n <a\n class=\"nav-item\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </span>\n }\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}\n"] }]
|
|
57
|
+
}] });
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc2lkZS1uYXYvbmF2LWl0ZW0vbmF2LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc2lkZS1uYXYvbmF2LWl0ZW0vbmF2LWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXBHLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHFFQUFxRSxDQUFDO0FBRTlHLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sK0RBQStELENBQUM7QUFFckcsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7O0FBRW5FLFNBQVMsY0FBYyxDQUFDLGNBQXdCO0lBQzlDLE9BQU8sY0FBYyxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUMzQyxDQUFDO0FBVUQsTUFBTSxPQUFPLGdCQUFnQjtJQVI3QjtRQVNXLE9BQUUsR0FBRyxLQUFLLEVBQXNCLENBQUM7UUFDakMsU0FBSSxHQUFHLEtBQUssRUFBc0IsQ0FBQztRQUNuQyxhQUFRLEdBQUcsS0FBSyxDQUFVLElBQUksQ0FBQyxDQUFDO1FBQ2hDLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDakMsY0FBUyxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUNsQyxTQUFJLEdBQUcsS0FBSyxFQUFzQixDQUFDO1FBQ25DLGVBQVUsR0FBRyxLQUFLLENBQW9CLE9BQU8sQ0FBQyxDQUFDO1FBQy9DLFdBQU0sR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDL0IsVUFBSyxHQUFHLEtBQUssRUFBMEIsQ0FBQztRQUN4QyxhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQ2pDLG1CQUFjLEdBQUcsS0FBSyxFQUF1QixDQUFDO1FBQzlDLFNBQUksR0FBRyxLQUFLLEVBQXNCLENBQUM7UUFDbkMsZ0JBQVcsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFFcEMsWUFBTyxHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUNqQyxhQUFRLEdBQUcsUUFBUSxDQUFTLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRXpFLGNBQVMsR0FBRyxNQUFNLEVBQVUsQ0FBQztRQUU3QixhQUFRLEdBQUcsUUFBUSxDQUFTLEdBQUcsRUFBRTtZQUN4QyxPQUFPLHVCQUF1QixDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQztRQUNwRSxDQUFDLENBQUMsQ0FBQztLQXFCSjtJQW5CQyxXQUFXLENBQUMsS0FBWTtRQUN0QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFRCxhQUFhLENBQUMsS0FBb0I7UUFDaEMsSUFBSSxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDL0MsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUNqRCxDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7K0dBMUNVLGdCQUFnQjttR0FBaEIsZ0JBQWdCLDJ0REN2QjdCLHV0RkF3RkEsd3lGRHZFWSxZQUFZLG9TQUFFLGFBQWEsaUhBQUUsY0FBYywwSUFBRSxnQkFBZ0I7OzRGQU01RCxnQkFBZ0I7a0JBUjVCLFNBQVM7K0JBQ0UsY0FBYyxXQUNmLENBQUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxjQUFjLEVBQUUsZ0JBQWdCLENBQUMsY0FDNUQsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBvdXRwdXQsIHNpZ25hbCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCYWRnZVByb3BzIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBnZXROYXZJdGVtTGFiZWxJY29uU2l6ZSB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL3NpZGUtbmF2L25hdi1pdGVtL25hdi1pdGVtLnV0aWxzXCI7XG5pbXBvcnQgeyBTaWRlTmF2QXBwZWFyYW5jZSB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL3NpZGUtbmF2L3NpZGUtbmF2LmludGVyZmFjZVwiO1xuaW1wb3J0IHsgRU5URVJfS0VZLCBTUEFDRV9LRVkgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29uc3RhbnRzL2tleWJvYXJkL2tleWJvYXJkLmNvbnN0YW50c1wiO1xuXG5pbXBvcnQgeyBCYWRnZUNvbXBvbmVudCB9IGZyb20gXCIuLi8uLi9iYWRnZS9iYWRnZS5jb21wb25lbnRcIjtcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tIFwiLi4vLi4vaWNvbi9pY29uLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgVG9vbHRpcERpcmVjdGl2ZSB9IGZyb20gXCIuLi8uLi90b29sdGlwL3Rvb2x0aXAuZGlyZWN0aXZlXCI7XG5cbmZ1bmN0aW9uIGdldE5hdlRhYkluZGV4KHBhcmVudE1lbnVPcGVuPzogYm9vbGVhbik6IG51bWJlciB7XG4gIHJldHVybiBwYXJlbnRNZW51T3BlbiA9PT0gZmFsc2UgPyAtMSA6IDA7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtbmF2LWl0ZW1cIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSWNvbkNvbXBvbmVudCwgQmFkZ2VDb21wb25lbnQsIFRvb2x0aXBEaXJlY3RpdmVdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogXCIuL25hdi1pdGVtLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vbmF2LWl0ZW0uY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE5hdkl0ZW1Db21wb25lbnQge1xuICByZWFkb25seSBpZCA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgaWNvbiA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgc2hvd0ljb24gPSBpbnB1dDxib29sZWFuPih0cnVlKTtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNvbGxhcHNlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgbGluayA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgYXBwZWFyYW5jZSA9IGlucHV0PFNpZGVOYXZBcHBlYXJhbmNlPihcImJyYW5kXCIpO1xuICByZWFkb25seSBhY3RpdmUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGJhZGdlID0gaW5wdXQ8QmFkZ2VQcm9wcyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgaXNOZXN0ZWQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IHBhcmVudE1lbnVPcGVuID0gaW5wdXQ8Ym9vbGVhbiB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgcm9sZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgc2hvd0RpdmlkZXIgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgcmVhZG9ubHkgZm9jdXNlZCA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IHRhYkluZGV4ID0gY29tcHV0ZWQ8bnVtYmVyPigoKSA9PiBnZXROYXZUYWJJbmRleCh0aGlzLnBhcmVudE1lbnVPcGVuKCkpKTtcblxuICByZWFkb25seSBpdGVtQ2xpY2sgPSBvdXRwdXQ8c3RyaW5nPigpO1xuXG4gIHJlYWRvbmx5IGljb25TaXplID0gY29tcHV0ZWQ8bnVtYmVyPigoKSA9PiB7XG4gICAgcmV0dXJuIGdldE5hdkl0ZW1MYWJlbEljb25TaXplKHRoaXMuaXNOZXN0ZWQoKSwgdGhpcy5jb2xsYXBzZWQoKSk7XG4gIH0pO1xuXG4gIGhhbmRsZUNsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuaXRlbUNsaWNrLmVtaXQodGhpcy5pZCgpIHx8IHRoaXMubGFiZWwoKSk7XG4gIH1cblxuICBoYW5kbGVLZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgaWYgKFtTUEFDRV9LRVksIEVOVEVSX0tFWV0uaW5jbHVkZXMoZXZlbnQua2V5KSkge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIHRoaXMuaXRlbUNsaWNrLmVtaXQodGhpcy5pZCgpIHx8IHRoaXMubGFiZWwoKSk7XG4gICAgfVxuICB9XG5cbiAgaGFuZGxlRm9jdXMoKTogdm9pZCB7XG4gICAgdGhpcy5mb2N1c2VkLnNldCh0cnVlKTtcbiAgfVxuXG4gIGhhbmRsZUJsdXIoKTogdm9pZCB7XG4gICAgdGhpcy5mb2N1c2VkLnNldChmYWxzZSk7XG4gIH1cbn1cbiIsIkBpZiAoY29sbGFwc2VkKCkgJiYgbGFiZWwoKSkge1xuICA8ZGl2XG4gICAgY2xhc3M9XCJuYXYtaXRlbS1jb250YWluZXIge3thcHBlYXJhbmNlKCl9fVwiXG4gICAgcnRlVG9vbHRpcFxuICAgIHJ0ZVRvb2x0aXBQb3NpdGlvbj1cInJpZ2h0XCJcbiAgICBydGVUb29sdGlwQWxpZ25tZW50PVwiY2VudGVyXCJcbiAgICBbaWRdPVwiaWQoKVwiXG4gICAgW25nQ2xhc3NdPVwieyBjb2xsYXBzZWQ6IGNvbGxhcHNlZCgpLCBuZXN0ZWQ6IGlzTmVzdGVkKCksIGFjdGl2ZTogYWN0aXZlKCksIGZvY3VzZWQ6IGZvY3VzZWQoKSB9XCJcbiAgICBbYXR0ci5yb2xlXT1cInJvbGUoKVwiXG4gICAgW3J0ZVRvb2x0aXBdPVwibGFiZWwoKVwiXG4gICAgW3J0ZVRvb2x0aXBBcnJvd109XCJmYWxzZVwiXG4gICAgW3J0ZVRvb2x0aXBHYXBdPVwiMTJcIlxuICAgIFtydGVUb29sdGlwU2hvdWxkRm9jdXNUcmlnZ2VyXT1cImZhbHNlXCI+XG4gICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJjb250ZW50VGVtcGxhdGVcIiAvPlxuICA8L2Rpdj5cbn0gQGVsc2Uge1xuICA8ZGl2XG4gICAgY2xhc3M9XCJuYXYtaXRlbS1jb250YWluZXIge3thcHBlYXJhbmNlKCl9fVwiXG4gICAgW2lkXT1cImlkKClcIlxuICAgIFtuZ0NsYXNzXT1cInsgY29sbGFwc2VkOiBjb2xsYXBzZWQoKSwgbmVzdGVkOiBpc05lc3RlZCgpLCBhY3RpdmU6IGFjdGl2ZSgpLCBmb2N1c2VkOiBmb2N1c2VkKCkgfVwiXG4gICAgW2F0dHIucm9sZV09XCJyb2xlKClcIj5cbiAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbnRlbnRUZW1wbGF0ZVwiIC8+XG4gIDwvZGl2PlxufVxuXG48bmctdGVtcGxhdGUgI2NvbnRlbnRUZW1wbGF0ZT5cbiAgQGlmIChsaW5rKCkpIHtcbiAgICA8YVxuICAgICAgY2xhc3M9XCJuYXYtaXRlbVwiXG4gICAgICBbaHJlZl09XCJsaW5rKCkhXCJcbiAgICAgIFthdHRyLnRhYmluZGV4XT1cInRhYkluZGV4KClcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJsYWJlbCgpXCJcbiAgICAgIChmb2N1cyk9XCJoYW5kbGVGb2N1cygpXCJcbiAgICAgIChibHVyKT1cImhhbmRsZUJsdXIoKVwiPlxuICAgICAgPGRpdiBjbGFzcz1cIm5hdi1pdGVtLWxlZnRcIj5cbiAgICAgICAgQGlmIChzaG93SWNvbigpICYmIGljb24oKSkge1xuICAgICAgICAgIDxydGUtaWNvbiBjbGFzcz1cImljb25cIiBbbmFtZV09XCJpY29uKCkhXCIgW3NpemVdPVwiaWNvblNpemUoKVwiIC8+XG4gICAgICAgIH1cbiAgICAgICAgQGlmICghY29sbGFwc2VkKCkpIHtcbiAgICAgICAgICA8c3Bhbj57eyBsYWJlbCgpIH19PC9zcGFuPlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJuYXYtaXRlbS1yaWdodFwiPlxuICAgICAgICBAaWYgKGJhZGdlKCkpIHtcbiAgICAgICAgICA8cnRlLWJhZGdlXG4gICAgICAgICAgICBbYmFkZ2VUeXBlXT1cImJhZGdlKCkhLmJhZGdlVHlwZSB8fCAnYnJhbmQnXCJcbiAgICAgICAgICAgIFtiYWRnZVNpemVdPVwiYmFkZ2UoKSEuc2l6ZSB8fCAnbSdcIlxuICAgICAgICAgICAgW2JhZGdlQ29udGVudF09XCJiYWRnZSgpIS5jb250ZW50IHx8ICdudW1iZXInXCJcbiAgICAgICAgICAgIFtjb3VudF09XCJiYWRnZSgpIS5jb3VudFwiXG4gICAgICAgICAgICBbaWNvbl09XCJiYWRnZSgpIS5pY29uIHx8ICdub3RpZmljYXRpb24nXCJcbiAgICAgICAgICAgIFtzaW1wbGVCYWRnZV09XCJ0cnVlXCJcbiAgICAgICAgICAvPlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L2E+XG4gIH0gQGVsc2Uge1xuICAgIDxzcGFuXG4gICAgICBjbGFzcz1cIm5hdi1pdGVtXCJcbiAgICAgIFthdHRyLnRhYmluZGV4XT1cInRhYkluZGV4KClcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJsYWJlbCgpXCJcbiAgICAgIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgIChrZXlkb3duKT1cImhhbmRsZUtleURvd24oJGV2ZW50KVwiXG4gICAgICAoZm9jdXMpPVwiaGFuZGxlRm9jdXMoKVwiXG4gICAgICAoYmx1cik9XCJoYW5kbGVCbHVyKClcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJuYXYtaXRlbS1sZWZ0XCI+XG4gICAgICAgIEBpZiAoc2hvd0ljb24oKSAmJiBpY29uKCkpIHtcbiAgICAgICAgICA8cnRlLWljb24gY2xhc3M9XCJpY29uXCIgW25hbWVdPVwiaWNvbigpIVwiIFtzaXplXT1cImljb25TaXplKClcIiAvPlxuICAgICAgICB9XG4gICAgICAgIEBpZiAoIWNvbGxhcHNlZCgpKSB7XG4gICAgICAgICAgPHNwYW4+e3sgbGFiZWwoKSB9fTwvc3Bhbj5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwibmF2LWl0ZW0tcmlnaHRcIj5cbiAgICAgICAgQGlmIChiYWRnZSgpKSB7XG4gICAgICAgICAgPHJ0ZS1iYWRnZVxuICAgICAgICAgICAgW2JhZGdlVHlwZV09XCJiYWRnZSgpIS5iYWRnZVR5cGUgfHwgJ2JyYW5kJ1wiXG4gICAgICAgICAgICBbYmFkZ2VTaXplXT1cImJhZGdlKCkhLnNpemUgfHwgJ20nXCJcbiAgICAgICAgICAgIFtiYWRnZUNvbnRlbnRdPVwiYmFkZ2UoKSEuY29udGVudCB8fCAnbnVtYmVyJ1wiXG4gICAgICAgICAgICBbY291bnRdPVwiYmFkZ2UoKSEuY291bnRcIlxuICAgICAgICAgICAgW2ljb25dPVwiYmFkZ2UoKSEuaWNvbiB8fCAnbm90aWZpY2F0aW9uJ1wiXG4gICAgICAgICAgICBbc2ltcGxlQmFkZ2VdPVwidHJ1ZVwiXG4gICAgICAgICAgLz5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9zcGFuPlxuICB9XG48L25nLXRlbXBsYXRlPlxuXG4iXX0=
|