@design-system-rte/angular 0.4.5 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/button/button.component.mjs +4 -4
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +4 -4
- package/esm2022/lib/components/checkbox-group/checkbox-group.component.mjs +4 -4
- package/esm2022/lib/components/link/link.component.mjs +4 -4
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +4 -4
- package/esm2022/lib/components/radio-button-group/radio-button-group.component.mjs +4 -4
- package/fesm2022/design-system-rte-angular.mjs +13 -13
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/package.json +3 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, Component, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect,
|
|
2
|
+
import { input, output, ChangeDetectionStrategy, Component, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, computed } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -25,11 +25,11 @@ class ButtonComponent {
|
|
|
25
25
|
this.click.emit();
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\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-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\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-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: "rte-button", imports: [], standalone: true, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\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-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }]
|
|
32
|
+
args: [{ selector: "rte-button", imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\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-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }]
|
|
33
33
|
}] });
|
|
34
34
|
|
|
35
35
|
class GridDirective {
|
|
@@ -471,11 +471,11 @@ class LinkComponent {
|
|
|
471
471
|
this.externalLink = input(false);
|
|
472
472
|
}
|
|
473
473
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
474
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", 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-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }] }); }
|
|
474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", 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-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
475
475
|
}
|
|
476
476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
|
|
477
477
|
type: Component,
|
|
478
|
-
args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", 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-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
|
|
478
|
+
args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", 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-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
|
|
479
479
|
}] });
|
|
480
480
|
|
|
481
481
|
class RadioButtonComponent {
|
|
@@ -490,11 +490,11 @@ class RadioButtonComponent {
|
|
|
490
490
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
491
491
|
}
|
|
492
492
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
493
|
-
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"] }] }); }
|
|
493
|
+
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 }); }
|
|
494
494
|
}
|
|
495
495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
496
496
|
type: Component,
|
|
497
|
-
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, 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"] }]
|
|
497
|
+
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"] }]
|
|
498
498
|
}] });
|
|
499
499
|
|
|
500
500
|
class RadioButtonGroupComponent {
|
|
@@ -514,11 +514,11 @@ class RadioButtonGroupComponent {
|
|
|
514
514
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
515
515
|
}
|
|
516
516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }] }); }
|
|
517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
518
518
|
}
|
|
519
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
|
|
520
520
|
type: Component,
|
|
521
|
-
args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
521
|
+
args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
522
522
|
}] });
|
|
523
523
|
|
|
524
524
|
class CheckboxComponent {
|
|
@@ -544,11 +544,11 @@ class CheckboxComponent {
|
|
|
544
544
|
}
|
|
545
545
|
}
|
|
546
546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "rte-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", 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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", 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 }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }] }); }
|
|
547
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "rte-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", 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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", 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 }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
548
548
|
}
|
|
549
549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
550
550
|
type: Component,
|
|
551
|
-
args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
|
|
551
|
+
args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
|
|
552
552
|
}] });
|
|
553
553
|
|
|
554
554
|
class CheckboxGroupComponent {
|
|
@@ -568,11 +568,11 @@ class CheckboxGroupComponent {
|
|
|
568
568
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
569
569
|
}
|
|
570
570
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxGroupComponent, isStandalone: true, selector: "rte-checkbox-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked", "groupName"] }] }); }
|
|
571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxGroupComponent, isStandalone: true, selector: "rte-checkbox-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked", "groupName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
572
572
|
}
|
|
573
573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
574
574
|
type: Component,
|
|
575
|
-
args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
575
|
+
args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
576
576
|
}] });
|
|
577
577
|
|
|
578
578
|
/**
|