@ids-group-ltd/ids-design-system 0.2.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ids-group-ltd-ids-design-system.mjs +795 -372
- package/fesm2022/ids-group-ltd-ids-design-system.mjs.map +1 -1
- package/package.json +4 -3
- package/schematics/collection.json +10 -0
- package/schematics/ng-add/index.js +47 -0
- package/schematics/ng-add/schema.json +13 -0
- package/styles/_dropdown-overlay.scss +3 -3
- package/styles/_fonts.scss +11 -5
- package/styles/_layout-utils.scss +2 -2
- package/styles/_link.scss +3 -2
- package/styles/_page-grid.scss +6 -3
- package/styles/_reset.scss +6 -1
- package/styles/_scrollbar.scss +1 -1
- package/styles/_tokens-charts.scss +18 -18
- package/styles/_tokens.scss +21 -9
- package/styles/_typography.scss +21 -21
- package/themes/README.md +12 -11
- package/themes/default/_palette.scss +32 -32
- package/themes/default/_theme.scss +28 -25
- package/types/ids-group-ltd-ids-design-system.d.ts +53 -9
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, input, computed, ViewEncapsulation, Component, booleanAttribute, output, viewChild, model, ElementRef, contentChildren,
|
|
2
|
+
import { InjectionToken, inject, input, computed, ViewEncapsulation, Component, booleanAttribute, output, viewChild, model, ElementRef, contentChildren, signal, effect, Directive, forwardRef, ChangeDetectionStrategy, ViewContainerRef, TemplateRef, Injectable, DestroyRef, HostBinding, HostListener, DOCUMENT as DOCUMENT$1 } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
|
-
import { FormsModule } from '@angular/forms';
|
|
6
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import { Overlay } from '@angular/cdk/overlay';
|
|
8
8
|
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
9
9
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
@@ -163,20 +163,21 @@ class IconComponent {
|
|
|
163
163
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "ds-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
164
164
|
<svg
|
|
165
165
|
class="icon"
|
|
166
|
-
[style.--ds-icon-size]="size() + 'px'"
|
|
167
|
-
[attr.width]="size()"
|
|
168
|
-
[attr.height]="size()"
|
|
169
166
|
viewBox="0 0 24 24"
|
|
170
167
|
fill="none"
|
|
171
168
|
stroke="currentColor"
|
|
172
|
-
[attr.stroke-width]="stroke()"
|
|
173
169
|
stroke-linecap="round"
|
|
174
170
|
stroke-linejoin="round"
|
|
171
|
+
[style.--ds-icon-size]="size() + 'px'"
|
|
172
|
+
[attr.width]="size()"
|
|
173
|
+
[attr.height]="size()"
|
|
174
|
+
[attr.stroke-width]="stroke()"
|
|
175
175
|
[attr.role]="ariaLabel() ? 'img' : null"
|
|
176
176
|
[attr.aria-label]="ariaLabel()"
|
|
177
177
|
[attr.aria-hidden]="ariaLabel() ? null : 'true'"
|
|
178
178
|
[innerHTML]="paths()"
|
|
179
|
-
|
|
179
|
+
>
|
|
180
|
+
</svg>
|
|
180
181
|
`, isInline: true, styles: ["ds-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}ds-icon>svg.icon{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
181
182
|
}
|
|
182
183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, decorators: [{
|
|
@@ -184,20 +185,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
184
185
|
args: [{ selector: 'ds-icon', standalone: true, encapsulation: ViewEncapsulation.None, template: `
|
|
185
186
|
<svg
|
|
186
187
|
class="icon"
|
|
187
|
-
[style.--ds-icon-size]="size() + 'px'"
|
|
188
|
-
[attr.width]="size()"
|
|
189
|
-
[attr.height]="size()"
|
|
190
188
|
viewBox="0 0 24 24"
|
|
191
189
|
fill="none"
|
|
192
190
|
stroke="currentColor"
|
|
193
|
-
[attr.stroke-width]="stroke()"
|
|
194
191
|
stroke-linecap="round"
|
|
195
192
|
stroke-linejoin="round"
|
|
193
|
+
[style.--ds-icon-size]="size() + 'px'"
|
|
194
|
+
[attr.width]="size()"
|
|
195
|
+
[attr.height]="size()"
|
|
196
|
+
[attr.stroke-width]="stroke()"
|
|
196
197
|
[attr.role]="ariaLabel() ? 'img' : null"
|
|
197
198
|
[attr.aria-label]="ariaLabel()"
|
|
198
199
|
[attr.aria-hidden]="ariaLabel() ? null : 'true'"
|
|
199
200
|
[innerHTML]="paths()"
|
|
200
|
-
|
|
201
|
+
>
|
|
202
|
+
</svg>
|
|
201
203
|
`, styles: ["ds-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}ds-icon>svg.icon{display:block}\n"] }]
|
|
202
204
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
203
205
|
|
|
@@ -234,11 +236,11 @@ class ButtonComponent {
|
|
|
234
236
|
this.pressed.emit(event);
|
|
235
237
|
}
|
|
236
238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
237
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "ds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { properties: { "class.full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"button-main\">\n @if (icon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n\n <ng-content></ng-content>\n\n @if (trailingIcon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n </span>\n\n <span class=\"subtext-slot\">\n <ng-content select=\"[dsButtonSubtext]\"></ng-content>\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:fit-content}:host(.full-width){display:block;width:100%}.button{--_button-bg: var(--ds-button-bg, var(--primary));--_button-bg-hover: var(--ds-button-bg-hover, color-mix(in srgb, var(--_button-bg) 88%, black));--_button-bg-active: var(--ds-button-bg-active, color-mix(in srgb, var(--_button-bg) 76%, black));--_button-
|
|
239
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "ds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { properties: { "class.full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"button-main\">\n @if (icon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n\n <ng-content></ng-content>\n\n @if (trailingIcon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n </span>\n\n <span class=\"subtext-slot\">\n <ng-content select=\"[dsButtonSubtext]\"></ng-content>\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:fit-content}:host(.full-width){display:block;width:100%}.button{--_button-bg-color: var(--ds-button-bg-color, var(--primary));--_button-bg-color-hover: var(--ds-button-bg-color-hover, color-mix(in srgb, var(--_button-bg-color) 88%, black));--_button-bg-color-active: var(--ds-button-bg-color-active, color-mix(in srgb, var(--_button-bg-color) 76%, black));--_button-label-color: var(--ds-button-label-color, var(--primary-on));--_button-border: var(--ds-button-border, transparent);--_button-focus-shadow: var(--ds-button-focus-shadow, var(--ds-control-focus-shadow));--_button-pressed-shadow: var(--ds-button-pressed-shadow, 0 0 0 3px color-mix(in srgb, var(--_button-bg-color-active) 35%, transparent));--_button-radius: var(--ds-button-radius, var(--radius-md));--_button-bg-color-disabled: var(--ds-button-bg-color-disabled, var(--surface-disabled));--_button-label-color-disabled: var(--ds-button-label-color-disabled, var(--text-disabled));display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--font-weight-extrabold) var(--font-size-m)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);color:var(--_button-label-color);background-color:var(--_button-bg-color);border:var(--border-width-default) solid var(--_button-border);border-radius:var(--_button-radius);padding:0 var(--space-5);height:var(--hit-cozy);width:100%;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.button:hover{background-color:var(--_button-bg-color-hover)}.button:active{background-color:var(--_button-bg-color-active);box-shadow:var(--_button-pressed-shadow)}.button:focus-visible{outline:none;box-shadow:var(--_button-focus-shadow);z-index:var(--btn-focus-z)}.button[disabled]{background-color:var(--_button-bg-color-disabled);color:var(--_button-label-color-disabled);border-color:transparent;cursor:not-allowed;pointer-events:none}.button .icon{width:var(--icon-md);height:var(--icon-md);flex-shrink:0}.button .button-main{display:contents}.button .subtext-slot:empty{display:none}.button .subtext-slot{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-tight) var(--font-sans);letter-spacing:normal;text-align:center}.button:has(.subtext-slot:not(:empty)){flex-direction:column;gap:var(--space-1);height:auto;min-height:var(--hit-cozy);padding-block:var(--space-2);white-space:normal}.button:has(.subtext-slot:not(:empty)) .button-main{display:inline-flex;align-items:center;gap:var(--space-2)}.button:has(.subtext-slot:not(:empty)).l,.button:has(.subtext-slot:not(:empty)).lg{height:auto;min-height:var(--field-h-lg)}.button.l{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.m{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.m .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.s{font-size:var(--font-size-xs);height:var(--hit-xs);padding:0 var(--space-3)}.button.s .icon{width:var(--icon-xs);height:var(--icon-xs)}.button.lg{font-size:var(--font-size-m);height:var(--field-h-lg);padding:0 var(--space-5)}.button.md{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.sm{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.sm .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.secondary{--_button-bg-color: var(--ds-button-bg-color, var(--primary-muted));--_button-label-color: var(--ds-button-label-color, var(--primary-strong));--_button-bg-color-hover: var(--ds-button-bg-color-hover, var(--primary-muted-strong));--_button-bg-color-active: var(--ds-button-bg-color-active, var(--primary-muted-strong))}.button.tertiary{--_button-bg-color: var(--ds-button-bg-color, transparent);--_button-label-color: var(--ds-button-label-color, var(--primary-strong));--_button-bg-color-hover: var(--ds-button-bg-color-hover, var(--primary-subtitle));--_button-bg-color-active: var(--ds-button-bg-color-active, var(--primary-muted))}.button.outline{--_button-bg-color: var(--ds-button-bg-color, var(--surface-default));--_button-label-color: var(--ds-button-label-color, var(--text-primary));--_button-border: var(--ds-button-border, var(--border-default));--_button-bg-color-hover: var(--ds-button-bg-color-hover, var(--surface-secondary));--_button-bg-color-active: var(--ds-button-bg-color-active, var(--surface-secondary))}.button.error{--_button-bg-color: var(--ds-button-bg-color, var(--error));--_button-focus-shadow: var(--ds-button-focus-shadow, var(--ds-control-focus-shadow-error))}.button.success{--_button-bg-color: var(--ds-button-bg-color, var(--success));--_button-label-color: var(--ds-button-label-color, var(--text-on-success))}.button.warning{--_button-bg-color: var(--ds-button-bg-color, var(--warning));--_button-label-color: var(--ds-button-label-color, var(--text-on-warning))}.button.text{--_button-bg-color: var(--ds-button-bg-color, transparent);--_button-label-color: var(--ds-button-label-color, var(--text-link));--_button-bg-color-hover: var(--ds-button-bg-color-hover, transparent);--_button-bg-color-active: var(--ds-button-bg-color-active, transparent);padding:0;height:auto;width:auto;text-decoration:underline;text-underline-offset:var(--btn-link-uloff)}.button.text:hover{color:var(--primary-pressed)}.button.loading{color:transparent!important;pointer-events:none;background-color:var(--_button-bg-color);border-color:var(--_button-border)}.button.loading:after{content:\"\";position:absolute;width:var(--spinner-md);height:var(--spinner-md);border:var(--border-width-strong) solid var(--_button-label-color);border-right-color:transparent;border-radius:var(--radius-pill);animation:spin var(--duration-loop-fast) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.button-group{display:inline-flex}.button-group .button{border-radius:var(--radius-flat)}.button-group .button:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.button-group .button:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.button-group .button+.button{margin-left:var(--btn-group-overlap)}.button-group .button:focus-visible{z-index:var(--btn-group-focus-z)}.button-split{display:inline-flex}.button-split>.button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:var(--space-4)}.button-split>.button:last-child{border-top-left-radius:var(--radius-flat);border-bottom-left-radius:var(--radius-flat);border-left:var(--border-width-default) solid var(--btn-split-divider);padding:0 var(--space-3);width:auto}.button-toggle{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--hit-min);padding:0 var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-secondary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer}.button-toggle:hover{background:var(--surface-secondary);color:var(--text-primary)}.button-toggle[aria-pressed=true]{background:var(--primary-subtitle);border-color:var(--primary);color:var(--primary-strong)}.button-toggle:focus-visible{outline:none;box-shadow:var(--_button-focus-shadow)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
238
240
|
}
|
|
239
241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
240
242
|
type: Component,
|
|
241
|
-
args: [{ selector: 'ds-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { '[class.full-width]': 'fullWidth()' }, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"button-main\">\n @if (icon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n\n <ng-content></ng-content>\n\n @if (trailingIcon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n </span>\n\n <span class=\"subtext-slot\">\n <ng-content select=\"[dsButtonSubtext]\"></ng-content>\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:fit-content}:host(.full-width){display:block;width:100%}.button{--_button-bg: var(--ds-button-bg, var(--primary));--_button-bg-hover: var(--ds-button-bg-hover, color-mix(in srgb, var(--_button-bg) 88%, black));--_button-bg-active: var(--ds-button-bg-active, color-mix(in srgb, var(--_button-bg) 76%, black));--_button-
|
|
243
|
+
args: [{ selector: 'ds-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { '[class.full-width]': 'fullWidth()' }, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"button-main\">\n @if (icon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n\n <ng-content></ng-content>\n\n @if (trailingIcon(); as name) {\n <ds-icon [name]=\"name\" />\n }\n </span>\n\n <span class=\"subtext-slot\">\n <ng-content select=\"[dsButtonSubtext]\"></ng-content>\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:fit-content}:host(.full-width){display:block;width:100%}.button{--_button-bg-color: var(--ds-button-bg-color, var(--primary));--_button-bg-color-hover: var(--ds-button-bg-color-hover, color-mix(in srgb, var(--_button-bg-color) 88%, black));--_button-bg-color-active: var(--ds-button-bg-color-active, color-mix(in srgb, var(--_button-bg-color) 76%, black));--_button-label-color: var(--ds-button-label-color, var(--primary-on));--_button-border: var(--ds-button-border, transparent);--_button-focus-shadow: var(--ds-button-focus-shadow, var(--ds-control-focus-shadow));--_button-pressed-shadow: var(--ds-button-pressed-shadow, 0 0 0 3px color-mix(in srgb, var(--_button-bg-color-active) 35%, transparent));--_button-radius: var(--ds-button-radius, var(--radius-md));--_button-bg-color-disabled: var(--ds-button-bg-color-disabled, var(--surface-disabled));--_button-label-color-disabled: var(--ds-button-label-color-disabled, var(--text-disabled));display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--font-weight-extrabold) var(--font-size-m)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);color:var(--_button-label-color);background-color:var(--_button-bg-color);border:var(--border-width-default) solid var(--_button-border);border-radius:var(--_button-radius);padding:0 var(--space-5);height:var(--hit-cozy);width:100%;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.button:hover{background-color:var(--_button-bg-color-hover)}.button:active{background-color:var(--_button-bg-color-active);box-shadow:var(--_button-pressed-shadow)}.button:focus-visible{outline:none;box-shadow:var(--_button-focus-shadow);z-index:var(--btn-focus-z)}.button[disabled]{background-color:var(--_button-bg-color-disabled);color:var(--_button-label-color-disabled);border-color:transparent;cursor:not-allowed;pointer-events:none}.button .icon{width:var(--icon-md);height:var(--icon-md);flex-shrink:0}.button .button-main{display:contents}.button .subtext-slot:empty{display:none}.button .subtext-slot{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-tight) var(--font-sans);letter-spacing:normal;text-align:center}.button:has(.subtext-slot:not(:empty)){flex-direction:column;gap:var(--space-1);height:auto;min-height:var(--hit-cozy);padding-block:var(--space-2);white-space:normal}.button:has(.subtext-slot:not(:empty)) .button-main{display:inline-flex;align-items:center;gap:var(--space-2)}.button:has(.subtext-slot:not(:empty)).l,.button:has(.subtext-slot:not(:empty)).lg{height:auto;min-height:var(--field-h-lg)}.button.l{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.m{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.m .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.s{font-size:var(--font-size-xs);height:var(--hit-xs);padding:0 var(--space-3)}.button.s .icon{width:var(--icon-xs);height:var(--icon-xs)}.button.lg{font-size:var(--font-size-m);height:var(--field-h-lg);padding:0 var(--space-5)}.button.md{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.sm{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.sm .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.secondary{--_button-bg-color: var(--ds-button-bg-color, var(--primary-muted));--_button-label-color: var(--ds-button-label-color, var(--primary-strong));--_button-bg-color-hover: var(--ds-button-bg-color-hover, var(--primary-muted-strong));--_button-bg-color-active: var(--ds-button-bg-color-active, var(--primary-muted-strong))}.button.tertiary{--_button-bg-color: var(--ds-button-bg-color, transparent);--_button-label-color: var(--ds-button-label-color, var(--primary-strong));--_button-bg-color-hover: var(--ds-button-bg-color-hover, var(--primary-subtitle));--_button-bg-color-active: var(--ds-button-bg-color-active, var(--primary-muted))}.button.outline{--_button-bg-color: var(--ds-button-bg-color, var(--surface-default));--_button-label-color: var(--ds-button-label-color, var(--text-primary));--_button-border: var(--ds-button-border, var(--border-default));--_button-bg-color-hover: var(--ds-button-bg-color-hover, var(--surface-secondary));--_button-bg-color-active: var(--ds-button-bg-color-active, var(--surface-secondary))}.button.error{--_button-bg-color: var(--ds-button-bg-color, var(--error));--_button-focus-shadow: var(--ds-button-focus-shadow, var(--ds-control-focus-shadow-error))}.button.success{--_button-bg-color: var(--ds-button-bg-color, var(--success));--_button-label-color: var(--ds-button-label-color, var(--text-on-success))}.button.warning{--_button-bg-color: var(--ds-button-bg-color, var(--warning));--_button-label-color: var(--ds-button-label-color, var(--text-on-warning))}.button.text{--_button-bg-color: var(--ds-button-bg-color, transparent);--_button-label-color: var(--ds-button-label-color, var(--text-link));--_button-bg-color-hover: var(--ds-button-bg-color-hover, transparent);--_button-bg-color-active: var(--ds-button-bg-color-active, transparent);padding:0;height:auto;width:auto;text-decoration:underline;text-underline-offset:var(--btn-link-uloff)}.button.text:hover{color:var(--primary-pressed)}.button.loading{color:transparent!important;pointer-events:none;background-color:var(--_button-bg-color);border-color:var(--_button-border)}.button.loading:after{content:\"\";position:absolute;width:var(--spinner-md);height:var(--spinner-md);border:var(--border-width-strong) solid var(--_button-label-color);border-right-color:transparent;border-radius:var(--radius-pill);animation:spin var(--duration-loop-fast) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.button-group{display:inline-flex}.button-group .button{border-radius:var(--radius-flat)}.button-group .button:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.button-group .button:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.button-group .button+.button{margin-left:var(--btn-group-overlap)}.button-group .button:focus-visible{z-index:var(--btn-group-focus-z)}.button-split{display:inline-flex}.button-split>.button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:var(--space-4)}.button-split>.button:last-child{border-top-left-radius:var(--radius-flat);border-bottom-left-radius:var(--radius-flat);border-left:var(--border-width-default) solid var(--btn-split-divider);padding:0 var(--space-3);width:auto}.button-toggle{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--hit-min);padding:0 var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-secondary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer}.button-toggle:hover{background:var(--surface-secondary);color:var(--text-primary)}.button-toggle[aria-pressed=true]{background:var(--primary-subtitle);border-color:var(--primary);color:var(--primary-strong)}.button-toggle:focus-visible{outline:none;box-shadow:var(--_button-focus-shadow)}\n"] }]
|
|
242
244
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
|
|
243
245
|
|
|
244
246
|
/**
|
|
@@ -259,29 +261,33 @@ class IconButtonComponent {
|
|
|
259
261
|
pressed = output();
|
|
260
262
|
classes = computed(() => {
|
|
261
263
|
const parts = ['icon-button', this.variant(), this.size()];
|
|
262
|
-
if (this.selected())
|
|
264
|
+
if (this.selected()) {
|
|
263
265
|
parts.push('selected');
|
|
266
|
+
}
|
|
264
267
|
return parts.join(' ');
|
|
265
268
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
266
269
|
iconSize = computed(() => {
|
|
267
270
|
const size = this.size();
|
|
268
|
-
if (size === 'sm')
|
|
271
|
+
if (size === 'sm') {
|
|
269
272
|
return 16;
|
|
270
|
-
|
|
273
|
+
}
|
|
274
|
+
if (size === 'lg') {
|
|
271
275
|
return 24;
|
|
276
|
+
}
|
|
272
277
|
return 20;
|
|
273
278
|
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
274
279
|
onClick(event) {
|
|
275
|
-
if (this.disabled())
|
|
280
|
+
if (this.disabled()) {
|
|
276
281
|
return;
|
|
282
|
+
}
|
|
277
283
|
this.pressed.emit(event);
|
|
278
284
|
}
|
|
279
285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: IconButtonComponent, isStandalone: true, selector: "ds-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"selected() ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ds-icon
|
|
286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: IconButtonComponent, isStandalone: true, selector: "ds-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"selected() ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ds-icon\n [name]=\"icon()\"\n [size]=\"iconSize()\"\n />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.icon-button{--_icon-button-bg-color: var(--ds-icon-button-bg-color, transparent);--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--text-secondary));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, var(--surface-muted));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, var(--_icon-button-bg-color-hover));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--text-primary));--_icon-button-focus-shadow: var(--ds-icon-button-focus-shadow, var(--ds-control-focus-shadow));--_icon-button-radius: var(--ds-icon-button-radius, var(--radius-md));display:inline-flex;align-items:center;justify-content:center;width:var(--hit-cozy);height:var(--hit-cozy);aspect-ratio:1;padding:0;border:var(--border-width-default) solid var(--_icon-button-border);border-radius:var(--_icon-button-radius);background-color:var(--_icon-button-bg-color);color:var(--_icon-button-icon-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.icon-button:hover{background-color:var(--_icon-button-bg-color-hover);color:var(--_icon-button-icon-color-hover)}.icon-button:active{background-color:var(--_icon-button-bg-color-active)}.icon-button:focus-visible{outline:none;box-shadow:var(--_icon-button-focus-shadow)}.icon-button[disabled]{color:var(--text-disabled);background:transparent;border-color:transparent;cursor:not-allowed;pointer-events:none}.icon-button.sm{width:var(--hit-min);height:var(--hit-min)}.icon-button.md{width:var(--hit-cozy);height:var(--hit-cozy)}.icon-button.lg{width:var(--field-h-lg);height:var(--field-h-lg)}.icon-button.filled{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--primary));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--primary-on));--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, color-mix(in srgb, var(--_icon-button-bg-color) 88%, black));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, color-mix(in srgb, var(--_icon-button-bg-color) 76%, black));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--_icon-button-icon-color))}.icon-button.tonal{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--primary-muted));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--primary-strong));--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, var(--primary-subtitle));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, var(--primary-muted-strong));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--primary-strong))}.icon-button.outlined{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--surface-default));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--text-primary));--_icon-button-border: var(--ds-icon-button-border, var(--border-default));--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, var(--surface-secondary));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, var(--surface-muted));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--text-primary))}.icon-button.selected{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--primary));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--primary-on));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, color-mix(in srgb, var(--_icon-button-bg-color) 88%, black));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, color-mix(in srgb, var(--_icon-button-bg-color) 76%, black));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--_icon-button-icon-color))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
281
287
|
}
|
|
282
288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
283
289
|
type: Component,
|
|
284
|
-
args: [{ selector: 'ds-icon-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"selected() ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ds-icon
|
|
290
|
+
args: [{ selector: 'ds-icon-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"selected() ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ds-icon\n [name]=\"icon()\"\n [size]=\"iconSize()\"\n />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.icon-button{--_icon-button-bg-color: var(--ds-icon-button-bg-color, transparent);--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--text-secondary));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, var(--surface-muted));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, var(--_icon-button-bg-color-hover));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--text-primary));--_icon-button-focus-shadow: var(--ds-icon-button-focus-shadow, var(--ds-control-focus-shadow));--_icon-button-radius: var(--ds-icon-button-radius, var(--radius-md));display:inline-flex;align-items:center;justify-content:center;width:var(--hit-cozy);height:var(--hit-cozy);aspect-ratio:1;padding:0;border:var(--border-width-default) solid var(--_icon-button-border);border-radius:var(--_icon-button-radius);background-color:var(--_icon-button-bg-color);color:var(--_icon-button-icon-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.icon-button:hover{background-color:var(--_icon-button-bg-color-hover);color:var(--_icon-button-icon-color-hover)}.icon-button:active{background-color:var(--_icon-button-bg-color-active)}.icon-button:focus-visible{outline:none;box-shadow:var(--_icon-button-focus-shadow)}.icon-button[disabled]{color:var(--text-disabled);background:transparent;border-color:transparent;cursor:not-allowed;pointer-events:none}.icon-button.sm{width:var(--hit-min);height:var(--hit-min)}.icon-button.md{width:var(--hit-cozy);height:var(--hit-cozy)}.icon-button.lg{width:var(--field-h-lg);height:var(--field-h-lg)}.icon-button.filled{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--primary));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--primary-on));--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, color-mix(in srgb, var(--_icon-button-bg-color) 88%, black));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, color-mix(in srgb, var(--_icon-button-bg-color) 76%, black));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--_icon-button-icon-color))}.icon-button.tonal{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--primary-muted));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--primary-strong));--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, var(--primary-subtitle));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, var(--primary-muted-strong));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--primary-strong))}.icon-button.outlined{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--surface-default));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--text-primary));--_icon-button-border: var(--ds-icon-button-border, var(--border-default));--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, var(--surface-secondary));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, var(--surface-muted));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--text-primary))}.icon-button.selected{--_icon-button-bg-color: var(--ds-icon-button-bg-color, var(--primary));--_icon-button-icon-color: var(--ds-icon-button-icon-color, var(--primary-on));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-color-hover: var(--ds-icon-button-bg-color-hover, color-mix(in srgb, var(--_icon-button-bg-color) 88%, black));--_icon-button-bg-color-active: var(--ds-icon-button-bg-color-active, color-mix(in srgb, var(--_icon-button-bg-color) 76%, black));--_icon-button-icon-color-hover: var(--ds-icon-button-icon-color-hover, var(--_icon-button-icon-color))}\n"] }]
|
|
285
291
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
|
|
286
292
|
|
|
287
293
|
class BadgeComponent {
|
|
@@ -289,19 +295,15 @@ class BadgeComponent {
|
|
|
289
295
|
withDot = input(false, ...(ngDevMode ? [{ debugName: "withDot" }] : /* istanbul ignore next */ []));
|
|
290
296
|
solid = input(false, ...(ngDevMode ? [{ debugName: "solid" }] : /* istanbul ignore next */ []));
|
|
291
297
|
classes = computed(() => {
|
|
292
|
-
const parts = [
|
|
293
|
-
'badge',
|
|
294
|
-
this.variant(),
|
|
295
|
-
this.solid() ? 'solid' : '',
|
|
296
|
-
];
|
|
298
|
+
const parts = ['badge', this.variant(), this.solid() ? 'solid' : ''];
|
|
297
299
|
return parts.filter(Boolean).join(' ');
|
|
298
300
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
299
301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BadgeComponent, isStandalone: true, selector: "ds-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\n @if (withDot()) {\n <span class=\"dot\"></span>\n }\n <ng-content></ng-content>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.badge{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-
|
|
302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BadgeComponent, isStandalone: true, selector: "ds-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\n @if (withDot()) {\n <span class=\"dot\"></span>\n }\n\n <ng-content></ng-content>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.badge{--_badge-bg-color: var(--ds-badge-bg-color, var(--surface-secondary));--_badge-label-color: var(--ds-badge-label-color, var(--text-secondary));--_badge-radius: var(--ds-badge-radius, var(--radius-pill));--_badge-pad-x: var(--ds-badge-pad-x, var(--badge-pad-x));--_badge-pad-y: var(--ds-badge-pad-y, var(--badge-pad-y));--_badge-font-weight: var(--ds-badge-font-weight, var(--font-weight-bold));display:inline-flex;align-items:center;gap:var(--badge-gap);padding:var(--_badge-pad-y) var(--_badge-pad-x);border-radius:var(--_badge-radius);font:var(--_badge-font-weight) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background-color:var(--_badge-bg-color);color:var(--_badge-label-color)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentcolor}.badge.planning{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-planning-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-planning-text-color))}.badge.confirmed{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-confirmed-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-confirmed-text-color))}.badge.active{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-active-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-active-text-color))}.badge.completed{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-completed-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-completed-text-color))}.badge.info{--_badge-bg-color: var(--ds-badge-bg-color, var(--info-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--info-text))}.badge.success{--_badge-bg-color: var(--ds-badge-bg-color, var(--success-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--success-text))}.badge.warning{--_badge-bg-color: var(--ds-badge-bg-color, var(--warning-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--warning-text))}.badge.error{--_badge-bg-color: var(--ds-badge-bg-color, var(--error-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--error-text))}.badge.neutral{--_badge-bg-color: var(--ds-badge-bg-color, var(--surface-secondary));--_badge-label-color: var(--ds-badge-label-color, var(--text-secondary))}.badge.secondary{--_badge-bg-color: var(--ds-badge-bg-color, var(--secondary-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--secondary-strong))}.badge.solid{--_badge-bg-color: var(--ds-badge-bg-color, var(--primary));--_badge-label-color: var(--ds-badge-label-color, var(--primary-on))}.badge.count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;font-size:var(--font-size-2xs)}\n"] });
|
|
301
303
|
}
|
|
302
304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
303
305
|
type: Component,
|
|
304
|
-
args: [{ selector: 'ds-badge', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<span [class]=\"classes()\">\n @if (withDot()) {\n <span class=\"dot\"></span>\n }\n <ng-content></ng-content>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.badge{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-
|
|
306
|
+
args: [{ selector: 'ds-badge', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<span [class]=\"classes()\">\n @if (withDot()) {\n <span class=\"dot\"></span>\n }\n\n <ng-content></ng-content>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.badge{--_badge-bg-color: var(--ds-badge-bg-color, var(--surface-secondary));--_badge-label-color: var(--ds-badge-label-color, var(--text-secondary));--_badge-radius: var(--ds-badge-radius, var(--radius-pill));--_badge-pad-x: var(--ds-badge-pad-x, var(--badge-pad-x));--_badge-pad-y: var(--ds-badge-pad-y, var(--badge-pad-y));--_badge-font-weight: var(--ds-badge-font-weight, var(--font-weight-bold));display:inline-flex;align-items:center;gap:var(--badge-gap);padding:var(--_badge-pad-y) var(--_badge-pad-x);border-radius:var(--_badge-radius);font:var(--_badge-font-weight) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background-color:var(--_badge-bg-color);color:var(--_badge-label-color)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentcolor}.badge.planning{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-planning-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-planning-text-color))}.badge.confirmed{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-confirmed-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-confirmed-text-color))}.badge.active{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-active-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-active-text-color))}.badge.completed{--_badge-bg-color: var(--ds-badge-bg-color, var(--status-completed-bg-color));--_badge-label-color: var(--ds-badge-label-color, var(--status-completed-text-color))}.badge.info{--_badge-bg-color: var(--ds-badge-bg-color, var(--info-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--info-text))}.badge.success{--_badge-bg-color: var(--ds-badge-bg-color, var(--success-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--success-text))}.badge.warning{--_badge-bg-color: var(--ds-badge-bg-color, var(--warning-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--warning-text))}.badge.error{--_badge-bg-color: var(--ds-badge-bg-color, var(--error-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--error-text))}.badge.neutral{--_badge-bg-color: var(--ds-badge-bg-color, var(--surface-secondary));--_badge-label-color: var(--ds-badge-label-color, var(--text-secondary))}.badge.secondary{--_badge-bg-color: var(--ds-badge-bg-color, var(--secondary-subtitle));--_badge-label-color: var(--ds-badge-label-color, var(--secondary-strong))}.badge.solid{--_badge-bg-color: var(--ds-badge-bg-color, var(--primary));--_badge-label-color: var(--ds-badge-label-color, var(--primary-on))}.badge.count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;font-size:var(--font-size-2xs)}\n"] }]
|
|
305
307
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
|
|
306
308
|
|
|
307
309
|
class StatusDotComponent {
|
|
@@ -310,14 +312,14 @@ class StatusDotComponent {
|
|
|
310
312
|
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
311
313
|
classes = computed(() => `status-dot ${this.status()}`, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
312
314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatusDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
313
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: StatusDotComponent, isStandalone: true, selector: "ds-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel() || status()" } }, ngImport: i0, template: `<span [class]="classes()"
|
|
315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: StatusDotComponent, isStandalone: true, selector: "ds-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel() || status()" } }, ngImport: i0, template: `<span aria-hidden="true" [class]="classes()"></span>`, isInline: true, styles: ["@charset \"UTF-8\";:host{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted));--_statusdot-size: var(--ds-statusdot-size, var(--status-dot-size));display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;height:1em}.status-dot{display:block;width:var(--_statusdot-size);height:var(--_statusdot-size);border-radius:var(--radius-pill);flex-shrink:0;background:var(--_statusdot-color)}.status-dot.planning{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted))}.status-dot.confirmed{--_statusdot-color: var(--ds-statusdot-color, var(--primary))}.status-dot.active{--_statusdot-color: var(--ds-statusdot-color, var(--success))}.status-dot.completed{--_statusdot-color: var(--ds-statusdot-color, var(--icon-strong))}.status-dot.warning{--_statusdot-color: var(--ds-statusdot-color, var(--warning-hover))}.status-dot.error{--_statusdot-color: var(--ds-statusdot-color, var(--error))}.status-dot.secondary{--_statusdot-color: var(--ds-statusdot-color, var(--secondary))}\n"] });
|
|
314
316
|
}
|
|
315
317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatusDotComponent, decorators: [{
|
|
316
318
|
type: Component,
|
|
317
|
-
args: [{ selector: 'ds-status-dot', standalone: true, template: `<span [class]="classes()"
|
|
319
|
+
args: [{ selector: 'ds-status-dot', standalone: true, template: `<span aria-hidden="true" [class]="classes()"></span>`, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
318
320
|
role: 'img',
|
|
319
321
|
'[attr.aria-label]': 'ariaLabel() || status()',
|
|
320
|
-
}, styles: ["@charset \"UTF-8\";:host{
|
|
322
|
+
}, styles: ["@charset \"UTF-8\";:host{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted));--_statusdot-size: var(--ds-statusdot-size, var(--status-dot-size));display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;height:1em}.status-dot{display:block;width:var(--_statusdot-size);height:var(--_statusdot-size);border-radius:var(--radius-pill);flex-shrink:0;background:var(--_statusdot-color)}.status-dot.planning{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted))}.status-dot.confirmed{--_statusdot-color: var(--ds-statusdot-color, var(--primary))}.status-dot.active{--_statusdot-color: var(--ds-statusdot-color, var(--success))}.status-dot.completed{--_statusdot-color: var(--ds-statusdot-color, var(--icon-strong))}.status-dot.warning{--_statusdot-color: var(--ds-statusdot-color, var(--warning-hover))}.status-dot.error{--_statusdot-color: var(--ds-statusdot-color, var(--error))}.status-dot.secondary{--_statusdot-color: var(--ds-statusdot-color, var(--secondary))}\n"] }]
|
|
321
323
|
}], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
322
324
|
|
|
323
325
|
class AvatarComponent {
|
|
@@ -333,12 +335,13 @@ class AvatarComponent {
|
|
|
333
335
|
tint = input(null, ...(ngDevMode ? [{ debugName: "tint" }] : /* istanbul ignore next */ []));
|
|
334
336
|
tintStyle = computed(() => {
|
|
335
337
|
const value = this.tint();
|
|
336
|
-
if (value && value !== 'neutral')
|
|
338
|
+
if (value && value !== 'neutral') {
|
|
337
339
|
return { bg: value.bg, fg: value.fg };
|
|
340
|
+
}
|
|
338
341
|
return { bg: null, fg: null };
|
|
339
342
|
}, ...(ngDevMode ? [{ debugName: "tintStyle" }] : /* istanbul ignore next */ []));
|
|
340
343
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
341
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AvatarComponent, isStandalone: true, selector: "ds-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "size() === 'xs'", "class.sm": "size() === 'sm'", "class.lg": "size() === 'lg'", "class.neutral": "tint() === 'neutral'", "style.--ds-avatar-bg": "tintStyle().bg", "style.--ds-avatar-
|
|
344
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AvatarComponent, isStandalone: true, selector: "ds-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "size() === 'xs'", "class.sm": "size() === 'sm'", "class.lg": "size() === 'lg'", "class.neutral": "tint() === 'neutral'", "style.--ds-avatar-bg-color": "tintStyle().bg", "style.--ds-avatar-label-color": "tintStyle().fg", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : true" } }, ngImport: i0, template: "@if (imageUrl()) {\n <img\n alt=\"\"\n [src]=\"imageUrl()\"\n />\n} @else {\n {{ initials() }}\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatar-size: var(--ds-avatar-size, var(--avatar-md));--_avatar-bg-color: var(--ds-avatar-bg-color, var(--primary-muted));--_avatar-label-color: var(--ds-avatar-label-color, var(--primary-strong));--_avatar-radius: var(--ds-avatar-radius, var(--radius-pill));--_avatar-ring-width: var(--ds-avatar-ring-width, var(--avatar-bw-group));display:inline-grid;place-items:center;width:var(--_avatar-size);height:var(--_avatar-size);border-radius:var(--_avatar-radius);background-color:var(--_avatar-bg-color);color:var(--_avatar-label-color);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;overflow:hidden}img{width:100%;height:100%;object-fit:cover}:host(.xs){width:var(--avatar-xs);height:var(--avatar-xs);font-size:var(--font-size-4xs)}:host(.sm){width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--font-size-3xs)}:host(.lg){width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--font-size-s)}:host(.neutral){--_avatar-bg-color: var(--ds-avatar-bg-color, var(--surface-secondary));--_avatar-label-color: var(--ds-avatar-label-color, var(--text-secondary))}\n"] });
|
|
342
345
|
}
|
|
343
346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
344
347
|
type: Component,
|
|
@@ -347,12 +350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
347
350
|
'[class.sm]': "size() === 'sm'",
|
|
348
351
|
'[class.lg]': "size() === 'lg'",
|
|
349
352
|
'[class.neutral]': "tint() === 'neutral'",
|
|
350
|
-
'[style.--ds-avatar-bg]': 'tintStyle().bg',
|
|
351
|
-
'[style.--ds-avatar-
|
|
353
|
+
'[style.--ds-avatar-bg-color]': 'tintStyle().bg',
|
|
354
|
+
'[style.--ds-avatar-label-color]': 'tintStyle().fg',
|
|
352
355
|
'[attr.role]': "ariaLabel() ? 'img' : null",
|
|
353
356
|
'[attr.aria-label]': 'ariaLabel()',
|
|
354
357
|
'[attr.aria-hidden]': 'ariaLabel() ? null : true',
|
|
355
|
-
}, template: "@if (imageUrl()) {\n <img
|
|
358
|
+
}, template: "@if (imageUrl()) {\n <img\n alt=\"\"\n [src]=\"imageUrl()\"\n />\n} @else {\n {{ initials() }}\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatar-size: var(--ds-avatar-size, var(--avatar-md));--_avatar-bg-color: var(--ds-avatar-bg-color, var(--primary-muted));--_avatar-label-color: var(--ds-avatar-label-color, var(--primary-strong));--_avatar-radius: var(--ds-avatar-radius, var(--radius-pill));--_avatar-ring-width: var(--ds-avatar-ring-width, var(--avatar-bw-group));display:inline-grid;place-items:center;width:var(--_avatar-size);height:var(--_avatar-size);border-radius:var(--_avatar-radius);background-color:var(--_avatar-bg-color);color:var(--_avatar-label-color);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;overflow:hidden}img{width:100%;height:100%;object-fit:cover}:host(.xs){width:var(--avatar-xs);height:var(--avatar-xs);font-size:var(--font-size-4xs)}:host(.sm){width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--font-size-3xs)}:host(.lg){width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--font-size-s)}:host(.neutral){--_avatar-bg-color: var(--ds-avatar-bg-color, var(--surface-secondary));--_avatar-label-color: var(--ds-avatar-label-color, var(--text-secondary))}\n"] }]
|
|
356
359
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tint: [{ type: i0.Input, args: [{ isSignal: true, alias: "tint", required: false }] }] } });
|
|
357
360
|
|
|
358
361
|
class AvatarGroupComponent {
|
|
@@ -361,16 +364,17 @@ class AvatarGroupComponent {
|
|
|
361
364
|
overflow = computed(() => {
|
|
362
365
|
const total = this.total();
|
|
363
366
|
const max = this.max();
|
|
364
|
-
if (total === null)
|
|
367
|
+
if (total === null) {
|
|
365
368
|
return null;
|
|
369
|
+
}
|
|
366
370
|
return total > max ? total - max : null;
|
|
367
371
|
}, ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
|
|
368
372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
369
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AvatarGroupComponent, isStandalone: true, selector: "ds-avatar-group", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (overflow() !== null) {\n <span class=\"avatar-overflow\"
|
|
373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AvatarGroupComponent, isStandalone: true, selector: "ds-avatar-group", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (overflow() !== null) {\n <span class=\"avatar-overflow\">\n +{{ overflow() }}\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatargroup-overlap: var(--ds-avatargroup-overlap, calc(-1 * var(--space-2)));--_avatargroup-ring: var(--ds-avatargroup-ring, var(--surface-default));display:inline-flex}:host ::ng-deep ds-avatar{border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}:host ::ng-deep ds-avatar:first-child{margin-left:0}.avatar-overflow{display:inline-grid;place-items:center;width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-pill);background:var(--primary-muted);color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}\n"] });
|
|
370
374
|
}
|
|
371
375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AvatarGroupComponent, decorators: [{
|
|
372
376
|
type: Component,
|
|
373
|
-
args: [{ selector: 'ds-avatar-group', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<ng-content></ng-content>\n@if (overflow() !== null) {\n <span class=\"avatar-overflow\"
|
|
377
|
+
args: [{ selector: 'ds-avatar-group', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<ng-content></ng-content>\n\n@if (overflow() !== null) {\n <span class=\"avatar-overflow\">\n +{{ overflow() }}\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatargroup-overlap: var(--ds-avatargroup-overlap, calc(-1 * var(--space-2)));--_avatargroup-ring: var(--ds-avatargroup-ring, var(--surface-default));display:inline-flex}:host ::ng-deep ds-avatar{border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}:host ::ng-deep ds-avatar:first-child{margin-left:0}.avatar-overflow{display:inline-grid;place-items:center;width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-pill);background:var(--primary-muted);color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}\n"] }]
|
|
374
378
|
}], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }] } });
|
|
375
379
|
|
|
376
380
|
class CardComponent {
|
|
@@ -387,11 +391,11 @@ class CardComponent {
|
|
|
387
391
|
}
|
|
388
392
|
}
|
|
389
393
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
390
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CardComponent, isStandalone: true, selector: "ds-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<article
|
|
394
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CardComponent, isStandalone: true, selector: "ds-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<article\n [class]=\"classes()\"\n (click)=\"onClick($event)\"\n>\n <ng-content></ng-content>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block;--_card-bg-color: var(--ds-card-bg-color, var(--surface-default));--_card-border: var(--ds-card-border, var(--border-divider));--_card-radius: var(--ds-card-radius, var(--radius-lg));--_card-pad: var(--ds-card-pad, var(--ds-container-pad));--_card-shadow: var(--ds-card-shadow, none);--_card-shadow-hover: var(--ds-card-shadow-hover, var(--shadow-1));--_card-focus-shadow: var(--ds-card-focus-shadow, var(--ds-control-focus-shadow));--_card-hover-lift: var(--ds-card-hover-lift, var(--card-hover-lift))}.card{background-color:var(--_card-bg-color);border:var(--border-width-default) solid var(--_card-border);border-radius:var(--_card-radius);padding:var(--_card-pad);box-shadow:var(--_card-shadow);transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.card.flat{box-shadow:none}.card.raised{box-shadow:var(--_card-shadow-hover);border-color:transparent}.card.hover:hover{box-shadow:var(--_card-shadow-hover);transform:translateY(calc(var(--_card-hover-lift) * -1))}.card.interactive{cursor:pointer}.card.interactive:focus-visible{outline:none;box-shadow:var(--_card-focus-shadow)}.card.padding-none{--_card-pad: var(--ds-card-pad, 0)}.card.padding-sm{--_card-pad: var(--ds-card-pad, var(--space-4))}.card.padding-md{--_card-pad: var(--ds-card-pad, var(--space-6))}.card.padding-lg{--_card-pad: var(--ds-card-pad, var(--space-8))}\n"] });
|
|
391
395
|
}
|
|
392
396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CardComponent, decorators: [{
|
|
393
397
|
type: Component,
|
|
394
|
-
args: [{ selector: 'ds-card', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<article
|
|
398
|
+
args: [{ selector: 'ds-card', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<article\n [class]=\"classes()\"\n (click)=\"onClick($event)\"\n>\n <ng-content></ng-content>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block;--_card-bg-color: var(--ds-card-bg-color, var(--surface-default));--_card-border: var(--ds-card-border, var(--border-divider));--_card-radius: var(--ds-card-radius, var(--radius-lg));--_card-pad: var(--ds-card-pad, var(--ds-container-pad));--_card-shadow: var(--ds-card-shadow, none);--_card-shadow-hover: var(--ds-card-shadow-hover, var(--shadow-1));--_card-focus-shadow: var(--ds-card-focus-shadow, var(--ds-control-focus-shadow));--_card-hover-lift: var(--ds-card-hover-lift, var(--card-hover-lift))}.card{background-color:var(--_card-bg-color);border:var(--border-width-default) solid var(--_card-border);border-radius:var(--_card-radius);padding:var(--_card-pad);box-shadow:var(--_card-shadow);transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.card.flat{box-shadow:none}.card.raised{box-shadow:var(--_card-shadow-hover);border-color:transparent}.card.hover:hover{box-shadow:var(--_card-shadow-hover);transform:translateY(calc(var(--_card-hover-lift) * -1))}.card.interactive{cursor:pointer}.card.interactive:focus-visible{outline:none;box-shadow:var(--_card-focus-shadow)}.card.padding-none{--_card-pad: var(--ds-card-pad, 0)}.card.padding-sm{--_card-pad: var(--ds-card-pad, var(--space-4))}.card.padding-md{--_card-pad: var(--ds-card-pad, var(--space-6))}.card.padding-lg{--_card-pad: var(--ds-card-pad, var(--space-8))}\n"] }]
|
|
395
399
|
}], propDecorators: { elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
|
|
396
400
|
|
|
397
401
|
class StatComponent {
|
|
@@ -406,33 +410,39 @@ class StatComponent {
|
|
|
406
410
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
407
411
|
deltaClasses = computed(() => {
|
|
408
412
|
const delta = this.delta();
|
|
409
|
-
if (delta === null)
|
|
413
|
+
if (delta === null) {
|
|
410
414
|
return '';
|
|
415
|
+
}
|
|
411
416
|
const tone = this.deltaTone();
|
|
412
|
-
if (tone)
|
|
417
|
+
if (tone) {
|
|
413
418
|
return `delta ${tone}`;
|
|
414
|
-
|
|
419
|
+
}
|
|
420
|
+
if (delta > 0) {
|
|
415
421
|
return 'delta up';
|
|
416
|
-
|
|
422
|
+
}
|
|
423
|
+
if (delta < 0) {
|
|
417
424
|
return 'delta down';
|
|
425
|
+
}
|
|
418
426
|
return 'delta';
|
|
419
427
|
}, ...(ngDevMode ? [{ debugName: "deltaClasses" }] : /* istanbul ignore next */ []));
|
|
420
428
|
deltaIcon = computed(() => {
|
|
421
429
|
const delta = this.delta();
|
|
422
|
-
if (delta === null || delta === 0)
|
|
430
|
+
if (delta === null || delta === 0) {
|
|
423
431
|
return null;
|
|
432
|
+
}
|
|
424
433
|
return delta > 0 ? 'arrowUp' : 'arrowDown';
|
|
425
434
|
}, ...(ngDevMode ? [{ debugName: "deltaIcon" }] : /* istanbul ignore next */ []));
|
|
426
435
|
deltaText = computed(() => {
|
|
427
436
|
const delta = this.delta();
|
|
428
|
-
if (delta === null)
|
|
437
|
+
if (delta === null) {
|
|
429
438
|
return '';
|
|
439
|
+
}
|
|
430
440
|
const magnitude = Math.abs(delta);
|
|
431
441
|
const suffix = this.deltaLabel() ? ` ${this.deltaLabel()}` : '';
|
|
432
442
|
return `${magnitude}${suffix}`;
|
|
433
443
|
}, ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
|
|
434
444
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StatComponent, isStandalone: true, selector: "ds-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, deltaTone: { classPropertyName: "deltaTone", publicName: "deltaTone", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.danger": "variant() === 'danger'", "class.size-sm": "size() === 'sm'", "class.size-lg": "size() === 'lg'" } }, ngImport: i0, template: "<div class=\"stat\">\n <div class=\"label\"
|
|
445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StatComponent, isStandalone: true, selector: "ds-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, deltaTone: { classPropertyName: "deltaTone", publicName: "deltaTone", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.danger": "variant() === 'danger'", "class.size-sm": "size() === 'sm'", "class.size-lg": "size() === 'lg'" } }, ngImport: i0, template: "<div class=\"stat\">\n <div class=\"label\">\n {{ label() }}\n </div>\n\n <div class=\"value\">\n {{ value() }}{{ unit() }}\n </div>\n\n @if (delta() !== null) {\n <div [class]=\"deltaClasses()\">\n @if (deltaIcon(); as icon) {\n <ds-icon\n [name]=\"icon\"\n [size]=\"12\"\n >\n </ds-icon>\n }\n\n <ng-content select=\"[delta]\">{{ deltaText() }}</ng-content>\n </div>\n } @else if (caption()) {\n <div class=\"caption\">\n {{ caption() }}\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_stat-bg-color: var(--ds-stat-bg-color, var(--surface-default));--_stat-border: var(--ds-stat-border, var(--border-divider));--_stat-radius: var(--ds-stat-radius, var(--radius-lg));--_stat-pad: var(--ds-stat-pad, var(--ds-container-pad));--_stat-label-color: var(--ds-stat-label-color, var(--text-tertiary));--_stat-value-color: var(--ds-stat-value-color, var(--text-primary));--_stat-up-color: var(--ds-stat-up-color, var(--success-text));--_stat-down-color: var(--ds-stat-down-color, var(--error-text));display:block}:host(.danger) .value{color:var(--error-text)}:host(.size-sm) .stat .label{font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide)}:host(.size-sm) .stat .value{font-size:var(--font-size-h4)}:host(.size-lg) .stat .label{font-size:var(--font-size-s)}:host(.size-lg) .stat .value{font-size:var(--font-size-h1)}.stat{background-color:var(--_stat-bg-color);border:var(--border-width-default) solid var(--_stat-border);border-radius:var(--_stat-radius);padding:var(--_stat-pad)}.stat .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_stat-label-color);margin:0 0 var(--space-2)}.stat .value{font:var(--font-weight-extrabold) var(--font-size-h2)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-snug);color:var(--_stat-value-color);margin:0;white-space:nowrap}.stat .delta{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);margin-top:var(--space-2)}.stat .delta.up{color:var(--_stat-up-color)}.stat .delta.down{color:var(--_stat-down-color)}.stat .delta.neutral{color:var(--text-tertiary)}.stat .delta.secondary{color:var(--secondary-strong)}.stat .caption{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);margin-top:var(--space-2)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
436
446
|
}
|
|
437
447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatComponent, decorators: [{
|
|
438
448
|
type: Component,
|
|
@@ -440,7 +450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
440
450
|
'[class.danger]': "variant() === 'danger'",
|
|
441
451
|
'[class.size-sm]': "size() === 'sm'",
|
|
442
452
|
'[class.size-lg]': "size() === 'lg'",
|
|
443
|
-
}, template: "<div class=\"stat\">\n <div class=\"label\"
|
|
453
|
+
}, template: "<div class=\"stat\">\n <div class=\"label\">\n {{ label() }}\n </div>\n\n <div class=\"value\">\n {{ value() }}{{ unit() }}\n </div>\n\n @if (delta() !== null) {\n <div [class]=\"deltaClasses()\">\n @if (deltaIcon(); as icon) {\n <ds-icon\n [name]=\"icon\"\n [size]=\"12\"\n >\n </ds-icon>\n }\n\n <ng-content select=\"[delta]\">{{ deltaText() }}</ng-content>\n </div>\n } @else if (caption()) {\n <div class=\"caption\">\n {{ caption() }}\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_stat-bg-color: var(--ds-stat-bg-color, var(--surface-default));--_stat-border: var(--ds-stat-border, var(--border-divider));--_stat-radius: var(--ds-stat-radius, var(--radius-lg));--_stat-pad: var(--ds-stat-pad, var(--ds-container-pad));--_stat-label-color: var(--ds-stat-label-color, var(--text-tertiary));--_stat-value-color: var(--ds-stat-value-color, var(--text-primary));--_stat-up-color: var(--ds-stat-up-color, var(--success-text));--_stat-down-color: var(--ds-stat-down-color, var(--error-text));display:block}:host(.danger) .value{color:var(--error-text)}:host(.size-sm) .stat .label{font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide)}:host(.size-sm) .stat .value{font-size:var(--font-size-h4)}:host(.size-lg) .stat .label{font-size:var(--font-size-s)}:host(.size-lg) .stat .value{font-size:var(--font-size-h1)}.stat{background-color:var(--_stat-bg-color);border:var(--border-width-default) solid var(--_stat-border);border-radius:var(--_stat-radius);padding:var(--_stat-pad)}.stat .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_stat-label-color);margin:0 0 var(--space-2)}.stat .value{font:var(--font-weight-extrabold) var(--font-size-h2)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-snug);color:var(--_stat-value-color);margin:0;white-space:nowrap}.stat .delta{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);margin-top:var(--space-2)}.stat .delta.up{color:var(--_stat-up-color)}.stat .delta.down{color:var(--_stat-down-color)}.stat .delta.neutral{color:var(--text-tertiary)}.stat .delta.secondary{color:var(--secondary-strong)}.stat .caption{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);margin-top:var(--space-2)}\n"] }]
|
|
444
454
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaLabel", required: false }] }], deltaTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaTone", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
445
455
|
|
|
446
456
|
class TabComponent {
|
|
@@ -450,11 +460,15 @@ class TabComponent {
|
|
|
450
460
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
451
461
|
content = viewChild.required('content');
|
|
452
462
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
453
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: TabComponent, isStandalone: true, selector: "ds-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content
|
|
463
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: TabComponent, isStandalone: true, selector: "ds-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content>
|
|
464
|
+
<ng-content></ng-content>
|
|
465
|
+
</ng-template>`, isInline: true, styles: [":host{display:none}\n"] });
|
|
454
466
|
}
|
|
455
467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, decorators: [{
|
|
456
468
|
type: Component,
|
|
457
|
-
args: [{ selector: 'ds-tab', standalone: true, template: `<ng-template #content
|
|
469
|
+
args: [{ selector: 'ds-tab', standalone: true, template: `<ng-template #content>
|
|
470
|
+
<ng-content></ng-content>
|
|
471
|
+
</ng-template>`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:none}\n"] }]
|
|
458
472
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
459
473
|
|
|
460
474
|
let nextId$a = 0;
|
|
@@ -472,41 +486,50 @@ class TabsComponent {
|
|
|
472
486
|
}
|
|
473
487
|
tabsClasses = computed(() => this.variant() === 'pills' ? 'tabs pills' : 'tabs', ...(ngDevMode ? [{ debugName: "tabsClasses" }] : /* istanbul ignore next */ []));
|
|
474
488
|
selectedTemplate = computed(() => {
|
|
475
|
-
const
|
|
489
|
+
const index = this.selectedIndex();
|
|
476
490
|
const list = this.tabs();
|
|
477
|
-
return list[
|
|
491
|
+
return list[index]?.content() ?? null;
|
|
478
492
|
}, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
|
|
479
493
|
tabClasses(index, disabled) {
|
|
480
494
|
const parts = ['tab'];
|
|
481
|
-
if (index === this.selectedIndex())
|
|
495
|
+
if (index === this.selectedIndex()) {
|
|
482
496
|
parts.push('active');
|
|
483
|
-
|
|
497
|
+
}
|
|
498
|
+
if (disabled) {
|
|
484
499
|
parts.push('disabled');
|
|
500
|
+
}
|
|
485
501
|
return parts.join(' ');
|
|
486
502
|
}
|
|
487
503
|
select(index, disabled) {
|
|
488
|
-
if (disabled)
|
|
504
|
+
if (disabled) {
|
|
489
505
|
return;
|
|
506
|
+
}
|
|
490
507
|
this.selectedIndex.set(index);
|
|
491
508
|
}
|
|
492
509
|
/** Roving keyboard navigation across the tablist (APG automatic activation). */
|
|
493
510
|
onKeydown(event, index) {
|
|
494
511
|
const count = this.tabs().length;
|
|
495
|
-
if (!count)
|
|
512
|
+
if (!count) {
|
|
496
513
|
return;
|
|
514
|
+
}
|
|
497
515
|
const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
|
|
498
516
|
const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
|
|
499
517
|
let next;
|
|
500
|
-
if (forward)
|
|
518
|
+
if (forward) {
|
|
501
519
|
next = (index + 1) % count;
|
|
502
|
-
|
|
520
|
+
}
|
|
521
|
+
else if (backward) {
|
|
503
522
|
next = (index - 1 + count) % count;
|
|
504
|
-
|
|
523
|
+
}
|
|
524
|
+
else if (event.key === 'Home') {
|
|
505
525
|
next = 0;
|
|
506
|
-
|
|
526
|
+
}
|
|
527
|
+
else if (event.key === 'End') {
|
|
507
528
|
next = count - 1;
|
|
508
|
-
|
|
529
|
+
}
|
|
530
|
+
else {
|
|
509
531
|
return;
|
|
532
|
+
}
|
|
510
533
|
event.preventDefault();
|
|
511
534
|
// Skip disabled tabs in the travel direction.
|
|
512
535
|
const step = backward || event.key === 'End' ? -1 : 1;
|
|
@@ -517,22 +540,83 @@ class TabsComponent {
|
|
|
517
540
|
}
|
|
518
541
|
this.select(next, this.tabs()[next]?.disabled() ?? false);
|
|
519
542
|
setTimeout(() => {
|
|
520
|
-
const
|
|
521
|
-
|
|
543
|
+
const element = this.host.nativeElement.querySelector(`#${this.tabId(next)}`);
|
|
544
|
+
element?.focus();
|
|
522
545
|
});
|
|
523
546
|
}
|
|
524
547
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "ds-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<div
|
|
548
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "ds-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<div\n role=\"tablist\"\n [class]=\"tabsClasses()\"\n>\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tabId($index)\"\n [class]=\"tabClasses($index, tab.disabled())\"\n [attr.aria-selected]=\"$index === selectedIndex()\"\n [attr.aria-controls]=\"panelId($index)\"\n [attr.tabindex]=\"$index === selectedIndex() ? 0 : -1\"\n [disabled]=\"tab.disabled()\"\n (click)=\"select($index, tab.disabled())\"\n (keydown)=\"onKeydown($event, $index)\"\n >\n @if (tab.icon()) {\n <ds-icon\n [name]=\"tab.icon()!\"\n [size]=\"14\"\n >\n </ds-icon>\n }\n\n <span>\n {{ tab.label() }}\n </span>\n\n @if (tab.count() !== null) {\n <span class=\"badge neutral count\">\n {{ tab.count() }}\n </span>\n }\n </button>\n }\n</div>\n\n<div\n class=\"panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"panelId(selectedIndex())\"\n [attr.aria-labelledby]=\"tabId(selectedIndex())\"\n>\n @if (selectedTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_tabs-divider: var(--ds-tabs-divider, var(--border-divider));--_tab-pad-x: var(--ds-tab-pad-x, var(--space-4));--_tab-pad-y: var(--ds-tab-pad-y, var(--space-3));--_tab-label-color: var(--ds-tab-label-color, var(--text-secondary));--_tab-label-color-hover: var(--ds-tab-label-color-hover, var(--text-primary));--_tab-label-color-active: var(--ds-tab-label-color-active, var(--primary));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--primary));--_tab-indicator-width: var(--ds-tab-indicator-width, var(--border-width-strong));--_tabs-pills-bg-color: var(--ds-tabs-pills-bg-color, var(--surface-secondary));--_tab-pill-bg-color-hover: var(--ds-tab-pill-bg-color-hover, var(--primary-subtitle));--_tab-pill-bg-color-active: var(--ds-tab-pill-bg-color-active, var(--surface-default));--_tab-pill-bg-color-active-hover: var(--ds-tab-pill-bg-color-active-hover, var(--primary-subtitle));--_tab-pill-label-color-active: var(--ds-tab-pill-label-color-active, var(--primary-strong));--_tab-pill-radius: var(--ds-tab-pill-radius, var(--radius-md));--_tabs-focus-shadow: var(--ds-tabs-focus-shadow, var(--ds-control-focus-shadow));display:block}.tabs{display:flex;gap:var(--space-2);border-bottom:var(--border-width-default) solid var(--_tabs-divider)}.tabs .tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--_tab-pad-y) var(--_tab-pad-x);border:0;background:transparent;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_tab-label-color);cursor:pointer;border-bottom:var(--_tab-indicator-width) solid transparent;margin-bottom:calc(-1 * var(--border-width-default));transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.tabs .tab:hover{color:var(--_tab-label-color-hover)}.tabs .tab.active{color:var(--_tab-label-color-active);border-bottom-color:var(--_tab-indicator-color)}.tabs .tab .badge{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background:var(--surface-secondary);color:var(--text-secondary);margin-left:var(--space-1)}.tabs .tab:focus-visible{outline:none;box-shadow:var(--_tabs-focus-shadow);border-radius:var(--radius-sm)}.tabs .tab[disabled],.tabs .tab.disabled{color:var(--text-disabled);cursor:not-allowed}.tabs.secondary .tab.active{--_tab-label-color-active: var(--ds-tab-label-color-active, var(--secondary-strong));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--secondary))}.tabs.pills{border-bottom:0;gap:var(--space-1);padding:var(--space-1);background-color:var(--_tabs-pills-bg-color);border-radius:var(--_tab-pill-radius);display:inline-flex}.tabs.pills .tab{padding:var(--space-2) var(--space-3);border-bottom:0;margin-bottom:0;border-radius:var(--_tab-pill-radius);color:var(--_tab-label-color)}.tabs.pills .tab:hover{background-color:var(--_tab-pill-bg-color-hover);color:var(--_tab-label-color-hover)}.tabs.pills .tab.active{background-color:var(--_tab-pill-bg-color-active);color:var(--_tab-pill-label-color-active);border-bottom:0;box-shadow:var(--shadow-1)}.tabs.pills .tab.active:hover{background-color:var(--_tab-pill-bg-color-active-hover)}.panel{padding-top:var(--space-3)}.panel:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
526
549
|
}
|
|
527
550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, decorators: [{
|
|
528
551
|
type: Component,
|
|
529
|
-
args: [{ selector: 'ds-tabs', standalone: true, imports: [NgTemplateOutlet, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div
|
|
552
|
+
args: [{ selector: 'ds-tabs', standalone: true, imports: [NgTemplateOutlet, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n role=\"tablist\"\n [class]=\"tabsClasses()\"\n>\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tabId($index)\"\n [class]=\"tabClasses($index, tab.disabled())\"\n [attr.aria-selected]=\"$index === selectedIndex()\"\n [attr.aria-controls]=\"panelId($index)\"\n [attr.tabindex]=\"$index === selectedIndex() ? 0 : -1\"\n [disabled]=\"tab.disabled()\"\n (click)=\"select($index, tab.disabled())\"\n (keydown)=\"onKeydown($event, $index)\"\n >\n @if (tab.icon()) {\n <ds-icon\n [name]=\"tab.icon()!\"\n [size]=\"14\"\n >\n </ds-icon>\n }\n\n <span>\n {{ tab.label() }}\n </span>\n\n @if (tab.count() !== null) {\n <span class=\"badge neutral count\">\n {{ tab.count() }}\n </span>\n }\n </button>\n }\n</div>\n\n<div\n class=\"panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"panelId(selectedIndex())\"\n [attr.aria-labelledby]=\"tabId(selectedIndex())\"\n>\n @if (selectedTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_tabs-divider: var(--ds-tabs-divider, var(--border-divider));--_tab-pad-x: var(--ds-tab-pad-x, var(--space-4));--_tab-pad-y: var(--ds-tab-pad-y, var(--space-3));--_tab-label-color: var(--ds-tab-label-color, var(--text-secondary));--_tab-label-color-hover: var(--ds-tab-label-color-hover, var(--text-primary));--_tab-label-color-active: var(--ds-tab-label-color-active, var(--primary));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--primary));--_tab-indicator-width: var(--ds-tab-indicator-width, var(--border-width-strong));--_tabs-pills-bg-color: var(--ds-tabs-pills-bg-color, var(--surface-secondary));--_tab-pill-bg-color-hover: var(--ds-tab-pill-bg-color-hover, var(--primary-subtitle));--_tab-pill-bg-color-active: var(--ds-tab-pill-bg-color-active, var(--surface-default));--_tab-pill-bg-color-active-hover: var(--ds-tab-pill-bg-color-active-hover, var(--primary-subtitle));--_tab-pill-label-color-active: var(--ds-tab-pill-label-color-active, var(--primary-strong));--_tab-pill-radius: var(--ds-tab-pill-radius, var(--radius-md));--_tabs-focus-shadow: var(--ds-tabs-focus-shadow, var(--ds-control-focus-shadow));display:block}.tabs{display:flex;gap:var(--space-2);border-bottom:var(--border-width-default) solid var(--_tabs-divider)}.tabs .tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--_tab-pad-y) var(--_tab-pad-x);border:0;background:transparent;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_tab-label-color);cursor:pointer;border-bottom:var(--_tab-indicator-width) solid transparent;margin-bottom:calc(-1 * var(--border-width-default));transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.tabs .tab:hover{color:var(--_tab-label-color-hover)}.tabs .tab.active{color:var(--_tab-label-color-active);border-bottom-color:var(--_tab-indicator-color)}.tabs .tab .badge{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background:var(--surface-secondary);color:var(--text-secondary);margin-left:var(--space-1)}.tabs .tab:focus-visible{outline:none;box-shadow:var(--_tabs-focus-shadow);border-radius:var(--radius-sm)}.tabs .tab[disabled],.tabs .tab.disabled{color:var(--text-disabled);cursor:not-allowed}.tabs.secondary .tab.active{--_tab-label-color-active: var(--ds-tab-label-color-active, var(--secondary-strong));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--secondary))}.tabs.pills{border-bottom:0;gap:var(--space-1);padding:var(--space-1);background-color:var(--_tabs-pills-bg-color);border-radius:var(--_tab-pill-radius);display:inline-flex}.tabs.pills .tab{padding:var(--space-2) var(--space-3);border-bottom:0;margin-bottom:0;border-radius:var(--_tab-pill-radius);color:var(--_tab-label-color)}.tabs.pills .tab:hover{background-color:var(--_tab-pill-bg-color-hover);color:var(--_tab-label-color-hover)}.tabs.pills .tab.active{background-color:var(--_tab-pill-bg-color-active);color:var(--_tab-pill-label-color-active);border-bottom:0;box-shadow:var(--shadow-1)}.tabs.pills .tab.active:hover{background-color:var(--_tab-pill-bg-color-active-hover)}.panel{padding-top:var(--space-3)}.panel:empty{display:none}\n"] }]
|
|
530
553
|
}], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
|
|
531
554
|
|
|
555
|
+
/**
|
|
556
|
+
* Shared `ControlValueAccessor` for DS form controls whose value is a signal
|
|
557
|
+
* `model()`. Bridges that model with Angular forms (reactive `formControl` /
|
|
558
|
+
* `formControlName` and template `ngModel`) in both directions, WITHOUT
|
|
559
|
+
* touching the existing `[(value)]` signal API — both keep working.
|
|
560
|
+
*
|
|
561
|
+
* A subclass must expose the `value` model and OR `formDisabled()` into its
|
|
562
|
+
* effective disabled state so `FormControl.disable()` actually reaches the
|
|
563
|
+
* control; it should also call `markTouched()` from a blur handler.
|
|
564
|
+
*/
|
|
565
|
+
class DsControlValueAccessor {
|
|
566
|
+
/** Driven by the forms API via `setDisabledState`. */
|
|
567
|
+
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
568
|
+
onChange = () => { };
|
|
569
|
+
onTouched = () => { };
|
|
570
|
+
// Last value synced with the forms API. Guards the value-watching effect from
|
|
571
|
+
// echoing a form-driven write back as a user change (which would dirty the
|
|
572
|
+
// control or loop), while still emitting every genuine model change.
|
|
573
|
+
synced;
|
|
574
|
+
hasSynced = false;
|
|
575
|
+
constructor() {
|
|
576
|
+
effect(() => {
|
|
577
|
+
const next = this.value();
|
|
578
|
+
if (!this.hasSynced) {
|
|
579
|
+
// Adopt the initial value once, silently — never emit on init.
|
|
580
|
+
this.hasSynced = true;
|
|
581
|
+
this.synced = next;
|
|
582
|
+
return;
|
|
583
|
+
}
|
|
584
|
+
if (Object.is(next, this.synced)) {
|
|
585
|
+
return;
|
|
586
|
+
}
|
|
587
|
+
this.synced = next;
|
|
588
|
+
this.onChange(next);
|
|
589
|
+
});
|
|
590
|
+
}
|
|
591
|
+
/** Call from a blur handler so the control reports `ng-touched`. */
|
|
592
|
+
markTouched() {
|
|
593
|
+
this.onTouched();
|
|
594
|
+
}
|
|
595
|
+
writeValue(value) {
|
|
596
|
+
this.hasSynced = true;
|
|
597
|
+
this.synced = value;
|
|
598
|
+
this.value.set(value);
|
|
599
|
+
}
|
|
600
|
+
registerOnChange(fn) {
|
|
601
|
+
this.onChange = fn;
|
|
602
|
+
}
|
|
603
|
+
registerOnTouched(fn) {
|
|
604
|
+
this.onTouched = fn;
|
|
605
|
+
}
|
|
606
|
+
setDisabledState(isDisabled) {
|
|
607
|
+
this.formDisabled.set(isDisabled);
|
|
608
|
+
}
|
|
609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
610
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: DsControlValueAccessor, isStandalone: true, ngImport: i0 });
|
|
611
|
+
}
|
|
612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsControlValueAccessor, decorators: [{
|
|
613
|
+
type: Directive
|
|
614
|
+
}], ctorParameters: () => [] });
|
|
615
|
+
|
|
532
616
|
/** Process-wide counter so each control gets a stable, unique id for
|
|
533
617
|
* label/hint association (no DOM dependency, SSR-safe). */
|
|
534
618
|
let nextId$9 = 0;
|
|
535
|
-
class InputComponent {
|
|
619
|
+
class InputComponent extends DsControlValueAccessor {
|
|
536
620
|
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
537
621
|
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
538
622
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
@@ -575,16 +659,21 @@ class InputComponent {
|
|
|
575
659
|
passwordVisible = model(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
|
|
576
660
|
canClear = computed(() => {
|
|
577
661
|
const explicit = this.clearable();
|
|
578
|
-
if (explicit !== null)
|
|
662
|
+
if (explicit !== null) {
|
|
579
663
|
return explicit;
|
|
664
|
+
}
|
|
580
665
|
return this.type() === 'search';
|
|
581
666
|
}, ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
|
|
582
667
|
uid = `ds-input-${++nextId$9}`;
|
|
583
|
-
hintId = computed(() =>
|
|
668
|
+
hintId = computed(() => this.hint() ? `${this.uid}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
584
669
|
/** Only name via aria-label when there's no visible `<label for>`. */
|
|
585
670
|
resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
586
|
-
|
|
587
|
-
|
|
671
|
+
/** Effective disabled — own `disabled` input OR the reactive-forms state. */
|
|
672
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
673
|
+
showPasswordToggle = computed(() => this.passwordToggle() && this.type() === 'password' && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
|
|
674
|
+
effectiveType = computed(() => this.passwordToggle() &&
|
|
675
|
+
this.type() === 'password' &&
|
|
676
|
+
this.passwordVisible()
|
|
588
677
|
? 'text'
|
|
589
678
|
: this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
|
|
590
679
|
togglePassword() {
|
|
@@ -592,33 +681,53 @@ class InputComponent {
|
|
|
592
681
|
}
|
|
593
682
|
wrapperClasses = computed(() => {
|
|
594
683
|
const parts = ['field'];
|
|
595
|
-
if (this.size() === 'sm')
|
|
684
|
+
if (this.size() === 'sm') {
|
|
596
685
|
parts.push('sm');
|
|
597
|
-
|
|
686
|
+
}
|
|
687
|
+
if (this.size() === 'lg') {
|
|
598
688
|
parts.push('lg');
|
|
599
|
-
|
|
689
|
+
}
|
|
690
|
+
if (this.invalid()) {
|
|
600
691
|
parts.push('error');
|
|
601
|
-
|
|
692
|
+
}
|
|
693
|
+
else if (this.success()) {
|
|
602
694
|
parts.push('success');
|
|
603
|
-
|
|
695
|
+
}
|
|
696
|
+
if (this.isDisabled()) {
|
|
604
697
|
parts.push('disabled');
|
|
605
|
-
|
|
698
|
+
}
|
|
699
|
+
if (this.readOnly()) {
|
|
606
700
|
parts.push('read-only');
|
|
607
|
-
|
|
701
|
+
}
|
|
702
|
+
if (this.withAddon()) {
|
|
608
703
|
parts.push('with-addon');
|
|
609
|
-
|
|
704
|
+
}
|
|
705
|
+
if (this.withAddonRight()) {
|
|
610
706
|
parts.push('with-addon-right');
|
|
707
|
+
}
|
|
611
708
|
return parts.join(' ');
|
|
612
709
|
}, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
|
|
613
710
|
clear() {
|
|
614
711
|
this.value.set('');
|
|
615
712
|
}
|
|
616
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputComponent, deps:
|
|
617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputComponent, isStandalone: true, selector: "ds-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, withAddon: { classPropertyName: "withAddon", publicName: "withAddon", isSignal: true, isRequired: false, transformFunction: null }, withAddonRight: { classPropertyName: "withAddonRight", publicName: "withAddonRight", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enterKeyHint: { classPropertyName: "enterKeyHint", publicName: "enterKeyHint", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, passwordVisible: { classPropertyName: "passwordVisible", publicName: "passwordVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred", passwordVisible: "passwordVisibleChange" }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n @if (label()) {\n <label class=\"label\" [attr.for]=\"uid\">\n {{ label() }}\n @if (required()) {\n <span class=\"req\" aria-hidden=\"true\">*</span>\n } @else if (optional()) {\n <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\n }\n </label>\n }\n <div class=\"control\">\n <span class=\"addon-slot prefix\"><ng-content select=\"[dsInputPrefix]\"></ng-content></span>\n <input\n [id]=\"uid\"\n [type]=\"effectiveType()\"\n [(ngModel)]=\"value\"\n [attr.name]=\"name()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.autofocus]=\"autofocus() ? '' : null\"\n [attr.placeholder]=\"placeholder() || null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-describedby]=\"hintId()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [attr.inputmode]=\"inputMode()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (blur)=\"blurred.emit()\"\n />\n @if (canClear() && value() && !disabled()) {\n <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\" aria-label=\"Clear input\"></button>\n }\n @if (showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"password-toggle\"\n tabindex=\"-1\"\n [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n (click)=\"togglePassword()\"\n >\n <ds-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" [size]=\"16\" />\n </button>\n }\n <span class=\"addon-slot suffix\"><ng-content select=\"[dsInputSuffix]\"></ng-content></span>\n </div>\n @if (hint()) {\n <span class=\"hint\" [id]=\"hintId()\" [attr.role]=\"invalid() ? 'alert' : null\">{{ hint() }}</span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_input-bg: var(--ds-input-bg, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-fg: var(--ds-input-fg, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-pad-y: var(--ds-input-pad-y, var(--field-pad-y));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--focus-field));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-bg-error: var(--ds-input-bg-error, var(--error-subtitle));--_input-border-success: var(--ds-input-border-success, var(--success));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-label-color: var(--ds-input-label-color, var(--text-secondary));--_input-label-fs: var(--ds-input-label-fs, var(--font-size-xs));--_input-label-fw: var(--ds-input-label-fw, var(--font-weight-bold));--_input-hint-color: var(--ds-input-hint-color, var(--text-tertiary));--_input-hint-fs: var(--ds-input-hint-fs, var(--font-size-xs));--_input-fs: var(--ds-input-fs, var(--font-size-s));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--_input-label-fw) var(--_input-label-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-label-color);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:center;gap:var(--space-2);background:var(--_input-bg);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:var(--hit-cozy);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control input{flex:1;min-width:0;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--_input-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-fg)}.field .control input::placeholder{color:var(--_input-placeholder)}.field .control input[type=search]::-webkit-search-cancel-button,.field .control input[type=search]::-webkit-search-decoration{display:none;appearance:none;-webkit-appearance:none}.field .control .clear-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md);padding:0;border:0;background-color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:background-color var(--duration-fast) var(--ease-standard);-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat;mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat}.field .control .clear-btn:hover{background-color:var(--text-primary)}.field .control .clear-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.field .control .password-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:color var(--duration-fast) var(--ease-standard)}.field .control .password-toggle:hover{color:var(--text-primary)}.field .control .password-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--_input-hint-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-hint-color);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled input{color:var(--text-disabled)}.field.read-only .control{background:var(--surface-secondary)}.field.read-only .control input{cursor:default}.field.error .control{background:var(--_input-bg-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--focus-field-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{height:var(--hit-min);padding:0 var(--space-2)}.field.lg .control{height:var(--field-h-lg)}.field .addon-slot{display:inline-flex;align-items:center;align-self:stretch;color:var(--text-tertiary);flex-shrink:0}.field .addon-slot:empty{display:none}.field ::ng-deep .addon{display:inline-flex;align-items:center;padding:0 var(--space-3);margin:calc(var(--field-affix-overlap) * -1);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);align-self:stretch;border-right:var(--border-width-default) solid var(--border-divider)}.field ::ng-deep .addon.right{border-right:0;border-left:var(--border-width-default) solid var(--border-divider)}.field.with-addon .control{padding-left:0}.field.with-addon-right .control{padding-right:0}.field.with-addon ::ng-deep .addon{border-top-left-radius:var(--_input-radius);border-bottom-left-radius:var(--_input-radius)}.field.with-addon-right ::ng-deep .addon.right{border-top-right-radius:var(--_input-radius);border-bottom-right-radius:var(--_input-radius)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
713
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
714
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputComponent, isStandalone: true, selector: "ds-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, withAddon: { classPropertyName: "withAddon", publicName: "withAddon", isSignal: true, isRequired: false, transformFunction: null }, withAddonRight: { classPropertyName: "withAddonRight", publicName: "withAddonRight", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enterKeyHint: { classPropertyName: "enterKeyHint", publicName: "enterKeyHint", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, passwordVisible: { classPropertyName: "passwordVisible", publicName: "passwordVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred", passwordVisible: "passwordVisibleChange" }, providers: [
|
|
715
|
+
{
|
|
716
|
+
provide: NG_VALUE_ACCESSOR,
|
|
717
|
+
useExisting: forwardRef(() => InputComponent),
|
|
718
|
+
multi: true,
|
|
719
|
+
},
|
|
720
|
+
], usesInheritance: true, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n @if (label()) {\n <label\n class=\"label\"\n [attr.for]=\"uid\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </label>\n }\n\n <div class=\"control\">\n <span class=\"addon-slot prefix\">\n <ng-content select=\"[dsInputPrefix]\"></ng-content>\n </span>\n\n <input\n [id]=\"uid\"\n [type]=\"effectiveType()\"\n [attr.name]=\"name()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.autofocus]=\"autofocus() ? '' : null\"\n [attr.placeholder]=\"placeholder() || null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-describedby]=\"hintId()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [attr.inputmode]=\"inputMode()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n [(ngModel)]=\"value\"\n (blur)=\"blurred.emit(); markTouched()\"\n />\n\n @if (canClear() && value() && !isDisabled()) {\n <button\n type=\"button\"\n class=\"clear-btn\"\n aria-label=\"Clear input\"\n (click)=\"clear()\"\n >\n </button>\n }\n\n @if (showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"password-toggle\"\n tabindex=\"-1\"\n [attr.aria-label]=\"\n passwordVisible() ? 'Hide password' : 'Show password'\n \"\n (click)=\"togglePassword()\"\n >\n <ds-icon\n [name]=\"passwordVisible() ? 'eye-off' : 'eye'\"\n [size]=\"16\"\n />\n </button>\n }\n\n <span class=\"addon-slot suffix\">\n <ng-content select=\"[dsInputSuffix]\"></ng-content>\n </span>\n </div>\n\n @if (hint()) {\n <span\n class=\"hint\"\n [id]=\"hintId()\"\n [attr.role]=\"invalid() ? 'alert' : null\"\n >\n {{ hint() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_input-bg-color: var(--ds-input-bg-color, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-text-color: var(--ds-input-text-color, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-pad-y: var(--ds-input-pad-y, var(--field-pad-y));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--ds-field-focus-shadow));--_input-focus-shadow-error: var(--ds-input-focus-shadow-error, var(--ds-field-focus-shadow-error));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-bg-color-error: var(--ds-input-bg-color-error, var(--error-subtitle));--_input-border-success: var(--ds-input-border-success, var(--success));--_input-bg-color-disabled: var(--ds-input-bg-color-disabled, var(--surface-disabled));--_input-label-color: var(--ds-input-label-color, var(--text-secondary));--_input-label-fs: var(--ds-input-label-fs, var(--font-size-xs));--_input-label-fw: var(--ds-input-label-fw, var(--font-weight-bold));--_input-hint-color: var(--ds-input-hint-color, var(--text-tertiary));--_input-hint-fs: var(--ds-input-hint-fs, var(--font-size-xs));--_input-fs: var(--ds-input-fs, var(--font-size-s));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--_input-label-fw) var(--_input-label-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-label-color);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:center;gap:var(--space-2);background-color:var(--_input-bg-color);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:var(--hit-cozy);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control input{flex:1;min-width:0;appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--_input-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-text-color)}.field .control input::placeholder{color:var(--_input-placeholder)}.field .control input[type=search]::-webkit-search-cancel-button,.field .control input[type=search]::-webkit-search-decoration{display:none;appearance:none}.field .control .clear-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md);padding:0;border:0;background-color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:background-color var(--duration-fast) var(--ease-standard);-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat;mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat}.field .control .clear-btn:hover{background-color:var(--text-primary)}.field .control .clear-btn:focus-visible{outline:none;box-shadow:var(--ds-control-focus-shadow);border-radius:var(--radius-sm)}.field .control .password-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:color var(--duration-fast) var(--ease-standard)}.field .control .password-toggle:hover{color:var(--text-primary)}.field .control .password-toggle:focus-visible{outline:none;box-shadow:var(--ds-control-focus-shadow);border-radius:var(--radius-sm)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--_input-hint-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-hint-color);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background-color:var(--_input-bg-color-disabled);border-color:var(--border-disabled)}.field.disabled input{color:var(--text-disabled)}.field.read-only .control{background:var(--surface-secondary)}.field.read-only .control input{cursor:default}.field.error .control{background-color:var(--_input-bg-color-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--_input-focus-shadow-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{height:var(--hit-min);padding:0 var(--space-2)}.field.lg .control{height:var(--field-h-lg)}.field .addon-slot{display:inline-flex;align-items:center;align-self:stretch;color:var(--text-tertiary);flex-shrink:0}.field .addon-slot:empty{display:none}.field ::ng-deep .addon{display:inline-flex;align-items:center;padding:0 var(--space-3);margin:calc(var(--field-affix-overlap) * -1);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);align-self:stretch;border-right:var(--border-width-default) solid var(--border-divider)}.field ::ng-deep .addon.right{border-right:0;border-left:var(--border-width-default) solid var(--border-divider)}.field.with-addon .control{padding-left:0}.field.with-addon-right .control{padding-right:0}.field.with-addon ::ng-deep .addon{border-top-left-radius:var(--_input-radius);border-bottom-left-radius:var(--_input-radius)}.field.with-addon-right ::ng-deep .addon.right{border-top-right-radius:var(--_input-radius);border-bottom-right-radius:var(--_input-radius)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
618
721
|
}
|
|
619
722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputComponent, decorators: [{
|
|
620
723
|
type: Component,
|
|
621
|
-
args: [{ selector: 'ds-input', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated,
|
|
724
|
+
args: [{ selector: 'ds-input', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, providers: [
|
|
725
|
+
{
|
|
726
|
+
provide: NG_VALUE_ACCESSOR,
|
|
727
|
+
useExisting: forwardRef(() => InputComponent),
|
|
728
|
+
multi: true,
|
|
729
|
+
},
|
|
730
|
+
], template: "<div [class]=\"wrapperClasses()\">\n @if (label()) {\n <label\n class=\"label\"\n [attr.for]=\"uid\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </label>\n }\n\n <div class=\"control\">\n <span class=\"addon-slot prefix\">\n <ng-content select=\"[dsInputPrefix]\"></ng-content>\n </span>\n\n <input\n [id]=\"uid\"\n [type]=\"effectiveType()\"\n [attr.name]=\"name()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.autofocus]=\"autofocus() ? '' : null\"\n [attr.placeholder]=\"placeholder() || null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-describedby]=\"hintId()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [attr.inputmode]=\"inputMode()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n [(ngModel)]=\"value\"\n (blur)=\"blurred.emit(); markTouched()\"\n />\n\n @if (canClear() && value() && !isDisabled()) {\n <button\n type=\"button\"\n class=\"clear-btn\"\n aria-label=\"Clear input\"\n (click)=\"clear()\"\n >\n </button>\n }\n\n @if (showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"password-toggle\"\n tabindex=\"-1\"\n [attr.aria-label]=\"\n passwordVisible() ? 'Hide password' : 'Show password'\n \"\n (click)=\"togglePassword()\"\n >\n <ds-icon\n [name]=\"passwordVisible() ? 'eye-off' : 'eye'\"\n [size]=\"16\"\n />\n </button>\n }\n\n <span class=\"addon-slot suffix\">\n <ng-content select=\"[dsInputSuffix]\"></ng-content>\n </span>\n </div>\n\n @if (hint()) {\n <span\n class=\"hint\"\n [id]=\"hintId()\"\n [attr.role]=\"invalid() ? 'alert' : null\"\n >\n {{ hint() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_input-bg-color: var(--ds-input-bg-color, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-text-color: var(--ds-input-text-color, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-pad-y: var(--ds-input-pad-y, var(--field-pad-y));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--ds-field-focus-shadow));--_input-focus-shadow-error: var(--ds-input-focus-shadow-error, var(--ds-field-focus-shadow-error));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-bg-color-error: var(--ds-input-bg-color-error, var(--error-subtitle));--_input-border-success: var(--ds-input-border-success, var(--success));--_input-bg-color-disabled: var(--ds-input-bg-color-disabled, var(--surface-disabled));--_input-label-color: var(--ds-input-label-color, var(--text-secondary));--_input-label-fs: var(--ds-input-label-fs, var(--font-size-xs));--_input-label-fw: var(--ds-input-label-fw, var(--font-weight-bold));--_input-hint-color: var(--ds-input-hint-color, var(--text-tertiary));--_input-hint-fs: var(--ds-input-hint-fs, var(--font-size-xs));--_input-fs: var(--ds-input-fs, var(--font-size-s));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--_input-label-fw) var(--_input-label-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-label-color);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:center;gap:var(--space-2);background-color:var(--_input-bg-color);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:var(--hit-cozy);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control input{flex:1;min-width:0;appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--_input-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-text-color)}.field .control input::placeholder{color:var(--_input-placeholder)}.field .control input[type=search]::-webkit-search-cancel-button,.field .control input[type=search]::-webkit-search-decoration{display:none;appearance:none}.field .control .clear-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md);padding:0;border:0;background-color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:background-color var(--duration-fast) var(--ease-standard);-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat;mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat}.field .control .clear-btn:hover{background-color:var(--text-primary)}.field .control .clear-btn:focus-visible{outline:none;box-shadow:var(--ds-control-focus-shadow);border-radius:var(--radius-sm)}.field .control .password-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:color var(--duration-fast) var(--ease-standard)}.field .control .password-toggle:hover{color:var(--text-primary)}.field .control .password-toggle:focus-visible{outline:none;box-shadow:var(--ds-control-focus-shadow);border-radius:var(--radius-sm)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--_input-hint-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-hint-color);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background-color:var(--_input-bg-color-disabled);border-color:var(--border-disabled)}.field.disabled input{color:var(--text-disabled)}.field.read-only .control{background:var(--surface-secondary)}.field.read-only .control input{cursor:default}.field.error .control{background-color:var(--_input-bg-color-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--_input-focus-shadow-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{height:var(--hit-min);padding:0 var(--space-2)}.field.lg .control{height:var(--field-h-lg)}.field .addon-slot{display:inline-flex;align-items:center;align-self:stretch;color:var(--text-tertiary);flex-shrink:0}.field .addon-slot:empty{display:none}.field ::ng-deep .addon{display:inline-flex;align-items:center;padding:0 var(--space-3);margin:calc(var(--field-affix-overlap) * -1);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);align-self:stretch;border-right:var(--border-width-default) solid var(--border-divider)}.field ::ng-deep .addon.right{border-right:0;border-left:var(--border-width-default) solid var(--border-divider)}.field.with-addon .control{padding-left:0}.field.with-addon-right .control{padding-right:0}.field.with-addon ::ng-deep .addon{border-top-left-radius:var(--_input-radius);border-bottom-left-radius:var(--_input-radius)}.field.with-addon-right ::ng-deep .addon.right{border-top-right-radius:var(--_input-radius);border-bottom-right-radius:var(--_input-radius)}\n"] }]
|
|
622
731
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], withAddon: [{ type: i0.Input, args: [{ isSignal: true, alias: "withAddon", required: false }] }], withAddonRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "withAddonRight", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], enterKeyHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterKeyHint", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], passwordVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordVisible", required: false }] }, { type: i0.Output, args: ["passwordVisibleChange"] }] } });
|
|
623
732
|
|
|
624
733
|
class NumberStepperComponent {
|
|
@@ -635,18 +744,21 @@ class NumberStepperComponent {
|
|
|
635
744
|
}, ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
|
|
636
745
|
stepperClass = computed(() => {
|
|
637
746
|
const parts = ['stepper', `size-${this.size()}`];
|
|
638
|
-
if (this.disabled())
|
|
747
|
+
if (this.disabled()) {
|
|
639
748
|
parts.push('disabled');
|
|
749
|
+
}
|
|
640
750
|
return parts.join(' ');
|
|
641
751
|
}, ...(ngDevMode ? [{ debugName: "stepperClass" }] : /* istanbul ignore next */ []));
|
|
642
752
|
inc() {
|
|
643
|
-
if (this.atMax() || this.disabled())
|
|
753
|
+
if (this.atMax() || this.disabled()) {
|
|
644
754
|
return;
|
|
755
|
+
}
|
|
645
756
|
this.value.set(this.value() + this.step());
|
|
646
757
|
}
|
|
647
758
|
dec() {
|
|
648
|
-
if (this.atMin() || this.disabled())
|
|
759
|
+
if (this.atMin() || this.disabled()) {
|
|
649
760
|
return;
|
|
761
|
+
}
|
|
650
762
|
this.value.set(this.value() - this.step());
|
|
651
763
|
}
|
|
652
764
|
setRaw(raw) {
|
|
@@ -654,20 +766,21 @@ class NumberStepperComponent {
|
|
|
654
766
|
const number = Number.isNaN(parsed) ? 0 : parsed;
|
|
655
767
|
let clamped = Math.max(this.min(), number);
|
|
656
768
|
const max = this.max();
|
|
657
|
-
if (max != null)
|
|
769
|
+
if (max != null) {
|
|
658
770
|
clamped = Math.min(max, clamped);
|
|
771
|
+
}
|
|
659
772
|
this.value.set(clamped);
|
|
660
773
|
}
|
|
661
774
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NumberStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NumberStepperComponent, isStandalone: true, selector: "ds-number-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div [class]=\"stepperClass()\">\n <button\n type=\"button\"\n class=\"step minus\"\n
|
|
775
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NumberStepperComponent, isStandalone: true, selector: "ds-number-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div [class]=\"stepperClass()\">\n <button\n type=\"button\"\n class=\"step minus\"\n [disabled]=\"atMin() || disabled()\"\n (click)=\"dec()\"\n >\n \u2212\n </button>\n\n <input\n type=\"number\"\n class=\"qty\"\n [min]=\"min()\"\n [max]=\"max() ?? undefined\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (input)=\"setRaw($any($event.target).value)\"\n />\n\n <button\n type=\"button\"\n class=\"step plus\"\n [disabled]=\"atMax() || disabled()\"\n (click)=\"inc()\"\n >\n +\n </button>\n</div>\n", styles: [":host{--_number-stepper-focus-shadow: var(--ds-number-stepper-focus-shadow, var(--ds-field-focus-shadow));display:inline-flex}.stepper{display:flex;align-items:stretch;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}.stepper:focus-within{border-color:var(--primary);box-shadow:var(--_number-stepper-focus-shadow)}.stepper.size-sm{height:var(--hit-min)}.stepper.size-sm .step{width:var(--hit-min)}.stepper.size-sm .qty{width:calc(var(--hit-min) * 1.25)}.stepper.size-md{height:var(--hit-cozy)}.stepper.size-md .step{width:var(--hit-cozy)}.stepper.size-md .qty{width:calc(var(--hit-cozy) * 1.25)}.stepper.size-lg{height:var(--hit-comfy)}.stepper.size-lg .step{width:var(--hit-comfy)}.stepper.size-lg .qty{width:calc(var(--hit-comfy) * 1.25)}.stepper.disabled{background:var(--surface-disabled);border-color:var(--border-disabled)}.stepper.disabled:focus-within{border-color:var(--border-disabled);box-shadow:none}.step{flex-shrink:0;border:0;background:transparent;color:var(--text-primary);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color var(--duration-fast) var(--ease-standard)}.step:hover:not(:disabled){background:var(--surface-secondary)}.step:active:not(:disabled){background:var(--primary-muted)}.step:disabled{color:var(--text-disabled);cursor:not-allowed}.step.minus{border-right:var(--border-width-default) solid var(--border-default)}.step.plus{border-left:var(--border-width-default) solid var(--border-default)}.qty{flex:1;min-width:0;border:0;background:transparent;text-align:center;font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);outline:0;padding:0;appearance:textfield}.qty:disabled{color:var(--text-disabled)}.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
663
776
|
}
|
|
664
777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NumberStepperComponent, decorators: [{
|
|
665
778
|
type: Component,
|
|
666
|
-
args: [{ selector: 'ds-number-stepper', standalone: true, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"stepperClass()\">\n <button\n type=\"button\"\n class=\"step minus\"\n
|
|
779
|
+
args: [{ selector: 'ds-number-stepper', standalone: true, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"stepperClass()\">\n <button\n type=\"button\"\n class=\"step minus\"\n [disabled]=\"atMin() || disabled()\"\n (click)=\"dec()\"\n >\n \u2212\n </button>\n\n <input\n type=\"number\"\n class=\"qty\"\n [min]=\"min()\"\n [max]=\"max() ?? undefined\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (input)=\"setRaw($any($event.target).value)\"\n />\n\n <button\n type=\"button\"\n class=\"step plus\"\n [disabled]=\"atMax() || disabled()\"\n (click)=\"inc()\"\n >\n +\n </button>\n</div>\n", styles: [":host{--_number-stepper-focus-shadow: var(--ds-number-stepper-focus-shadow, var(--ds-field-focus-shadow));display:inline-flex}.stepper{display:flex;align-items:stretch;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}.stepper:focus-within{border-color:var(--primary);box-shadow:var(--_number-stepper-focus-shadow)}.stepper.size-sm{height:var(--hit-min)}.stepper.size-sm .step{width:var(--hit-min)}.stepper.size-sm .qty{width:calc(var(--hit-min) * 1.25)}.stepper.size-md{height:var(--hit-cozy)}.stepper.size-md .step{width:var(--hit-cozy)}.stepper.size-md .qty{width:calc(var(--hit-cozy) * 1.25)}.stepper.size-lg{height:var(--hit-comfy)}.stepper.size-lg .step{width:var(--hit-comfy)}.stepper.size-lg .qty{width:calc(var(--hit-comfy) * 1.25)}.stepper.disabled{background:var(--surface-disabled);border-color:var(--border-disabled)}.stepper.disabled:focus-within{border-color:var(--border-disabled);box-shadow:none}.step{flex-shrink:0;border:0;background:transparent;color:var(--text-primary);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color var(--duration-fast) var(--ease-standard)}.step:hover:not(:disabled){background:var(--surface-secondary)}.step:active:not(:disabled){background:var(--primary-muted)}.step:disabled{color:var(--text-disabled);cursor:not-allowed}.step.minus{border-right:var(--border-width-default) solid var(--border-default)}.step.plus{border-left:var(--border-width-default) solid var(--border-default)}.qty{flex:1;min-width:0;border:0;background:transparent;text-align:center;font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);outline:0;padding:0;appearance:textfield}.qty:disabled{color:var(--text-disabled)}.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{appearance:none;margin:0}\n"] }]
|
|
667
780
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
668
781
|
|
|
669
782
|
let nextId$8 = 0;
|
|
670
|
-
class TextareaComponent {
|
|
783
|
+
class TextareaComponent extends DsControlValueAccessor {
|
|
671
784
|
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
672
785
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
673
786
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -686,32 +799,51 @@ class TextareaComponent {
|
|
|
686
799
|
/** Accessible name when no visible `label` is provided. */
|
|
687
800
|
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
688
801
|
uid = `ds-textarea-${++nextId$8}`;
|
|
689
|
-
hintId = computed(() =>
|
|
802
|
+
hintId = computed(() => this.hint() ? `${this.uid}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
690
803
|
resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
804
|
+
/** Effective disabled — own `disabled` input OR the reactive-forms state. */
|
|
805
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
691
806
|
wrapperClasses = computed(() => {
|
|
692
807
|
const parts = ['field'];
|
|
693
|
-
if (this.size() === 'sm')
|
|
808
|
+
if (this.size() === 'sm') {
|
|
694
809
|
parts.push('sm');
|
|
695
|
-
|
|
810
|
+
}
|
|
811
|
+
if (this.size() === 'lg') {
|
|
696
812
|
parts.push('lg');
|
|
697
|
-
|
|
813
|
+
}
|
|
814
|
+
if (this.invalid()) {
|
|
698
815
|
parts.push('error');
|
|
699
|
-
|
|
816
|
+
}
|
|
817
|
+
if (this.isDisabled()) {
|
|
700
818
|
parts.push('disabled');
|
|
701
|
-
|
|
819
|
+
}
|
|
820
|
+
if (this.autosize()) {
|
|
702
821
|
parts.push('autosize');
|
|
822
|
+
}
|
|
703
823
|
return parts.join(' ');
|
|
704
824
|
}, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
|
|
705
825
|
autosizeMinHeight = computed(() => this.autosize() && this.minRows() ? `${this.minRows()}lh` : null, ...(ngDevMode ? [{ debugName: "autosizeMinHeight" }] : /* istanbul ignore next */ []));
|
|
706
826
|
autosizeMaxHeight = computed(() => this.autosize() && this.maxRows() ? `${this.maxRows()}lh` : null, ...(ngDevMode ? [{ debugName: "autosizeMaxHeight" }] : /* istanbul ignore next */ []));
|
|
707
827
|
// Autosize grows with content, so a manual resize handle conflicts — force none.
|
|
708
828
|
effectiveResize = computed(() => this.autosize() ? 'none' : this.resize(), ...(ngDevMode ? [{ debugName: "effectiveResize" }] : /* istanbul ignore next */ []));
|
|
709
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps:
|
|
710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "ds-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autosize: { classPropertyName: "autosize", publicName: "autosize", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" },
|
|
829
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "ds-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autosize: { classPropertyName: "autosize", publicName: "autosize", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
831
|
+
{
|
|
832
|
+
provide: NG_VALUE_ACCESSOR,
|
|
833
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
834
|
+
multi: true,
|
|
835
|
+
},
|
|
836
|
+
], usesInheritance: true, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n @if (label()) {\n <label\n class=\"label\"\n [attr.for]=\"uid\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </label>\n }\n\n <div class=\"control\">\n <textarea\n [id]=\"uid\"\n [rows]=\"rows()\"\n [attr.name]=\"name()\"\n [attr.placeholder]=\"placeholder() || null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-describedby]=\"hintId()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [style.resize]=\"effectiveResize()\"\n [style.min-height]=\"autosizeMinHeight()\"\n [style.max-height]=\"autosizeMaxHeight()\"\n [style.overflow-y]=\"autosize() && maxRows() ? 'auto' : null\"\n [(ngModel)]=\"value\"\n (blur)=\"markTouched()\"\n >\n </textarea>\n </div>\n\n @if (hint()) {\n <span\n class=\"hint\"\n [id]=\"hintId()\"\n [attr.role]=\"invalid() ? 'alert' : null\"\n >\n {{ hint() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_input-bg-color: var(--ds-input-bg-color, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-y: var(--ds-input-pad-y, var(--space-3));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-text-color: var(--ds-input-text-color, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--ds-field-focus-shadow));--_input-focus-shadow-error: var(--ds-input-focus-shadow-error, var(--ds-field-focus-shadow-error));--_input-bg-color-disabled: var(--ds-input-bg-color-disabled, var(--surface-disabled));--_input-bg-color-error: var(--ds-input-bg-color-error, var(--error-subtitle));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-border-success: var(--ds-input-border-success, var(--success));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:stretch;gap:var(--space-2);background-color:var(--_input-bg-color);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:auto;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control textarea{flex:1;min-width:0;appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_input-text-color);min-height:var(--field-textarea-rows-min, 60px)}.field .control textarea::placeholder{color:var(--_input-placeholder)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background-color:var(--_input-bg-color-disabled);border-color:var(--border-disabled)}.field.disabled textarea{color:var(--text-disabled)}.field.error .control{background-color:var(--_input-bg-color-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--_input-focus-shadow-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{padding:var(--space-2) var(--space-2)}.field.lg .control{padding:var(--space-4) var(--space-3)}.field.autosize .control textarea{field-sizing:content;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
711
837
|
}
|
|
712
838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
713
839
|
type: Component,
|
|
714
|
-
args: [{ selector: 'ds-textarea', standalone: true, imports: [FormsModule], encapsulation: ViewEncapsulation.Emulated,
|
|
840
|
+
args: [{ selector: 'ds-textarea', standalone: true, imports: [FormsModule], encapsulation: ViewEncapsulation.Emulated, providers: [
|
|
841
|
+
{
|
|
842
|
+
provide: NG_VALUE_ACCESSOR,
|
|
843
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
844
|
+
multi: true,
|
|
845
|
+
},
|
|
846
|
+
], template: "<div [class]=\"wrapperClasses()\">\n @if (label()) {\n <label\n class=\"label\"\n [attr.for]=\"uid\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </label>\n }\n\n <div class=\"control\">\n <textarea\n [id]=\"uid\"\n [rows]=\"rows()\"\n [attr.name]=\"name()\"\n [attr.placeholder]=\"placeholder() || null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-describedby]=\"hintId()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [style.resize]=\"effectiveResize()\"\n [style.min-height]=\"autosizeMinHeight()\"\n [style.max-height]=\"autosizeMaxHeight()\"\n [style.overflow-y]=\"autosize() && maxRows() ? 'auto' : null\"\n [(ngModel)]=\"value\"\n (blur)=\"markTouched()\"\n >\n </textarea>\n </div>\n\n @if (hint()) {\n <span\n class=\"hint\"\n [id]=\"hintId()\"\n [attr.role]=\"invalid() ? 'alert' : null\"\n >\n {{ hint() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_input-bg-color: var(--ds-input-bg-color, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-y: var(--ds-input-pad-y, var(--space-3));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-text-color: var(--ds-input-text-color, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--ds-field-focus-shadow));--_input-focus-shadow-error: var(--ds-input-focus-shadow-error, var(--ds-field-focus-shadow-error));--_input-bg-color-disabled: var(--ds-input-bg-color-disabled, var(--surface-disabled));--_input-bg-color-error: var(--ds-input-bg-color-error, var(--error-subtitle));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-border-success: var(--ds-input-border-success, var(--success));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:stretch;gap:var(--space-2);background-color:var(--_input-bg-color);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:auto;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control textarea{flex:1;min-width:0;appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_input-text-color);min-height:var(--field-textarea-rows-min, 60px)}.field .control textarea::placeholder{color:var(--_input-placeholder)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background-color:var(--_input-bg-color-disabled);border-color:var(--border-disabled)}.field.disabled textarea{color:var(--text-disabled)}.field.error .control{background-color:var(--_input-bg-color-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--_input-focus-shadow-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{padding:var(--space-2) var(--space-2)}.field.lg .control{padding:var(--space-4) var(--space-3)}.field.autosize .control textarea{field-sizing:content;overflow:hidden}\n"] }]
|
|
715
847
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autosize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosize", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
716
848
|
|
|
717
849
|
class SearchComponent {
|
|
@@ -735,11 +867,11 @@ class SearchComponent {
|
|
|
735
867
|
this.inputEl()?.nativeElement.focus();
|
|
736
868
|
}
|
|
737
869
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SearchComponent, isStandalone: true, selector: "ds-search", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", submitted: "submitted" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search\">\n @if (showIcon()) {\n <ds-icon
|
|
870
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SearchComponent, isStandalone: true, selector: "ds-search", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", submitted: "submitted" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search\">\n @if (showIcon()) {\n <ds-icon\n name=\"search\"\n [size]=\"16\"\n >\n </ds-icon>\n }\n\n <input\n #searchInput\n class=\"input\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel() || placeholder() || null\"\n [(ngModel)]=\"value\"\n (keydown.enter)=\"onSubmit()\"\n />\n\n @if (clearable() && value()) {\n <button\n type=\"button\"\n class=\"search-clear\"\n aria-label=\"Clear search\"\n (click)=\"clear()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n }\n\n @if (shortcut()) {\n <kbd class=\"kbd\">\n {{ shortcut() }}\n </kbd>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_search-height: var(--ds-search-height, var(--search-h));--_search-bg-color: var(--ds-search-bg-color, var(--surface-default));--_search-border: var(--ds-search-border, var(--border-default));--_search-radius: var(--ds-search-radius, var(--radius-md));--_search-border-hover: var(--ds-search-border-hover, var(--border-default));--_search-bg-color-focus: var(--ds-search-bg-color-focus, var(--surface-default));--_search-border-focus: var(--ds-search-border-focus, var(--primary));--_search-focus-shadow: var(--ds-search-focus-shadow, var(--ds-field-focus-shadow));--_search-text-color: var(--ds-search-text-color, var(--text-primary));--_search-placeholder: var(--ds-search-placeholder, var(--text-tertiary));display:block}.search{display:flex;align-items:center;gap:var(--space-2);background-color:var(--_search-bg-color);border:var(--border-width-default) solid var(--_search-border);border-radius:var(--_search-radius);padding:0 var(--space-3);height:var(--_search-height);width:100%;max-width:var(--search-maxw);transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search:hover{border-color:var(--_search-border-hover)}.search:focus-within{background-color:var(--_search-bg-color-focus);border-color:var(--_search-border-focus);box-shadow:var(--_search-focus-shadow)}.search .icon{width:var(--icon-md);height:var(--icon-md);color:var(--icon-default)}.search .input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_search-text-color)}.search .input::placeholder{color:var(--_search-placeholder)}.search .search-clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px;border:0;background:transparent;border-radius:var(--radius-pill, 999px);color:var(--icon-default);cursor:pointer;opacity:.7;transition:opacity var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search .search-clear .icon{width:14px;height:14px}.search .search-clear:hover{opacity:1;background:var(--surface-muted, rgba(0, 0, 0, .06))}.search .kbd{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-flat) var(--font-mono);padding:var(--space-px) var(--space-1-5);background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-sm);color:var(--text-tertiary)}.search.sm{--_search-height: var(--ds-search-height, var(--hit-min))}.search.md{--_search-height: var(--ds-search-height, var(--hit-cozy))}.search.lg{--_search-height: var(--ds-search-height, var(--field-h-lg))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
739
871
|
}
|
|
740
872
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SearchComponent, decorators: [{
|
|
741
873
|
type: Component,
|
|
742
|
-
args: [{ selector: 'ds-search', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"search\">\n @if (showIcon()) {\n <ds-icon
|
|
874
|
+
args: [{ selector: 'ds-search', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"search\">\n @if (showIcon()) {\n <ds-icon\n name=\"search\"\n [size]=\"16\"\n >\n </ds-icon>\n }\n\n <input\n #searchInput\n class=\"input\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel() || placeholder() || null\"\n [(ngModel)]=\"value\"\n (keydown.enter)=\"onSubmit()\"\n />\n\n @if (clearable() && value()) {\n <button\n type=\"button\"\n class=\"search-clear\"\n aria-label=\"Clear search\"\n (click)=\"clear()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n }\n\n @if (shortcut()) {\n <kbd class=\"kbd\">\n {{ shortcut() }}\n </kbd>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_search-height: var(--ds-search-height, var(--search-h));--_search-bg-color: var(--ds-search-bg-color, var(--surface-default));--_search-border: var(--ds-search-border, var(--border-default));--_search-radius: var(--ds-search-radius, var(--radius-md));--_search-border-hover: var(--ds-search-border-hover, var(--border-default));--_search-bg-color-focus: var(--ds-search-bg-color-focus, var(--surface-default));--_search-border-focus: var(--ds-search-border-focus, var(--primary));--_search-focus-shadow: var(--ds-search-focus-shadow, var(--ds-field-focus-shadow));--_search-text-color: var(--ds-search-text-color, var(--text-primary));--_search-placeholder: var(--ds-search-placeholder, var(--text-tertiary));display:block}.search{display:flex;align-items:center;gap:var(--space-2);background-color:var(--_search-bg-color);border:var(--border-width-default) solid var(--_search-border);border-radius:var(--_search-radius);padding:0 var(--space-3);height:var(--_search-height);width:100%;max-width:var(--search-maxw);transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search:hover{border-color:var(--_search-border-hover)}.search:focus-within{background-color:var(--_search-bg-color-focus);border-color:var(--_search-border-focus);box-shadow:var(--_search-focus-shadow)}.search .icon{width:var(--icon-md);height:var(--icon-md);color:var(--icon-default)}.search .input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_search-text-color)}.search .input::placeholder{color:var(--_search-placeholder)}.search .search-clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px;border:0;background:transparent;border-radius:var(--radius-pill, 999px);color:var(--icon-default);cursor:pointer;opacity:.7;transition:opacity var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search .search-clear .icon{width:14px;height:14px}.search .search-clear:hover{opacity:1;background:var(--surface-muted, rgba(0, 0, 0, .06))}.search .kbd{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-flat) var(--font-mono);padding:var(--space-px) var(--space-1-5);background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-sm);color:var(--text-tertiary)}.search.sm{--_search-height: var(--ds-search-height, var(--hit-min))}.search.md{--_search-height: var(--ds-search-height, var(--hit-cozy))}.search.lg{--_search-height: var(--ds-search-height, var(--field-h-lg))}\n"] }]
|
|
743
875
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], inputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
744
876
|
|
|
745
877
|
/** Showcase-only: renders the component's open/overlay surface inline in normal
|
|
@@ -756,11 +888,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
756
888
|
}], propDecorators: { staticPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "staticPreview", required: false }] }] } });
|
|
757
889
|
|
|
758
890
|
function isSelectOptionGroup(item) {
|
|
759
|
-
return 'options' in item && Array.isArray(item.options);
|
|
891
|
+
return ('options' in item && Array.isArray(item.options));
|
|
760
892
|
}
|
|
761
893
|
|
|
762
894
|
let nextId$7 = 0;
|
|
763
|
-
class SelectComponent {
|
|
895
|
+
class SelectComponent extends DsControlValueAccessor {
|
|
764
896
|
overlay = inject(Overlay);
|
|
765
897
|
vcr = inject(ViewContainerRef);
|
|
766
898
|
preview = inject(DsStaticPreview);
|
|
@@ -779,15 +911,17 @@ class SelectComponent {
|
|
|
779
911
|
uid = `ds-select-${++nextId$7}`;
|
|
780
912
|
labelId = `${this.uid}-label`;
|
|
781
913
|
listboxId = `${this.uid}-listbox`;
|
|
782
|
-
optionId(
|
|
783
|
-
return `${this.uid}-opt-${
|
|
914
|
+
optionId(flatIndex) {
|
|
915
|
+
return `${this.uid}-opt-${flatIndex}`;
|
|
784
916
|
}
|
|
785
917
|
/** Active option for `aria-activedescendant` (combobox keeps DOM focus). */
|
|
786
918
|
activeDescendant = computed(() => {
|
|
787
|
-
const
|
|
788
|
-
return this.open() &&
|
|
919
|
+
const index = this.activeIndex();
|
|
920
|
+
return this.open() && index >= 0 ? this.optionId(index) : null;
|
|
789
921
|
}, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
|
|
790
922
|
resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
923
|
+
/** Effective disabled — own `disabled` input OR the reactive-forms state. */
|
|
924
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
791
925
|
trigger = viewChild.required('trigger');
|
|
792
926
|
panelTpl = viewChild.required('panel');
|
|
793
927
|
panelContentTpl = viewChild.required('panelContent');
|
|
@@ -823,24 +957,31 @@ class SelectComponent {
|
|
|
823
957
|
hasValue = computed(() => !!this.selectedOption(), ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
824
958
|
triggerClasses = computed(() => {
|
|
825
959
|
const parts = ['dropdown'];
|
|
826
|
-
if (this.size() === 'sm')
|
|
960
|
+
if (this.size() === 'sm') {
|
|
827
961
|
parts.push('sm');
|
|
828
|
-
|
|
962
|
+
}
|
|
963
|
+
if (this.size() === 'lg') {
|
|
829
964
|
parts.push('lg');
|
|
830
|
-
|
|
965
|
+
}
|
|
966
|
+
if (this.isDisabled()) {
|
|
831
967
|
parts.push('disabled');
|
|
832
|
-
|
|
968
|
+
}
|
|
969
|
+
if (this.invalid()) {
|
|
833
970
|
parts.push('error');
|
|
834
|
-
|
|
971
|
+
}
|
|
972
|
+
if (this.open() || this.preview.staticPreview()) {
|
|
835
973
|
parts.push('open');
|
|
974
|
+
}
|
|
836
975
|
return parts.join(' ');
|
|
837
976
|
}, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
|
|
838
977
|
constructor() {
|
|
978
|
+
super();
|
|
839
979
|
effect(() => {
|
|
840
|
-
if (!this.open())
|
|
980
|
+
if (!this.open()) {
|
|
841
981
|
return;
|
|
842
|
-
|
|
843
|
-
this.
|
|
982
|
+
}
|
|
983
|
+
const index = this.flatOptions().findIndex(({ option }) => option.value === this.value());
|
|
984
|
+
this.activeIndex.set(index >= 0 ? index : this.firstEnabledIndex());
|
|
844
985
|
});
|
|
845
986
|
}
|
|
846
987
|
isOptionGroup(item) {
|
|
@@ -852,8 +993,9 @@ class SelectComponent {
|
|
|
852
993
|
return this.flatOptions().findIndex(({ option }) => option === opt);
|
|
853
994
|
}
|
|
854
995
|
toggle() {
|
|
855
|
-
if (this.
|
|
996
|
+
if (this.isDisabled() || this.preview.staticPreview()) {
|
|
856
997
|
return;
|
|
998
|
+
}
|
|
857
999
|
if (this.open()) {
|
|
858
1000
|
this.close();
|
|
859
1001
|
}
|
|
@@ -862,15 +1004,29 @@ class SelectComponent {
|
|
|
862
1004
|
}
|
|
863
1005
|
}
|
|
864
1006
|
openPanel() {
|
|
865
|
-
if (this.overlayRef)
|
|
1007
|
+
if (this.overlayRef) {
|
|
866
1008
|
return;
|
|
867
|
-
|
|
868
|
-
const
|
|
869
|
-
const
|
|
870
|
-
|
|
1009
|
+
}
|
|
1010
|
+
const triggerElement = this.trigger().nativeElement;
|
|
1011
|
+
const width = triggerElement.getBoundingClientRect().width;
|
|
1012
|
+
const positionStrategy = this.overlay
|
|
1013
|
+
.position()
|
|
1014
|
+
.flexibleConnectedTo(triggerElement)
|
|
871
1015
|
.withPositions([
|
|
872
|
-
{
|
|
873
|
-
|
|
1016
|
+
{
|
|
1017
|
+
originX: 'start',
|
|
1018
|
+
originY: 'bottom',
|
|
1019
|
+
overlayX: 'start',
|
|
1020
|
+
overlayY: 'top',
|
|
1021
|
+
offsetY: 4,
|
|
1022
|
+
},
|
|
1023
|
+
{
|
|
1024
|
+
originX: 'start',
|
|
1025
|
+
originY: 'top',
|
|
1026
|
+
overlayX: 'start',
|
|
1027
|
+
overlayY: 'bottom',
|
|
1028
|
+
offsetY: -4,
|
|
1029
|
+
},
|
|
874
1030
|
]);
|
|
875
1031
|
const cfg = {
|
|
876
1032
|
positionStrategy,
|
|
@@ -894,10 +1050,12 @@ class SelectComponent {
|
|
|
894
1050
|
this.overlayRef = null;
|
|
895
1051
|
this.open.set(false);
|
|
896
1052
|
this.activeIndex.set(-1);
|
|
1053
|
+
this.markTouched();
|
|
897
1054
|
}
|
|
898
1055
|
pick(option, groupDisabled = false) {
|
|
899
|
-
if (option.disabled || groupDisabled)
|
|
1056
|
+
if (option.disabled || groupDisabled) {
|
|
900
1057
|
return;
|
|
1058
|
+
}
|
|
901
1059
|
this.value.set(option.value);
|
|
902
1060
|
this.close();
|
|
903
1061
|
this.trigger().nativeElement.focus();
|
|
@@ -909,11 +1067,15 @@ class SelectComponent {
|
|
|
909
1067
|
return !!option.disabled || groupDisabled;
|
|
910
1068
|
}
|
|
911
1069
|
onTriggerKeydown(event) {
|
|
912
|
-
if (this.
|
|
1070
|
+
if (this.isDisabled() || this.preview.staticPreview()) {
|
|
913
1071
|
return;
|
|
1072
|
+
}
|
|
914
1073
|
const key = event.key;
|
|
915
1074
|
if (!this.open()) {
|
|
916
|
-
if (key === 'ArrowDown' ||
|
|
1075
|
+
if (key === 'ArrowDown' ||
|
|
1076
|
+
key === 'ArrowUp' ||
|
|
1077
|
+
key === 'Enter' ||
|
|
1078
|
+
key === ' ') {
|
|
917
1079
|
event.preventDefault();
|
|
918
1080
|
this.openPanel();
|
|
919
1081
|
}
|
|
@@ -936,10 +1098,11 @@ class SelectComponent {
|
|
|
936
1098
|
}
|
|
937
1099
|
if (key === 'Enter' || key === ' ') {
|
|
938
1100
|
event.preventDefault();
|
|
939
|
-
const
|
|
940
|
-
const entry = this.flatOptions()[
|
|
941
|
-
if (entry)
|
|
1101
|
+
const index = this.activeIndex();
|
|
1102
|
+
const entry = this.flatOptions()[index];
|
|
1103
|
+
if (entry) {
|
|
942
1104
|
this.pick(entry.option, entry.groupDisabled);
|
|
1105
|
+
}
|
|
943
1106
|
return;
|
|
944
1107
|
}
|
|
945
1108
|
if (key === 'Home') {
|
|
@@ -957,8 +1120,9 @@ class SelectComponent {
|
|
|
957
1120
|
}
|
|
958
1121
|
moveActive(delta) {
|
|
959
1122
|
const opts = this.flatOptions();
|
|
960
|
-
if (opts.length === 0)
|
|
1123
|
+
if (opts.length === 0) {
|
|
961
1124
|
return;
|
|
1125
|
+
}
|
|
962
1126
|
let next = this.activeIndex();
|
|
963
1127
|
for (let attempts = 0; attempts < opts.length; attempts++) {
|
|
964
1128
|
next = (next + delta + opts.length) % opts.length;
|
|
@@ -973,8 +1137,9 @@ class SelectComponent {
|
|
|
973
1137
|
const opts = this.flatOptions();
|
|
974
1138
|
for (let i = 0; i < opts.length; i++) {
|
|
975
1139
|
const candidate = opts[i];
|
|
976
|
-
if (candidate && !candidate.option.disabled && !candidate.groupDisabled)
|
|
1140
|
+
if (candidate && !candidate.option.disabled && !candidate.groupDisabled) {
|
|
977
1141
|
return i;
|
|
1142
|
+
}
|
|
978
1143
|
}
|
|
979
1144
|
return -1;
|
|
980
1145
|
}
|
|
@@ -982,17 +1147,30 @@ class SelectComponent {
|
|
|
982
1147
|
const opts = this.flatOptions();
|
|
983
1148
|
for (let i = opts.length - 1; i >= 0; i--) {
|
|
984
1149
|
const candidate = opts[i];
|
|
985
|
-
if (candidate && !candidate.option.disabled && !candidate.groupDisabled)
|
|
1150
|
+
if (candidate && !candidate.option.disabled && !candidate.groupDisabled) {
|
|
986
1151
|
return i;
|
|
1152
|
+
}
|
|
987
1153
|
}
|
|
988
1154
|
return -1;
|
|
989
1155
|
}
|
|
990
1156
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
991
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "ds-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" },
|
|
1157
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "ds-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
|
|
1158
|
+
{
|
|
1159
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1160
|
+
useExisting: forwardRef(() => SelectComponent),
|
|
1161
|
+
multi: true,
|
|
1162
|
+
},
|
|
1163
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "panelContentTpl", first: true, predicate: ["panelContent"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (label()) {\n <span\n class=\"select-label\"\n [id]=\"labelId\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </span>\n}\n\n<button\n #trigger\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [class]=\"triggerClasses()\"\n [attr.name]=\"name()\"\n [attr.aria-expanded]=\"open() || preview.staticPreview()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span\n class=\"trigger-text\"\n [class.is-placeholder]=\"!hasValue()\"\n >\n {{ displayLabel() }}\n </span>\n\n <span class=\"chevron\">\n <ds-icon\n name=\"chevronDown\"\n [size]=\"14\"\n />\n </span>\n</button>\n\n@if (preview.staticPreview()) {\n <div class=\"ds-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n </div>\n}\n\n<ng-template #panel>\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n</ng-template>\n\n<ng-template #panelContent>\n <div class=\"dropdown-panel\">\n <ul\n class=\"dropdown-list\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n >\n @for (item of options(); track item.label; let groupIdx = $index) {\n @if (isOptionGroup(item)) {\n <li\n class=\"optgroup\"\n role=\"group\"\n [attr.aria-label]=\"item.label\"\n >\n <span\n class=\"optgroup-label\"\n [class.is-first]=\"groupIdx === 0\"\n >\n {{ item.label }}\n </span>\n\n <ul\n class=\"optgroup-list\"\n role=\"presentation\"\n >\n @for (opt of item.options; track opt.value) {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n class=\"option\"\n [id]=\"optionId(flatIndexOf(opt))\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"\n isOptionDisabled(opt, item.disabled) ? 'true' : null\n \"\n [class.is-selected]=\"isSelected(opt)\"\n [class.is-active]=\"isActive(flatIndexOf(opt))\"\n [class.is-disabled]=\"isOptionDisabled(opt, item.disabled)\"\n [disabled]=\"isOptionDisabled(opt, item.disabled)\"\n (click)=\"pick(opt, item.disabled)\"\n (mouseenter)=\"activeIndex.set(flatIndexOf(opt))\"\n >\n <span class=\"option-label\">\n {{ opt.label }}\n </span>\n\n @if (isSelected(opt)) {\n <ds-icon\n class=\"option-check\"\n name=\"check\"\n [size]=\"14\"\n />\n }\n </button>\n </li>\n }\n </ul>\n </li>\n } @else {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n class=\"option\"\n [id]=\"optionId(flatIndexOf(item))\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.is-selected]=\"isSelected(item)\"\n [class.is-active]=\"isActive(flatIndexOf(item))\"\n [class.is-disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n (click)=\"pick(item)\"\n (mouseenter)=\"activeIndex.set(flatIndexOf(item))\"\n >\n <span class=\"option-label\">\n {{ item.label }}\n </span>\n\n @if (isSelected(item)) {\n <ds-icon\n class=\"option-check\"\n name=\"check\"\n [size]=\"14\"\n />\n }\n </button>\n </li>\n }\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_select-focus-shadow: var(--ds-select-focus-shadow, var(--ds-field-focus-shadow));--_select-focus-shadow-error: var(--ds-select-focus-shadow-error, var(--ds-field-focus-shadow-error));display:block;width:100%}.select-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.select-label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.select-label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--_select-focus-shadow)}.dropdown.open{border-color:var(--primary);box-shadow:var(--_select-focus-shadow)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--_select-focus-shadow-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
992
1164
|
}
|
|
993
1165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
994
1166
|
type: Component,
|
|
995
|
-
args: [{ selector: 'ds-select', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }],
|
|
1167
|
+
args: [{ selector: 'ds-select', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], providers: [
|
|
1168
|
+
{
|
|
1169
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1170
|
+
useExisting: forwardRef(() => SelectComponent),
|
|
1171
|
+
multi: true,
|
|
1172
|
+
},
|
|
1173
|
+
], template: "@if (label()) {\n <span\n class=\"select-label\"\n [id]=\"labelId\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </span>\n}\n\n<button\n #trigger\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [class]=\"triggerClasses()\"\n [attr.name]=\"name()\"\n [attr.aria-expanded]=\"open() || preview.staticPreview()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span\n class=\"trigger-text\"\n [class.is-placeholder]=\"!hasValue()\"\n >\n {{ displayLabel() }}\n </span>\n\n <span class=\"chevron\">\n <ds-icon\n name=\"chevronDown\"\n [size]=\"14\"\n />\n </span>\n</button>\n\n@if (preview.staticPreview()) {\n <div class=\"ds-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n </div>\n}\n\n<ng-template #panel>\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n</ng-template>\n\n<ng-template #panelContent>\n <div class=\"dropdown-panel\">\n <ul\n class=\"dropdown-list\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n >\n @for (item of options(); track item.label; let groupIdx = $index) {\n @if (isOptionGroup(item)) {\n <li\n class=\"optgroup\"\n role=\"group\"\n [attr.aria-label]=\"item.label\"\n >\n <span\n class=\"optgroup-label\"\n [class.is-first]=\"groupIdx === 0\"\n >\n {{ item.label }}\n </span>\n\n <ul\n class=\"optgroup-list\"\n role=\"presentation\"\n >\n @for (opt of item.options; track opt.value) {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n class=\"option\"\n [id]=\"optionId(flatIndexOf(opt))\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"\n isOptionDisabled(opt, item.disabled) ? 'true' : null\n \"\n [class.is-selected]=\"isSelected(opt)\"\n [class.is-active]=\"isActive(flatIndexOf(opt))\"\n [class.is-disabled]=\"isOptionDisabled(opt, item.disabled)\"\n [disabled]=\"isOptionDisabled(opt, item.disabled)\"\n (click)=\"pick(opt, item.disabled)\"\n (mouseenter)=\"activeIndex.set(flatIndexOf(opt))\"\n >\n <span class=\"option-label\">\n {{ opt.label }}\n </span>\n\n @if (isSelected(opt)) {\n <ds-icon\n class=\"option-check\"\n name=\"check\"\n [size]=\"14\"\n />\n }\n </button>\n </li>\n }\n </ul>\n </li>\n } @else {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n class=\"option\"\n [id]=\"optionId(flatIndexOf(item))\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [class.is-selected]=\"isSelected(item)\"\n [class.is-active]=\"isActive(flatIndexOf(item))\"\n [class.is-disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n (click)=\"pick(item)\"\n (mouseenter)=\"activeIndex.set(flatIndexOf(item))\"\n >\n <span class=\"option-label\">\n {{ item.label }}\n </span>\n\n @if (isSelected(item)) {\n <ds-icon\n class=\"option-check\"\n name=\"check\"\n [size]=\"14\"\n />\n }\n </button>\n </li>\n }\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_select-focus-shadow: var(--ds-select-focus-shadow, var(--ds-field-focus-shadow));--_select-focus-shadow-error: var(--ds-select-focus-shadow-error, var(--ds-field-focus-shadow-error));display:block;width:100%}.select-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.select-label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.select-label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--_select-focus-shadow)}.dropdown.open{border-color:var(--primary);box-shadow:var(--_select-focus-shadow)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--_select-focus-shadow-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"] }]
|
|
996
1174
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], panelContentTpl: [{ type: i0.ViewChild, args: ['panelContent', { isSignal: true }] }] } });
|
|
997
1175
|
|
|
998
1176
|
let nextId$6 = 0;
|
|
@@ -1034,36 +1212,44 @@ class DropdownComponent {
|
|
|
1034
1212
|
}, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
1035
1213
|
hasValue = computed(() => !!this.selectedOption(), ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
1036
1214
|
activeDescendant = computed(() => {
|
|
1037
|
-
const
|
|
1038
|
-
return this.open() &&
|
|
1215
|
+
const index = this.activeIndex();
|
|
1216
|
+
return this.open() && index >= 0 ? this.optionId(index) : null;
|
|
1039
1217
|
}, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
|
|
1040
1218
|
wrapperClasses = computed(() => {
|
|
1041
1219
|
const parts = ['dropdown'];
|
|
1042
|
-
if (this.size() === 'sm')
|
|
1220
|
+
if (this.size() === 'sm') {
|
|
1043
1221
|
parts.push('sm');
|
|
1044
|
-
|
|
1222
|
+
}
|
|
1223
|
+
if (this.size() === 'lg') {
|
|
1045
1224
|
parts.push('lg');
|
|
1046
|
-
|
|
1225
|
+
}
|
|
1226
|
+
if (this.disabled()) {
|
|
1047
1227
|
parts.push('disabled');
|
|
1048
|
-
|
|
1228
|
+
}
|
|
1229
|
+
if (this.readOnly()) {
|
|
1049
1230
|
parts.push('readonly');
|
|
1050
|
-
|
|
1231
|
+
}
|
|
1232
|
+
if (this.error()) {
|
|
1051
1233
|
parts.push('error');
|
|
1052
|
-
|
|
1234
|
+
}
|
|
1235
|
+
if (this.open() || this.preview.staticPreview()) {
|
|
1053
1236
|
parts.push('open');
|
|
1237
|
+
}
|
|
1054
1238
|
return parts.join(' ');
|
|
1055
1239
|
}, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
|
|
1056
1240
|
constructor() {
|
|
1057
1241
|
effect(() => {
|
|
1058
|
-
if (!this.open())
|
|
1242
|
+
if (!this.open()) {
|
|
1059
1243
|
return;
|
|
1060
|
-
|
|
1061
|
-
this.
|
|
1244
|
+
}
|
|
1245
|
+
const index = this.options().findIndex((o) => o.value === this.value());
|
|
1246
|
+
this.activeIndex.set(index >= 0 ? index : this.firstEnabledIndex());
|
|
1062
1247
|
});
|
|
1063
1248
|
}
|
|
1064
1249
|
toggle() {
|
|
1065
|
-
if (this.disabled() || this.readOnly() || this.preview.staticPreview())
|
|
1250
|
+
if (this.disabled() || this.readOnly() || this.preview.staticPreview()) {
|
|
1066
1251
|
return;
|
|
1252
|
+
}
|
|
1067
1253
|
if (this.open()) {
|
|
1068
1254
|
this.close();
|
|
1069
1255
|
}
|
|
@@ -1072,15 +1258,29 @@ class DropdownComponent {
|
|
|
1072
1258
|
}
|
|
1073
1259
|
}
|
|
1074
1260
|
openPanel() {
|
|
1075
|
-
if (this.overlayRef)
|
|
1261
|
+
if (this.overlayRef) {
|
|
1076
1262
|
return;
|
|
1077
|
-
|
|
1078
|
-
const
|
|
1079
|
-
const
|
|
1080
|
-
|
|
1263
|
+
}
|
|
1264
|
+
const triggerElement = this.trigger().nativeElement;
|
|
1265
|
+
const width = triggerElement.getBoundingClientRect().width;
|
|
1266
|
+
const positionStrategy = this.overlay
|
|
1267
|
+
.position()
|
|
1268
|
+
.flexibleConnectedTo(triggerElement)
|
|
1081
1269
|
.withPositions([
|
|
1082
|
-
{
|
|
1083
|
-
|
|
1270
|
+
{
|
|
1271
|
+
originX: 'start',
|
|
1272
|
+
originY: 'bottom',
|
|
1273
|
+
overlayX: 'start',
|
|
1274
|
+
overlayY: 'top',
|
|
1275
|
+
offsetY: 4,
|
|
1276
|
+
},
|
|
1277
|
+
{
|
|
1278
|
+
originX: 'start',
|
|
1279
|
+
originY: 'top',
|
|
1280
|
+
overlayX: 'start',
|
|
1281
|
+
overlayY: 'bottom',
|
|
1282
|
+
offsetY: -4,
|
|
1283
|
+
},
|
|
1084
1284
|
]);
|
|
1085
1285
|
const cfg = {
|
|
1086
1286
|
positionStrategy,
|
|
@@ -1105,8 +1305,9 @@ class DropdownComponent {
|
|
|
1105
1305
|
this.activeIndex.set(-1);
|
|
1106
1306
|
}
|
|
1107
1307
|
pick(option) {
|
|
1108
|
-
if (option.disabled)
|
|
1308
|
+
if (option.disabled) {
|
|
1109
1309
|
return;
|
|
1310
|
+
}
|
|
1110
1311
|
this.value.set(option.value);
|
|
1111
1312
|
this.close();
|
|
1112
1313
|
this.trigger().nativeElement.focus();
|
|
@@ -1115,11 +1316,15 @@ class DropdownComponent {
|
|
|
1115
1316
|
return option.value === this.value();
|
|
1116
1317
|
}
|
|
1117
1318
|
onTriggerKeydown(event) {
|
|
1118
|
-
if (this.disabled() || this.readOnly() || this.preview.staticPreview())
|
|
1319
|
+
if (this.disabled() || this.readOnly() || this.preview.staticPreview()) {
|
|
1119
1320
|
return;
|
|
1321
|
+
}
|
|
1120
1322
|
const key = event.key;
|
|
1121
1323
|
if (!this.open()) {
|
|
1122
|
-
if (key === 'ArrowDown' ||
|
|
1324
|
+
if (key === 'ArrowDown' ||
|
|
1325
|
+
key === 'ArrowUp' ||
|
|
1326
|
+
key === 'Enter' ||
|
|
1327
|
+
key === ' ') {
|
|
1123
1328
|
event.preventDefault();
|
|
1124
1329
|
this.openPanel();
|
|
1125
1330
|
}
|
|
@@ -1142,10 +1347,11 @@ class DropdownComponent {
|
|
|
1142
1347
|
}
|
|
1143
1348
|
if (key === 'Enter' || key === ' ') {
|
|
1144
1349
|
event.preventDefault();
|
|
1145
|
-
const
|
|
1146
|
-
const opt = this.options()[
|
|
1147
|
-
if (opt)
|
|
1350
|
+
const index = this.activeIndex();
|
|
1351
|
+
const opt = this.options()[index];
|
|
1352
|
+
if (opt) {
|
|
1148
1353
|
this.pick(opt);
|
|
1354
|
+
}
|
|
1149
1355
|
return;
|
|
1150
1356
|
}
|
|
1151
1357
|
if (key === 'Home') {
|
|
@@ -1163,8 +1369,9 @@ class DropdownComponent {
|
|
|
1163
1369
|
}
|
|
1164
1370
|
moveActive(delta) {
|
|
1165
1371
|
const opts = this.options();
|
|
1166
|
-
if (opts.length === 0)
|
|
1372
|
+
if (opts.length === 0) {
|
|
1167
1373
|
return;
|
|
1374
|
+
}
|
|
1168
1375
|
let next = this.activeIndex();
|
|
1169
1376
|
for (let attempts = 0; attempts < opts.length; attempts++) {
|
|
1170
1377
|
next = (next + delta + opts.length) % opts.length;
|
|
@@ -1179,8 +1386,9 @@ class DropdownComponent {
|
|
|
1179
1386
|
const opts = this.options();
|
|
1180
1387
|
for (let i = 0; i < opts.length; i++) {
|
|
1181
1388
|
const candidate = opts[i];
|
|
1182
|
-
if (candidate && !candidate.disabled)
|
|
1389
|
+
if (candidate && !candidate.disabled) {
|
|
1183
1390
|
return i;
|
|
1391
|
+
}
|
|
1184
1392
|
}
|
|
1185
1393
|
return -1;
|
|
1186
1394
|
}
|
|
@@ -1188,17 +1396,18 @@ class DropdownComponent {
|
|
|
1188
1396
|
const opts = this.options();
|
|
1189
1397
|
for (let i = opts.length - 1; i >= 0; i--) {
|
|
1190
1398
|
const candidate = opts[i];
|
|
1191
|
-
if (candidate && !candidate.disabled)
|
|
1399
|
+
if (candidate && !candidate.disabled) {
|
|
1192
1400
|
return i;
|
|
1401
|
+
}
|
|
1193
1402
|
}
|
|
1194
1403
|
return -1;
|
|
1195
1404
|
}
|
|
1196
1405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1197
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DropdownComponent, isStandalone: true, selector: "ds-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "panelContentTpl", first: true, predicate: ["panelContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (label()) {\n <span
|
|
1406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DropdownComponent, isStandalone: true, selector: "ds-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "panelContentTpl", first: true, predicate: ["panelContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (label()) {\n <span\n class=\"dropdown-label\"\n [id]=\"labelId\"\n >\n {{ label() }}\n </span>\n}\n\n<button\n #trigger\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [class]=\"wrapperClasses()\"\n [attr.name]=\"name()\"\n [attr.aria-expanded]=\"open() || preview.staticPreview()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span\n class=\"trigger-text\"\n [class.is-placeholder]=\"!hasValue()\"\n >\n {{ displayLabel() }}\n </span>\n\n <span class=\"chevron\">\n <ds-icon\n name=\"chevronDown\"\n [size]=\"14\"\n />\n </span>\n</button>\n\n@if (preview.staticPreview()) {\n <div class=\"ds-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n </div>\n}\n\n<ng-template #panel>\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n</ng-template>\n\n<ng-template #panelContent>\n <div class=\"dropdown-panel\">\n <ul\n class=\"dropdown-list\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n >\n @for (opt of options(); track opt.value; let i = $index) {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n class=\"option\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"opt.disabled ? 'true' : null\"\n [class.is-selected]=\"isSelected(opt)\"\n [class.is-active]=\"isActive(i)\"\n [class.is-disabled]=\"opt.disabled\"\n [disabled]=\"opt.disabled\"\n (click)=\"pick(opt)\"\n (mouseenter)=\"activeIndex.set(i)\"\n >\n @if (opt.icon) {\n <ds-icon\n class=\"option-icon\"\n [name]=\"opt.icon\"\n [size]=\"16\"\n />\n }\n\n <span class=\"option-label\">\n {{ opt.label }}\n </span>\n\n @if (isSelected(opt)) {\n <ds-icon\n class=\"option-check\"\n name=\"check\"\n [size]=\"14\"\n />\n }\n </button>\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_dropdown-focus-shadow: var(--ds-dropdown-focus-shadow, var(--ds-field-focus-shadow));--_dropdown-focus-shadow-error: var(--ds-dropdown-focus-shadow-error, var(--ds-field-focus-shadow-error));display:block;width:100%}.dropdown-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--_dropdown-focus-shadow)}.dropdown.open{border-color:var(--primary);box-shadow:var(--_dropdown-focus-shadow)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--_dropdown-focus-shadow-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.readonly{background:var(--surface-secondary);border-color:var(--border-divider);color:var(--text-secondary);cursor:default}.dropdown.readonly:hover{border-color:var(--border-divider)}.dropdown.readonly .chevron{display:none}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1198
1407
|
}
|
|
1199
1408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
1200
1409
|
type: Component,
|
|
1201
|
-
args: [{ selector: 'ds-dropdown', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\n <span
|
|
1410
|
+
args: [{ selector: 'ds-dropdown', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\n <span\n class=\"dropdown-label\"\n [id]=\"labelId\"\n >\n {{ label() }}\n </span>\n}\n\n<button\n #trigger\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [class]=\"wrapperClasses()\"\n [attr.name]=\"name()\"\n [attr.aria-expanded]=\"open() || preview.staticPreview()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span\n class=\"trigger-text\"\n [class.is-placeholder]=\"!hasValue()\"\n >\n {{ displayLabel() }}\n </span>\n\n <span class=\"chevron\">\n <ds-icon\n name=\"chevronDown\"\n [size]=\"14\"\n />\n </span>\n</button>\n\n@if (preview.staticPreview()) {\n <div class=\"ds-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n </div>\n}\n\n<ng-template #panel>\n <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\n</ng-template>\n\n<ng-template #panelContent>\n <div class=\"dropdown-panel\">\n <ul\n class=\"dropdown-list\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n >\n @for (opt of options(); track opt.value; let i = $index) {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"option\"\n class=\"option\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"opt.disabled ? 'true' : null\"\n [class.is-selected]=\"isSelected(opt)\"\n [class.is-active]=\"isActive(i)\"\n [class.is-disabled]=\"opt.disabled\"\n [disabled]=\"opt.disabled\"\n (click)=\"pick(opt)\"\n (mouseenter)=\"activeIndex.set(i)\"\n >\n @if (opt.icon) {\n <ds-icon\n class=\"option-icon\"\n [name]=\"opt.icon\"\n [size]=\"16\"\n />\n }\n\n <span class=\"option-label\">\n {{ opt.label }}\n </span>\n\n @if (isSelected(opt)) {\n <ds-icon\n class=\"option-check\"\n name=\"check\"\n [size]=\"14\"\n />\n }\n </button>\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_dropdown-focus-shadow: var(--ds-dropdown-focus-shadow, var(--ds-field-focus-shadow));--_dropdown-focus-shadow-error: var(--ds-dropdown-focus-shadow-error, var(--ds-field-focus-shadow-error));display:block;width:100%}.dropdown-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--_dropdown-focus-shadow)}.dropdown.open{border-color:var(--primary);box-shadow:var(--_dropdown-focus-shadow)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--_dropdown-focus-shadow-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.readonly{background:var(--surface-secondary);border-color:var(--border-divider);color:var(--text-secondary);cursor:default}.dropdown.readonly:hover{border-color:var(--border-divider)}.dropdown.readonly .chevron{display:none}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"] }]
|
|
1202
1411
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], panelContentTpl: [{ type: i0.ViewChild, args: ['panelContent', { isSignal: true }] }] } });
|
|
1203
1412
|
|
|
1204
1413
|
class SkeletonComponent {
|
|
@@ -1304,16 +1513,18 @@ class TableComponent {
|
|
|
1304
1513
|
}
|
|
1305
1514
|
tableClasses = computed(() => {
|
|
1306
1515
|
const parts = ['table'];
|
|
1307
|
-
if (this.loading() === 'skeleton')
|
|
1516
|
+
if (this.loading() === 'skeleton') {
|
|
1308
1517
|
parts.push('skeleton-mode');
|
|
1518
|
+
}
|
|
1309
1519
|
return parts.join(' ');
|
|
1310
1520
|
}, ...(ngDevMode ? [{ debugName: "tableClasses" }] : /* istanbul ignore next */ []));
|
|
1311
1521
|
isSkeletonLoading = computed(() => this.loading() === 'skeleton', ...(ngDevMode ? [{ debugName: "isSkeletonLoading" }] : /* istanbul ignore next */ []));
|
|
1312
1522
|
isOverlayLoading = computed(() => this.loading() === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlayLoading" }] : /* istanbul ignore next */ []));
|
|
1313
1523
|
allSelected = computed(() => {
|
|
1314
1524
|
const data = this.data();
|
|
1315
|
-
if (data.length === 0)
|
|
1525
|
+
if (data.length === 0) {
|
|
1316
1526
|
return false;
|
|
1527
|
+
}
|
|
1317
1528
|
const sel = this.selectedIds();
|
|
1318
1529
|
return data.every((row) => sel.has(row.id));
|
|
1319
1530
|
}, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
|
|
@@ -1350,13 +1561,15 @@ class TableComponent {
|
|
|
1350
1561
|
this.selectedIds.set(next);
|
|
1351
1562
|
}
|
|
1352
1563
|
onRowClick(row, event) {
|
|
1353
|
-
if (event.target.closest('input'))
|
|
1564
|
+
if (event.target.closest('input')) {
|
|
1354
1565
|
return;
|
|
1566
|
+
}
|
|
1355
1567
|
this.rowClick.emit(row);
|
|
1356
1568
|
}
|
|
1357
1569
|
onRowKey(row, event) {
|
|
1358
|
-
if (!this.rowInteractive())
|
|
1570
|
+
if (!this.rowInteractive()) {
|
|
1359
1571
|
return;
|
|
1572
|
+
}
|
|
1360
1573
|
event.preventDefault();
|
|
1361
1574
|
this.rowClick.emit(row);
|
|
1362
1575
|
}
|
|
@@ -1367,16 +1580,18 @@ class TableComponent {
|
|
|
1367
1580
|
}
|
|
1368
1581
|
/** `aria-sort` value for a header: only meaningful on sortable columns. */
|
|
1369
1582
|
ariaSort(col) {
|
|
1370
|
-
if (!col.sortable)
|
|
1583
|
+
if (!col.sortable) {
|
|
1371
1584
|
return null;
|
|
1585
|
+
}
|
|
1372
1586
|
if (this.sortKey() === col.key && this.sortDir()) {
|
|
1373
1587
|
return this.sortDir() === 'asc' ? 'ascending' : 'descending';
|
|
1374
1588
|
}
|
|
1375
1589
|
return 'none';
|
|
1376
1590
|
}
|
|
1377
1591
|
onSort(col) {
|
|
1378
|
-
if (!col.sortable)
|
|
1592
|
+
if (!col.sortable) {
|
|
1379
1593
|
return;
|
|
1594
|
+
}
|
|
1380
1595
|
const currentKey = this.sortKey();
|
|
1381
1596
|
const currentDir = this.sortDir();
|
|
1382
1597
|
let dir;
|
|
@@ -1398,21 +1613,24 @@ class TableComponent {
|
|
|
1398
1613
|
}
|
|
1399
1614
|
headerClasses(col) {
|
|
1400
1615
|
const parts = [];
|
|
1401
|
-
if (col.sortable)
|
|
1616
|
+
if (col.sortable) {
|
|
1402
1617
|
parts.push('sortable');
|
|
1618
|
+
}
|
|
1403
1619
|
if (this.sortKey() === col.key && this.sortDir()) {
|
|
1404
1620
|
parts.push(`sorted-${this.sortDir()}`);
|
|
1405
1621
|
}
|
|
1406
1622
|
return parts.join(' ');
|
|
1407
1623
|
}
|
|
1408
1624
|
sortIcon(col) {
|
|
1409
|
-
if (this.sortKey() !== col.key || !this.sortDir())
|
|
1625
|
+
if (this.sortKey() !== col.key || !this.sortDir()) {
|
|
1410
1626
|
return 'sort';
|
|
1627
|
+
}
|
|
1411
1628
|
return this.sortDir() === 'asc' ? 'sortAsc' : 'sortDesc';
|
|
1412
1629
|
}
|
|
1413
1630
|
cellValue(row, col) {
|
|
1414
|
-
if (col.cell)
|
|
1631
|
+
if (col.cell) {
|
|
1415
1632
|
return col.cell(row);
|
|
1633
|
+
}
|
|
1416
1634
|
return String(row[col.key] ?? '');
|
|
1417
1635
|
}
|
|
1418
1636
|
/** Deterministic per-cell width so skeleton rows look organic but stable
|
|
@@ -1427,13 +1645,13 @@ class TableComponent {
|
|
|
1427
1645
|
return widths[Math.abs(hash) % widths.length] ?? '70%';
|
|
1428
1646
|
}
|
|
1429
1647
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "ds-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, cellTemplateMap: { classPropertyName: "cellTemplateMap", publicName: "cellTemplateMap", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClick: "rowClick", sortChange: "sortChange" }, host: { properties: { "class.bordered": "bordered()" } }, queries: [{ propertyName: "cellTemplateDirectives", predicate: CellTemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"scroll-wrap\" [class.loading-overlay]=\"isOverlayLoading()\">\n @if (isOverlayLoading()) {\n <div class=\"overlay\" aria-hidden=\"true\">\n <span class=\"spinner\"></span>\n </div>\n }\n <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\n @if (loading() !== false) { Loading\u2026 }\n </div>\n <table [class]=\"tableClasses()\" [attr.role]=\"rowInteractive() ? 'grid' : null\" [attr.aria-busy]=\"loading() !== false ? 'true' : null\">\n @if (caption()) {\n <caption class=\"visually-hidden\">{{ caption() }}</caption>\n }\n <thead>\n <tr>\n @if (selectable()) {\n <th scope=\"col\" class=\"select-col\">\n <input\n type=\"checkbox\"\n class=\"check\"\n aria-label=\"Select all rows\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (change)=\"onToggleAll($event)\"\n />\n </th>\n }\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class]=\"headerClasses(col)\"\n [class.numeric]=\"col.align === 'right'\"\n [attr.aria-sort]=\"ariaSort(col)\"\n >\n @if (col.sortable) {\n <button type=\"button\" class=\"th-label\" (click)=\"onSort(col)\">\n {{ col.label }}\n <ds-icon class=\"sort-icon\" [name]=\"sortIcon(col)\" [size]=\"12\"></ds-icon>\n </button>\n } @else {\n <span class=\"th-label\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (isSkeletonLoading()) {\n @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\n <tr>\n @if (selectable()) {\n <td><ds-skeleton width=\"14px\" height=\"14px\" [inline]=\"true\" /></td>\n }\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n <ds-skeleton [width]=\"skeletonWidth(col, rowIndex)\" height=\"14px\" [inline]=\"true\" />\n </td>\n }\n </tr>\n }\n } @else if (!data().length) {\n <tr>\n <td\n [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\n class=\"empty\"\n >\n @if (emptyTemplate()) {\n <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\"></ng-container>\n } @else {\n <ng-content select=\"[empty]\"></ng-content>\n }\n </td>\n </tr>\n } @else {\n @for (row of data(); track row.id) {\n <tr\n [class.selected]=\"isSelected(row)\"\n [class.clickable]=\"rowInteractive()\"\n [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\n (click)=\"onRowClick(row, $event)\"\n (keydown.enter)=\"onRowKey(row, $event)\"\n (keydown.space)=\"onRowKey(row, $event)\"\n >\n @if (selectable()) {\n <td>\n <input\n type=\"checkbox\"\n class=\"check\"\n [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\n [checked]=\"isSelected(row)\"\n (change)=\"onToggleRow(row, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n }\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n @if (cellTemplate(col); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\n ></ng-container>\n } @else {\n {{ cellValue(row, col) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n@if (selectable() && someSelected()) {\n <div class=\"bulk-bar\">\n <span class=\"count\">{{ selectedIds().size }} selected</span>\n <span class=\"sep\"></span>\n <ng-content select=\"[bulk-actions]\"></ng-content>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.bordered) .scroll-wrap{border:var(--border-width-default) solid var(--_table-border);border-radius:var(--_table-radius)}.scroll-wrap{--_table-border: var(--ds-table-border, var(--border-default));--_table-radius: var(--ds-table-radius, var(--radius-md));--_table-bg: var(--ds-table-bg, var(--surface-default));width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--surface-default);box-sizing:border-box}.scroll-wrap.loading-overlay{position:relative}.scroll-wrap .overlay{position:absolute;inset:var(--ds-table-head-h, 40px) 0 0 0;z-index:var(--layer-popover, 30);display:grid;place-items:center;background:#fff9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all}.scroll-wrap .spinner{width:var(--spinner-md, 24px);height:var(--spinner-md, 24px);border:var(--border-width-strong, 2px) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:ds-table-overlay-spin var(--duration-loop-fast, .7s) linear infinite}@keyframes ds-table-overlay-spin{to{transform:rotate(360deg)}}.table{--_table-bg: var(--ds-table-bg, var(--surface-default));--_table-row-hover-bg: var(--ds-table-row-hover-bg, var(--surface-secondary));--_table-row-selected-bg: var(--ds-table-row-selected-bg, var(--primary-subtitle));--_table-head-fg: var(--ds-table-head-fg, var(--text-secondary));--_table-head-bg: var(--ds-table-head-bg, var(--surface-secondary));--_table-head-fs: var(--ds-table-head-fs, var(--font-size-xs));--_table-divider: var(--ds-table-divider, var(--border-divider));--_table-sort-active-fg: var(--ds-table-sort-active-fg, var(--primary));--_table-cell-pad-x: var(--ds-table-cell-pad-x, var(--table-cell-pad-x));--_table-cell-pad-y: var(--ds-table-cell-pad-y, var(--table-cell-pad-y));width:100%;border-collapse:collapse;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);background:var(--_table-bg)}.table thead th{text-align:left;padding:var(--table-head-pad-y) var(--_table-cell-pad-x);font:var(--font-weight-bold) var(--_table-head-fs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_table-head-fg);background:var(--_table-head-bg);border-bottom:var(--border-width-default) solid var(--_table-divider);white-space:nowrap;position:sticky;top:0;z-index:var(--table-sticky-header-z)}.table thead th .th-label{display:inline-flex;align-items:center;vertical-align:middle;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}.table thead th button.th-label{cursor:pointer;-webkit-user-select:none;user-select:none}.table thead th button.th-label:hover{color:var(--text-secondary)}.table thead th button.th-label:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.table thead th .sort-icon{display:inline-block;width:var(--sort-ic-size);height:var(--sort-ic-size);margin-left:var(--sort-ic-gap);vertical-align:middle;transform:translateY(-1px);color:var(--icon-default);opacity:.4}.table thead th .sort-icon .icon{width:var(--sort-ic-size);height:var(--sort-ic-size);display:block}.table thead th.sorted-asc .sort-icon,.table thead th.sorted-desc .sort-icon{opacity:1;color:var(--_table-sort-active-fg)}.table thead th.numeric{text-align:right}.table thead th.select-col{width:var(--space-10)}.table tbody td{padding:var(--_table-cell-pad-y) var(--_table-cell-pad-x);line-height:var(--line-height-flat);box-shadow:inset 0 calc(-1 * var(--border-width-default)) 0 var(--_table-divider);vertical-align:middle}.table tbody td.numeric{text-align:right}.table tbody td.empty{text-align:center;color:var(--text-tertiary);padding:var(--space-4)}.table tbody tr:last-child td{box-shadow:none}.table tbody tr:hover td{background:var(--_table-row-hover-bg)}.table tbody tr.selected td{background:var(--_table-row-selected-bg)}.table tbody tr.clickable{cursor:pointer}.table tbody tr.clickable:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}.table.compact tbody td,.table.compact thead th{padding:var(--space-2) var(--space-3)}.table.skeleton-mode tbody tr:hover td{background:transparent;cursor:default}.table.skeleton-mode tbody tr.clickable{cursor:default}.table.sticky-col tbody td:first-child,.table.sticky-col thead th:first-child{position:sticky;left:0;background:inherit;z-index:var(--table-sticky-col-z)}.table.sticky-col thead th:first-child{z-index:var(--table-sticky-corner-z)}.bulk-bar{position:sticky;bottom:var(--bulk-bar-offset);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);margin:var(--space-4) auto 0;width:fit-content}.bulk-bar .count{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.bulk-bar .sep{width:var(--border-width-default);height:var(--space-4);background:var(--border-inverted)}.bulk-bar .button{background:transparent;color:var(--text-inverted)}.bulk-bar .button:hover{background:var(--surface-inverted-hover)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkeletonComponent, selector: "ds-skeleton", inputs: ["width", "height", "circle", "inline"] }] });
|
|
1648
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "ds-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, cellTemplateMap: { classPropertyName: "cellTemplateMap", publicName: "cellTemplateMap", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClick: "rowClick", sortChange: "sortChange" }, host: { properties: { "class.bordered": "bordered()" } }, queries: [{ propertyName: "cellTemplateDirectives", predicate: CellTemplateDirective, isSignal: true }], ngImport: i0, template: "<div\n class=\"scroll-wrap\"\n [class.loading-overlay]=\"isOverlayLoading()\"\n>\n @if (isOverlayLoading()) {\n <div\n class=\"overlay\"\n aria-hidden=\"true\"\n >\n <span class=\"spinner\"></span>\n </div>\n }\n\n <div\n class=\"visually-hidden\"\n role=\"status\"\n aria-live=\"polite\"\n >\n @if (loading() !== false) {\n Loading\u2026\n }\n </div>\n\n <table\n [class]=\"tableClasses()\"\n [attr.role]=\"rowInteractive() ? 'grid' : null\"\n [attr.aria-busy]=\"loading() !== false ? 'true' : null\"\n >\n @if (caption()) {\n <caption class=\"visually-hidden\">\n {{\n caption()\n }}\n </caption>\n }\n\n <thead>\n <tr>\n @if (selectable()) {\n <th\n scope=\"col\"\n class=\"select-col\"\n >\n <input\n type=\"checkbox\"\n class=\"check\"\n aria-label=\"Select all rows\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (change)=\"onToggleAll($event)\"\n />\n </th>\n }\n\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class]=\"headerClasses(col)\"\n [class.numeric]=\"col.align === 'right'\"\n [attr.aria-sort]=\"ariaSort(col)\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"th-label\"\n (click)=\"onSort(col)\"\n >\n {{ col.label }}\n <ds-icon\n class=\"sort-icon\"\n [name]=\"sortIcon(col)\"\n [size]=\"12\"\n >\n </ds-icon>\n </button>\n } @else {\n <span class=\"th-label\">\n {{ col.label }}\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (isSkeletonLoading()) {\n @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\n <tr>\n @if (selectable()) {\n <td>\n <ds-skeleton\n width=\"14px\"\n height=\"14px\"\n [inline]=\"true\"\n />\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n <ds-skeleton\n height=\"14px\"\n [width]=\"skeletonWidth(col, rowIndex)\"\n [inline]=\"true\"\n />\n </td>\n }\n </tr>\n }\n } @else if (!data().length) {\n <tr>\n <td\n class=\"empty\"\n [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\n >\n @if (emptyTemplate()) {\n <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\">\n </ng-container>\n } @else {\n <ng-content select=\"[empty]\"></ng-content>\n }\n </td>\n </tr>\n } @else {\n @for (row of data(); track row.id) {\n <tr\n [class.selected]=\"isSelected(row)\"\n [class.clickable]=\"rowInteractive()\"\n [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\n (click)=\"onRowClick(row, $event)\"\n (keydown.enter)=\"onRowKey(row, $event)\"\n (keydown.space)=\"onRowKey(row, $event)\"\n >\n @if (selectable()) {\n <td>\n <input\n type=\"checkbox\"\n class=\"check\"\n [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\n [checked]=\"isSelected(row)\"\n (change)=\"onToggleRow(row, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n @if (cellTemplate(col); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\n >\n </ng-container>\n } @else {\n {{ cellValue(row, col) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (selectable() && someSelected()) {\n <div class=\"bulk-bar\">\n <span class=\"count\">\n {{ selectedIds().size }} selected\n </span>\n\n <span class=\"sep\"></span>\n\n <ng-content select=\"[bulk-actions]\"></ng-content>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host(.bordered) .scroll-wrap{border:var(--border-width-default) solid var(--_table-border);border-radius:var(--_table-radius)}.scroll-wrap{--_table-border: var(--ds-table-border, var(--border-default));--_table-radius: var(--ds-table-radius, var(--radius-md));--_table-bg-color: var(--ds-table-bg-color, var(--surface-default));width:100%;overflow:auto hidden;-webkit-overflow-scrolling:touch;background:var(--surface-default);box-sizing:border-box}.scroll-wrap.loading-overlay{position:relative}.scroll-wrap .overlay{position:absolute;inset:var(--ds-table-head-h, 40px) 0 0 0;z-index:var(--layer-popover, 30);display:grid;place-items:center;background:#fff9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all}.scroll-wrap .spinner{width:var(--spinner-md, 24px);height:var(--spinner-md, 24px);border:var(--border-width-strong, 2px) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:ds-table-overlay-spin var(--duration-loop-fast, .7s) linear infinite}@keyframes ds-table-overlay-spin{to{transform:rotate(360deg)}}.table{--_table-bg-color: var(--ds-table-bg-color, var(--surface-default));--_table-row-hover-bg-color: var(--ds-table-row-hover-bg-color, var(--surface-secondary));--_table-row-selected-bg-color: var(--ds-table-row-selected-bg-color, var(--primary-subtitle));--_table-head-text-color: var(--ds-table-head-text-color, var(--text-secondary));--_table-head-bg-color: var(--ds-table-head-bg-color, var(--surface-secondary));--_table-head-fs: var(--ds-table-head-fs, var(--font-size-xs));--_table-divider: var(--ds-table-divider, var(--border-divider));--_table-sort-active-icon-color: var(--ds-table-sort-active-icon-color, var(--primary));--_table-cell-pad-x: var(--ds-table-cell-pad-x, var(--table-cell-pad-x));--_table-cell-pad-y: var(--ds-table-cell-pad-y, var(--table-cell-pad-y));width:100%;border-collapse:collapse;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);background-color:var(--_table-bg-color)}.table thead th{text-align:left;padding:var(--table-head-pad-y) var(--_table-cell-pad-x);font:var(--font-weight-bold) var(--_table-head-fs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_table-head-text-color);background-color:var(--_table-head-bg-color);border-bottom:var(--border-width-default) solid var(--_table-divider);white-space:nowrap;position:sticky;top:0;z-index:var(--table-sticky-header-z)}.table thead th .th-label{display:inline-flex;align-items:center;vertical-align:middle;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}.table thead th button.th-label{cursor:pointer;-webkit-user-select:none;user-select:none}.table thead th button.th-label:hover{color:var(--text-secondary)}.table thead th button.th-label:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.table thead th .sort-icon{display:inline-block;width:var(--sort-ic-size);height:var(--sort-ic-size);margin-left:var(--sort-ic-gap);vertical-align:middle;transform:translateY(-1px);color:var(--icon-default);opacity:.4}.table thead th .sort-icon .icon{width:var(--sort-ic-size);height:var(--sort-ic-size);display:block}.table thead th.sorted-asc .sort-icon,.table thead th.sorted-desc .sort-icon{opacity:1;color:var(--_table-sort-active-icon-color)}.table thead th.numeric{text-align:right}.table thead th.select-col{width:var(--space-10)}.table tbody td{padding:var(--_table-cell-pad-y) var(--_table-cell-pad-x);line-height:var(--line-height-flat);box-shadow:inset 0 calc(-1 * var(--border-width-default)) 0 var(--_table-divider);vertical-align:middle}.table tbody td.numeric{text-align:right}.table tbody td.empty{text-align:center;color:var(--text-tertiary);padding:var(--space-4)}.table tbody tr:last-child td{box-shadow:none}.table tbody tr:hover td{background-color:var(--_table-row-hover-bg-color)}.table tbody tr.selected td{background-color:var(--_table-row-selected-bg-color)}.table tbody tr.clickable{cursor:pointer}.table tbody tr.clickable:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}.table.compact tbody td,.table.compact thead th{padding:var(--space-2) var(--space-3)}.table.skeleton-mode tbody tr:hover td{background:transparent;cursor:default}.table.skeleton-mode tbody tr.clickable{cursor:default}.table.sticky-col tbody td:first-child,.table.sticky-col thead th:first-child{position:sticky;left:0;background:inherit;z-index:var(--table-sticky-col-z)}.table.sticky-col thead th:first-child{z-index:var(--table-sticky-corner-z)}.bulk-bar{position:sticky;bottom:var(--bulk-bar-offset);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);margin:var(--space-4) auto 0;width:fit-content}.bulk-bar .count{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.bulk-bar .sep{width:var(--border-width-default);height:var(--space-4);background:var(--border-inverted)}.bulk-bar .button{background:transparent;color:var(--text-inverted)}.bulk-bar .button:hover{background:var(--surface-inverted-hover)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkeletonComponent, selector: "ds-skeleton", inputs: ["width", "height", "circle", "inline"] }] });
|
|
1431
1649
|
}
|
|
1432
1650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
|
|
1433
1651
|
type: Component,
|
|
1434
1652
|
args: [{ selector: 'ds-table', standalone: true, imports: [IconComponent, NgTemplateOutlet, SkeletonComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
1435
1653
|
'[class.bordered]': 'bordered()',
|
|
1436
|
-
}, template: "<div class=\"scroll-wrap\" [class.loading-overlay]=\"isOverlayLoading()\">\n @if (isOverlayLoading()) {\n <div class=\"overlay\" aria-hidden=\"true\">\n <span class=\"spinner\"></span>\n </div>\n }\n <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\n @if (loading() !== false) { Loading\u2026 }\n </div>\n <table [class]=\"tableClasses()\" [attr.role]=\"rowInteractive() ? 'grid' : null\" [attr.aria-busy]=\"loading() !== false ? 'true' : null\">\n @if (caption()) {\n <caption class=\"visually-hidden\">{{ caption() }}</caption>\n }\n <thead>\n <tr>\n @if (selectable()) {\n <th scope=\"col\" class=\"select-col\">\n <input\n type=\"checkbox\"\n class=\"check\"\n aria-label=\"Select all rows\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (change)=\"onToggleAll($event)\"\n />\n </th>\n }\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class]=\"headerClasses(col)\"\n [class.numeric]=\"col.align === 'right'\"\n [attr.aria-sort]=\"ariaSort(col)\"\n >\n @if (col.sortable) {\n <button type=\"button\" class=\"th-label\" (click)=\"onSort(col)\">\n {{ col.label }}\n <ds-icon class=\"sort-icon\" [name]=\"sortIcon(col)\" [size]=\"12\"></ds-icon>\n </button>\n } @else {\n <span class=\"th-label\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (isSkeletonLoading()) {\n @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\n <tr>\n @if (selectable()) {\n <td><ds-skeleton width=\"14px\" height=\"14px\" [inline]=\"true\" /></td>\n }\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n <ds-skeleton [width]=\"skeletonWidth(col, rowIndex)\" height=\"14px\" [inline]=\"true\" />\n </td>\n }\n </tr>\n }\n } @else if (!data().length) {\n <tr>\n <td\n [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\n class=\"empty\"\n >\n @if (emptyTemplate()) {\n <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\"></ng-container>\n } @else {\n <ng-content select=\"[empty]\"></ng-content>\n }\n </td>\n </tr>\n } @else {\n @for (row of data(); track row.id) {\n <tr\n [class.selected]=\"isSelected(row)\"\n [class.clickable]=\"rowInteractive()\"\n [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\n (click)=\"onRowClick(row, $event)\"\n (keydown.enter)=\"onRowKey(row, $event)\"\n (keydown.space)=\"onRowKey(row, $event)\"\n >\n @if (selectable()) {\n <td>\n <input\n type=\"checkbox\"\n class=\"check\"\n [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\n [checked]=\"isSelected(row)\"\n (change)=\"onToggleRow(row, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n }\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n @if (cellTemplate(col); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\n ></ng-container>\n } @else {\n {{ cellValue(row, col) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n@if (selectable() && someSelected()) {\n <div class=\"bulk-bar\">\n <span class=\"count\">{{ selectedIds().size }} selected</span>\n <span class=\"sep\"></span>\n <ng-content select=\"[bulk-actions]\"></ng-content>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.bordered) .scroll-wrap{border:var(--border-width-default) solid var(--_table-border);border-radius:var(--_table-radius)}.scroll-wrap{--_table-border: var(--ds-table-border, var(--border-default));--_table-radius: var(--ds-table-radius, var(--radius-md));--_table-bg: var(--ds-table-bg, var(--surface-default));width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--surface-default);box-sizing:border-box}.scroll-wrap.loading-overlay{position:relative}.scroll-wrap .overlay{position:absolute;inset:var(--ds-table-head-h, 40px) 0 0 0;z-index:var(--layer-popover, 30);display:grid;place-items:center;background:#fff9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all}.scroll-wrap .spinner{width:var(--spinner-md, 24px);height:var(--spinner-md, 24px);border:var(--border-width-strong, 2px) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:ds-table-overlay-spin var(--duration-loop-fast, .7s) linear infinite}@keyframes ds-table-overlay-spin{to{transform:rotate(360deg)}}.table{--_table-bg: var(--ds-table-bg, var(--surface-default));--_table-row-hover-bg: var(--ds-table-row-hover-bg, var(--surface-secondary));--_table-row-selected-bg: var(--ds-table-row-selected-bg, var(--primary-subtitle));--_table-head-fg: var(--ds-table-head-fg, var(--text-secondary));--_table-head-bg: var(--ds-table-head-bg, var(--surface-secondary));--_table-head-fs: var(--ds-table-head-fs, var(--font-size-xs));--_table-divider: var(--ds-table-divider, var(--border-divider));--_table-sort-active-fg: var(--ds-table-sort-active-fg, var(--primary));--_table-cell-pad-x: var(--ds-table-cell-pad-x, var(--table-cell-pad-x));--_table-cell-pad-y: var(--ds-table-cell-pad-y, var(--table-cell-pad-y));width:100%;border-collapse:collapse;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);background:var(--_table-bg)}.table thead th{text-align:left;padding:var(--table-head-pad-y) var(--_table-cell-pad-x);font:var(--font-weight-bold) var(--_table-head-fs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_table-head-fg);background:var(--_table-head-bg);border-bottom:var(--border-width-default) solid var(--_table-divider);white-space:nowrap;position:sticky;top:0;z-index:var(--table-sticky-header-z)}.table thead th .th-label{display:inline-flex;align-items:center;vertical-align:middle;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}.table thead th button.th-label{cursor:pointer;-webkit-user-select:none;user-select:none}.table thead th button.th-label:hover{color:var(--text-secondary)}.table thead th button.th-label:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.table thead th .sort-icon{display:inline-block;width:var(--sort-ic-size);height:var(--sort-ic-size);margin-left:var(--sort-ic-gap);vertical-align:middle;transform:translateY(-1px);color:var(--icon-default);opacity:.4}.table thead th .sort-icon .icon{width:var(--sort-ic-size);height:var(--sort-ic-size);display:block}.table thead th.sorted-asc .sort-icon,.table thead th.sorted-desc .sort-icon{opacity:1;color:var(--_table-sort-active-fg)}.table thead th.numeric{text-align:right}.table thead th.select-col{width:var(--space-10)}.table tbody td{padding:var(--_table-cell-pad-y) var(--_table-cell-pad-x);line-height:var(--line-height-flat);box-shadow:inset 0 calc(-1 * var(--border-width-default)) 0 var(--_table-divider);vertical-align:middle}.table tbody td.numeric{text-align:right}.table tbody td.empty{text-align:center;color:var(--text-tertiary);padding:var(--space-4)}.table tbody tr:last-child td{box-shadow:none}.table tbody tr:hover td{background:var(--_table-row-hover-bg)}.table tbody tr.selected td{background:var(--_table-row-selected-bg)}.table tbody tr.clickable{cursor:pointer}.table tbody tr.clickable:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}.table.compact tbody td,.table.compact thead th{padding:var(--space-2) var(--space-3)}.table.skeleton-mode tbody tr:hover td{background:transparent;cursor:default}.table.skeleton-mode tbody tr.clickable{cursor:default}.table.sticky-col tbody td:first-child,.table.sticky-col thead th:first-child{position:sticky;left:0;background:inherit;z-index:var(--table-sticky-col-z)}.table.sticky-col thead th:first-child{z-index:var(--table-sticky-corner-z)}.bulk-bar{position:sticky;bottom:var(--bulk-bar-offset);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);margin:var(--space-4) auto 0;width:fit-content}.bulk-bar .count{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.bulk-bar .sep{width:var(--border-width-default);height:var(--space-4);background:var(--border-inverted)}.bulk-bar .button{background:transparent;color:var(--text-inverted)}.bulk-bar .button:hover{background:var(--surface-inverted-hover)}\n"] }]
|
|
1654
|
+
}, template: "<div\n class=\"scroll-wrap\"\n [class.loading-overlay]=\"isOverlayLoading()\"\n>\n @if (isOverlayLoading()) {\n <div\n class=\"overlay\"\n aria-hidden=\"true\"\n >\n <span class=\"spinner\"></span>\n </div>\n }\n\n <div\n class=\"visually-hidden\"\n role=\"status\"\n aria-live=\"polite\"\n >\n @if (loading() !== false) {\n Loading\u2026\n }\n </div>\n\n <table\n [class]=\"tableClasses()\"\n [attr.role]=\"rowInteractive() ? 'grid' : null\"\n [attr.aria-busy]=\"loading() !== false ? 'true' : null\"\n >\n @if (caption()) {\n <caption class=\"visually-hidden\">\n {{\n caption()\n }}\n </caption>\n }\n\n <thead>\n <tr>\n @if (selectable()) {\n <th\n scope=\"col\"\n class=\"select-col\"\n >\n <input\n type=\"checkbox\"\n class=\"check\"\n aria-label=\"Select all rows\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (change)=\"onToggleAll($event)\"\n />\n </th>\n }\n\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class]=\"headerClasses(col)\"\n [class.numeric]=\"col.align === 'right'\"\n [attr.aria-sort]=\"ariaSort(col)\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"th-label\"\n (click)=\"onSort(col)\"\n >\n {{ col.label }}\n <ds-icon\n class=\"sort-icon\"\n [name]=\"sortIcon(col)\"\n [size]=\"12\"\n >\n </ds-icon>\n </button>\n } @else {\n <span class=\"th-label\">\n {{ col.label }}\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (isSkeletonLoading()) {\n @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\n <tr>\n @if (selectable()) {\n <td>\n <ds-skeleton\n width=\"14px\"\n height=\"14px\"\n [inline]=\"true\"\n />\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n <ds-skeleton\n height=\"14px\"\n [width]=\"skeletonWidth(col, rowIndex)\"\n [inline]=\"true\"\n />\n </td>\n }\n </tr>\n }\n } @else if (!data().length) {\n <tr>\n <td\n class=\"empty\"\n [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\n >\n @if (emptyTemplate()) {\n <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\">\n </ng-container>\n } @else {\n <ng-content select=\"[empty]\"></ng-content>\n }\n </td>\n </tr>\n } @else {\n @for (row of data(); track row.id) {\n <tr\n [class.selected]=\"isSelected(row)\"\n [class.clickable]=\"rowInteractive()\"\n [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\n (click)=\"onRowClick(row, $event)\"\n (keydown.enter)=\"onRowKey(row, $event)\"\n (keydown.space)=\"onRowKey(row, $event)\"\n >\n @if (selectable()) {\n <td>\n <input\n type=\"checkbox\"\n class=\"check\"\n [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\n [checked]=\"isSelected(row)\"\n (change)=\"onToggleRow(row, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class.numeric]=\"col.align === 'right'\">\n @if (cellTemplate(col); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\n >\n </ng-container>\n } @else {\n {{ cellValue(row, col) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (selectable() && someSelected()) {\n <div class=\"bulk-bar\">\n <span class=\"count\">\n {{ selectedIds().size }} selected\n </span>\n\n <span class=\"sep\"></span>\n\n <ng-content select=\"[bulk-actions]\"></ng-content>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host(.bordered) .scroll-wrap{border:var(--border-width-default) solid var(--_table-border);border-radius:var(--_table-radius)}.scroll-wrap{--_table-border: var(--ds-table-border, var(--border-default));--_table-radius: var(--ds-table-radius, var(--radius-md));--_table-bg-color: var(--ds-table-bg-color, var(--surface-default));width:100%;overflow:auto hidden;-webkit-overflow-scrolling:touch;background:var(--surface-default);box-sizing:border-box}.scroll-wrap.loading-overlay{position:relative}.scroll-wrap .overlay{position:absolute;inset:var(--ds-table-head-h, 40px) 0 0 0;z-index:var(--layer-popover, 30);display:grid;place-items:center;background:#fff9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all}.scroll-wrap .spinner{width:var(--spinner-md, 24px);height:var(--spinner-md, 24px);border:var(--border-width-strong, 2px) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:ds-table-overlay-spin var(--duration-loop-fast, .7s) linear infinite}@keyframes ds-table-overlay-spin{to{transform:rotate(360deg)}}.table{--_table-bg-color: var(--ds-table-bg-color, var(--surface-default));--_table-row-hover-bg-color: var(--ds-table-row-hover-bg-color, var(--surface-secondary));--_table-row-selected-bg-color: var(--ds-table-row-selected-bg-color, var(--primary-subtitle));--_table-head-text-color: var(--ds-table-head-text-color, var(--text-secondary));--_table-head-bg-color: var(--ds-table-head-bg-color, var(--surface-secondary));--_table-head-fs: var(--ds-table-head-fs, var(--font-size-xs));--_table-divider: var(--ds-table-divider, var(--border-divider));--_table-sort-active-icon-color: var(--ds-table-sort-active-icon-color, var(--primary));--_table-cell-pad-x: var(--ds-table-cell-pad-x, var(--table-cell-pad-x));--_table-cell-pad-y: var(--ds-table-cell-pad-y, var(--table-cell-pad-y));width:100%;border-collapse:collapse;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);background-color:var(--_table-bg-color)}.table thead th{text-align:left;padding:var(--table-head-pad-y) var(--_table-cell-pad-x);font:var(--font-weight-bold) var(--_table-head-fs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_table-head-text-color);background-color:var(--_table-head-bg-color);border-bottom:var(--border-width-default) solid var(--_table-divider);white-space:nowrap;position:sticky;top:0;z-index:var(--table-sticky-header-z)}.table thead th .th-label{display:inline-flex;align-items:center;vertical-align:middle;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}.table thead th button.th-label{cursor:pointer;-webkit-user-select:none;user-select:none}.table thead th button.th-label:hover{color:var(--text-secondary)}.table thead th button.th-label:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.table thead th .sort-icon{display:inline-block;width:var(--sort-ic-size);height:var(--sort-ic-size);margin-left:var(--sort-ic-gap);vertical-align:middle;transform:translateY(-1px);color:var(--icon-default);opacity:.4}.table thead th .sort-icon .icon{width:var(--sort-ic-size);height:var(--sort-ic-size);display:block}.table thead th.sorted-asc .sort-icon,.table thead th.sorted-desc .sort-icon{opacity:1;color:var(--_table-sort-active-icon-color)}.table thead th.numeric{text-align:right}.table thead th.select-col{width:var(--space-10)}.table tbody td{padding:var(--_table-cell-pad-y) var(--_table-cell-pad-x);line-height:var(--line-height-flat);box-shadow:inset 0 calc(-1 * var(--border-width-default)) 0 var(--_table-divider);vertical-align:middle}.table tbody td.numeric{text-align:right}.table tbody td.empty{text-align:center;color:var(--text-tertiary);padding:var(--space-4)}.table tbody tr:last-child td{box-shadow:none}.table tbody tr:hover td{background-color:var(--_table-row-hover-bg-color)}.table tbody tr.selected td{background-color:var(--_table-row-selected-bg-color)}.table tbody tr.clickable{cursor:pointer}.table tbody tr.clickable:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}.table.compact tbody td,.table.compact thead th{padding:var(--space-2) var(--space-3)}.table.skeleton-mode tbody tr:hover td{background:transparent;cursor:default}.table.skeleton-mode tbody tr.clickable{cursor:default}.table.sticky-col tbody td:first-child,.table.sticky-col thead th:first-child{position:sticky;left:0;background:inherit;z-index:var(--table-sticky-col-z)}.table.sticky-col thead th:first-child{z-index:var(--table-sticky-corner-z)}.bulk-bar{position:sticky;bottom:var(--bulk-bar-offset);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);margin:var(--space-4) auto 0;width:fit-content}.bulk-bar .count{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.bulk-bar .sep{width:var(--border-width-default);height:var(--space-4);background:var(--border-inverted)}.bulk-bar .button{background:transparent;color:var(--text-inverted)}.bulk-bar .button:hover{background:var(--surface-inverted-hover)}\n"] }]
|
|
1437
1655
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], cellTemplateMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplateMap", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], cellTemplateDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CellTemplateDirective), { isSignal: true }] }] } });
|
|
1438
1656
|
|
|
1439
1657
|
class PaginationComponent {
|
|
@@ -1452,14 +1670,17 @@ class PaginationComponent {
|
|
|
1452
1670
|
return Array.from({ length: total }, (_, i) => i + 1);
|
|
1453
1671
|
}
|
|
1454
1672
|
const items = [1];
|
|
1455
|
-
if (current > 3)
|
|
1673
|
+
if (current > 3) {
|
|
1456
1674
|
items.push('ellipsis');
|
|
1675
|
+
}
|
|
1457
1676
|
const start = Math.max(2, current - 1);
|
|
1458
1677
|
const end = Math.min(total - 1, current + 1);
|
|
1459
|
-
for (let i = start; i <= end; i++)
|
|
1678
|
+
for (let i = start; i <= end; i++) {
|
|
1460
1679
|
items.push(i);
|
|
1461
|
-
|
|
1680
|
+
}
|
|
1681
|
+
if (current < total - 2) {
|
|
1462
1682
|
items.push('ellipsis');
|
|
1683
|
+
}
|
|
1463
1684
|
items.push(total);
|
|
1464
1685
|
return items;
|
|
1465
1686
|
}, ...(ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []));
|
|
@@ -1471,13 +1692,19 @@ class PaginationComponent {
|
|
|
1471
1692
|
sizeOptions = computed(() => {
|
|
1472
1693
|
const presets = this.pageSizeOptions();
|
|
1473
1694
|
const current = this.pageSize();
|
|
1474
|
-
const merged = presets.includes(current)
|
|
1475
|
-
|
|
1695
|
+
const merged = presets.includes(current)
|
|
1696
|
+
? presets
|
|
1697
|
+
: [current, ...presets].sort((a, b) => a - b);
|
|
1698
|
+
return merged.map((size) => ({
|
|
1699
|
+
label: `${size} per page`,
|
|
1700
|
+
value: String(size),
|
|
1701
|
+
}));
|
|
1476
1702
|
}, ...(ngDevMode ? [{ debugName: "sizeOptions" }] : /* istanbul ignore next */ []));
|
|
1477
1703
|
pageSizeStr = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeStr" }] : /* istanbul ignore next */ []));
|
|
1478
1704
|
goTo(page) {
|
|
1479
|
-
if (page < 1 || page > this.totalPages() || page === this.currentPage())
|
|
1705
|
+
if (page < 1 || page > this.totalPages() || page === this.currentPage()) {
|
|
1480
1706
|
return;
|
|
1707
|
+
}
|
|
1481
1708
|
this.currentPage.set(page);
|
|
1482
1709
|
this.pageChange.emit(page);
|
|
1483
1710
|
}
|
|
@@ -1489,11 +1716,11 @@ class PaginationComponent {
|
|
|
1489
1716
|
this.pageChange.emit(1);
|
|
1490
1717
|
}
|
|
1491
1718
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginationComponent, isStandalone: true, selector: "ds-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<nav
|
|
1719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginationComponent, isStandalone: true, selector: "ds-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n aria-label=\"Pagination\"\n>\n @if (showLabel()) {\n <span class=\"label\">\n {{ rangeLabel() }}\n </span>\n }\n\n <button\n class=\"pagination-button\"\n type=\"button\"\n aria-label=\"Previous page\"\n [disabled]=\"currentPage() === 1\"\n (click)=\"goTo(currentPage() - 1)\"\n >\n <ds-icon\n name=\"chevronLeft\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n\n @for (item of pageItems(); track $index) {\n @if (item === 'ellipsis') {\n <span\n class=\"ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </span>\n } @else {\n <button\n class=\"pagination-button\"\n type=\"button\"\n [class.active]=\"item === currentPage()\"\n [attr.aria-label]=\"'Page ' + item\"\n [attr.aria-current]=\"item === currentPage() ? 'page' : null\"\n (click)=\"goTo(item)\"\n >\n {{ item }}\n </button>\n }\n }\n\n <button\n class=\"pagination-button\"\n type=\"button\"\n aria-label=\"Next page\"\n [disabled]=\"currentPage() === totalPages()\"\n (click)=\"goTo(currentPage() + 1)\"\n >\n <ds-icon\n name=\"chevronRight\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n\n <ds-select\n class=\"size\"\n ariaLabel=\"Rows per page\"\n size=\"sm\"\n [options]=\"sizeOptions()\"\n [value]=\"pageSizeStr()\"\n (valueChange)=\"onSizeChange($event)\"\n >\n </ds-select>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{--_pagination-btn-bg-color: var(--ds-pagination-btn-bg-color, var(--surface-default));--_pagination-btn-bg-color-hover: var(--ds-pagination-btn-bg-color-hover, var(--surface-secondary));--_pagination-btn-label-color: var(--ds-pagination-btn-label-color, var(--text-secondary));--_pagination-btn-label-color-hover: var(--ds-pagination-btn-label-color-hover, var(--text-primary));--_pagination-btn-border: var(--ds-pagination-btn-border, var(--border-default));--_pagination-active-bg-color: var(--ds-pagination-active-bg-color, var(--primary));--_pagination-active-bg-color-hover: var(--ds-pagination-active-bg-color-hover, var(--primary-hover));--_pagination-active-label-color: var(--ds-pagination-active-label-color, var(--primary-on));--_pagination-radius: var(--ds-pagination-radius, var(--radius-md));--_pagination-focus-shadow: var(--ds-pagination-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex}.pagination{display:inline-flex;gap:var(--space-1);align-items:center;flex-wrap:wrap}.pagination .label{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-secondary);margin-right:var(--space-2)}.pagination .pagination-button{min-width:var(--hit-min);height:var(--hit-min);padding:0 var(--space-2);border:var(--border-width-default) solid var(--_pagination-btn-border);background-color:var(--_pagination-btn-bg-color);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_pagination-btn-label-color);border-radius:var(--_pagination-radius);cursor:pointer;display:inline-grid;place-items:center}.pagination .pagination-button:hover:not([disabled],.active){background-color:var(--_pagination-btn-bg-color-hover);color:var(--_pagination-btn-label-color-hover)}.pagination .pagination-button.active{background-color:var(--_pagination-active-bg-color);color:var(--_pagination-active-label-color);border-color:var(--_pagination-active-bg-color)}.pagination .pagination-button.active:hover:not([disabled]){background-color:var(--_pagination-active-bg-color-hover);border-color:var(--_pagination-active-bg-color-hover)}.pagination .pagination-button[disabled]{color:var(--text-disabled);cursor:not-allowed}.pagination .pagination-button:focus-visible{outline:none;box-shadow:var(--_pagination-focus-shadow)}.pagination .ellipsis{padding:0 var(--space-2);color:var(--text-tertiary)}.pagination .size{margin-left:var(--space-2);width:auto;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "component", type: SelectComponent, selector: "ds-select", inputs: ["value", "options", "placeholder", "size", "label", "disabled", "invalid", "required", "optional", "name", "ariaLabel"], outputs: ["valueChange"] }] });
|
|
1493
1720
|
}
|
|
1494
1721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1495
1722
|
type: Component,
|
|
1496
|
-
args: [{ selector: 'ds-pagination', standalone: true, imports: [FormsModule, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav
|
|
1723
|
+
args: [{ selector: 'ds-pagination', standalone: true, imports: [FormsModule, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav\n class=\"pagination\"\n aria-label=\"Pagination\"\n>\n @if (showLabel()) {\n <span class=\"label\">\n {{ rangeLabel() }}\n </span>\n }\n\n <button\n class=\"pagination-button\"\n type=\"button\"\n aria-label=\"Previous page\"\n [disabled]=\"currentPage() === 1\"\n (click)=\"goTo(currentPage() - 1)\"\n >\n <ds-icon\n name=\"chevronLeft\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n\n @for (item of pageItems(); track $index) {\n @if (item === 'ellipsis') {\n <span\n class=\"ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </span>\n } @else {\n <button\n class=\"pagination-button\"\n type=\"button\"\n [class.active]=\"item === currentPage()\"\n [attr.aria-label]=\"'Page ' + item\"\n [attr.aria-current]=\"item === currentPage() ? 'page' : null\"\n (click)=\"goTo(item)\"\n >\n {{ item }}\n </button>\n }\n }\n\n <button\n class=\"pagination-button\"\n type=\"button\"\n aria-label=\"Next page\"\n [disabled]=\"currentPage() === totalPages()\"\n (click)=\"goTo(currentPage() + 1)\"\n >\n <ds-icon\n name=\"chevronRight\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n\n <ds-select\n class=\"size\"\n ariaLabel=\"Rows per page\"\n size=\"sm\"\n [options]=\"sizeOptions()\"\n [value]=\"pageSizeStr()\"\n (valueChange)=\"onSizeChange($event)\"\n >\n </ds-select>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{--_pagination-btn-bg-color: var(--ds-pagination-btn-bg-color, var(--surface-default));--_pagination-btn-bg-color-hover: var(--ds-pagination-btn-bg-color-hover, var(--surface-secondary));--_pagination-btn-label-color: var(--ds-pagination-btn-label-color, var(--text-secondary));--_pagination-btn-label-color-hover: var(--ds-pagination-btn-label-color-hover, var(--text-primary));--_pagination-btn-border: var(--ds-pagination-btn-border, var(--border-default));--_pagination-active-bg-color: var(--ds-pagination-active-bg-color, var(--primary));--_pagination-active-bg-color-hover: var(--ds-pagination-active-bg-color-hover, var(--primary-hover));--_pagination-active-label-color: var(--ds-pagination-active-label-color, var(--primary-on));--_pagination-radius: var(--ds-pagination-radius, var(--radius-md));--_pagination-focus-shadow: var(--ds-pagination-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex}.pagination{display:inline-flex;gap:var(--space-1);align-items:center;flex-wrap:wrap}.pagination .label{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-secondary);margin-right:var(--space-2)}.pagination .pagination-button{min-width:var(--hit-min);height:var(--hit-min);padding:0 var(--space-2);border:var(--border-width-default) solid var(--_pagination-btn-border);background-color:var(--_pagination-btn-bg-color);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_pagination-btn-label-color);border-radius:var(--_pagination-radius);cursor:pointer;display:inline-grid;place-items:center}.pagination .pagination-button:hover:not([disabled],.active){background-color:var(--_pagination-btn-bg-color-hover);color:var(--_pagination-btn-label-color-hover)}.pagination .pagination-button.active{background-color:var(--_pagination-active-bg-color);color:var(--_pagination-active-label-color);border-color:var(--_pagination-active-bg-color)}.pagination .pagination-button.active:hover:not([disabled]){background-color:var(--_pagination-active-bg-color-hover);border-color:var(--_pagination-active-bg-color-hover)}.pagination .pagination-button[disabled]{color:var(--text-disabled);cursor:not-allowed}.pagination .pagination-button:focus-visible{outline:none;box-shadow:var(--_pagination-focus-shadow)}.pagination .ellipsis{padding:0 var(--space-2);color:var(--text-tertiary)}.pagination .size{margin-left:var(--space-2);width:auto;flex:0 0 auto}\n"] }]
|
|
1497
1724
|
}], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
|
|
1498
1725
|
|
|
1499
1726
|
let nextId$5 = 0;
|
|
@@ -1570,22 +1797,23 @@ class DatePickerComponent {
|
|
|
1570
1797
|
this.viewMonth.set(new Date(next.getFullYear(), next.getMonth(), 1));
|
|
1571
1798
|
setTimeout(() => this.focusGridDay());
|
|
1572
1799
|
}
|
|
1573
|
-
addDays(date,
|
|
1800
|
+
addDays(date, days) {
|
|
1574
1801
|
const d = new Date(date);
|
|
1575
|
-
d.setDate(d.getDate() +
|
|
1802
|
+
d.setDate(d.getDate() + days);
|
|
1576
1803
|
return d;
|
|
1577
1804
|
}
|
|
1578
|
-
addMonths(date,
|
|
1805
|
+
addMonths(date, months) {
|
|
1579
1806
|
const d = new Date(date);
|
|
1580
|
-
d.setMonth(d.getMonth() +
|
|
1807
|
+
d.setMonth(d.getMonth() + months);
|
|
1581
1808
|
return d;
|
|
1582
1809
|
}
|
|
1583
1810
|
focusGridDay() {
|
|
1584
1811
|
const f = this.gridFocus();
|
|
1585
|
-
if (!f || !this.overlayRef)
|
|
1812
|
+
if (!f || !this.overlayRef) {
|
|
1586
1813
|
return;
|
|
1587
|
-
|
|
1588
|
-
|
|
1814
|
+
}
|
|
1815
|
+
const element = this.overlayRef.overlayElement.querySelector(`[data-day="${this.dayKey(f)}"]`);
|
|
1816
|
+
element?.focus();
|
|
1589
1817
|
}
|
|
1590
1818
|
/** Full, unambiguous date for a day cell's accessible name. */
|
|
1591
1819
|
dayLabel(cell) {
|
|
@@ -1605,18 +1833,20 @@ class DatePickerComponent {
|
|
|
1605
1833
|
panelTpl = viewChild.required('panel');
|
|
1606
1834
|
overlayRef = null;
|
|
1607
1835
|
displayLabel = computed(() => {
|
|
1608
|
-
const
|
|
1836
|
+
const value = this.value();
|
|
1609
1837
|
if (this.mode() === 'single') {
|
|
1610
|
-
const d =
|
|
1838
|
+
const d = value;
|
|
1611
1839
|
return d ? d.toLocaleDateString() : this.placeholder();
|
|
1612
1840
|
}
|
|
1613
|
-
const r =
|
|
1841
|
+
const r = value ?? [null, null];
|
|
1614
1842
|
const a = r[0];
|
|
1615
1843
|
const b = r[1];
|
|
1616
|
-
if (a && b)
|
|
1844
|
+
if (a && b) {
|
|
1617
1845
|
return `${a.toLocaleDateString()} – ${b.toLocaleDateString()}`;
|
|
1618
|
-
|
|
1846
|
+
}
|
|
1847
|
+
if (a) {
|
|
1619
1848
|
return `${a.toLocaleDateString()} – …`;
|
|
1849
|
+
}
|
|
1620
1850
|
return this.placeholder();
|
|
1621
1851
|
}, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
1622
1852
|
monthLabel = computed(() => {
|
|
@@ -1653,18 +1883,35 @@ class DatePickerComponent {
|
|
|
1653
1883
|
return cells;
|
|
1654
1884
|
}, ...(ngDevMode ? [{ debugName: "daysGrid" }] : /* istanbul ignore next */ []));
|
|
1655
1885
|
getRangeContext(d) {
|
|
1656
|
-
const
|
|
1886
|
+
const value = this.value();
|
|
1657
1887
|
if (this.mode() === 'single') {
|
|
1658
|
-
const sel =
|
|
1659
|
-
return {
|
|
1660
|
-
|
|
1661
|
-
|
|
1888
|
+
const sel = value;
|
|
1889
|
+
return {
|
|
1890
|
+
inRange: false,
|
|
1891
|
+
isStart: false,
|
|
1892
|
+
isEnd: false,
|
|
1893
|
+
isSelected: !!sel && sel.toDateString() === d.toDateString(),
|
|
1894
|
+
};
|
|
1895
|
+
}
|
|
1896
|
+
const r = value ?? [null, null];
|
|
1662
1897
|
const a = r[0];
|
|
1663
1898
|
const b = r[1];
|
|
1664
|
-
if (!a)
|
|
1665
|
-
return {
|
|
1666
|
-
|
|
1667
|
-
|
|
1899
|
+
if (!a) {
|
|
1900
|
+
return {
|
|
1901
|
+
inRange: false,
|
|
1902
|
+
isStart: false,
|
|
1903
|
+
isEnd: false,
|
|
1904
|
+
isSelected: false,
|
|
1905
|
+
};
|
|
1906
|
+
}
|
|
1907
|
+
if (!b) {
|
|
1908
|
+
return {
|
|
1909
|
+
inRange: false,
|
|
1910
|
+
isStart: a.toDateString() === d.toDateString(),
|
|
1911
|
+
isEnd: false,
|
|
1912
|
+
isSelected: false,
|
|
1913
|
+
};
|
|
1914
|
+
}
|
|
1668
1915
|
const t = d.getTime();
|
|
1669
1916
|
const aT = a.getTime();
|
|
1670
1917
|
const bT = b.getTime();
|
|
@@ -1676,13 +1923,27 @@ class DatePickerComponent {
|
|
|
1676
1923
|
};
|
|
1677
1924
|
}
|
|
1678
1925
|
open() {
|
|
1679
|
-
if (this.overlayRef)
|
|
1926
|
+
if (this.overlayRef) {
|
|
1680
1927
|
return;
|
|
1681
|
-
|
|
1928
|
+
}
|
|
1929
|
+
const positionStrategy = this.overlay
|
|
1930
|
+
.position()
|
|
1682
1931
|
.flexibleConnectedTo(this.trigger().nativeElement)
|
|
1683
1932
|
.withPositions([
|
|
1684
|
-
{
|
|
1685
|
-
|
|
1933
|
+
{
|
|
1934
|
+
originX: 'start',
|
|
1935
|
+
originY: 'bottom',
|
|
1936
|
+
overlayX: 'start',
|
|
1937
|
+
overlayY: 'top',
|
|
1938
|
+
offsetY: 4,
|
|
1939
|
+
},
|
|
1940
|
+
{
|
|
1941
|
+
originX: 'start',
|
|
1942
|
+
originY: 'top',
|
|
1943
|
+
overlayX: 'start',
|
|
1944
|
+
overlayY: 'bottom',
|
|
1945
|
+
offsetY: -4,
|
|
1946
|
+
},
|
|
1686
1947
|
]);
|
|
1687
1948
|
const cfg = {
|
|
1688
1949
|
positionStrategy,
|
|
@@ -1743,26 +2004,32 @@ class DatePickerComponent {
|
|
|
1743
2004
|
}
|
|
1744
2005
|
cellClasses(cell) {
|
|
1745
2006
|
const parts = ['day'];
|
|
1746
|
-
if (!cell.inMonth)
|
|
2007
|
+
if (!cell.inMonth) {
|
|
1747
2008
|
parts.push('muted');
|
|
1748
|
-
|
|
2009
|
+
}
|
|
2010
|
+
if (cell.isToday) {
|
|
1749
2011
|
parts.push('today');
|
|
1750
|
-
|
|
2012
|
+
}
|
|
2013
|
+
if (cell.inRange) {
|
|
1751
2014
|
parts.push('in-range');
|
|
1752
|
-
|
|
2015
|
+
}
|
|
2016
|
+
if (cell.isRangeStart) {
|
|
1753
2017
|
parts.push('range-start');
|
|
1754
|
-
|
|
2018
|
+
}
|
|
2019
|
+
if (cell.isRangeEnd) {
|
|
1755
2020
|
parts.push('range-end');
|
|
1756
|
-
|
|
2021
|
+
}
|
|
2022
|
+
if (cell.isSelected) {
|
|
1757
2023
|
parts.push('selected');
|
|
2024
|
+
}
|
|
1758
2025
|
return parts.join(' ');
|
|
1759
2026
|
}
|
|
1760
2027
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatePickerComponent, isStandalone: true, selector: "ds-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"field\">\n @if (label()) {\n <span
|
|
2028
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatePickerComponent, isStandalone: true, selector: "ds-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"field\">\n @if (label()) {\n <span\n class=\"label\"\n [id]=\"labelId\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </span>\n }\n\n <button\n #trigger\n type=\"button\"\n aria-haspopup=\"dialog\"\n [class]=\"triggerClasses()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n (click)=\"open()\"\n >\n <ds-icon\n name=\"calendar\"\n [size]=\"14\"\n >\n </ds-icon>\n\n <span>\n {{ displayLabel() }}\n </span>\n </button>\n\n @if (hint()) {\n <small class=\"hint\">\n {{ hint() }}\n </small>\n }\n</div>\n\n<ng-template #panel>\n <div class=\"calendar\">\n <div class=\"head\">\n <span class=\"title\">\n {{ monthLabel() }}\n </span>\n\n <span class=\"nav\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n >\n <ds-icon\n name=\"chevronLeft\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n >\n <ds-icon\n name=\"chevronRight\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n </span>\n </div>\n\n <div class=\"grid\">\n <span class=\"dow\">\n Mo\n </span>\n\n <span class=\"dow\">\n Tu\n </span>\n\n <span class=\"dow\">\n We\n </span>\n\n <span class=\"dow\">\n Th\n </span>\n\n <span class=\"dow\">\n Fr\n </span>\n\n <span class=\"dow\">\n Sa\n </span>\n\n <span class=\"dow\">\n Su\n </span>\n\n @for (cell of daysGrid(); track $index) {\n <button\n type=\"button\"\n [class]=\"cellClasses(cell)\"\n [attr.data-day]=\"dayKey(cell.date)\"\n [attr.tabindex]=\"isFocusDay(cell) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(cell)\"\n [attr.aria-pressed]=\"cell.isSelected\"\n [attr.aria-current]=\"cell.isToday ? 'date' : null\"\n (click)=\"selectDay(cell)\"\n (keydown)=\"onGridKeydown($event, cell)\"\n >\n {{ cell.day }}\n </button>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_date-picker-focus-shadow: var(--ds-date-picker-focus-shadow, var(--ds-control-focus-shadow));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.trigger{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--space-3);height:var(--hit-cozy);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);cursor:pointer}.trigger:hover{border-color:var(--border-strong)}.trigger:focus-visible{outline:none;box-shadow:var(--_date-picker-focus-shadow)}.trigger.sm{height:var(--hit-min);padding:0 var(--space-2);font-size:var(--font-size-xs)}.trigger.lg{height:var(--field-h-lg);padding:0 var(--space-4);font-size:var(--font-size-m)}.calendar{--_datepicker-bg-color: var(--ds-datepicker-bg-color, var(--surface-overlay));--_datepicker-border: var(--ds-datepicker-border, var(--border-default));--_datepicker-shadow: var(--ds-datepicker-shadow, var(--shadow-popover));--_datepicker-day-hover-bg-color: var(--ds-datepicker-day-hover-bg-color, var(--surface-secondary));--_datepicker-day-today-label-color: var(--ds-datepicker-day-today-label-color, var(--primary));--_datepicker-day-selected-bg-color: var(--ds-datepicker-day-selected-bg-color, var(--primary));--_datepicker-day-selected-bg-color-hover: var(--ds-datepicker-day-selected-bg-color-hover, var(--primary-selected-hover));--_datepicker-day-selected-label-color: var(--ds-datepicker-day-selected-label-color, var(--primary-on));--_datepicker-day-range-bg-color: var(--ds-datepicker-day-range-bg-color, var(--primary-subtitle));--_datepicker-day-range-label-color: var(--ds-datepicker-day-range-label-color, var(--primary-strong));--_datepicker-day-disabled-label-color: var(--ds-datepicker-day-disabled-label-color, var(--text-disabled));--_datepicker-width: var(--ds-datepicker-width, var(--datepicker-w));background-color:var(--_datepicker-bg-color);border:var(--border-width-default) solid var(--_datepicker-border);border-radius:var(--radius-lg);box-shadow:var(--_datepicker-shadow);padding:var(--space-3);width:var(--_datepicker-width)}.calendar .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.calendar .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.calendar .nav{display:flex;gap:var(--space-1)}.calendar .nav button{width:var(--datepicker-nav-size);height:var(--datepicker-nav-size);border:0;background:transparent;display:grid;place-items:center;color:var(--icon-default);cursor:pointer;border-radius:var(--radius-sm)}.calendar .nav button:hover{background-color:var(--_datepicker-day-hover-bg-color)}.calendar .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--datepicker-cell-gap)}.calendar .dow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);text-align:center;padding:var(--space-1) 0;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.calendar .day{width:var(--space-8);height:var(--space-8);display:grid;place-items:center;font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;border:0;background:transparent;color:var(--text-primary)}.calendar .day:hover{background-color:var(--_datepicker-day-hover-bg-color)}.calendar .day.muted{color:var(--text-muted)}.calendar .day.today{font-weight:var(--font-weight-bold);color:var(--_datepicker-day-today-label-color)}.calendar .day.selected{background-color:var(--_datepicker-day-selected-bg-color);color:var(--_datepicker-day-selected-label-color)}.calendar .day.selected:hover{background-color:var(--_datepicker-day-selected-bg-color-hover)}.calendar .day.in-range{background-color:var(--_datepicker-day-range-bg-color);color:var(--_datepicker-day-range-label-color);border-radius:var(--radius-flat)}.calendar .day.range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);background-color:var(--_datepicker-day-selected-bg-color);color:var(--_datepicker-day-selected-label-color)}.calendar .day.range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background-color:var(--_datepicker-day-selected-bg-color);color:var(--_datepicker-day-selected-label-color)}.calendar .day.range-start:hover,.calendar .day.range-end:hover{background-color:var(--_datepicker-day-selected-bg-color-hover)}.calendar .day.disabled{color:var(--_datepicker-day-disabled-label-color);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
1762
2029
|
}
|
|
1763
2030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1764
2031
|
type: Component,
|
|
1765
|
-
args: [{ selector: 'ds-date-picker', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"field\">\n @if (label()) {\n <span
|
|
2032
|
+
args: [{ selector: 'ds-date-picker', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"field\">\n @if (label()) {\n <span\n class=\"label\"\n [id]=\"labelId\"\n >\n {{ label() }}\n @if (required()) {\n <span\n class=\"req\"\n aria-hidden=\"true\"\n >\n *\n </span>\n } @else if (optional()) {\n <span\n class=\"optional-marker\"\n aria-hidden=\"true\"\n >\n (optional)\n </span>\n }\n </span>\n }\n\n <button\n #trigger\n type=\"button\"\n aria-haspopup=\"dialog\"\n [class]=\"triggerClasses()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n (click)=\"open()\"\n >\n <ds-icon\n name=\"calendar\"\n [size]=\"14\"\n >\n </ds-icon>\n\n <span>\n {{ displayLabel() }}\n </span>\n </button>\n\n @if (hint()) {\n <small class=\"hint\">\n {{ hint() }}\n </small>\n }\n</div>\n\n<ng-template #panel>\n <div class=\"calendar\">\n <div class=\"head\">\n <span class=\"title\">\n {{ monthLabel() }}\n </span>\n\n <span class=\"nav\">\n <button\n type=\"button\"\n (click)=\"prevMonth()\"\n >\n <ds-icon\n name=\"chevronLeft\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n\n <button\n type=\"button\"\n (click)=\"nextMonth()\"\n >\n <ds-icon\n name=\"chevronRight\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n </span>\n </div>\n\n <div class=\"grid\">\n <span class=\"dow\">\n Mo\n </span>\n\n <span class=\"dow\">\n Tu\n </span>\n\n <span class=\"dow\">\n We\n </span>\n\n <span class=\"dow\">\n Th\n </span>\n\n <span class=\"dow\">\n Fr\n </span>\n\n <span class=\"dow\">\n Sa\n </span>\n\n <span class=\"dow\">\n Su\n </span>\n\n @for (cell of daysGrid(); track $index) {\n <button\n type=\"button\"\n [class]=\"cellClasses(cell)\"\n [attr.data-day]=\"dayKey(cell.date)\"\n [attr.tabindex]=\"isFocusDay(cell) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(cell)\"\n [attr.aria-pressed]=\"cell.isSelected\"\n [attr.aria-current]=\"cell.isToday ? 'date' : null\"\n (click)=\"selectDay(cell)\"\n (keydown)=\"onGridKeydown($event, cell)\"\n >\n {{ cell.day }}\n </button>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_date-picker-focus-shadow: var(--ds-date-picker-focus-shadow, var(--ds-control-focus-shadow));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.trigger{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--space-3);height:var(--hit-cozy);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);cursor:pointer}.trigger:hover{border-color:var(--border-strong)}.trigger:focus-visible{outline:none;box-shadow:var(--_date-picker-focus-shadow)}.trigger.sm{height:var(--hit-min);padding:0 var(--space-2);font-size:var(--font-size-xs)}.trigger.lg{height:var(--field-h-lg);padding:0 var(--space-4);font-size:var(--font-size-m)}.calendar{--_datepicker-bg-color: var(--ds-datepicker-bg-color, var(--surface-overlay));--_datepicker-border: var(--ds-datepicker-border, var(--border-default));--_datepicker-shadow: var(--ds-datepicker-shadow, var(--shadow-popover));--_datepicker-day-hover-bg-color: var(--ds-datepicker-day-hover-bg-color, var(--surface-secondary));--_datepicker-day-today-label-color: var(--ds-datepicker-day-today-label-color, var(--primary));--_datepicker-day-selected-bg-color: var(--ds-datepicker-day-selected-bg-color, var(--primary));--_datepicker-day-selected-bg-color-hover: var(--ds-datepicker-day-selected-bg-color-hover, var(--primary-selected-hover));--_datepicker-day-selected-label-color: var(--ds-datepicker-day-selected-label-color, var(--primary-on));--_datepicker-day-range-bg-color: var(--ds-datepicker-day-range-bg-color, var(--primary-subtitle));--_datepicker-day-range-label-color: var(--ds-datepicker-day-range-label-color, var(--primary-strong));--_datepicker-day-disabled-label-color: var(--ds-datepicker-day-disabled-label-color, var(--text-disabled));--_datepicker-width: var(--ds-datepicker-width, var(--datepicker-w));background-color:var(--_datepicker-bg-color);border:var(--border-width-default) solid var(--_datepicker-border);border-radius:var(--radius-lg);box-shadow:var(--_datepicker-shadow);padding:var(--space-3);width:var(--_datepicker-width)}.calendar .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.calendar .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.calendar .nav{display:flex;gap:var(--space-1)}.calendar .nav button{width:var(--datepicker-nav-size);height:var(--datepicker-nav-size);border:0;background:transparent;display:grid;place-items:center;color:var(--icon-default);cursor:pointer;border-radius:var(--radius-sm)}.calendar .nav button:hover{background-color:var(--_datepicker-day-hover-bg-color)}.calendar .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--datepicker-cell-gap)}.calendar .dow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);text-align:center;padding:var(--space-1) 0;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.calendar .day{width:var(--space-8);height:var(--space-8);display:grid;place-items:center;font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;border:0;background:transparent;color:var(--text-primary)}.calendar .day:hover{background-color:var(--_datepicker-day-hover-bg-color)}.calendar .day.muted{color:var(--text-muted)}.calendar .day.today{font-weight:var(--font-weight-bold);color:var(--_datepicker-day-today-label-color)}.calendar .day.selected{background-color:var(--_datepicker-day-selected-bg-color);color:var(--_datepicker-day-selected-label-color)}.calendar .day.selected:hover{background-color:var(--_datepicker-day-selected-bg-color-hover)}.calendar .day.in-range{background-color:var(--_datepicker-day-range-bg-color);color:var(--_datepicker-day-range-label-color);border-radius:var(--radius-flat)}.calendar .day.range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);background-color:var(--_datepicker-day-selected-bg-color);color:var(--_datepicker-day-selected-label-color)}.calendar .day.range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background-color:var(--_datepicker-day-selected-bg-color);color:var(--_datepicker-day-selected-label-color)}.calendar .day.range-start:hover,.calendar .day.range-end:hover{background-color:var(--_datepicker-day-selected-bg-color-hover)}.calendar .day.disabled{color:var(--_datepicker-day-disabled-label-color);cursor:not-allowed}\n"] }]
|
|
1766
2033
|
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
|
|
1767
2034
|
|
|
1768
2035
|
/**
|
|
@@ -1783,7 +2050,7 @@ class BreadcrumbsService {
|
|
|
1783
2050
|
this._items.update((arr) => arr.slice(0, -1));
|
|
1784
2051
|
}
|
|
1785
2052
|
replaceLast(item) {
|
|
1786
|
-
this._items.update((arr) =>
|
|
2053
|
+
this._items.update((arr) => arr.length ? [...arr.slice(0, -1), item] : [item]);
|
|
1787
2054
|
}
|
|
1788
2055
|
clear() {
|
|
1789
2056
|
this._items.set([]);
|
|
@@ -1819,25 +2086,25 @@ class BreadcrumbsComponent {
|
|
|
1819
2086
|
this.navigate.emit(item);
|
|
1820
2087
|
}
|
|
1821
2088
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BreadcrumbsComponent, isStandalone: true, selector: "ds-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav
|
|
2089
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BreadcrumbsComponent, isStandalone: true, selector: "ds-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav\n class=\"breadcrumbs\"\n aria-label=\"Breadcrumb\"\n [class.is-static]=\"!effectiveClickable()\"\n>\n @for (item of resolvedItems(); track $index; let last = $last) {\n @if (item.href && !last && effectiveClickable()) {\n <a\n [href]=\"item.href\"\n (click)=\"onNav($event, item)\"\n >\n @if (item.icon) {\n <ds-icon\n [name]=\"item.icon\"\n [size]=\"14\"\n />\n }\n\n @if (item.label) {\n <span class=\"label\">\n {{ item.label }}\n </span>\n }\n </a>\n } @else {\n <span\n [class.current]=\"last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n @if (item.icon) {\n <ds-icon\n [name]=\"item.icon\"\n [size]=\"14\"\n />\n }\n\n @if (item.label) {\n <span class=\"label\">\n {{ item.label }}\n </span>\n }\n </span>\n }\n\n @if (!last) {\n <span\n class=\"sep\"\n aria-hidden=\"true\"\n >\n <ds-icon\n [name]=\"effectiveSeparator()\"\n [size]=\"12\"\n />\n </span>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{--_breadcrumbs-label-color: var(--ds-breadcrumbs-label-color, var(--text-tertiary));--_breadcrumbs-label-color-hover: var(--ds-breadcrumbs-label-color-hover, var(--primary));--_breadcrumbs-separator-icon-color: var(--ds-breadcrumbs-separator-icon-color, var(--icon-muted));--_breadcrumbs-current-label-color: var(--ds-breadcrumbs-current-label-color, var(--text-primary));--_breadcrumbs-focus-shadow: var(--ds-breadcrumbs-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;min-width:0;max-width:100%}.breadcrumbs{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_breadcrumbs-label-color);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.breadcrumbs a,.breadcrumbs .current{display:inline-flex;align-items:center;gap:var(--space-1)}.breadcrumbs a{color:var(--_breadcrumbs-label-color);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}.breadcrumbs a:hover{color:var(--_breadcrumbs-label-color-hover);text-decoration:underline;text-underline-offset:2px}.breadcrumbs a:focus-visible{outline:none;box-shadow:var(--_breadcrumbs-focus-shadow);border-radius:var(--radius-sm)}.breadcrumbs.is-static a,.breadcrumbs.is-static .current{cursor:default}.breadcrumbs .sep{color:var(--_breadcrumbs-separator-icon-color);display:inline-flex;align-items:center}.breadcrumbs .current{color:var(--_breadcrumbs-current-label-color);font-weight:var(--font-weight-bold)}.breadcrumbs .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}.breadcrumbs .current .label{max-width:32ch}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
1823
2090
|
}
|
|
1824
2091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
1825
2092
|
type: Component,
|
|
1826
|
-
args: [{ selector: 'ds-breadcrumbs', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav
|
|
2093
|
+
args: [{ selector: 'ds-breadcrumbs', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav\n class=\"breadcrumbs\"\n aria-label=\"Breadcrumb\"\n [class.is-static]=\"!effectiveClickable()\"\n>\n @for (item of resolvedItems(); track $index; let last = $last) {\n @if (item.href && !last && effectiveClickable()) {\n <a\n [href]=\"item.href\"\n (click)=\"onNav($event, item)\"\n >\n @if (item.icon) {\n <ds-icon\n [name]=\"item.icon\"\n [size]=\"14\"\n />\n }\n\n @if (item.label) {\n <span class=\"label\">\n {{ item.label }}\n </span>\n }\n </a>\n } @else {\n <span\n [class.current]=\"last\"\n [attr.aria-current]=\"last ? 'page' : null\"\n >\n @if (item.icon) {\n <ds-icon\n [name]=\"item.icon\"\n [size]=\"14\"\n />\n }\n\n @if (item.label) {\n <span class=\"label\">\n {{ item.label }}\n </span>\n }\n </span>\n }\n\n @if (!last) {\n <span\n class=\"sep\"\n aria-hidden=\"true\"\n >\n <ds-icon\n [name]=\"effectiveSeparator()\"\n [size]=\"12\"\n />\n </span>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{--_breadcrumbs-label-color: var(--ds-breadcrumbs-label-color, var(--text-tertiary));--_breadcrumbs-label-color-hover: var(--ds-breadcrumbs-label-color-hover, var(--primary));--_breadcrumbs-separator-icon-color: var(--ds-breadcrumbs-separator-icon-color, var(--icon-muted));--_breadcrumbs-current-label-color: var(--ds-breadcrumbs-current-label-color, var(--text-primary));--_breadcrumbs-focus-shadow: var(--ds-breadcrumbs-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;min-width:0;max-width:100%}.breadcrumbs{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_breadcrumbs-label-color);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.breadcrumbs a,.breadcrumbs .current{display:inline-flex;align-items:center;gap:var(--space-1)}.breadcrumbs a{color:var(--_breadcrumbs-label-color);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}.breadcrumbs a:hover{color:var(--_breadcrumbs-label-color-hover);text-decoration:underline;text-underline-offset:2px}.breadcrumbs a:focus-visible{outline:none;box-shadow:var(--_breadcrumbs-focus-shadow);border-radius:var(--radius-sm)}.breadcrumbs.is-static a,.breadcrumbs.is-static .current{cursor:default}.breadcrumbs .sep{color:var(--_breadcrumbs-separator-icon-color);display:inline-flex;align-items:center}.breadcrumbs .current{color:var(--_breadcrumbs-current-label-color);font-weight:var(--font-weight-bold)}.breadcrumbs .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}.breadcrumbs .current .label{max-width:32ch}\n"] }]
|
|
1827
2094
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
1828
2095
|
|
|
1829
2096
|
class SidenavComponent {
|
|
1830
2097
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
1831
2098
|
brand = input('', ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
|
|
1832
2099
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidenavComponent, isStandalone: true, selector: "ds-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sidenav": "true", "class.collapsed": "collapsed()" } }, ngImport: i0, template: "@if (brand()) {\n <div class=\"brand\">\n <span class=\"mark\"
|
|
2100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidenavComponent, isStandalone: true, selector: "ds-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sidenav": "true", "class.collapsed": "collapsed()" } }, ngImport: i0, template: "@if (brand()) {\n <div class=\"brand\">\n <span class=\"mark\">\n {{ brand().charAt(0) }}\n </span>\n\n <span class=\"brand-name\">\n {{ brand() }}\n </span>\n </div>\n}\n\n<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-bg-color: var(--ds-sidenav-bg-color, var(--surface-default));--_sidenav-border: var(--ds-sidenav-border, var(--border-divider));--_sidenav-width: var(--ds-sidenav-width, var(--sidenav-w));--_sidenav-width-collapsed: var(--ds-sidenav-width-collapsed, var(--sidenav-w-collapsed));--_sidenav-mark-bg-color: var(--ds-sidenav-mark-bg-color, var(--primary));--_sidenav-mark-label-color: var(--ds-sidenav-mark-label-color, var(--primary-on));display:flex;flex-direction:column;gap:var(--space-1);width:var(--_sidenav-width);background-color:var(--_sidenav-bg-color);border-right:var(--border-width-default) solid var(--_sidenav-border);padding:var(--space-5)}.brand{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-6)}.mark{width:var(--sidenav-logo-size);height:var(--sidenav-logo-size);border-radius:var(--radius-md);background-color:var(--_sidenav-mark-bg-color);display:grid;place-items:center;color:var(--_sidenav-mark-label-color);font-size:var(--font-size-s);flex-shrink:0}.brand-name{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans)}:host(.collapsed){width:var(--_sidenav-width-collapsed);padding:var(--space-3);align-items:center}:host(.collapsed) .brand{padding:var(--sidenav-pad-brand-y) 0 var(--sidenav-pad-brand-b);justify-content:center}:host(.collapsed) .brand-name{display:none}\n"] });
|
|
1834
2101
|
}
|
|
1835
2102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
1836
2103
|
type: Component,
|
|
1837
2104
|
args: [{ selector: 'ds-sidenav', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
1838
2105
|
'[class.sidenav]': 'true',
|
|
1839
2106
|
'[class.collapsed]': 'collapsed()',
|
|
1840
|
-
}, template: "@if (brand()) {\n <div class=\"brand\">\n <span class=\"mark\"
|
|
2107
|
+
}, template: "@if (brand()) {\n <div class=\"brand\">\n <span class=\"mark\">\n {{ brand().charAt(0) }}\n </span>\n\n <span class=\"brand-name\">\n {{ brand() }}\n </span>\n </div>\n}\n\n<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-bg-color: var(--ds-sidenav-bg-color, var(--surface-default));--_sidenav-border: var(--ds-sidenav-border, var(--border-divider));--_sidenav-width: var(--ds-sidenav-width, var(--sidenav-w));--_sidenav-width-collapsed: var(--ds-sidenav-width-collapsed, var(--sidenav-w-collapsed));--_sidenav-mark-bg-color: var(--ds-sidenav-mark-bg-color, var(--primary));--_sidenav-mark-label-color: var(--ds-sidenav-mark-label-color, var(--primary-on));display:flex;flex-direction:column;gap:var(--space-1);width:var(--_sidenav-width);background-color:var(--_sidenav-bg-color);border-right:var(--border-width-default) solid var(--_sidenav-border);padding:var(--space-5)}.brand{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-6)}.mark{width:var(--sidenav-logo-size);height:var(--sidenav-logo-size);border-radius:var(--radius-md);background-color:var(--_sidenav-mark-bg-color);display:grid;place-items:center;color:var(--_sidenav-mark-label-color);font-size:var(--font-size-s);flex-shrink:0}.brand-name{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans)}:host(.collapsed){width:var(--_sidenav-width-collapsed);padding:var(--space-3);align-items:center}:host(.collapsed) .brand{padding:var(--sidenav-pad-brand-y) 0 var(--sidenav-pad-brand-b);justify-content:center}:host(.collapsed) .brand-name{display:none}\n"] }]
|
|
1841
2108
|
}], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
|
|
1842
2109
|
|
|
1843
2110
|
class SidenavGroupComponent {
|
|
@@ -1852,16 +2119,17 @@ class SidenavGroupComponent {
|
|
|
1852
2119
|
// group always shows its items.
|
|
1853
2120
|
expanded = model(true, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
1854
2121
|
toggle() {
|
|
1855
|
-
if (!this.expandable())
|
|
2122
|
+
if (!this.expandable()) {
|
|
1856
2123
|
return;
|
|
1857
|
-
|
|
2124
|
+
}
|
|
2125
|
+
this.expanded.update((value) => !value);
|
|
1858
2126
|
}
|
|
1859
2127
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1860
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidenavGroupComponent, isStandalone: true, selector: "ds-sidenav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<!-- Single <ng-content> outside any @if blocks. Angular accepts only one\n default slot per component; duplicate <ng-content> elements caused\n children to silently drop when control flow chose a non-matching branch. -->\n@if (expandable()) {\n <button\n type=\"button\"\n class=\"group-header\"\n
|
|
2128
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidenavGroupComponent, isStandalone: true, selector: "ds-sidenav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<!-- Single <ng-content> outside any @if blocks. Angular accepts only one\n default slot per component; duplicate <ng-content> elements caused\n children to silently drop when control flow chose a non-matching branch. -->\n@if (expandable()) {\n <button\n type=\"button\"\n class=\"group-header\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggle()\"\n >\n @if (icon()) {\n <ds-icon\n class=\"group-icon\"\n [name]=\"icon()!\"\n [size]=\"18\"\n >\n </ds-icon>\n } @else {\n <!-- `[ds-group-icon]` is selector-distinct from `[icon]` slots used on\n sidenav-item children, so projected icons don't get swallowed when\n a consumer puts items inside the group. -->\n <span class=\"group-icon\">\n <ng-content select=\"[ds-group-icon]\"></ng-content>\n </span>\n }\n\n @if (label()) {\n <span class=\"group-title\">\n {{ label() }}\n </span>\n }\n\n <ds-icon\n class=\"group-caret\"\n name=\"chevronDown\"\n [class.open]=\"expanded()\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n} @else if (label()) {\n <span class=\"group-label\">\n {{ label() }}\n </span>\n}\n\n<div\n class=\"group-body\"\n [class.hidden]=\"expandable() && !expanded()\"\n [attr.inert]=\"expandable() && !expanded() ? '' : null\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-group-open-bg-color: var(--ds-sidenav-group-open-bg-color, var(--surface-secondary));--_sidenav-group-child-indent: var(--ds-sidenav-group-child-indent, var(--space-3));--_sidenav-group-radius: var(--ds-sidenav-group-radius, var(--radius-md));--_sidenav-group-label-color: var(--ds-sidenav-group-label-color, var(--text-tertiary));--_sidenav-group-focus-shadow: var(--ds-sidenav-group-focus-shadow, var(--ds-control-focus-shadow));display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--_sidenav-group-radius);transition:background-color var(--duration-fast) var(--ease-standard)}:host(:has(.group-header[aria-expanded=true])){background-color:var(--_sidenav-group-open-bg-color)}.group-label{display:block;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);color:var(--_sidenav-group-label-color);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);padding:var(--space-4) var(--space-3) var(--sidenav-section-pad-b)}.group-header{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-md);color:var(--text-primary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.group-header:hover{background:var(--surface-secondary)}.group-header:focus-visible{outline:none;box-shadow:var(--_sidenav-group-focus-shadow)}.group-icon{display:inline-flex;align-items:center;color:var(--text-secondary);flex-shrink:0}.group-title{flex:1;min-width:0}.group-caret{display:inline-flex;color:var(--text-tertiary);transition:transform var(--duration-base) var(--ease-standard)}.group-caret:not(.open){transform:rotate(-90deg)}.group-body{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--_sidenav-group-child-indent);overflow:hidden;height:auto;transition:height var(--duration-base) var(--ease-standard)}.group-body.hidden{height:0}@media(prefers-reduced-motion:reduce){.group-body{transition:none}}:host-context(.sidenav.collapsed) .group-label,:host-context(.sidenav.collapsed) .group-title,:host-context(.sidenav.collapsed) .group-caret{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
1861
2129
|
}
|
|
1862
2130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavGroupComponent, decorators: [{
|
|
1863
2131
|
type: Component,
|
|
1864
|
-
args: [{ selector: 'ds-sidenav-group', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<!-- Single <ng-content> outside any @if blocks. Angular accepts only one\n default slot per component; duplicate <ng-content> elements caused\n children to silently drop when control flow chose a non-matching branch. -->\n@if (expandable()) {\n <button\n type=\"button\"\n class=\"group-header\"\n
|
|
2132
|
+
args: [{ selector: 'ds-sidenav-group', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<!-- Single <ng-content> outside any @if blocks. Angular accepts only one\n default slot per component; duplicate <ng-content> elements caused\n children to silently drop when control flow chose a non-matching branch. -->\n@if (expandable()) {\n <button\n type=\"button\"\n class=\"group-header\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggle()\"\n >\n @if (icon()) {\n <ds-icon\n class=\"group-icon\"\n [name]=\"icon()!\"\n [size]=\"18\"\n >\n </ds-icon>\n } @else {\n <!-- `[ds-group-icon]` is selector-distinct from `[icon]` slots used on\n sidenav-item children, so projected icons don't get swallowed when\n a consumer puts items inside the group. -->\n <span class=\"group-icon\">\n <ng-content select=\"[ds-group-icon]\"></ng-content>\n </span>\n }\n\n @if (label()) {\n <span class=\"group-title\">\n {{ label() }}\n </span>\n }\n\n <ds-icon\n class=\"group-caret\"\n name=\"chevronDown\"\n [class.open]=\"expanded()\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n} @else if (label()) {\n <span class=\"group-label\">\n {{ label() }}\n </span>\n}\n\n<div\n class=\"group-body\"\n [class.hidden]=\"expandable() && !expanded()\"\n [attr.inert]=\"expandable() && !expanded() ? '' : null\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-group-open-bg-color: var(--ds-sidenav-group-open-bg-color, var(--surface-secondary));--_sidenav-group-child-indent: var(--ds-sidenav-group-child-indent, var(--space-3));--_sidenav-group-radius: var(--ds-sidenav-group-radius, var(--radius-md));--_sidenav-group-label-color: var(--ds-sidenav-group-label-color, var(--text-tertiary));--_sidenav-group-focus-shadow: var(--ds-sidenav-group-focus-shadow, var(--ds-control-focus-shadow));display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--_sidenav-group-radius);transition:background-color var(--duration-fast) var(--ease-standard)}:host(:has(.group-header[aria-expanded=true])){background-color:var(--_sidenav-group-open-bg-color)}.group-label{display:block;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);color:var(--_sidenav-group-label-color);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);padding:var(--space-4) var(--space-3) var(--sidenav-section-pad-b)}.group-header{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-md);color:var(--text-primary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.group-header:hover{background:var(--surface-secondary)}.group-header:focus-visible{outline:none;box-shadow:var(--_sidenav-group-focus-shadow)}.group-icon{display:inline-flex;align-items:center;color:var(--text-secondary);flex-shrink:0}.group-title{flex:1;min-width:0}.group-caret{display:inline-flex;color:var(--text-tertiary);transition:transform var(--duration-base) var(--ease-standard)}.group-caret:not(.open){transform:rotate(-90deg)}.group-body{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--_sidenav-group-child-indent);overflow:hidden;height:auto;transition:height var(--duration-base) var(--ease-standard)}.group-body.hidden{height:0}@media(prefers-reduced-motion:reduce){.group-body{transition:none}}:host-context(.sidenav.collapsed) .group-label,:host-context(.sidenav.collapsed) .group-title,:host-context(.sidenav.collapsed) .group-caret{display:none}\n"] }]
|
|
1865
2133
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
|
|
1866
2134
|
|
|
1867
2135
|
class SidenavItemComponent {
|
|
@@ -1880,27 +2148,29 @@ class SidenavItemComponent {
|
|
|
1880
2148
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1881
2149
|
linkClasses = computed(() => {
|
|
1882
2150
|
const parts = ['item'];
|
|
1883
|
-
if (this.active())
|
|
2151
|
+
if (this.active()) {
|
|
1884
2152
|
parts.push('active');
|
|
1885
|
-
|
|
2153
|
+
}
|
|
2154
|
+
if (this.disabled()) {
|
|
1886
2155
|
parts.push('disabled');
|
|
2156
|
+
}
|
|
1887
2157
|
return parts.join(' ');
|
|
1888
2158
|
}, ...(ngDevMode ? [{ debugName: "linkClasses" }] : /* istanbul ignore next */ []));
|
|
1889
2159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1890
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidenavItemComponent, isStandalone: true, selector: "ds-sidenav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, hasAlert: { classPropertyName: "hasAlert", publicName: "hasAlert", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Selector-scoped slots ([icon], [trailing]) coexist with no default\n <ng-content> here \u2014 projection goes via attributes only, so consumers\n can compose icon + label + arbitrary trailing content (status pill,\n status icon, etc.). The two <a> variants (routerLink vs href) share one\n #content template so the inner markup isn't duplicated. -->\n@if (routerLink()) {\n <a\n [routerLink]=\"disabled() ? null : routerLink()\"\n
|
|
2160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidenavItemComponent, isStandalone: true, selector: "ds-sidenav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, hasAlert: { classPropertyName: "hasAlert", publicName: "hasAlert", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Selector-scoped slots ([icon], [trailing]) coexist with no default\n <ng-content> here \u2014 projection goes via attributes only, so consumers\n can compose icon + label + arbitrary trailing content (status pill,\n status icon, etc.). The two <a> variants (routerLink vs href) share one\n #content template so the inner markup isn't duplicated. -->\n@if (routerLink()) {\n <a\n #rla=\"routerLinkActive\"\n routerLinkActive=\"active\"\n [routerLink]=\"disabled() ? null : routerLink()\"\n [class]=\"linkClasses()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </a>\n} @else {\n <a\n [href]=\"href() || '#'\"\n [class]=\"linkClasses()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </a>\n}\n\n<ng-template #content>\n @if (icon()) {\n <ds-icon\n class=\"icon\"\n [name]=\"icon()!\"\n [size]=\"20\"\n >\n </ds-icon>\n } @else {\n <span class=\"icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n }\n\n @if (label()) {\n <span class=\"item-label\">\n {{ label() }}\n </span>\n }\n\n <span class=\"trailing\">\n <ng-content select=\"[trailing]\"></ng-content>\n </span>\n\n @if (badge() !== null) {\n <span class=\"count\">\n {{ badge() }}\n </span>\n }\n\n @if (hasAlert()) {\n <span class=\"alert\"></span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-item-label-color: var(--ds-sidenav-item-label-color, var(--text-secondary));--_sidenav-item-label-color-hover: var(--ds-sidenav-item-label-color-hover, var(--text-primary));--_sidenav-item-bg-color-hover: var(--ds-sidenav-item-bg-color-hover, var(--surface-secondary));--_sidenav-item-bg-color-active: var(--ds-sidenav-item-bg-color-active, var(--primary));--_sidenav-item-label-color-active: var(--ds-sidenav-item-label-color-active, var(--text-on-primary));--_sidenav-item-bg-color-active-hover: var(--ds-sidenav-item-bg-color-active-hover, color-mix(in srgb, var(--_sidenav-item-bg-color-active) 88%, white));--_sidenav-item-rail: var(--ds-sidenav-item-rail, var(--secondary));--_sidenav-item-radius: var(--ds-sidenav-item-radius, var(--radius-md));--_sidenav-alert-color: var(--ds-sidenav-alert-color, var(--error));--_sidenav-item-focus-shadow: var(--ds-sidenav-item-focus-shadow, var(--ds-control-focus-shadow));display:block}.item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--_sidenav-item-radius);color:var(--_sidenav-item-label-color);text-decoration:none;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);position:relative}.item:hover{background-color:var(--_sidenav-item-bg-color-hover);color:var(--_sidenav-item-label-color-hover)}.item:focus-visible{outline:none;box-shadow:var(--_sidenav-item-focus-shadow)}.item.active{background-color:var(--_sidenav-item-bg-color-active);color:var(--_sidenav-item-label-color-active);box-shadow:inset 3px 0 0 var(--_sidenav-item-rail)}.item.active:hover{background-color:var(--_sidenav-item-bg-color-active-hover)}.item .icon{width:var(--icon-lg);height:var(--icon-lg);color:currentcolor;flex-shrink:0}.item .item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);margin-left:auto}.item .alert{width:var(--badge-dot-size);height:var(--badge-dot-size);background:var(--_sidenav-alert-color);border-radius:var(--radius-pill);margin-left:auto}.item .trailing{display:inline-flex;align-items:center;margin-left:auto;color:var(--text-tertiary);flex-shrink:0}.item.active .trailing{color:currentcolor}.item.disabled{color:var(--text-disabled);cursor:not-allowed}.item.disabled:hover{background:unset;color:var(--text-disabled)}:host-context(.sidenav.collapsed) .item{justify-content:center;padding:0;width:var(--sidenav-collapsed-item);height:var(--sidenav-collapsed-item);gap:0;font-size:0}:host-context(.sidenav.collapsed) .item .icon{font-size:0}:host-context(.sidenav.collapsed) .item .item-label,:host-context(.sidenav.collapsed) .item .count,:host-context(.sidenav.collapsed) .item .trailing{display:none}:host-context(.sidenav.collapsed) .item .alert{position:absolute;top:var(--space-1-5);right:var(--space-1-5);margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1891
2161
|
}
|
|
1892
2162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavItemComponent, decorators: [{
|
|
1893
2163
|
type: Component,
|
|
1894
|
-
args: [{ selector: 'ds-sidenav-item', standalone: true, imports: [IconComponent, RouterLink, RouterLinkActive, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, template: "<!-- Selector-scoped slots ([icon], [trailing]) coexist with no default\n <ng-content> here \u2014 projection goes via attributes only, so consumers\n can compose icon + label + arbitrary trailing content (status pill,\n status icon, etc.). The two <a> variants (routerLink vs href) share one\n #content template so the inner markup isn't duplicated. -->\n@if (routerLink()) {\n <a\n [routerLink]=\"disabled() ? null : routerLink()\"\n
|
|
2164
|
+
args: [{ selector: 'ds-sidenav-item', standalone: true, imports: [IconComponent, RouterLink, RouterLinkActive, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, template: "<!-- Selector-scoped slots ([icon], [trailing]) coexist with no default\n <ng-content> here \u2014 projection goes via attributes only, so consumers\n can compose icon + label + arbitrary trailing content (status pill,\n status icon, etc.). The two <a> variants (routerLink vs href) share one\n #content template so the inner markup isn't duplicated. -->\n@if (routerLink()) {\n <a\n #rla=\"routerLinkActive\"\n routerLinkActive=\"active\"\n [routerLink]=\"disabled() ? null : routerLink()\"\n [class]=\"linkClasses()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </a>\n} @else {\n <a\n [href]=\"href() || '#'\"\n [class]=\"linkClasses()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.tabindex]=\"disabled() ? -1 : null\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </a>\n}\n\n<ng-template #content>\n @if (icon()) {\n <ds-icon\n class=\"icon\"\n [name]=\"icon()!\"\n [size]=\"20\"\n >\n </ds-icon>\n } @else {\n <span class=\"icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n }\n\n @if (label()) {\n <span class=\"item-label\">\n {{ label() }}\n </span>\n }\n\n <span class=\"trailing\">\n <ng-content select=\"[trailing]\"></ng-content>\n </span>\n\n @if (badge() !== null) {\n <span class=\"count\">\n {{ badge() }}\n </span>\n }\n\n @if (hasAlert()) {\n <span class=\"alert\"></span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-item-label-color: var(--ds-sidenav-item-label-color, var(--text-secondary));--_sidenav-item-label-color-hover: var(--ds-sidenav-item-label-color-hover, var(--text-primary));--_sidenav-item-bg-color-hover: var(--ds-sidenav-item-bg-color-hover, var(--surface-secondary));--_sidenav-item-bg-color-active: var(--ds-sidenav-item-bg-color-active, var(--primary));--_sidenav-item-label-color-active: var(--ds-sidenav-item-label-color-active, var(--text-on-primary));--_sidenav-item-bg-color-active-hover: var(--ds-sidenav-item-bg-color-active-hover, color-mix(in srgb, var(--_sidenav-item-bg-color-active) 88%, white));--_sidenav-item-rail: var(--ds-sidenav-item-rail, var(--secondary));--_sidenav-item-radius: var(--ds-sidenav-item-radius, var(--radius-md));--_sidenav-alert-color: var(--ds-sidenav-alert-color, var(--error));--_sidenav-item-focus-shadow: var(--ds-sidenav-item-focus-shadow, var(--ds-control-focus-shadow));display:block}.item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--_sidenav-item-radius);color:var(--_sidenav-item-label-color);text-decoration:none;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);position:relative}.item:hover{background-color:var(--_sidenav-item-bg-color-hover);color:var(--_sidenav-item-label-color-hover)}.item:focus-visible{outline:none;box-shadow:var(--_sidenav-item-focus-shadow)}.item.active{background-color:var(--_sidenav-item-bg-color-active);color:var(--_sidenav-item-label-color-active);box-shadow:inset 3px 0 0 var(--_sidenav-item-rail)}.item.active:hover{background-color:var(--_sidenav-item-bg-color-active-hover)}.item .icon{width:var(--icon-lg);height:var(--icon-lg);color:currentcolor;flex-shrink:0}.item .item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);margin-left:auto}.item .alert{width:var(--badge-dot-size);height:var(--badge-dot-size);background:var(--_sidenav-alert-color);border-radius:var(--radius-pill);margin-left:auto}.item .trailing{display:inline-flex;align-items:center;margin-left:auto;color:var(--text-tertiary);flex-shrink:0}.item.active .trailing{color:currentcolor}.item.disabled{color:var(--text-disabled);cursor:not-allowed}.item.disabled:hover{background:unset;color:var(--text-disabled)}:host-context(.sidenav.collapsed) .item{justify-content:center;padding:0;width:var(--sidenav-collapsed-item);height:var(--sidenav-collapsed-item);gap:0;font-size:0}:host-context(.sidenav.collapsed) .item .icon{font-size:0}:host-context(.sidenav.collapsed) .item .item-label,:host-context(.sidenav.collapsed) .item .count,:host-context(.sidenav.collapsed) .item .trailing{display:none}:host-context(.sidenav.collapsed) .item .alert{position:absolute;top:var(--space-1-5);right:var(--space-1-5);margin:0}\n"] }]
|
|
1895
2165
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], hasAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAlert", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
1896
2166
|
|
|
1897
2167
|
class TopBarComponent {
|
|
1898
2168
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1899
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TopBarComponent, isStandalone: true, selector: "ds-topbar", ngImport: i0, template: "<header class=\"topbar\">\n <div class=\"title\"
|
|
2169
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TopBarComponent, isStandalone: true, selector: "ds-topbar", ngImport: i0, template: "<header class=\"topbar\">\n <div class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n\n <div class=\"spacer\">\n <ng-content select=\"[search]\"></ng-content>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{--_topbar-height: var(--ds-topbar-height, var(--topbar-h));--_topbar-bg-color: var(--ds-topbar-bg-color, var(--surface-default));--_topbar-border: var(--ds-topbar-border, var(--border-divider));--_topbar-title-text-color: var(--ds-topbar-title-text-color, var(--text-primary));display:block}.topbar{display:flex;align-items:center;gap:var(--space-4);height:var(--_topbar-height);padding:0 var(--space-6);background-color:var(--_topbar-bg-color);border-bottom:var(--border-width-default) solid var(--_topbar-border)}.topbar .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_topbar-title-text-color)}.topbar .spacer{flex:1;min-width:0}.topbar .actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.topbar .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.topbar .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.topbar .crumb:hover{color:var(--primary)}.topbar .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.topbar .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}\n"] });
|
|
1900
2170
|
}
|
|
1901
2171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TopBarComponent, decorators: [{
|
|
1902
2172
|
type: Component,
|
|
1903
|
-
args: [{ selector: 'ds-topbar', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header class=\"topbar\">\n <div class=\"title\"
|
|
2173
|
+
args: [{ selector: 'ds-topbar', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header class=\"topbar\">\n <div class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n\n <div class=\"spacer\">\n <ng-content select=\"[search]\"></ng-content>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{--_topbar-height: var(--ds-topbar-height, var(--topbar-h));--_topbar-bg-color: var(--ds-topbar-bg-color, var(--surface-default));--_topbar-border: var(--ds-topbar-border, var(--border-divider));--_topbar-title-text-color: var(--ds-topbar-title-text-color, var(--text-primary));display:block}.topbar{display:flex;align-items:center;gap:var(--space-4);height:var(--_topbar-height);padding:0 var(--space-6);background-color:var(--_topbar-bg-color);border-bottom:var(--border-width-default) solid var(--_topbar-border)}.topbar .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_topbar-title-text-color)}.topbar .spacer{flex:1;min-width:0}.topbar .actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.topbar .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.topbar .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.topbar .crumb:hover{color:var(--primary)}.topbar .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.topbar .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}\n"] }]
|
|
1904
2174
|
}] });
|
|
1905
2175
|
|
|
1906
2176
|
class PageHeaderComponent {
|
|
@@ -1912,20 +2182,23 @@ class PageHeaderComponent {
|
|
|
1912
2182
|
metaDivider = input(false, ...(ngDevMode ? [{ debugName: "metaDivider" }] : /* istanbul ignore next */ []));
|
|
1913
2183
|
classes = computed(() => {
|
|
1914
2184
|
const parts = ['page-header'];
|
|
1915
|
-
if (this.compact())
|
|
2185
|
+
if (this.compact()) {
|
|
1916
2186
|
parts.push('compact');
|
|
1917
|
-
|
|
2187
|
+
}
|
|
2188
|
+
if (this.divider()) {
|
|
1918
2189
|
parts.push('with-divider');
|
|
1919
|
-
|
|
2190
|
+
}
|
|
2191
|
+
if (this.metaDivider()) {
|
|
1920
2192
|
parts.push('with-meta-divider');
|
|
2193
|
+
}
|
|
1921
2194
|
return parts.join(' ');
|
|
1922
2195
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1923
2196
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PageHeaderComponent, isStandalone: true, selector: "ds-page-header", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, metaDivider: { classPropertyName: "metaDivider", publicName: "metaDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header [class]=\"classes()\">\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n <div class=\"row title-row\">\n <div class=\"title-block\">\n @if (eyebrow()) {
|
|
2197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PageHeaderComponent, isStandalone: true, selector: "ds-page-header", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, metaDivider: { classPropertyName: "metaDivider", publicName: "metaDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header [class]=\"classes()\">\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n\n <div class=\"row title-row\">\n <div class=\"title-block\">\n @if (eyebrow()) {\n <div class=\"eyebrow\">\n {{ eyebrow() }}\n </div>\n }\n\n <div class=\"title-line\">\n <h1 class=\"title\">\n {{ title() }}\n </h1>\n\n <ng-content select=\"[title-badge]\"></ng-content>\n </div>\n\n @if (subtitle()) {\n <p class=\"subtitle\">\n {{ subtitle() }}\n </p>\n }\n\n <div class=\"meta\">\n <ng-content select=\"[meta]\"></ng-content>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </div>\n\n <ng-content select=\"[tabs]\"></ng-content>\n</header>\n", styles: ["@charset \"UTF-8\";:host{--_pagehdr-eyebrow-text-color: var(--ds-pagehdr-eyebrow-text-color, var(--text-tertiary));--_pagehdr-title-text-color: var(--ds-pagehdr-title-text-color, var(--text-primary));--_pagehdr-subtitle-text-color: var(--ds-pagehdr-subtitle-text-color, var(--text-secondary));--_pagehdr-meta-text-color: var(--ds-pagehdr-meta-text-color, var(--text-secondary));--_pagehdr-meta-icon-color: var(--ds-pagehdr-meta-icon-color, var(--icon-default));--_pagehdr-divider: var(--ds-pagehdr-divider, var(--border-divider));--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h3));--_pagehdr-title-gap: var(--ds-pagehdr-title-gap, var(--space-1-5));display:block}:host(.eyebrow-secondary){--_pagehdr-eyebrow-text-color: var(--ds-pagehdr-eyebrow-text-color, var(--secondary-strong))}.page-header{display:flex;flex-direction:column;gap:var(--space-3)}.page-header.with-divider{padding-bottom:var(--space-4);border-bottom:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header:has(>[tabs]){padding-bottom:0;border-bottom:0}.page-header .row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.page-header .title-block{display:flex;flex-direction:column;gap:var(--_pagehdr-title-gap);min-width:0;flex:1 1 0;align-self:flex-start}.page-header .eyebrow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--_pagehdr-eyebrow-text-color)}.page-header .title{font:var(--font-weight-extrabold) var(--_pagehdr-title-fs)/var(--line-height-tight) var(--font-display);color:var(--_pagehdr-title-text-color);margin:0;letter-spacing:-.02em}.page-header .title-line{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.page-header .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;flex-wrap:nowrap;overflow:hidden;padding-bottom:var(--space-1)}.page-header .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.page-header .crumb:hover{color:var(--primary)}.page-header .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.page-header .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}.page-header .subtitle{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_pagehdr-subtitle-text-color);margin:0}.page-header .actions{display:flex;align-items:flex-end;gap:var(--space-2);flex-shrink:0;align-self:flex-start}.page-header .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-1-5)}.page-header .meta:not(:has(>*)){display:none}.page-header.with-meta-divider .meta{padding-top:var(--space-2);border-top:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header .meta-item{display:inline-flex;align-items:center;gap:var(--space-1-5);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);color:var(--_pagehdr-meta-text-color)}.page-header .meta-item .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--_pagehdr-meta-icon-color)}.page-header.compact{--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h4));gap:var(--space-2);padding-bottom:var(--space-3)}@media(width<=720px){.page-header .actions{width:100%}}\n"] });
|
|
1925
2198
|
}
|
|
1926
2199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
1927
2200
|
type: Component,
|
|
1928
|
-
args: [{ selector: 'ds-page-header', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header [class]=\"classes()\">\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n <div class=\"row title-row\">\n <div class=\"title-block\">\n @if (eyebrow()) {
|
|
2201
|
+
args: [{ selector: 'ds-page-header', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header [class]=\"classes()\">\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n\n <div class=\"row title-row\">\n <div class=\"title-block\">\n @if (eyebrow()) {\n <div class=\"eyebrow\">\n {{ eyebrow() }}\n </div>\n }\n\n <div class=\"title-line\">\n <h1 class=\"title\">\n {{ title() }}\n </h1>\n\n <ng-content select=\"[title-badge]\"></ng-content>\n </div>\n\n @if (subtitle()) {\n <p class=\"subtitle\">\n {{ subtitle() }}\n </p>\n }\n\n <div class=\"meta\">\n <ng-content select=\"[meta]\"></ng-content>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </div>\n\n <ng-content select=\"[tabs]\"></ng-content>\n</header>\n", styles: ["@charset \"UTF-8\";:host{--_pagehdr-eyebrow-text-color: var(--ds-pagehdr-eyebrow-text-color, var(--text-tertiary));--_pagehdr-title-text-color: var(--ds-pagehdr-title-text-color, var(--text-primary));--_pagehdr-subtitle-text-color: var(--ds-pagehdr-subtitle-text-color, var(--text-secondary));--_pagehdr-meta-text-color: var(--ds-pagehdr-meta-text-color, var(--text-secondary));--_pagehdr-meta-icon-color: var(--ds-pagehdr-meta-icon-color, var(--icon-default));--_pagehdr-divider: var(--ds-pagehdr-divider, var(--border-divider));--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h3));--_pagehdr-title-gap: var(--ds-pagehdr-title-gap, var(--space-1-5));display:block}:host(.eyebrow-secondary){--_pagehdr-eyebrow-text-color: var(--ds-pagehdr-eyebrow-text-color, var(--secondary-strong))}.page-header{display:flex;flex-direction:column;gap:var(--space-3)}.page-header.with-divider{padding-bottom:var(--space-4);border-bottom:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header:has(>[tabs]){padding-bottom:0;border-bottom:0}.page-header .row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.page-header .title-block{display:flex;flex-direction:column;gap:var(--_pagehdr-title-gap);min-width:0;flex:1 1 0;align-self:flex-start}.page-header .eyebrow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--_pagehdr-eyebrow-text-color)}.page-header .title{font:var(--font-weight-extrabold) var(--_pagehdr-title-fs)/var(--line-height-tight) var(--font-display);color:var(--_pagehdr-title-text-color);margin:0;letter-spacing:-.02em}.page-header .title-line{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.page-header .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;flex-wrap:nowrap;overflow:hidden;padding-bottom:var(--space-1)}.page-header .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.page-header .crumb:hover{color:var(--primary)}.page-header .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.page-header .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}.page-header .subtitle{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_pagehdr-subtitle-text-color);margin:0}.page-header .actions{display:flex;align-items:flex-end;gap:var(--space-2);flex-shrink:0;align-self:flex-start}.page-header .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-1-5)}.page-header .meta:not(:has(>*)){display:none}.page-header.with-meta-divider .meta{padding-top:var(--space-2);border-top:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header .meta-item{display:inline-flex;align-items:center;gap:var(--space-1-5);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);color:var(--_pagehdr-meta-text-color)}.page-header .meta-item .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--_pagehdr-meta-icon-color)}.page-header.compact{--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h4));gap:var(--space-2);padding-bottom:var(--space-3)}@media(width<=720px){.page-header .actions{width:100%}}\n"] }]
|
|
1929
2202
|
}], propDecorators: { eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], metaDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaDivider", required: false }] }] } });
|
|
1930
2203
|
|
|
1931
2204
|
let nextId$4 = 0;
|
|
@@ -1938,19 +2211,20 @@ class ModalCardComponent {
|
|
|
1938
2211
|
titleId = `ds-modal-title-${++nextId$4}`;
|
|
1939
2212
|
classes = computed(() => {
|
|
1940
2213
|
const parts = ['modal', this.size()];
|
|
1941
|
-
if (this.danger())
|
|
2214
|
+
if (this.danger()) {
|
|
1942
2215
|
parts.push('danger');
|
|
2216
|
+
}
|
|
1943
2217
|
return parts.join(' ');
|
|
1944
2218
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1945
2219
|
onClose() {
|
|
1946
2220
|
this.closed.emit();
|
|
1947
2221
|
}
|
|
1948
2222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ModalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ModalCardComponent, isStandalone: true, selector: "ds-modal-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n
|
|
2223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ModalCardComponent, isStandalone: true, selector: "ds-modal-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n role=\"dialog\"\n aria-modal=\"true\"\n [class]=\"classes()\"\n [attr.aria-labelledby]=\"titleId\"\n>\n <div class=\"header\">\n <h2\n class=\"title\"\n [id]=\"titleId\"\n >\n {{ title() }}\n </h2>\n\n @if (showClose()) {\n <button\n class=\"close\"\n type=\"button\"\n aria-label=\"Close dialog\"\n (click)=\"onClose()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"16\"\n >\n </ds-icon>\n </button>\n }\n </div>\n\n <div class=\"body\">\n <ng-content select=\"[body]\"></ng-content>\n\n <div class=\"impact\">\n <ng-content select=\"[impact]\"></ng-content>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_modal-bg-color: var(--ds-modal-bg-color, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-text-color: var(--ds-modal-title-text-color, var(--text-primary));--_modal-title-text-color-error: var(--ds-modal-title-text-color-error, var(--error-text));--_modal-close-icon-color: var(--ds-modal-close-icon-color, var(--icon-default));--_modal-close-icon-color-hover: var(--ds-modal-close-icon-color-hover, var(--icon-strong));display:contents}.modal{background-color:var(--_modal-bg-color);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-text-color)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-icon-color);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-icon-color-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-text-color-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
1950
2224
|
}
|
|
1951
2225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ModalCardComponent, decorators: [{
|
|
1952
2226
|
type: Component,
|
|
1953
|
-
args: [{ selector: 'ds-modal-card', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n
|
|
2227
|
+
args: [{ selector: 'ds-modal-card', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n role=\"dialog\"\n aria-modal=\"true\"\n [class]=\"classes()\"\n [attr.aria-labelledby]=\"titleId\"\n>\n <div class=\"header\">\n <h2\n class=\"title\"\n [id]=\"titleId\"\n >\n {{ title() }}\n </h2>\n\n @if (showClose()) {\n <button\n class=\"close\"\n type=\"button\"\n aria-label=\"Close dialog\"\n (click)=\"onClose()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"16\"\n >\n </ds-icon>\n </button>\n }\n </div>\n\n <div class=\"body\">\n <ng-content select=\"[body]\"></ng-content>\n\n <div class=\"impact\">\n <ng-content select=\"[impact]\"></ng-content>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_modal-bg-color: var(--ds-modal-bg-color, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-text-color: var(--ds-modal-title-text-color, var(--text-primary));--_modal-title-text-color-error: var(--ds-modal-title-text-color-error, var(--error-text));--_modal-close-icon-color: var(--ds-modal-close-icon-color, var(--icon-default));--_modal-close-icon-color-hover: var(--ds-modal-close-icon-color-hover, var(--icon-strong));display:contents}.modal{background-color:var(--_modal-bg-color);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-text-color)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-icon-color);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-icon-color-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-text-color-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
1954
2228
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1955
2229
|
|
|
1956
2230
|
class ModalComponent {
|
|
@@ -1965,8 +2239,9 @@ class ModalComponent {
|
|
|
1965
2239
|
constructor() {
|
|
1966
2240
|
// Lock background scroll while the dialog is open (skipped in preview mode).
|
|
1967
2241
|
effect(() => {
|
|
1968
|
-
if (this.preview.staticPreview())
|
|
2242
|
+
if (this.preview.staticPreview()) {
|
|
1969
2243
|
return;
|
|
2244
|
+
}
|
|
1970
2245
|
this.doc.body.style.overflow = this.open() ? 'hidden' : '';
|
|
1971
2246
|
});
|
|
1972
2247
|
inject(DestroyRef).onDestroy(() => {
|
|
@@ -1974,21 +2249,23 @@ class ModalComponent {
|
|
|
1974
2249
|
});
|
|
1975
2250
|
}
|
|
1976
2251
|
onClose() {
|
|
1977
|
-
if (this.preview.staticPreview())
|
|
2252
|
+
if (this.preview.staticPreview()) {
|
|
1978
2253
|
return;
|
|
2254
|
+
}
|
|
1979
2255
|
this.open.set(false);
|
|
1980
2256
|
this.closed.emit();
|
|
1981
2257
|
}
|
|
1982
2258
|
onBackdrop(event) {
|
|
1983
|
-
if (event.target === event.currentTarget)
|
|
2259
|
+
if (event.target === event.currentTarget) {
|
|
1984
2260
|
this.onClose();
|
|
2261
|
+
}
|
|
1985
2262
|
}
|
|
1986
2263
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed" }, hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (open() || preview.staticPreview()) {\n <div\n [class]=\"preview.staticPreview() ? 'modal-static' : 'modal-backdrop'\"\n (click)=\"onBackdrop($event)\"\n (keydown.escape)=\"onClose()\"\n >\n <ds-modal-card\n [cdkTrapFocus]=\"!preview.staticPreview()\"\n [cdkTrapFocusAutoCapture]=\"!preview.staticPreview()\"\n [size]=\"size()\"\n [danger]=\"danger()\"\n [title]=\"title()\"\n (closed)=\"onClose()\"\n >\n <ng-container body
|
|
2264
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed" }, hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (open() || preview.staticPreview()) {\n <div\n [class]=\"preview.staticPreview() ? 'modal-static' : 'modal-backdrop'\"\n (click)=\"onBackdrop($event)\"\n (keydown.escape)=\"onClose()\"\n >\n <ds-modal-card\n [cdkTrapFocus]=\"!preview.staticPreview()\"\n [cdkTrapFocusAutoCapture]=\"!preview.staticPreview()\"\n [size]=\"size()\"\n [danger]=\"danger()\"\n [title]=\"title()\"\n (closed)=\"onClose()\"\n >\n <ng-container body>\n <ng-content select=\"[body]\"></ng-content>\n </ng-container>\n\n <ng-container impact>\n <ng-content select=\"[impact]\"></ng-content>\n </ng-container>\n\n <ng-container actions>\n <ng-content select=\"[actions]\"></ng-content>\n </ng-container>\n </ds-modal-card>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_modal-bg-color: var(--ds-modal-bg-color, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-text-color: var(--ds-modal-title-text-color, var(--text-primary));--_modal-title-text-color-error: var(--ds-modal-title-text-color-error, var(--error-text));--_modal-close-icon-color: var(--ds-modal-close-icon-color, var(--icon-default));--_modal-close-icon-color-hover: var(--ds-modal-close-icon-color-hover, var(--icon-strong));display:contents}.modal{background-color:var(--_modal-bg-color);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-text-color)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-icon-color);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-icon-color-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-text-color-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: ModalCardComponent, selector: "ds-modal-card", inputs: ["size", "danger", "title", "showClose"], outputs: ["closed"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
|
|
1988
2265
|
}
|
|
1989
2266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1990
2267
|
type: Component,
|
|
1991
|
-
args: [{ selector: 'ds-modal', standalone: true, imports: [ModalCardComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (open() || preview.staticPreview()) {\n <div\n [class]=\"preview.staticPreview() ? 'modal-static' : 'modal-backdrop'\"\n (click)=\"onBackdrop($event)\"\n (keydown.escape)=\"onClose()\"\n >\n <ds-modal-card\n [cdkTrapFocus]=\"!preview.staticPreview()\"\n [cdkTrapFocusAutoCapture]=\"!preview.staticPreview()\"\n [size]=\"size()\"\n [danger]=\"danger()\"\n [title]=\"title()\"\n (closed)=\"onClose()\"\n >\n <ng-container body
|
|
2268
|
+
args: [{ selector: 'ds-modal', standalone: true, imports: [ModalCardComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (open() || preview.staticPreview()) {\n <div\n [class]=\"preview.staticPreview() ? 'modal-static' : 'modal-backdrop'\"\n (click)=\"onBackdrop($event)\"\n (keydown.escape)=\"onClose()\"\n >\n <ds-modal-card\n [cdkTrapFocus]=\"!preview.staticPreview()\"\n [cdkTrapFocusAutoCapture]=\"!preview.staticPreview()\"\n [size]=\"size()\"\n [danger]=\"danger()\"\n [title]=\"title()\"\n (closed)=\"onClose()\"\n >\n <ng-container body>\n <ng-content select=\"[body]\"></ng-content>\n </ng-container>\n\n <ng-container impact>\n <ng-content select=\"[impact]\"></ng-content>\n </ng-container>\n\n <ng-container actions>\n <ng-content select=\"[actions]\"></ng-content>\n </ng-container>\n </ds-modal-card>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_modal-bg-color: var(--ds-modal-bg-color, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-text-color: var(--ds-modal-title-text-color, var(--text-primary));--_modal-title-text-color-error: var(--ds-modal-title-text-color-error, var(--error-text));--_modal-close-icon-color: var(--ds-modal-close-icon-color, var(--icon-default));--_modal-close-icon-color-hover: var(--ds-modal-close-icon-color-hover, var(--icon-strong));display:contents}.modal{background-color:var(--_modal-bg-color);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-text-color)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-icon-color);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-icon-color-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-text-color-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
1992
2269
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
|
|
1993
2270
|
|
|
1994
2271
|
class BannerComponent {
|
|
@@ -2007,37 +2284,43 @@ class BannerComponent {
|
|
|
2007
2284
|
// info/success wait their turn (status). A statically-rendered banner is
|
|
2008
2285
|
// present at first paint, so a `status` region won't be re-read needlessly.
|
|
2009
2286
|
get ariaRole() {
|
|
2010
|
-
const
|
|
2011
|
-
return
|
|
2287
|
+
const value = this.variant();
|
|
2288
|
+
return value === 'error' || value === 'warning' || value === 'severe'
|
|
2289
|
+
? 'alert'
|
|
2290
|
+
: 'status';
|
|
2012
2291
|
}
|
|
2013
2292
|
get ariaLive() {
|
|
2014
2293
|
return this.ariaRole === 'alert' ? 'assertive' : 'polite';
|
|
2015
2294
|
}
|
|
2016
2295
|
classes = computed(() => {
|
|
2017
2296
|
const parts = ['banner', this.variant(), `layout-${this.layout()}`];
|
|
2018
|
-
if (this.compact())
|
|
2297
|
+
if (this.compact()) {
|
|
2019
2298
|
parts.push('compact');
|
|
2299
|
+
}
|
|
2020
2300
|
return parts.join(' ');
|
|
2021
2301
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2022
2302
|
defaultIcon = computed(() => {
|
|
2023
2303
|
const variant = this.variant();
|
|
2024
|
-
if (variant === 'success')
|
|
2304
|
+
if (variant === 'success') {
|
|
2025
2305
|
return 'success';
|
|
2026
|
-
|
|
2306
|
+
}
|
|
2307
|
+
if (variant === 'warning' || variant === 'severe') {
|
|
2027
2308
|
return 'warn';
|
|
2028
|
-
|
|
2309
|
+
}
|
|
2310
|
+
if (variant === 'error') {
|
|
2029
2311
|
return 'error';
|
|
2312
|
+
}
|
|
2030
2313
|
return 'info';
|
|
2031
2314
|
}, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
|
|
2032
2315
|
onDismiss() {
|
|
2033
2316
|
this.dismissed.emit();
|
|
2034
2317
|
}
|
|
2035
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2036
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BannerComponent, isStandalone: true, selector: "ds-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, accentRail: { classPropertyName: "accentRail", publicName: "accentRail", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class.no-rail": "this.noRail", "attr.role": "this.ariaRole", "attr.aria-live": "this.ariaLive" } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <ds-icon
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BannerComponent, isStandalone: true, selector: "ds-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, accentRail: { classPropertyName: "accentRail", publicName: "accentRail", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class.no-rail": "this.noRail", "attr.role": "this.ariaRole", "attr.aria-live": "this.ariaLive" } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <ds-icon\n class=\"icon\"\n [name]=\"icon() ?? defaultIcon()\"\n [size]=\"20\"\n >\n </ds-icon>\n\n <div class=\"body\">\n @if (title()) {\n <div class=\"title\">\n {{ title() }}\n </div>\n }\n\n <ng-content></ng-content>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n @if (dismissible()) {\n <button\n class=\"close\"\n type=\"button\"\n (click)=\"onDismiss()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"16\"\n >\n </ds-icon>\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg-color: var(--ds-banner-bg-color, var(--info-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--info-text));--_banner-bar: var(--ds-banner-bar, var(--info));--_banner-pad-y: var(--ds-banner-pad-y, var(--space-3));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-4));--_banner-radius: var(--ds-banner-radius, var(--radius-md));--_banner-bar-width: var(--ds-banner-bar-width, var(--banner-bar-w));--_banner-title-text-color: var(--ds-banner-title-text-color, var(--text-primary));--_banner-close-icon-color: var(--ds-banner-close-icon-color, var(--icon-default));--_banner-close-icon-color-hover: var(--ds-banner-close-icon-color-hover, var(--icon-strong));display:flex;gap:var(--space-3);padding:var(--_banner-pad-y) var(--_banner-pad-x);border-radius:var(--_banner-radius);background-color:var(--_banner-bg-color);color:var(--_banner-text-color)}:host(:not(.no-rail)) .banner{border-left:var(--_banner-bar-width) solid var(--_banner-bar)}.banner.success{--_banner-bar: var(--ds-banner-bar, var(--success));--_banner-bg-color: var(--ds-banner-bg-color, var(--success-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--success-text))}.banner.warning{--_banner-bar: var(--ds-banner-bar, var(--warning));--_banner-bg-color: var(--ds-banner-bg-color, var(--warning-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--warning-text))}.banner.severe{--_banner-bar: var(--ds-banner-bar, var(--warning-hover));--_banner-bg-color: var(--ds-banner-bg-color, var(--warning-muted));--_banner-text-color: var(--ds-banner-text-color, var(--warning-text))}.banner.error{--_banner-bar: var(--ds-banner-bar, var(--error));--_banner-bg-color: var(--ds-banner-bg-color, var(--error-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--error-text))}.banner.neutral{--_banner-bar: var(--ds-banner-bar, var(--border-strong));--_banner-bg-color: var(--ds-banner-bg-color, var(--surface-secondary));--_banner-text-color: var(--ds-banner-text-color, var(--text-secondary))}.banner .icon{flex-shrink:0;color:inherit;margin-top:var(--banner-ic-mt)}.banner .body{flex:1;min-width:0}.banner .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_banner-title-text-color);margin:0 0 var(--space-1)}.banner .close{background:none;border:0;cursor:pointer;color:var(--_banner-close-icon-color)}.banner .close:hover{color:var(--_banner-close-icon-color-hover)}.banner .actions{display:flex;gap:var(--space-2)}.banner .actions:empty{display:none}.banner.layout-stacked{flex-wrap:wrap;align-items:flex-start}.banner.layout-stacked .actions{flex-basis:100%;margin-top:var(--space-2);padding-left:calc(20px + var(--space-3))}.banner.layout-row{align-items:center}.banner.layout-row .body{flex:1;min-width:0}.banner.layout-row .actions{flex-shrink:0}.banner.compact{align-items:center;--_banner-pad-y: var(--ds-banner-pad-y, var(--space-2));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-3))}.banner.compact .icon{margin-top:0}.banner.compact .title{margin:0;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2037
2320
|
}
|
|
2038
2321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BannerComponent, decorators: [{
|
|
2039
2322
|
type: Component,
|
|
2040
|
-
args: [{ selector: 'ds-banner', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"classes()\">\n <ds-icon
|
|
2323
|
+
args: [{ selector: 'ds-banner', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"classes()\">\n <ds-icon\n class=\"icon\"\n [name]=\"icon() ?? defaultIcon()\"\n [size]=\"20\"\n >\n </ds-icon>\n\n <div class=\"body\">\n @if (title()) {\n <div class=\"title\">\n {{ title() }}\n </div>\n }\n\n <ng-content></ng-content>\n </div>\n\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n @if (dismissible()) {\n <button\n class=\"close\"\n type=\"button\"\n (click)=\"onDismiss()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"16\"\n >\n </ds-icon>\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg-color: var(--ds-banner-bg-color, var(--info-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--info-text));--_banner-bar: var(--ds-banner-bar, var(--info));--_banner-pad-y: var(--ds-banner-pad-y, var(--space-3));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-4));--_banner-radius: var(--ds-banner-radius, var(--radius-md));--_banner-bar-width: var(--ds-banner-bar-width, var(--banner-bar-w));--_banner-title-text-color: var(--ds-banner-title-text-color, var(--text-primary));--_banner-close-icon-color: var(--ds-banner-close-icon-color, var(--icon-default));--_banner-close-icon-color-hover: var(--ds-banner-close-icon-color-hover, var(--icon-strong));display:flex;gap:var(--space-3);padding:var(--_banner-pad-y) var(--_banner-pad-x);border-radius:var(--_banner-radius);background-color:var(--_banner-bg-color);color:var(--_banner-text-color)}:host(:not(.no-rail)) .banner{border-left:var(--_banner-bar-width) solid var(--_banner-bar)}.banner.success{--_banner-bar: var(--ds-banner-bar, var(--success));--_banner-bg-color: var(--ds-banner-bg-color, var(--success-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--success-text))}.banner.warning{--_banner-bar: var(--ds-banner-bar, var(--warning));--_banner-bg-color: var(--ds-banner-bg-color, var(--warning-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--warning-text))}.banner.severe{--_banner-bar: var(--ds-banner-bar, var(--warning-hover));--_banner-bg-color: var(--ds-banner-bg-color, var(--warning-muted));--_banner-text-color: var(--ds-banner-text-color, var(--warning-text))}.banner.error{--_banner-bar: var(--ds-banner-bar, var(--error));--_banner-bg-color: var(--ds-banner-bg-color, var(--error-subtitle));--_banner-text-color: var(--ds-banner-text-color, var(--error-text))}.banner.neutral{--_banner-bar: var(--ds-banner-bar, var(--border-strong));--_banner-bg-color: var(--ds-banner-bg-color, var(--surface-secondary));--_banner-text-color: var(--ds-banner-text-color, var(--text-secondary))}.banner .icon{flex-shrink:0;color:inherit;margin-top:var(--banner-ic-mt)}.banner .body{flex:1;min-width:0}.banner .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_banner-title-text-color);margin:0 0 var(--space-1)}.banner .close{background:none;border:0;cursor:pointer;color:var(--_banner-close-icon-color)}.banner .close:hover{color:var(--_banner-close-icon-color-hover)}.banner .actions{display:flex;gap:var(--space-2)}.banner .actions:empty{display:none}.banner.layout-stacked{flex-wrap:wrap;align-items:flex-start}.banner.layout-stacked .actions{flex-basis:100%;margin-top:var(--space-2);padding-left:calc(20px + var(--space-3))}.banner.layout-row{align-items:center}.banner.layout-row .body{flex:1;min-width:0}.banner.layout-row .actions{flex-shrink:0}.banner.compact{align-items:center;--_banner-pad-y: var(--ds-banner-pad-y, var(--space-2));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-3))}.banner.compact .icon{margin-top:0}.banner.compact .title{margin:0;white-space:nowrap}\n"] }]
|
|
2041
2324
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], accentRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentRail", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], noRail: [{
|
|
2042
2325
|
type: HostBinding,
|
|
2043
2326
|
args: ['class.no-rail']
|
|
@@ -2062,19 +2345,24 @@ class DropzoneComponent {
|
|
|
2062
2345
|
fileRemoved = output();
|
|
2063
2346
|
classes = computed(() => {
|
|
2064
2347
|
const parts = ['dropzone'];
|
|
2065
|
-
if (this.dragOver())
|
|
2348
|
+
if (this.dragOver()) {
|
|
2066
2349
|
parts.push('active');
|
|
2067
|
-
|
|
2350
|
+
}
|
|
2351
|
+
if (this.files().length > 0) {
|
|
2068
2352
|
parts.push('has-files');
|
|
2069
|
-
|
|
2353
|
+
}
|
|
2354
|
+
if (this.disabled()) {
|
|
2070
2355
|
parts.push('disabled');
|
|
2071
|
-
|
|
2356
|
+
}
|
|
2357
|
+
if (this.single()) {
|
|
2072
2358
|
parts.push('single');
|
|
2359
|
+
}
|
|
2073
2360
|
return parts.join(' ');
|
|
2074
2361
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2075
2362
|
onDragOver(event) {
|
|
2076
|
-
if (this.disabled())
|
|
2363
|
+
if (this.disabled()) {
|
|
2077
2364
|
return;
|
|
2365
|
+
}
|
|
2078
2366
|
event.preventDefault();
|
|
2079
2367
|
this.dragOver.set(true);
|
|
2080
2368
|
}
|
|
@@ -2084,42 +2372,50 @@ class DropzoneComponent {
|
|
|
2084
2372
|
onDrop(event) {
|
|
2085
2373
|
event.preventDefault();
|
|
2086
2374
|
this.dragOver.set(false);
|
|
2087
|
-
if (this.disabled())
|
|
2375
|
+
if (this.disabled()) {
|
|
2088
2376
|
return;
|
|
2377
|
+
}
|
|
2089
2378
|
const list = event.dataTransfer?.files;
|
|
2090
|
-
if (list)
|
|
2379
|
+
if (list) {
|
|
2091
2380
|
this.filesAdded.emit(Array.from(list));
|
|
2381
|
+
}
|
|
2092
2382
|
}
|
|
2093
2383
|
onPickerChange(event) {
|
|
2094
|
-
if (this.disabled())
|
|
2384
|
+
if (this.disabled()) {
|
|
2095
2385
|
return;
|
|
2386
|
+
}
|
|
2096
2387
|
const list = event.target.files;
|
|
2097
|
-
if (list)
|
|
2388
|
+
if (list) {
|
|
2098
2389
|
this.filesAdded.emit(Array.from(list));
|
|
2390
|
+
}
|
|
2099
2391
|
}
|
|
2100
2392
|
onRemove(file) {
|
|
2101
2393
|
this.fileRemoved.emit(file);
|
|
2102
2394
|
}
|
|
2103
2395
|
formatSize(bytes) {
|
|
2104
|
-
if (bytes < 1024)
|
|
2396
|
+
if (bytes < 1024) {
|
|
2105
2397
|
return `${bytes} B`;
|
|
2106
|
-
|
|
2398
|
+
}
|
|
2399
|
+
if (bytes < 1024 * 1024) {
|
|
2107
2400
|
return `${(bytes / 1024).toFixed(1)} KB`;
|
|
2401
|
+
}
|
|
2108
2402
|
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
2109
2403
|
}
|
|
2110
2404
|
fileIcon(state) {
|
|
2111
|
-
if (state === 'success')
|
|
2405
|
+
if (state === 'success') {
|
|
2112
2406
|
return 'check';
|
|
2113
|
-
|
|
2407
|
+
}
|
|
2408
|
+
if (state === 'error') {
|
|
2114
2409
|
return 'error';
|
|
2410
|
+
}
|
|
2115
2411
|
return 'file';
|
|
2116
2412
|
}
|
|
2117
2413
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2118
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DropzoneComponent, isStandalone: true, selector: "ds-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, single: { classPropertyName: "single", publicName: "single", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesAdded: "filesAdded", fileRemoved: "fileRemoved" }, ngImport: i0, template: "<label\n [class]=\"classes()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <input\n type=\"file\"\n class=\"dz-input\"\n aria-label=\"Upload files\"\n [attr.accept]=\"accept() || null\"\n [multiple]=\"single() ? false : multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onPickerChange($event)\"\n />\n @if (files().length === 0) {\n <ds-icon
|
|
2414
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DropzoneComponent, isStandalone: true, selector: "ds-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, single: { classPropertyName: "single", publicName: "single", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesAdded: "filesAdded", fileRemoved: "fileRemoved" }, ngImport: i0, template: "<label\n [class]=\"classes()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <input\n type=\"file\"\n class=\"dz-input\"\n aria-label=\"Upload files\"\n [attr.accept]=\"accept() || null\"\n [multiple]=\"single() ? false : multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onPickerChange($event)\"\n />\n\n @if (files().length === 0) {\n <ds-icon\n name=\"upload\"\n [size]=\"24\"\n >\n </ds-icon>\n\n <div class=\"title\">\n Drop files here\n </div>\n\n <div class=\"hint\">\n or click to browse\n </div>\n\n <ng-content select=\"[hint]\"></ng-content>\n } @else {\n <div class=\"file-list\">\n @for (file of files(); track file.id) {\n <div [class]=\"'file ' + file.state\">\n <ds-icon\n class=\"icon\"\n [name]=\"fileIcon(file.state)\"\n [size]=\"20\"\n >\n </ds-icon>\n\n <div class=\"main\">\n <div class=\"name\">\n {{ file.name }}\n </div>\n\n <div class=\"meta\">\n {{ formatSize(file.size) }} \u00B7 {{ file.state }}\n </div>\n\n @if (file.state === 'uploading') {\n <div class=\"progress\">\n <div\n class=\"progress-fill\"\n [style.width.%]=\"file.progress\"\n >\n </div>\n </div>\n }\n </div>\n\n <button\n class=\"remove\"\n type=\"button\"\n [attr.aria-label]=\"'Remove ' + file.name\"\n (click)=\"\n onRemove(file); $event.preventDefault(); $event.stopPropagation()\n \"\n >\n <ds-icon\n name=\"x\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n </div>\n }\n </div>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_dropzone-bg-color: var(--ds-dropzone-bg-color, var(--surface-default));--_dropzone-bg-color-hover: var(--ds-dropzone-bg-color-hover, var(--primary-subtitle));--_dropzone-bg-color-active: var(--ds-dropzone-bg-color-active, var(--primary-subtitle));--_dropzone-border: var(--ds-dropzone-border, var(--border-default));--_dropzone-border-hover: var(--ds-dropzone-border-hover, var(--primary));--_dropzone-border-active: var(--ds-dropzone-border-active, var(--primary));--_dropzone-text-color: var(--ds-dropzone-text-color, var(--text-secondary));--_dropzone-text-color-active: var(--ds-dropzone-text-color-active, var(--primary-strong));--_dropzone-radius: var(--ds-dropzone-radius, var(--radius-lg));--_dropzone-file-progress: var(--ds-dropzone-file-progress, var(--primary));--_dropzone-file-success: var(--ds-dropzone-file-success, var(--success));--_dropzone-file-error: var(--ds-dropzone-file-error, var(--error));display:flex;flex-direction:column;min-width:0}.dz-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.dropzone:focus-within{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px}.dropzone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width-strong) dashed var(--_dropzone-border);border-radius:var(--_dropzone-radius);padding:var(--space-6);text-align:center;background-color:var(--_dropzone-bg-color);cursor:pointer;min-height:160px}.dropzone:hover{border-color:var(--_dropzone-border-hover);background-color:var(--_dropzone-bg-color-hover)}.dropzone.active{border-color:var(--_dropzone-border-active);background-color:var(--_dropzone-bg-color-active)}.dropzone.has-files{align-items:stretch;text-align:left;min-height:0;cursor:default}.dropzone.disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;pointer-events:none}.dropzone.single{max-width:var(--col-cap-text)}.dropzone .title{font:var(--font-weight-bold) var(--font-size-m)/var(--line-height-snug) var(--font-heading);margin:0 0 var(--space-1)}.dropzone .hint{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_dropzone-text-color)}.dropzone [hint]{margin:var(--space-3) calc(var(--space-6) * -1) 0;padding:var(--space-3) var(--space-6) 0;border-top:var(--border-width-default) solid var(--border-subtitle);align-self:stretch;text-align:center;font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);letter-spacing:var(--letter-spacing-wide)}.dropzone .file-list{width:100%;margin-top:var(--space-4);display:grid;gap:var(--space-2)}.dropzone .file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}.dropzone .file .icon{flex-shrink:0;color:var(--icon-default)}.dropzone .file .main{flex:1;min-width:0}.dropzone .file .name{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary)}.dropzone .file .meta{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary)}.dropzone .file .progress{height:var(--border-width-strong);background:var(--surface-secondary);border-radius:var(--radius-pill);margin-top:var(--space-1)}.dropzone .file .progress-fill{height:100%;background:var(--_dropzone-file-progress);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}.dropzone .file .remove{background:none;border:0;cursor:pointer;color:var(--icon-default)}.dropzone .file .remove:hover{color:var(--icon-strong)}.dropzone .file.uploading .icon{color:var(--_dropzone-file-progress)}.dropzone .file.success{border-color:var(--_dropzone-file-success)}.dropzone .file.success .icon{color:var(--_dropzone-file-success)}.dropzone .file.error{border-color:var(--_dropzone-file-error)}.dropzone .file.error .icon{color:var(--_dropzone-file-error)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2119
2415
|
}
|
|
2120
2416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropzoneComponent, decorators: [{
|
|
2121
2417
|
type: Component,
|
|
2122
|
-
args: [{ selector: 'ds-dropzone', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<label\n [class]=\"classes()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <input\n type=\"file\"\n class=\"dz-input\"\n aria-label=\"Upload files\"\n [attr.accept]=\"accept() || null\"\n [multiple]=\"single() ? false : multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onPickerChange($event)\"\n />\n @if (files().length === 0) {\n <ds-icon
|
|
2418
|
+
args: [{ selector: 'ds-dropzone', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<label\n [class]=\"classes()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <input\n type=\"file\"\n class=\"dz-input\"\n aria-label=\"Upload files\"\n [attr.accept]=\"accept() || null\"\n [multiple]=\"single() ? false : multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onPickerChange($event)\"\n />\n\n @if (files().length === 0) {\n <ds-icon\n name=\"upload\"\n [size]=\"24\"\n >\n </ds-icon>\n\n <div class=\"title\">\n Drop files here\n </div>\n\n <div class=\"hint\">\n or click to browse\n </div>\n\n <ng-content select=\"[hint]\"></ng-content>\n } @else {\n <div class=\"file-list\">\n @for (file of files(); track file.id) {\n <div [class]=\"'file ' + file.state\">\n <ds-icon\n class=\"icon\"\n [name]=\"fileIcon(file.state)\"\n [size]=\"20\"\n >\n </ds-icon>\n\n <div class=\"main\">\n <div class=\"name\">\n {{ file.name }}\n </div>\n\n <div class=\"meta\">\n {{ formatSize(file.size) }} \u00B7 {{ file.state }}\n </div>\n\n @if (file.state === 'uploading') {\n <div class=\"progress\">\n <div\n class=\"progress-fill\"\n [style.width.%]=\"file.progress\"\n >\n </div>\n </div>\n }\n </div>\n\n <button\n class=\"remove\"\n type=\"button\"\n [attr.aria-label]=\"'Remove ' + file.name\"\n (click)=\"\n onRemove(file); $event.preventDefault(); $event.stopPropagation()\n \"\n >\n <ds-icon\n name=\"x\"\n [size]=\"14\"\n >\n </ds-icon>\n </button>\n </div>\n }\n </div>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_dropzone-bg-color: var(--ds-dropzone-bg-color, var(--surface-default));--_dropzone-bg-color-hover: var(--ds-dropzone-bg-color-hover, var(--primary-subtitle));--_dropzone-bg-color-active: var(--ds-dropzone-bg-color-active, var(--primary-subtitle));--_dropzone-border: var(--ds-dropzone-border, var(--border-default));--_dropzone-border-hover: var(--ds-dropzone-border-hover, var(--primary));--_dropzone-border-active: var(--ds-dropzone-border-active, var(--primary));--_dropzone-text-color: var(--ds-dropzone-text-color, var(--text-secondary));--_dropzone-text-color-active: var(--ds-dropzone-text-color-active, var(--primary-strong));--_dropzone-radius: var(--ds-dropzone-radius, var(--radius-lg));--_dropzone-file-progress: var(--ds-dropzone-file-progress, var(--primary));--_dropzone-file-success: var(--ds-dropzone-file-success, var(--success));--_dropzone-file-error: var(--ds-dropzone-file-error, var(--error));display:flex;flex-direction:column;min-width:0}.dz-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.dropzone:focus-within{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px}.dropzone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width-strong) dashed var(--_dropzone-border);border-radius:var(--_dropzone-radius);padding:var(--space-6);text-align:center;background-color:var(--_dropzone-bg-color);cursor:pointer;min-height:160px}.dropzone:hover{border-color:var(--_dropzone-border-hover);background-color:var(--_dropzone-bg-color-hover)}.dropzone.active{border-color:var(--_dropzone-border-active);background-color:var(--_dropzone-bg-color-active)}.dropzone.has-files{align-items:stretch;text-align:left;min-height:0;cursor:default}.dropzone.disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;pointer-events:none}.dropzone.single{max-width:var(--col-cap-text)}.dropzone .title{font:var(--font-weight-bold) var(--font-size-m)/var(--line-height-snug) var(--font-heading);margin:0 0 var(--space-1)}.dropzone .hint{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_dropzone-text-color)}.dropzone [hint]{margin:var(--space-3) calc(var(--space-6) * -1) 0;padding:var(--space-3) var(--space-6) 0;border-top:var(--border-width-default) solid var(--border-subtitle);align-self:stretch;text-align:center;font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);letter-spacing:var(--letter-spacing-wide)}.dropzone .file-list{width:100%;margin-top:var(--space-4);display:grid;gap:var(--space-2)}.dropzone .file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}.dropzone .file .icon{flex-shrink:0;color:var(--icon-default)}.dropzone .file .main{flex:1;min-width:0}.dropzone .file .name{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary)}.dropzone .file .meta{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary)}.dropzone .file .progress{height:var(--border-width-strong);background:var(--surface-secondary);border-radius:var(--radius-pill);margin-top:var(--space-1)}.dropzone .file .progress-fill{height:100%;background:var(--_dropzone-file-progress);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}.dropzone .file .remove{background:none;border:0;cursor:pointer;color:var(--icon-default)}.dropzone .file .remove:hover{color:var(--icon-strong)}.dropzone .file.uploading .icon{color:var(--_dropzone-file-progress)}.dropzone .file.success{border-color:var(--_dropzone-file-success)}.dropzone .file.success .icon{color:var(--_dropzone-file-success)}.dropzone .file.error{border-color:var(--_dropzone-file-error)}.dropzone .file.error .icon{color:var(--_dropzone-file-error)}\n"] }]
|
|
2123
2419
|
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], single: [{ type: i0.Input, args: [{ isSignal: true, alias: "single", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
|
|
2124
2420
|
|
|
2125
2421
|
class MenuItemComponent {
|
|
@@ -2149,17 +2445,18 @@ class MenuItemComponent {
|
|
|
2149
2445
|
return this.button().nativeElement.textContent?.trim() ?? '';
|
|
2150
2446
|
}
|
|
2151
2447
|
onClick(event) {
|
|
2152
|
-
if (this.disabled())
|
|
2448
|
+
if (this.disabled()) {
|
|
2153
2449
|
return;
|
|
2450
|
+
}
|
|
2154
2451
|
this.pressed.emit(event);
|
|
2155
2452
|
this.closeRef?.close();
|
|
2156
2453
|
}
|
|
2157
2454
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MenuItemComponent, isStandalone: true, selector: "ds-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { attributes: { "role": "none" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #button\n class=\"menu-item\"\n type=\"button\"\n role=\"menuitem\"\n [attr.tabindex]=\"tabbable() ? 0 : -1\"\n [disabled]=\"disabled()\"\n [class.danger]=\"danger()\"\n (click)=\"onClick($event)\"\n>\n @if (icon()) {\n <ds-icon
|
|
2455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MenuItemComponent, isStandalone: true, selector: "ds-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { attributes: { "role": "none" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #button\n class=\"menu-item\"\n type=\"button\"\n role=\"menuitem\"\n [attr.tabindex]=\"tabbable() ? 0 : -1\"\n [disabled]=\"disabled()\"\n [class.danger]=\"danger()\"\n (click)=\"onClick($event)\"\n>\n @if (icon()) {\n <ds-icon\n [name]=\"icon()!\"\n [size]=\"16\"\n >\n </ds-icon>\n } @else {\n <span class=\"menu-item-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--_menu-item-label-color: var(--ds-menu-item-label-color, var(--text-primary));--_menu-item-focus-shadow: var(--ds-menu-item-focus-shadow, var(--ds-control-focus-shadow));display:block}.menu-item{display:flex;align-items:center;gap:var(--space-2-5);width:100%;padding:var(--space-2) var(--space-3);background:transparent;border:0;border-radius:var(--radius-md);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_menu-item-label-color);cursor:pointer;text-align:left;transition:background-color var(--duration-fast) var(--ease-standard)}.menu-item:hover{background:var(--surface-secondary)}.menu-item:focus-visible{outline:none;box-shadow:inset var(--_menu-item-focus-shadow)}.menu-item[disabled]{color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.menu-item[disabled]:hover{background:transparent}.menu-item.danger{color:var(--error-text)}.menu-item.danger:hover{background:var(--error-subtitle)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2159
2456
|
}
|
|
2160
2457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
2161
2458
|
type: Component,
|
|
2162
|
-
args: [{ selector: 'ds-menu-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'none' }, template: "<button\n #button\n class=\"menu-item\"\n type=\"button\"\n role=\"menuitem\"\n [attr.tabindex]=\"tabbable() ? 0 : -1\"\n [disabled]=\"disabled()\"\n [class.danger]=\"danger()\"\n (click)=\"onClick($event)\"\n>\n @if (icon()) {\n <ds-icon
|
|
2459
|
+
args: [{ selector: 'ds-menu-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'none' }, template: "<button\n #button\n class=\"menu-item\"\n type=\"button\"\n role=\"menuitem\"\n [attr.tabindex]=\"tabbable() ? 0 : -1\"\n [disabled]=\"disabled()\"\n [class.danger]=\"danger()\"\n (click)=\"onClick($event)\"\n>\n @if (icon()) {\n <ds-icon\n [name]=\"icon()!\"\n [size]=\"16\"\n >\n </ds-icon>\n } @else {\n <span class=\"menu-item-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--_menu-item-label-color: var(--ds-menu-item-label-color, var(--text-primary));--_menu-item-focus-shadow: var(--ds-menu-item-focus-shadow, var(--ds-control-focus-shadow));display:block}.menu-item{display:flex;align-items:center;gap:var(--space-2-5);width:100%;padding:var(--space-2) var(--space-3);background:transparent;border:0;border-radius:var(--radius-md);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_menu-item-label-color);cursor:pointer;text-align:left;transition:background-color var(--duration-fast) var(--ease-standard)}.menu-item:hover{background:var(--surface-secondary)}.menu-item:focus-visible{outline:none;box-shadow:inset var(--_menu-item-focus-shadow)}.menu-item[disabled]{color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.menu-item[disabled]:hover{background:transparent}.menu-item.danger{color:var(--error-text)}.menu-item.danger:hover{background:var(--error-subtitle)}\n"] }]
|
|
2163
2460
|
}], propDecorators: { button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
|
|
2164
2461
|
|
|
2165
2462
|
class MenuComponent {
|
|
@@ -2170,8 +2467,9 @@ class MenuComponent {
|
|
|
2170
2467
|
// Roving tabindex: exactly one enabled item is tabbable (0), the rest -1.
|
|
2171
2468
|
effect(() => {
|
|
2172
2469
|
const items = this.items();
|
|
2173
|
-
if (!items.length)
|
|
2470
|
+
if (!items.length) {
|
|
2174
2471
|
return;
|
|
2472
|
+
}
|
|
2175
2473
|
let index = this.activeIndex();
|
|
2176
2474
|
if (index >= items.length || items[index].disabled()) {
|
|
2177
2475
|
index = items.findIndex((item) => !item.disabled());
|
|
@@ -2181,8 +2479,9 @@ class MenuComponent {
|
|
|
2181
2479
|
}
|
|
2182
2480
|
onKeydown(event) {
|
|
2183
2481
|
const items = this.items();
|
|
2184
|
-
if (!items.length)
|
|
2482
|
+
if (!items.length) {
|
|
2185
2483
|
return;
|
|
2484
|
+
}
|
|
2186
2485
|
const count = items.length;
|
|
2187
2486
|
const focused = items.findIndex((item) => item.contains(event.target));
|
|
2188
2487
|
const from = focused >= 0 ? focused : this.activeIndex();
|
|
@@ -2211,7 +2510,8 @@ class MenuComponent {
|
|
|
2211
2510
|
case 'End':
|
|
2212
2511
|
next = count - 1;
|
|
2213
2512
|
break;
|
|
2214
|
-
default:
|
|
2513
|
+
default:
|
|
2514
|
+
return;
|
|
2215
2515
|
}
|
|
2216
2516
|
event.preventDefault();
|
|
2217
2517
|
// Skip disabled items in the travel direction (guard against all-disabled).
|
|
@@ -2221,8 +2521,9 @@ class MenuComponent {
|
|
|
2221
2521
|
next = (next + step + count) % count;
|
|
2222
2522
|
guard++;
|
|
2223
2523
|
}
|
|
2224
|
-
if (!items[next] || items[next].disabled())
|
|
2524
|
+
if (!items[next] || items[next].disabled()) {
|
|
2225
2525
|
return;
|
|
2526
|
+
}
|
|
2226
2527
|
this.focusItem(next);
|
|
2227
2528
|
}
|
|
2228
2529
|
typeAhead(char, from, items) {
|
|
@@ -2242,11 +2543,11 @@ class MenuComponent {
|
|
|
2242
2543
|
this.items()[index].focus();
|
|
2243
2544
|
}
|
|
2244
2545
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: MenuComponent, isStandalone: true, selector: "ds-menu", host: { listeners: { "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "items", predicate: MenuItemComponent, isSignal: true }], ngImport: i0, template: "<ul
|
|
2546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: MenuComponent, isStandalone: true, selector: "ds-menu", host: { listeners: { "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "items", predicate: MenuItemComponent, isSignal: true }], ngImport: i0, template: "<ul\n class=\"menu\"\n role=\"menu\"\n>\n <ng-content></ng-content>\n</ul>\n", styles: [":host{display:block;background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-md);padding:var(--space-1)}:host-context(.popover){background:transparent;border:0;border-radius:0;padding:0}.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-0-5)}\n"] });
|
|
2246
2547
|
}
|
|
2247
2548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2248
2549
|
type: Component,
|
|
2249
|
-
args: [{ selector: 'ds-menu', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: { '(keydown)': 'onKeydown($event)' }, template: "<ul
|
|
2550
|
+
args: [{ selector: 'ds-menu', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: { '(keydown)': 'onKeydown($event)' }, template: "<ul\n class=\"menu\"\n role=\"menu\"\n>\n <ng-content></ng-content>\n</ul>\n", styles: [":host{display:block;background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-md);padding:var(--space-1)}:host-context(.popover){background:transparent;border:0;border-radius:0;padding:0}.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-0-5)}\n"] }]
|
|
2250
2551
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuItemComponent), { isSignal: true }] }] } });
|
|
2251
2552
|
|
|
2252
2553
|
class SpinnerComponent {
|
|
@@ -2257,7 +2558,7 @@ class SpinnerComponent {
|
|
|
2257
2558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
2258
2559
|
type: Component,
|
|
2259
2560
|
args: [{ selector: 'ds-spinner', standalone: true, template: '', host: {
|
|
2260
|
-
|
|
2561
|
+
role: 'status',
|
|
2261
2562
|
'aria-label': 'Loading',
|
|
2262
2563
|
'[class.sm]': "size() === 'sm'",
|
|
2263
2564
|
'[class.lg]': "size() === 'lg'",
|
|
@@ -2275,25 +2576,30 @@ class EmptyStateComponent {
|
|
|
2275
2576
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2276
2577
|
resolvedIcon = computed(() => {
|
|
2277
2578
|
const explicit = this.icon();
|
|
2278
|
-
if (explicit)
|
|
2579
|
+
if (explicit) {
|
|
2279
2580
|
return explicit;
|
|
2581
|
+
}
|
|
2280
2582
|
const variant = this.variant();
|
|
2281
|
-
if (variant === 'error')
|
|
2583
|
+
if (variant === 'error') {
|
|
2282
2584
|
return 'warn';
|
|
2283
|
-
|
|
2585
|
+
}
|
|
2586
|
+
if (variant === 'locked') {
|
|
2284
2587
|
return 'lock';
|
|
2285
|
-
|
|
2588
|
+
}
|
|
2589
|
+
if (variant === 'success') {
|
|
2286
2590
|
return 'success';
|
|
2287
|
-
|
|
2591
|
+
}
|
|
2592
|
+
if (variant === 'loading') {
|
|
2288
2593
|
return 'package';
|
|
2594
|
+
}
|
|
2289
2595
|
return 'package';
|
|
2290
2596
|
}, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
2291
2597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2292
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EmptyStateComponent, isStandalone: true, selector: "ds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\n <span class=\"icon-tile\">\n <ds-icon
|
|
2598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EmptyStateComponent, isStandalone: true, selector: "ds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\n <span class=\"icon-tile\">\n <ds-icon\n [name]=\"resolvedIcon()\"\n [size]=\"28\"\n >\n </ds-icon>\n </span>\n\n @if (title()) {\n <span class=\"title\">\n {{ title() }}\n </span>\n }\n\n @if (body()) {\n <span class=\"body\">\n {{ body() }}\n </span>\n }\n\n <span class=\"cta\">\n <ng-content select=\"[actions]\"></ng-content>\n </span>\n\n @if (variant() === 'loading') {\n <span class=\"overlay-spin\">\n <ds-spinner size=\"lg\" />\n </span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--surface-tint));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--text-secondary));--_es-title-text-color: var(--ds-empty-state-title-text-color, var(--text-primary));--_es-body-text-color: var(--ds-empty-state-body-text-color, var(--text-secondary));--_es-body-maxw: var(--ds-empty-state-body-maxw, var(--empty-body-maxw));--_es-pad: var(--ds-empty-state-pad, var(--space-12) var(--space-6));display:block}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--_es-pad);gap:var(--space-3);position:relative}.empty-state .icon-tile{width:var(--empty-icon-size);height:var(--empty-icon-size);border-radius:var(--radius-lg);background-color:var(--_es-tile-bg-color);color:var(--_es-tile-icon-color);display:grid;place-items:center;margin-bottom:var(--space-2)}.empty-state .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_es-title-text-color);margin:0}.empty-state .body{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_es-body-text-color);max-width:var(--_es-body-maxw);margin:0}.empty-state .cta{margin-top:var(--space-3);display:inline-flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:center}.empty-state .cta:empty{display:none;margin-top:0}.empty-state .overlay-spin{position:absolute;inset:0;display:grid;place-items:center;z-index:1}.empty-state .overlay-spin:before{content:\"\";position:absolute;inset:0;background:#ffffff80;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));border-radius:inherit}.empty-state .overlay-spin .spinner{position:relative;z-index:1}.empty-state.error{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--error-subtitle));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--error-text))}.empty-state.locked{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--surface-muted));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--text-tertiary))}.empty-state.success{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--success-subtitle));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--success-text))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "component", type: SpinnerComponent, selector: "ds-spinner", inputs: ["size"] }] });
|
|
2293
2599
|
}
|
|
2294
2600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
2295
2601
|
type: Component,
|
|
2296
|
-
args: [{ selector: 'ds-empty-state', standalone: true, imports: [IconComponent, SpinnerComponent], encapsulation: ViewEncapsulation.Emulated, template: "<span [class]=\"classes()\">\n <span class=\"icon-tile\">\n <ds-icon
|
|
2602
|
+
args: [{ selector: 'ds-empty-state', standalone: true, imports: [IconComponent, SpinnerComponent], encapsulation: ViewEncapsulation.Emulated, template: "<span [class]=\"classes()\">\n <span class=\"icon-tile\">\n <ds-icon\n [name]=\"resolvedIcon()\"\n [size]=\"28\"\n >\n </ds-icon>\n </span>\n\n @if (title()) {\n <span class=\"title\">\n {{ title() }}\n </span>\n }\n\n @if (body()) {\n <span class=\"body\">\n {{ body() }}\n </span>\n }\n\n <span class=\"cta\">\n <ng-content select=\"[actions]\"></ng-content>\n </span>\n\n @if (variant() === 'loading') {\n <span class=\"overlay-spin\">\n <ds-spinner size=\"lg\" />\n </span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--surface-tint));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--text-secondary));--_es-title-text-color: var(--ds-empty-state-title-text-color, var(--text-primary));--_es-body-text-color: var(--ds-empty-state-body-text-color, var(--text-secondary));--_es-body-maxw: var(--ds-empty-state-body-maxw, var(--empty-body-maxw));--_es-pad: var(--ds-empty-state-pad, var(--space-12) var(--space-6));display:block}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--_es-pad);gap:var(--space-3);position:relative}.empty-state .icon-tile{width:var(--empty-icon-size);height:var(--empty-icon-size);border-radius:var(--radius-lg);background-color:var(--_es-tile-bg-color);color:var(--_es-tile-icon-color);display:grid;place-items:center;margin-bottom:var(--space-2)}.empty-state .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_es-title-text-color);margin:0}.empty-state .body{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_es-body-text-color);max-width:var(--_es-body-maxw);margin:0}.empty-state .cta{margin-top:var(--space-3);display:inline-flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:center}.empty-state .cta:empty{display:none;margin-top:0}.empty-state .overlay-spin{position:absolute;inset:0;display:grid;place-items:center;z-index:1}.empty-state .overlay-spin:before{content:\"\";position:absolute;inset:0;background:#ffffff80;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));border-radius:inherit}.empty-state .overlay-spin .spinner{position:relative;z-index:1}.empty-state.error{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--error-subtitle));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--error-text))}.empty-state.locked{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--surface-muted));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--text-tertiary))}.empty-state.success{--_es-tile-bg-color: var(--ds-empty-state-tile-bg-color, var(--success-subtitle));--_es-tile-icon-color: var(--ds-empty-state-tile-icon-color, var(--success-text))}\n"] }]
|
|
2297
2603
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], body: [{ type: i0.Input, args: [{ isSignal: true, alias: "body", required: false }] }] } });
|
|
2298
2604
|
|
|
2299
2605
|
class ProgressComponent {
|
|
@@ -2302,8 +2608,8 @@ class ProgressComponent {
|
|
|
2302
2608
|
/** Accessible name for the progress bar (e.g. "Upload progress"). */
|
|
2303
2609
|
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2304
2610
|
clampedValue = computed(() => {
|
|
2305
|
-
const
|
|
2306
|
-
return Math.max(0, Math.min(100,
|
|
2611
|
+
const value = this.value();
|
|
2612
|
+
return Math.max(0, Math.min(100, value));
|
|
2307
2613
|
}, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
|
|
2308
2614
|
isIndet = computed(() => this.variant() === 'indeterminate', ...(ngDevMode ? [{ debugName: "isIndet" }] : /* istanbul ignore next */ []));
|
|
2309
2615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -2344,42 +2650,51 @@ class AccordionItemComponent {
|
|
|
2344
2650
|
this.expanded.set(!this.expanded());
|
|
2345
2651
|
}
|
|
2346
2652
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2347
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
2653
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: AccordionItemComponent, isStandalone: true, selector: "ds-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"head\"\n [id]=\"headId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n>\n <span>\n {{ title() }}\n </span>\n\n <ng-content select=\"[badge]\"></ng-content>\n\n <ds-icon\n name=\"chevronRight\"\n class=\"chev\"\n [size]=\"16\"\n />\n</button>\n\n<div\n class=\"body\"\n role=\"region\"\n [id]=\"bodyId\"\n [attr.aria-labelledby]=\"headId\"\n [class.is-open]=\"expanded()\"\n [attr.inert]=\"expanded() ? null : ''\"\n>\n <div class=\"body-inner\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}:host+:host{border-top:var(--border-width-default) solid var(--border-divider)}:host .head{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;background:var(--surface-default);text-align:left;cursor:pointer;font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}:host .head:hover{background:var(--surface-secondary)}:host .head:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}:host .head .chev{margin-left:auto;transition:transform var(--duration-base) var(--ease-standard);color:var(--icon-default)}:host .head[aria-expanded=true] .chev{transform:rotate(90deg)}:host .body{height:0;overflow:hidden;transition:height var(--duration-base) var(--ease-standard)}:host .body.is-open{height:auto}@media(prefers-reduced-motion:reduce){:host .body{transition:none}}:host .body-inner{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2348
2654
|
}
|
|
2349
2655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
2350
2656
|
type: Component,
|
|
2351
|
-
args: [{ selector: 'ds-accordion-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\n type=\"button\"\n class=\"head\"\n [id]=\"headId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n>\n <span
|
|
2657
|
+
args: [{ selector: 'ds-accordion-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\n type=\"button\"\n class=\"head\"\n [id]=\"headId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n>\n <span>\n {{ title() }}\n </span>\n\n <ng-content select=\"[badge]\"></ng-content>\n\n <ds-icon\n name=\"chevronRight\"\n class=\"chev\"\n [size]=\"16\"\n />\n</button>\n\n<div\n class=\"body\"\n role=\"region\"\n [id]=\"bodyId\"\n [attr.aria-labelledby]=\"headId\"\n [class.is-open]=\"expanded()\"\n [attr.inert]=\"expanded() ? null : ''\"\n>\n <div class=\"body-inner\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}:host+:host{border-top:var(--border-width-default) solid var(--border-divider)}:host .head{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;background:var(--surface-default);text-align:left;cursor:pointer;font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}:host .head:hover{background:var(--surface-secondary)}:host .head:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}:host .head .chev{margin-left:auto;transition:transform var(--duration-base) var(--ease-standard);color:var(--icon-default)}:host .head[aria-expanded=true] .chev{transform:rotate(90deg)}:host .body{height:0;overflow:hidden;transition:height var(--duration-base) var(--ease-standard)}:host .body.is-open{height:auto}@media(prefers-reduced-motion:reduce){:host .body{transition:none}}:host .body-inner{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans)}\n"] }]
|
|
2352
2658
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
|
|
2353
2659
|
|
|
2354
2660
|
class StepperComponent {
|
|
2355
2661
|
steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
2356
2662
|
current = input(0, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
|
|
2663
|
+
labelPosition = input('bottom', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
2357
2664
|
stepState(i) {
|
|
2358
|
-
const
|
|
2359
|
-
if (i <
|
|
2665
|
+
const currentStep = this.current();
|
|
2666
|
+
if (i < currentStep) {
|
|
2360
2667
|
return 'completed';
|
|
2361
|
-
|
|
2668
|
+
}
|
|
2669
|
+
if (i === currentStep) {
|
|
2362
2670
|
return 'current';
|
|
2671
|
+
}
|
|
2363
2672
|
return 'upcoming';
|
|
2364
2673
|
}
|
|
2365
2674
|
nodeClass(i) {
|
|
2366
|
-
const
|
|
2367
|
-
if (i <
|
|
2675
|
+
const currentStep = this.current();
|
|
2676
|
+
if (i < currentStep) {
|
|
2368
2677
|
return 'node done';
|
|
2369
|
-
|
|
2678
|
+
}
|
|
2679
|
+
if (i === currentStep) {
|
|
2370
2680
|
return 'node active';
|
|
2681
|
+
}
|
|
2371
2682
|
return 'node';
|
|
2372
2683
|
}
|
|
2373
|
-
|
|
2374
|
-
return i < this.current() ? '
|
|
2684
|
+
connectorClass(i) {
|
|
2685
|
+
return i < this.current() ? 'connector done' : 'connector';
|
|
2375
2686
|
}
|
|
2376
2687
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "ds-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list", "aria-label": "Progress" } }, ngImport: i0, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\n <span\n
|
|
2688
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "ds-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list", "aria-label": "Progress" }, properties: { "class.labels-inline": "labelPosition() === 'inline'" } }, ngImport: i0, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\n <span\n role=\"listitem\"\n class=\"step\"\n [class.is-current]=\"i === current()\"\n [attr.aria-current]=\"i === current() ? 'step' : null\"\n >\n <span\n aria-hidden=\"true\"\n [class]=\"nodeClass(i)\"\n >\n @if (i < current()) {\n <ds-icon\n name=\"check\"\n [size]=\"14\"\n />\n } @else {\n {{ i + 1 }}\n }\n </span>\n\n <span\n aria-hidden=\"true\"\n class=\"step-label\"\n >\n {{ label }}\n </span>\n\n @if (!last) {\n <span\n aria-hidden=\"true\"\n [class]=\"connectorClass(i)\"\n >\n </span>\n }\n\n <span class=\"visually-hidden\">\n Step {{ i + 1 }}: {{ label }} ({{ stepState(i) }})\n </span>\n </span>\n}\n", styles: [":host{display:flex;align-items:flex-start;--_stepper-label-color: var(--ds-stepper-label-color, var(--text-tertiary));--_stepper-label-color-current: var(--ds-stepper-label-color-current, var(--text-primary));--_stepper-label-font-size: var(--ds-stepper-label-font-size, var(--font-size-xs))}:host .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host .step{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}:host .node{position:relative;z-index:1;width:var(--stepper-node-size);height:var(--stepper-node-size);border-radius:var(--radius-pill);display:grid;place-items:center;border:var(--border-width-default) solid var(--border-strong);background:var(--surface-default);color:var(--text-tertiary);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans)}:host .node.done{background:var(--primary-subtitle);border-color:var(--primary);color:var(--primary)}:host .node.active{background:var(--primary);border-color:var(--primary);color:var(--primary-on)}:host .connector{position:absolute;z-index:0;top:calc((var(--stepper-node-size) - var(--stepper-bar-h)) / 2);left:50%;width:100%;height:var(--stepper-bar-h);background:var(--border-divider)}:host .connector.done{background:var(--primary)}:host .step-label{max-width:14ch;margin-top:var(--space-2);font-size:var(--_stepper-label-font-size);font-weight:var(--font-weight-medium);line-height:var(--line-height-snug);color:var(--_stepper-label-color);overflow-wrap:anywhere}:host .step.is-current .step-label{font-weight:var(--font-weight-bold);color:var(--_stepper-label-color-current)}:host(.labels-inline){display:inline-flex;align-items:center;gap:var(--space-2)}:host(.labels-inline) .step{flex:0 0 auto;flex-direction:row;gap:var(--space-2)}:host(.labels-inline) .step-label{max-width:none;margin-top:0;white-space:nowrap}:host(.labels-inline) .connector{position:static;flex:0 0 auto;width:var(--stepper-bar-w)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2378
2689
|
}
|
|
2379
2690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2380
2691
|
type: Component,
|
|
2381
|
-
args: [{ selector: 'ds-stepper', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2382
|
-
|
|
2692
|
+
args: [{ selector: 'ds-stepper', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2693
|
+
role: 'list',
|
|
2694
|
+
'aria-label': 'Progress',
|
|
2695
|
+
'[class.labels-inline]': "labelPosition() === 'inline'",
|
|
2696
|
+
}, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\n <span\n role=\"listitem\"\n class=\"step\"\n [class.is-current]=\"i === current()\"\n [attr.aria-current]=\"i === current() ? 'step' : null\"\n >\n <span\n aria-hidden=\"true\"\n [class]=\"nodeClass(i)\"\n >\n @if (i < current()) {\n <ds-icon\n name=\"check\"\n [size]=\"14\"\n />\n } @else {\n {{ i + 1 }}\n }\n </span>\n\n <span\n aria-hidden=\"true\"\n class=\"step-label\"\n >\n {{ label }}\n </span>\n\n @if (!last) {\n <span\n aria-hidden=\"true\"\n [class]=\"connectorClass(i)\"\n >\n </span>\n }\n\n <span class=\"visually-hidden\">\n Step {{ i + 1 }}: {{ label }} ({{ stepState(i) }})\n </span>\n </span>\n}\n", styles: [":host{display:flex;align-items:flex-start;--_stepper-label-color: var(--ds-stepper-label-color, var(--text-tertiary));--_stepper-label-color-current: var(--ds-stepper-label-color-current, var(--text-primary));--_stepper-label-font-size: var(--ds-stepper-label-font-size, var(--font-size-xs))}:host .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host .step{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}:host .node{position:relative;z-index:1;width:var(--stepper-node-size);height:var(--stepper-node-size);border-radius:var(--radius-pill);display:grid;place-items:center;border:var(--border-width-default) solid var(--border-strong);background:var(--surface-default);color:var(--text-tertiary);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans)}:host .node.done{background:var(--primary-subtitle);border-color:var(--primary);color:var(--primary)}:host .node.active{background:var(--primary);border-color:var(--primary);color:var(--primary-on)}:host .connector{position:absolute;z-index:0;top:calc((var(--stepper-node-size) - var(--stepper-bar-h)) / 2);left:50%;width:100%;height:var(--stepper-bar-h);background:var(--border-divider)}:host .connector.done{background:var(--primary)}:host .step-label{max-width:14ch;margin-top:var(--space-2);font-size:var(--_stepper-label-font-size);font-weight:var(--font-weight-medium);line-height:var(--line-height-snug);color:var(--_stepper-label-color);overflow-wrap:anywhere}:host .step.is-current .step-label{font-weight:var(--font-weight-bold);color:var(--_stepper-label-color-current)}:host(.labels-inline){display:inline-flex;align-items:center;gap:var(--space-2)}:host(.labels-inline) .step{flex:0 0 auto;flex-direction:row;gap:var(--space-2)}:host(.labels-inline) .step-label{max-width:none;margin-top:0;white-space:nowrap}:host(.labels-inline) .connector{position:static;flex:0 0 auto;width:var(--stepper-bar-w)}\n"] }]
|
|
2697
|
+
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
|
|
2383
2698
|
|
|
2384
2699
|
class TooltipPanelComponent {
|
|
2385
2700
|
text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
@@ -2411,10 +2726,12 @@ class TooltipDirective {
|
|
|
2411
2726
|
timer = null;
|
|
2412
2727
|
tipId = `ds-tooltip-${++nextId$2}`;
|
|
2413
2728
|
onOpen() {
|
|
2414
|
-
if (!this.dsTooltip())
|
|
2729
|
+
if (!this.dsTooltip()) {
|
|
2415
2730
|
return;
|
|
2416
|
-
|
|
2731
|
+
}
|
|
2732
|
+
if (this.timer !== null) {
|
|
2417
2733
|
clearTimeout(this.timer);
|
|
2734
|
+
}
|
|
2418
2735
|
this.timer = window.setTimeout(() => this.show(), this.dsTooltipDelay());
|
|
2419
2736
|
}
|
|
2420
2737
|
onClose() {
|
|
@@ -2429,18 +2746,22 @@ class TooltipDirective {
|
|
|
2429
2746
|
.split(' ')
|
|
2430
2747
|
.filter((id) => id && id !== this.tipId)
|
|
2431
2748
|
.join(' ');
|
|
2432
|
-
if (remaining)
|
|
2749
|
+
if (remaining) {
|
|
2433
2750
|
host.setAttribute('aria-describedby', remaining);
|
|
2434
|
-
|
|
2751
|
+
}
|
|
2752
|
+
else {
|
|
2435
2753
|
host.removeAttribute('aria-describedby');
|
|
2754
|
+
}
|
|
2436
2755
|
}
|
|
2437
2756
|
onEscape() {
|
|
2438
|
-
if (this.ref)
|
|
2757
|
+
if (this.ref) {
|
|
2439
2758
|
this.onClose();
|
|
2759
|
+
}
|
|
2440
2760
|
}
|
|
2441
2761
|
show() {
|
|
2442
2762
|
const placement = this.dsTooltipPlacement();
|
|
2443
|
-
const positionStrategy = this.overlay
|
|
2763
|
+
const positionStrategy = this.overlay
|
|
2764
|
+
.position()
|
|
2444
2765
|
.flexibleConnectedTo(this.host)
|
|
2445
2766
|
.withPositions([this.positionFor(placement)]);
|
|
2446
2767
|
this.ref = this.overlay.create({
|
|
@@ -2455,16 +2776,40 @@ class TooltipDirective {
|
|
|
2455
2776
|
const existing = host.getAttribute('aria-describedby');
|
|
2456
2777
|
host.setAttribute('aria-describedby', existing ? `${existing} ${this.tipId}` : this.tipId);
|
|
2457
2778
|
}
|
|
2458
|
-
positionFor(
|
|
2459
|
-
switch (
|
|
2779
|
+
positionFor(placement) {
|
|
2780
|
+
switch (placement) {
|
|
2460
2781
|
case 'top':
|
|
2461
|
-
return {
|
|
2782
|
+
return {
|
|
2783
|
+
originX: 'center',
|
|
2784
|
+
originY: 'top',
|
|
2785
|
+
overlayX: 'center',
|
|
2786
|
+
overlayY: 'bottom',
|
|
2787
|
+
offsetY: -8,
|
|
2788
|
+
};
|
|
2462
2789
|
case 'bottom':
|
|
2463
|
-
return {
|
|
2790
|
+
return {
|
|
2791
|
+
originX: 'center',
|
|
2792
|
+
originY: 'bottom',
|
|
2793
|
+
overlayX: 'center',
|
|
2794
|
+
overlayY: 'top',
|
|
2795
|
+
offsetY: 8,
|
|
2796
|
+
};
|
|
2464
2797
|
case 'left':
|
|
2465
|
-
return {
|
|
2798
|
+
return {
|
|
2799
|
+
originX: 'start',
|
|
2800
|
+
originY: 'center',
|
|
2801
|
+
overlayX: 'end',
|
|
2802
|
+
overlayY: 'center',
|
|
2803
|
+
offsetX: -8,
|
|
2804
|
+
};
|
|
2466
2805
|
case 'right':
|
|
2467
|
-
return {
|
|
2806
|
+
return {
|
|
2807
|
+
originX: 'end',
|
|
2808
|
+
originY: 'center',
|
|
2809
|
+
overlayX: 'start',
|
|
2810
|
+
overlayY: 'center',
|
|
2811
|
+
offsetX: 8,
|
|
2812
|
+
};
|
|
2468
2813
|
}
|
|
2469
2814
|
}
|
|
2470
2815
|
ngOnDestroy() {
|
|
@@ -2513,18 +2858,32 @@ class PopoverComponent {
|
|
|
2513
2858
|
/** Open/closed state — for callers binding `aria-expanded` on the trigger. */
|
|
2514
2859
|
opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
|
|
2515
2860
|
toggle(trigger) {
|
|
2516
|
-
if (this.preview.staticPreview())
|
|
2861
|
+
if (this.preview.staticPreview()) {
|
|
2517
2862
|
return;
|
|
2863
|
+
}
|
|
2518
2864
|
if (this.ref) {
|
|
2519
2865
|
this.close();
|
|
2520
2866
|
return;
|
|
2521
2867
|
}
|
|
2522
2868
|
const align = this.align();
|
|
2523
|
-
const positionStrategy = this.overlay
|
|
2869
|
+
const positionStrategy = this.overlay
|
|
2870
|
+
.position()
|
|
2524
2871
|
.flexibleConnectedTo(trigger)
|
|
2525
2872
|
.withPositions([
|
|
2526
|
-
{
|
|
2527
|
-
|
|
2873
|
+
{
|
|
2874
|
+
originX: align,
|
|
2875
|
+
originY: 'bottom',
|
|
2876
|
+
overlayX: align,
|
|
2877
|
+
overlayY: 'top',
|
|
2878
|
+
offsetY: 4,
|
|
2879
|
+
},
|
|
2880
|
+
{
|
|
2881
|
+
originX: align,
|
|
2882
|
+
originY: 'top',
|
|
2883
|
+
overlayX: align,
|
|
2884
|
+
overlayY: 'bottom',
|
|
2885
|
+
offsetY: -4,
|
|
2886
|
+
},
|
|
2528
2887
|
]);
|
|
2529
2888
|
const cfg = {
|
|
2530
2889
|
positionStrategy,
|
|
@@ -2553,11 +2912,21 @@ class PopoverComponent {
|
|
|
2553
2912
|
this.close();
|
|
2554
2913
|
}
|
|
2555
2914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2556
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PopoverComponent, isStandalone: true, selector: "ds-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, panelRole: { classPropertyName: "panelRole", publicName: "panelRole", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2915
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PopoverComponent, isStandalone: true, selector: "ds-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, panelRole: { classPropertyName: "panelRole", publicName: "panelRole", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2916
|
+
{
|
|
2917
|
+
provide: DsOverlayCloseRef,
|
|
2918
|
+
useExisting: forwardRef(() => PopoverComponent),
|
|
2919
|
+
},
|
|
2920
|
+
], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "<!-- Projected content is captured ONCE here and stamped into whichever render\n site is active \u2014 duplicating ng-content across branches breaks projection. -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n\n@if (preview.staticPreview()) {\n <div\n class=\"popover\"\n [attr.role]=\"panelRole()\"\n [attr.aria-label]=\"panelLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </div>\n}\n\n<ng-template #panel>\n <div\n class=\"popover\"\n [attr.role]=\"panelRole()\"\n [attr.aria-label]=\"panelLabel()\"\n [cdkTrapFocus]=\"!!panelRole()\"\n [cdkTrapFocusAutoCapture]=\"!!panelRole()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.popover{background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);padding:var(--space-3);z-index:var(--layer-popover);max-width:var(--popover-maxw)}.popover:has(ds-menu){padding:0}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
2557
2921
|
}
|
|
2558
2922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2559
2923
|
type: Component,
|
|
2560
|
-
args: [{ selector: 'ds-popover', standalone: true, imports: [CdkTrapFocus, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], providers: [
|
|
2924
|
+
args: [{ selector: 'ds-popover', standalone: true, imports: [CdkTrapFocus, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], providers: [
|
|
2925
|
+
{
|
|
2926
|
+
provide: DsOverlayCloseRef,
|
|
2927
|
+
useExisting: forwardRef(() => PopoverComponent),
|
|
2928
|
+
},
|
|
2929
|
+
], template: "<!-- Projected content is captured ONCE here and stamped into whichever render\n site is active \u2014 duplicating ng-content across branches breaks projection. -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n\n@if (preview.staticPreview()) {\n <div\n class=\"popover\"\n [attr.role]=\"panelRole()\"\n [attr.aria-label]=\"panelLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </div>\n}\n\n<ng-template #panel>\n <div\n class=\"popover\"\n [attr.role]=\"panelRole()\"\n [attr.aria-label]=\"panelLabel()\"\n [cdkTrapFocus]=\"!!panelRole()\"\n [cdkTrapFocusAutoCapture]=\"!!panelRole()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.popover{background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);padding:var(--space-3);z-index:var(--layer-popover);max-width:var(--popover-maxw)}.popover:has(ds-menu){padding:0}\n"] }]
|
|
2561
2930
|
}], propDecorators: { panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], panelRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelRole", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }] } });
|
|
2562
2931
|
|
|
2563
2932
|
/**
|
|
@@ -2578,24 +2947,30 @@ class ToastComponent {
|
|
|
2578
2947
|
}
|
|
2579
2948
|
classes = computed(() => `toast ${this.variant()}`, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2580
2949
|
/** Errors/warnings interrupt (assertive); info/success wait their turn. */
|
|
2581
|
-
role = computed(() => this.variant() === 'error' || this.variant() === 'warning'
|
|
2950
|
+
role = computed(() => this.variant() === 'error' || this.variant() === 'warning'
|
|
2951
|
+
? 'alert'
|
|
2952
|
+
: 'status', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
|
|
2582
2953
|
defaultIcon = computed(() => {
|
|
2583
2954
|
switch (this.variant()) {
|
|
2584
|
-
case 'success':
|
|
2585
|
-
|
|
2586
|
-
case '
|
|
2587
|
-
|
|
2955
|
+
case 'success':
|
|
2956
|
+
return 'success';
|
|
2957
|
+
case 'warning':
|
|
2958
|
+
return 'warn';
|
|
2959
|
+
case 'error':
|
|
2960
|
+
return 'error';
|
|
2961
|
+
default:
|
|
2962
|
+
return 'info';
|
|
2588
2963
|
}
|
|
2589
2964
|
}, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
|
|
2590
2965
|
onDismiss() {
|
|
2591
2966
|
this.dismissed.emit();
|
|
2592
2967
|
}
|
|
2593
2968
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "ds-toast", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\"\n
|
|
2969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "ds-toast", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n aria-atomic=\"true\"\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\"\n>\n <ds-icon\n class=\"icon\"\n [name]=\"icon() ?? defaultIcon()\"\n [size]=\"16\"\n />\n\n <div class=\"body\">\n @if (title()) {\n <div class=\"title\">\n {{ title() }}\n </div>\n }\n {{ message() }}\n <ng-content></ng-content>\n </div>\n\n @if (action(); as act) {\n <button\n type=\"button\"\n class=\"action\"\n (click)=\"onAction(act)\"\n >\n {{ act.label }}\n </button>\n }\n\n <span class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </span>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"close\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"14\"\n />\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}:host(.leaving){opacity:0;transform:translateY(calc(var(--space-2) * -1));pointer-events:none}.toast{--_toast-bg-color: var(--ds-toast-bg-color, var(--surface-overlay));--_toast-border: var(--ds-toast-border, var(--border-default));--_toast-focus-shadow: var(--ds-toast-focus-shadow, var(--ds-control-focus-shadow));display:flex;align-items:flex-start;gap:var(--space-3);background-color:var(--_toast-bg-color);border:var(--border-width-default) solid var(--_toast-border);border-left:var(--toast-bar-w) solid var(--primary);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-toast);min-width:var(--toast-minw);max-width:var(--toast-maxw);animation:ds-toast-in var(--duration-slow) var(--ease-decelerate)}.toast .icon{color:var(--primary);flex-shrink:0;margin-top:var(--space-0-5)}.toast .body{flex:1;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-secondary)}.toast .title{font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-0-5)}.toast .close{border:0;background:transparent;color:var(--icon-default);cursor:pointer;padding:var(--space-0-5)}.toast .action{flex-shrink:0;align-self:center;border:0;background:transparent;color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.toast .action:hover{background:var(--surface-secondary)}.toast .action:focus-visible{outline:none;box-shadow:var(--_toast-focus-shadow)}.toast .actions{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}.toast .actions:empty{display:none}.toast.info{--_toast-bg-color: var(--ds-toast-bg-color-info, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-info, var(--ds-toast-border, var(--border-default)));border-left-color:var(--primary)}.toast.success{--_toast-bg-color: var(--ds-toast-bg-color-success, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-success, var(--ds-toast-border, var(--border-default)));border-left-color:var(--success)}.toast.success .icon{color:var(--success)}.toast.warning{--_toast-bg-color: var(--ds-toast-bg-color-warning, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-warning, var(--ds-toast-border, var(--border-default)));border-left-color:var(--warning-hover)}.toast.warning .icon{color:var(--warning-hover)}.toast.error{--_toast-bg-color: var(--ds-toast-bg-color-error, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-error, var(--ds-toast-border, var(--border-default)));border-left-color:var(--error)}.toast.error .icon{color:var(--error)}@keyframes ds-toast-in{0%{transform:translateY(calc(var(--space-2) * -1));opacity:0}to{transform:none;opacity:1}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2595
2970
|
}
|
|
2596
2971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2597
2972
|
type: Component,
|
|
2598
|
-
args: [{ selector: 'ds-toast', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\"\n
|
|
2973
|
+
args: [{ selector: 'ds-toast', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n aria-atomic=\"true\"\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\"\n>\n <ds-icon\n class=\"icon\"\n [name]=\"icon() ?? defaultIcon()\"\n [size]=\"16\"\n />\n\n <div class=\"body\">\n @if (title()) {\n <div class=\"title\">\n {{ title() }}\n </div>\n }\n {{ message() }}\n <ng-content></ng-content>\n </div>\n\n @if (action(); as act) {\n <button\n type=\"button\"\n class=\"action\"\n (click)=\"onAction(act)\"\n >\n {{ act.label }}\n </button>\n }\n\n <span class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </span>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"close\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"14\"\n />\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}:host(.leaving){opacity:0;transform:translateY(calc(var(--space-2) * -1));pointer-events:none}.toast{--_toast-bg-color: var(--ds-toast-bg-color, var(--surface-overlay));--_toast-border: var(--ds-toast-border, var(--border-default));--_toast-focus-shadow: var(--ds-toast-focus-shadow, var(--ds-control-focus-shadow));display:flex;align-items:flex-start;gap:var(--space-3);background-color:var(--_toast-bg-color);border:var(--border-width-default) solid var(--_toast-border);border-left:var(--toast-bar-w) solid var(--primary);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-toast);min-width:var(--toast-minw);max-width:var(--toast-maxw);animation:ds-toast-in var(--duration-slow) var(--ease-decelerate)}.toast .icon{color:var(--primary);flex-shrink:0;margin-top:var(--space-0-5)}.toast .body{flex:1;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-secondary)}.toast .title{font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-0-5)}.toast .close{border:0;background:transparent;color:var(--icon-default);cursor:pointer;padding:var(--space-0-5)}.toast .action{flex-shrink:0;align-self:center;border:0;background:transparent;color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.toast .action:hover{background:var(--surface-secondary)}.toast .action:focus-visible{outline:none;box-shadow:var(--_toast-focus-shadow)}.toast .actions{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}.toast .actions:empty{display:none}.toast.info{--_toast-bg-color: var(--ds-toast-bg-color-info, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-info, var(--ds-toast-border, var(--border-default)));border-left-color:var(--primary)}.toast.success{--_toast-bg-color: var(--ds-toast-bg-color-success, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-success, var(--ds-toast-border, var(--border-default)));border-left-color:var(--success)}.toast.success .icon{color:var(--success)}.toast.warning{--_toast-bg-color: var(--ds-toast-bg-color-warning, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-warning, var(--ds-toast-border, var(--border-default)));border-left-color:var(--warning-hover)}.toast.warning .icon{color:var(--warning-hover)}.toast.error{--_toast-bg-color: var(--ds-toast-bg-color-error, var(--ds-toast-bg-color, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-error, var(--ds-toast-border, var(--border-default)));border-left-color:var(--error)}.toast.error .icon{color:var(--error)}@keyframes ds-toast-in{0%{transform:translateY(calc(var(--space-2) * -1));opacity:0}to{transform:none;opacity:1}}\n"] }]
|
|
2599
2974
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
2600
2975
|
|
|
2601
2976
|
// Must match the leave transition on :host in toast.component.scss (--duration-base).
|
|
@@ -2607,8 +2982,9 @@ class ToastRegionComponent {
|
|
|
2607
2982
|
this.entries.update((existing) => [...existing, entry]);
|
|
2608
2983
|
}
|
|
2609
2984
|
remove(id) {
|
|
2610
|
-
if (this.leaving().has(id))
|
|
2985
|
+
if (this.leaving().has(id)) {
|
|
2611
2986
|
return;
|
|
2987
|
+
}
|
|
2612
2988
|
this.leaving.update((set) => new Set(set).add(id));
|
|
2613
2989
|
setTimeout(() => {
|
|
2614
2990
|
this.entries.update((existing) => existing.filter((entry) => entry.id !== id));
|
|
@@ -2676,8 +3052,9 @@ class ToastService {
|
|
|
2676
3052
|
this.regionRef?.instance.clear();
|
|
2677
3053
|
}
|
|
2678
3054
|
ensureRegion() {
|
|
2679
|
-
if (this.overlayRef)
|
|
3055
|
+
if (this.overlayRef) {
|
|
2680
3056
|
return;
|
|
3057
|
+
}
|
|
2681
3058
|
this.overlayRef = this.overlay.create({
|
|
2682
3059
|
hasBackdrop: false,
|
|
2683
3060
|
panelClass: 'ds-toast-panel',
|
|
@@ -2688,16 +3065,21 @@ class ToastService {
|
|
|
2688
3065
|
buildPositionStrategy() {
|
|
2689
3066
|
const config = this.position ?? DS_TOAST_POSITION_DEFAULT;
|
|
2690
3067
|
const strategy = this.overlay.position().global();
|
|
2691
|
-
if (config.verticalPosition === 'top')
|
|
3068
|
+
if (config.verticalPosition === 'top') {
|
|
2692
3069
|
strategy.top(config.offset);
|
|
2693
|
-
|
|
3070
|
+
}
|
|
3071
|
+
else {
|
|
2694
3072
|
strategy.bottom(config.offset);
|
|
2695
|
-
|
|
3073
|
+
}
|
|
3074
|
+
if (config.horizontalPosition === 'left') {
|
|
2696
3075
|
strategy.left(config.offset);
|
|
2697
|
-
|
|
3076
|
+
}
|
|
3077
|
+
else if (config.horizontalPosition === 'right') {
|
|
2698
3078
|
strategy.right(config.offset);
|
|
2699
|
-
|
|
3079
|
+
}
|
|
3080
|
+
else {
|
|
2700
3081
|
strategy.centerHorizontally();
|
|
3082
|
+
}
|
|
2701
3083
|
return strategy;
|
|
2702
3084
|
}
|
|
2703
3085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -2729,12 +3111,19 @@ class DrawerComponent {
|
|
|
2729
3111
|
this.open.set(false);
|
|
2730
3112
|
this.closed.emit();
|
|
2731
3113
|
}
|
|
3114
|
+
onEscape() {
|
|
3115
|
+
if (this.open()) {
|
|
3116
|
+
this.onClose();
|
|
3117
|
+
}
|
|
3118
|
+
}
|
|
2732
3119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2733
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DrawerComponent, isStandalone: true, selector: "ds-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, ngImport: i0, template: "@if (open()) {\n <div
|
|
3120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DrawerComponent, isStandalone: true, selector: "ds-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (open()) {\n <div\n class=\"drawer-scrim\"\n (click)=\"onClose()\"\n >\n </div>\n\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n [class]=\"classes()\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n (keydown.escape)=\"onClose()\"\n >\n <header class=\"header\">\n <h4\n class=\"title\"\n [id]=\"titleId\"\n >\n {{ title() }}\n </h4>\n\n <button\n type=\"button\"\n class=\"close\"\n aria-label=\"Close\"\n (click)=\"onClose()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"16\"\n />\n </button>\n </header>\n\n <div class=\"body\">\n <ng-content select=\"[drawer-body]\"></ng-content>\n </div>\n\n <div class=\"footer\">\n <ng-content select=\"[drawer-footer]\"></ng-content>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.drawer-scrim{position:fixed;inset:0;background:var(--scrim, hsla(220, 20%, 12%, .45));z-index:var(--layer-modal);animation:drawer-scrim-in var(--duration-fast, .12s) var(--ease-decelerate, ease-out)}@keyframes drawer-scrim-in{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer-w-md);max-width:100vw;background:var(--surface-overlay);box-shadow:var(--shadow-modal);z-index:var(--layer-modal);display:flex;flex-direction:column;animation:drawer-in var(--duration-slow) var(--ease-decelerate)}.drawer.lg{width:var(--drawer-w-lg)}.drawer .header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);border-bottom:var(--border-width-default) solid var(--border-divider)}.drawer .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);margin:0;flex:1}.drawer .close{background:transparent;border:0;width:var(--modal-close-size);height:var(--modal-close-size);color:var(--icon-default);cursor:pointer;padding:0}.drawer .close:hover{color:var(--icon-strong)}.drawer .body{flex:1;padding:var(--space-6);overflow-y:auto}.drawer .footer{padding:var(--space-4) var(--space-6);border-top:var(--border-width-default) solid var(--border-divider);display:flex;gap:var(--space-2);justify-content:flex-end}@keyframes drawer-in{0%{transform:translate(100%)}to{transform:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
|
|
2734
3121
|
}
|
|
2735
3122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
2736
3123
|
type: Component,
|
|
2737
|
-
args: [{ selector: 'ds-drawer', standalone: true, imports: [IconComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated,
|
|
3124
|
+
args: [{ selector: 'ds-drawer', standalone: true, imports: [IconComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
3125
|
+
'(document:keydown.escape)': 'onEscape()',
|
|
3126
|
+
}, template: "@if (open()) {\n <div\n class=\"drawer-scrim\"\n (click)=\"onClose()\"\n >\n </div>\n\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n [class]=\"classes()\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n (keydown.escape)=\"onClose()\"\n >\n <header class=\"header\">\n <h4\n class=\"title\"\n [id]=\"titleId\"\n >\n {{ title() }}\n </h4>\n\n <button\n type=\"button\"\n class=\"close\"\n aria-label=\"Close\"\n (click)=\"onClose()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"16\"\n />\n </button>\n </header>\n\n <div class=\"body\">\n <ng-content select=\"[drawer-body]\"></ng-content>\n </div>\n\n <div class=\"footer\">\n <ng-content select=\"[drawer-footer]\"></ng-content>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.drawer-scrim{position:fixed;inset:0;background:var(--scrim, hsla(220, 20%, 12%, .45));z-index:var(--layer-modal);animation:drawer-scrim-in var(--duration-fast, .12s) var(--ease-decelerate, ease-out)}@keyframes drawer-scrim-in{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer-w-md);max-width:100vw;background:var(--surface-overlay);box-shadow:var(--shadow-modal);z-index:var(--layer-modal);display:flex;flex-direction:column;animation:drawer-in var(--duration-slow) var(--ease-decelerate)}.drawer.lg{width:var(--drawer-w-lg)}.drawer .header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);border-bottom:var(--border-width-default) solid var(--border-divider)}.drawer .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);margin:0;flex:1}.drawer .close{background:transparent;border:0;width:var(--modal-close-size);height:var(--modal-close-size);color:var(--icon-default);cursor:pointer;padding:0}.drawer .close:hover{color:var(--icon-strong)}.drawer .body{flex:1;padding:var(--space-6);overflow-y:auto}.drawer .footer{padding:var(--space-4) var(--space-6);border-top:var(--border-width-default) solid var(--border-divider);display:flex;gap:var(--space-2);justify-content:flex-end}@keyframes drawer-in{0%{transform:translate(100%)}to{transform:none}}\n"] }]
|
|
2738
3127
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
2739
3128
|
|
|
2740
3129
|
/** Bottom-anchored sheet — the mobile sibling of ds-drawer. Closes on scrim
|
|
@@ -2757,8 +3146,9 @@ class BottomSheetComponent {
|
|
|
2757
3146
|
previousBodyOverflow = null;
|
|
2758
3147
|
constructor() {
|
|
2759
3148
|
effect((onCleanup) => {
|
|
2760
|
-
if (!this.open())
|
|
3149
|
+
if (!this.open()) {
|
|
2761
3150
|
return;
|
|
3151
|
+
}
|
|
2762
3152
|
this.previousBodyOverflow = this.doc.body.style.overflow;
|
|
2763
3153
|
this.doc.body.style.overflow = 'hidden';
|
|
2764
3154
|
onCleanup(() => {
|
|
@@ -2773,8 +3163,9 @@ class BottomSheetComponent {
|
|
|
2773
3163
|
this.closed.emit();
|
|
2774
3164
|
}
|
|
2775
3165
|
onEscape() {
|
|
2776
|
-
if (this.open())
|
|
3166
|
+
if (this.open()) {
|
|
2777
3167
|
this.close();
|
|
3168
|
+
}
|
|
2778
3169
|
}
|
|
2779
3170
|
stop(event) {
|
|
2780
3171
|
event.stopPropagation();
|
|
@@ -2788,8 +3179,9 @@ class BottomSheetComponent {
|
|
|
2788
3179
|
this.dragOffset.set(0);
|
|
2789
3180
|
}
|
|
2790
3181
|
onGrabMove(event) {
|
|
2791
|
-
if (this.dragOffset() === null)
|
|
3182
|
+
if (this.dragOffset() === null) {
|
|
2792
3183
|
return;
|
|
3184
|
+
}
|
|
2793
3185
|
const deltaTime = event.timeStamp - this.lastMoveTime;
|
|
2794
3186
|
if (deltaTime > 0) {
|
|
2795
3187
|
this.velocity = (event.clientY - this.lastMoveY) / deltaTime;
|
|
@@ -2800,8 +3192,9 @@ class BottomSheetComponent {
|
|
|
2800
3192
|
}
|
|
2801
3193
|
onGrabEnd() {
|
|
2802
3194
|
const offset = this.dragOffset();
|
|
2803
|
-
if (offset === null)
|
|
3195
|
+
if (offset === null) {
|
|
2804
3196
|
return;
|
|
3197
|
+
}
|
|
2805
3198
|
const sheetHeight = this.sheetRef()?.nativeElement.offsetHeight ?? 0;
|
|
2806
3199
|
const pastThreshold = sheetHeight > 0 && offset > sheetHeight * 0.3;
|
|
2807
3200
|
const flicked = this.velocity > 0.5;
|
|
@@ -2813,13 +3206,13 @@ class BottomSheetComponent {
|
|
|
2813
3206
|
}
|
|
2814
3207
|
}
|
|
2815
3208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2816
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BottomSheetComponent, isStandalone: true, selector: "ds-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n <div
|
|
3209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BottomSheetComponent, isStandalone: true, selector: "ds-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n <div\n class=\"sheet-overlay\"\n (click)=\"close()\"\n >\n <div\n #sheet\n class=\"sheet\"\n [class.dragging]=\"dragOffset() !== null\"\n [style.transform]=\"\n dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null\n \"\n (click)=\"stop($event)\"\n >\n <div\n class=\"grab\"\n (pointerdown)=\"onGrabStart($event)\"\n (pointermove)=\"onGrabMove($event)\"\n (pointerup)=\"onGrabEnd()\"\n (pointercancel)=\"onGrabEnd()\"\n >\n <div class=\"sheet-handle\"></div>\n </div>\n\n @if (title()) {\n <h3 class=\"sheet-title\">\n {{ title() }}\n </h3>\n }\n\n <div class=\"sheet-body\">\n <ng-content />\n </div>\n\n <div class=\"sheet-actions\">\n <ng-content select=\"[actions]\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_bottom-sheet-maxw: var(--ds-bottom-sheet-maxw, 480px);--_bottom-sheet-maxh: var(--ds-bottom-sheet-maxh, 80%);--_bottom-sheet-radius: var(--ds-bottom-sheet-radius, var(--radius-lg));display:contents}.sheet-overlay{position:fixed;inset:0;z-index:var(--layer-modal);background:var(--surface-scrim);display:flex;flex-direction:column;justify-content:flex-end;animation:ds-sheet-fade-in var(--duration-fast) var(--ease-decelerate)}.sheet{position:relative;width:min(100%,var(--_bottom-sheet-maxw));margin-inline:auto;background:var(--surface-default);border-radius:var(--_bottom-sheet-radius) var(--_bottom-sheet-radius) 0 0;padding:0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));animation:ds-sheet-up var(--duration-base) var(--ease-decelerate);max-height:var(--_bottom-sheet-maxh);display:flex;flex-direction:column;transition:transform var(--duration-base) var(--ease-decelerate)}.sheet.dragging{transition:none}.grab{padding:var(--space-3) 0;margin:0 calc(var(--space-4) * -1);cursor:grab;touch-action:none}.sheet-handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--radius-pill);margin:0 auto}.sheet-title{font:var(--font-weight-semibold) var(--font-size-l)/var(--line-height-snug) var(--font-sans);color:var(--text-primary);margin:0 0 var(--space-3)}.sheet-body{display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;min-height:0;padding:var(--space-1);margin:calc(var(--space-1) * -1)}.sheet-actions{display:flex;flex-direction:column;gap:var(--space-2)}.sheet-actions:not(:empty){margin-top:var(--space-3)}@keyframes ds-sheet-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ds-sheet-up{0%{transform:translateY(100%)}to{transform:none}}\n"] });
|
|
2817
3210
|
}
|
|
2818
3211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BottomSheetComponent, decorators: [{
|
|
2819
3212
|
type: Component,
|
|
2820
3213
|
args: [{ selector: 'ds-bottom-sheet', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2821
3214
|
'(document:keydown.escape)': 'onEscape()',
|
|
2822
|
-
}, template: "@if (open()) {\n <div
|
|
3215
|
+
}, template: "@if (open()) {\n <div\n class=\"sheet-overlay\"\n (click)=\"close()\"\n >\n <div\n #sheet\n class=\"sheet\"\n [class.dragging]=\"dragOffset() !== null\"\n [style.transform]=\"\n dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null\n \"\n (click)=\"stop($event)\"\n >\n <div\n class=\"grab\"\n (pointerdown)=\"onGrabStart($event)\"\n (pointermove)=\"onGrabMove($event)\"\n (pointerup)=\"onGrabEnd()\"\n (pointercancel)=\"onGrabEnd()\"\n >\n <div class=\"sheet-handle\"></div>\n </div>\n\n @if (title()) {\n <h3 class=\"sheet-title\">\n {{ title() }}\n </h3>\n }\n\n <div class=\"sheet-body\">\n <ng-content />\n </div>\n\n <div class=\"sheet-actions\">\n <ng-content select=\"[actions]\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_bottom-sheet-maxw: var(--ds-bottom-sheet-maxw, 480px);--_bottom-sheet-maxh: var(--ds-bottom-sheet-maxh, 80%);--_bottom-sheet-radius: var(--ds-bottom-sheet-radius, var(--radius-lg));display:contents}.sheet-overlay{position:fixed;inset:0;z-index:var(--layer-modal);background:var(--surface-scrim);display:flex;flex-direction:column;justify-content:flex-end;animation:ds-sheet-fade-in var(--duration-fast) var(--ease-decelerate)}.sheet{position:relative;width:min(100%,var(--_bottom-sheet-maxw));margin-inline:auto;background:var(--surface-default);border-radius:var(--_bottom-sheet-radius) var(--_bottom-sheet-radius) 0 0;padding:0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));animation:ds-sheet-up var(--duration-base) var(--ease-decelerate);max-height:var(--_bottom-sheet-maxh);display:flex;flex-direction:column;transition:transform var(--duration-base) var(--ease-decelerate)}.sheet.dragging{transition:none}.grab{padding:var(--space-3) 0;margin:0 calc(var(--space-4) * -1);cursor:grab;touch-action:none}.sheet-handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--radius-pill);margin:0 auto}.sheet-title{font:var(--font-weight-semibold) var(--font-size-l)/var(--line-height-snug) var(--font-sans);color:var(--text-primary);margin:0 0 var(--space-3)}.sheet-body{display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;min-height:0;padding:var(--space-1);margin:calc(var(--space-1) * -1)}.sheet-actions{display:flex;flex-direction:column;gap:var(--space-2)}.sheet-actions:not(:empty){margin-top:var(--space-3)}@keyframes ds-sheet-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ds-sheet-up{0%{transform:translateY(100%)}to{transform:none}}\n"] }]
|
|
2823
3216
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], sheetRef: [{ type: i0.ViewChild, args: ['sheet', { isSignal: true }] }] } });
|
|
2824
3217
|
|
|
2825
3218
|
class TagComponent {
|
|
@@ -2832,11 +3225,12 @@ class TagComponent {
|
|
|
2832
3225
|
closed = output();
|
|
2833
3226
|
toggled = output();
|
|
2834
3227
|
onClick() {
|
|
2835
|
-
if (this.interactive())
|
|
3228
|
+
if (this.interactive()) {
|
|
2836
3229
|
this.toggled.emit();
|
|
3230
|
+
}
|
|
2837
3231
|
}
|
|
2838
3232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2839
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "ds-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", toggled: "toggled" }, host: { listeners: { "click": "onClick()" }, properties: { "class.neutral": "variant() === 'neutral'", "class.closable": "closable()", "class.interactive": "interactive()", "class.is-active": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (closable()) {\n <button
|
|
3233
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "ds-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", toggled: "toggled" }, host: { listeners: { "click": "onClick()" }, properties: { "class.neutral": "variant() === 'neutral'", "class.closable": "closable()", "class.interactive": "interactive()", "class.is-active": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (closable()) {\n <button\n type=\"button\"\n class=\"close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"$event.stopPropagation(); closed.emit()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"12\"\n />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tag-pad-y: var(--ds-tag-pad-y, var(--tag-pad-y));--_tag-pad-x: var(--ds-tag-pad-x, var(--tag-pad-x));--_tag-radius: var(--ds-tag-radius, var(--radius-md));--_tag-bg-color: var(--ds-tag-bg-color, var(--primary));--_tag-fw: var(--ds-tag-fw, var(--font-weight-bold));--_tag-fs: var(--ds-tag-fs, var(--font-size-xs));--_tag-lh: var(--ds-tag-lh, var(--line-height-base));--_tag-hover-bg-color: var(--ds-tag-hover-bg-color, var(--surface-muted));--_tag-hover-label-color: var(--ds-tag-hover-label-color, var(--text-primary));--_tag-active-bg-color: var(--ds-tag-active-bg-color, var(--primary-muted));--_tag-active-label-color: var(--ds-tag-active-label-color, var(--primary-strong));--_tag-active-border: var(--ds-tag-active-border, var(--primary));display:inline-flex;align-items:center;gap:var(--tag-gap);padding:var(--_tag-pad-y) var(--_tag-pad-x);border-radius:var(--_tag-radius);background-color:var(--_tag-bg-color);color:var(--primary-on);font:var(--_tag-fw) var(--_tag-fs)/var(--_tag-lh) var(--font-sans)}:host(.closable){padding-right:var(--tag-pad-x-close)}:host(.neutral){--_tag-bg-color: var(--ds-tag-bg-color, var(--surface-secondary));background-color:var(--_tag-bg-color);color:var(--text-primary);border:var(--border-width-default) solid var(--border-divider);padding:calc(var(--_tag-pad-y) - var(--border-width-default)) calc(var(--_tag-pad-x) - var(--border-width-default))}:host(.neutral.closable){padding-right:calc(var(--tag-pad-x-close) - 1px)}:host(.interactive){cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}:host(.interactive:hover):not(.is-active){background-color:var(--_tag-hover-bg-color);color:var(--_tag-hover-label-color)}:host(.interactive.is-active){background-color:var(--_tag-active-bg-color);color:var(--_tag-active-label-color);box-shadow:inset 0 0 0 var(--border-width-default) var(--_tag-active-border)}.close{display:inline-flex;align-items:center;justify-content:center;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-sm);padding:var(--tag-close-pad);margin-left:var(--tag-close-pad);background:color-mix(in oklab,currentcolor calc(var(--opacity-state-hover) * 100%),transparent);transition:background-color var(--duration-fast) var(--ease-standard)}.close:hover{background:color-mix(in oklab,currentcolor calc(var(--opacity-state-pressed) * 100%),transparent)}.close:active{background:color-mix(in oklab,currentcolor calc(var(--opacity-state-active) * 100%),transparent)}.close:focus-visible{outline:var(--border-width-strong, 2px) solid var(--focus-ring-color, currentColor);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2840
3234
|
}
|
|
2841
3235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, decorators: [{
|
|
2842
3236
|
type: Component,
|
|
@@ -2846,7 +3240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2846
3240
|
'[class.interactive]': 'interactive()',
|
|
2847
3241
|
'[class.is-active]': 'selected()',
|
|
2848
3242
|
'(click)': 'onClick()',
|
|
2849
|
-
}, template: "<ng-content></ng-content>\n@if (closable()) {\n <button
|
|
3243
|
+
}, template: "<ng-content></ng-content>\n\n@if (closable()) {\n <button\n type=\"button\"\n class=\"close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"$event.stopPropagation(); closed.emit()\"\n >\n <ds-icon\n name=\"x\"\n [size]=\"12\"\n />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tag-pad-y: var(--ds-tag-pad-y, var(--tag-pad-y));--_tag-pad-x: var(--ds-tag-pad-x, var(--tag-pad-x));--_tag-radius: var(--ds-tag-radius, var(--radius-md));--_tag-bg-color: var(--ds-tag-bg-color, var(--primary));--_tag-fw: var(--ds-tag-fw, var(--font-weight-bold));--_tag-fs: var(--ds-tag-fs, var(--font-size-xs));--_tag-lh: var(--ds-tag-lh, var(--line-height-base));--_tag-hover-bg-color: var(--ds-tag-hover-bg-color, var(--surface-muted));--_tag-hover-label-color: var(--ds-tag-hover-label-color, var(--text-primary));--_tag-active-bg-color: var(--ds-tag-active-bg-color, var(--primary-muted));--_tag-active-label-color: var(--ds-tag-active-label-color, var(--primary-strong));--_tag-active-border: var(--ds-tag-active-border, var(--primary));display:inline-flex;align-items:center;gap:var(--tag-gap);padding:var(--_tag-pad-y) var(--_tag-pad-x);border-radius:var(--_tag-radius);background-color:var(--_tag-bg-color);color:var(--primary-on);font:var(--_tag-fw) var(--_tag-fs)/var(--_tag-lh) var(--font-sans)}:host(.closable){padding-right:var(--tag-pad-x-close)}:host(.neutral){--_tag-bg-color: var(--ds-tag-bg-color, var(--surface-secondary));background-color:var(--_tag-bg-color);color:var(--text-primary);border:var(--border-width-default) solid var(--border-divider);padding:calc(var(--_tag-pad-y) - var(--border-width-default)) calc(var(--_tag-pad-x) - var(--border-width-default))}:host(.neutral.closable){padding-right:calc(var(--tag-pad-x-close) - 1px)}:host(.interactive){cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}:host(.interactive:hover):not(.is-active){background-color:var(--_tag-hover-bg-color);color:var(--_tag-hover-label-color)}:host(.interactive.is-active){background-color:var(--_tag-active-bg-color);color:var(--_tag-active-label-color);box-shadow:inset 0 0 0 var(--border-width-default) var(--_tag-active-border)}.close{display:inline-flex;align-items:center;justify-content:center;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-sm);padding:var(--tag-close-pad);margin-left:var(--tag-close-pad);background:color-mix(in oklab,currentcolor calc(var(--opacity-state-hover) * 100%),transparent);transition:background-color var(--duration-fast) var(--ease-standard)}.close:hover{background:color-mix(in oklab,currentcolor calc(var(--opacity-state-pressed) * 100%),transparent)}.close:active{background:color-mix(in oklab,currentcolor calc(var(--opacity-state-active) * 100%),transparent)}.close:focus-visible{outline:var(--border-width-strong, 2px) solid var(--focus-ring-color, currentColor);outline-offset:1px}\n"] }]
|
|
2850
3244
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
|
|
2851
3245
|
|
|
2852
3246
|
class W3wComponent {
|
|
@@ -2859,8 +3253,9 @@ class W3wComponent {
|
|
|
2859
3253
|
this.onCopy();
|
|
2860
3254
|
}
|
|
2861
3255
|
onCopy() {
|
|
2862
|
-
if (!this.copyable())
|
|
3256
|
+
if (!this.copyable()) {
|
|
2863
3257
|
return;
|
|
3258
|
+
}
|
|
2864
3259
|
const text = `${this.prefix()}${this.address()}`;
|
|
2865
3260
|
if (typeof navigator !== 'undefined' && navigator.clipboard) {
|
|
2866
3261
|
void navigator.clipboard.writeText(text);
|
|
@@ -2868,7 +3263,7 @@ class W3wComponent {
|
|
|
2868
3263
|
this.copied.emit(this.address());
|
|
2869
3264
|
}
|
|
2870
3265
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: W3wComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2871
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: W3wComponent, isStandalone: true, selector: "ds-w3w", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: true, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied" }, host: { listeners: { "click": "onCopy()", "keydown.enter": "onCopy()", "keydown.space": "onKeyActivate($event)" }, properties: { "attr.role": "copyable() ? 'button' : null", "attr.tabindex": "copyable() ? 0 : null", "attr.aria-label": "copyable() ? ('Copy what3words address ' + prefix() + address()) : null" } }, ngImport: i0, template: "<ds-icon
|
|
3266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: W3wComponent, isStandalone: true, selector: "ds-w3w", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: true, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied" }, host: { listeners: { "click": "onCopy()", "keydown.enter": "onCopy()", "keydown.space": "onKeyActivate($event)" }, properties: { "attr.role": "copyable() ? 'button' : null", "attr.tabindex": "copyable() ? 0 : null", "attr.aria-label": "copyable() ? ('Copy what3words address ' + prefix() + address()) : null" } }, ngImport: i0, template: "<ds-icon\n name=\"map\"\n [size]=\"14\"\n/>\n\n<span>\n <span class=\"mark\">\n {{ prefix() }}\n </span>{{ address() }}\n</span>\n\n@if (copyable()) {\n <ds-icon\n name=\"copy\"\n [size]=\"12\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);background:var(--primary-subtitle);color:var(--primary);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-size-mono);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard)}:host:hover{background:var(--primary-muted)}:host .mark{color:var(--error);font-weight:var(--font-weight-bold)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2872
3267
|
}
|
|
2873
3268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: W3wComponent, decorators: [{
|
|
2874
3269
|
type: Component,
|
|
@@ -2879,20 +3274,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2879
3274
|
'(click)': 'onCopy()',
|
|
2880
3275
|
'(keydown.enter)': 'onCopy()',
|
|
2881
3276
|
'(keydown.space)': 'onKeyActivate($event)',
|
|
2882
|
-
}, template: "<ds-icon
|
|
3277
|
+
}, template: "<ds-icon\n name=\"map\"\n [size]=\"14\"\n/>\n\n<span>\n <span class=\"mark\">\n {{ prefix() }}\n </span>{{ address() }}\n</span>\n\n@if (copyable()) {\n <ds-icon\n name=\"copy\"\n [size]=\"12\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);background:var(--primary-subtitle);color:var(--primary);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-size-mono);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard)}:host:hover{background:var(--primary-muted)}:host .mark{color:var(--error);font-weight:var(--font-weight-bold)}\n"] }]
|
|
2883
3278
|
}], propDecorators: { prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], address: [{ type: i0.Input, args: [{ isSignal: true, alias: "address", required: true }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }] } });
|
|
2884
3279
|
|
|
2885
3280
|
class PageFooterComponent {
|
|
2886
3281
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2887
3282
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2888
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: PageFooterComponent, isStandalone: true, selector: "ds-page-footer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.compact": "variant() === 'compact'", "class.save": "variant() === 'save'" } }, ngImport: i0, template: "<ng-content select=\"[brand]\"></ng-content>\n<ng-content select=\"[nav]\"></ng-content>\n<ng-content select=\"[actions]\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-width-default) solid var(--border-divider);flex-wrap:wrap}:host(.compact){padding:var(--space-3) var(--space-4);gap:var(--space-3);background:var(--surface-secondary);border-radius:var(--radius-lg);border:var(--border-width-default) solid var(--border-divider);border-top:var(--border-width-default) solid var(--border-divider)}:host(.save){position:relative;padding:var(--space-3) var(--space-4);background:var(--primary-subtitle);border:var(--border-width-default) solid var(--primary);border-radius:var(--radius-lg)}\n"] });
|
|
3283
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: PageFooterComponent, isStandalone: true, selector: "ds-page-footer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.compact": "variant() === 'compact'", "class.save": "variant() === 'save'" } }, ngImport: i0, template: "<ng-content select=\"[brand]\"></ng-content>\n\n<ng-content select=\"[nav]\"></ng-content>\n\n<ng-content select=\"[actions]\"></ng-content>\n\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-width-default) solid var(--border-divider);flex-wrap:wrap}:host(.compact){padding:var(--space-3) var(--space-4);gap:var(--space-3);background:var(--surface-secondary);border-radius:var(--radius-lg);border:var(--border-width-default) solid var(--border-divider);border-top:var(--border-width-default) solid var(--border-divider)}:host(.save){position:relative;padding:var(--space-3) var(--space-4);background:var(--primary-subtitle);border:var(--border-width-default) solid var(--primary);border-radius:var(--radius-lg)}\n"] });
|
|
2889
3284
|
}
|
|
2890
3285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFooterComponent, decorators: [{
|
|
2891
3286
|
type: Component,
|
|
2892
3287
|
args: [{ selector: 'ds-page-footer', standalone: true, imports: [], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2893
3288
|
'[class.compact]': "variant() === 'compact'",
|
|
2894
3289
|
'[class.save]': "variant() === 'save'",
|
|
2895
|
-
}, template: "<ng-content select=\"[brand]\"></ng-content>\n<ng-content select=\"[nav]\"></ng-content>\n<ng-content select=\"[actions]\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-width-default) solid var(--border-divider);flex-wrap:wrap}:host(.compact){padding:var(--space-3) var(--space-4);gap:var(--space-3);background:var(--surface-secondary);border-radius:var(--radius-lg);border:var(--border-width-default) solid var(--border-divider);border-top:var(--border-width-default) solid var(--border-divider)}:host(.save){position:relative;padding:var(--space-3) var(--space-4);background:var(--primary-subtitle);border:var(--border-width-default) solid var(--primary);border-radius:var(--radius-lg)}\n"] }]
|
|
3290
|
+
}, template: "<ng-content select=\"[brand]\"></ng-content>\n\n<ng-content select=\"[nav]\"></ng-content>\n\n<ng-content select=\"[actions]\"></ng-content>\n\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-width-default) solid var(--border-divider);flex-wrap:wrap}:host(.compact){padding:var(--space-3) var(--space-4);gap:var(--space-3);background:var(--surface-secondary);border-radius:var(--radius-lg);border:var(--border-width-default) solid var(--border-divider);border-top:var(--border-width-default) solid var(--border-divider)}:host(.save){position:relative;padding:var(--space-3) var(--space-4);background:var(--primary-subtitle);border:var(--border-width-default) solid var(--primary);border-radius:var(--radius-lg)}\n"] }]
|
|
2896
3291
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
2897
3292
|
|
|
2898
3293
|
let nextId = 0;
|
|
@@ -2902,6 +3297,7 @@ class ComboboxComponent {
|
|
|
2902
3297
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
2903
3298
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2904
3299
|
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
3300
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2905
3301
|
placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2906
3302
|
/** Accessible name for the combobox input. */
|
|
2907
3303
|
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -2918,36 +3314,43 @@ class ComboboxComponent {
|
|
|
2918
3314
|
return `${this.uid}-opt-${index}`;
|
|
2919
3315
|
}
|
|
2920
3316
|
activeDescendant = computed(() => {
|
|
2921
|
-
const
|
|
2922
|
-
return this.isOpen() &&
|
|
3317
|
+
const index = this.activeIndex();
|
|
3318
|
+
return this.isOpen() && index >= 0 ? this.optionId(index) : null;
|
|
2923
3319
|
}, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
|
|
2924
3320
|
filteredOptions = computed(() => {
|
|
2925
3321
|
const trimmedQuery = this.query().toLowerCase().trim();
|
|
2926
3322
|
const allOptions = this.options();
|
|
2927
|
-
if (!trimmedQuery)
|
|
3323
|
+
if (!trimmedQuery) {
|
|
2928
3324
|
return allOptions;
|
|
3325
|
+
}
|
|
2929
3326
|
return allOptions.filter((option) => option.label.toLowerCase().includes(trimmedQuery));
|
|
2930
3327
|
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
2931
3328
|
selectedTags = computed(() => {
|
|
2932
|
-
if (!this.multiple())
|
|
3329
|
+
if (!this.multiple()) {
|
|
2933
3330
|
return [];
|
|
3331
|
+
}
|
|
2934
3332
|
const selectedValues = this.value() ?? [];
|
|
2935
3333
|
const selectedSet = new Set(selectedValues);
|
|
2936
3334
|
return this.options().filter((option) => selectedSet.has(option.value));
|
|
2937
3335
|
}, ...(ngDevMode ? [{ debugName: "selectedTags" }] : /* istanbul ignore next */ []));
|
|
2938
3336
|
displayLabel = computed(() => {
|
|
2939
|
-
if (this.multiple())
|
|
3337
|
+
if (this.multiple()) {
|
|
2940
3338
|
return '';
|
|
3339
|
+
}
|
|
2941
3340
|
const currentValue = this.value();
|
|
2942
|
-
if (currentValue === null)
|
|
3341
|
+
if (currentValue === null) {
|
|
2943
3342
|
return '';
|
|
2944
|
-
|
|
3343
|
+
}
|
|
3344
|
+
return (this.options().find((option) => option.value === currentValue)?.label ??
|
|
3345
|
+
'');
|
|
2945
3346
|
}, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
2946
3347
|
placeholderText = computed(() => {
|
|
2947
|
-
if (this.multiple())
|
|
3348
|
+
if (this.multiple()) {
|
|
2948
3349
|
return '';
|
|
2949
|
-
|
|
3350
|
+
}
|
|
3351
|
+
if (this.displayLabel()) {
|
|
2950
3352
|
return '';
|
|
3353
|
+
}
|
|
2951
3354
|
return this.placeholder();
|
|
2952
3355
|
}, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
|
|
2953
3356
|
isSelected(option) {
|
|
@@ -2959,15 +3362,17 @@ class ComboboxComponent {
|
|
|
2959
3362
|
}
|
|
2960
3363
|
optionClass(option) {
|
|
2961
3364
|
const parts = ['option'];
|
|
2962
|
-
if (this.multiple())
|
|
3365
|
+
if (this.multiple()) {
|
|
2963
3366
|
parts.push('check');
|
|
3367
|
+
}
|
|
2964
3368
|
void option;
|
|
2965
3369
|
return parts.join(' ');
|
|
2966
3370
|
}
|
|
2967
3371
|
onTriggerClick() {
|
|
2968
3372
|
this.filterInput().nativeElement.focus();
|
|
2969
|
-
if (!this.overlayRef)
|
|
3373
|
+
if (!this.overlayRef) {
|
|
2970
3374
|
this.openPanel();
|
|
3375
|
+
}
|
|
2971
3376
|
}
|
|
2972
3377
|
togglePanel(event) {
|
|
2973
3378
|
event.stopPropagation();
|
|
@@ -2996,7 +3401,9 @@ class ComboboxComponent {
|
|
|
2996
3401
|
this.openPanel();
|
|
2997
3402
|
return;
|
|
2998
3403
|
}
|
|
2999
|
-
this.activeIndex.set(opts.length
|
|
3404
|
+
this.activeIndex.set(opts.length
|
|
3405
|
+
? (this.activeIndex() - 1 + opts.length) % opts.length
|
|
3406
|
+
: -1);
|
|
3000
3407
|
break;
|
|
3001
3408
|
case 'Enter': {
|
|
3002
3409
|
const opt = opts[this.activeIndex()];
|
|
@@ -3016,21 +3423,36 @@ class ComboboxComponent {
|
|
|
3016
3423
|
if (this.multiple() && !this.query()) {
|
|
3017
3424
|
const tags = this.selectedTags();
|
|
3018
3425
|
const last = tags[tags.length - 1];
|
|
3019
|
-
if (last)
|
|
3426
|
+
if (last) {
|
|
3020
3427
|
this.remove(last.value);
|
|
3428
|
+
}
|
|
3021
3429
|
}
|
|
3022
3430
|
break;
|
|
3023
3431
|
}
|
|
3024
3432
|
}
|
|
3025
3433
|
openPanel() {
|
|
3026
|
-
if (this.overlayRef)
|
|
3434
|
+
if (this.overlayRef) {
|
|
3027
3435
|
return;
|
|
3436
|
+
}
|
|
3028
3437
|
const triggerElement = this.trigger().nativeElement;
|
|
3029
|
-
const positionStrategy = this.overlay
|
|
3438
|
+
const positionStrategy = this.overlay
|
|
3439
|
+
.position()
|
|
3030
3440
|
.flexibleConnectedTo(triggerElement)
|
|
3031
3441
|
.withPositions([
|
|
3032
|
-
{
|
|
3033
|
-
|
|
3442
|
+
{
|
|
3443
|
+
originX: 'start',
|
|
3444
|
+
originY: 'bottom',
|
|
3445
|
+
overlayX: 'start',
|
|
3446
|
+
overlayY: 'top',
|
|
3447
|
+
offsetY: 4,
|
|
3448
|
+
},
|
|
3449
|
+
{
|
|
3450
|
+
originX: 'start',
|
|
3451
|
+
originY: 'top',
|
|
3452
|
+
overlayX: 'start',
|
|
3453
|
+
overlayY: 'bottom',
|
|
3454
|
+
offsetY: -4,
|
|
3455
|
+
},
|
|
3034
3456
|
]);
|
|
3035
3457
|
const overlayConfig = {
|
|
3036
3458
|
positionStrategy,
|
|
@@ -3068,18 +3490,19 @@ class ComboboxComponent {
|
|
|
3068
3490
|
}
|
|
3069
3491
|
}
|
|
3070
3492
|
remove(target) {
|
|
3071
|
-
if (!this.multiple())
|
|
3493
|
+
if (!this.multiple()) {
|
|
3072
3494
|
return;
|
|
3495
|
+
}
|
|
3073
3496
|
const current = this.value() ?? [];
|
|
3074
3497
|
this.value.set(current.filter((existing) => existing !== target));
|
|
3075
3498
|
}
|
|
3076
3499
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3077
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ComboboxComponent, isStandalone: true, selector: "ds-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div
|
|
3500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ComboboxComponent, isStandalone: true, selector: "ds-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #trigger\n class=\"combo-trigger\"\n [class.open]=\"isOpen()\"\n [class.sm]=\"size() === 'sm'\"\n [class.lg]=\"size() === 'lg'\"\n (click)=\"onTriggerClick()\"\n>\n @if (multiple()) {\n @for (selectedOption of selectedTags(); track selectedOption.value) {\n <ds-tag\n [closable]=\"true\"\n [closeLabel]=\"'Remove ' + selectedOption.label\"\n (closed)=\"remove(selectedOption.value)\"\n >\n {{ selectedOption.label }}\n </ds-tag>\n }\n } @else if (displayLabel()) {\n <span class=\"combo-value\">\n {{ displayLabel() }}\n </span>\n }\n\n <input\n #filter\n type=\"text\"\n class=\"combo-input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"ariaLabel() || placeholder()\"\n [value]=\"query()\"\n [placeholder]=\"placeholderText()\"\n (input)=\"onFilter($event)\"\n (focus)=\"openPanel()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <ds-icon\n name=\"chevronDown\"\n class=\"combo-chevron\"\n [size]=\"16\"\n (click)=\"togglePanel($event)\"\n />\n</div>\n\n<ng-template #panel>\n <ul\n class=\"combo-list\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li\n role=\"option\"\n [class]=\"optionClass(option)\"\n [id]=\"optionId(i)\"\n [class.is-active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"onPick(option)\"\n (mouseenter)=\"activeIndex.set(i)\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"check\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [checked]=\"isSelected(option)\"\n />\n }\n\n <span>\n {{ option.label }}\n </span>\n\n @if (!multiple() && isSelected(option)) {\n <ds-icon\n name=\"check\"\n class=\"icon\"\n [size]=\"14\"\n />\n }\n </li>\n }\n\n @if (filteredOptions().length === 0) {\n <li\n class=\"empty t-s\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n [attr.aria-disabled]=\"true\"\n >\n No matches\n </li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_combobox-focus-shadow: var(--ds-combobox-focus-shadow, var(--ds-field-focus-shadow));display:inline-block;width:100%;position:relative}.combo-trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--hit-cozy);padding:var(--space-1) var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);cursor:text;text-align:left;flex-wrap:wrap}.combo-trigger:hover{border-color:var(--border-strong)}.combo-trigger:focus-within{border-color:var(--primary);box-shadow:var(--_combobox-focus-shadow);outline:0}.combo-trigger.sm{min-height:var(--hit-min)}.combo-trigger.lg{min-height:var(--field-h-lg)}.combo-value{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-input{flex:1;min-width:80px;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-chevron{color:var(--icon-default);margin-left:auto}.combo-list{width:100%;list-style:none;padding:0;background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);margin:var(--combobox-offset) 0 0;max-height:var(--combobox-maxh);overflow-y:auto;z-index:var(--layer-popover)}.combo-list .option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer}.combo-list .option:hover,.combo-list .option.is-active,.combo-list .option[aria-selected=true]{background:var(--surface-secondary)}.combo-list .option .icon{color:var(--primary);margin-left:auto}.combo-list .option.check{padding-left:var(--space-2)}.combo-list .empty{padding:var(--space-3) var(--space-4);color:var(--text-tertiary);text-align:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ds-tag", inputs: ["variant", "closable", "interactive", "selected", "closeLabel"], outputs: ["closed", "toggled"] }] });
|
|
3078
3501
|
}
|
|
3079
3502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
3080
3503
|
type: Component,
|
|
3081
|
-
args: [{ selector: 'ds-combobox', standalone: true, imports: [IconComponent, TagComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div
|
|
3082
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
|
|
3504
|
+
args: [{ selector: 'ds-combobox', standalone: true, imports: [IconComponent, TagComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n #trigger\n class=\"combo-trigger\"\n [class.open]=\"isOpen()\"\n [class.sm]=\"size() === 'sm'\"\n [class.lg]=\"size() === 'lg'\"\n (click)=\"onTriggerClick()\"\n>\n @if (multiple()) {\n @for (selectedOption of selectedTags(); track selectedOption.value) {\n <ds-tag\n [closable]=\"true\"\n [closeLabel]=\"'Remove ' + selectedOption.label\"\n (closed)=\"remove(selectedOption.value)\"\n >\n {{ selectedOption.label }}\n </ds-tag>\n }\n } @else if (displayLabel()) {\n <span class=\"combo-value\">\n {{ displayLabel() }}\n </span>\n }\n\n <input\n #filter\n type=\"text\"\n class=\"combo-input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"ariaLabel() || placeholder()\"\n [value]=\"query()\"\n [placeholder]=\"placeholderText()\"\n (input)=\"onFilter($event)\"\n (focus)=\"openPanel()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <ds-icon\n name=\"chevronDown\"\n class=\"combo-chevron\"\n [size]=\"16\"\n (click)=\"togglePanel($event)\"\n />\n</div>\n\n<ng-template #panel>\n <ul\n class=\"combo-list\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li\n role=\"option\"\n [class]=\"optionClass(option)\"\n [id]=\"optionId(i)\"\n [class.is-active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"onPick(option)\"\n (mouseenter)=\"activeIndex.set(i)\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"check\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [checked]=\"isSelected(option)\"\n />\n }\n\n <span>\n {{ option.label }}\n </span>\n\n @if (!multiple() && isSelected(option)) {\n <ds-icon\n name=\"check\"\n class=\"icon\"\n [size]=\"14\"\n />\n }\n </li>\n }\n\n @if (filteredOptions().length === 0) {\n <li\n class=\"empty t-s\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n [attr.aria-disabled]=\"true\"\n >\n No matches\n </li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_combobox-focus-shadow: var(--ds-combobox-focus-shadow, var(--ds-field-focus-shadow));display:inline-block;width:100%;position:relative}.combo-trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--hit-cozy);padding:var(--space-1) var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);cursor:text;text-align:left;flex-wrap:wrap}.combo-trigger:hover{border-color:var(--border-strong)}.combo-trigger:focus-within{border-color:var(--primary);box-shadow:var(--_combobox-focus-shadow);outline:0}.combo-trigger.sm{min-height:var(--hit-min)}.combo-trigger.lg{min-height:var(--field-h-lg)}.combo-value{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-input{flex:1;min-width:80px;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-chevron{color:var(--icon-default);margin-left:auto}.combo-list{width:100%;list-style:none;padding:0;background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);margin:var(--combobox-offset) 0 0;max-height:var(--combobox-maxh);overflow-y:auto;z-index:var(--layer-popover)}.combo-list .option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer}.combo-list .option:hover,.combo-list .option.is-active,.combo-list .option[aria-selected=true]{background:var(--surface-secondary)}.combo-list .option .icon{color:var(--primary);margin-left:auto}.combo-list .option.check{padding-left:var(--space-2)}.combo-list .empty{padding:var(--space-3) var(--space-4);color:var(--text-tertiary);text-align:center}\n"] }]
|
|
3505
|
+
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
|
|
3083
3506
|
|
|
3084
3507
|
class DividerComponent {
|
|
3085
3508
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
@@ -3114,11 +3537,11 @@ class CheckboxComponent {
|
|
|
3114
3537
|
this.checked.set(event.target.checked);
|
|
3115
3538
|
}
|
|
3116
3539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "ds-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"check\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.check{appearance:none
|
|
3540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "ds-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"check\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{--_checkbox-focus-shadow: var(--ds-checkbox-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;align-items:center}.check{appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-sm);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.check:hover:not(:disabled){border-color:var(--primary)}.check:focus-visible{outline:none;box-shadow:var(--_checkbox-focus-shadow)}.check:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.check:checked{background:var(--primary);border-color:var(--primary)}.check:checked:after{content:\"\";width:var(--check-tick-size);height:var(--check-tick-size);background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.5l2.5 2.5L10 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>\") center/contain no-repeat}.check:indeterminate{background:var(--primary);border-color:var(--primary)}.check:indeterminate:after{content:\"\";width:var(--check-indet-w);height:var(--check-indet-h);background:var(--icon-on-primary);border-radius:var(--radius-sm)}\n"] });
|
|
3118
3541
|
}
|
|
3119
3542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
3120
3543
|
type: Component,
|
|
3121
|
-
args: [{ selector: 'ds-checkbox', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n type=\"checkbox\"\n class=\"check\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.check{appearance:none
|
|
3544
|
+
args: [{ selector: 'ds-checkbox', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n type=\"checkbox\"\n class=\"check\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{--_checkbox-focus-shadow: var(--ds-checkbox-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;align-items:center}.check{appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-sm);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.check:hover:not(:disabled){border-color:var(--primary)}.check:focus-visible{outline:none;box-shadow:var(--_checkbox-focus-shadow)}.check:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.check:checked{background:var(--primary);border-color:var(--primary)}.check:checked:after{content:\"\";width:var(--check-tick-size);height:var(--check-tick-size);background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.5l2.5 2.5L10 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>\") center/contain no-repeat}.check:indeterminate{background:var(--primary);border-color:var(--primary)}.check:indeterminate:after{content:\"\";width:var(--check-indet-w);height:var(--check-indet-h);background:var(--icon-on-primary);border-radius:var(--radius-sm)}\n"] }]
|
|
3122
3545
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
|
|
3123
3546
|
|
|
3124
3547
|
class RadioComponent {
|
|
@@ -3131,11 +3554,11 @@ class RadioComponent {
|
|
|
3131
3554
|
this.checked.set(event.target.checked);
|
|
3132
3555
|
}
|
|
3133
3556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: RadioComponent, isStandalone: true, selector: "ds-radio", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n type=\"radio\"\n class=\"radio\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name() || null\"\n [attr.value]=\"value() || null\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.radio{appearance:none
|
|
3557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: RadioComponent, isStandalone: true, selector: "ds-radio", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n type=\"radio\"\n class=\"radio\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name() || null\"\n [attr.value]=\"value() || null\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{--_radio-focus-shadow: var(--ds-radio-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;align-items:center}.radio{appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-pill);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.radio:hover:not(:disabled){border-color:var(--primary)}.radio:focus-visible{outline:none;box-shadow:var(--_radio-focus-shadow)}.radio:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.radio:checked{border-color:var(--primary);border-width:var(--radio-bw-checked)}.radio:checked:after{content:\"\";width:var(--radio-dot-size);height:var(--radio-dot-size);border-radius:var(--radius-pill);background:var(--primary)}\n"] });
|
|
3135
3558
|
}
|
|
3136
3559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RadioComponent, decorators: [{
|
|
3137
3560
|
type: Component,
|
|
3138
|
-
args: [{ selector: 'ds-radio', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n type=\"radio\"\n class=\"radio\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name() || null\"\n [attr.value]=\"value() || null\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.radio{appearance:none
|
|
3561
|
+
args: [{ selector: 'ds-radio', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n type=\"radio\"\n class=\"radio\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name() || null\"\n [attr.value]=\"value() || null\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{--_radio-focus-shadow: var(--ds-radio-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;align-items:center}.radio{appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-pill);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.radio:hover:not(:disabled){border-color:var(--primary)}.radio:focus-visible{outline:none;box-shadow:var(--_radio-focus-shadow)}.radio:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.radio:checked{border-color:var(--primary);border-width:var(--radio-bw-checked)}.radio:checked:after{content:\"\";width:var(--radio-dot-size);height:var(--radio-dot-size);border-radius:var(--radius-pill);background:var(--primary)}\n"] }]
|
|
3139
3562
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
|
|
3140
3563
|
|
|
3141
3564
|
class SwitchComponent {
|
|
@@ -3152,11 +3575,11 @@ class SwitchComponent {
|
|
|
3152
3575
|
this.checked.set(event.target.checked);
|
|
3153
3576
|
}
|
|
3154
3577
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SwitchComponent, isStandalone: true, selector: "ds-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n type=\"checkbox\"\n [class]=\"classes()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.switch{appearance:none
|
|
3578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SwitchComponent, isStandalone: true, selector: "ds-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n type=\"checkbox\"\n [class]=\"classes()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{--_switch-focus-shadow: var(--ds-switch-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;align-items:center}.switch{appearance:none;width:var(--switch-track-w);height:var(--switch-track-h);background:var(--border-strong);border-radius:var(--radius-pill);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background-color var(--duration-fast) var(--ease-standard)}.switch:after{content:\"\";position:absolute;top:var(--switch-thumb-pad);left:var(--switch-thumb-pad);width:var(--switch-thumb-size);height:var(--switch-thumb-size);background:var(--surface-default);border-radius:var(--radius-pill);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-standard)}.switch:checked{background:var(--primary)}.switch:checked:after{transform:translate(var(--switch-thumb-travel))}.switch:focus-visible{outline:none;box-shadow:var(--_switch-focus-shadow)}.switch:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.switch.success:checked{background:var(--success)}.switch.error:checked{background:var(--error)}\n"] });
|
|
3156
3579
|
}
|
|
3157
3580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
3158
3581
|
type: Component,
|
|
3159
|
-
args: [{ selector: 'ds-switch', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n type=\"checkbox\"\n [class]=\"classes()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.switch{appearance:none
|
|
3582
|
+
args: [{ selector: 'ds-switch', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n type=\"checkbox\"\n [class]=\"classes()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"name()\"\n [attr.id]=\"inputId()\"\n (change)=\"onChange($event)\"\n/>\n", styles: [":host{--_switch-focus-shadow: var(--ds-switch-focus-shadow, var(--ds-control-focus-shadow));display:inline-flex;align-items:center}.switch{appearance:none;width:var(--switch-track-w);height:var(--switch-track-h);background:var(--border-strong);border-radius:var(--radius-pill);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background-color var(--duration-fast) var(--ease-standard)}.switch:after{content:\"\";position:absolute;top:var(--switch-thumb-pad);left:var(--switch-thumb-pad);width:var(--switch-thumb-size);height:var(--switch-thumb-size);background:var(--surface-default);border-radius:var(--radius-pill);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-standard)}.switch:checked{background:var(--primary)}.switch:checked:after{transform:translate(var(--switch-thumb-travel))}.switch:focus-visible{outline:none;box-shadow:var(--_switch-focus-shadow)}.switch:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.switch.success:checked{background:var(--success)}.switch.error:checked{background:var(--error)}\n"] }]
|
|
3160
3583
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
|
|
3161
3584
|
|
|
3162
3585
|
/**
|