@design-system-rte/angular 0.13.0 → 0.15.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/badge/badge.component.mjs +3 -3
- package/esm2022/lib/components/badge/badge.directive.mjs +3 -3
- package/esm2022/lib/components/banner/banner.component.mjs +5 -5
- package/esm2022/lib/components/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs +38 -0
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +12 -14
- package/esm2022/lib/components/button/button.component.mjs +14 -19
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +4 -5
- package/esm2022/lib/components/checkbox-group/checkbox-group.component.mjs +5 -6
- package/esm2022/lib/components/chip/chip.component.mjs +3 -3
- package/esm2022/lib/components/divider/divider.component.mjs +5 -5
- package/esm2022/lib/components/dropdown/dropdown-item/dropdown-item.component.mjs +41 -0
- package/esm2022/lib/components/dropdown/dropdown-menu/dropdown-menu.component.mjs +44 -0
- package/esm2022/lib/components/dropdown/dropdown-trigger/dropdown-trigger.directive.mjs +39 -0
- package/esm2022/lib/components/dropdown/dropdown.directive.mjs +147 -0
- package/esm2022/lib/components/dropdown/dropdown.module.mjs +19 -0
- package/esm2022/lib/components/dropdown/dropdown.utils.mjs +40 -0
- package/esm2022/lib/components/dropdown/index.mjs +8 -0
- package/esm2022/lib/components/grid/col/col.directive.mjs +3 -3
- package/esm2022/lib/components/grid/grid.directive.mjs +3 -3
- package/esm2022/lib/components/icon/icon.component.mjs +3 -3
- package/esm2022/lib/components/icon/icon.service.mjs +3 -3
- package/esm2022/lib/components/icon-button/icon-button.component.mjs +5 -5
- package/esm2022/lib/components/icon-button-toggle/icon-button-toggle.component.mjs +3 -3
- package/esm2022/lib/components/link/link.component.mjs +7 -5
- package/esm2022/lib/components/popover/popover.component.mjs +5 -5
- package/esm2022/lib/components/popover/popover.directive.mjs +3 -3
- 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/segmented-control/segmented-control.component.mjs +3 -3
- package/esm2022/lib/components/split-button/split-button.component.mjs +33 -7
- package/esm2022/lib/components/switch/switch.component.mjs +3 -3
- package/esm2022/lib/components/text-input/text-input.component.mjs +3 -3
- package/esm2022/lib/components/textarea/textarea.component.mjs +4 -4
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/lib/components/tooltip/tooltip.directive.mjs +20 -5
- package/esm2022/lib/services/dropdown.service.mjs +81 -0
- package/esm2022/lib/services/overlay.service.mjs +3 -3
- package/fesm2022/design-system-rte-angular.mjs +571 -134
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/badge/badge.directive.d.ts +1 -1
- package/lib/components/breadcrumbs/breadcrumb-item/breadcrumb-item.component.d.ts +16 -0
- package/lib/components/breadcrumbs/breadcrumbs.component.d.ts +2 -2
- package/lib/components/button/button.component.d.ts +4 -12
- package/lib/components/checkbox/checkbox.component.d.ts +1 -2
- package/lib/components/checkbox-group/checkbox-group.component.d.ts +1 -2
- package/lib/components/chip/chip.component.d.ts +1 -1
- package/lib/components/dropdown/dropdown-item/dropdown-item.component.d.ts +25 -0
- package/lib/components/dropdown/dropdown-menu/dropdown-menu.component.d.ts +20 -0
- package/lib/components/dropdown/dropdown-trigger/dropdown-trigger.directive.d.ts +14 -0
- package/lib/components/dropdown/dropdown.directive.d.ts +49 -0
- package/lib/components/dropdown/dropdown.module.d.ts +10 -0
- package/lib/components/dropdown/dropdown.utils.d.ts +4 -0
- package/lib/components/dropdown/index.d.ts +5 -0
- package/lib/components/icon-button/icon-button.component.d.ts +2 -2
- package/lib/components/icon-button-toggle/icon-button-toggle.component.d.ts +2 -2
- package/lib/components/link/link.component.d.ts +3 -1
- package/lib/components/split-button/split-button.component.d.ts +12 -5
- package/lib/components/text-input/text-input.component.d.ts +3 -3
- package/lib/components/tooltip/tooltip.directive.d.ts +2 -1
- package/lib/services/dropdown.service.d.ts +27 -0
- package/package.json +4 -4
|
@@ -113,10 +113,10 @@ export class SegmentedControlComponent {
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n <div\n #segment\n role=\"radio\"\n class=\"rte-segment\"\n tabindex=\"0\"\n [attr.data-id]=\"option.id\"\n [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n [class.selected]=\"isSegmentSelected(option.id)\"\n [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n [attr.aria-label]=\"option.label\"\n (click)=\"selectSegment(option.id)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n >\n <rte-icon\n *ngIf=\"isSegmentSelected(option.id)\"\n name=\"check-small\"\n class=\"rte-selected-icon\"\n [size]=\"24\"\n />\n <div class=\"rte-segment-content\">\n <ng-container *ngIf=\"option.icon; else label\">\n <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n </ng-container>\n <ng-template #label>\n <span class=\"rte-segment-label\">{{ option.label }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\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\";.rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{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;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
118
118
|
}
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
120
120
|
type: Component,
|
|
121
121
|
args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n <div\n #segment\n role=\"radio\"\n class=\"rte-segment\"\n tabindex=\"0\"\n [attr.data-id]=\"option.id\"\n [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n [class.selected]=\"isSegmentSelected(option.id)\"\n [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n [attr.aria-label]=\"option.label\"\n (click)=\"selectSegment(option.id)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n >\n <rte-icon\n *ngIf=\"isSegmentSelected(option.id)\"\n name=\"check-small\"\n class=\"rte-selected-icon\"\n [size]=\"24\"\n />\n <div class=\"rte-segment-content\">\n <ng-container *ngIf=\"option.icon; else label\">\n <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n </ng-container>\n <ng-template #label>\n <span class=\"rte-segment-label\">{{ option.label }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\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\";.rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{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;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"] }]
|
|
122
122
|
}] });
|
|
@@ -1,26 +1,52 @@
|
|
|
1
1
|
import { CommonModule } from "@angular/common";
|
|
2
2
|
import { ChangeDetectionStrategy, Component, computed, input, signal } from "@angular/core";
|
|
3
3
|
import { splitButtonLeftIconSize, splitButtonRightIconSize, } from "@design-system-rte/core/components/split-button/split-button.constants";
|
|
4
|
+
import { ARROW_DOWN_KEY, SPACE_KEY } from "@design-system-rte/core/constants/keyboard/keyboard.constants";
|
|
5
|
+
import { DropdownModule } from "../dropdown";
|
|
4
6
|
import { IconComponent } from "../icon/icon.component";
|
|
5
7
|
import * as i0 from "@angular/core";
|
|
6
8
|
import * as i1 from "@angular/common";
|
|
9
|
+
import * as i2 from "../dropdown/dropdown.directive";
|
|
10
|
+
import * as i3 from "../dropdown/dropdown-trigger/dropdown-trigger.directive";
|
|
11
|
+
import * as i4 from "../dropdown/dropdown-menu/dropdown-menu.component";
|
|
7
12
|
export class SplitButtonComponent {
|
|
8
13
|
constructor() {
|
|
9
14
|
this.appearance = input("primary");
|
|
10
15
|
this.size = input("m");
|
|
11
16
|
this.label = input.required();
|
|
12
17
|
this.compactSpacing = input(false);
|
|
13
|
-
this.selected = input(false);
|
|
14
18
|
this.position = input("bottom-start");
|
|
15
19
|
this.icon = input(null);
|
|
16
20
|
this.disabled = input(false);
|
|
17
21
|
this.ariaLabelRight = input();
|
|
22
|
+
this.options = input([]);
|
|
18
23
|
this.splitButtonLeftIconSize = computed(() => splitButtonLeftIconSize[this.size()]);
|
|
19
24
|
this.splitButtonRightIconSize = computed(() => splitButtonRightIconSize[this.size()]);
|
|
20
25
|
this.isOpen = signal(false);
|
|
26
|
+
this.internalPosition = computed(() => {
|
|
27
|
+
return this.position().split("-")[0];
|
|
28
|
+
});
|
|
29
|
+
this.internalAlignment = computed(() => {
|
|
30
|
+
return this.position().split("-")[1];
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
handleClickOutside(event) {
|
|
34
|
+
const target = event.target;
|
|
35
|
+
const allDropdowns = document.querySelectorAll("[data-dropdown-id]");
|
|
36
|
+
const clickedInside = Array.from(allDropdowns).some((dropdown) => dropdown.contains(target));
|
|
37
|
+
if (!clickedInside) {
|
|
38
|
+
this.isOpen.set(false);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
ngOnInit() {
|
|
42
|
+
window.addEventListener("click", this.handleClickOutside.bind(this));
|
|
43
|
+
}
|
|
44
|
+
ngOnDestroy() {
|
|
45
|
+
window.removeEventListener("click", this.handleClickOutside.bind(this));
|
|
21
46
|
}
|
|
22
47
|
handleKeyDownOnRightButton(event) {
|
|
23
|
-
this.handleKeyDown(event,
|
|
48
|
+
this.handleKeyDown(event, ARROW_DOWN_KEY, () => this.isOpen.set(true));
|
|
49
|
+
this.handleKeyDown(event, SPACE_KEY, () => this.isOpen.set(true));
|
|
24
50
|
this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
|
|
25
51
|
}
|
|
26
52
|
handleKeyDownOnMenu(event) {
|
|
@@ -32,11 +58,11 @@ export class SplitButtonComponent {
|
|
|
32
58
|
callback();
|
|
33
59
|
}
|
|
34
60
|
}
|
|
35
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n class=\"split-button-container size-{{ size() }} {{appearance()}}\"\n [ngClass]=\"{'compact-spacing': compactSpacing()}\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\" \n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon \n *ngIf=\"icon()\"\n [name]=\"icon()!\"\n [size]=\"splitButtonLeftIconSize()\"\n />\n <p class=\"split-button-label size-{{ size() }}\">\n {{label()}}\n </p>\n </button>\n\n <div \n class=\"split-button-divider\"\n [ngClass]=\"{'disabled': disabled()}\"\n ></div>\n\n <div class=\"split-button-right-container\">\n <button\n class=\"split-button-right size-{{ size() }}\"\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [attr.data-selected]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (mouseenter)=\"isOpen.set(true)\"\n (mouseleave)=\"isOpen.set(false)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\"/>\n </div>\n </button>\n\n <div\n class=\"split-button-dropdown position-{{ position() }}\"\n role=\"menu\"\n data-testid=\"Menu container\"\n [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n (keydown)=\"handleKeyDownOnMenu($event)\"\n >\n <ng-content/>\n </div>\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\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{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}.split-button-container .split-button-left .split-button-label.size-l{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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\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"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon\n *ngIf=\"icon()\"\n [name]=\"icon()!\"\n [size]=\"splitButtonLeftIconSize()\"\n />\n <p class=\"split-button-label size-{{ size() }}\">\n {{ label() }}\n </p>\n </button>\n\n <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n <div\n rteDropdown\n style=\"height: 100%\"\n [rteDropdownPosition]=\"internalPosition()\"\n [rteDropdownAlignment]=\"internalAlignment()\"\n [attr.data-testid]=\"'Menu container'\"\n >\n <button\n class=\"split-button-right size-{{ size() }}\"\n rteDropdownTrigger\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n [attr.data-expanded]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon\n name=\"arrow-chevron-down\"\n [size]=\"splitButtonRightIconSize()\"\n />\n </div>\n </button>\n <rte-dropdown-menu [items]=\"options()\" />\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\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{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}.split-button-container .split-button-left .split-button-label.size-l{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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\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"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i2.DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset"], outputs: ["menuEvent"] }, { kind: "directive", type: i3.DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId"], outputs: ["itemEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
37
63
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
39
65
|
type: Component,
|
|
40
|
-
args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
66
|
+
args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent, DropdownModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon\n *ngIf=\"icon()\"\n [name]=\"icon()!\"\n [size]=\"splitButtonLeftIconSize()\"\n />\n <p class=\"split-button-label size-{{ size() }}\">\n {{ label() }}\n </p>\n </button>\n\n <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n <div\n rteDropdown\n style=\"height: 100%\"\n [rteDropdownPosition]=\"internalPosition()\"\n [rteDropdownAlignment]=\"internalAlignment()\"\n [attr.data-testid]=\"'Menu container'\"\n >\n <button\n class=\"split-button-right size-{{ size() }}\"\n rteDropdownTrigger\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n [attr.data-expanded]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon\n name=\"arrow-chevron-down\"\n [size]=\"splitButtonRightIconSize()\"\n />\n </div>\n </button>\n <rte-dropdown-menu [items]=\"options()\" />\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\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{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}.split-button-container .split-button-left .split-button-label.size-l{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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
41
67
|
}] });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BsaXQtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL3NwbGl0LWJ1dHRvbi9zcGxpdC1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc3BsaXQtYnV0dG9uL3NwbGl0LWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RixPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLHdCQUF3QixHQUN6QixNQUFNLHdFQUF3RSxDQUFDO0FBT2hGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBV3ZELE1BQU0sT0FBTyxvQkFBb0I7SUFSakM7UUFTVyxlQUFVLEdBQUcsS0FBSyxDQUF3QixTQUFTLENBQUMsQ0FBQztRQUNyRCxTQUFJLEdBQUcsS0FBSyxDQUFrQixHQUFHLENBQUMsQ0FBQztRQUNuQyxVQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQ2pDLG1CQUFjLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsYUFBUSxHQUFHLEtBQUssQ0FBc0IsY0FBYyxDQUFDLENBQUM7UUFDdEQsU0FBSSxHQUFHLEtBQUssQ0FBK0MsSUFBSSxDQUFDLENBQUM7UUFDakUsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixtQkFBYyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBRWpDLDRCQUF1QixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQy9FLDZCQUF3QixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRWpGLFdBQU0sR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7S0FpQmpDO0lBZkMsMEJBQTBCLENBQUMsS0FBb0I7UUFDN0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsV0FBVyxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDcEUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVELG1CQUFtQixDQUFDLEtBQW9CO1FBQ3RDLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLFFBQVEsRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ3BFLENBQUM7SUFFTyxhQUFhLENBQUMsS0FBb0IsRUFBRSxHQUFXLEVBQUUsUUFBb0I7UUFDM0UsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLEdBQUcsRUFBRSxDQUFDO1lBQ3RCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixRQUFRLEVBQUUsQ0FBQztRQUNiLENBQUM7SUFDSCxDQUFDOytHQTlCVSxvQkFBb0I7bUdBQXBCLG9CQUFvQix5dUNDdkJqQywwbURBdURNLHdsT0R0Q00sWUFBWSxpT0FBRSxhQUFhOzs0RkFNMUIsb0JBQW9CO2tCQVJoQyxTQUFTOytCQUNFLGtCQUFrQixXQUNuQixDQUFDLFlBQVksRUFBRSxhQUFhLENBQUMsY0FDMUIsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBzaWduYWwgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHtcbiAgc3BsaXRCdXR0b25MZWZ0SWNvblNpemUsXG4gIHNwbGl0QnV0dG9uUmlnaHRJY29uU2l6ZSxcbn0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvc3BsaXQtYnV0dG9uL3NwbGl0LWJ1dHRvbi5jb25zdGFudHNcIjtcbmltcG9ydCB7XG4gIFNwbGl0QnV0dG9uQXBwZWFyYW5jZSxcbiAgU3BsaXRCdXR0b25Qb3NpdGlvbixcbiAgU3BsaXRCdXR0b25TaXplLFxufSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9zcGxpdC1idXR0b24vc3BsaXQtYnV0dG9uLmludGVyZmFjZVwiO1xuXG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnRcIjtcbmltcG9ydCB7IFJlZ3VsYXJJY29uSWRLZXksIFRvZ2dsYWJsZUljb25JZEtleSB9IGZyb20gXCIuLi9pY29uL2ljb24uc2VydmljZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLXNwbGl0LWJ1dHRvblwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9zcGxpdC1idXR0b24uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmw6IFwiLi9zcGxpdC1idXR0b24uY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNwbGl0QnV0dG9uQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgYXBwZWFyYW5jZSA9IGlucHV0PFNwbGl0QnV0dG9uQXBwZWFyYW5jZT4oXCJwcmltYXJ5XCIpO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8U3BsaXRCdXR0b25TaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IGxhYmVsID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICByZWFkb25seSBjb21wYWN0U3BhY2luZyA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgc2VsZWN0ZWQgPSBpbnB1dChmYWxzZSk7XG4gIHJlYWRvbmx5IHBvc2l0aW9uID0gaW5wdXQ8U3BsaXRCdXR0b25Qb3NpdGlvbj4oXCJib3R0b20tc3RhcnRcIik7XG4gIHJlYWRvbmx5IGljb24gPSBpbnB1dDxSZWd1bGFySWNvbklkS2V5IHwgVG9nZ2xhYmxlSWNvbklkS2V5IHwgbnVsbD4obnVsbCk7XG4gIHJlYWRvbmx5IGRpc2FibGVkID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBhcmlhTGFiZWxSaWdodCA9IGlucHV0PHN0cmluZz4oKTtcblxuICByZWFkb25seSBzcGxpdEJ1dHRvbkxlZnRJY29uU2l6ZSA9IGNvbXB1dGVkKCgpID0+IHNwbGl0QnV0dG9uTGVmdEljb25TaXplW3RoaXMuc2l6ZSgpXSk7XG4gIHJlYWRvbmx5IHNwbGl0QnV0dG9uUmlnaHRJY29uU2l6ZSA9IGNvbXB1dGVkKCgpID0+IHNwbGl0QnV0dG9uUmlnaHRJY29uU2l6ZVt0aGlzLnNpemUoKV0pO1xuXG4gIHJlYWRvbmx5IGlzT3BlbiA9IHNpZ25hbChmYWxzZSk7XG5cbiAgaGFuZGxlS2V5RG93bk9uUmlnaHRCdXR0b24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmhhbmRsZUtleURvd24oZXZlbnQsIFwiQXJyb3dEb3duXCIsICgpID0+IHRoaXMuaXNPcGVuLnNldCh0cnVlKSk7XG4gICAgdGhpcy5oYW5kbGVLZXlEb3duKGV2ZW50LCBcIkVzY2FwZVwiLCAoKSA9PiB0aGlzLmlzT3Blbi5zZXQoZmFsc2UpKTtcbiAgfVxuXG4gIGhhbmRsZUtleURvd25Pbk1lbnUoZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmhhbmRsZUtleURvd24oZXZlbnQsIFwiRXNjYXBlXCIsICgpID0+IHRoaXMuaXNPcGVuLnNldChmYWxzZSkpO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVLZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50LCBrZXk6IHN0cmluZywgY2FsbGJhY2s6ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICBpZiAoZXZlbnQua2V5ID09PSBrZXkpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBjYWxsYmFjaygpO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBcbiAgY2xhc3M9XCJzcGxpdC1idXR0b24tY29udGFpbmVyIHNpemUte3sgc2l6ZSgpIH19IHt7YXBwZWFyYW5jZSgpfX1cIlxuICBbbmdDbGFzc109XCJ7J2NvbXBhY3Qtc3BhY2luZyc6IGNvbXBhY3RTcGFjaW5nKCl9XCJcbj5cbiAgPGJ1dHRvblxuICAgIGNsYXNzPVwic3BsaXQtYnV0dG9uLWxlZnQgc2l6ZS17eyBzaXplKCkgfX1cIlxuICAgIGRhdGEtdGVzdGlkPVwiTWFpbiBhY3Rpb24gYnV0dG9uXCIgXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxuICA+XG4gICAgPHJ0ZS1pY29uIFxuICAgICAgKm5nSWY9XCJpY29uKClcIlxuICAgICAgW25hbWVdPVwiaWNvbigpIVwiXG4gICAgICBbc2l6ZV09XCJzcGxpdEJ1dHRvbkxlZnRJY29uU2l6ZSgpXCJcbiAgICAvPlxuICAgIDxwIGNsYXNzPVwic3BsaXQtYnV0dG9uLWxhYmVsIHNpemUte3sgc2l6ZSgpIH19XCI+XG4gICAgICB7e2xhYmVsKCl9fVxuICAgIDwvcD5cbiAgPC9idXR0b24+XG5cbiAgPGRpdiBcbiAgICBjbGFzcz1cInNwbGl0LWJ1dHRvbi1kaXZpZGVyXCJcbiAgICBbbmdDbGFzc109XCJ7J2Rpc2FibGVkJzogZGlzYWJsZWQoKX1cIlxuICA+PC9kaXY+XG5cbiAgPGRpdiBjbGFzcz1cInNwbGl0LWJ1dHRvbi1yaWdodC1jb250YWluZXJcIj5cbiAgICA8YnV0dG9uXG4gICAgICBjbGFzcz1cInNwbGl0LWJ1dHRvbi1yaWdodCBzaXplLXt7IHNpemUoKSB9fVwiXG4gICAgICBkYXRhLXRlc3RpZD1cIk1lbnUgYnV0dG9uXCJcbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgW2F0dHIuYXJpYS1leHBhbmRlZF09XCJpc09wZW4oKVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFJpZ2h0KClcIlxuICAgICAgW2F0dHIuZGF0YS1zZWxlY3RlZF09XCJzZWxlY3RlZCgpXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICAgIChjbGljayk9XCJpc09wZW4uc2V0KHRydWUpXCJcbiAgICAgIChtb3VzZWVudGVyKT1cImlzT3Blbi5zZXQodHJ1ZSlcIlxuICAgICAgKG1vdXNlbGVhdmUpPVwiaXNPcGVuLnNldChmYWxzZSlcIlxuICAgICAgKGtleWRvd24pPVwiaGFuZGxlS2V5RG93bk9uUmlnaHRCdXR0b24oJGV2ZW50KVwiXG4gICAgPlxuICAgICAgPGRpdiBjbGFzcz1cInNwbGl0LWJ1dHRvbi1yaWdodC1pY29uLWNvbnRhaW5lclwiPlxuICAgICAgICA8cnRlLWljb24gbmFtZT1cImFycm93LWNoZXZyb24tZG93blwiIFtzaXplXT1cInNwbGl0QnV0dG9uUmlnaHRJY29uU2l6ZSgpXCIvPlxuICAgICAgPC9kaXY+XG4gICAgPC9idXR0b24+XG5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cInNwbGl0LWJ1dHRvbi1kcm9wZG93biBwb3NpdGlvbi17eyBwb3NpdGlvbigpIH19XCJcbiAgICAgIHJvbGU9XCJtZW51XCJcbiAgICAgIGRhdGEtdGVzdGlkPVwiTWVudSBjb250YWluZXJcIlxuICAgICAgW3N0eWxlLnZpc2liaWxpdHldPVwiaXNPcGVuKCkgPyAndmlzaWJsZScgOiAnaGlkZGVuJ1wiXG4gICAgICAoa2V5ZG93bik9XCJoYW5kbGVLZXlEb3duT25NZW51KCRldmVudClcIlxuICAgID5cbiAgICAgIDxuZy1jb250ZW50Lz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BsaXQtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL3NwbGl0LWJ1dHRvbi9zcGxpdC1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc3BsaXQtYnV0dG9uL3NwbGl0LWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFFL0csT0FBTyxFQUNMLHVCQUF1QixFQUN2Qix3QkFBd0IsR0FDekIsTUFBTSx3RUFBd0UsQ0FBQztBQU9oRixPQUFPLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxNQUFNLCtEQUErRCxDQUFDO0FBRTFHLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDN0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7QUFXdkQsTUFBTSxPQUFPLG9CQUFvQjtJQVJqQztRQVNXLGVBQVUsR0FBRyxLQUFLLENBQXdCLFNBQVMsQ0FBQyxDQUFDO1FBQ3JELFNBQUksR0FBRyxLQUFLLENBQWtCLEdBQUcsQ0FBQyxDQUFDO1FBQ25DLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDakMsbUJBQWMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsYUFBUSxHQUFHLEtBQUssQ0FBc0IsY0FBYyxDQUFDLENBQUM7UUFDdEQsU0FBSSxHQUFHLEtBQUssQ0FBK0MsSUFBSSxDQUFDLENBQUM7UUFDakUsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixtQkFBYyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQ2pDLFlBQU8sR0FBRyxLQUFLLENBQXlCLEVBQUUsQ0FBQyxDQUFDO1FBRTVDLDRCQUF1QixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQy9FLDZCQUF3QixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRWpGLFdBQU0sR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdkIscUJBQWdCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUN4QyxPQUFPLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFhLENBQUM7UUFDbkQsQ0FBQyxDQUFDLENBQUM7UUFDTSxzQkFBaUIsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3pDLE9BQU8sSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQWMsQ0FBQztRQUNwRCxDQUFDLENBQUMsQ0FBQztLQW9DSjtJQWxDQyxrQkFBa0IsQ0FBQyxLQUFpQjtRQUNsQyxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBaUIsQ0FBQztRQUN2QyxNQUFNLFlBQVksR0FBRyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUNyRSxNQUFNLGFBQWEsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBRTdGLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixNQUFNLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUN2RSxDQUFDO0lBRUQsV0FBVztRQUNULE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBQzFFLENBQUM7SUFFRCwwQkFBMEIsQ0FBQyxLQUFvQjtRQUM3QyxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxjQUFjLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUN2RSxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUNsRSxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxRQUFRLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRUQsbUJBQW1CLENBQUMsS0FBb0I7UUFDdEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVPLGFBQWEsQ0FBQyxLQUFvQixFQUFFLEdBQVcsRUFBRSxRQUFvQjtRQUMzRSxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssR0FBRyxFQUFFLENBQUM7WUFDdEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLFFBQVEsRUFBRSxDQUFDO1FBQ2IsQ0FBQztJQUNILENBQUM7K0dBeERVLG9CQUFvQjttR0FBcEIsb0JBQW9CLHN1Q0MzQmpDLDhpREFxREEsb2dORGhDWSxZQUFZLGlPQUFFLGFBQWEsZ0hBQUUsY0FBYzs7NEZBTTFDLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxrQkFBa0IsV0FDbkIsQ0FBQyxZQUFZLEVBQUUsYUFBYSxFQUFFLGNBQWMsQ0FBQyxjQUMxQyxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQsIHNpZ25hbCwgT25Jbml0LCBPbkRlc3Ryb3kgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQWxpZ25tZW50LCBQb3NpdGlvbiB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2NvbW1vbi9jb21tb24tdHlwZXNcIjtcbmltcG9ydCB7XG4gIHNwbGl0QnV0dG9uTGVmdEljb25TaXplLFxuICBzcGxpdEJ1dHRvblJpZ2h0SWNvblNpemUsXG59IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL3NwbGl0LWJ1dHRvbi9zcGxpdC1idXR0b24uY29uc3RhbnRzXCI7XG5pbXBvcnQge1xuICBTcGxpdEJ1dHRvbkFwcGVhcmFuY2UsXG4gIFNwbGl0QnV0dG9uSXRlbVByb3BzLFxuICBTcGxpdEJ1dHRvblBvc2l0aW9uLFxuICBTcGxpdEJ1dHRvblNpemUsXG59IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL3NwbGl0LWJ1dHRvbi9zcGxpdC1idXR0b24uaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBBUlJPV19ET1dOX0tFWSwgU1BBQ0VfS0VZIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbnN0YW50cy9rZXlib2FyZC9rZXlib2FyZC5jb25zdGFudHNcIjtcblxuaW1wb3J0IHsgRHJvcGRvd25Nb2R1bGUgfSBmcm9tIFwiLi4vZHJvcGRvd25cIjtcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi9pY29uLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgUmVndWxhckljb25JZEtleSwgVG9nZ2xhYmxlSWNvbklkS2V5IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtc3BsaXQtYnV0dG9uXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEljb25Db21wb25lbnQsIERyb3Bkb3duTW9kdWxlXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9zcGxpdC1idXR0b24uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmw6IFwiLi9zcGxpdC1idXR0b24uY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNwbGl0QnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICByZWFkb25seSBhcHBlYXJhbmNlID0gaW5wdXQ8U3BsaXRCdXR0b25BcHBlYXJhbmNlPihcInByaW1hcnlcIik7XG4gIHJlYWRvbmx5IHNpemUgPSBpbnB1dDxTcGxpdEJ1dHRvblNpemU+KFwibVwiKTtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNvbXBhY3RTcGFjaW5nID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBwb3NpdGlvbiA9IGlucHV0PFNwbGl0QnV0dG9uUG9zaXRpb24+KFwiYm90dG9tLXN0YXJ0XCIpO1xuICByZWFkb25seSBpY29uID0gaW5wdXQ8UmVndWxhckljb25JZEtleSB8IFRvZ2dsYWJsZUljb25JZEtleSB8IG51bGw+KG51bGwpO1xuICByZWFkb25seSBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgYXJpYUxhYmVsUmlnaHQgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IG9wdGlvbnMgPSBpbnB1dDxTcGxpdEJ1dHRvbkl0ZW1Qcm9wc1tdPihbXSk7XG5cbiAgcmVhZG9ubHkgc3BsaXRCdXR0b25MZWZ0SWNvblNpemUgPSBjb21wdXRlZCgoKSA9PiBzcGxpdEJ1dHRvbkxlZnRJY29uU2l6ZVt0aGlzLnNpemUoKV0pO1xuICByZWFkb25seSBzcGxpdEJ1dHRvblJpZ2h0SWNvblNpemUgPSBjb21wdXRlZCgoKSA9PiBzcGxpdEJ1dHRvblJpZ2h0SWNvblNpemVbdGhpcy5zaXplKCldKTtcblxuICByZWFkb25seSBpc09wZW4gPSBzaWduYWwoZmFsc2UpO1xuXG4gIHJlYWRvbmx5IGludGVybmFsUG9zaXRpb24gPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIHRoaXMucG9zaXRpb24oKS5zcGxpdChcIi1cIilbMF0gYXMgUG9zaXRpb247XG4gIH0pO1xuICByZWFkb25seSBpbnRlcm5hbEFsaWdubWVudCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4gdGhpcy5wb3NpdGlvbigpLnNwbGl0KFwiLVwiKVsxXSBhcyBBbGlnbm1lbnQ7XG4gIH0pO1xuXG4gIGhhbmRsZUNsaWNrT3V0c2lkZShldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBFbGVtZW50O1xuICAgIGNvbnN0IGFsbERyb3Bkb3ducyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoXCJbZGF0YS1kcm9wZG93bi1pZF1cIik7XG4gICAgY29uc3QgY2xpY2tlZEluc2lkZSA9IEFycmF5LmZyb20oYWxsRHJvcGRvd25zKS5zb21lKChkcm9wZG93bikgPT4gZHJvcGRvd24uY29udGFpbnModGFyZ2V0KSk7XG5cbiAgICBpZiAoIWNsaWNrZWRJbnNpZGUpIHtcbiAgICAgIHRoaXMuaXNPcGVuLnNldChmYWxzZSk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCB0aGlzLmhhbmRsZUNsaWNrT3V0c2lkZS5iaW5kKHRoaXMpKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgdGhpcy5oYW5kbGVDbGlja091dHNpZGUuYmluZCh0aGlzKSk7XG4gIH1cblxuICBoYW5kbGVLZXlEb3duT25SaWdodEJ1dHRvbihldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIHRoaXMuaGFuZGxlS2V5RG93bihldmVudCwgQVJST1dfRE9XTl9LRVksICgpID0+IHRoaXMuaXNPcGVuLnNldCh0cnVlKSk7XG4gICAgdGhpcy5oYW5kbGVLZXlEb3duKGV2ZW50LCBTUEFDRV9LRVksICgpID0+IHRoaXMuaXNPcGVuLnNldCh0cnVlKSk7XG4gICAgdGhpcy5oYW5kbGVLZXlEb3duKGV2ZW50LCBcIkVzY2FwZVwiLCAoKSA9PiB0aGlzLmlzT3Blbi5zZXQoZmFsc2UpKTtcbiAgfVxuXG4gIGhhbmRsZUtleURvd25Pbk1lbnUoZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmhhbmRsZUtleURvd24oZXZlbnQsIFwiRXNjYXBlXCIsICgpID0+IHRoaXMuaXNPcGVuLnNldChmYWxzZSkpO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVLZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50LCBrZXk6IHN0cmluZywgY2FsbGJhY2s6ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICBpZiAoZXZlbnQua2V5ID09PSBrZXkpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBjYWxsYmFjaygpO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cInNwbGl0LWJ1dHRvbi1jb250YWluZXIgc2l6ZS17eyBzaXplKCkgfX0ge3sgYXBwZWFyYW5jZSgpIH19XCJcbiAgW25nQ2xhc3NdPVwieyAnY29tcGFjdC1zcGFjaW5nJzogY29tcGFjdFNwYWNpbmcoKSB9XCJcbj5cbiAgPGJ1dHRvblxuICAgIGNsYXNzPVwic3BsaXQtYnV0dG9uLWxlZnQgc2l6ZS17eyBzaXplKCkgfX1cIlxuICAgIGRhdGEtdGVzdGlkPVwiTWFpbiBhY3Rpb24gYnV0dG9uXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gID5cbiAgICA8cnRlLWljb25cbiAgICAgICpuZ0lmPVwiaWNvbigpXCJcbiAgICAgIFtuYW1lXT1cImljb24oKSFcIlxuICAgICAgW3NpemVdPVwic3BsaXRCdXR0b25MZWZ0SWNvblNpemUoKVwiXG4gICAgLz5cbiAgICA8cCBjbGFzcz1cInNwbGl0LWJ1dHRvbi1sYWJlbCBzaXplLXt7IHNpemUoKSB9fVwiPlxuICAgICAge3sgbGFiZWwoKSB9fVxuICAgIDwvcD5cbiAgPC9idXR0b24+XG5cbiAgPGRpdiBjbGFzcz1cInNwbGl0LWJ1dHRvbi1kaXZpZGVyXCIgW25nQ2xhc3NdPVwieyBkaXNhYmxlZDogZGlzYWJsZWQoKSB9XCI+PC9kaXY+XG5cbiAgPGRpdlxuICAgIHJ0ZURyb3Bkb3duXG4gICAgc3R5bGU9XCJoZWlnaHQ6IDEwMCVcIlxuICAgIFtydGVEcm9wZG93blBvc2l0aW9uXT1cImludGVybmFsUG9zaXRpb24oKVwiXG4gICAgW3J0ZURyb3Bkb3duQWxpZ25tZW50XT1cImludGVybmFsQWxpZ25tZW50KClcIlxuICAgIFthdHRyLmRhdGEtdGVzdGlkXT1cIidNZW51IGNvbnRhaW5lcidcIlxuICA+XG4gICAgPGJ1dHRvblxuICAgICAgY2xhc3M9XCJzcGxpdC1idXR0b24tcmlnaHQgc2l6ZS17eyBzaXplKCkgfX1cIlxuICAgICAgcnRlRHJvcGRvd25UcmlnZ2VyXG4gICAgICBkYXRhLXRlc3RpZD1cIk1lbnUgYnV0dG9uXCJcbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgW3J0ZURyb3Bkb3duVHJpZ2dlckFjdGl2YXRlV2l0aEFycm93RG93bl09XCJ0cnVlXCJcbiAgICAgIFthdHRyLmRhdGEtZXhwYW5kZWRdPVwiaXNPcGVuKClcIlxuICAgICAgW2F0dHIuYXJpYS1leHBhbmRlZF09XCJpc09wZW4oKVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFJpZ2h0KClcIlxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxuICAgICAgKGNsaWNrKT1cImlzT3Blbi5zZXQodHJ1ZSlcIlxuICAgICAgKGtleWRvd24pPVwiaGFuZGxlS2V5RG93bk9uUmlnaHRCdXR0b24oJGV2ZW50KVwiXG4gICAgPlxuICAgICAgPGRpdiBjbGFzcz1cInNwbGl0LWJ1dHRvbi1yaWdodC1pY29uLWNvbnRhaW5lclwiPlxuICAgICAgICA8cnRlLWljb25cbiAgICAgICAgICBuYW1lPVwiYXJyb3ctY2hldnJvbi1kb3duXCJcbiAgICAgICAgICBbc2l6ZV09XCJzcGxpdEJ1dHRvblJpZ2h0SWNvblNpemUoKVwiXG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2J1dHRvbj5cbiAgICA8cnRlLWRyb3Bkb3duLW1lbnUgW2l0ZW1zXT1cIm9wdGlvbnMoKVwiIC8+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -43,10 +43,10 @@ export class SwitchComponent {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "rte-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div\n class=\"switch-container appearance-{{appearance()}}\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n (click)=\"handleClick($event)\"\n>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"switch\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [ariaLabel]=\"label()\"\n [name]=\"label()\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n [style.min-height.px]=\"switchHeight\"\n [style.min-width.px]=\"switchWidth\"\n [disabled]=\"disabled()\"\n [checked]=\"isChecked()\"\n />\n <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n @if (showIcon()) {\n <rte-icon\n class=\"icon\"\n [name]=\"isChecked() ? 'check' : 'close'\"\n [size]=\"16\"\n (click)=\"handleClick($event)\"\n ></rte-icon>\n }\n </div>\n @if (showLabel() && label()) {\n <label\n class=\"switch-label\"\n [for]=\"label()\"\n >\n {{ label() }}\n </label>\n }\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\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ selector: "rte-switch", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"switch-container appearance-{{appearance()}}\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n (click)=\"handleClick($event)\"\n>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"switch\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [ariaLabel]=\"label()\"\n [name]=\"label()\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n [style.min-height.px]=\"switchHeight\"\n [style.min-width.px]=\"switchWidth\"\n [disabled]=\"disabled()\"\n [checked]=\"isChecked()\"\n />\n <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n @if (showIcon()) {\n <rte-icon\n class=\"icon\"\n [name]=\"isChecked() ? 'check' : 'close'\"\n [size]=\"16\"\n (click)=\"handleClick($event)\"\n ></rte-icon>\n }\n </div>\n @if (showLabel() && label()) {\n <label\n class=\"switch-label\"\n [for]=\"label()\"\n >\n {{ label() }}\n </label>\n }\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\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
|
|
52
52
|
}] });
|
|
@@ -97,10 +97,10 @@ export class TextInputComponent {
|
|
|
97
97
|
this.toggleInputVisibility();
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div\n class=\"container {{labelPosition()}}\"\n [ngClass]=\"{'error': error()}\"\n [style.width]=\"width()\"\n>\n <ng-container *ngIf=\"label()\">\n <div class=\"text\">\n <div class=\"label-container\">\n <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n {{ label() }}\n </label>\n <ng-container *ngIf=\"required()\">\n <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n <span class=\"required-text\">(obligatoire)</span>\n </ng-container>\n <ng-template #requiredIcon>\n <span class=\"required-icon-container\">\n <rte-icon name=\"asterisk\" [size]=\"8\" />\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n <span class=\"required-text\">(optionnel)</span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"input-container\">\n <div\n class=\"input {{labelPosition()}}\"\n [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n >\n <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n <ng-container *ngIf=\"displayedLeftIcon()\">\n <rte-icon\n appearance=\"outlined\"\n class=\"left-icon\"\n aria-hidden=\"true\"\n [name]=\"displayedLeftIcon()!\"\n />\n </ng-container>\n\n <input\n #inputRef\n class=\"input-field\"\n [id]=\"id()\"\n [ngClass]=\"{'error': error()}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-required]=\"ariaRequired()\"\n [type]=\"isHiddenInput() ? 'password' : 'text'\"\n [maxLength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [value]=\"internalValue()\"\n (input)=\"handleChange($event)\"\n />\n\n <ng-container *ngIf=\"shouldShowRightIcon()\">\n <rte-icon-button\n appearance=\"outlined\"\n variant=\"transparent\"\n class=\"right-icon\"\n data-testid=\"right-icon\"\n [name]=\"rightIconName() || 'close'\"\n [ariaLabel]=\"rightIconAriaLabel()\"\n (click)=\"onRightIconClickHandler()\"\n />\n </ng-container>\n </div>\n </div>\n\n <ng-container *ngIf=\"assistiveTextLabel()\">\n <div class=\"assistive-text\">\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n <rte-link [label]=\"assistiveTextLabel()\" />\n </ng-container>\n <ng-template #assistiveLabel>\n <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n {{ assistiveTextLabel() }}\n </p>\n </ng-template>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\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\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\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"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div\n class=\"container {{labelPosition()}}\"\n [ngClass]=\"{'error': error()}\"\n [style.width]=\"width()\"\n>\n <ng-container *ngIf=\"label()\">\n <div class=\"text\">\n <div class=\"label-container\">\n <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n {{ label() }}\n </label>\n <ng-container *ngIf=\"required()\">\n <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n <span class=\"required-text\">(obligatoire)</span>\n </ng-container>\n <ng-template #requiredIcon>\n <span class=\"required-icon-container\">\n <rte-icon name=\"asterisk\" [size]=\"8\" />\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n <span class=\"required-text\">(optionnel)</span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"input-container\">\n <div\n class=\"input {{labelPosition()}}\"\n [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n >\n <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n <ng-container *ngIf=\"displayedLeftIcon()\">\n <rte-icon\n appearance=\"outlined\"\n class=\"left-icon\"\n aria-hidden=\"true\"\n [name]=\"displayedLeftIcon()!\"\n />\n </ng-container>\n\n <input\n #inputRef\n class=\"input-field\"\n [id]=\"id()\"\n [ngClass]=\"{'error': error()}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-required]=\"ariaRequired()\"\n [type]=\"isHiddenInput() ? 'password' : 'text'\"\n [maxLength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [value]=\"internalValue()\"\n (input)=\"handleChange($event)\"\n />\n\n <ng-container *ngIf=\"shouldShowRightIcon()\">\n <rte-icon-button\n appearance=\"outlined\"\n variant=\"transparent\"\n class=\"right-icon\"\n data-testid=\"right-icon\"\n [name]=\"rightIconName() || 'close'\"\n [ariaLabel]=\"rightIconAriaLabel()\"\n (click)=\"onRightIconClickHandler()\"\n />\n </ng-container>\n </div>\n </div>\n\n <ng-container *ngIf=\"assistiveTextLabel()\">\n <div class=\"assistive-text\">\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n <rte-link [label]=\"assistiveTextLabel()\" />\n </ng-container>\n <ng-template #assistiveLabel>\n <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n {{ assistiveTextLabel() }}\n </p>\n </ng-template>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\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\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\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"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: "rte-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container {{labelPosition()}}\"\n [ngClass]=\"{'error': error()}\"\n [style.width]=\"width()\"\n>\n <ng-container *ngIf=\"label()\">\n <div class=\"text\">\n <div class=\"label-container\">\n <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n {{ label() }}\n </label>\n <ng-container *ngIf=\"required()\">\n <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n <span class=\"required-text\">(obligatoire)</span>\n </ng-container>\n <ng-template #requiredIcon>\n <span class=\"required-icon-container\">\n <rte-icon name=\"asterisk\" [size]=\"8\" />\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n <span class=\"required-text\">(optionnel)</span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"input-container\">\n <div\n class=\"input {{labelPosition()}}\"\n [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n >\n <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n <ng-container *ngIf=\"displayedLeftIcon()\">\n <rte-icon\n appearance=\"outlined\"\n class=\"left-icon\"\n aria-hidden=\"true\"\n [name]=\"displayedLeftIcon()!\"\n />\n </ng-container>\n\n <input\n #inputRef\n class=\"input-field\"\n [id]=\"id()\"\n [ngClass]=\"{'error': error()}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-required]=\"ariaRequired()\"\n [type]=\"isHiddenInput() ? 'password' : 'text'\"\n [maxLength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [value]=\"internalValue()\"\n (input)=\"handleChange($event)\"\n />\n\n <ng-container *ngIf=\"shouldShowRightIcon()\">\n <rte-icon-button\n appearance=\"outlined\"\n variant=\"transparent\"\n class=\"right-icon\"\n data-testid=\"right-icon\"\n [name]=\"rightIconName() || 'close'\"\n [ariaLabel]=\"rightIconAriaLabel()\"\n (click)=\"onRightIconClickHandler()\"\n />\n </ng-container>\n </div>\n </div>\n\n <ng-container *ngIf=\"assistiveTextLabel()\">\n <div class=\"assistive-text\">\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n <rte-link [label]=\"assistiveTextLabel()\" />\n </ng-container>\n <ng-template #assistiveLabel>\n <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n {{ assistiveTextLabel() }}\n </p>\n </ng-template>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\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\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"] }]
|
|
106
106
|
}], ctorParameters: () => [] });
|
|
@@ -51,16 +51,16 @@ export class TextareaComponent {
|
|
|
51
51
|
this.textareaRef()?.nativeElement?.scrollTo({ top: 0 });
|
|
52
52
|
this.blur.emit(event);
|
|
53
53
|
}
|
|
54
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
55
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
54
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
55
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "rte-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextAppearance: { classPropertyName: "assistiveTextAppearance", publicName: "assistiveTextAppearance", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLink: { classPropertyName: "assistiveTextLink", publicName: "assistiveTextLink", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, resizeable: { classPropertyName: "resizeable", publicName: "resizeable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", blur: "blur" }, providers: [
|
|
56
56
|
{
|
|
57
57
|
provide: NG_VALUE_ACCESSOR,
|
|
58
58
|
useExisting: TextareaComponent,
|
|
59
59
|
multi: true,
|
|
60
60
|
},
|
|
61
|
-
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container\" [attr.data-label-position]=\"labelPosition()\"> \n <label *ngIf=\"label() && labelPosition() === 'side'\" [attr.data-label-position]=\"labelPosition()\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n <div class=\"top-position-container\" [attr.data-label-position]=\"labelPosition()\">\n <div class=\"header-container\" [attr.data-label-position]=\"labelPosition()\">\n <label *ngIf=\"label() && labelPosition() === 'top'\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n <span *ngIf=\"isCounterVisible()\" class=\"character-counter\">{{ characterCount }}/{{ maxLength() }}</span>\n </div>\n <div class=\"textarea-container\" [attr.data-label-position]=\"labelPosition()\">\n <textarea\n #textarea\n class=\"textarea {{ assistiveTextAppearance() }}\"\n [class.resizeable]=\"resizeable()\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [attr.aria-labelledby]=\"labelId() || ariaLabelledby()\"\n [attr.required]=\"required() || null\"\n [attr.maxLength]=\"maxLength() !== undefined ? maxLength() : null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.readonly]=\"readOnly() || null\"\n [value]=\"value() !== undefined ? value() : null\"\n [defaultValue]=\"defaultValue() !== undefined ? defaultValue() : null\"\n [attr.rows]=\"rows()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n <rte-link *ngIf=\"isAssistiveTextLinkVisible()\" class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"assistiveTextLink() || ''\" [label]=\"assistiveTextLabel() || ''\">\n </rte-link>\n <div *ngIf=\"assistiveTextAppearance() !== 'link'\" class=\"assistive-text {{ assistiveTextAppearance() }}\" [ngClass]=\"{'disabled' : disabled()}\">\n <rte-icon *ngIf=\"assistiveTextAppearance() === 'error'\" name=\"error\" [size]=\"assistiveTextIconSize\"></rte-icon>\n <rte-icon *ngIf=\"assistiveTextAppearance() === 'success'\" name=\"check-circle\" [size]=\"assistiveTextIconSize\"></rte-icon>\n <span>{{ assistiveTextLabel() }}</span>\n </div>\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\";.container[data-label-position=side]{display:flex;flex-direction:row}.top-position-container{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;display:flex;height:100%;padding:0;flex-direction:column;align-items:flex-start;gap:0px;flex-shrink:0;border-radius:0;opacity:100%}.top-position-container[data-label-position=side]{flex-grow:1}.top-position-container .header-container{display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box;gap:8px}.top-position-container .header-container[data-label-position=side]{padding:0;justify-content:flex-end}.top-position-container .textarea-container{display:flex;flex-direction:column;width:100%;align-items:flex-start}.top-position-container .textarea-container .textarea{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%);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-primary);min-height:70px;padding:8px 16px;width:100%;min-width:140px;border-radius:8px;border:1px solid var(--border-secondary);opacity:100%;background-color:var(--background-default);resize:none;box-sizing:border-box}@media (min-width: 1024px){.top-position-container .textarea-container .textarea{min-height:56px;min-width:112px;max-width:1100px}}.top-position-container .textarea-container .textarea:focus-visible,.top-position-container .textarea-container .textarea:active{outline:none}.top-position-container .textarea-container .textarea:focus-visible:not(:disabled),.top-position-container .textarea-container .textarea:active:not(:disabled){outline:1px solid var(--border-brand-default);border:1px solid var(--border-brand-default)}.top-position-container .textarea-container .textarea.error:not(:disabled){outline:1px solid var(--border-danger);border:1px solid var(--border-danger)}.top-position-container .textarea-container .textarea.resizeable{resize:vertical}.top-position-container .textarea-container .textarea:disabled,.top-position-container .textarea-container .textarea:read-only{cursor:not-allowed;background-color:var(--background-disabled)}.top-position-container .textarea-container .textarea:disabled{resize:none}.top-position-container .textarea-container .textarea:read-only{color:var(--content-secondary)}.top-position-container .textarea-container .assistive-text-link{padding:4px 8px}.top-position-container .textarea-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;padding:4px 8px;color:var(--content-tertiary);gap:4px}.top-position-container .textarea-container .assistive-text.error:not(.disabled){color:var(--content-danger)}.top-position-container .textarea-container .assistive-text.success{color:var(--content-success)}.character-counter{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}label{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-secondary);max-width:300px;justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}label[data-label-position=side]{padding:24px 8px;align-items:flex-start;gap:0px;align-self:stretch}label .requirement-indicator{margin-left:2px}label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger)}\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"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }] }); }
|
|
61
|
+
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container\" [attr.data-label-position]=\"labelPosition()\"> \n <label *ngIf=\"label() && labelPosition() === 'side'\" [attr.data-label-position]=\"labelPosition()\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n <div class=\"top-position-container\" [attr.data-label-position]=\"labelPosition()\">\n <div class=\"header-container\" [attr.data-label-position]=\"labelPosition()\">\n <label *ngIf=\"label() && labelPosition() === 'top'\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n <span *ngIf=\"isCounterVisible()\" class=\"character-counter\">{{ characterCount }}/{{ maxLength() }}</span>\n </div>\n <div class=\"textarea-container\" [attr.data-label-position]=\"labelPosition()\">\n <textarea\n #textarea\n class=\"textarea {{ assistiveTextAppearance() }}\"\n [class.resizeable]=\"resizeable()\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [attr.aria-labelledby]=\"labelId() || ariaLabelledby()\"\n [attr.required]=\"required() || null\"\n [attr.maxLength]=\"maxLength() !== undefined ? maxLength() : null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.readonly]=\"readOnly() || null\"\n [value]=\"value() !== undefined ? value() : null\"\n [defaultValue]=\"defaultValue() !== undefined ? defaultValue() : null\"\n [attr.rows]=\"rows()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n <rte-link *ngIf=\"isAssistiveTextLinkVisible()\" class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"assistiveTextLink() || ''\" [label]=\"assistiveTextLabel() || ''\">\n </rte-link>\n <div *ngIf=\"assistiveTextAppearance() !== 'link'\" class=\"assistive-text {{ assistiveTextAppearance() }}\" [ngClass]=\"{'disabled' : disabled()}\">\n <rte-icon *ngIf=\"assistiveTextAppearance() === 'error'\" name=\"error\" [size]=\"assistiveTextIconSize\"></rte-icon>\n <rte-icon *ngIf=\"assistiveTextAppearance() === 'success'\" name=\"check-circle\" [size]=\"assistiveTextIconSize\"></rte-icon>\n <span>{{ assistiveTextLabel() }}</span>\n </div>\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\";.container[data-label-position=side]{display:flex;flex-direction:row}.top-position-container{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;display:flex;height:100%;padding:0;flex-direction:column;align-items:flex-start;gap:0px;flex-shrink:0;border-radius:0;opacity:100%}.top-position-container[data-label-position=side]{flex-grow:1}.top-position-container .header-container{display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box;gap:8px}.top-position-container .header-container[data-label-position=side]{padding:0;justify-content:flex-end}.top-position-container .textarea-container{display:flex;flex-direction:column;width:100%;align-items:flex-start}.top-position-container .textarea-container .textarea{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%);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-primary);min-height:70px;padding:8px 16px;width:100%;min-width:140px;border-radius:8px;border:1px solid var(--border-secondary);opacity:100%;background-color:var(--background-default);resize:none;box-sizing:border-box}@media (min-width: 1024px){.top-position-container .textarea-container .textarea{min-height:56px;min-width:112px;max-width:1100px}}.top-position-container .textarea-container .textarea:focus-visible,.top-position-container .textarea-container .textarea:active{outline:none}.top-position-container .textarea-container .textarea:focus-visible:not(:disabled),.top-position-container .textarea-container .textarea:active:not(:disabled){outline:1px solid var(--border-brand-default);border:1px solid var(--border-brand-default)}.top-position-container .textarea-container .textarea.error:not(:disabled){outline:1px solid var(--border-danger);border:1px solid var(--border-danger)}.top-position-container .textarea-container .textarea.resizeable{resize:vertical}.top-position-container .textarea-container .textarea:disabled,.top-position-container .textarea-container .textarea:read-only{cursor:not-allowed;background-color:var(--background-disabled)}.top-position-container .textarea-container .textarea:disabled{resize:none}.top-position-container .textarea-container .textarea:read-only{color:var(--content-secondary)}.top-position-container .textarea-container .assistive-text-link{padding:4px 8px}.top-position-container .textarea-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;padding:4px 8px;color:var(--content-tertiary);gap:4px}.top-position-container .textarea-container .assistive-text.error:not(.disabled){color:var(--content-danger)}.top-position-container .textarea-container .assistive-text.success{color:var(--content-success)}.character-counter{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}label{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-secondary);max-width:300px;justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}label[data-label-position=side]{padding:24px 8px;align-items:flex-start;gap:0px;align-self:stretch}label .requirement-indicator{margin-left:2px}label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger)}\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"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }] }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: "rte-textarea", imports: [CommonModule, IconComponent, LinkComponent], standalone: true, providers: [
|
|
66
66
|
{
|
|
@@ -9,10 +9,10 @@ export class TooltipComponent {
|
|
|
9
9
|
this.alignment = input("center");
|
|
10
10
|
this.arrow = input(true);
|
|
11
11
|
}
|
|
12
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TooltipComponent, isStandalone: true, selector: "rte-tooltip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"tooltip {{ position() }} {{ alignment() }}\"\n [ngClass]=\"{ arrow: arrow() }\"\n>\n <span role=\"tooltip\" class=\"tooltip-label\"> {{ label() }} </span>\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\";:host{position:absolute;max-width:160px;max-height:40px;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{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-primary-inverse);position:absolute;text-align:center;z-index:1;max-width:160px;max-height:40px;width:fit-content;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip.top,.tooltip.bottom{transform:translate(-50%)}.tooltip.left,.tooltip.right{transform:translateY(-50%)}.tooltip.top{bottom:0}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{right:0}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
14
14
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{ selector: "rte-tooltip", imports: [CommonModule], standalone: true, template: "<div\n class=\"tooltip {{ position() }} {{ alignment() }}\"\n [ngClass]=\"{ arrow: arrow() }\"\n>\n <span role=\"tooltip\" class=\"tooltip-label\"> {{ label() }} </span>\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\";:host{position:absolute;max-width:160px;max-height:40px;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{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-primary-inverse);position:absolute;text-align:center;z-index:1;max-width:160px;max-height:40px;width:fit-content;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip.top,.tooltip.bottom{transform:translate(-50%)}.tooltip.left,.tooltip.right{transform:translateY(-50%)}.tooltip.top{bottom:0}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{right:0}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"] }]
|
|
18
18
|
}] });
|