@tedi-design-system/angular 6.2.0-rc.9 → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -1
- package/community/components/cards/accordion/accordion/accordion.component.d.ts +3 -0
- package/community/components/cards/accordion/accordion/accordion.component.d.ts.map +1 -1
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts +2 -2
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map +1 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts +1 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts.map +1 -1
- package/community/components/form/file-dropzone/file.service.d.ts.map +1 -1
- package/community/components/form/input/input.component.d.ts +3 -0
- package/community/components/form/input/input.component.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +24 -20
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +452 -24
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/index.css +1 -1
- package/package.json +10 -10
- package/tedi/components/cards/accordion/accordion/accordion.component.d.ts +14 -0
- package/tedi/components/cards/accordion/accordion/accordion.component.d.ts.map +1 -0
- package/tedi/components/cards/accordion/accordion-item/accordion-item.component.d.ts +90 -0
- package/tedi/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map +1 -0
- package/tedi/components/cards/accordion/index.d.ts +3 -0
- package/tedi/components/cards/accordion/index.d.ts.map +1 -0
- package/tedi/components/cards/index.d.ts +2 -0
- package/tedi/components/cards/index.d.ts.map +1 -0
- package/tedi/components/form/form-field/form-field-control.d.ts +31 -0
- package/tedi/components/form/form-field/form-field-control.d.ts.map +1 -0
- package/tedi/components/form/form-field/form-field.component.d.ts +57 -0
- package/tedi/components/form/form-field/form-field.component.d.ts.map +1 -0
- package/tedi/components/form/index.d.ts +2 -0
- package/tedi/components/form/index.d.ts.map +1 -1
- package/tedi/components/form/text-field/text-field.component.d.ts +38 -0
- package/tedi/components/form/text-field/text-field.component.d.ts.map +1 -0
- package/tedi/components/index.d.ts +1 -0
- package/tedi/components/index.d.ts.map +1 -1
- package/tedi/components/loader/spinner/spinner.component.d.ts +3 -0
- package/tedi/components/loader/spinner/spinner.component.d.ts.map +1 -1
- package/tedi/components/tags/index.d.ts +1 -0
- package/tedi/components/tags/index.d.ts.map +1 -1
- package/tedi/components/tags/status-badge/status-badge.component.d.ts +55 -0
- package/tedi/components/tags/status-badge/status-badge.component.d.ts.map +1 -0
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender,
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, ContentChild, Optional, Self, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/cdk/layout';
|
|
4
|
-
import
|
|
4
|
+
import * as i1$3 from '@angular/common';
|
|
5
|
+
import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf, CommonModule } from '@angular/common';
|
|
5
6
|
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
6
7
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
8
|
+
import * as i1$2 from '@angular/forms';
|
|
7
9
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
10
|
import * as i1$1 from 'ngx-float-ui';
|
|
9
11
|
import { NgxFloatUiContentComponent, NgxFloatUiModule } from 'ngx-float-ui';
|
|
@@ -1615,11 +1617,11 @@ class ToastComponent {
|
|
|
1615
1617
|
this.mouseLeave.emit();
|
|
1616
1618
|
}
|
|
1617
1619
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1618
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToastComponent, isStandalone: true, selector: "tedi-toast", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave" }, ngImport: i0, template: "<div\n class=\"tedi-toast__wrapper\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <tedi-alert\n [title]=\"title()\"\n [type]=\"type()\"\n [icon]=\"icon()\"\n [showClose]=\"true\"\n [closeDelay]=\"300\"\n [role]=\"role()\"\n (closeClick)=\"handleClose()\"\n >\n <ng-content></ng-content>\n </tedi-alert>\n @if (showProgressBar() && duration() > 0) {\n <div\n class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n [class.tedi-toast__progress--paused]=\"paused()\"\n [style.animation-duration.ms]=\"duration()\"\n ></div>\n }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);
|
|
1620
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToastComponent, isStandalone: true, selector: "tedi-toast", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave" }, ngImport: i0, template: "<div\n class=\"tedi-toast__wrapper\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <tedi-alert\n [title]=\"title()\"\n [type]=\"type()\"\n [icon]=\"icon()\"\n [showClose]=\"true\"\n [closeDelay]=\"300\"\n [role]=\"role()\"\n (closeClick)=\"handleClose()\"\n >\n <ng-content></ng-content>\n </tedi-alert>\n @if (showProgressBar() && duration() > 0) {\n <div\n class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n [class.tedi-toast__progress--paused]=\"paused()\"\n [style.animation-duration.ms]=\"duration()\"\n ></div>\n }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast, 1050);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media (max-width: 575.98px){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "tedi-alert", inputs: ["title", "type", "icon", "showClose", "role", "variant", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1619
1621
|
}
|
|
1620
1622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, decorators: [{
|
|
1621
1623
|
type: Component,
|
|
1622
|
-
args: [{ selector: "tedi-toast", standalone: true, imports: [AlertComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tedi-toast__wrapper\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <tedi-alert\n [title]=\"title()\"\n [type]=\"type()\"\n [icon]=\"icon()\"\n [showClose]=\"true\"\n [closeDelay]=\"300\"\n [role]=\"role()\"\n (closeClick)=\"handleClose()\"\n >\n <ng-content></ng-content>\n </tedi-alert>\n @if (showProgressBar() && duration() > 0) {\n <div\n class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n [class.tedi-toast__progress--paused]=\"paused()\"\n [style.animation-duration.ms]=\"duration()\"\n ></div>\n }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);
|
|
1624
|
+
args: [{ selector: "tedi-toast", standalone: true, imports: [AlertComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tedi-toast__wrapper\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <tedi-alert\n [title]=\"title()\"\n [type]=\"type()\"\n [icon]=\"icon()\"\n [showClose]=\"true\"\n [closeDelay]=\"300\"\n [role]=\"role()\"\n (closeClick)=\"handleClose()\"\n >\n <ng-content></ng-content>\n </tedi-alert>\n @if (showProgressBar() && duration() > 0) {\n <div\n class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n [class.tedi-toast__progress--paused]=\"paused()\"\n [style.animation-duration.ms]=\"duration()\"\n ></div>\n }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast, 1050);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media (max-width: 575.98px){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"] }]
|
|
1623
1625
|
}] });
|
|
1624
1626
|
|
|
1625
1627
|
const POSITIONS = [
|
|
@@ -2115,11 +2117,11 @@ class CollapseComponent {
|
|
|
2115
2117
|
}
|
|
2116
2118
|
}
|
|
2117
2119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2118
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background-color:var(--color-transparent);border:none}.tedi-collapse__button:disabled{cursor:default}.tedi-collapse__button--text{text-decoration:underline}.tedi-collapse__button:focus-visible{outline:2px solid var(--button-main-neutral-text-default);outline-offset:var(--global-outline-offset)}.tedi-collapse__icon{color:var(--button-main-neutral-text-default);transition:transform .3s ease}.tedi-collapse__icon--wrapper{display:flex;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);border:var(--borders-01) solid var(--button-main-secondary-border-default);border-radius:100%}.tedi-collapse--open>.tedi-collapse__button .tedi-collapse__icon{transform:rotate(180deg)}.tedi-collapse__extender{visibility:hidden;min-height:0;transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;
|
|
2120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background-color:var(--color-transparent);border:none}.tedi-collapse__button:disabled{cursor:default}.tedi-collapse__button--text{text-decoration:underline}.tedi-collapse__button:focus-visible{outline:2px solid var(--button-main-neutral-text-default);outline-offset:var(--global-outline-offset)}.tedi-collapse__icon{color:var(--button-main-neutral-text-default);transition:transform .3s ease}.tedi-collapse__icon--wrapper{display:flex;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);border:var(--borders-01) solid var(--button-main-secondary-border-default);border-radius:100%}.tedi-collapse--open>.tedi-collapse__button .tedi-collapse__icon{transform:rotate(180deg)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2119
2121
|
}
|
|
2120
2122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
2121
2123
|
type: Component,
|
|
2122
|
-
args: [{ standalone: true, selector: "tedi-collapse", imports: [IconComponent, TextComponent, TediTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background-color:var(--color-transparent);border:none}.tedi-collapse__button:disabled{cursor:default}.tedi-collapse__button--text{text-decoration:underline}.tedi-collapse__button:focus-visible{outline:2px solid var(--button-main-neutral-text-default);outline-offset:var(--global-outline-offset)}.tedi-collapse__icon{color:var(--button-main-neutral-text-default);transition:transform .3s ease}.tedi-collapse__icon--wrapper{display:flex;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);border:var(--borders-01) solid var(--button-main-secondary-border-default);border-radius:100%}.tedi-collapse--open>.tedi-collapse__button .tedi-collapse__icon{transform:rotate(180deg)}.tedi-collapse__extender{visibility:hidden;min-height:0;transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;
|
|
2124
|
+
args: [{ standalone: true, selector: "tedi-collapse", imports: [IconComponent, TextComponent, TediTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background-color:var(--color-transparent);border:none}.tedi-collapse__button:disabled{cursor:default}.tedi-collapse__button--text{text-decoration:underline}.tedi-collapse__button:focus-visible{outline:2px solid var(--button-main-neutral-text-default);outline-offset:var(--global-outline-offset)}.tedi-collapse__icon{color:var(--button-main-neutral-text-default);transition:transform .3s ease}.tedi-collapse__icon--wrapper{display:flex;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);border:var(--borders-01) solid var(--button-main-secondary-border-default);border-radius:100%}.tedi-collapse--open>.tedi-collapse__button .tedi-collapse__icon{transform:rotate(180deg)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"] }]
|
|
2123
2125
|
}] });
|
|
2124
2126
|
|
|
2125
2127
|
class ListComponent {
|
|
@@ -3847,7 +3849,7 @@ class DatePickerComponent {
|
|
|
3847
3849
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
3848
3850
|
multi: true,
|
|
3849
3851
|
},
|
|
3850
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3852
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3851
3853
|
}
|
|
3852
3854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
3853
3855
|
type: Component,
|
|
@@ -3870,7 +3872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3870
3872
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
3871
3873
|
multi: true,
|
|
3872
3874
|
},
|
|
3873
|
-
], template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
|
|
3875
|
+
], template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
|
|
3874
3876
|
}], ctorParameters: () => [] });
|
|
3875
3877
|
|
|
3876
3878
|
class FeedbackTextComponent {
|
|
@@ -3904,7 +3906,7 @@ class FeedbackTextComponent {
|
|
|
3904
3906
|
return `tedi-feedback-text tedi-feedback-text--${this.type()} tedi-feedback-text--${this.position()}`;
|
|
3905
3907
|
});
|
|
3906
3908
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3907
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: FeedbackTextComponent, isStandalone: true, selector: "tedi-feedback-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "role()", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--general-
|
|
3909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: FeedbackTextComponent, isStandalone: true, selector: "tedi-feedback-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "role()", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3908
3910
|
}
|
|
3909
3911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackTextComponent, decorators: [{
|
|
3910
3912
|
type: Component,
|
|
@@ -3912,7 +3914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3912
3914
|
"[class]": "classes()",
|
|
3913
3915
|
"[attr.role]": "role()",
|
|
3914
3916
|
"[attr.aria-live]": "ariaLive()",
|
|
3915
|
-
}, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--general-
|
|
3917
|
+
}, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"] }]
|
|
3916
3918
|
}] });
|
|
3917
3919
|
|
|
3918
3920
|
class LabelComponent {
|
|
@@ -4080,7 +4082,7 @@ class NumberFieldComponent {
|
|
|
4080
4082
|
useExisting: forwardRef(() => NumberFieldComponent),
|
|
4081
4083
|
multi: true,
|
|
4082
4084
|
},
|
|
4083
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n {{ label() }}\n </label>\n}\n<div\n [class]=\"{\n 'tedi-number-field': true,\n 'tedi-number-field--invalid': isInvalid(),\n 'tedi-number-field--disabled': isDisabled(),\n }\"\n>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--decrement': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"decrementDisabled()\"\n [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n (click)=\"handleButtonClick('decrement')\"\n >\n <tedi-icon name=\"remove\" [size]=\"18\" />\n </button>\n <div\n [class]=\"{\n 'tedi-number-field__input-wrapper': true,\n 'tedi-number-field__input-wrapper--small': size() === 'small',\n 'tedi-number-field__input-wrapper--disabled': isDisabled(),\n 'tedi-number-field__input-wrapper--with-suffix': suffix(),\n 'tedi-number-field__input-wrapper--full-width': fullWidth(),\n }\"\n (click)=\"focus()\"\n >\n <input\n #inputElement\n [id]=\"inputId()\"\n type=\"number\"\n inputmode=\"numeric\"\n class=\"tedi-number-field__input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-describedby]=\"feedbackId()\"\n (input)=\"handleInputChange($event)\"\n (blur)=\"handleBlur()\"\n />\n @if (suffix()) {\n <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n {{ suffix() }}\n </small>\n }\n </div>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--increment': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"incrementDisabled()\"\n [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n (click)=\"handleButtonClick('increment')\"\n >\n <tedi-icon name=\"add\" [size]=\"18\" />\n </button>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4085
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n {{ label() }}\n </label>\n}\n<div\n [class]=\"{\n 'tedi-number-field': true,\n 'tedi-number-field--invalid': isInvalid(),\n 'tedi-number-field--disabled': isDisabled(),\n }\"\n>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--decrement': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"decrementDisabled()\"\n [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n (click)=\"handleButtonClick('decrement')\"\n >\n <tedi-icon name=\"remove\" [size]=\"18\" />\n </button>\n <div\n [class]=\"{\n 'tedi-number-field__input-wrapper': true,\n 'tedi-number-field__input-wrapper--small': size() === 'small',\n 'tedi-number-field__input-wrapper--disabled': isDisabled(),\n 'tedi-number-field__input-wrapper--with-suffix': suffix(),\n 'tedi-number-field__input-wrapper--full-width': fullWidth(),\n }\"\n (click)=\"focus()\"\n >\n <input\n #inputElement\n [id]=\"inputId()\"\n type=\"number\"\n inputmode=\"numeric\"\n class=\"tedi-number-field__input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-describedby]=\"feedbackId()\"\n (input)=\"handleInputChange($event)\"\n (blur)=\"handleBlur()\"\n />\n @if (suffix()) {\n <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n {{ suffix() }}\n </small>\n }\n </div>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--increment': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"incrementDisabled()\"\n [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n (click)=\"handleButtonClick('increment')\"\n >\n <tedi-icon name=\"add\" [size]=\"18\" />\n </button>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4084
4086
|
}
|
|
4085
4087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
4086
4088
|
type: Component,
|
|
@@ -4097,7 +4099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4097
4099
|
useExisting: forwardRef(() => NumberFieldComponent),
|
|
4098
4100
|
multi: true,
|
|
4099
4101
|
},
|
|
4100
|
-
], template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n {{ label() }}\n </label>\n}\n<div\n [class]=\"{\n 'tedi-number-field': true,\n 'tedi-number-field--invalid': isInvalid(),\n 'tedi-number-field--disabled': isDisabled(),\n }\"\n>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--decrement': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"decrementDisabled()\"\n [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n (click)=\"handleButtonClick('decrement')\"\n >\n <tedi-icon name=\"remove\" [size]=\"18\" />\n </button>\n <div\n [class]=\"{\n 'tedi-number-field__input-wrapper': true,\n 'tedi-number-field__input-wrapper--small': size() === 'small',\n 'tedi-number-field__input-wrapper--disabled': isDisabled(),\n 'tedi-number-field__input-wrapper--with-suffix': suffix(),\n 'tedi-number-field__input-wrapper--full-width': fullWidth(),\n }\"\n (click)=\"focus()\"\n >\n <input\n #inputElement\n [id]=\"inputId()\"\n type=\"number\"\n inputmode=\"numeric\"\n class=\"tedi-number-field__input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-describedby]=\"feedbackId()\"\n (input)=\"handleInputChange($event)\"\n (blur)=\"handleBlur()\"\n />\n @if (suffix()) {\n <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n {{ suffix() }}\n </small>\n }\n </div>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--increment': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"incrementDisabled()\"\n [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n (click)=\"handleButtonClick('increment')\"\n >\n <tedi-icon name=\"add\" [size]=\"18\" />\n </button>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
|
|
4102
|
+
], template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n {{ label() }}\n </label>\n}\n<div\n [class]=\"{\n 'tedi-number-field': true,\n 'tedi-number-field--invalid': isInvalid(),\n 'tedi-number-field--disabled': isDisabled(),\n }\"\n>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--decrement': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"decrementDisabled()\"\n [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n (click)=\"handleButtonClick('decrement')\"\n >\n <tedi-icon name=\"remove\" [size]=\"18\" />\n </button>\n <div\n [class]=\"{\n 'tedi-number-field__input-wrapper': true,\n 'tedi-number-field__input-wrapper--small': size() === 'small',\n 'tedi-number-field__input-wrapper--disabled': isDisabled(),\n 'tedi-number-field__input-wrapper--with-suffix': suffix(),\n 'tedi-number-field__input-wrapper--full-width': fullWidth(),\n }\"\n (click)=\"focus()\"\n >\n <input\n #inputElement\n [id]=\"inputId()\"\n type=\"number\"\n inputmode=\"numeric\"\n class=\"tedi-number-field__input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-describedby]=\"feedbackId()\"\n (input)=\"handleInputChange($event)\"\n (blur)=\"handleBlur()\"\n />\n @if (suffix()) {\n <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n {{ suffix() }}\n </small>\n }\n </div>\n <button\n tedi-button\n type=\"button\"\n variant=\"secondary\"\n [class]=\"{\n 'tedi-number-field__button': true,\n 'tedi-number-field__button--increment': true,\n 'tedi-number-field__button--small': size() === 'small',\n }\"\n [disabled]=\"incrementDisabled()\"\n [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n (click)=\"handleButtonClick('increment')\"\n >\n <tedi-icon name=\"add\" [size]=\"18\" />\n </button>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
|
|
4101
4103
|
}], propDecorators: { inputRef: [{
|
|
4102
4104
|
type: ViewChild,
|
|
4103
4105
|
args: ["inputElement"]
|
|
@@ -4209,6 +4211,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4209
4211
|
args: ['inputElement']
|
|
4210
4212
|
}] } });
|
|
4211
4213
|
|
|
4214
|
+
/**
|
|
4215
|
+
* Injection token used by `tedi-form-field` to obtain
|
|
4216
|
+
* the associated control instance.
|
|
4217
|
+
*/
|
|
4218
|
+
const TEDI_FORM_FIELD_CONTROL = new InjectionToken("TEDI_FORM_FIELD_CONTROL");
|
|
4219
|
+
|
|
4220
|
+
class FormFieldComponent {
|
|
4221
|
+
/**
|
|
4222
|
+
* The size of the form field.
|
|
4223
|
+
* @default "default"
|
|
4224
|
+
*/
|
|
4225
|
+
size = input("default");
|
|
4226
|
+
/**
|
|
4227
|
+
* Icon name or configuration object.
|
|
4228
|
+
*/
|
|
4229
|
+
icon = input();
|
|
4230
|
+
/**
|
|
4231
|
+
* Whether the form field includes a clear button.
|
|
4232
|
+
* @default false
|
|
4233
|
+
*/
|
|
4234
|
+
clearable = input(false);
|
|
4235
|
+
/**
|
|
4236
|
+
* Custom CSS classes for the input.
|
|
4237
|
+
*/
|
|
4238
|
+
inputClass = input(null);
|
|
4239
|
+
control;
|
|
4240
|
+
feedback;
|
|
4241
|
+
resolvedIcon = computed(() => {
|
|
4242
|
+
const icon = this.icon();
|
|
4243
|
+
if (!icon)
|
|
4244
|
+
return undefined;
|
|
4245
|
+
return typeof icon === "string" ? { name: icon } : icon;
|
|
4246
|
+
});
|
|
4247
|
+
validationState = computed(() => {
|
|
4248
|
+
const feedbackType = this.feedback?.type();
|
|
4249
|
+
const fieldInvalid = this.control?.invalid();
|
|
4250
|
+
if (fieldInvalid || feedbackType === "error")
|
|
4251
|
+
return "invalid";
|
|
4252
|
+
if (feedbackType === "valid")
|
|
4253
|
+
return "valid";
|
|
4254
|
+
return "neutral";
|
|
4255
|
+
});
|
|
4256
|
+
showClearButton = computed(() => {
|
|
4257
|
+
const value = this.control?.value();
|
|
4258
|
+
return this.clearable() && !!value;
|
|
4259
|
+
});
|
|
4260
|
+
isDisabled = computed(() => this.control?.disabled() ?? false);
|
|
4261
|
+
hostClasses = computed(() => {
|
|
4262
|
+
return {
|
|
4263
|
+
"tedi-form-field": true,
|
|
4264
|
+
"tedi-form-field--valid": this.validationState() === "valid",
|
|
4265
|
+
"tedi-form-field--invalid": this.validationState() === "invalid",
|
|
4266
|
+
"tedi-form-field--disabled": this.control?.disabled(),
|
|
4267
|
+
"tedi-form-field--small": this.size() === "small",
|
|
4268
|
+
"tedi-form-field--large": this.size() === "large",
|
|
4269
|
+
"tedi-form-field--with-icon": this.showClearButton() || !!this.icon(),
|
|
4270
|
+
};
|
|
4271
|
+
});
|
|
4272
|
+
inputClasses = computed(() => {
|
|
4273
|
+
const customClass = this.inputClass();
|
|
4274
|
+
return {
|
|
4275
|
+
"tedi-form-field__input": true,
|
|
4276
|
+
...(customClass ? { [customClass]: true } : {}),
|
|
4277
|
+
};
|
|
4278
|
+
});
|
|
4279
|
+
clear() {
|
|
4280
|
+
this.control?.clearField?.();
|
|
4281
|
+
}
|
|
4282
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4283
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n <ng-content select=\"input[tedi-text-field]\"></ng-content>\n\n @if (showClearButton()) {\n <div class=\"tedi-form-field__buttons\">\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [disabled]=\"isDisabled()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input{cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:active){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4284
|
+
}
|
|
4285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
4286
|
+
type: Component,
|
|
4287
|
+
args: [{ selector: "tedi-form-field", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4288
|
+
NgClass,
|
|
4289
|
+
IconComponent,
|
|
4290
|
+
ClosingButtonComponent,
|
|
4291
|
+
SeparatorComponent,
|
|
4292
|
+
TediTranslationPipe,
|
|
4293
|
+
], host: {
|
|
4294
|
+
"[class]": "hostClasses()",
|
|
4295
|
+
}, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n <ng-content select=\"input[tedi-text-field]\"></ng-content>\n\n @if (showClearButton()) {\n <div class=\"tedi-form-field__buttons\">\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [disabled]=\"isDisabled()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input{cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:active){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}\n"] }]
|
|
4296
|
+
}], propDecorators: { control: [{
|
|
4297
|
+
type: ContentChild,
|
|
4298
|
+
args: [TEDI_FORM_FIELD_CONTROL]
|
|
4299
|
+
}], feedback: [{
|
|
4300
|
+
type: ContentChild,
|
|
4301
|
+
args: [FeedbackTextComponent]
|
|
4302
|
+
}] } });
|
|
4303
|
+
|
|
4304
|
+
class TextFieldComponent {
|
|
4305
|
+
el;
|
|
4306
|
+
ngControl;
|
|
4307
|
+
/**
|
|
4308
|
+
* Value of the input field. Supports two-way binding, use with form controls.
|
|
4309
|
+
*/
|
|
4310
|
+
value = model("");
|
|
4311
|
+
/**
|
|
4312
|
+
* Whether to hide arrows for number inputs.
|
|
4313
|
+
* @default true
|
|
4314
|
+
*/
|
|
4315
|
+
arrowsHidden = input(true);
|
|
4316
|
+
/**
|
|
4317
|
+
* Callback triggered when the clear button is clicked.
|
|
4318
|
+
*/
|
|
4319
|
+
clear = output();
|
|
4320
|
+
constructor(el, ngControl) {
|
|
4321
|
+
this.el = el;
|
|
4322
|
+
this.ngControl = ngControl;
|
|
4323
|
+
if (this.ngControl) {
|
|
4324
|
+
this.ngControl.valueAccessor = this;
|
|
4325
|
+
}
|
|
4326
|
+
}
|
|
4327
|
+
disabled = computed(() => this.el.nativeElement.disabled || this.formDisabled());
|
|
4328
|
+
invalid = computed(() => {
|
|
4329
|
+
const control = this.ngControl?.control;
|
|
4330
|
+
return !!(control?.invalid && (control?.touched || control?.dirty));
|
|
4331
|
+
});
|
|
4332
|
+
formDisabled = signal(false);
|
|
4333
|
+
onChange = () => { };
|
|
4334
|
+
onTouched = () => { };
|
|
4335
|
+
setValue(value) {
|
|
4336
|
+
this.el.nativeElement.value = value;
|
|
4337
|
+
this.value.set(value);
|
|
4338
|
+
}
|
|
4339
|
+
writeValue(value) {
|
|
4340
|
+
this.setValue(value ?? "");
|
|
4341
|
+
}
|
|
4342
|
+
registerOnChange(fn) {
|
|
4343
|
+
this.onChange = fn;
|
|
4344
|
+
}
|
|
4345
|
+
registerOnTouched(fn) {
|
|
4346
|
+
this.onTouched = fn;
|
|
4347
|
+
}
|
|
4348
|
+
setDisabledState(isDisabled) {
|
|
4349
|
+
this.formDisabled.set(isDisabled);
|
|
4350
|
+
this.el.nativeElement.disabled = isDisabled;
|
|
4351
|
+
}
|
|
4352
|
+
handleInputChange(event) {
|
|
4353
|
+
const input = event.target;
|
|
4354
|
+
const value = input.value;
|
|
4355
|
+
this.value.set(value);
|
|
4356
|
+
this.onChange(value);
|
|
4357
|
+
}
|
|
4358
|
+
handleBlur() {
|
|
4359
|
+
this.onTouched();
|
|
4360
|
+
}
|
|
4361
|
+
clearField() {
|
|
4362
|
+
if (this.disabled())
|
|
4363
|
+
return;
|
|
4364
|
+
this.setValue("");
|
|
4365
|
+
this.onChange("");
|
|
4366
|
+
this.clear.emit();
|
|
4367
|
+
this.onTouched();
|
|
4368
|
+
}
|
|
4369
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null" }, classAttribute: "tedi-text-field" }, providers: [
|
|
4371
|
+
{
|
|
4372
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4373
|
+
useExisting: forwardRef(() => TextFieldComponent),
|
|
4374
|
+
multi: true,
|
|
4375
|
+
},
|
|
4376
|
+
{
|
|
4377
|
+
provide: TEDI_FORM_FIELD_CONTROL,
|
|
4378
|
+
useExisting: forwardRef(() => TextFieldComponent),
|
|
4379
|
+
},
|
|
4380
|
+
], ngImport: i0, template: "", isInline: true, styles: [".tedi-text-field{flex:1;height:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-form-field--with-icon .tedi-text-field{padding-right:0}.tedi-form-field--small .tedi-text-field{padding-block:var(--form-field-padding-y-sm);padding-inline:var(--form-field-padding-x-md-default)}.tedi-form-field--large .tedi-text-field{padding-block:var(--form-field-padding-y-lg);padding-inline:var(--form-field-padding-x-lg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4381
|
+
}
|
|
4382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
4383
|
+
type: Component,
|
|
4384
|
+
args: [{ selector: "input[tedi-text-field]", standalone: true, providers: [
|
|
4385
|
+
{
|
|
4386
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4387
|
+
useExisting: forwardRef(() => TextFieldComponent),
|
|
4388
|
+
multi: true,
|
|
4389
|
+
},
|
|
4390
|
+
{
|
|
4391
|
+
provide: TEDI_FORM_FIELD_CONTROL,
|
|
4392
|
+
useExisting: forwardRef(() => TextFieldComponent),
|
|
4393
|
+
},
|
|
4394
|
+
], template: "", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4395
|
+
class: "tedi-text-field",
|
|
4396
|
+
"[class.tedi-text-field--arrows-hidden]": "arrowsHidden()",
|
|
4397
|
+
"[attr.aria-invalid]": "invalid() || null",
|
|
4398
|
+
"(input)": "handleInputChange($event)",
|
|
4399
|
+
"(blur)": "handleBlur()",
|
|
4400
|
+
}, styles: [".tedi-text-field{flex:1;height:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-form-field--with-icon .tedi-text-field{padding-right:0}.tedi-form-field--small .tedi-text-field{padding-block:var(--form-field-padding-y-sm);padding-inline:var(--form-field-padding-x-md-default)}.tedi-form-field--large .tedi-text-field{padding-block:var(--form-field-padding-y-lg);padding-inline:var(--form-field-padding-x-lg)}\n"] }]
|
|
4401
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.NgControl, decorators: [{
|
|
4402
|
+
type: Optional
|
|
4403
|
+
}, {
|
|
4404
|
+
type: Self
|
|
4405
|
+
}] }] });
|
|
4406
|
+
|
|
4212
4407
|
class TextGroupLabelComponent {
|
|
4213
4408
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4214
4409
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextGroupLabelComponent, isStandalone: true, selector: "tedi-text-group-label", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -4249,7 +4444,7 @@ class TextGroupComponent {
|
|
|
4249
4444
|
});
|
|
4250
4445
|
});
|
|
4251
4446
|
classes = computed(() => {
|
|
4252
|
-
const classList = [`tedi-text-group--${this.breakpointInputs().type}`];
|
|
4447
|
+
const classList = ['tedi-text-group', `tedi-text-group--${this.breakpointInputs().type}`];
|
|
4253
4448
|
return classList.join(" ");
|
|
4254
4449
|
});
|
|
4255
4450
|
ngAfterContentChecked() {
|
|
@@ -4262,22 +4457,22 @@ class TextGroupComponent {
|
|
|
4262
4457
|
}
|
|
4263
4458
|
}
|
|
4264
4459
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4265
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n <dt [attr.aria-label]=\"labelText()\">\n <span tedi-label aria-hidden=\"true\">\n <ng-content select=\"tedi-text-group-label\"></ng-content>\n </span>\n </dt>\n <dd>\n <ng-content select=\"tedi-text-group-value\"></ng-content>\n </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0
|
|
4460
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n <dt [attr.aria-label]=\"labelText()\">\n <span tedi-label aria-hidden=\"true\">\n <ng-content select=\"tedi-text-group-label\"></ng-content>\n </span>\n </dt>\n <dd>\n <ng-content select=\"tedi-text-group-value\"></ng-content>\n </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4266
4461
|
}
|
|
4267
4462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupComponent, decorators: [{
|
|
4268
4463
|
type: Component,
|
|
4269
4464
|
args: [{ standalone: true, selector: "tedi-text-group", imports: [
|
|
4270
4465
|
LabelComponent
|
|
4271
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n <dt [attr.aria-label]=\"labelText()\">\n <span tedi-label aria-hidden=\"true\">\n <ng-content select=\"tedi-text-group-label\"></ng-content>\n </span>\n </dt>\n <dd>\n <ng-content select=\"tedi-text-group-value\"></ng-content>\n </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0
|
|
4466
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n <dt [attr.aria-label]=\"labelText()\">\n <span tedi-label aria-hidden=\"true\">\n <ng-content select=\"tedi-text-group-label\"></ng-content>\n </span>\n </dt>\n <dd>\n <ng-content select=\"tedi-text-group-value\"></ng-content>\n </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
|
|
4272
4467
|
}] });
|
|
4273
4468
|
|
|
4274
4469
|
class TextGroupValueComponent {
|
|
4275
4470
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4276
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0
|
|
4471
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4277
4472
|
}
|
|
4278
4473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupValueComponent, decorators: [{
|
|
4279
4474
|
type: Component,
|
|
4280
|
-
args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0
|
|
4475
|
+
args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
|
|
4281
4476
|
}] });
|
|
4282
4477
|
|
|
4283
4478
|
class CarouselSlideDirective {
|
|
@@ -5251,13 +5446,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5251
5446
|
|
|
5252
5447
|
class HeaderComponent {
|
|
5253
5448
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-
|
|
5449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left);background:var(--header-background);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-header__link-button{display:inline-flex;align-items:center;padding:0;font-size:var(--body-regular-size);background-color:transparent;border:0}.tedi-header__link-button:hover span{text-decoration:underline!important}.tedi-header__link-button span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5255
5450
|
}
|
|
5256
5451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
5257
5452
|
type: Component,
|
|
5258
5453
|
args: [{ selector: "header[tedi-header]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
5259
5454
|
"class": "tedi-header"
|
|
5260
|
-
}, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-
|
|
5455
|
+
}, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left);background:var(--header-background);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-header__link-button{display:inline-flex;align-items:center;padding:0;font-size:var(--body-regular-size);background-color:transparent;border:0}.tedi-header__link-button:hover span{text-decoration:underline!important}.tedi-header__link-button span{text-decoration:none!important}\n"] }]
|
|
5261
5456
|
}] });
|
|
5262
5457
|
|
|
5263
5458
|
class HeaderActionsComponent {
|
|
@@ -5459,7 +5654,7 @@ class HeaderProfileComponent {
|
|
|
5459
5654
|
}
|
|
5460
5655
|
}
|
|
5461
5656
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5462
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showDropdown: { classPropertyName: "showDropdown", publicName: "showDropdown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-
|
|
5657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showDropdown: { classPropertyName: "showDropdown", publicName: "showDropdown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5463
5658
|
}
|
|
5464
5659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, decorators: [{
|
|
5465
5660
|
type: Component,
|
|
@@ -5473,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5473
5668
|
HideAtDirective,
|
|
5474
5669
|
NgTemplateOutlet,
|
|
5475
5670
|
TediTranslationPipe,
|
|
5476
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-
|
|
5671
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"] }]
|
|
5477
5672
|
}], ctorParameters: () => [] });
|
|
5478
5673
|
|
|
5479
5674
|
class HeaderRoleComponent {
|
|
@@ -6202,6 +6397,13 @@ class SpinnerComponent {
|
|
|
6202
6397
|
* Provides a text label for screen readers to announce the spinner's purpose or status.
|
|
6203
6398
|
*/
|
|
6204
6399
|
label = input();
|
|
6400
|
+
sizeConfig = {
|
|
6401
|
+
10: { strokeWidth: 4.4, r: 19.8 },
|
|
6402
|
+
16: { strokeWidth: 5.5, r: 19.25 },
|
|
6403
|
+
48: { strokeWidth: 3.6667, r: 20.1667 },
|
|
6404
|
+
};
|
|
6405
|
+
strokeWidth = computed(() => this.sizeConfig[this.size()].strokeWidth);
|
|
6406
|
+
r = computed(() => this.sizeConfig[this.size()].r);
|
|
6205
6407
|
classes = computed(() => {
|
|
6206
6408
|
const classList = [
|
|
6207
6409
|
"tedi-spinner",
|
|
@@ -6211,7 +6413,7 @@ class SpinnerComponent {
|
|
|
6211
6413
|
return classList.join(" ");
|
|
6212
6414
|
});
|
|
6213
6415
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6214
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:
|
|
6416
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n [attr.r]=\"r()\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:var(--tedi-spinner-stroke-width);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media (prefers-reduced-motion: reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke-width: 4.4}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke-width: 5.5}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke-width: 3.6666666667}@media (prefers-reduced-motion: reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6215
6417
|
}
|
|
6216
6418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
6217
6419
|
type: Component,
|
|
@@ -6221,7 +6423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6221
6423
|
"aria-live": "polite",
|
|
6222
6424
|
"[attr.aria-label]": "label() ? label() : null",
|
|
6223
6425
|
"[attr.aria-hidden]": "!label()"
|
|
6224
|
-
}, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:
|
|
6426
|
+
}, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n [attr.r]=\"r()\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:var(--tedi-spinner-stroke-width);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media (prefers-reduced-motion: reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke-width: 4.4}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke-width: 5.5}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke-width: 3.6666666667}@media (prefers-reduced-motion: reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"] }]
|
|
6225
6427
|
}] });
|
|
6226
6428
|
|
|
6227
6429
|
class ModalComponent {
|
|
@@ -6385,6 +6587,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6385
6587
|
}, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n <ng-content />\n</span>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n >\n </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"] }]
|
|
6386
6588
|
}] });
|
|
6387
6589
|
|
|
6590
|
+
class StatusBadgeComponent {
|
|
6591
|
+
idGenerator = inject(_IdGenerator);
|
|
6592
|
+
uniqueId = this.idGenerator.getId("tedi-status-badge");
|
|
6593
|
+
/**
|
|
6594
|
+
* The text to be displayed inside the StatusBadge.
|
|
6595
|
+
*/
|
|
6596
|
+
text = input("");
|
|
6597
|
+
/**
|
|
6598
|
+
* Additional classes to apply custom styles to the StatusBadge.
|
|
6599
|
+
*/
|
|
6600
|
+
class = input();
|
|
6601
|
+
/**
|
|
6602
|
+
* Provides the full text or description when the Badge represents an abbreviation.
|
|
6603
|
+
* This is typically shown as a tooltip on hover.
|
|
6604
|
+
*/
|
|
6605
|
+
title = input();
|
|
6606
|
+
/**
|
|
6607
|
+
* ARIA role attribute for accessibility.
|
|
6608
|
+
*/
|
|
6609
|
+
role = input();
|
|
6610
|
+
/**
|
|
6611
|
+
* Specifies the color scheme of the StatusBadge.
|
|
6612
|
+
* @default neutral
|
|
6613
|
+
*/
|
|
6614
|
+
color = input("neutral");
|
|
6615
|
+
/**
|
|
6616
|
+
* Determines the style or visual type of the StatusBadge.
|
|
6617
|
+
* @default filled
|
|
6618
|
+
*/
|
|
6619
|
+
variant = input("filled");
|
|
6620
|
+
/**
|
|
6621
|
+
* Specifies the size of the StatusBadge.
|
|
6622
|
+
* @default default
|
|
6623
|
+
*/
|
|
6624
|
+
size = input("default");
|
|
6625
|
+
/**
|
|
6626
|
+
* StatusBadge status indicator.
|
|
6627
|
+
*/
|
|
6628
|
+
status = input();
|
|
6629
|
+
/**
|
|
6630
|
+
* The name of the icon to be displayed inside the StatusBadge. The icon is rendered using the `Icon` component.
|
|
6631
|
+
*/
|
|
6632
|
+
icon = input("");
|
|
6633
|
+
classes = computed(() => {
|
|
6634
|
+
const classList = ["tedi-status-badge"];
|
|
6635
|
+
if (this.color()) {
|
|
6636
|
+
classList.push(`tedi-status-badge--color-${this.color()}`);
|
|
6637
|
+
}
|
|
6638
|
+
if (this.variant()) {
|
|
6639
|
+
classList.push(`tedi-status-badge--variant-${this.variant()}`);
|
|
6640
|
+
}
|
|
6641
|
+
if (this.status()) {
|
|
6642
|
+
classList.push("tedi-status-badge--status", `tedi-status-badge--status-${this.status()}`);
|
|
6643
|
+
}
|
|
6644
|
+
if (this.size() === "large") {
|
|
6645
|
+
classList.push("tedi-status-badge--large");
|
|
6646
|
+
}
|
|
6647
|
+
const hasText = !!this.text()?.trim();
|
|
6648
|
+
const hasIcon = !!this.icon()?.trim();
|
|
6649
|
+
if (hasIcon && !hasText) {
|
|
6650
|
+
classList.push("tedi-status-badge__icon-only");
|
|
6651
|
+
}
|
|
6652
|
+
const customClass = this.class();
|
|
6653
|
+
if (customClass) {
|
|
6654
|
+
classList.push(customClass);
|
|
6655
|
+
}
|
|
6656
|
+
return classList;
|
|
6657
|
+
});
|
|
6658
|
+
ariaLive = computed(() => {
|
|
6659
|
+
if (this.role() === "alert") {
|
|
6660
|
+
return "assertive";
|
|
6661
|
+
}
|
|
6662
|
+
if (this.role() === "status") {
|
|
6663
|
+
return "polite";
|
|
6664
|
+
}
|
|
6665
|
+
return null;
|
|
6666
|
+
});
|
|
6667
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6668
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusBadgeComponent, isStandalone: true, selector: "tedi-status-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n <abbr\n [ngClass]=\"classes()\"\n [attr.id]=\"uniqueId\"\n [attr.title]=\"title()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n >\n <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n </abbr>\n} @else {\n <div\n [ngClass]=\"classes()\"\n [attr.id]=\"uniqueId\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n >\n <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n </div>\n}\n\n<ng-template #statusBadgeContent>\n @if (icon()) {\n <tedi-icon class=\"tedi-status-badge__icon\" [name]=\"icon()\" [size]=\"16\" />\n }\n\n @if (text()) {\n <span class=\"tedi-status-badge__text\">{{ text() }}</span>\n }\n</ng-template>\n", styles: [".tedi-status-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-default-padding-y) var(--tag-default-padding-x);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--_status-badge-text);text-decoration:none;background:var(--_status-badge-background);border-radius:var(--tag-default-radius);box-shadow:var(--_status-badge-box-shadow)}.tedi-status-badge__text{min-width:fit-content;padding:0 var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.125rem;right:-.125rem;z-index:1;width:var(--status-indicator-sm);height:var(--status-indicator-sm);content:\"\";background-color:var(--_status-badge--indicator-background);border:1px solid var(--status-badge-indicator-border);border-radius:50%}.tedi-status-badge--status.tedi-status-badge--large:before{width:var(--status-indicator-lg);height:var(--status-indicator-lg)}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge .tedi-status-badge__icon{color:inherit}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;padding:var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);line-height:var(--body-small-regular-line-height)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6669
|
+
}
|
|
6670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, decorators: [{
|
|
6671
|
+
type: Component,
|
|
6672
|
+
args: [{ selector: "tedi-status-badge", standalone: true, imports: [IconComponent, CommonModule, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title()) {\n <abbr\n [ngClass]=\"classes()\"\n [attr.id]=\"uniqueId\"\n [attr.title]=\"title()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n >\n <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n </abbr>\n} @else {\n <div\n [ngClass]=\"classes()\"\n [attr.id]=\"uniqueId\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n >\n <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n </div>\n}\n\n<ng-template #statusBadgeContent>\n @if (icon()) {\n <tedi-icon class=\"tedi-status-badge__icon\" [name]=\"icon()\" [size]=\"16\" />\n }\n\n @if (text()) {\n <span class=\"tedi-status-badge__text\">{{ text() }}</span>\n }\n</ng-template>\n", styles: [".tedi-status-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-default-padding-y) var(--tag-default-padding-x);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--_status-badge-text);text-decoration:none;background:var(--_status-badge-background);border-radius:var(--tag-default-radius);box-shadow:var(--_status-badge-box-shadow)}.tedi-status-badge__text{min-width:fit-content;padding:0 var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.125rem;right:-.125rem;z-index:1;width:var(--status-indicator-sm);height:var(--status-indicator-sm);content:\"\";background-color:var(--_status-badge--indicator-background);border:1px solid var(--status-badge-indicator-border);border-radius:50%}.tedi-status-badge--status.tedi-status-badge--large:before{width:var(--status-indicator-lg);height:var(--status-indicator-lg)}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge .tedi-status-badge__icon{color:inherit}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;padding:var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);line-height:var(--body-small-regular-line-height)}\n"] }]
|
|
6673
|
+
}] });
|
|
6674
|
+
|
|
6675
|
+
class AccordionItemComponent {
|
|
6676
|
+
idGenerator = inject(_IdGenerator);
|
|
6677
|
+
bodyId = this.idGenerator.getId("tedi-accordion-body");
|
|
6678
|
+
headerId = this.idGenerator.getId("tedi-accordion-header");
|
|
6679
|
+
/**
|
|
6680
|
+
* If false, disables header toggling and enables using interactive elements in the accordion header.
|
|
6681
|
+
*/
|
|
6682
|
+
headerClickable = input(true);
|
|
6683
|
+
/** The title of the accordion item. */
|
|
6684
|
+
title = input("");
|
|
6685
|
+
/**
|
|
6686
|
+
* Sets how the accordion title stretches horizontally.
|
|
6687
|
+
* `hug` - container sizes to its content.
|
|
6688
|
+
* `fill` - container expands to available space, moving any trailing elements to the end.
|
|
6689
|
+
*/
|
|
6690
|
+
titleLayout = input("hug");
|
|
6691
|
+
/**
|
|
6692
|
+
* Whether the title is rendered as separate text in the accordion header.
|
|
6693
|
+
* If false and `showExpandLabel` is true, the title is used as the expand button label.
|
|
6694
|
+
*/
|
|
6695
|
+
showSeparateTitle = input(true);
|
|
6696
|
+
/** Label shown when accordion is collapsed */
|
|
6697
|
+
openLabel = input("open");
|
|
6698
|
+
/** Label shown when accordion is expanded */
|
|
6699
|
+
closeLabel = input("close");
|
|
6700
|
+
/**
|
|
6701
|
+
* Controls whether the expand/collapse label is shown.
|
|
6702
|
+
*/
|
|
6703
|
+
showExpandLabel = input(true);
|
|
6704
|
+
/**
|
|
6705
|
+
* Controls whether the default expand/collapse action is shown.
|
|
6706
|
+
*/
|
|
6707
|
+
showDefaultExpandAction = input(true);
|
|
6708
|
+
/**
|
|
6709
|
+
* Position of the expand action relative to the header content.
|
|
6710
|
+
*/
|
|
6711
|
+
expandActionPosition = input("end");
|
|
6712
|
+
/**
|
|
6713
|
+
* Whether the accordion item is expanded initially.
|
|
6714
|
+
* Does not control the expanded state after initialization.
|
|
6715
|
+
*/
|
|
6716
|
+
defaultExpanded = input(false);
|
|
6717
|
+
/** Optional description text shown in the header */
|
|
6718
|
+
description = input(undefined);
|
|
6719
|
+
/**
|
|
6720
|
+
* Position of the description relative to the title.
|
|
6721
|
+
*/
|
|
6722
|
+
descriptionPosition = input("start");
|
|
6723
|
+
/**
|
|
6724
|
+
* Enables the icon-card layout variant.
|
|
6725
|
+
*/
|
|
6726
|
+
showIconCard = input(false);
|
|
6727
|
+
/**
|
|
6728
|
+
* Marks the accordion item as selected.
|
|
6729
|
+
*/
|
|
6730
|
+
selected = input(false);
|
|
6731
|
+
/**
|
|
6732
|
+
* Custom CSS classes for the accordion header.
|
|
6733
|
+
*/
|
|
6734
|
+
headerClass = input(null);
|
|
6735
|
+
/**
|
|
6736
|
+
* Custom CSS classes for the accordion body.
|
|
6737
|
+
*/
|
|
6738
|
+
bodyClass = input(null);
|
|
6739
|
+
expanded = model(false);
|
|
6740
|
+
accordion = inject(AccordionComponent, { optional: true });
|
|
6741
|
+
ngOnInit() {
|
|
6742
|
+
this.setExpanded(this.defaultExpanded());
|
|
6743
|
+
}
|
|
6744
|
+
toggle() {
|
|
6745
|
+
this.setExpanded(!this.expanded());
|
|
6746
|
+
this.accordion?.onItemToggled(this);
|
|
6747
|
+
}
|
|
6748
|
+
setExpanded(value) {
|
|
6749
|
+
this.expanded.set(value);
|
|
6750
|
+
}
|
|
6751
|
+
expandLabel = computed(() => this.expanded() ? this.closeLabel() : this.openLabel());
|
|
6752
|
+
showStartExpandAction = computed(() => this.showDefaultExpandAction() && this.expandActionPosition() === "start");
|
|
6753
|
+
showEndExpandAction = computed(() => this.showDefaultExpandAction() && this.expandActionPosition() === "end");
|
|
6754
|
+
headerClasses = computed(() => {
|
|
6755
|
+
const customClass = this.headerClass();
|
|
6756
|
+
return {
|
|
6757
|
+
"tedi-accordion__header": true,
|
|
6758
|
+
...(customClass ? { [customClass]: true } : {}),
|
|
6759
|
+
"tedi-accordion__header--hoverable": this.headerClickable(),
|
|
6760
|
+
"tedi-accordion__header--expanded": this.expanded(),
|
|
6761
|
+
"tedi-accordion__header--with-icon-card": this.showIconCard(),
|
|
6762
|
+
};
|
|
6763
|
+
});
|
|
6764
|
+
bodyClasses = computed(() => {
|
|
6765
|
+
const customClass = this.bodyClass();
|
|
6766
|
+
return {
|
|
6767
|
+
"tedi-accordion__body": true,
|
|
6768
|
+
...(customClass ? { [customClass]: true } : {}),
|
|
6769
|
+
"tedi-accordion__body--with-icon-card": this.showIconCard(),
|
|
6770
|
+
};
|
|
6771
|
+
});
|
|
6772
|
+
hideTitleFromSR = computed(() => {
|
|
6773
|
+
return !this.headerClickable() && !this.showExpandLabel();
|
|
6774
|
+
});
|
|
6775
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6776
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { headerClickable: { classPropertyName: "headerClickable", publicName: "headerClickable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLayout: { classPropertyName: "titleLayout", publicName: "titleLayout", isSignal: true, isRequired: false, transformFunction: null }, showSeparateTitle: { classPropertyName: "showSeparateTitle", publicName: "showSeparateTitle", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, showExpandLabel: { classPropertyName: "showExpandLabel", publicName: "showExpandLabel", isSignal: true, isRequired: false, transformFunction: null }, showDefaultExpandAction: { classPropertyName: "showDefaultExpandAction", publicName: "showDefaultExpandAction", isSignal: true, isRequired: false, transformFunction: null }, expandActionPosition: { classPropertyName: "expandActionPosition", publicName: "expandActionPosition", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, showIconCard: { classPropertyName: "showIconCard", publicName: "showIconCard", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div\n class=\"tedi-accordion__item\"\n [class.tedi-accordion__item--selected]=\"selected()\"\n [class.tedi-accordion__item--expanded]=\"expanded()\"\n>\n @if (showIconCard()) {\n <ng-content select=\"[tedi-accordion-icon-card]\"></ng-content>\n }\n\n <div class=\"tedi-accordion__header-row\">\n @if (headerClickable()) {\n <button\n [id]=\"headerId\"\n type=\"button\"\n [ngClass]=\"headerClasses()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n >\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </button>\n } @else {\n <div [id]=\"headerId\" [ngClass]=\"headerClasses()\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </div>\n }\n </div>\n\n <div\n [ngClass]=\"bodyClasses()\"\n [id]=\"bodyId\"\n [attr.role]=\"expanded() ? 'region' : null\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n [attr.inert]=\"!expanded() ? '' : null\"\n >\n <div class=\"tedi-accordion__body--inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #headerContent>\n <div class=\"tedi-accordion__start\">\n <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n <ng-content select=\"[tedi-accordion-start-before-title]\"></ng-content>\n\n <span\n class=\"tedi-accordion__title\"\n [class.tedi-accordion__title--with-description]=\"description()\"\n [class.tedi-accordion__title--grow]=\"titleLayout() === 'fill'\"\n >\n <span class=\"tedi-accordion__title--main\">\n @if (showStartExpandAction()) {\n <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n }\n\n @if (showSeparateTitle()) {\n <span\n tedi-text\n color=\"secondary\"\n modifiers=\"normal\"\n [id]=\"headerId + '-title'\"\n [attr.aria-hidden]=\"hideTitleFromSR() ? 'true' : null\"\n >\n {{ title() | tediTranslate }}\n </span>\n }\n </span>\n\n @if (descriptionPosition() !== \"end\") {\n <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n\n @if (description(); as desc) {\n <span tedi-text color=\"tertiary\" modifiers=\"normal\">\n {{ desc | tediTranslate }}\n </span>\n }\n }\n </span>\n\n <ng-content select=\"[tedi-accordion-start-after-title]\"></ng-content>\n </div>\n\n @if (descriptionPosition() !== \"start\") {\n <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\n\n @if (description(); as desc) {\n <span tedi-text color=\"tertiary\" modifiers=\"small\">\n {{ desc | tediTranslate }}\n </span>\n }\n }\n\n @if (showEndExpandAction()) {\n <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n }\n\n <ng-content select=\"[tedi-accordion-end-action]\"></ng-content>\n</ng-template>\n\n<ng-template #collapseButton>\n @if (headerClickable()) {\n <div\n tedi-text\n modifiers=\"normal\"\n class=\"tedi-accordion__expand-indicator\"\n [class.tedi-accordion__expand-indicator--with-label]=\"showExpandLabel()\"\n >\n {{ (showExpandLabel() ? expandLabel() : \"\") | tediTranslate }}\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"tedi-accordion__toggle-button\"\n tedi-link\n [underline]=\"false\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-label]=\"\n !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n \"\n [attr.aria-labelledby]=\"headerId + '-title'\"\n >\n @if (showExpandLabel()) {\n {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}\n }\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #expandIcon>\n <tedi-icon\n aria-hidden=\"true\"\n name=\"expand_more\"\n class=\"tedi-accordion__icon\"\n [class.tedi-accordion__icon--expanded]=\"expanded()\"\n [class.tedi-accordion__icon--no-label]=\"!showExpandLabel()\"\n />\n</ng-template>\n", styles: [".tedi-accordion__item{display:grid;grid-template-rows:max-content minmax(0,0fr);grid-template-columns:auto 1fr;transition:grid-template-rows .3s ease}.tedi-accordion__item--selected{border:1px solid var(--card-border-selected);border-radius:var(--card-radius-rounded)}.tedi-accordion__item--selected .tedi-accordion__header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion__header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion__header--expanded{border-bottom:1px solid var(--card-border-primary)}.tedi-accordion__item--expanded{grid-template-rows:max-content minmax(0,1fr)}.tedi-accordion__item--expanded .tedi-accordion__body{border:1px solid var(--card-border-primary);border-top:none;border-radius:0 0 var(--card-radius-rounded) var(--card-radius-rounded)}.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 0}.tedi-accordion__header-row{display:flex;grid-row:1;grid-column:2;align-items:stretch}.tedi-accordion__header{position:relative;display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion__header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion__header--expanded.tedi-accordion__header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion__header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion__header--hoverable{cursor:pointer}.tedi-accordion__header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion__header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion__header--hoverable:focus-visible{z-index:1;outline:none;background:var(--card-background-primary);border:1px solid var(--card-border-primary);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-accordion__body{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion__body--inner{padding:var(--card-padding-md-default)}.tedi-accordion__icon{transition:transform .2s ease-in-out}.tedi-accordion__icon--expanded{transform:rotate(-180deg)}.tedi-accordion__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}[tedi-accordion-icon-card]{display:inline-flex;grid-row:1/span 2;grid-column:1;gap:var(--layout-grid-gutters-08);align-items:flex-start;align-self:stretch;justify-content:flex-end;padding:var(--card-padding-md-default);background:var(--card-background-secondary);border:1px solid var(--card-border-primary);border-right:none;border-radius:var(--card-radius-rounded) var(--card-radius-sharp) var(--card-radius-sharp) var(--card-radius-rounded)}.tedi-accordion__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion__title--main{display:flex;gap:inherit;align-items:center}.tedi-accordion__title--with-description,.tedi-accordion__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion__title--grow{flex:1;justify-content:space-between}.tedi-accordion__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion__expand-indicator tedi-icon{color:inherit}.tedi-accordion__expand-indicator--with-label tedi-icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-link tedi-icon.tedi-accordion__icon--no-label{font-size:var(--icon-05)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6777
|
+
}
|
|
6778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
6779
|
+
type: Component,
|
|
6780
|
+
args: [{ selector: "tedi-accordion-item", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6781
|
+
IconComponent,
|
|
6782
|
+
CommonModule,
|
|
6783
|
+
TextComponent,
|
|
6784
|
+
LinkComponent,
|
|
6785
|
+
TediTranslationPipe,
|
|
6786
|
+
NgClass,
|
|
6787
|
+
], template: "<div\n class=\"tedi-accordion__item\"\n [class.tedi-accordion__item--selected]=\"selected()\"\n [class.tedi-accordion__item--expanded]=\"expanded()\"\n>\n @if (showIconCard()) {\n <ng-content select=\"[tedi-accordion-icon-card]\"></ng-content>\n }\n\n <div class=\"tedi-accordion__header-row\">\n @if (headerClickable()) {\n <button\n [id]=\"headerId\"\n type=\"button\"\n [ngClass]=\"headerClasses()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n >\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </button>\n } @else {\n <div [id]=\"headerId\" [ngClass]=\"headerClasses()\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </div>\n }\n </div>\n\n <div\n [ngClass]=\"bodyClasses()\"\n [id]=\"bodyId\"\n [attr.role]=\"expanded() ? 'region' : null\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n [attr.inert]=\"!expanded() ? '' : null\"\n >\n <div class=\"tedi-accordion__body--inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #headerContent>\n <div class=\"tedi-accordion__start\">\n <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n <ng-content select=\"[tedi-accordion-start-before-title]\"></ng-content>\n\n <span\n class=\"tedi-accordion__title\"\n [class.tedi-accordion__title--with-description]=\"description()\"\n [class.tedi-accordion__title--grow]=\"titleLayout() === 'fill'\"\n >\n <span class=\"tedi-accordion__title--main\">\n @if (showStartExpandAction()) {\n <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n }\n\n @if (showSeparateTitle()) {\n <span\n tedi-text\n color=\"secondary\"\n modifiers=\"normal\"\n [id]=\"headerId + '-title'\"\n [attr.aria-hidden]=\"hideTitleFromSR() ? 'true' : null\"\n >\n {{ title() | tediTranslate }}\n </span>\n }\n </span>\n\n @if (descriptionPosition() !== \"end\") {\n <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n\n @if (description(); as desc) {\n <span tedi-text color=\"tertiary\" modifiers=\"normal\">\n {{ desc | tediTranslate }}\n </span>\n }\n }\n </span>\n\n <ng-content select=\"[tedi-accordion-start-after-title]\"></ng-content>\n </div>\n\n @if (descriptionPosition() !== \"start\") {\n <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\n\n @if (description(); as desc) {\n <span tedi-text color=\"tertiary\" modifiers=\"small\">\n {{ desc | tediTranslate }}\n </span>\n }\n }\n\n @if (showEndExpandAction()) {\n <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n }\n\n <ng-content select=\"[tedi-accordion-end-action]\"></ng-content>\n</ng-template>\n\n<ng-template #collapseButton>\n @if (headerClickable()) {\n <div\n tedi-text\n modifiers=\"normal\"\n class=\"tedi-accordion__expand-indicator\"\n [class.tedi-accordion__expand-indicator--with-label]=\"showExpandLabel()\"\n >\n {{ (showExpandLabel() ? expandLabel() : \"\") | tediTranslate }}\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"tedi-accordion__toggle-button\"\n tedi-link\n [underline]=\"false\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-label]=\"\n !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n \"\n [attr.aria-labelledby]=\"headerId + '-title'\"\n >\n @if (showExpandLabel()) {\n {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}\n }\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #expandIcon>\n <tedi-icon\n aria-hidden=\"true\"\n name=\"expand_more\"\n class=\"tedi-accordion__icon\"\n [class.tedi-accordion__icon--expanded]=\"expanded()\"\n [class.tedi-accordion__icon--no-label]=\"!showExpandLabel()\"\n />\n</ng-template>\n", styles: [".tedi-accordion__item{display:grid;grid-template-rows:max-content minmax(0,0fr);grid-template-columns:auto 1fr;transition:grid-template-rows .3s ease}.tedi-accordion__item--selected{border:1px solid var(--card-border-selected);border-radius:var(--card-radius-rounded)}.tedi-accordion__item--selected .tedi-accordion__header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion__header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion__header--expanded{border-bottom:1px solid var(--card-border-primary)}.tedi-accordion__item--expanded{grid-template-rows:max-content minmax(0,1fr)}.tedi-accordion__item--expanded .tedi-accordion__body{border:1px solid var(--card-border-primary);border-top:none;border-radius:0 0 var(--card-radius-rounded) var(--card-radius-rounded)}.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 0}.tedi-accordion__header-row{display:flex;grid-row:1;grid-column:2;align-items:stretch}.tedi-accordion__header{position:relative;display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion__header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion__header--expanded.tedi-accordion__header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion__header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion__header--hoverable{cursor:pointer}.tedi-accordion__header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion__header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion__header--hoverable:focus-visible{z-index:1;outline:none;background:var(--card-background-primary);border:1px solid var(--card-border-primary);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-accordion__body{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion__body--inner{padding:var(--card-padding-md-default)}.tedi-accordion__icon{transition:transform .2s ease-in-out}.tedi-accordion__icon--expanded{transform:rotate(-180deg)}.tedi-accordion__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}[tedi-accordion-icon-card]{display:inline-flex;grid-row:1/span 2;grid-column:1;gap:var(--layout-grid-gutters-08);align-items:flex-start;align-self:stretch;justify-content:flex-end;padding:var(--card-padding-md-default);background:var(--card-background-secondary);border:1px solid var(--card-border-primary);border-right:none;border-radius:var(--card-radius-rounded) var(--card-radius-sharp) var(--card-radius-sharp) var(--card-radius-rounded)}.tedi-accordion__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion__title--main{display:flex;gap:inherit;align-items:center}.tedi-accordion__title--with-description,.tedi-accordion__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion__title--grow{flex:1;justify-content:space-between}.tedi-accordion__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion__expand-indicator tedi-icon{color:inherit}.tedi-accordion__expand-indicator--with-label tedi-icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-link tedi-icon.tedi-accordion__icon--no-label{font-size:var(--icon-05)}\n"] }]
|
|
6788
|
+
}] });
|
|
6789
|
+
|
|
6790
|
+
class AccordionComponent {
|
|
6791
|
+
/**
|
|
6792
|
+
* Whether the accordion allows multiple items to be expanded at the same time.
|
|
6793
|
+
* If false, opening one item will collapse the others automatically.
|
|
6794
|
+
*/
|
|
6795
|
+
allowMultiple = input(false);
|
|
6796
|
+
items = contentChildren(AccordionItemComponent);
|
|
6797
|
+
onItemToggled(activeItem) {
|
|
6798
|
+
if (this.allowMultiple())
|
|
6799
|
+
return;
|
|
6800
|
+
if (activeItem.expanded()) {
|
|
6801
|
+
this.items().forEach((item) => {
|
|
6802
|
+
if (item !== activeItem) {
|
|
6803
|
+
item.setExpanded(false);
|
|
6804
|
+
}
|
|
6805
|
+
});
|
|
6806
|
+
}
|
|
6807
|
+
}
|
|
6808
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6809
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-accordion{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6810
|
+
}
|
|
6811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
6812
|
+
type: Component,
|
|
6813
|
+
args: [{ selector: "tedi-accordion", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-accordion{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}\n"] }]
|
|
6814
|
+
}] });
|
|
6815
|
+
|
|
6388
6816
|
class VerticalSpacingItemDirective {
|
|
6389
6817
|
el;
|
|
6390
6818
|
renderer;
|
|
@@ -6450,5 +6878,5 @@ function provideTedi(config = {}) {
|
|
|
6450
6878
|
* Generated bundle index. Do not edit.
|
|
6451
6879
|
*/
|
|
6452
6880
|
|
|
6453
|
-
export { AVAILABLE_LANGUAGES, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
|
|
6881
|
+
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, StatusBadgeComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
|
|
6454
6882
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|