@design-system-rte/angular 0.13.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/badge/badge.component.mjs +3 -3
- package/esm2022/lib/components/badge/badge.directive.mjs +3 -3
- package/esm2022/lib/components/banner/banner.component.mjs +3 -3
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +10 -13
- package/esm2022/lib/components/button/button.component.mjs +3 -3
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +4 -5
- package/esm2022/lib/components/checkbox-group/checkbox-group.component.mjs +5 -6
- package/esm2022/lib/components/chip/chip.component.mjs +3 -3
- package/esm2022/lib/components/divider/divider.component.mjs +3 -3
- package/esm2022/lib/components/dropdown/dropdown-item/dropdown-item.component.mjs +41 -0
- package/esm2022/lib/components/dropdown/dropdown-menu/dropdown-menu.component.mjs +44 -0
- package/esm2022/lib/components/dropdown/dropdown-trigger/dropdown-trigger.directive.mjs +31 -0
- package/esm2022/lib/components/dropdown/dropdown.directive.mjs +148 -0
- package/esm2022/lib/components/dropdown/dropdown.module.mjs +19 -0
- package/esm2022/lib/components/dropdown/index.mjs +8 -0
- package/esm2022/lib/components/grid/col/col.directive.mjs +3 -3
- package/esm2022/lib/components/grid/grid.directive.mjs +3 -3
- package/esm2022/lib/components/icon/icon.component.mjs +3 -3
- package/esm2022/lib/components/icon/icon.service.mjs +3 -3
- package/esm2022/lib/components/icon-button/icon-button.component.mjs +5 -5
- package/esm2022/lib/components/icon-button-toggle/icon-button-toggle.component.mjs +3 -3
- package/esm2022/lib/components/link/link.component.mjs +3 -3
- package/esm2022/lib/components/popover/popover.component.mjs +3 -3
- package/esm2022/lib/components/popover/popover.directive.mjs +3 -3
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/radio-button-group/radio-button-group.component.mjs +3 -3
- package/esm2022/lib/components/segmented-control/segmented-control.component.mjs +3 -3
- package/esm2022/lib/components/split-button/split-button.component.mjs +3 -3
- package/esm2022/lib/components/switch/switch.component.mjs +3 -3
- package/esm2022/lib/components/text-input/text-input.component.mjs +3 -3
- package/esm2022/lib/components/textarea/textarea.component.mjs +3 -3
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/lib/components/tooltip/tooltip.directive.mjs +3 -3
- package/esm2022/lib/services/dropdown.service.mjs +81 -0
- package/esm2022/lib/services/overlay.service.mjs +3 -3
- package/fesm2022/design-system-rte-angular.mjs +423 -98
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/breadcrumbs/breadcrumbs.component.d.ts +0 -1
- package/lib/components/checkbox/checkbox.component.d.ts +1 -2
- package/lib/components/checkbox-group/checkbox-group.component.d.ts +1 -2
- package/lib/components/chip/chip.component.d.ts +1 -1
- package/lib/components/dropdown/dropdown-item/dropdown-item.component.d.ts +25 -0
- package/lib/components/dropdown/dropdown-menu/dropdown-menu.component.d.ts +20 -0
- package/lib/components/dropdown/dropdown-trigger/dropdown-trigger.directive.d.ts +11 -0
- package/lib/components/dropdown/dropdown.directive.d.ts +47 -0
- package/lib/components/dropdown/dropdown.module.d.ts +10 -0
- package/lib/components/dropdown/index.d.ts +5 -0
- package/lib/components/popover/popover.component.d.ts +1 -1
- package/lib/components/text-input/text-input.component.d.ts +1 -1
- package/lib/components/tooltip/tooltip.component.d.ts +1 -1
- package/lib/services/dropdown.service.d.ts +27 -0
- package/package.json +4 -4
|
@@ -10,10 +10,10 @@ export class LinkComponent {
|
|
|
10
10
|
this.subtle = input(false);
|
|
11
11
|
this.externalLink = input(false);
|
|
12
12
|
}
|
|
13
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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()}\" [target]=\"externalLink() ? '_blank' : undefined\" [rel]=\"externalLink() ? 'noopener noreferrer' : null\">\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 }); }
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
18
|
args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\" [target]=\"externalLink() ? '_blank' : undefined\" [rel]=\"externalLink() ? 'noopener noreferrer' : null\">\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"] }]
|
|
19
19
|
}] });
|
|
@@ -52,10 +52,10 @@ export class PopoverComponent {
|
|
|
52
52
|
if (focusable.length > 0)
|
|
53
53
|
focusable[0].focus();
|
|
54
54
|
}
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "rte-popover", inputs: { primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, coordinates: { classPropertyName: "coordinates", publicName: "coordinates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, ngImport: i0, template: "<div\n #root\n class=\"rte-popover\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.data-arrow]=\"arrow()\"\n [attr.data-position]=\"position()\"\n [attr.data-alignment]=\"alignment()\"\n [attr.data-open]=\"isOpen()\"\n [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n (keydown)=\"handleKeydown($event)\"\n>\n <div class=\"popoverInner\">\n <div class=\"popoverContentContainer\">\n <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n <div class=\"popoverContent\">{{ content() }}</div>\n </div>\n <div class=\"popoverButtonContainer\">\n <rte-button\n *ngIf=\"secondaryButtonLabel()\"\n variant=\"secondary\"\n [label]=\"secondaryButtonLabel() || ''\"\n (click)=\"handleClickSecondaryButton()\"\n />\n <rte-button\n variant=\"primary\"\n [label]=\"primaryButtonLabel()\"\n (click)=\"handleClickPrimaryButton()\"\n />\n </div>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "rte-button", inputs: ["label", "variant", "size", "disabled", "icon", "ariaLabel", "ariaLabelledBy", "buttonType"], outputs: ["click"] }] }); }
|
|
57
57
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
60
|
args: [{ selector: "rte-popover", imports: [CommonModule, ButtonComponent], standalone: true, template: "<div\n #root\n class=\"rte-popover\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.data-arrow]=\"arrow()\"\n [attr.data-position]=\"position()\"\n [attr.data-alignment]=\"alignment()\"\n [attr.data-open]=\"isOpen()\"\n [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n (keydown)=\"handleKeydown($event)\"\n>\n <div class=\"popoverInner\">\n <div class=\"popoverContentContainer\">\n <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n <div class=\"popoverContent\">{{ content() }}</div>\n </div>\n <div class=\"popoverButtonContainer\">\n <rte-button\n *ngIf=\"secondaryButtonLabel()\"\n variant=\"secondary\"\n [label]=\"secondaryButtonLabel() || ''\"\n (click)=\"handleClickSecondaryButton()\"\n />\n <rte-button\n variant=\"primary\"\n [label]=\"primaryButtonLabel()\"\n (click)=\"handleClickPrimaryButton()\"\n />\n </div>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"] }]
|
|
61
61
|
}], ctorParameters: () => [] });
|
|
@@ -131,10 +131,10 @@ export class PopoverDirective {
|
|
|
131
131
|
this.overlayService.destroy();
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
135
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
134
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
135
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: PopoverDirective, isStandalone: true, selector: "[rtePopover]", inputs: { rtePopoverContent: { classPropertyName: "rtePopoverContent", publicName: "rtePopoverContent", isSignal: true, isRequired: true, transformFunction: null }, rtePopoverTitle: { classPropertyName: "rtePopoverTitle", publicName: "rtePopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverPosition: { classPropertyName: "rtePopoverPosition", publicName: "rtePopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverAlignment: { classPropertyName: "rtePopoverAlignment", publicName: "rtePopoverAlignment", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverArrow: { classPropertyName: "rtePopoverArrow", publicName: "rtePopoverArrow", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverPrimaryButtonLabel: { classPropertyName: "rtePopoverPrimaryButtonLabel", publicName: "rtePopoverPrimaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverSecondaryButtonLabel: { classPropertyName: "rtePopoverSecondaryButtonLabel", publicName: "rtePopoverSecondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverCloseOnClickOutside: { classPropertyName: "rtePopoverCloseOnClickOutside", publicName: "rtePopoverCloseOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverCloseOnEscape: { classPropertyName: "rtePopoverCloseOnEscape", publicName: "rtePopoverCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
|
|
136
136
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverDirective, decorators: [{
|
|
138
138
|
type: Directive,
|
|
139
139
|
args: [{
|
|
140
140
|
selector: "[rtePopover]",
|
|
@@ -14,10 +14,10 @@ export class RadioButtonComponent {
|
|
|
14
14
|
this.labelSize = labelSize;
|
|
15
15
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
16
16
|
}
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n />\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-radio-button-label\" \n [for]=\"label()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
|
|
23
23
|
}] });
|
|
@@ -19,10 +19,10 @@ export class RadioButtonGroupComponent {
|
|
|
19
19
|
this.readOnly = input(false);
|
|
20
20
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
21
21
|
}
|
|
22
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"radio-button-group-container\">\n <div\n class=\"radio-button-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"radio-button-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items()\">\n <rte-radio-button\n [label]=\"item\"\n [groupName]=\"groupName()\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
28
28
|
}] });
|
|
@@ -113,10 +113,10 @@ export class SegmentedControlComponent {
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n <div\n #segment\n role=\"radio\"\n class=\"rte-segment\"\n tabindex=\"0\"\n [attr.data-id]=\"option.id\"\n [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n [class.selected]=\"isSegmentSelected(option.id)\"\n [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n [attr.aria-label]=\"option.label\"\n (click)=\"selectSegment(option.id)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n >\n <rte-icon\n *ngIf=\"isSegmentSelected(option.id)\"\n name=\"check-small\"\n class=\"rte-selected-icon\"\n [size]=\"24\"\n />\n <div class=\"rte-segment-content\">\n <ng-container *ngIf=\"option.icon; else label\">\n <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n </ng-container>\n <ng-template #label>\n <span class=\"rte-segment-label\">{{ option.label }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
118
118
|
}
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
120
120
|
type: Component,
|
|
121
121
|
args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n <div\n #segment\n role=\"radio\"\n class=\"rte-segment\"\n tabindex=\"0\"\n [attr.data-id]=\"option.id\"\n [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n [class.selected]=\"isSegmentSelected(option.id)\"\n [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n [attr.aria-label]=\"option.label\"\n (click)=\"selectSegment(option.id)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n >\n <rte-icon\n *ngIf=\"isSegmentSelected(option.id)\"\n name=\"check-small\"\n class=\"rte-selected-icon\"\n [size]=\"24\"\n />\n <div class=\"rte-segment-content\">\n <ng-container *ngIf=\"option.icon; else label\">\n <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n </ng-container>\n <ng-template #label>\n <span class=\"rte-segment-label\">{{ option.label }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"] }]
|
|
122
122
|
}] });
|
|
@@ -32,10 +32,10 @@ export class SplitButtonComponent {
|
|
|
32
32
|
callback();
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n class=\"split-button-container size-{{ size() }} {{appearance()}}\"\n [ngClass]=\"{'compact-spacing': compactSpacing()}\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\" \n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon \n *ngIf=\"icon()\"\n [name]=\"icon()!\"\n [size]=\"splitButtonLeftIconSize()\"\n />\n <p class=\"split-button-label size-{{ size() }}\">\n {{label()}}\n </p>\n </button>\n\n <div \n class=\"split-button-divider\"\n [ngClass]=\"{'disabled': disabled()}\"\n ></div>\n\n <div class=\"split-button-right-container\">\n <button\n class=\"split-button-right size-{{ size() }}\"\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [attr.data-selected]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (mouseenter)=\"isOpen.set(true)\"\n (mouseleave)=\"isOpen.set(false)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\"/>\n </div>\n </button>\n\n <div\n class=\"split-button-dropdown position-{{ position() }}\"\n role=\"menu\"\n data-testid=\"Menu container\"\n [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n (keydown)=\"handleKeyDownOnMenu($event)\"\n >\n <ng-content/>\n </div>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n class=\"split-button-container size-{{ size() }} {{appearance()}}\"\n [ngClass]=\"{'compact-spacing': compactSpacing()}\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\" \n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon \n *ngIf=\"icon()\"\n [name]=\"icon()!\"\n [size]=\"splitButtonLeftIconSize()\"\n />\n <p class=\"split-button-label size-{{ size() }}\">\n {{label()}}\n </p>\n </button>\n\n <div \n class=\"split-button-divider\"\n [ngClass]=\"{'disabled': disabled()}\"\n ></div>\n\n <div class=\"split-button-right-container\">\n <button\n class=\"split-button-right size-{{ size() }}\"\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [attr.data-selected]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (mouseenter)=\"isOpen.set(true)\"\n (mouseleave)=\"isOpen.set(false)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\"/>\n </div>\n </button>\n\n <div\n class=\"split-button-dropdown position-{{ position() }}\"\n role=\"menu\"\n data-testid=\"Menu container\"\n [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n (keydown)=\"handleKeyDownOnMenu($event)\"\n >\n <ng-content/>\n </div>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n class=\"split-button-container size-{{ size() }} {{appearance()}}\"\n [ngClass]=\"{'compact-spacing': compactSpacing()}\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\" \n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon \n *ngIf=\"icon()\"\n [name]=\"icon()!\"\n [size]=\"splitButtonLeftIconSize()\"\n />\n <p class=\"split-button-label size-{{ size() }}\">\n {{label()}}\n </p>\n </button>\n\n <div \n class=\"split-button-divider\"\n [ngClass]=\"{'disabled': disabled()}\"\n ></div>\n\n <div class=\"split-button-right-container\">\n <button\n class=\"split-button-right size-{{ size() }}\"\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [attr.data-selected]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (mouseenter)=\"isOpen.set(true)\"\n (mouseleave)=\"isOpen.set(false)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\"/>\n </div>\n </button>\n\n <div\n class=\"split-button-dropdown position-{{ position() }}\"\n role=\"menu\"\n data-testid=\"Menu container\"\n [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n (keydown)=\"handleKeyDownOnMenu($event)\"\n >\n <ng-content/>\n </div>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
41
41
|
}] });
|
|
@@ -43,10 +43,10 @@ export class SwitchComponent {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "rte-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div\n class=\"switch-container appearance-{{appearance()}}\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n (click)=\"handleClick($event)\"\n>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"switch\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [ariaLabel]=\"label()\"\n [name]=\"label()\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n [style.min-height.px]=\"switchHeight\"\n [style.min-width.px]=\"switchWidth\"\n [disabled]=\"disabled()\"\n [checked]=\"isChecked()\"\n />\n <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n @if (showIcon()) {\n <rte-icon\n class=\"icon\"\n [name]=\"isChecked() ? 'check' : 'close'\"\n [size]=\"16\"\n (click)=\"handleClick($event)\"\n ></rte-icon>\n }\n </div>\n @if (showLabel() && label()) {\n <label\n class=\"switch-label\"\n [for]=\"label()\"\n >\n {{ label() }}\n </label>\n }\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ selector: "rte-switch", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"switch-container appearance-{{appearance()}}\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n (click)=\"handleClick($event)\"\n>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"switch\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [ariaLabel]=\"label()\"\n [name]=\"label()\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'read-only': readOnly(),\n 'checked': isChecked()\n }\"\n [style.min-height.px]=\"switchHeight\"\n [style.min-width.px]=\"switchWidth\"\n [disabled]=\"disabled()\"\n [checked]=\"isChecked()\"\n />\n <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n @if (showIcon()) {\n <rte-icon\n class=\"icon\"\n [name]=\"isChecked() ? 'check' : 'close'\"\n [size]=\"16\"\n (click)=\"handleClick($event)\"\n ></rte-icon>\n }\n </div>\n @if (showLabel() && label()) {\n <label\n class=\"switch-label\"\n [for]=\"label()\"\n >\n {{ label() }}\n </label>\n }\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
|
|
52
52
|
}] });
|
|
@@ -97,10 +97,10 @@ export class TextInputComponent {
|
|
|
97
97
|
this.toggleInputVisibility();
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div\n class=\"container {{labelPosition()}}\"\n [ngClass]=\"{'error': error()}\"\n [style.width]=\"width()\"\n>\n <ng-container *ngIf=\"label()\">\n <div class=\"text\">\n <div class=\"label-container\">\n <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n {{ label() }}\n </label>\n <ng-container *ngIf=\"required()\">\n <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n <span class=\"required-text\">(obligatoire)</span>\n </ng-container>\n <ng-template #requiredIcon>\n <span class=\"required-icon-container\">\n <rte-icon name=\"asterisk\" [size]=\"8\" />\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n <span class=\"required-text\">(optionnel)</span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"input-container\">\n <div\n class=\"input {{labelPosition()}}\"\n [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n >\n <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n <ng-container *ngIf=\"displayedLeftIcon()\">\n <rte-icon\n appearance=\"outlined\"\n class=\"left-icon\"\n aria-hidden=\"true\"\n [name]=\"displayedLeftIcon()!\"\n />\n </ng-container>\n\n <input\n #inputRef\n class=\"input-field\"\n [id]=\"id()\"\n [ngClass]=\"{'error': error()}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-required]=\"ariaRequired()\"\n [type]=\"isHiddenInput() ? 'password' : 'text'\"\n [maxLength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [value]=\"internalValue()\"\n (input)=\"handleChange($event)\"\n />\n\n <ng-container *ngIf=\"shouldShowRightIcon()\">\n <rte-icon-button\n appearance=\"outlined\"\n variant=\"transparent\"\n class=\"right-icon\"\n data-testid=\"right-icon\"\n [name]=\"rightIconName() || 'close'\"\n [ariaLabel]=\"rightIconAriaLabel()\"\n (click)=\"onRightIconClickHandler()\"\n />\n </ng-container>\n </div>\n </div>\n\n <ng-container *ngIf=\"assistiveTextLabel()\">\n <div class=\"assistive-text\">\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n <rte-link [label]=\"assistiveTextLabel()\" />\n </ng-container>\n <ng-template #assistiveLabel>\n <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n {{ assistiveTextLabel() }}\n </p>\n </ng-template>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div\n class=\"container {{labelPosition()}}\"\n [ngClass]=\"{'error': error()}\"\n [style.width]=\"width()\"\n>\n <ng-container *ngIf=\"label()\">\n <div class=\"text\">\n <div class=\"label-container\">\n <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n {{ label() }}\n </label>\n <ng-container *ngIf=\"required()\">\n <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n <span class=\"required-text\">(obligatoire)</span>\n </ng-container>\n <ng-template #requiredIcon>\n <span class=\"required-icon-container\">\n <rte-icon name=\"asterisk\" [size]=\"8\" />\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n <span class=\"required-text\">(optionnel)</span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"input-container\">\n <div\n class=\"input {{labelPosition()}}\"\n [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n >\n <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n <ng-container *ngIf=\"displayedLeftIcon()\">\n <rte-icon\n appearance=\"outlined\"\n class=\"left-icon\"\n aria-hidden=\"true\"\n [name]=\"displayedLeftIcon()!\"\n />\n </ng-container>\n\n <input\n #inputRef\n class=\"input-field\"\n [id]=\"id()\"\n [ngClass]=\"{'error': error()}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-required]=\"ariaRequired()\"\n [type]=\"isHiddenInput() ? 'password' : 'text'\"\n [maxLength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [value]=\"internalValue()\"\n (input)=\"handleChange($event)\"\n />\n\n <ng-container *ngIf=\"shouldShowRightIcon()\">\n <rte-icon-button\n appearance=\"outlined\"\n variant=\"transparent\"\n class=\"right-icon\"\n data-testid=\"right-icon\"\n [name]=\"rightIconName() || 'close'\"\n [ariaLabel]=\"rightIconAriaLabel()\"\n (click)=\"onRightIconClickHandler()\"\n />\n </ng-container>\n </div>\n </div>\n\n <ng-container *ngIf=\"assistiveTextLabel()\">\n <div class=\"assistive-text\">\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n <rte-link [label]=\"assistiveTextLabel()\" />\n </ng-container>\n <ng-template #assistiveLabel>\n <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n {{ assistiveTextLabel() }}\n </p>\n </ng-template>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: "rte-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container {{labelPosition()}}\"\n [ngClass]=\"{'error': error()}\"\n [style.width]=\"width()\"\n>\n <ng-container *ngIf=\"label()\">\n <div class=\"text\">\n <div class=\"label-container\">\n <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n {{ label() }}\n </label>\n <ng-container *ngIf=\"required()\">\n <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n <span class=\"required-text\">(obligatoire)</span>\n </ng-container>\n <ng-template #requiredIcon>\n <span class=\"required-icon-container\">\n <rte-icon name=\"asterisk\" [size]=\"8\" />\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n <span class=\"required-text\">(optionnel)</span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"input-container\">\n <div\n class=\"input {{labelPosition()}}\"\n [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n >\n <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n <ng-container *ngIf=\"displayedLeftIcon()\">\n <rte-icon\n appearance=\"outlined\"\n class=\"left-icon\"\n aria-hidden=\"true\"\n [name]=\"displayedLeftIcon()!\"\n />\n </ng-container>\n\n <input\n #inputRef\n class=\"input-field\"\n [id]=\"id()\"\n [ngClass]=\"{'error': error()}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-required]=\"ariaRequired()\"\n [type]=\"isHiddenInput() ? 'password' : 'text'\"\n [maxLength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [value]=\"internalValue()\"\n (input)=\"handleChange($event)\"\n />\n\n <ng-container *ngIf=\"shouldShowRightIcon()\">\n <rte-icon-button\n appearance=\"outlined\"\n variant=\"transparent\"\n class=\"right-icon\"\n data-testid=\"right-icon\"\n [name]=\"rightIconName() || 'close'\"\n [ariaLabel]=\"rightIconAriaLabel()\"\n (click)=\"onRightIconClickHandler()\"\n />\n </ng-container>\n </div>\n </div>\n\n <ng-container *ngIf=\"assistiveTextLabel()\">\n <div class=\"assistive-text\">\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n </ng-container>\n <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n <rte-link [label]=\"assistiveTextLabel()\" />\n </ng-container>\n <ng-template #assistiveLabel>\n <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n {{ assistiveTextLabel() }}\n </p>\n </ng-template>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n <p class=\"input-counter\" data-testid=\"input-counter\">\n {{ characterCount() }}/{{ maxLength() }}\n </p>\n </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"] }]
|
|
106
106
|
}], ctorParameters: () => [] });
|