@design-system-rte/angular 0.10.1 → 0.12.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/README.md +27 -24
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +34 -0
- package/esm2022/lib/components/button/button.component.mjs +2 -2
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/components/chip/chip.component.mjs +9 -8
- package/esm2022/lib/components/divider/divider.component.mjs +19 -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-button/icon-button.component.mjs +3 -3
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/segmented-control/segmented-control.component.mjs +120 -0
- package/esm2022/lib/components/switch/switch.component.mjs +53 -0
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/lib/components/tooltip/tooltip.directive.mjs +18 -59
- package/esm2022/lib/services/overlay.service.mjs +51 -0
- package/esm2022/public-api.mjs +5 -1
- package/fesm2022/design-system-rte-angular.mjs +297 -84
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/breadcrumbs/breadcrumbs.component.d.ts +10 -0
- package/lib/components/chip/chip.component.d.ts +1 -2
- package/lib/components/divider/divider.component.d.ts +10 -0
- package/lib/components/grid/col/col.directive.d.ts +1 -1
- package/lib/components/grid/grid.directive.d.ts +1 -1
- package/lib/components/icon/icon.component.d.ts +1 -1
- package/lib/components/segmented-control/segmented-control.component.d.ts +32 -0
- package/lib/components/switch/switch.component.d.ts +20 -0
- package/lib/components/text-input/text-input.component.d.ts +1 -1
- package/lib/components/tooltip/tooltip.directive.d.ts +5 -7
- package/lib/services/overlay.service.d.ts +12 -0
- package/package.json +2 -2
- package/public-api.d.ts +4 -0
|
@@ -25,10 +25,10 @@ export class IconButtonComponent {
|
|
|
25
25
|
this.click.emit(event);
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconButtonComponent, isStandalone: true, selector: "rte-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", 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: { click: "click" }, ngImport: i0, template: "<button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n (click)=\"onClick($event)\"\n>\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n</button>", 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-icon-button{display:inline-flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative}.rte-icon-button:focus-visible:after{content:\"\";position:absolute;inset:-4px;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px var(--border-brand-focused)}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconButtonComponent, isStandalone: true, selector: "rte-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", 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: { click: "click" }, ngImport: i0, template: "<button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n (click)=\"onClick($event)\"\n>\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n</button>", 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-icon-button{display:inline-flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative}.rte-icon-button:focus-visible:after{content:\"\";position:absolute;inset:-4px;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px var(--border-brand-focused)}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-press)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n (click)=\"onClick($event)\"\n>\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n</button>", 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-icon-button{display:inline-flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative}.rte-icon-button:focus-visible:after{content:\"\";position:absolute;inset:-4px;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px var(--border-brand-focused)}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)
|
|
32
|
+
args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n (click)=\"onClick($event)\"\n>\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n</button>", 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-icon-button{display:inline-flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative}.rte-icon-button:focus-visible:after{content:\"\";position:absolute;inset:-4px;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px var(--border-brand-focused)}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-press)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"] }]
|
|
33
33
|
}] });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHNUYsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDBFQUEwRSxDQUFDO0FBRTFHLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQVd2RCxNQUFNLE9BQU8sbUJBQW1CO0lBUmhDO1FBU1csYUFBUSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUNqQyxTQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBeUMsQ0FBQztRQUMvRCxTQUFJLEdBQUcsS0FBSyxDQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQzlCLFlBQU8sR0FBRyxLQUFLLENBQWdCLFNBQVMsQ0FBQyxDQUFDO1FBQzFDLFNBQUksR0FBRyxLQUFLLENBQWEsUUFBUSxDQUFDLENBQUM7UUFDbkMsZUFBVSxHQUFHLEtBQUssQ0FBd0IsVUFBVSxDQUFDLENBQUM7UUFDdEQsbUJBQWMsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDdkMsY0FBUyxHQUFHLEtBQUssQ0FBcUIsU0FBUyxDQUFDLENBQUM7UUFDakQsbUJBQWMsR0FBRyxLQUFLLENBQXFCLFNBQVMsQ0FBQyxDQUFDO1FBRXRELG1CQUFjLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRTdELG9CQUFlLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRS9ELFVBQUssR0FBRyxNQUFNLEVBQThCLENBQUM7S0FNdkQ7SUFKQyxPQUFPLENBQUMsS0FBaUM7UUFDdkMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7K0dBcEJVLG1CQUFtQjttR0FBbkIsbUJBQW1CLGt3Q0NsQmhDLHNiQWVTLDI1SERIRyxZQUFZLG1JQUFFLGFBQWE7OzRGQU0xQixtQkFBbUI7a0JBUi9CLFNBQVM7K0JBQ0UsaUJBQWlCLFdBQ2xCLENBQUMsWUFBWSxFQUFFLGFBQWEsQ0FBQyxjQUMxQixJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQsIG91dHB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCdXR0b25UeXBlIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IEJ1dHRvblNpemUsIEJ1dHRvblZhcmlhbnQgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9idXR0b24vY29tbW9uL2NvbW1vbi1idXR0b25cIjtcbmltcG9ydCB7IGJ1dHRvbkljb25TaXplIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYnV0dG9uL2NvbW1vbi9jb21tb24tYnV0dG9uLmNvbnN0YW50c1wiO1xuXG5pbXBvcnQgeyBpc1ZhbGlkSWNvbk5hbWUgfSBmcm9tIFwiLi4vaWNvbi9pY29uLW1hcFwiO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBSZWd1bGFySWNvbklkS2V5LCBUb2dnbGFibGVJY29uSWRLZXkgfSBmcm9tIFwiLi4vaWNvbi9pY29uLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1pY29uLWJ1dHRvblwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9pY29uLWJ1dHRvbi5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2ljb24tYnV0dG9uLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uQnV0dG9uQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgZGlzYWJsZWQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IG5hbWUgPSBpbnB1dC5yZXF1aXJlZDxSZWd1bGFySWNvbklkS2V5IHwgVG9nZ2xhYmxlSWNvbklkS2V5PigpO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8QnV0dG9uU2l6ZT4oXCJtXCIpO1xuICByZWFkb25seSB2YXJpYW50ID0gaW5wdXQ8QnV0dG9uVmFyaWFudD4oXCJwcmltYXJ5XCIpO1xuICByZWFkb25seSB0eXBlID0gaW5wdXQ8QnV0dG9uVHlwZT4oXCJidXR0b25cIik7XG4gIHJlYWRvbmx5IGFwcGVhcmFuY2UgPSBpbnB1dDxcIm91dGxpbmVkXCIgfCBcImZpbGxlZFwiPihcIm91dGxpbmVkXCIpO1xuICByZWFkb25seSBjb21wYWN0U3BhY2luZyA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgYXJpYUxhYmVsID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuICByZWFkb25seSBhcmlhTGFiZWxsZWRCeSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcblxuICByZWFkb25seSBidXR0b25JY29uU2l6ZSA9IGNvbXB1dGVkKCgpID0+IGJ1dHRvbkljb25TaXplW3RoaXMuc2l6ZSgpXSk7XG5cbiAgcmVhZG9ubHkgaXNWYWxpZEljb25OYW1lID0gY29tcHV0ZWQoKCkgPT4gaXNWYWxpZEljb25OYW1lKHRoaXMubmFtZSgpKSk7XG5cbiAgcmVhZG9ubHkgY2xpY2sgPSBvdXRwdXQ8TW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQ+KCk7XG5cbiAgb25DbGljayhldmVudDogTW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLmNsaWNrLmVtaXQoZXZlbnQpO1xuICB9XG59XG4iLCI8YnV0dG9uXG4gICpuZ0lmPVwiaXNWYWxpZEljb25OYW1lXCJcbiAgY2xhc3M9XCJydGUtaWNvbi1idXR0b24ge3sgdmFyaWFudCgpIH19IHNpemUte3sgc2l6ZSgpIH19XCJcbiAgW2NsYXNzLmNvbXBhY3Qtc3BhY2luZ109XCJjb21wYWN0U3BhY2luZygpXCJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxuICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbCgpXCJcbiAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZEJ5KClcIlxuICBbdHlwZV09XCJ0eXBlKClcIlxuICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbj5cbiAgPHJ0ZS1pY29uXG4gICAgW25hbWVdPVwibmFtZSgpXCJcbiAgICBbYXBwZWFyYW5jZV09XCJhcHBlYXJhbmNlKClcIlxuICAgIFtzaXplXT1cImJ1dHRvbkljb25TaXplKClcIlxuICAvPlxuPC9idXR0b24+Il19
|
|
@@ -15,10 +15,10 @@ export class RadioButtonComponent {
|
|
|
15
15
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
|
|
22
|
+
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
|
|
23
23
|
}] });
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL3JhZGlvLWJ1dHRvbi9yYWRpby1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSx3RUFBd0UsQ0FBQzs7O0FBVW5HLE1BQU0sT0FBTyxvQkFBb0I7SUFSakM7UUFTVyxVQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2xCLGNBQVMsR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdEIsY0FBUyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN4QixhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLFVBQUssR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckIsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQyxjQUFTLEdBQUcsU0FBUyxDQUFDO1FBRWIsZ0JBQVcsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0tBQzNFOytHQVZZLG9CQUFvQjttR0FBcEIsb0JBQW9CLGsxQkNaakMscXdCQXdCQSx3cEZEbEJZLFlBQVk7OzRGQU1YLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxrQkFBa0IsV0FDbkIsQ0FBQyxZQUFZLENBQUMsY0FDWCxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgbGFiZWxTaXplIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb25zdGFudHNcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1yYWRpby1idXR0b25cIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBSYWRpb0J1dHRvbkNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGxhYmVsID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IGdyb3VwTmFtZSA9IGlucHV0KFwiXCIpO1xuICByZWFkb25seSBzaG93TGFiZWwgPSBpbnB1dCh0cnVlKTtcbiAgcmVhZG9ubHkgZGlzYWJsZWQgPSBpbnB1dChmYWxzZSk7XG4gIHJlYWRvbmx5IGVycm9yID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSByZWFkT25seSA9IGlucHV0KGZhbHNlKTtcbiAgbGFiZWxTaXplID0gbGFiZWxTaXplO1xuXG4gIHJlYWRvbmx5IGlzRGlzcGxheWVkID0gY29tcHV0ZWQoKCkgPT4gISh0aGlzLmRpc2FibGVkKCkgJiYgdGhpcy5lcnJvcigpKSk7XG59XG4iLCIgICAgPGRpdiAqbmdJZj1cImlzRGlzcGxheWVkKClcIiBjbGFzcz1cInJ0ZS1yYWRpby1idXR0b24tY29udGFpbmVyXCI+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgICAgICAgIGNsYXNzPVwicnRlLXJhZGlvLWJ1dHRvblwiXG4gICAgICAgICAgICBbaWRdPVwibGFiZWwoKVwiXG4gICAgICAgICAgICBbdmFsdWVdPVwibGFiZWwoKVwiXG4gICAgICAgICAgICBbc2l6ZV09XCJsYWJlbFNpemVcIlxuICAgICAgICAgICAgW25hbWVdPVwiZ3JvdXBOYW1lKClcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieydlcnJvcic6IGVycm9yKCksICdyZWFkLW9ubHknOiByZWFkT25seSgpfVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxsYWJlbCBcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd0xhYmVsKClcIiBcbiAgICAgICAgICAgIGNsYXNzPVwicnRlLXJhZGlvLWJ1dHRvbi1sYWJlbFwiIFxuICAgICAgICAgICAgW2Zvcl09XCJsYWJlbCgpXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICAgICAnZXJyb3InOiBlcnJvcigpLFxuICAgICAgICAgICAgICAgICdyZWFkLW9ubHknOiByZWFkT25seSgpLFxuICAgICAgICAgICAgICAgICdkaXNhYmxlZCc6IGRpc2FibGVkKClcbiAgICAgICAgICAgIH1cIlxuICAgICAgICA+XG4gICAgICAgICAgICB7eyBsYWJlbCgpIH19XG4gICAgICAgIDwvbGFiZWw+XG4gICAgPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input, output, viewChildren, computed, signal, } from "@angular/core";
|
|
3
|
+
import { getSegmentPosition, focusNextNotSegmentElement, focusPreviousNotSegmentElement, focusNextSegmentElement, focusPreviousSegmentElement, isValidSegmentedControlOptions, } from "@design-system-rte/core/components/segmented-control/segmented-control-utils";
|
|
4
|
+
import { FOCUSABLE_ELEMENTS_QUERY } from "@design-system-rte/core/constants/dom/dom.constants";
|
|
5
|
+
import { ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ENTER_KEY, SPACE_KEY, TAB_KEY, } from "@design-system-rte/core/constants/keyboard/keyboard.constants";
|
|
6
|
+
import { IconComponent } from "../icon/icon.component";
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@angular/common";
|
|
9
|
+
const segmentClass = "rte-segment";
|
|
10
|
+
const segmentSelector = `.${segmentClass}`;
|
|
11
|
+
export class SegmentedControlComponent {
|
|
12
|
+
constructor() {
|
|
13
|
+
this.options = input([]);
|
|
14
|
+
this.change = output();
|
|
15
|
+
this.selectedSegment = input();
|
|
16
|
+
this.ariaLabel = input();
|
|
17
|
+
this.ariaLabelledBy = input();
|
|
18
|
+
this.segmentRefs = viewChildren("segment");
|
|
19
|
+
this.sliderLeft = signal(0);
|
|
20
|
+
this.sliderWidth = signal(0);
|
|
21
|
+
this.segmentSelectedIndicatorStyle = computed(() => ({
|
|
22
|
+
left: `${this.sliderLeft()}px`,
|
|
23
|
+
width: `${this.sliderWidth()}px`,
|
|
24
|
+
}));
|
|
25
|
+
this.isValidOptions = computed(() => isValidSegmentedControlOptions(this.options()));
|
|
26
|
+
this.lastKeydown = null;
|
|
27
|
+
this.onGlobalKeyDown = (event) => {
|
|
28
|
+
this.lastKeydown = event.key;
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
ngOnChanges(changes) {
|
|
32
|
+
if (changes["selectedSegment"]) {
|
|
33
|
+
this.updateSelectedSegmentIndicator();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
ngAfterViewInit() {
|
|
37
|
+
this.updateSelectedSegmentIndicator();
|
|
38
|
+
window.addEventListener("resize", this.updateSelectedSegmentIndicator.bind(this));
|
|
39
|
+
window.addEventListener("keydown", this.onGlobalKeyDown.bind(this));
|
|
40
|
+
this.segmentRefs().forEach((segmentElement) => {
|
|
41
|
+
segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
ngOnDestroy() {
|
|
45
|
+
window.removeEventListener("resize", this.updateSelectedSegmentIndicator.bind(this));
|
|
46
|
+
window.removeEventListener("keydown", this.onGlobalKeyDown.bind(this));
|
|
47
|
+
this.segmentRefs().forEach((segmentElement) => {
|
|
48
|
+
segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
selectSegment(id) {
|
|
52
|
+
this.change.emit(id);
|
|
53
|
+
}
|
|
54
|
+
isSegmentSelected(id) {
|
|
55
|
+
return this.selectedSegment() === id;
|
|
56
|
+
}
|
|
57
|
+
handleKeyUp(event) {
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
if (event.key === ARROW_RIGHT_KEY || event.key === ARROW_LEFT_KEY) {
|
|
60
|
+
const allSegmentElements = Array.from(document.activeElement?.parentElement?.parentElement?.querySelectorAll(segmentSelector)) || [];
|
|
61
|
+
const currentActiveSegmentElementIndex = Array.from(allSegmentElements).findIndex((element) => element === document.activeElement);
|
|
62
|
+
if (event.key === ARROW_RIGHT_KEY) {
|
|
63
|
+
focusNextSegmentElement(currentActiveSegmentElementIndex, allSegmentElements);
|
|
64
|
+
}
|
|
65
|
+
else if (event.key === ARROW_LEFT_KEY) {
|
|
66
|
+
focusPreviousSegmentElement(currentActiveSegmentElementIndex, allSegmentElements);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
else if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
|
|
70
|
+
const target = event.target;
|
|
71
|
+
const dataId = target.getAttribute("data-id");
|
|
72
|
+
this.selectSegment(dataId || "");
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
handleKeyDown(event) {
|
|
76
|
+
if (event.key === TAB_KEY || event.key === SPACE_KEY || event.key === ENTER_KEY) {
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
}
|
|
79
|
+
if (event.key === TAB_KEY) {
|
|
80
|
+
const allFocusableElements = Array.from(document.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY));
|
|
81
|
+
const currentActiveElement = document.activeElement;
|
|
82
|
+
const currentIndex = allFocusableElements.indexOf(currentActiveElement);
|
|
83
|
+
if (event.shiftKey) {
|
|
84
|
+
focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
getSegmentPosition(index) {
|
|
92
|
+
return getSegmentPosition(index, this.options().length);
|
|
93
|
+
}
|
|
94
|
+
updateSelectedSegmentIndicator() {
|
|
95
|
+
const idx = this.options().findIndex((opt) => opt.id === this.selectedSegment());
|
|
96
|
+
const segment = this.segmentRefs()[idx]?.nativeElement;
|
|
97
|
+
if (segment) {
|
|
98
|
+
this.sliderWidth.set(segment.offsetWidth);
|
|
99
|
+
this.sliderLeft.set(segment.offsetLeft);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
focusCurrentSegmentElement() {
|
|
103
|
+
if (this.lastKeydown === "Tab") {
|
|
104
|
+
const selectedSegmentElement = this.segmentRefs().find((segment) => segment.nativeElement.classList.contains("selected"))?.nativeElement;
|
|
105
|
+
if (selectedSegmentElement) {
|
|
106
|
+
selectedSegmentElement.focus();
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
this.segmentRefs()[0]?.nativeElement?.focus();
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", 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{position:relative;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 }); }
|
|
115
|
+
}
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
117
|
+
type: Component,
|
|
118
|
+
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{position:relative;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"] }]
|
|
119
|
+
}] });
|
|
120
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUVULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUdaLFFBQVEsRUFDUixNQUFNLEdBR1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNMLGtCQUFrQixFQUNsQiwwQkFBMEIsRUFDMUIsOEJBQThCLEVBQzlCLHVCQUF1QixFQUN2QiwyQkFBMkIsRUFDM0IsOEJBQThCLEdBQy9CLE1BQU0sOEVBQThFLENBQUM7QUFLdEYsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0scURBQXFELENBQUM7QUFDL0YsT0FBTyxFQUNMLGNBQWMsRUFDZCxlQUFlLEVBQ2YsU0FBUyxFQUNULFNBQVMsRUFDVCxPQUFPLEdBQ1IsTUFBTSwrREFBK0QsQ0FBQztBQUV2RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQUV2RCxNQUFNLFlBQVksR0FBRyxhQUFhLENBQUM7QUFDbkMsTUFBTSxlQUFlLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztBQVUzQyxNQUFNLE9BQU8seUJBQXlCO0lBUnRDO1FBU1csWUFBTyxHQUFHLEtBQUssQ0FBbUIsRUFBRSxDQUFDLENBQUM7UUFDdEMs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QU8sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUMxQyxDQUFDO0lBQ0gsQ0FBQztJQVFPLDBCQUEwQjtRQUNoQyxJQUFJLElBQUksQ0FBQyxXQUFXLEtBQUssS0FBSyxFQUFFLENBQUM7WUFDL0IsTUFBTSxzQkFBc0IsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FDakUsT0FBTyxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxDQUNyRCxFQUFFLGFBQWEsQ0FBQztZQUNqQixJQUFJLHNCQUFzQixFQUFFLENBQUM7Z0JBQzNCLHNCQUFzQixDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2pDLENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxDQUFDO1lBQ2hELENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzsrR0E5SFUseUJBQXlCO21HQUF6Qix5QkFBeUIsdXlCQ2pEdEMseStDQW1DTSxzckVEUU0sWUFBWSxxVkFBRSxhQUFhOzs0RkFNMUIseUJBQXlCO2tCQVJyQyxTQUFTOytCQUNFLHVCQUF1QixXQUN4QixDQUFDLFlBQVksRUFBRSxhQUFhLENBQUMsY0FDMUIsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgaW5wdXQsXG4gIG91dHB1dCxcbiAgdmlld0NoaWxkcmVuLFxuICBBZnRlclZpZXdJbml0LFxuICBPbkRlc3Ryb3ksXG4gIGNvbXB1dGVkLFxuICBzaWduYWwsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7XG4gIGdldFNlZ21lbnRQb3NpdGlvbixcbiAgZm9jdXNOZXh0Tm90U2VnbWVudEVsZW1lbnQsXG4gIGZvY3VzUHJldmlvdXNOb3RTZWdtZW50RWxlbWVudCxcbiAgZm9jdXNOZXh0U2VnbWVudEVsZW1lbnQsXG4gIGZvY3VzUHJldmlvdXNTZWdtZW50RWxlbWVudCxcbiAgaXNWYWxpZFNlZ21lbnRlZENvbnRyb2xPcHRpb25zLFxufSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9zZWdtZW50ZWQtY29udHJvbC9zZWdtZW50ZWQtY29udHJvbC11dGlsc1wiO1xuaW1wb3J0IHtcbiAgU2VnbWVudE9wdGlvbnMsXG4gIFNlZ21lbnRQcm9wcyxcbn0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBGT0NVU0FCTEVfRUxFTUVOVFNfUVVFUlkgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29uc3RhbnRzL2RvbS9kb20uY29uc3RhbnRzXCI7XG5pbXBvcnQge1xuICBBUlJPV19MRUZUX0tFWSxcbiAgQVJST1dfUklHSFRfS0VZLFxuICBFTlRFUl9LRVksXG4gIFNQQUNFX0tFWSxcbiAgVEFCX0tFWSxcbn0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbnN0YW50cy9rZXlib2FyZC9rZXlib2FyZC5jb25zdGFudHNcIjtcblxuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5cbmNvbnN0IHNlZ21lbnRDbGFzcyA9IFwicnRlLXNlZ21lbnRcIjtcbmNvbnN0IHNlZ21lbnRTZWxlY3RvciA9IGAuJHtzZWdtZW50Q2xhc3N9YDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1zZWdtZW50ZWQtY29udHJvbFwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTZWdtZW50ZWRDb250cm9sQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICByZWFkb25seSBvcHRpb25zID0gaW5wdXQ8U2VnbWVudE9wdGlvbnNbXT4oW10pO1xuICByZWFkb25seSBjaGFuZ2UgPSBvdXRwdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBzZWxlY3RlZFNlZ21lbnQgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGFyaWFMYWJlbCA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgYXJpYUxhYmVsbGVkQnkgPSBpbnB1dDxzdHJpbmc+KCk7XG5cbiAgcmVhZG9ubHkgc2VnbWVudFJlZnMgPSB2aWV3Q2hpbGRyZW48RWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD4+KFwic2VnbWVudFwiKTtcblxuICByZWFkb25seSBzbGlkZXJMZWZ0ID0gc2lnbmFsKDApO1xuICByZWFkb25seSBzbGlkZXJXaWR0aCA9IHNpZ25hbCgwKTtcblxuICByZWFkb25seSBzZWdtZW50U2VsZWN0ZWRJbmRpY2F0b3JTdHlsZSA9IGNvbXB1dGVkKCgpID0+ICh7XG4gICAgbGVmdDogYCR7dGhpcy5zbGlkZXJMZWZ0KCl9cHhgLFxuICAgIHdpZHRoOiBgJHt0aGlzLnNsaWRlcldpZHRoKCl9cHhgLFxuICB9KSk7XG5cbiAgcmVhZG9ubHkgaXNWYWxpZE9wdGlvbnMgPSBjb21wdXRlZCgoKSA9PiBpc1ZhbGlkU2VnbWVudGVkQ29udHJvbE9wdGlvbnModGhpcy5vcHRpb25zKCkpKTtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXNbXCJzZWxlY3RlZFNlZ21lbnRcIl0pIHtcbiAgICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRTZWdtZW50SW5kaWNhdG9yKCk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRTZWdtZW50SW5kaWNhdG9yKCk7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoXCJyZXNpemVcIiwgdGhpcy51cGRhdGVTZWxlY3RlZFNlZ21lbnRJbmRpY2F0b3IuYmluZCh0aGlzKSk7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoXCJrZXlkb3duXCIsIHRoaXMub25HbG9iYWxLZXlEb3duLmJpbmQodGhpcykpO1xuXG4gICAgdGhpcy5zZWdtZW50UmVmcygpLmZvckVhY2goKHNlZ21lbnRFbGVtZW50KSA9PiB7XG4gICAgICBzZWdtZW50RWxlbWVudC5uYXRpdmVFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJmb2N1c1wiLCB0aGlzLmZvY3VzQ3VycmVudFNlZ21lbnRFbGVtZW50LmJpbmQodGhpcykpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoXCJyZXNpemVcIiwgdGhpcy51cGRhdGVTZWxlY3RlZFNlZ21lbnRJbmRpY2F0b3IuYmluZCh0aGlzKSk7XG4gICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoXCJrZXlkb3duXCIsIHRoaXMub25HbG9iYWxLZXlEb3duLmJpbmQodGhpcykpO1xuXG4gICAgdGhpcy5zZWdtZW50UmVmcygpLmZvckVhY2goKHNlZ21lbnRFbGVtZW50KSA9PiB7XG4gICAgICBzZWdtZW50RWxlbWVudC5uYXRpdmVFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJmb2N1c1wiLCB0aGlzLmZvY3VzQ3VycmVudFNlZ21lbnRFbGVtZW50LmJpbmQodGhpcykpO1xuICAgIH0pO1xuICB9XG5cbiAgc2VsZWN0U2VnbWVudChpZDogc3RyaW5nKSB7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdChpZCk7XG4gIH1cblxuICBpc1NlZ21lbnRTZWxlY3RlZChpZDogc3RyaW5nKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuc2VsZWN0ZWRTZWdtZW50KCkgPT09IGlkO1xuICB9XG5cbiAgaGFuZGxlS2V5VXAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGlmIChldmVudC5rZXkgPT09IEFSUk9XX1JJR0hUX0tFWSB8fCBldmVudC5rZXkgPT09IEFSUk9XX0xFRlRfS0VZKSB7XG4gICAgICBjb25zdCBhbGxTZWdtZW50RWxlbWVudHMgPVxuICAgICAgICBBcnJheS5mcm9tKFxuICAgICAgICAgIGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQ/LnBhcmVudEVsZW1lbnQ/LnBhcmVudEVsZW1lbnQ/LnF1ZXJ5U2VsZWN0b3JBbGwoXG4gICAgICAgICAgICBzZWdtZW50U2VsZWN0b3IsXG4gICAgICAgICAgKSBhcyBOb2RlTGlzdE9mPEhUTUxFbGVtZW50PixcbiAgICAgICAgKSB8fCBbXTtcblxuICAgICAgY29uc3QgY3VycmVudEFjdGl2ZVNlZ21lbnRFbGVtZW50SW5kZXggPSBBcnJheS5mcm9tKGFsbFNlZ21lbnRFbGVtZW50cykuZmluZEluZGV4KFxuICAgICAgICAoZWxlbWVudCkgPT4gZWxlbWVudCA9PT0gZG9jdW1lbnQuYWN0aXZlRWxlbWVudCxcbiAgICAgICk7XG5cbiAgICAgIGlmIChldmVudC5rZXkgPT09IEFSUk9XX1JJR0hUX0tFWSkge1xuICAgICAgICBmb2N1c05leHRTZWdtZW50RWxlbWVudChjdXJyZW50QWN0aXZlU2VnbWVudEVsZW1lbnRJbmRleCwgYWxsU2VnbWVudEVsZW1lbnRzKTtcbiAgICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSBBUlJPV19MRUZUX0tFWSkge1xuICAgICAgICBmb2N1c1ByZXZpb3VzU2VnbWVudEVsZW1lbnQoY3VycmVudEFjdGl2ZVNlZ21lbnRFbGVtZW50SW5kZXgsIGFsbFNlZ21lbnRFbGVtZW50cyk7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChldmVudC5rZXkgPT09IFNQQUNFX0tFWSB8fCBldmVudC5rZXkgPT09IEVOVEVSX0tFWSkge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuICAgICAgY29uc3QgZGF0YUlkID0gdGFyZ2V0LmdldEF0dHJpYnV0ZShcImRhdGEtaWRcIik7XG4gICAgICB0aGlzLnNlbGVjdFNlZ21lbnQoZGF0YUlkIHx8IFwiXCIpO1xuICAgIH1cbiAgfVxuXG4gIGhhbmRsZUtleURvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQua2V5ID09PSBUQUJfS0VZIHx8IGV2ZW50LmtleSA9PT0gU1BBQ0VfS0VZIHx8IGV2ZW50LmtleSA9PT0gRU5URVJfS0VZKSB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIH1cbiAgICBpZiAoZXZlbnQua2V5ID09PSBUQUJfS0VZKSB7XG4gICAgICBjb25zdCBhbGxGb2N1c2FibGVFbGVtZW50cyA9IEFycmF5LmZyb20oZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbChGT0NVU0FCTEVfRUxFTUVOVFNfUVVFUlkpKSBhcyBIVE1MRWxlbWVudFtdO1xuICAgICAgY29uc3QgY3VycmVudEFjdGl2ZUVsZW1lbnQgPSBkb2N1bWVudC5hY3RpdmVFbGVtZW50O1xuICAgICAgY29uc3QgY3VycmVudEluZGV4ID0gYWxsRm9jdXNhYmxlRWxlbWVudHMuaW5kZXhPZihjdXJyZW50QWN0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudCk7XG5cbiAgICAgIGlmIChldmVudC5zaGlmdEtleSkge1xuICAgICAgICBmb2N1c1ByZXZpb3VzTm90U2VnbWVudEVsZW1lbnQoY3VycmVudEluZGV4LCBhbGxGb2N1c2FibGVFbGVtZW50cywgc2VnbWVudENsYXNzKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGZvY3VzTmV4dE5vdFNlZ21lbnRFbGVtZW50KGN1cnJlbnRJbmRleCwgYWxsRm9jdXNhYmxlRWxlbWVudHMsIHNlZ21lbnRDbGFzcyk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgZ2V0U2VnbWVudFBvc2l0aW9uKGluZGV4OiBudW1iZXIpOiBTZWdtZW50UHJvcHNbXCJwb3NpdGlvblwiXSB7XG4gICAgcmV0dXJuIGdldFNlZ21lbnRQb3NpdGlvbihpbmRleCwgdGhpcy5vcHRpb25zKCkubGVuZ3RoKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlU2VsZWN0ZWRTZWdtZW50SW5kaWNhdG9yKCkge1xuICAgIGNvbnN0IGlkeCA9IHRoaXMub3B0aW9ucygpLmZpbmRJbmRleCgob3B0KSA9PiBvcHQuaWQgPT09IHRoaXMuc2VsZWN0ZWRTZWdtZW50KCkpO1xuICAgIGNvbnN0IHNlZ21lbnQgPSB0aGlzLnNlZ21lbnRSZWZzKClbaWR4XT8ubmF0aXZlRWxlbWVudDtcblxuICAgIGlmIChzZWdtZW50KSB7XG4gICAgICB0aGlzLnNsaWRlcldpZHRoLnNldChzZWdtZW50Lm9mZnNldFdpZHRoKTtcbiAgICAgIHRoaXMuc2xpZGVyTGVmdC5zZXQoc2VnbWVudC5vZmZzZXRMZWZ0KTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGxhc3RLZXlkb3duOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcblxuICBwcml2YXRlIG9uR2xvYmFsS2V5RG93biA9IChldmVudDogS2V5Ym9hcmRFdmVudCkgPT4ge1xuICAgIHRoaXMubGFzdEtleWRvd24gPSBldmVudC5rZXk7XG4gIH07XG5cbiAgcHJpdmF0ZSBmb2N1c0N1cnJlbnRTZWdtZW50RWxlbWVudCgpIHtcbiAgICBpZiAodGhpcy5sYXN0S2V5ZG93biA9PT0gXCJUYWJcIikge1xuICAgICAgY29uc3Qgc2VsZWN0ZWRTZWdtZW50RWxlbWVudCA9IHRoaXMuc2VnbWVudFJlZnMoKS5maW5kKChzZWdtZW50KSA9PlxuICAgICAgICBzZWdtZW50Lm5hdGl2ZUVsZW1lbnQuY2xhc3NMaXN0LmNvbnRhaW5zKFwic2VsZWN0ZWRcIiksXG4gICAgICApPy5uYXRpdmVFbGVtZW50O1xuICAgICAgaWYgKHNlbGVjdGVkU2VnbWVudEVsZW1lbnQpIHtcbiAgICAgICAgc2VsZWN0ZWRTZWdtZW50RWxlbWVudC5mb2N1cygpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5zZWdtZW50UmVmcygpWzBdPy5uYXRpdmVFbGVtZW50Py5mb2N1cygpO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIiwiPGRpdiAqbmdJZj1cImlzVmFsaWRPcHRpb25zKClcIiBjbGFzcz1cInJ0ZS1zZWdtZW50ZWQtY29udHJvbFwiIHJvbGU9XCJyYWRpb2dyb3VwXCIgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWwoKVwiPlxuICA8c3BhbiBjbGFzcz1cInJ0ZS1zZWdtZW50LXNlbGVjdGVkLWluZGljYXRvclwiIFtuZ1N0eWxlXT1cInNlZ21lbnRTZWxlY3RlZEluZGljYXRvclN0eWxlKClcIj48L3NwYW4+XG4gIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zKCk7IGxldCBpZHggPSBpbmRleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJydGUtc2VnbWVudC1jb250YWluZXJcIiBbYXR0ci5kYXRhLXBvc2l0aW9uXT1cImdldFNlZ21lbnRQb3NpdGlvbihpZHgpXCI+XG4gICAgICA8ZGl2XG4gICAgICAjc2VnbWVudFxuICAgICAgcm9sZT1cInJhZGlvXCJcbiAgICAgIGNsYXNzPVwicnRlLXNlZ21lbnRcIlxuICAgICAgdGFiaW5kZXg9XCIwXCJcbiAgICAgIFthdHRyLmRhdGEtaWRdPVwib3B0aW9uLmlkXCJcbiAgICAgIFthdHRyLmRhdGEtc2VnbWVudC10eXBlXT1cIm9wdGlvbi5pY29uID8gICdpY29uJyA6ICdsYWJlbCdcIlxuICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cImlzU2VnbWVudFNlbGVjdGVkKG9wdGlvbi5pZClcIlxuICAgICAgW2F0dHIuYXJpYS1jaGVja2VkXT1cImlzU2VnbWVudFNlbGVjdGVkKG9wdGlvbi5pZClcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJvcHRpb24ubGFiZWxcIlxuICAgICAgKGNsaWNrKT1cInNlbGVjdFNlZ21lbnQob3B0aW9uLmlkKVwiXG4gICAgICAoa2V5ZG93bik9XCJoYW5kbGVLZXlEb3duKCRldmVudClcIlxuICAgICAgKGtleXVwKT1cImhhbmRsZUtleVVwKCRldmVudClcIlxuICAgICAgPlxuICAgICAgPHJ0ZS1pY29uXG4gICAgICAgICAgKm5nSWY9XCJpc1NlZ21lbnRTZWxlY3RlZChvcHRpb24uaWQpXCJcbiAgICAgICAgICBuYW1lPVwiY2hlY2stc21hbGxcIlxuICAgICAgICAgIGNsYXNzPVwicnRlLXNlbGVjdGVkLWljb25cIlxuICAgICAgICAgIFtzaXplXT1cIjI0XCJcbiAgICAgIC8+XG4gICAgICA8ZGl2IGNsYXNzPVwicnRlLXNlZ21lbnQtY29udGVudFwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwib3B0aW9uLmljb247IGVsc2UgbGFiZWxcIj5cbiAgICAgICAgICA8cnRlLWljb24gW25hbWVdPVwib3B0aW9uLmljb25cIiBbc2l6ZV09XCIyNFwiIFthcHBlYXJhbmNlXT1cImlzU2VnbWVudFNlbGVjdGVkKG9wdGlvbi5pZCkgPyAnZmlsbGVkJyA6ICdvdXRsaW5lZCcgXCI+PC9ydGUtaWNvbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjbGFiZWw+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJydGUtc2VnbWVudC1sYWJlbFwiPnt7IG9wdGlvbi5sYWJlbCB9fTwvc3Bhbj5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj4iXX0=
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input, signal, output } from "@angular/core";
|
|
3
|
+
import { switchHeight, switchWidth } from "@design-system-rte/core/components/switch/switch.constants";
|
|
4
|
+
import { IconComponent } from "../icon/icon.component";
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@angular/common";
|
|
7
|
+
export class SwitchComponent {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.label = input("");
|
|
10
|
+
this.appearance = input("brand");
|
|
11
|
+
this.showLabel = input(true);
|
|
12
|
+
this.showIcon = input(true);
|
|
13
|
+
this.disabled = input(false);
|
|
14
|
+
this.readOnly = input(false);
|
|
15
|
+
this.checked = input(false);
|
|
16
|
+
this.stateChange = output();
|
|
17
|
+
this.switchHeight = switchHeight;
|
|
18
|
+
this.switchWidth = switchWidth;
|
|
19
|
+
this.isChecked = signal(false);
|
|
20
|
+
}
|
|
21
|
+
ngOnInit() {
|
|
22
|
+
this.isChecked.set(this.checked());
|
|
23
|
+
}
|
|
24
|
+
handleChange(event) {
|
|
25
|
+
const target = event.target;
|
|
26
|
+
this.isChecked.set(target.checked);
|
|
27
|
+
this.stateChange.emit(event);
|
|
28
|
+
}
|
|
29
|
+
handleClick(event) {
|
|
30
|
+
if (this.readOnly() || this.disabled()) {
|
|
31
|
+
event.stopPropagation();
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
const inputElement = event.currentTarget.querySelector('input[type="checkbox"]');
|
|
35
|
+
if (inputElement) {
|
|
36
|
+
inputElement.checked = !this.isChecked();
|
|
37
|
+
const changeEvent = new Event("change", { bubbles: true });
|
|
38
|
+
Object.defineProperty(changeEvent, "target", {
|
|
39
|
+
value: inputElement,
|
|
40
|
+
writable: false,
|
|
41
|
+
});
|
|
42
|
+
this.handleChange(changeEvent);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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
|
+
}
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
50
|
+
type: Component,
|
|
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
|
+
}] });
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL3N3aXRjaC9zd2l0Y2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvc3dpdGNoL3N3aXRjaC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRyxPQUFPLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxNQUFNLDREQUE0RCxDQUFDO0FBR3ZHLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBVXZELE1BQU0sT0FBTyxlQUFlO0lBUjVCO1FBU1csVUFBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNsQixlQUFVLEdBQUcsS0FBSyxDQUE0QixPQUFPLENBQUMsQ0FBQztRQUN2RCxjQUFTLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hCLGFBQVEsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdkIsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLFlBQU8sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdkIsZ0JBQVcsR0FBRyxNQUFNLEVBQVMsQ0FBQztRQUV2QyxpQkFBWSxHQUFHLFlBQVksQ0FBQztRQUM1QixnQkFBVyxHQUFHLFdBQVcsQ0FBQztRQUVqQixjQUFTLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBOEJwQztJQTVCQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFZO1FBQ3ZCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUEwQixDQUFDO1FBQ2hELElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWlCO1FBQzNCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO1lBQ3ZDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUMxQixDQUFDO2FBQU0sQ0FBQztZQUNOLE1BQU0sWUFBWSxHQUFJLEtBQUssQ0FBQyxhQUFrQyxDQUFDLGFBQWEsQ0FDMUUsd0JBQXdCLENBQ3pCLENBQUM7WUFDRixJQUFJLFlBQVksRUFBRSxDQUFDO2dCQUNqQixZQUFZLENBQUMsT0FBTyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO2dCQUN6QyxNQUFNLFdBQVcsR0FBRyxJQUFJLEtBQUssQ0FBQyxRQUFRLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztnQkFDM0QsTUFBTSxDQUFDLGNBQWMsQ0FBQyxXQUFXLEVBQUUsUUFBUSxFQUFFO29CQUMzQyxLQUFLLEVBQUUsWUFBWTtvQkFDbkIsUUFBUSxFQUFFLEtBQUs7aUJBQ2hCLENBQUMsQ0FBQztnQkFDSCxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2pDLENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzsrR0EzQ1UsZUFBZTttR0FBZixlQUFlLCsvQkNmNUIsazRDQStDTSwyckpEdENNLFlBQVksNkhBQUUsYUFBYTs7NEZBTTFCLGVBQWU7a0JBUjNCLFNBQVM7K0JBQ0UsWUFBWSxXQUNiLENBQUMsWUFBWSxFQUFFLGFBQWEsQ0FBQyxjQUMxQixJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbnB1dCwgc2lnbmFsLCBPbkluaXQsIG91dHB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBzd2l0Y2hIZWlnaHQsIHN3aXRjaFdpZHRoIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvc3dpdGNoL3N3aXRjaC5jb25zdGFudHNcIjtcbmltcG9ydCB7IFN3aXRjaFByb3BzIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvc3dpdGNoL3N3aXRjaC5pbnRlcmZhY2VcIjtcblxuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtc3dpdGNoXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEljb25Db21wb25lbnRdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N3aXRjaC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL3N3aXRjaC5jb21wb25lbnQuc2Nzc1wiLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU3dpdGNoQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dChcIlwiKTtcbiAgcmVhZG9ubHkgYXBwZWFyYW5jZSA9IGlucHV0PFN3aXRjaFByb3BzW1wiYXBwZWFyYW5jZVwiXT4oXCJicmFuZFwiKTtcbiAgcmVhZG9ubHkgc2hvd0xhYmVsID0gaW5wdXQodHJ1ZSk7XG4gIHJlYWRvbmx5IHNob3dJY29uID0gaW5wdXQodHJ1ZSk7XG4gIHJlYWRvbmx5IGRpc2FibGVkID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSByZWFkT25seSA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgY2hlY2tlZCA9IGlucHV0KGZhbHNlKTtcblxuICByZWFkb25seSBzdGF0ZUNoYW5nZSA9IG91dHB1dDxFdmVudD4oKTtcblxuICBzd2l0Y2hIZWlnaHQgPSBzd2l0Y2hIZWlnaHQ7XG4gIHN3aXRjaFdpZHRoID0gc3dpdGNoV2lkdGg7XG5cbiAgcmVhZG9ubHkgaXNDaGVja2VkID0gc2lnbmFsKGZhbHNlKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmlzQ2hlY2tlZC5zZXQodGhpcy5jaGVja2VkKCkpO1xuICB9XG5cbiAgaGFuZGxlQ2hhbmdlKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgIHRoaXMuaXNDaGVja2VkLnNldCh0YXJnZXQuY2hlY2tlZCk7XG4gICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIGhhbmRsZUNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMucmVhZE9ubHkoKSB8fCB0aGlzLmRpc2FibGVkKCkpIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb25zdCBpbnB1dEVsZW1lbnQgPSAoZXZlbnQuY3VycmVudFRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS5xdWVyeVNlbGVjdG9yPEhUTUxJbnB1dEVsZW1lbnQ+KFxuICAgICAgICAnaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdJyxcbiAgICAgICk7XG4gICAgICBpZiAoaW5wdXRFbGVtZW50KSB7XG4gICAgICAgIGlucHV0RWxlbWVudC5jaGVja2VkID0gIXRoaXMuaXNDaGVja2VkKCk7XG4gICAgICAgIGNvbnN0IGNoYW5nZUV2ZW50ID0gbmV3IEV2ZW50KFwiY2hhbmdlXCIsIHsgYnViYmxlczogdHJ1ZSB9KTtcbiAgICAgICAgT2JqZWN0LmRlZmluZVByb3BlcnR5KGNoYW5nZUV2ZW50LCBcInRhcmdldFwiLCB7XG4gICAgICAgICAgdmFsdWU6IGlucHV0RWxlbWVudCxcbiAgICAgICAgICB3cml0YWJsZTogZmFsc2UsXG4gICAgICAgIH0pO1xuICAgICAgICB0aGlzLmhhbmRsZUNoYW5nZShjaGFuZ2VFdmVudCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2XG4gICAgY2xhc3M9XCJzd2l0Y2gtY29udGFpbmVyIGFwcGVhcmFuY2Ute3thcHBlYXJhbmNlKCl9fVwiXG4gICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnZGlzYWJsZWQnOiBkaXNhYmxlZCgpLFxuICAgICAgICAncmVhZC1vbmx5JzogcmVhZE9ubHkoKSxcbiAgICAgICAgJ2NoZWNrZWQnOiBpc0NoZWNrZWQoKVxuICAgIH1cIlxuICAgIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbj5cbiAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgcm9sZT1cInN3aXRjaFwiXG4gICAgICAgIGNsYXNzPVwic3dpdGNoXCJcbiAgICAgICAgW2F0dHIuYXJpYS1jaGVja2VkXT1cImlzQ2hlY2tlZCgpXCJcbiAgICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJsYWJlbCgpXCJcbiAgICAgICAgW2F0dHIuYXJpYS1kaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICAgICAgW2F0dHIuYXJpYS1yZWFkb25seV09XCJyZWFkT25seSgpXCJcbiAgICAgICAgW2FyaWFMYWJlbF09XCJsYWJlbCgpXCJcbiAgICAgICAgW25hbWVdPVwibGFiZWwoKVwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2Rpc2FibGVkJzogZGlzYWJsZWQoKSxcbiAgICAgICAgJ3JlYWQtb25seSc6IHJlYWRPbmx5KCksXG4gICAgICAgICdjaGVja2VkJzogaXNDaGVja2VkKClcbiAgICB9XCJcbiAgICAgICAgW3N0eWxlLm1pbi1oZWlnaHQucHhdPVwic3dpdGNoSGVpZ2h0XCJcbiAgICAgICAgW3N0eWxlLm1pbi13aWR0aC5weF09XCJzd2l0Y2hXaWR0aFwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICAgICAgW2NoZWNrZWRdPVwiaXNDaGVja2VkKClcIlxuICAgIC8+XG4gICAgPGRpdiBjbGFzcz1cInN3aXRjaC1pY29uLWNoZWNrXCIgW25nQ2xhc3NdPVwieydjaGVja2VkJzogaXNDaGVja2VkKCkgfVwiIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIEBpZiAoc2hvd0ljb24oKSkge1xuICAgICAgICAgICAgPHJ0ZS1pY29uXG4gICAgICAgICAgICBjbGFzcz1cImljb25cIlxuICAgICAgICAgICAgW25hbWVdPVwiaXNDaGVja2VkKCkgPyAnY2hlY2snIDogJ2Nsb3NlJ1wiXG4gICAgICAgICAgICBbc2l6ZV09XCIxNlwiXG4gICAgICAgICAgICAoY2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgICAgICA+PC9ydGUtaWNvbj5cbiAgICAgICAgfVxuICAgIDwvZGl2PlxuICAgIEBpZiAoc2hvd0xhYmVsKCkgJiYgbGFiZWwoKSkge1xuICAgICAgICA8bGFiZWxcbiAgICAgICAgICAgIGNsYXNzPVwic3dpdGNoLWxhYmVsXCJcbiAgICAgICAgICAgIFtmb3JdPVwibGFiZWwoKVwiXG4gICAgICAgID5cbiAgICAgICAge3sgbGFiZWwoKSB9fVxuICAgIDwvbGFiZWw+XG4gICAgfVxuPC9kaXY+Il19
|
|
@@ -10,10 +10,10 @@ export class TooltipComponent {
|
|
|
10
10
|
this.arrow = input(true);
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: "rte-tooltip", imports: [CommonModule], standalone: true, template: "<div\n
|
|
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
|
}] });
|
|
19
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kcy1ydGUtbGliL3NyYy9saWIvY29tcG9uZW50cy90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvdG9vbHRpcC90b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBU2pELE1BQU0sT0FBTyxnQkFBZ0I7SUFQN0I7UUFRVyxVQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQ2pDLGFBQVEsR0FBRyxLQUFLLENBQVMsTUFBTSxDQUFDLENBQUM7UUFDakMsY0FBUyxHQUFHLEtBQUssQ0FBUyxRQUFRLENBQUMsQ0FBQztRQUNwQyxVQUFLLEdBQUcsS0FBSyxDQUFVLElBQUksQ0FBQyxDQUFDO0tBQ3ZDOytHQUxZLGdCQUFnQjttR0FBaEIsZ0JBQWdCLHVrQkNWN0Isd0xBTUEsaXpERERZLFlBQVk7OzRGQUtYLGdCQUFnQjtrQkFQNUIsU0FBUzsrQkFDRSxhQUFhLFdBQ2QsQ0FBQyxZQUFZLENBQUMsY0FDWCxJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtdG9vbHRpcFwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi90b29sdGlwLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vdG9vbHRpcC5jb21wb25lbnQuc2Nzc1wiLFxufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHBvc2l0aW9uID0gaW5wdXQ8c3RyaW5nPihcImF1dG9cIik7XG4gIHJlYWRvbmx5IGFsaWdubWVudCA9IGlucHV0PHN0cmluZz4oXCJjZW50ZXJcIik7XG4gIHJlYWRvbmx5IGFycm93ID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwidG9vbHRpcCB7eyBwb3NpdGlvbigpIH19IHt7IGFsaWdubWVudCgpIH19XCJcbiAgW25nQ2xhc3NdPVwieyBhcnJvdzogYXJyb3coKSB9XCJcbj5cbiAgPHNwYW4gcm9sZT1cInRvb2x0aXBcIiBjbGFzcz1cInRvb2x0aXAtbGFiZWxcIj4ge3sgbGFiZWwoKSB9fSA8L3NwYW4+XG48L2Rpdj5cbiJdfQ==
|