@tedi-design-system/angular 6.3.0-rc.12 → 6.3.0-rc.14
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/fesm2022/tedi-design-system-angular-tedi.mjs +451 -67
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/index.css +1 -1
- package/package.json +2 -2
- package/tedi/components/form/checkbox/checkbox.component.d.ts +23 -2
- package/tedi/components/form/checkbox/checkbox.component.d.ts.map +1 -1
- package/tedi/components/form/checkbox-group/checkbox-group.component.d.ts +50 -2
- package/tedi/components/form/checkbox-group/checkbox-group.component.d.ts.map +1 -1
- package/tedi/components/form/radio/radio.component.d.ts +23 -2
- package/tedi/components/form/radio/radio.component.d.ts.map +1 -1
- package/tedi/components/form/radio-card/radio-card.component.d.ts +9 -1
- package/tedi/components/form/radio-card/radio-card.component.d.ts.map +1 -1
- package/tedi/components/form/radio-card-group/radio-card-group.component.d.ts +8 -1
- package/tedi/components/form/radio-card-group/radio-card-group.component.d.ts.map +1 -1
- package/tedi/components/form/radio-group/radio-group.component.d.ts +56 -2
- package/tedi/components/form/radio-group/radio-group.component.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
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,
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, isDevMode, forwardRef, booleanAttribute, HostListener, viewChild, contentChild, contentChildren, ViewChild, TemplateRef, viewChildren, NgZone, DestroyRef, ContentChild, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/cdk/layout';
|
|
4
4
|
import * as i1$2 from '@angular/common';
|
|
5
5
|
import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
|
|
@@ -2128,11 +2128,11 @@ class CollapseComponent {
|
|
|
2128
2128
|
}
|
|
2129
2129
|
}
|
|
2130
2130
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2131
|
-
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
|
|
2131
|
+
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: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(--tedi-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(--tedi-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 });
|
|
2132
2132
|
}
|
|
2133
2133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
2134
2134
|
type: Component,
|
|
2135
|
-
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
|
|
2135
|
+
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: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(--tedi-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(--tedi-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"] }]
|
|
2136
2136
|
}] });
|
|
2137
2137
|
|
|
2138
2138
|
class ListComponent {
|
|
@@ -2163,6 +2163,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2163
2163
|
}, template: "<ng-content></ng-content>", styles: [".tedi-list li{margin-top:var(--list-list-item-margin-y);margin-bottom:var(--list-list-item-margin-y)}ul.tedi-list{padding-left:var(--list-padding-left-level-1);list-style:none}ul.tedi-list li{position:relative;padding-left:calc(var(--list-inner-spacing-x) + var(--list-icon-size))}ul.tedi-list li:before{position:absolute;top:.5em;left:0;width:var(--list-icon-size);height:var(--list-icon-size);content:\"\";border:2px solid var(--general-icon-brand);border-radius:50%}ul.tedi-list li ul.tedi-list li:before{border-width:1px}ul.tedi-list li ul.tedi-list li ul.tedi-list li:before{width:calc(var(--list-icon-size) * .9);height:calc(var(--list-icon-size) * .9)}ul.tedi-list--bullet-color-primary li:before{border-color:var(--general-icon-primary)}ul.tedi-list--bullet-color-secondary li:before{border-color:var(--general-icon-secondary)}ul.tedi-list--bullet-color-tertiary li:before{border-color:var(--general-icon-tertiary)}ul.tedi-list--bullet-color-brand li:before{border-color:var(--general-icon-brand)}ul.tedi-list--bullet-color-brand-dark li:before{border-color:var(--general-icon-brand-dark)}ul.tedi-list--bullet-color-success li:before{border-color:var(--general-icon-success)}ul.tedi-list--bullet-color-warning li:before{border-color:var(--general-icon-warning)}ul.tedi-list--bullet-color-warning-dark li:before{border-color:var(--general-icon-warning-dark)}ul.tedi-list--bullet-color-danger li:before{border-color:var(--general-icon-danger)}ul.tedi-list--bullet-color-white li:before{border-color:var(--general-icon-white)}ul.tedi-list ul.tedi-list{padding-left:0}ul.tedi-list--unstyled{padding-left:0;list-style:none}ul.tedi-list--unstyled li:before{display:none}ol.tedi-list{list-style:none;counter-reset:item}ol.tedi-list li{padding-left:var(--list-padding-left-level-1);counter-increment:item}ol.tedi-list li:before{content:counters(item,\".\") \". \"}ol.tedi-list--unstyled{padding-left:0;list-style:none}ol.tedi-list--unstyled li:before{display:none}\n"] }]
|
|
2164
2164
|
}] });
|
|
2165
2165
|
|
|
2166
|
+
let nextGroupId$1 = 0;
|
|
2167
|
+
class CheckboxGroupComponent {
|
|
2168
|
+
/**
|
|
2169
|
+
* Label text displayed above the checkbox group.
|
|
2170
|
+
*/
|
|
2171
|
+
label = input();
|
|
2172
|
+
/**
|
|
2173
|
+
* Layout direction of the checkboxes.
|
|
2174
|
+
* @default horizontal
|
|
2175
|
+
*/
|
|
2176
|
+
direction = input("horizontal");
|
|
2177
|
+
/**
|
|
2178
|
+
* Selected values. Bind with `[(values)]` or use a FormControl on the group.
|
|
2179
|
+
* When provided, the group enters managed mode and coordinates `checked`
|
|
2180
|
+
* on every registered child.
|
|
2181
|
+
* @default []
|
|
2182
|
+
*/
|
|
2183
|
+
values = model([]);
|
|
2184
|
+
/**
|
|
2185
|
+
* Disables the entire group. Propagates to all children.
|
|
2186
|
+
* @default false
|
|
2187
|
+
*/
|
|
2188
|
+
disabled = input(false);
|
|
2189
|
+
/**
|
|
2190
|
+
* Accessible name for the group. Use when no visible `label` is rendered.
|
|
2191
|
+
* Ignored when `label` or `ariaLabelledby` is provided.
|
|
2192
|
+
*/
|
|
2193
|
+
ariaLabel = input();
|
|
2194
|
+
/**
|
|
2195
|
+
* ID of an external element that labels the group. Ignored when `label` is
|
|
2196
|
+
* provided.
|
|
2197
|
+
*/
|
|
2198
|
+
ariaLabelledby = input();
|
|
2199
|
+
renderer = inject(Renderer2);
|
|
2200
|
+
labelId = `tedi-checkbox-group-${++nextGroupId$1}-label`;
|
|
2201
|
+
children = signal([]);
|
|
2202
|
+
cvaDisabled = signal(false);
|
|
2203
|
+
managed = signal(false);
|
|
2204
|
+
onChange = () => { };
|
|
2205
|
+
onTouched = () => { };
|
|
2206
|
+
isManaged = this.managed.asReadonly();
|
|
2207
|
+
isDisabled = computed(() => this.disabled() || this.cvaDisabled());
|
|
2208
|
+
managedAriaLabelledby = computed(() => {
|
|
2209
|
+
if (!this.isManaged())
|
|
2210
|
+
return null;
|
|
2211
|
+
if (this.label())
|
|
2212
|
+
return this.labelId;
|
|
2213
|
+
return this.ariaLabelledby() ?? null;
|
|
2214
|
+
});
|
|
2215
|
+
managedAriaLabel = computed(() => {
|
|
2216
|
+
if (!this.isManaged())
|
|
2217
|
+
return null;
|
|
2218
|
+
if (this.label() || this.ariaLabelledby())
|
|
2219
|
+
return null;
|
|
2220
|
+
return this.ariaLabel() ?? null;
|
|
2221
|
+
});
|
|
2222
|
+
constructor() {
|
|
2223
|
+
effect(() => {
|
|
2224
|
+
if (this.values().length > 0) {
|
|
2225
|
+
this.managed.set(true);
|
|
2226
|
+
}
|
|
2227
|
+
this.syncChildrenChecked();
|
|
2228
|
+
});
|
|
2229
|
+
}
|
|
2230
|
+
writeValue(values) {
|
|
2231
|
+
this.values.set(values ?? []);
|
|
2232
|
+
this.managed.set(true);
|
|
2233
|
+
}
|
|
2234
|
+
registerOnChange(fn) {
|
|
2235
|
+
this.onChange = fn;
|
|
2236
|
+
this.managed.set(true);
|
|
2237
|
+
}
|
|
2238
|
+
registerOnTouched(fn) {
|
|
2239
|
+
this.onTouched = fn;
|
|
2240
|
+
}
|
|
2241
|
+
setDisabledState(isDisabled) {
|
|
2242
|
+
this.cvaDisabled.set(isDisabled);
|
|
2243
|
+
this.managed.set(true);
|
|
2244
|
+
}
|
|
2245
|
+
registerChild(child) {
|
|
2246
|
+
this.children.update((list) => [...list, child]);
|
|
2247
|
+
this.applyCheckedTo(child);
|
|
2248
|
+
}
|
|
2249
|
+
unregisterChild(child) {
|
|
2250
|
+
this.children.update((list) => list.filter((c) => c !== child));
|
|
2251
|
+
}
|
|
2252
|
+
onChildChange(value, checked) {
|
|
2253
|
+
if (!this.isManaged())
|
|
2254
|
+
return;
|
|
2255
|
+
const current = this.values();
|
|
2256
|
+
const has = current.includes(value);
|
|
2257
|
+
if (checked && !has) {
|
|
2258
|
+
this.values.set([...current, value]);
|
|
2259
|
+
}
|
|
2260
|
+
else if (!checked && has) {
|
|
2261
|
+
this.values.set(current.filter((v) => v !== value));
|
|
2262
|
+
}
|
|
2263
|
+
else {
|
|
2264
|
+
return;
|
|
2265
|
+
}
|
|
2266
|
+
this.onChange(this.values());
|
|
2267
|
+
this.onTouched();
|
|
2268
|
+
}
|
|
2269
|
+
isSelected(value) {
|
|
2270
|
+
return value !== undefined && this.values().includes(value);
|
|
2271
|
+
}
|
|
2272
|
+
syncChildrenChecked() {
|
|
2273
|
+
if (!this.isManaged())
|
|
2274
|
+
return;
|
|
2275
|
+
for (const child of this.children()) {
|
|
2276
|
+
this.applyCheckedTo(child);
|
|
2277
|
+
}
|
|
2278
|
+
}
|
|
2279
|
+
applyCheckedTo(child) {
|
|
2280
|
+
if (!this.isManaged())
|
|
2281
|
+
return;
|
|
2282
|
+
const childVal = child.value();
|
|
2283
|
+
if (childVal === undefined)
|
|
2284
|
+
return;
|
|
2285
|
+
const desired = this.values().includes(childVal);
|
|
2286
|
+
const el = child.hostElement;
|
|
2287
|
+
if (el.checked !== desired) {
|
|
2288
|
+
this.renderer.setProperty(el, "checked", desired);
|
|
2289
|
+
}
|
|
2290
|
+
}
|
|
2291
|
+
/** @internal */
|
|
2292
|
+
warnMissingValue() {
|
|
2293
|
+
if (isDevMode()) {
|
|
2294
|
+
console.warn("[tedi-checkbox-group] A checkbox inside a managed group is missing a [value] input and will be ignored.");
|
|
2295
|
+
}
|
|
2296
|
+
}
|
|
2297
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2298
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CheckboxGroupComponent, isStandalone: true, selector: "tedi-checkbox-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange" }, host: { properties: { "attr.role": "isManaged() ? 'group' : null", "attr.aria-labelledby": "managedAriaLabelledby()", "attr.aria-label": "managedAriaLabel()", "attr.aria-disabled": "isManaged() && isDisabled() ? 'true' : null" }, classAttribute: "tedi-checkbox-group" }, providers: [
|
|
2299
|
+
{
|
|
2300
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2301
|
+
useExisting: forwardRef(() => CheckboxGroupComponent),
|
|
2302
|
+
multi: true,
|
|
2303
|
+
},
|
|
2304
|
+
], ngImport: i0, template: "@if (label()) {\n <p [id]=\"labelId\" class=\"tedi-checkbox-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-checkbox-group__checks\" [class.tedi-checkbox-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-checkbox-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-checkbox-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-checkbox-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-checkbox-group__checks--vertical{flex-direction:column}.tedi-checkbox-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-checkbox-group__subtexts:empty{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2305
|
+
}
|
|
2306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
2307
|
+
type: Component,
|
|
2308
|
+
args: [{ standalone: true, imports: [TextComponent], selector: "tedi-checkbox-group", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2309
|
+
{
|
|
2310
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2311
|
+
useExisting: forwardRef(() => CheckboxGroupComponent),
|
|
2312
|
+
multi: true,
|
|
2313
|
+
},
|
|
2314
|
+
], host: {
|
|
2315
|
+
class: "tedi-checkbox-group",
|
|
2316
|
+
"[attr.role]": "isManaged() ? 'group' : null",
|
|
2317
|
+
"[attr.aria-labelledby]": "managedAriaLabelledby()",
|
|
2318
|
+
"[attr.aria-label]": "managedAriaLabel()",
|
|
2319
|
+
"[attr.aria-disabled]": "isManaged() && isDisabled() ? 'true' : null",
|
|
2320
|
+
}, template: "@if (label()) {\n <p [id]=\"labelId\" class=\"tedi-checkbox-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-checkbox-group__checks\" [class.tedi-checkbox-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-checkbox-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-checkbox-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-checkbox-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-checkbox-group__checks--vertical{flex-direction:column}.tedi-checkbox-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-checkbox-group__subtexts:empty{display:none}\n"] }]
|
|
2321
|
+
}], ctorParameters: () => [] });
|
|
2322
|
+
|
|
2166
2323
|
class CheckboxComponent {
|
|
2167
2324
|
/**
|
|
2168
2325
|
* Size of the checkbox.
|
|
@@ -2174,15 +2331,57 @@ class CheckboxComponent {
|
|
|
2174
2331
|
* @default false
|
|
2175
2332
|
*/
|
|
2176
2333
|
invalid = input(false);
|
|
2334
|
+
/**
|
|
2335
|
+
* Identity of this checkbox inside a managed `<tedi-checkbox-group>`.
|
|
2336
|
+
* Required when the parent group is managed (has a FormControl or
|
|
2337
|
+
* `[(values)]` binding). Ignored otherwise.
|
|
2338
|
+
*/
|
|
2339
|
+
value = input();
|
|
2340
|
+
/**
|
|
2341
|
+
* Disables this checkbox. An enclosing disabled `<tedi-checkbox-group>`
|
|
2342
|
+
* forces disabled regardless of this input.
|
|
2343
|
+
* @default false
|
|
2344
|
+
*/
|
|
2345
|
+
disabled = input(false, { transform: booleanAttribute });
|
|
2346
|
+
elementRef = inject(ElementRef);
|
|
2347
|
+
group = inject(CheckboxGroupComponent, { optional: true });
|
|
2348
|
+
warned = false;
|
|
2349
|
+
effectiveDisabled = computed(() => this.disabled() || (this.group?.isDisabled() ?? false));
|
|
2350
|
+
get hostElement() {
|
|
2351
|
+
return this.elementRef.nativeElement;
|
|
2352
|
+
}
|
|
2353
|
+
ngOnInit() {
|
|
2354
|
+
this.group?.registerChild(this);
|
|
2355
|
+
}
|
|
2356
|
+
ngOnDestroy() {
|
|
2357
|
+
this.group?.unregisterChild(this);
|
|
2358
|
+
}
|
|
2359
|
+
handleChange() {
|
|
2360
|
+
if (!this.group || !this.group.isManaged())
|
|
2361
|
+
return;
|
|
2362
|
+
if (this.effectiveDisabled())
|
|
2363
|
+
return;
|
|
2364
|
+
const v = this.value();
|
|
2365
|
+
if (v === undefined) {
|
|
2366
|
+
if (!this.warned) {
|
|
2367
|
+
this.warned = true;
|
|
2368
|
+
this.group.warnMissingValue();
|
|
2369
|
+
}
|
|
2370
|
+
return;
|
|
2371
|
+
}
|
|
2372
|
+
this.group.onChildChange(v, this.hostElement.checked);
|
|
2373
|
+
}
|
|
2177
2374
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CheckboxComponent, isStandalone: true, selector: "input[type=checkbox][tedi-checkbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-checkbox--large": "size() === 'large'", "class.tedi-checkbox--invalid": "invalid()" } }, ngImport: i0, template: "", isInline: true, styles: ["input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1.125rem;position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-checkbox)}@media (min-width: 576px){input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1rem}}input[tedi-checkbox][type=checkbox]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-checkbox][type=checkbox]:not(:disabled):active{background-color:var(--form-checkbox-radio-default-background-active);border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-checkbox][type=checkbox]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-checkbox][type=checkbox]:checked,input[tedi-checkbox][type=checkbox]:indeterminate{background-color:var(--form-checkbox-radio-default-background-selected);border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-checkbox][type=checkbox]:checked:disabled,input[tedi-checkbox][type=checkbox]:indeterminate:disabled{cursor:not-allowed;background-color:var(--form-checkbox-radio-default-background-selected-disabled);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-checkbox][type=checkbox]:checked:before,input[tedi-checkbox][type=checkbox]:indeterminate:before{position:absolute;top:50%;left:50%;font-family:Material Symbols Outlined,sans-serif;font-size:var(--_checkbox-icon-size);line-height:1;color:var(--form-checkbox-radio-default-check-indicator-default);content:\"check\";transform:translate(-50%,-50%);-webkit-font-smoothing:antialiased}input[tedi-checkbox][type=checkbox]:checked:before{content:\"check\"}input[tedi-checkbox][type=checkbox]:indeterminate:before{content:\"remove\"}input[tedi-checkbox][type=checkbox]:focus-visible{outline
|
|
2375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CheckboxComponent, isStandalone: true, selector: "input[type=checkbox][tedi-checkbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "handleChange()" }, properties: { "class.tedi-checkbox--large": "size() === 'large'", "class.tedi-checkbox--invalid": "invalid()", "disabled": "effectiveDisabled()" } }, ngImport: i0, template: "", isInline: true, styles: ["input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1.125rem;position:relative;width:var(--form-checkbox-radio-size-responsive);min-width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-checkbox)}@media (min-width: 576px){input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1rem}}input[tedi-checkbox][type=checkbox]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-checkbox][type=checkbox]:not(:disabled):active{background-color:var(--form-checkbox-radio-default-background-active);border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-checkbox][type=checkbox]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-checkbox][type=checkbox]:checked,input[tedi-checkbox][type=checkbox]:indeterminate{background-color:var(--form-checkbox-radio-default-background-selected);border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-checkbox][type=checkbox]:checked:disabled,input[tedi-checkbox][type=checkbox]:indeterminate:disabled{cursor:not-allowed;background-color:var(--form-checkbox-radio-default-background-selected-disabled);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-checkbox][type=checkbox]:checked:before,input[tedi-checkbox][type=checkbox]:indeterminate:before{position:absolute;top:50%;left:50%;font-family:Material Symbols Outlined,sans-serif;font-size:var(--_checkbox-icon-size);line-height:1;color:var(--form-checkbox-radio-default-check-indicator-default);content:\"check\";transform:translate(-50%,-50%);-webkit-font-smoothing:antialiased}input[tedi-checkbox][type=checkbox]:checked:before{content:\"check\"}input[tedi-checkbox][type=checkbox]:indeterminate:before{content:\"remove\"}input[tedi-checkbox][type=checkbox]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled):user-invalid,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).ng-invalid.ng-touched{background-color:var(--form-checkbox-radio-default-background-error);border-color:var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid:hover,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled):user-invalid:hover,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).ng-invalid.ng-touched:hover{border-color:var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox].tedi-checkbox--large{--_checkbox-icon-size: 1.125rem;width:var(--form-checkbox-radio-size-large);height:var(--form-checkbox-radio-size-large)}label:has(input[tedi-checkbox]:not(:disabled)){cursor:pointer}label:has(input[tedi-checkbox]:disabled){cursor:not-allowed}label:has(input[tedi-checkbox])+tedi-feedback-text{padding-left:var(--form-checkbox-radio-size-responsive);margin-left:var(--form-checkbox-radio-inner-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2179
2376
|
}
|
|
2180
2377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2181
2378
|
type: Component,
|
|
2182
2379
|
args: [{ standalone: true, selector: "input[type=checkbox][tedi-checkbox]", template: "", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2183
2380
|
"[class.tedi-checkbox--large]": "size() === 'large'",
|
|
2184
2381
|
"[class.tedi-checkbox--invalid]": "invalid()",
|
|
2185
|
-
|
|
2382
|
+
"[disabled]": "effectiveDisabled()",
|
|
2383
|
+
"(change)": "handleChange()",
|
|
2384
|
+
}, styles: ["input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1.125rem;position:relative;width:var(--form-checkbox-radio-size-responsive);min-width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-checkbox)}@media (min-width: 576px){input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1rem}}input[tedi-checkbox][type=checkbox]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-checkbox][type=checkbox]:not(:disabled):active{background-color:var(--form-checkbox-radio-default-background-active);border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-checkbox][type=checkbox]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-checkbox][type=checkbox]:checked,input[tedi-checkbox][type=checkbox]:indeterminate{background-color:var(--form-checkbox-radio-default-background-selected);border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-checkbox][type=checkbox]:checked:disabled,input[tedi-checkbox][type=checkbox]:indeterminate:disabled{cursor:not-allowed;background-color:var(--form-checkbox-radio-default-background-selected-disabled);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-checkbox][type=checkbox]:checked:before,input[tedi-checkbox][type=checkbox]:indeterminate:before{position:absolute;top:50%;left:50%;font-family:Material Symbols Outlined,sans-serif;font-size:var(--_checkbox-icon-size);line-height:1;color:var(--form-checkbox-radio-default-check-indicator-default);content:\"check\";transform:translate(-50%,-50%);-webkit-font-smoothing:antialiased}input[tedi-checkbox][type=checkbox]:checked:before{content:\"check\"}input[tedi-checkbox][type=checkbox]:indeterminate:before{content:\"remove\"}input[tedi-checkbox][type=checkbox]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled):user-invalid,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).ng-invalid.ng-touched{background-color:var(--form-checkbox-radio-default-background-error);border-color:var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid:hover,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled):user-invalid:hover,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).ng-invalid.ng-touched:hover{border-color:var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox].tedi-checkbox--large{--_checkbox-icon-size: 1.125rem;width:var(--form-checkbox-radio-size-large);height:var(--form-checkbox-radio-size-large)}label:has(input[tedi-checkbox]:not(:disabled)){cursor:pointer}label:has(input[tedi-checkbox]:disabled){cursor:not-allowed}label:has(input[tedi-checkbox])+tedi-feedback-text{padding-left:var(--form-checkbox-radio-size-responsive);margin-left:var(--form-checkbox-radio-inner-spacing)}\n"] }]
|
|
2186
2385
|
}] });
|
|
2187
2386
|
|
|
2188
2387
|
class CheckboxCardComponent {
|
|
@@ -2198,7 +2397,7 @@ class CheckboxCardComponent {
|
|
|
2198
2397
|
*/
|
|
2199
2398
|
showIndicator = input(true);
|
|
2200
2399
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CheckboxCardComponent, isStandalone: true, selector: "label[tedi-checkbox-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-checkbox-card--primary": "variant() === 'primary'", "class.tedi-checkbox-card--secondary": "variant() === 'secondary'", "class.tedi-checkbox-card--hide-indicator": "!showIndicator()" }, classAttribute: "tedi-checkbox-card" }, ngImport: i0, template: "<div class=\"tedi-checkbox-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-checkbox-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-checkbox-card] [tedi-text],label[tedi-checkbox-card] tedi-icon{color:inherit}label[tedi-checkbox-card] input[tedi-checkbox],label[tedi-checkbox-card] tedi-icon{flex-shrink:0}label[tedi-checkbox-card] .tedi-checkbox-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-checkbox-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator input[tedi-checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-checkbox-card] input[tedi-checkbox]:not(:disabled):hover{box-shadow:none}label[tedi-checkbox-card]:has(input:focus-visible){outline:
|
|
2400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CheckboxCardComponent, isStandalone: true, selector: "label[tedi-checkbox-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-checkbox-card--primary": "variant() === 'primary'", "class.tedi-checkbox-card--secondary": "variant() === 'secondary'", "class.tedi-checkbox-card--hide-indicator": "!showIndicator()" }, classAttribute: "tedi-checkbox-card" }, ngImport: i0, template: "<div class=\"tedi-checkbox-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-checkbox-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-checkbox-card] [tedi-text],label[tedi-checkbox-card] tedi-icon{color:inherit}label[tedi-checkbox-card] input[tedi-checkbox],label[tedi-checkbox-card] tedi-icon{flex-shrink:0}label[tedi-checkbox-card] .tedi-checkbox-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-checkbox-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator input[tedi-checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-checkbox-card] input[tedi-checkbox]:not(:disabled):hover{box-shadow:none}label[tedi-checkbox-card]:has(input:focus-visible){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}label[tedi-checkbox-card]:has(input:focus-visible) input[tedi-checkbox]:focus-visible{outline:none}label[tedi-checkbox-card]:has(input:disabled){cursor:not-allowed}label[tedi-checkbox-card].tedi-checkbox-card--primary{--_card-bg: var(--form-checkbox-radio-card-primary-default-background);--_card-text: var(--form-checkbox-radio-card-primary-default-text);--_card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-primary-selected-background);--_card-text: var(--form-checkbox-radio-card-primary-selected-text);--_card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:checked) input[tedi-checkbox]:not(:disabled){background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-primary-hover-background);--_card-text: var(--form-checkbox-radio-card-primary-hover-text);--_card-border: var(--form-checkbox-radio-card-primary-hover-border)}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-default-background )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-selected-background )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:disabled:checked) input[tedi-checkbox]{background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-checkbox-card].tedi-checkbox-card--secondary{--_card-bg: var(--form-checkbox-radio-card-secondary-default-background);--_card-text: var(--form-checkbox-radio-card-secondary-default-text);--_card-border: var(--form-checkbox-radio-card-secondary-default-border)}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-secondary-selected-background);--_card-text: var(--form-checkbox-radio-card-secondary-selected-text);--_card-border: var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background);--_card-text: var(--form-checkbox-radio-card-secondary-hover-text);--_card-border: var(--form-checkbox-radio-card-secondary-hover-border)}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-default-border )}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-selected-border );box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2202
2401
|
}
|
|
2203
2402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
2204
2403
|
type: Component,
|
|
@@ -2207,27 +2406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2207
2406
|
"[class.tedi-checkbox-card--primary]": "variant() === 'primary'",
|
|
2208
2407
|
"[class.tedi-checkbox-card--secondary]": "variant() === 'secondary'",
|
|
2209
2408
|
"[class.tedi-checkbox-card--hide-indicator]": "!showIndicator()",
|
|
2210
|
-
}, template: "<div class=\"tedi-checkbox-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-checkbox-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-checkbox-card] [tedi-text],label[tedi-checkbox-card] tedi-icon{color:inherit}label[tedi-checkbox-card] input[tedi-checkbox],label[tedi-checkbox-card] tedi-icon{flex-shrink:0}label[tedi-checkbox-card] .tedi-checkbox-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-checkbox-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator input[tedi-checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-checkbox-card] input[tedi-checkbox]:not(:disabled):hover{box-shadow:none}label[tedi-checkbox-card]:has(input:focus-visible){outline:
|
|
2211
|
-
}] });
|
|
2212
|
-
|
|
2213
|
-
class CheckboxGroupComponent {
|
|
2214
|
-
/**
|
|
2215
|
-
* Label text displayed above the checkbox group.
|
|
2216
|
-
*/
|
|
2217
|
-
label = input();
|
|
2218
|
-
/**
|
|
2219
|
-
* Layout direction of the checkboxes.
|
|
2220
|
-
* @default horizontal
|
|
2221
|
-
*/
|
|
2222
|
-
direction = input("horizontal");
|
|
2223
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CheckboxGroupComponent, isStandalone: true, selector: "tedi-checkbox-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-checkbox-group" }, ngImport: i0, template: "@if (label()) {\n <p class=\"tedi-checkbox-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-checkbox-group__checks\" [class.tedi-checkbox-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-checkbox-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-checkbox-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-checkbox-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-checkbox-group__checks--vertical{flex-direction:column}.tedi-checkbox-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-checkbox-group__subtexts:empty{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2225
|
-
}
|
|
2226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
2227
|
-
type: Component,
|
|
2228
|
-
args: [{ standalone: true, imports: [TextComponent], selector: "tedi-checkbox-group", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2229
|
-
class: "tedi-checkbox-group",
|
|
2230
|
-
}, template: "@if (label()) {\n <p class=\"tedi-checkbox-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-checkbox-group__checks\" [class.tedi-checkbox-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-checkbox-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-checkbox-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-checkbox-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-checkbox-group__checks--vertical{flex-direction:column}.tedi-checkbox-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-checkbox-group__subtexts:empty{display:none}\n"] }]
|
|
2409
|
+
}, template: "<div class=\"tedi-checkbox-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-checkbox-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-checkbox-card] [tedi-text],label[tedi-checkbox-card] tedi-icon{color:inherit}label[tedi-checkbox-card] input[tedi-checkbox],label[tedi-checkbox-card] tedi-icon{flex-shrink:0}label[tedi-checkbox-card] .tedi-checkbox-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-checkbox-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator input[tedi-checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-checkbox-card].tedi-checkbox-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-checkbox-card] input[tedi-checkbox]:not(:disabled):hover{box-shadow:none}label[tedi-checkbox-card]:has(input:focus-visible){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}label[tedi-checkbox-card]:has(input:focus-visible) input[tedi-checkbox]:focus-visible{outline:none}label[tedi-checkbox-card]:has(input:disabled){cursor:not-allowed}label[tedi-checkbox-card].tedi-checkbox-card--primary{--_card-bg: var(--form-checkbox-radio-card-primary-default-background);--_card-text: var(--form-checkbox-radio-card-primary-default-text);--_card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-primary-selected-background);--_card-text: var(--form-checkbox-radio-card-primary-selected-text);--_card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:checked) input[tedi-checkbox]:not(:disabled){background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-primary-hover-background);--_card-text: var(--form-checkbox-radio-card-primary-hover-text);--_card-border: var(--form-checkbox-radio-card-primary-hover-border)}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-default-background )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-selected-background )}label[tedi-checkbox-card].tedi-checkbox-card--primary:has(input:disabled:checked) input[tedi-checkbox]{background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-checkbox-card].tedi-checkbox-card--secondary{--_card-bg: var(--form-checkbox-radio-card-secondary-default-background);--_card-text: var(--form-checkbox-radio-card-secondary-default-text);--_card-border: var(--form-checkbox-radio-card-secondary-default-border)}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-secondary-selected-background);--_card-text: var(--form-checkbox-radio-card-secondary-selected-text);--_card-border: var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background);--_card-text: var(--form-checkbox-radio-card-secondary-hover-text);--_card-border: var(--form-checkbox-radio-card-secondary-hover-border)}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-default-border )}label[tedi-checkbox-card].tedi-checkbox-card--secondary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-selected-border );box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}\n"] }]
|
|
2231
2410
|
}] });
|
|
2232
2411
|
|
|
2233
2412
|
class CheckboxCardGroupComponent {
|
|
@@ -2241,6 +2420,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2241
2420
|
}, styles: [".tedi-checkbox-card-group{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-card-gutter)}\n"] }]
|
|
2242
2421
|
}] });
|
|
2243
2422
|
|
|
2423
|
+
let nextGroupId = 0;
|
|
2424
|
+
class RadioGroupComponent {
|
|
2425
|
+
/**
|
|
2426
|
+
* Label text displayed above the radio group.
|
|
2427
|
+
*/
|
|
2428
|
+
label = input();
|
|
2429
|
+
/**
|
|
2430
|
+
* Layout direction of the radios.
|
|
2431
|
+
* @default horizontal
|
|
2432
|
+
*/
|
|
2433
|
+
direction = input("horizontal");
|
|
2434
|
+
/**
|
|
2435
|
+
* Selected value. Bind with `[(value)]` or use a FormControl on the group.
|
|
2436
|
+
* When set, the group enters managed mode and coordinates `checked` on every
|
|
2437
|
+
* registered child.
|
|
2438
|
+
* @default null
|
|
2439
|
+
*/
|
|
2440
|
+
value = model(null);
|
|
2441
|
+
/**
|
|
2442
|
+
* Shared `name` attribute applied to child radios. Auto-generated when
|
|
2443
|
+
* omitted. Pass an explicit `name` to avoid SSR hydration mismatches.
|
|
2444
|
+
*/
|
|
2445
|
+
name = input();
|
|
2446
|
+
/**
|
|
2447
|
+
* Disables the entire group. Propagates to all children.
|
|
2448
|
+
* @default false
|
|
2449
|
+
*/
|
|
2450
|
+
disabled = input(false);
|
|
2451
|
+
/**
|
|
2452
|
+
* Accessible name for the group. Use when no visible `label` is rendered.
|
|
2453
|
+
* Ignored when `label` or `ariaLabelledby` is provided.
|
|
2454
|
+
*/
|
|
2455
|
+
ariaLabel = input();
|
|
2456
|
+
/**
|
|
2457
|
+
* ID of an external element that labels the group. Ignored when `label` is
|
|
2458
|
+
* provided.
|
|
2459
|
+
*/
|
|
2460
|
+
ariaLabelledby = input();
|
|
2461
|
+
renderer = inject(Renderer2);
|
|
2462
|
+
autoName = `tedi-radio-group-${++nextGroupId}`;
|
|
2463
|
+
labelId = `${this.autoName}-label`;
|
|
2464
|
+
children = signal([]);
|
|
2465
|
+
cvaDisabled = signal(false);
|
|
2466
|
+
managed = signal(false);
|
|
2467
|
+
onChange = () => { };
|
|
2468
|
+
onTouched = () => { };
|
|
2469
|
+
isManaged = this.managed.asReadonly();
|
|
2470
|
+
isDisabled = computed(() => this.disabled() || this.cvaDisabled());
|
|
2471
|
+
managedAriaLabelledby = computed(() => {
|
|
2472
|
+
if (!this.isManaged())
|
|
2473
|
+
return null;
|
|
2474
|
+
if (this.label())
|
|
2475
|
+
return this.labelId;
|
|
2476
|
+
return this.ariaLabelledby() ?? null;
|
|
2477
|
+
});
|
|
2478
|
+
managedAriaLabel = computed(() => {
|
|
2479
|
+
if (!this.isManaged())
|
|
2480
|
+
return null;
|
|
2481
|
+
if (this.label() || this.ariaLabelledby())
|
|
2482
|
+
return null;
|
|
2483
|
+
return this.ariaLabel() ?? null;
|
|
2484
|
+
});
|
|
2485
|
+
constructor() {
|
|
2486
|
+
effect(() => {
|
|
2487
|
+
if (this.value() !== null) {
|
|
2488
|
+
this.managed.set(true);
|
|
2489
|
+
}
|
|
2490
|
+
this.syncChildrenChecked();
|
|
2491
|
+
});
|
|
2492
|
+
effect(() => {
|
|
2493
|
+
if (!this.isManaged())
|
|
2494
|
+
return;
|
|
2495
|
+
const groupName = this.name() ?? this.autoName;
|
|
2496
|
+
for (const child of this.children()) {
|
|
2497
|
+
this.renderer.setAttribute(child.hostElement, "name", groupName);
|
|
2498
|
+
}
|
|
2499
|
+
});
|
|
2500
|
+
}
|
|
2501
|
+
writeValue(value) {
|
|
2502
|
+
this.value.set(value);
|
|
2503
|
+
this.managed.set(true);
|
|
2504
|
+
}
|
|
2505
|
+
registerOnChange(fn) {
|
|
2506
|
+
this.onChange = fn;
|
|
2507
|
+
this.managed.set(true);
|
|
2508
|
+
}
|
|
2509
|
+
registerOnTouched(fn) {
|
|
2510
|
+
this.onTouched = fn;
|
|
2511
|
+
}
|
|
2512
|
+
setDisabledState(isDisabled) {
|
|
2513
|
+
this.cvaDisabled.set(isDisabled);
|
|
2514
|
+
this.managed.set(true);
|
|
2515
|
+
}
|
|
2516
|
+
registerChild(child) {
|
|
2517
|
+
this.children.update((list) => [...list, child]);
|
|
2518
|
+
this.applyCheckedTo(child);
|
|
2519
|
+
}
|
|
2520
|
+
unregisterChild(child) {
|
|
2521
|
+
this.children.update((list) => list.filter((c) => c !== child));
|
|
2522
|
+
}
|
|
2523
|
+
onChildChange(value) {
|
|
2524
|
+
if (!this.isManaged())
|
|
2525
|
+
return;
|
|
2526
|
+
if (this.value() === value)
|
|
2527
|
+
return;
|
|
2528
|
+
this.value.set(value);
|
|
2529
|
+
this.onChange(value);
|
|
2530
|
+
this.onTouched();
|
|
2531
|
+
}
|
|
2532
|
+
isSelected(value) {
|
|
2533
|
+
return value !== undefined && this.value() === value;
|
|
2534
|
+
}
|
|
2535
|
+
syncChildrenChecked() {
|
|
2536
|
+
if (!this.isManaged())
|
|
2537
|
+
return;
|
|
2538
|
+
for (const child of this.children()) {
|
|
2539
|
+
this.applyCheckedTo(child);
|
|
2540
|
+
}
|
|
2541
|
+
}
|
|
2542
|
+
applyCheckedTo(child) {
|
|
2543
|
+
if (!this.isManaged())
|
|
2544
|
+
return;
|
|
2545
|
+
const childVal = child.value();
|
|
2546
|
+
if (childVal === undefined)
|
|
2547
|
+
return;
|
|
2548
|
+
const desired = childVal === this.value();
|
|
2549
|
+
const el = child.hostElement;
|
|
2550
|
+
if (el.checked !== desired) {
|
|
2551
|
+
this.renderer.setProperty(el, "checked", desired);
|
|
2552
|
+
}
|
|
2553
|
+
}
|
|
2554
|
+
/** @internal */
|
|
2555
|
+
warnMissingValue() {
|
|
2556
|
+
if (isDevMode()) {
|
|
2557
|
+
console.warn("[tedi-radio-group] A radio inside a managed group is missing a [value] input and will be ignored.");
|
|
2558
|
+
}
|
|
2559
|
+
}
|
|
2560
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RadioGroupComponent, isStandalone: true, selector: "tedi-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.role": "isManaged() ? 'radiogroup' : null", "attr.aria-labelledby": "managedAriaLabelledby()", "attr.aria-label": "managedAriaLabel()", "attr.aria-disabled": "isManaged() && isDisabled() ? 'true' : null" }, classAttribute: "tedi-radio-group" }, providers: [
|
|
2562
|
+
{
|
|
2563
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2564
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
2565
|
+
multi: true,
|
|
2566
|
+
},
|
|
2567
|
+
], ngImport: i0, template: "@if (label()) {\n <p [id]=\"labelId\" class=\"tedi-radio-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-radio-group__checks\" [class.tedi-radio-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-radio-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-radio-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-radio-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-radio-group__checks--vertical{flex-direction:column}.tedi-radio-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-radio-group__subtexts:empty{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2568
|
+
}
|
|
2569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2570
|
+
type: Component,
|
|
2571
|
+
args: [{ standalone: true, imports: [TextComponent], selector: "tedi-radio-group", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2572
|
+
{
|
|
2573
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2574
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
2575
|
+
multi: true,
|
|
2576
|
+
},
|
|
2577
|
+
], host: {
|
|
2578
|
+
class: "tedi-radio-group",
|
|
2579
|
+
"[attr.role]": "isManaged() ? 'radiogroup' : null",
|
|
2580
|
+
"[attr.aria-labelledby]": "managedAriaLabelledby()",
|
|
2581
|
+
"[attr.aria-label]": "managedAriaLabel()",
|
|
2582
|
+
"[attr.aria-disabled]": "isManaged() && isDisabled() ? 'true' : null",
|
|
2583
|
+
}, template: "@if (label()) {\n <p [id]=\"labelId\" class=\"tedi-radio-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-radio-group__checks\" [class.tedi-radio-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-radio-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-radio-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-radio-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-radio-group__checks--vertical{flex-direction:column}.tedi-radio-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-radio-group__subtexts:empty{display:none}\n"] }]
|
|
2584
|
+
}], ctorParameters: () => [] });
|
|
2585
|
+
|
|
2244
2586
|
class RadioComponent {
|
|
2245
2587
|
/**
|
|
2246
2588
|
* Size of the radio.
|
|
@@ -2252,15 +2594,78 @@ class RadioComponent {
|
|
|
2252
2594
|
* @default false
|
|
2253
2595
|
*/
|
|
2254
2596
|
invalid = input(false);
|
|
2597
|
+
/**
|
|
2598
|
+
* Identity of this radio inside a managed `<tedi-radio-group>`. Required
|
|
2599
|
+
* when the parent group is managed (has a FormControl or `[(value)]`
|
|
2600
|
+
* binding). Ignored otherwise.
|
|
2601
|
+
*/
|
|
2602
|
+
value = input();
|
|
2603
|
+
/**
|
|
2604
|
+
* Disables this radio. An enclosing disabled `<tedi-radio-group>` forces
|
|
2605
|
+
* disabled regardless of this input.
|
|
2606
|
+
* @default false
|
|
2607
|
+
*/
|
|
2608
|
+
disabled = input(false, { transform: booleanAttribute });
|
|
2609
|
+
elementRef = inject(ElementRef);
|
|
2610
|
+
group = inject(RadioGroupComponent, { optional: true });
|
|
2611
|
+
warned = false;
|
|
2612
|
+
effectiveDisabled = computed(() => this.disabled() || (this.group?.isDisabled() ?? false));
|
|
2613
|
+
get hostElement() {
|
|
2614
|
+
return this.elementRef.nativeElement;
|
|
2615
|
+
}
|
|
2616
|
+
ngOnInit() {
|
|
2617
|
+
this.group?.registerChild(this);
|
|
2618
|
+
}
|
|
2619
|
+
ngOnDestroy() {
|
|
2620
|
+
this.group?.unregisterChild(this);
|
|
2621
|
+
}
|
|
2622
|
+
handleChange() {
|
|
2623
|
+
if (!this.group || !this.group.isManaged())
|
|
2624
|
+
return;
|
|
2625
|
+
if (this.effectiveDisabled())
|
|
2626
|
+
return;
|
|
2627
|
+
const v = this.value();
|
|
2628
|
+
if (v === undefined) {
|
|
2629
|
+
if (!this.warned) {
|
|
2630
|
+
this.warned = true;
|
|
2631
|
+
this.group.warnMissingValue();
|
|
2632
|
+
}
|
|
2633
|
+
return;
|
|
2634
|
+
}
|
|
2635
|
+
if (this.hostElement.checked) {
|
|
2636
|
+
this.group.onChildChange(v);
|
|
2637
|
+
}
|
|
2638
|
+
}
|
|
2255
2639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: RadioComponent, isStandalone: true, selector: "input[type=radio][tedi-radio]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-radio--large": "size() === 'large'", "class.tedi-radio--invalid": "invalid()" } }, ngImport: i0, template: "", isInline: true, styles: ["input[tedi-radio][type=radio]{--_radio-dot-size: calc(var(--form-checkbox-radio-size-responsive) * .67);position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}input[tedi-radio][type=radio]:before{position:absolute;top:50%;left:50%;width:var(--_radio-dot-size);height:var(--_radio-dot-size);content:\"\";background:transparent;border-radius:var(--form-checkbox-radio-indicator-radius-radio);transform:translate(-50%,-50%);transition:background-color .15s ease}input[tedi-radio][type=radio]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-radio][type=radio]:not(:disabled):active{border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-radio][type=radio]:not(:disabled):active:before{background:var(--form-checkbox-radio-default-background-active)}input[tedi-radio][type=radio]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-radio][type=radio]:checked{border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-radio][type=radio]:checked:before{background:var(--form-checkbox-radio-default-background-selected)}input[tedi-radio][type=radio]:checked:disabled{cursor:not-allowed;border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-radio][type=radio]:checked:disabled:before{background:var(--form-checkbox-radio-default-background-selected-disabled)}input[tedi-radio][type=radio]:focus-visible{outline
|
|
2640
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: RadioComponent, isStandalone: true, selector: "input[type=radio][tedi-radio]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "handleChange()" }, properties: { "class.tedi-radio--large": "size() === 'large'", "class.tedi-radio--invalid": "invalid()", "disabled": "effectiveDisabled()" } }, ngImport: i0, template: "", isInline: true, styles: ["input[tedi-radio][type=radio]{--_radio-dot-size: calc(var(--form-checkbox-radio-size-responsive) * .67);position:relative;width:var(--form-checkbox-radio-size-responsive);min-width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}input[tedi-radio][type=radio]:before{position:absolute;top:50%;left:50%;width:var(--_radio-dot-size);height:var(--_radio-dot-size);content:\"\";background:transparent;border-radius:var(--form-checkbox-radio-indicator-radius-radio);transform:translate(-50%,-50%);transition:background-color .15s ease}input[tedi-radio][type=radio]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-radio][type=radio]:not(:disabled):active{border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-radio][type=radio]:not(:disabled):active:before{background:var(--form-checkbox-radio-default-background-active)}input[tedi-radio][type=radio]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-radio][type=radio]:checked{border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-radio][type=radio]:checked:before{background:var(--form-checkbox-radio-default-background-selected)}input[tedi-radio][type=radio]:checked:disabled{cursor:not-allowed;border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-radio][type=radio]:checked:disabled:before{background:var(--form-checkbox-radio-default-background-selected-disabled)}input[tedi-radio][type=radio]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}input[tedi-radio][type=radio]:not(:checked,:disabled).tedi-radio--invalid,input[tedi-radio][type=radio]:not(:checked,:disabled):user-invalid,input[tedi-radio][type=radio]:not(:checked,:disabled).ng-invalid.ng-touched{background-color:var(--form-checkbox-radio-default-background-error);border-color:var(--form-general-feedback-error-border)}input[tedi-radio][type=radio]:not(:checked,:disabled).tedi-radio--invalid:hover,input[tedi-radio][type=radio]:not(:checked,:disabled):user-invalid:hover,input[tedi-radio][type=radio]:not(:checked,:disabled).ng-invalid.ng-touched:hover{border-color:var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}input[tedi-radio][type=radio].tedi-radio--large{--_radio-dot-size: calc(var(--form-checkbox-radio-size-large) * .67);width:var(--form-checkbox-radio-size-large);height:var(--form-checkbox-radio-size-large)}label:has(input[tedi-radio]:not(:disabled)){cursor:pointer}label:has(input[tedi-radio]:disabled){cursor:not-allowed}label:has(input[tedi-radio])+tedi-feedback-text{padding-left:var(--form-checkbox-radio-size-responsive);margin-left:var(--form-checkbox-radio-inner-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2257
2641
|
}
|
|
2258
2642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2259
2643
|
type: Component,
|
|
2260
2644
|
args: [{ standalone: true, selector: "input[type=radio][tedi-radio]", template: "", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2261
2645
|
"[class.tedi-radio--large]": "size() === 'large'",
|
|
2262
2646
|
"[class.tedi-radio--invalid]": "invalid()",
|
|
2263
|
-
|
|
2647
|
+
"[disabled]": "effectiveDisabled()",
|
|
2648
|
+
"(change)": "handleChange()",
|
|
2649
|
+
}, styles: ["input[tedi-radio][type=radio]{--_radio-dot-size: calc(var(--form-checkbox-radio-size-responsive) * .67);position:relative;width:var(--form-checkbox-radio-size-responsive);min-width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}input[tedi-radio][type=radio]:before{position:absolute;top:50%;left:50%;width:var(--_radio-dot-size);height:var(--_radio-dot-size);content:\"\";background:transparent;border-radius:var(--form-checkbox-radio-indicator-radius-radio);transform:translate(-50%,-50%);transition:background-color .15s ease}input[tedi-radio][type=radio]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-radio][type=radio]:not(:disabled):active{border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-radio][type=radio]:not(:disabled):active:before{background:var(--form-checkbox-radio-default-background-active)}input[tedi-radio][type=radio]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-radio][type=radio]:checked{border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-radio][type=radio]:checked:before{background:var(--form-checkbox-radio-default-background-selected)}input[tedi-radio][type=radio]:checked:disabled{cursor:not-allowed;border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-radio][type=radio]:checked:disabled:before{background:var(--form-checkbox-radio-default-background-selected-disabled)}input[tedi-radio][type=radio]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}input[tedi-radio][type=radio]:not(:checked,:disabled).tedi-radio--invalid,input[tedi-radio][type=radio]:not(:checked,:disabled):user-invalid,input[tedi-radio][type=radio]:not(:checked,:disabled).ng-invalid.ng-touched{background-color:var(--form-checkbox-radio-default-background-error);border-color:var(--form-general-feedback-error-border)}input[tedi-radio][type=radio]:not(:checked,:disabled).tedi-radio--invalid:hover,input[tedi-radio][type=radio]:not(:checked,:disabled):user-invalid:hover,input[tedi-radio][type=radio]:not(:checked,:disabled).ng-invalid.ng-touched:hover{border-color:var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}input[tedi-radio][type=radio].tedi-radio--large{--_radio-dot-size: calc(var(--form-checkbox-radio-size-large) * .67);width:var(--form-checkbox-radio-size-large);height:var(--form-checkbox-radio-size-large)}label:has(input[tedi-radio]:not(:disabled)){cursor:pointer}label:has(input[tedi-radio]:disabled){cursor:not-allowed}label:has(input[tedi-radio])+tedi-feedback-text{padding-left:var(--form-checkbox-radio-size-responsive);margin-left:var(--form-checkbox-radio-inner-spacing)}\n"] }]
|
|
2650
|
+
}] });
|
|
2651
|
+
|
|
2652
|
+
class RadioCardGroupComponent {
|
|
2653
|
+
/**
|
|
2654
|
+
* Renders children in a button-group style layout with shared borders and
|
|
2655
|
+
* no gap. Child `tedi-radio-card` instances automatically inherit this and
|
|
2656
|
+
* do not need their own `grouped` input.
|
|
2657
|
+
* @default false
|
|
2658
|
+
*/
|
|
2659
|
+
grouped = input(false);
|
|
2660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: RadioCardGroupComponent, isStandalone: true, selector: "tedi-radio-card-group", inputs: { grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-radio-card-group--grouped": "grouped()" }, classAttribute: "tedi-radio-card-group" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-radio-card-group{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-card-gutter)}.tedi-radio-card-group--grouped{display:inline-flex;flex-wrap:nowrap;gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2662
|
+
}
|
|
2663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioCardGroupComponent, decorators: [{
|
|
2664
|
+
type: Component,
|
|
2665
|
+
args: [{ standalone: true, selector: "tedi-radio-card-group", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2666
|
+
class: "tedi-radio-card-group",
|
|
2667
|
+
"[class.tedi-radio-card-group--grouped]": "grouped()",
|
|
2668
|
+
}, styles: [".tedi-radio-card-group{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-card-gutter)}.tedi-radio-card-group--grouped{display:inline-flex;flex-wrap:nowrap;gap:0}\n"] }]
|
|
2264
2669
|
}] });
|
|
2265
2670
|
|
|
2266
2671
|
class RadioCardComponent {
|
|
@@ -2270,7 +2675,13 @@ class RadioCardComponent {
|
|
|
2270
2675
|
*/
|
|
2271
2676
|
variant = input("primary");
|
|
2272
2677
|
/**
|
|
2273
|
-
* Whether the card is part of a button-group style layout.
|
|
2678
|
+
* Whether the card is part of a button-group style layout. Prefer setting
|
|
2679
|
+
* `grouped` on the enclosing `tedi-radio-card-group` instead; this input
|
|
2680
|
+
* is retained for standalone cards outside a group.
|
|
2681
|
+
*
|
|
2682
|
+
* The effective state is `grouped || parentGrouped` (see `isGrouped()` and
|
|
2683
|
+
* `RadioCardGroupComponent`): a child cannot opt out when its parent is
|
|
2684
|
+
* grouped.
|
|
2274
2685
|
* @default false
|
|
2275
2686
|
*/
|
|
2276
2687
|
grouped = input(false);
|
|
@@ -2280,8 +2691,12 @@ class RadioCardComponent {
|
|
|
2280
2691
|
* @default true
|
|
2281
2692
|
*/
|
|
2282
2693
|
showIndicator = input(true);
|
|
2694
|
+
cardGroup = inject(RadioCardGroupComponent, {
|
|
2695
|
+
optional: true,
|
|
2696
|
+
});
|
|
2697
|
+
isGrouped = computed(() => this.grouped() || (this.cardGroup?.grouped() ?? false));
|
|
2283
2698
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2284
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: RadioCardComponent, isStandalone: true, selector: "label[tedi-radio-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-radio-card--primary": "variant() === 'primary'", "class.tedi-radio-card--secondary": "variant() === 'secondary'", "class.tedi-radio-card--grouped": "
|
|
2699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: RadioCardComponent, isStandalone: true, selector: "label[tedi-radio-card]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-radio-card--primary": "variant() === 'primary'", "class.tedi-radio-card--secondary": "variant() === 'secondary'", "class.tedi-radio-card--grouped": "isGrouped()", "class.tedi-radio-card--hide-indicator": "!showIndicator()" }, classAttribute: "tedi-radio-card" }, ngImport: i0, template: "<div class=\"tedi-radio-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-radio-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card] [tedi-text],label[tedi-radio-card] tedi-icon{color:inherit}label[tedi-radio-card] input[tedi-radio],label[tedi-radio-card] tedi-icon{flex-shrink:0}label[tedi-radio-card] .tedi-radio-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-radio-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-radio-card].tedi-radio-card--hide-indicator input[tedi-radio]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-radio-card].tedi-radio-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-radio-card] input[tedi-radio]:not(:disabled):hover{box-shadow:none}label[tedi-radio-card]:has(input:focus-visible){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}label[tedi-radio-card]:has(input:focus-visible) input[tedi-radio]:focus-visible{outline:none}label[tedi-radio-card]:has(input:disabled){cursor:not-allowed}label[tedi-radio-card].tedi-radio-card--grouped{border-radius:0}label[tedi-radio-card].tedi-radio-card--grouped:first-child{border-top-left-radius:var(--form-checkbox-radio-card-radius);border-bottom-left-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card].tedi-radio-card--grouped:last-child{border-top-right-radius:var(--form-checkbox-radio-card-radius);border-bottom-right-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card].tedi-radio-card--grouped+label[tedi-radio-card].tedi-radio-card--grouped{margin-left:-1px}label[tedi-radio-card].tedi-radio-card--grouped:has(input:focus-visible){z-index:5}label[tedi-radio-card].tedi-radio-card--grouped:has(input:checked){z-index:1}label[tedi-radio-card].tedi-radio-card--primary{--_card-bg: var(--form-checkbox-radio-card-primary-default-background);--_card-text: var(--form-checkbox-radio-card-primary-default-text);--_card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}label[tedi-radio-card].tedi-radio-card--primary.tedi-radio-card--grouped{--_card-border: var( --form-checkbox-radio-card-primary-default-border-group )}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-primary-selected-background);--_card-text: var(--form-checkbox-radio-card-primary-selected-text);--_card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked).tedi-radio-card--grouped{--_card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked) input[tedi-radio]:not(:disabled){background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked) input[tedi-radio]:not(:disabled):before{background:var(--form-checkbox-radio-default-check-indicator-default)}label[tedi-radio-card].tedi-radio-card--primary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-primary-hover-background);--_card-text: var(--form-checkbox-radio-card-primary-hover-text);--_card-border: var(--form-checkbox-radio-card-primary-hover-border)}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-default-background )}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-selected-background )}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:checked) input[tedi-radio]{background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:checked) input[tedi-radio]:before{background:var(--form-checkbox-radio-default-check-indicator-default)}label[tedi-radio-card].tedi-radio-card--secondary{--_card-bg: var(--form-checkbox-radio-card-secondary-default-background);--_card-text: var(--form-checkbox-radio-card-secondary-default-text);--_card-border: var(--form-checkbox-radio-card-secondary-default-border)}label[tedi-radio-card].tedi-radio-card--secondary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-secondary-selected-background);--_card-text: var(--form-checkbox-radio-card-secondary-selected-text);--_card-border: var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}label[tedi-radio-card].tedi-radio-card--secondary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background);--_card-text: var(--form-checkbox-radio-card-secondary-hover-text);--_card-border: var(--form-checkbox-radio-card-secondary-hover-border)}label[tedi-radio-card].tedi-radio-card--secondary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-default-border )}label[tedi-radio-card].tedi-radio-card--secondary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-selected-border );box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2285
2700
|
}
|
|
2286
2701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioCardComponent, decorators: [{
|
|
2287
2702
|
type: Component,
|
|
@@ -2289,40 +2704,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2289
2704
|
class: "tedi-radio-card",
|
|
2290
2705
|
"[class.tedi-radio-card--primary]": "variant() === 'primary'",
|
|
2291
2706
|
"[class.tedi-radio-card--secondary]": "variant() === 'secondary'",
|
|
2292
|
-
"[class.tedi-radio-card--grouped]": "
|
|
2707
|
+
"[class.tedi-radio-card--grouped]": "isGrouped()",
|
|
2293
2708
|
"[class.tedi-radio-card--hide-indicator]": "!showIndicator()",
|
|
2294
|
-
}, template: "<div class=\"tedi-radio-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-radio-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card] [tedi-text],label[tedi-radio-card] tedi-icon{color:inherit}label[tedi-radio-card] input[tedi-radio],label[tedi-radio-card] tedi-icon{flex-shrink:0}label[tedi-radio-card] .tedi-radio-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-radio-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-radio-card].tedi-radio-card--hide-indicator input[tedi-radio]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-radio-card].tedi-radio-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-radio-card] input[tedi-radio]:not(:disabled):hover{box-shadow:none}label[tedi-radio-card]:has(input:focus-visible){outline:
|
|
2295
|
-
}] });
|
|
2296
|
-
|
|
2297
|
-
class RadioGroupComponent {
|
|
2298
|
-
/**
|
|
2299
|
-
* Label text displayed above the radio group.
|
|
2300
|
-
*/
|
|
2301
|
-
label = input();
|
|
2302
|
-
/**
|
|
2303
|
-
* Layout direction of the radios.
|
|
2304
|
-
* @default horizontal
|
|
2305
|
-
*/
|
|
2306
|
-
direction = input("horizontal");
|
|
2307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RadioGroupComponent, isStandalone: true, selector: "tedi-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-radio-group" }, ngImport: i0, template: "@if (label()) {\n <p class=\"tedi-radio-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-radio-group__checks\" [class.tedi-radio-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-radio-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-radio-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-radio-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-radio-group__checks--vertical{flex-direction:column}.tedi-radio-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-radio-group__subtexts:empty{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2309
|
-
}
|
|
2310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2311
|
-
type: Component,
|
|
2312
|
-
args: [{ standalone: true, imports: [TextComponent], selector: "tedi-radio-group", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2313
|
-
class: "tedi-radio-group",
|
|
2314
|
-
}, template: "@if (label()) {\n <p class=\"tedi-radio-group__label\" tedi-text color=\"secondary\">{{ label() }}</p>\n}\n<div class=\"tedi-radio-group__checks\" [class.tedi-radio-group__checks--vertical]=\"direction() === 'vertical'\">\n <ng-content />\n</div>\n<div class=\"tedi-radio-group__subtexts\">\n <ng-content select=\"tedi-feedback-text\" />\n</div>\n", styles: [".tedi-radio-group{display:flex;flex-direction:column;gap:var(--form-checkbox-radio-label-gutter-y)}.tedi-radio-group__checks{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x)}.tedi-radio-group__checks--vertical{flex-direction:column}.tedi-radio-group__subtexts{padding-top:var(--form-field-inner-spacing-sm)}.tedi-radio-group__subtexts:empty{display:none}\n"] }]
|
|
2315
|
-
}] });
|
|
2316
|
-
|
|
2317
|
-
class RadioCardGroupComponent {
|
|
2318
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RadioCardGroupComponent, isStandalone: true, selector: "tedi-radio-card-group", host: { classAttribute: "tedi-radio-card-group" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-radio-card-group{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-card-gutter)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2320
|
-
}
|
|
2321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioCardGroupComponent, decorators: [{
|
|
2322
|
-
type: Component,
|
|
2323
|
-
args: [{ standalone: true, selector: "tedi-radio-card-group", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2324
|
-
class: "tedi-radio-card-group",
|
|
2325
|
-
}, styles: [".tedi-radio-card-group{display:flex;flex-wrap:wrap;gap:var(--form-checkbox-radio-card-gutter)}\n"] }]
|
|
2709
|
+
}, template: "<div class=\"tedi-radio-card__content\">\n <ng-content />\n</div>\n<ng-content select=\"tedi-feedback-text\" />\n", styles: ["label[tedi-radio-card]{--_card-bg: transparent;--_card-text: inherit;--_card-border: transparent;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--form-field-height);padding:calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--tedi-borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--_card-text);cursor:pointer;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card] [tedi-text],label[tedi-radio-card] tedi-icon{color:inherit}label[tedi-radio-card] input[tedi-radio],label[tedi-radio-card] tedi-icon{flex-shrink:0}label[tedi-radio-card] .tedi-radio-card__content{display:flex;gap:var(--form-checkbox-radio-card-inner-spacing);align-items:center}label[tedi-radio-card]>.tedi-feedback-text{padding-left:calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));color:inherit}label[tedi-radio-card].tedi-radio-card--hide-indicator input[tedi-radio]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}label[tedi-radio-card].tedi-radio-card--hide-indicator>.tedi-feedback-text{padding-left:0}label[tedi-radio-card] input[tedi-radio]:not(:disabled):hover{box-shadow:none}label[tedi-radio-card]:has(input:focus-visible){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}label[tedi-radio-card]:has(input:focus-visible) input[tedi-radio]:focus-visible{outline:none}label[tedi-radio-card]:has(input:disabled){cursor:not-allowed}label[tedi-radio-card].tedi-radio-card--grouped{border-radius:0}label[tedi-radio-card].tedi-radio-card--grouped:first-child{border-top-left-radius:var(--form-checkbox-radio-card-radius);border-bottom-left-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card].tedi-radio-card--grouped:last-child{border-top-right-radius:var(--form-checkbox-radio-card-radius);border-bottom-right-radius:var(--form-checkbox-radio-card-radius)}label[tedi-radio-card].tedi-radio-card--grouped+label[tedi-radio-card].tedi-radio-card--grouped{margin-left:-1px}label[tedi-radio-card].tedi-radio-card--grouped:has(input:focus-visible){z-index:5}label[tedi-radio-card].tedi-radio-card--grouped:has(input:checked){z-index:1}label[tedi-radio-card].tedi-radio-card--primary{--_card-bg: var(--form-checkbox-radio-card-primary-default-background);--_card-text: var(--form-checkbox-radio-card-primary-default-text);--_card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}label[tedi-radio-card].tedi-radio-card--primary.tedi-radio-card--grouped{--_card-border: var( --form-checkbox-radio-card-primary-default-border-group )}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-primary-selected-background);--_card-text: var(--form-checkbox-radio-card-primary-selected-text);--_card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked).tedi-radio-card--grouped{--_card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked) input[tedi-radio]:not(:disabled){background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-radio-card].tedi-radio-card--primary:has(input:checked) input[tedi-radio]:not(:disabled):before{background:var(--form-checkbox-radio-default-check-indicator-default)}label[tedi-radio-card].tedi-radio-card--primary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-primary-hover-background);--_card-text: var(--form-checkbox-radio-card-primary-hover-text);--_card-border: var(--form-checkbox-radio-card-primary-hover-border)}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-default-background )}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-primary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-primary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-primary-disabled-selected-background )}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:checked) input[tedi-radio]{background-color:transparent;border-color:var(--form-checkbox-radio-default-border-selected-inverted)}label[tedi-radio-card].tedi-radio-card--primary:has(input:disabled:checked) input[tedi-radio]:before{background:var(--form-checkbox-radio-default-check-indicator-default)}label[tedi-radio-card].tedi-radio-card--secondary{--_card-bg: var(--form-checkbox-radio-card-secondary-default-background);--_card-text: var(--form-checkbox-radio-card-secondary-default-text);--_card-border: var(--form-checkbox-radio-card-secondary-default-border)}label[tedi-radio-card].tedi-radio-card--secondary:has(input:checked){--_card-bg: var(--form-checkbox-radio-card-secondary-selected-background);--_card-text: var(--form-checkbox-radio-card-secondary-selected-text);--_card-border: var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}label[tedi-radio-card].tedi-radio-card--secondary:has(input:hover:not(:disabled)){--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background);--_card-text: var(--form-checkbox-radio-card-secondary-hover-text);--_card-border: var(--form-checkbox-radio-card-secondary-hover-border)}label[tedi-radio-card].tedi-radio-card--secondary:has(input:disabled:not(:checked)){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-default-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-default-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-default-border )}label[tedi-radio-card].tedi-radio-card--secondary:has(input:disabled:checked){--_card-bg: var( --form-checkbox-radio-card-secondary-disabled-selected-background );--_card-text: var( --form-checkbox-radio-card-secondary-disabled-selected-text );--_card-border: var( --form-checkbox-radio-card-secondary-disabled-selected-border );box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_card-border)}\n"] }]
|
|
2326
2710
|
}] });
|
|
2327
2711
|
|
|
2328
2712
|
class SeparatorComponent {
|
|
@@ -2858,7 +3242,7 @@ class DropdownItemValueComponent {
|
|
|
2858
3242
|
*/
|
|
2859
3243
|
disabled = input(false);
|
|
2860
3244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownItemValueComponent, isStandalone: true, selector: "tedi-dropdown-item-value", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-dropdown-item-value--vertical": "layout() === 'vertical'", "class.tedi-dropdown-item-value--horizontal": "layout() === 'horizontal'", "class.tedi-dropdown-item-value--checkbox": "type() === 'checkbox'", "class.tedi-dropdown-item-value--radio": "type() === 'radio'" }, classAttribute: "tedi-dropdown-item-value" }, ngImport: i0, template: "@if (type() === 'checkbox') {\n <input\n type=\"checkbox\"\n tedi-checkbox\n class=\"tedi-dropdown-item-value__checkbox\"\n [checked]=\"selected()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (click)=\"$event.stopPropagation()\"\n />\n} @else if (type() === 'radio') {\n <input\n type=\"radio\"\n class=\"tedi-dropdown-item-value__radio\"\n [checked]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"$event.stopPropagation()\"\n />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n <ng-content select=\"tedi-dropdown-item-value-label\" />\n <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownItemValueComponent, isStandalone: true, selector: "tedi-dropdown-item-value", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-dropdown-item-value--vertical": "layout() === 'vertical'", "class.tedi-dropdown-item-value--horizontal": "layout() === 'horizontal'", "class.tedi-dropdown-item-value--checkbox": "type() === 'checkbox'", "class.tedi-dropdown-item-value--radio": "type() === 'radio'" }, classAttribute: "tedi-dropdown-item-value" }, ngImport: i0, template: "@if (type() === 'checkbox') {\n <input\n type=\"checkbox\"\n tedi-checkbox\n class=\"tedi-dropdown-item-value__checkbox\"\n [checked]=\"selected()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (click)=\"$event.stopPropagation()\"\n />\n} @else if (type() === 'radio') {\n <input\n type=\"radio\"\n class=\"tedi-dropdown-item-value__radio\"\n [checked]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"$event.stopPropagation()\"\n />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n <ng-content select=\"tedi-dropdown-item-value-label\" />\n <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2862
3246
|
}
|
|
2863
3247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueComponent, decorators: [{
|
|
2864
3248
|
type: Component,
|
|
@@ -6478,7 +6862,7 @@ class FooterSectionComponent {
|
|
|
6478
6862
|
}
|
|
6479
6863
|
}
|
|
6480
6864
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FooterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FooterSectionComponent, isStandalone: true, selector: "tedi-footer-section", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "collapse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-footer-section--collapse": "applyCollapse()" }, classAttribute: "tedi-footer-section" }, ngImport: i0, template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background
|
|
6865
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FooterSectionComponent, isStandalone: true, selector: "tedi-footer-section", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "collapse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-footer-section--collapse": "applyCollapse()" }, classAttribute: "tedi-footer-section" }, ngImport: i0, template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:transparent;border:none}.tedi-footer-section__button:disabled{cursor:default}.tedi-footer-section__button{font-weight:700;color:var(--general-text-white)}.tedi-footer-section__button:focus-visible{color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}\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"] }], animations: [
|
|
6482
6866
|
trigger("collapseContent", [
|
|
6483
6867
|
state("collapsed", style({
|
|
6484
6868
|
height: "0",
|
|
@@ -6513,7 +6897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6513
6897
|
})),
|
|
6514
6898
|
transition("collapsed <=> expanded", [animate("300ms ease")]),
|
|
6515
6899
|
]),
|
|
6516
|
-
], template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background
|
|
6900
|
+
], template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:transparent;border:none}.tedi-footer-section__button:disabled{cursor:default}.tedi-footer-section__button{font-weight:700;color:var(--general-text-white)}.tedi-footer-section__button:focus-visible{color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}\n"] }]
|
|
6517
6901
|
}] });
|
|
6518
6902
|
|
|
6519
6903
|
class FooterSideComponent {
|