@ids-group-ltd/ids-design-system 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +37 -11
- package/fesm2022/ids-group-ltd-ids-design-system.mjs +241 -240
- package/fesm2022/ids-group-ltd-ids-design-system.mjs.map +1 -1
- package/package.json +3 -2
- package/styles/_dropdown-overlay.scss +117 -117
- package/styles/_fonts.scss +59 -59
- package/styles/_icon-base.scss +9 -9
- package/styles/_link.scss +77 -77
- package/styles/_reset.scss +17 -17
- package/styles/_scrollbar.scss +17 -17
- package/styles/_toast-overlay.scss +6 -6
- package/styles/_tokens-charts.scss +70 -70
- package/styles/_tokens.scss +614 -614
- package/styles/ds.scss +27 -27
- package/themes/README.md +96 -96
- package/themes/default/_palette.scss +159 -159
- package/themes/default/_theme.scss +274 -274
|
@@ -159,45 +159,45 @@ class IconComponent {
|
|
|
159
159
|
const body = ICONS[key] ?? this.registry[key] ?? '';
|
|
160
160
|
return this.sanitizer.bypassSecurityTrustHtml(body);
|
|
161
161
|
}, ...(ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []));
|
|
162
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
164
|
-
<svg
|
|
165
|
-
class="icon"
|
|
166
|
-
[style.--ds-icon-size]="size() + 'px'"
|
|
167
|
-
[attr.width]="size()"
|
|
168
|
-
[attr.height]="size()"
|
|
169
|
-
viewBox="0 0 24 24"
|
|
170
|
-
fill="none"
|
|
171
|
-
stroke="currentColor"
|
|
172
|
-
[attr.stroke-width]="stroke()"
|
|
173
|
-
stroke-linecap="round"
|
|
174
|
-
stroke-linejoin="round"
|
|
175
|
-
[attr.role]="ariaLabel() ? 'img' : null"
|
|
176
|
-
[attr.aria-label]="ariaLabel()"
|
|
177
|
-
[attr.aria-hidden]="ariaLabel() ? null : 'true'"
|
|
178
|
-
[innerHTML]="paths()"
|
|
179
|
-
></svg>
|
|
162
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
+
<svg
|
|
165
|
+
class="icon"
|
|
166
|
+
[style.--ds-icon-size]="size() + 'px'"
|
|
167
|
+
[attr.width]="size()"
|
|
168
|
+
[attr.height]="size()"
|
|
169
|
+
viewBox="0 0 24 24"
|
|
170
|
+
fill="none"
|
|
171
|
+
stroke="currentColor"
|
|
172
|
+
[attr.stroke-width]="stroke()"
|
|
173
|
+
stroke-linecap="round"
|
|
174
|
+
stroke-linejoin="round"
|
|
175
|
+
[attr.role]="ariaLabel() ? 'img' : null"
|
|
176
|
+
[attr.aria-label]="ariaLabel()"
|
|
177
|
+
[attr.aria-hidden]="ariaLabel() ? null : 'true'"
|
|
178
|
+
[innerHTML]="paths()"
|
|
179
|
+
></svg>
|
|
180
180
|
`, 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
181
|
}
|
|
182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, decorators: [{
|
|
183
183
|
type: Component,
|
|
184
|
-
args: [{ selector: 'ds-icon', standalone: true, encapsulation: ViewEncapsulation.None, template: `
|
|
185
|
-
<svg
|
|
186
|
-
class="icon"
|
|
187
|
-
[style.--ds-icon-size]="size() + 'px'"
|
|
188
|
-
[attr.width]="size()"
|
|
189
|
-
[attr.height]="size()"
|
|
190
|
-
viewBox="0 0 24 24"
|
|
191
|
-
fill="none"
|
|
192
|
-
stroke="currentColor"
|
|
193
|
-
[attr.stroke-width]="stroke()"
|
|
194
|
-
stroke-linecap="round"
|
|
195
|
-
stroke-linejoin="round"
|
|
196
|
-
[attr.role]="ariaLabel() ? 'img' : null"
|
|
197
|
-
[attr.aria-label]="ariaLabel()"
|
|
198
|
-
[attr.aria-hidden]="ariaLabel() ? null : 'true'"
|
|
199
|
-
[innerHTML]="paths()"
|
|
200
|
-
></svg>
|
|
184
|
+
args: [{ selector: 'ds-icon', standalone: true, encapsulation: ViewEncapsulation.None, template: `
|
|
185
|
+
<svg
|
|
186
|
+
class="icon"
|
|
187
|
+
[style.--ds-icon-size]="size() + 'px'"
|
|
188
|
+
[attr.width]="size()"
|
|
189
|
+
[attr.height]="size()"
|
|
190
|
+
viewBox="0 0 24 24"
|
|
191
|
+
fill="none"
|
|
192
|
+
stroke="currentColor"
|
|
193
|
+
[attr.stroke-width]="stroke()"
|
|
194
|
+
stroke-linecap="round"
|
|
195
|
+
stroke-linejoin="round"
|
|
196
|
+
[attr.role]="ariaLabel() ? 'img' : null"
|
|
197
|
+
[attr.aria-label]="ariaLabel()"
|
|
198
|
+
[attr.aria-hidden]="ariaLabel() ? null : 'true'"
|
|
199
|
+
[innerHTML]="paths()"
|
|
200
|
+
></svg>
|
|
201
201
|
`, 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
202
|
}], 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
203
|
|
|
@@ -228,16 +228,17 @@ class ButtonComponent {
|
|
|
228
228
|
return parts.filter(Boolean).join(' ');
|
|
229
229
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
230
230
|
onClick(event) {
|
|
231
|
-
if (this.disabled() || this.loading())
|
|
231
|
+
if (this.disabled() || this.loading()) {
|
|
232
232
|
return;
|
|
233
|
+
}
|
|
233
234
|
this.pressed.emit(event);
|
|
234
235
|
}
|
|
235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
236
|
+
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-fg: var(--ds-button-fg, var(--primary-on));--_button-border: var(--ds-button-border, transparent);--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring));--_button-pressed-shadow: var(--ds-button-pressed-shadow, 0 0 0 3px color-mix(in srgb, var(--_button-bg-active) 35%, transparent));--_button-radius: var(--ds-button-radius, var(--radius-md));--_button-bg-disabled: var(--ds-button-bg-disabled, var(--surface-disabled));--_button-fg-disabled: var(--ds-button-fg-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-fg);background:var(--_button-bg);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:var(--_button-bg-hover)}.button:active{background:var(--_button-bg-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:var(--_button-bg-disabled);color:var(--_button-fg-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: var(--ds-button-bg, var(--primary-muted));--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-muted-strong));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted-strong))}.button.tertiary{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-subtitle));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted))}.button.outline{--_button-bg: var(--ds-button-bg, var(--surface-default));--_button-fg: var(--ds-button-fg, var(--text-primary));--_button-border: var(--ds-button-border, var(--border-default));--_button-bg-hover: var(--ds-button-bg-hover, var(--surface-secondary));--_button-bg-active: var(--ds-button-bg-active, var(--surface-secondary))}.button.error{--_button-bg: var(--ds-button-bg, var(--error));--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring-error))}.button.success{--_button-bg: var(--ds-button-bg, var(--success));--_button-fg: var(--ds-button-fg, var(--text-on-success))}.button.warning{--_button-bg: var(--ds-button-bg, var(--warning));--_button-fg: var(--ds-button-fg, var(--text-on-warning))}.button.text{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--text-link));--_button-bg-hover: var(--ds-button-bg-hover, transparent);--_button-bg-active: var(--ds-button-bg-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:var(--_button-bg);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-fg);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(--focus-ring)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
237
238
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
239
240
|
type: Component,
|
|
240
|
-
args: [{ selector: 'ds-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { '[class.full-width]': 'fullWidth()' }, template: "<button\
|
|
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-fg: var(--ds-button-fg, var(--primary-on));--_button-border: var(--ds-button-border, transparent);--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring));--_button-pressed-shadow: var(--ds-button-pressed-shadow, 0 0 0 3px color-mix(in srgb, var(--_button-bg-active) 35%, transparent));--_button-radius: var(--ds-button-radius, var(--radius-md));--_button-bg-disabled: var(--ds-button-bg-disabled, var(--surface-disabled));--_button-fg-disabled: var(--ds-button-fg-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-fg);background:var(--_button-bg);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:var(--_button-bg-hover)}.button:active{background:var(--_button-bg-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:var(--_button-bg-disabled);color:var(--_button-fg-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: var(--ds-button-bg, var(--primary-muted));--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-muted-strong));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted-strong))}.button.tertiary{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-subtitle));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted))}.button.outline{--_button-bg: var(--ds-button-bg, var(--surface-default));--_button-fg: var(--ds-button-fg, var(--text-primary));--_button-border: var(--ds-button-border, var(--border-default));--_button-bg-hover: var(--ds-button-bg-hover, var(--surface-secondary));--_button-bg-active: var(--ds-button-bg-active, var(--surface-secondary))}.button.error{--_button-bg: var(--ds-button-bg, var(--error));--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring-error))}.button.success{--_button-bg: var(--ds-button-bg, var(--success));--_button-fg: var(--ds-button-fg, var(--text-on-success))}.button.warning{--_button-bg: var(--ds-button-bg, var(--warning));--_button-fg: var(--ds-button-fg, var(--text-on-warning))}.button.text{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--text-link));--_button-bg-hover: var(--ds-button-bg-hover, transparent);--_button-bg-active: var(--ds-button-bg-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:var(--_button-bg);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-fg);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(--focus-ring)}\n"] }]
|
|
241
242
|
}], 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"] }] } });
|
|
242
243
|
|
|
243
244
|
/**
|
|
@@ -275,12 +276,12 @@ class IconButtonComponent {
|
|
|
275
276
|
return;
|
|
276
277
|
this.pressed.emit(event);
|
|
277
278
|
}
|
|
278
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
279
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
279
|
+
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 [name]=\"icon()\" [size]=\"iconSize()\" />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.icon-button{--_icon-button-bg: var(--ds-icon-button-bg, transparent);--_icon-button-fg: var(--ds-icon-button-fg, var(--text-secondary));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-muted));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--_icon-button-bg-hover));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary));--_icon-button-focus-shadow: var(--ds-icon-button-focus-shadow, var(--focus-ring));--_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:var(--_icon-button-bg);color:var(--_icon-button-fg);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:var(--_icon-button-bg-hover);color:var(--_icon-button-fg-hover)}.icon-button:active{background:var(--_icon-button-bg-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: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}.icon-button.tonal{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary-muted));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-strong));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--primary-subtitle));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--primary-muted-strong));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--primary-strong))}.icon-button.outlined{--_icon-button-bg: var(--ds-icon-button-bg, var(--surface-default));--_icon-button-fg: var(--ds-icon-button-fg, var(--text-primary));--_icon-button-border: var(--ds-icon-button-border, var(--border-default));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-secondary));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--surface-muted));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary))}.icon-button.selected{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
280
281
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
282
283
|
type: Component,
|
|
283
|
-
args: [{ selector: 'ds-icon-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\
|
|
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 [name]=\"icon()\" [size]=\"iconSize()\" />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.icon-button{--_icon-button-bg: var(--ds-icon-button-bg, transparent);--_icon-button-fg: var(--ds-icon-button-fg, var(--text-secondary));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-muted));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--_icon-button-bg-hover));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary));--_icon-button-focus-shadow: var(--ds-icon-button-focus-shadow, var(--focus-ring));--_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:var(--_icon-button-bg);color:var(--_icon-button-fg);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:var(--_icon-button-bg-hover);color:var(--_icon-button-fg-hover)}.icon-button:active{background:var(--_icon-button-bg-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: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}.icon-button.tonal{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary-muted));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-strong));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--primary-subtitle));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--primary-muted-strong));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--primary-strong))}.icon-button.outlined{--_icon-button-bg: var(--ds-icon-button-bg, var(--surface-default));--_icon-button-fg: var(--ds-icon-button-fg, var(--text-primary));--_icon-button-border: var(--ds-icon-button-border, var(--border-default));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-secondary));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--surface-muted));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary))}.icon-button.selected{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}\n"] }]
|
|
284
285
|
}], 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"] }] } });
|
|
285
286
|
|
|
286
287
|
class BadgeComponent {
|
|
@@ -295,12 +296,12 @@ class BadgeComponent {
|
|
|
295
296
|
];
|
|
296
297
|
return parts.filter(Boolean).join(' ');
|
|
297
298
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
298
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
299
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
299
|
+
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-fg: var(--ds-badge-fg, 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:var(--_badge-bg);color:var(--_badge-fg)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentColor}.badge.planning{--_badge-bg: var(--ds-badge-bg, var(--status-planning-bg));--_badge-fg: var(--ds-badge-fg, var(--status-planning-fg))}.badge.confirmed{--_badge-bg: var(--ds-badge-bg, var(--status-confirmed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-confirmed-fg))}.badge.active{--_badge-bg: var(--ds-badge-bg, var(--status-active-bg));--_badge-fg: var(--ds-badge-fg, var(--status-active-fg))}.badge.completed{--_badge-bg: var(--ds-badge-bg, var(--status-completed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-completed-fg))}.badge.info{--_badge-bg: var(--ds-badge-bg, var(--info-subtitle));--_badge-fg: var(--ds-badge-fg, var(--info-text))}.badge.success{--_badge-bg: var(--ds-badge-bg, var(--success-subtitle));--_badge-fg: var(--ds-badge-fg, var(--success-text))}.badge.warning{--_badge-bg: var(--ds-badge-bg, var(--warning-subtitle));--_badge-fg: var(--ds-badge-fg, var(--warning-text))}.badge.error{--_badge-bg: var(--ds-badge-bg, var(--error-subtitle));--_badge-fg: var(--ds-badge-fg, var(--error-text))}.badge.neutral{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-fg: var(--ds-badge-fg, var(--text-secondary))}.badge.secondary{--_badge-bg: var(--ds-badge-bg, var(--secondary-subtitle));--_badge-fg: var(--ds-badge-fg, var(--secondary-strong))}.badge.solid{--_badge-bg: var(--ds-badge-bg, var(--primary));--_badge-fg: var(--ds-badge-fg, 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"] });
|
|
300
301
|
}
|
|
301
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
302
303
|
type: Component,
|
|
303
|
-
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-fg: var(--ds-badge-fg, 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:var(--_badge-bg);color:var(--_badge-fg)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentColor}.badge.planning{--_badge-bg: var(--ds-badge-bg, var(--status-planning-bg));--_badge-fg: var(--ds-badge-fg, var(--status-planning-fg))}.badge.confirmed{--_badge-bg: var(--ds-badge-bg, var(--status-confirmed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-confirmed-fg))}.badge.active{--_badge-bg: var(--ds-badge-bg, var(--status-active-bg));--_badge-fg: var(--ds-badge-fg, var(--status-active-fg))}.badge.completed{--_badge-bg: var(--ds-badge-bg, var(--status-completed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-completed-fg))}.badge.info{--_badge-bg: var(--ds-badge-bg, var(--info-
|
|
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-fg: var(--ds-badge-fg, 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:var(--_badge-bg);color:var(--_badge-fg)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentColor}.badge.planning{--_badge-bg: var(--ds-badge-bg, var(--status-planning-bg));--_badge-fg: var(--ds-badge-fg, var(--status-planning-fg))}.badge.confirmed{--_badge-bg: var(--ds-badge-bg, var(--status-confirmed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-confirmed-fg))}.badge.active{--_badge-bg: var(--ds-badge-bg, var(--status-active-bg));--_badge-fg: var(--ds-badge-fg, var(--status-active-fg))}.badge.completed{--_badge-bg: var(--ds-badge-bg, var(--status-completed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-completed-fg))}.badge.info{--_badge-bg: var(--ds-badge-bg, var(--info-subtitle));--_badge-fg: var(--ds-badge-fg, var(--info-text))}.badge.success{--_badge-bg: var(--ds-badge-bg, var(--success-subtitle));--_badge-fg: var(--ds-badge-fg, var(--success-text))}.badge.warning{--_badge-bg: var(--ds-badge-bg, var(--warning-subtitle));--_badge-fg: var(--ds-badge-fg, var(--warning-text))}.badge.error{--_badge-bg: var(--ds-badge-bg, var(--error-subtitle));--_badge-fg: var(--ds-badge-fg, var(--error-text))}.badge.neutral{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-fg: var(--ds-badge-fg, var(--text-secondary))}.badge.secondary{--_badge-bg: var(--ds-badge-bg, var(--secondary-subtitle));--_badge-fg: var(--ds-badge-fg, var(--secondary-strong))}.badge.solid{--_badge-bg: var(--ds-badge-bg, var(--primary));--_badge-fg: var(--ds-badge-fg, 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"] }]
|
|
304
305
|
}], 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 }] }] } });
|
|
305
306
|
|
|
306
307
|
class StatusDotComponent {
|
|
@@ -308,10 +309,10 @@ class StatusDotComponent {
|
|
|
308
309
|
/** Override the colour-only status with a human label for assistive tech. */
|
|
309
310
|
ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
310
311
|
classes = computed(() => `status-dot ${this.status()}`, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
311
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
312
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
312
|
+
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()" aria-hidden="true"></span>`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;height:1em}.status-dot{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted));--_statusdot-size: var(--ds-statusdot-size, var(--status-dot-size));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"] });
|
|
313
314
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatusDotComponent, decorators: [{
|
|
315
316
|
type: Component,
|
|
316
317
|
args: [{ selector: 'ds-status-dot', standalone: true, template: `<span [class]="classes()" aria-hidden="true"></span>`, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
317
318
|
role: 'img',
|
|
@@ -336,10 +337,10 @@ class AvatarComponent {
|
|
|
336
337
|
return { bg: value.bg, fg: value.fg };
|
|
337
338
|
return { bg: null, fg: null };
|
|
338
339
|
}, ...(ngDevMode ? [{ debugName: "tintStyle" }] : /* istanbul ignore next */ []));
|
|
339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
340
|
+
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-fg": "tintStyle().fg", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : true" } }, ngImport: i0, template: "@if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n} @else {\n {{ initials() }}\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatar-size: var(--ds-avatar-size, var(--avatar-md));--_avatar-bg: var(--ds-avatar-bg, var(--primary-muted));--_avatar-fg: var(--ds-avatar-fg, 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:var(--_avatar-bg);color:var(--_avatar-fg);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: var(--ds-avatar-bg, var(--surface-secondary));--_avatar-fg: var(--ds-avatar-fg, var(--text-secondary))}\n"] });
|
|
341
342
|
}
|
|
342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
343
344
|
type: Component,
|
|
344
345
|
args: [{ selector: 'ds-avatar', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
345
346
|
'[class.xs]': "size() === 'xs'",
|
|
@@ -364,10 +365,10 @@ class AvatarGroupComponent {
|
|
|
364
365
|
return null;
|
|
365
366
|
return total > max ? total - max : null;
|
|
366
367
|
}, ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
|
|
367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
368
|
+
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\">+{{ overflow() }}</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"] });
|
|
369
370
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AvatarGroupComponent, decorators: [{
|
|
371
372
|
type: Component,
|
|
372
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\">+{{ overflow() }}</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"] }]
|
|
373
374
|
}], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }] } });
|
|
@@ -385,10 +386,10 @@ class CardComponent {
|
|
|
385
386
|
this.pressed.emit(event);
|
|
386
387
|
}
|
|
387
388
|
}
|
|
388
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
389
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
389
|
+
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 [class]=\"classes()\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block;--_card-bg: var(--ds-card-bg, 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(--focus-ring));--_card-hover-lift: var(--ds-card-hover-lift, var(--card-hover-lift))}.card{background:var(--_card-bg);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"] });
|
|
390
391
|
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CardComponent, decorators: [{
|
|
392
393
|
type: Component,
|
|
393
394
|
args: [{ selector: 'ds-card', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<article [class]=\"classes()\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block;--_card-bg: var(--ds-card-bg, 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(--focus-ring));--_card-hover-lift: var(--ds-card-hover-lift, var(--card-hover-lift))}.card{background:var(--_card-bg);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"] }]
|
|
394
395
|
}], 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"] }] } });
|
|
@@ -430,10 +431,10 @@ class StatComponent {
|
|
|
430
431
|
const suffix = this.deltaLabel() ? ` ${this.deltaLabel()}` : '';
|
|
431
432
|
return `${magnitude}${suffix}`;
|
|
432
433
|
}, ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
|
|
433
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
434
|
+
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\">{{ label() }}</div>\n <div class=\"value\">{{ value() }}{{ unit() }}</div>\n @if (delta() !== null) {\n <div [class]=\"deltaClasses()\">\n @if (deltaIcon(); as icon) {\n <ds-icon [name]=\"icon\" [size]=\"12\"></ds-icon>\n }\n <ng-content select=\"[delta]\">{{ deltaText() }}</ng-content>\n </div>\n } @else if (caption()) {\n <div class=\"caption\">{{ caption() }}</div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{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{--_stat-bg: var(--ds-stat-bg, 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));background:var(--_stat-bg);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"] }] });
|
|
435
436
|
}
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatComponent, decorators: [{
|
|
437
438
|
type: Component,
|
|
438
439
|
args: [{ selector: 'ds-stat', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
439
440
|
'[class.danger]': "variant() === 'danger'",
|
|
@@ -448,10 +449,10 @@ class TabComponent {
|
|
|
448
449
|
count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
|
|
449
450
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
450
451
|
content = viewChild.required('content');
|
|
451
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
452
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
452
|
+
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><ng-content></ng-content></ng-template>`, isInline: true, styles: [":host{display:none}\n"] });
|
|
453
454
|
}
|
|
454
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, decorators: [{
|
|
455
456
|
type: Component,
|
|
456
457
|
args: [{ selector: 'ds-tab', standalone: true, template: `<ng-template #content><ng-content></ng-content></ng-template>`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:none}\n"] }]
|
|
457
458
|
}], 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 }] }] } });
|
|
@@ -520,12 +521,12 @@ class TabsComponent {
|
|
|
520
521
|
el?.focus();
|
|
521
522
|
});
|
|
522
523
|
}
|
|
523
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
524
|
+
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 [class]=\"tabsClasses()\" role=\"tablist\">\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 [name]=\"tab.icon()!\" [size]=\"14\"></ds-icon>\n }\n <span>{{ tab.label() }}</span>\n @if (tab.count() !== null) {\n <span class=\"badge neutral count\">{{ tab.count() }}</span>\n }\n </button>\n }\n</div>\n<div\n class=\"panel\"\n role=\"tabpanel\"\n [id]=\"panelId(selectedIndex())\"\n [attr.aria-labelledby]=\"tabId(selectedIndex())\"\n tabindex=\"0\"\n>\n @if (selectedTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.tabs{--_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-fg: var(--ds-tab-fg, var(--text-secondary));--_tab-fg-hover: var(--ds-tab-fg-hover, var(--text-primary));--_tab-fg-active: var(--ds-tab-fg-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: var(--ds-tabs-pills-bg, var(--surface-secondary));--_tab-pill-bg-hover: var(--ds-tab-pill-bg-hover, var(--primary-subtitle));--_tab-pill-bg-active: var(--ds-tab-pill-bg-active, var(--surface-default));--_tab-pill-bg-active-hover: var(--ds-tab-pill-bg-active-hover, var(--primary-subtitle));--_tab-pill-fg-active: var(--ds-tab-pill-fg-active, var(--primary-strong));--_tab-pill-radius: var(--ds-tab-pill-radius, var(--radius-md));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-fg);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-fg-hover)}.tabs .tab.active{color:var(--_tab-fg-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(--focus-ring);border-radius:var(--radius-sm)}.tabs .tab[disabled],.tabs .tab.disabled{color:var(--text-disabled);cursor:not-allowed}.tabs.secondary .tab.active{--_tab-fg-active: var(--ds-tab-fg-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:var(--_tabs-pills-bg);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-fg)}.tabs.pills .tab:hover{background:var(--_tab-pill-bg-hover);color:var(--_tab-fg-hover)}.tabs.pills .tab.active{background:var(--_tab-pill-bg-active);color:var(--_tab-pill-fg-active);border-bottom:0;box-shadow:var(--shadow-1)}.tabs.pills .tab.active:hover{background:var(--_tab-pill-bg-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"] }] });
|
|
525
526
|
}
|
|
526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
527
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, decorators: [{
|
|
527
528
|
type: Component,
|
|
528
|
-
args: [{ selector: 'ds-tabs', standalone: true, imports: [NgTemplateOutlet, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"tabsClasses()\" role=\"tablist\">\
|
|
529
|
+
args: [{ selector: 'ds-tabs', standalone: true, imports: [NgTemplateOutlet, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"tabsClasses()\" role=\"tablist\">\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 [name]=\"tab.icon()!\" [size]=\"14\"></ds-icon>\n }\n <span>{{ tab.label() }}</span>\n @if (tab.count() !== null) {\n <span class=\"badge neutral count\">{{ tab.count() }}</span>\n }\n </button>\n }\n</div>\n<div\n class=\"panel\"\n role=\"tabpanel\"\n [id]=\"panelId(selectedIndex())\"\n [attr.aria-labelledby]=\"tabId(selectedIndex())\"\n tabindex=\"0\"\n>\n @if (selectedTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.tabs{--_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-fg: var(--ds-tab-fg, var(--text-secondary));--_tab-fg-hover: var(--ds-tab-fg-hover, var(--text-primary));--_tab-fg-active: var(--ds-tab-fg-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: var(--ds-tabs-pills-bg, var(--surface-secondary));--_tab-pill-bg-hover: var(--ds-tab-pill-bg-hover, var(--primary-subtitle));--_tab-pill-bg-active: var(--ds-tab-pill-bg-active, var(--surface-default));--_tab-pill-bg-active-hover: var(--ds-tab-pill-bg-active-hover, var(--primary-subtitle));--_tab-pill-fg-active: var(--ds-tab-pill-fg-active, var(--primary-strong));--_tab-pill-radius: var(--ds-tab-pill-radius, var(--radius-md));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-fg);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-fg-hover)}.tabs .tab.active{color:var(--_tab-fg-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(--focus-ring);border-radius:var(--radius-sm)}.tabs .tab[disabled],.tabs .tab.disabled{color:var(--text-disabled);cursor:not-allowed}.tabs.secondary .tab.active{--_tab-fg-active: var(--ds-tab-fg-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:var(--_tabs-pills-bg);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-fg)}.tabs.pills .tab:hover{background:var(--_tab-pill-bg-hover);color:var(--_tab-fg-hover)}.tabs.pills .tab.active{background:var(--_tab-pill-bg-active);color:var(--_tab-pill-fg-active);border-bottom:0;box-shadow:var(--shadow-1)}.tabs.pills .tab.active:hover{background:var(--_tab-pill-bg-active-hover)}.panel{padding-top:var(--space-3)}.panel:empty{display:none}\n"] }]
|
|
529
530
|
}], 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 }] }] } });
|
|
530
531
|
|
|
531
532
|
/** Process-wide counter so each control gets a stable, unique id for
|
|
@@ -612,12 +613,12 @@ class InputComponent {
|
|
|
612
613
|
clear() {
|
|
613
614
|
this.value.set('');
|
|
614
615
|
}
|
|
615
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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()\">\r\n @if (label()) {\r\n <label class=\"label\" [attr.for]=\"uid\">\r\n {{ label() }}\r\n @if (required()) {\r\n <span class=\"req\" aria-hidden=\"true\">*</span>\r\n } @else if (optional()) {\r\n <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n }\r\n </label>\r\n }\r\n <div class=\"control\">\r\n <span class=\"addon-slot prefix\"><ng-content select=\"[dsInputPrefix]\"></ng-content></span>\r\n <input\r\n [id]=\"uid\"\r\n [type]=\"effectiveType()\"\r\n [(ngModel)]=\"value\"\r\n [attr.name]=\"name()\"\r\n [attr.min]=\"min()\"\r\n [attr.max]=\"max()\"\r\n [attr.step]=\"step()\"\r\n [attr.autocomplete]=\"autocomplete()\"\r\n [attr.autofocus]=\"autofocus() ? '' : null\"\r\n [attr.placeholder]=\"placeholder() || null\"\r\n [attr.aria-label]=\"resolvedAriaLabel()\"\r\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n [attr.aria-describedby]=\"hintId()\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.enterkeyhint]=\"enterKeyHint()\"\r\n [attr.inputmode]=\"inputMode()\"\r\n [disabled]=\"disabled()\"\r\n [readOnly]=\"readOnly()\"\r\n [required]=\"required()\"\r\n (blur)=\"blurred.emit()\"\r\n />\r\n @if (canClear() && value() && !disabled()) {\r\n <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\" aria-label=\"Clear input\"></button>\r\n }\r\n @if (showPasswordToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"password-toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\r\n (click)=\"togglePassword()\"\r\n >\r\n <ds-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" [size]=\"16\" />\r\n </button>\r\n }\r\n <span class=\"addon-slot suffix\"><ng-content select=\"[dsInputSuffix]\"></ng-content></span>\r\n </div>\r\n @if (hint()) {\r\n <span class=\"hint\" [id]=\"hintId()\" [attr.role]=\"invalid() ? 'alert' : null\">{{ hint() }}</span>\r\n }\r\n</div>\r\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-subtle));--_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"] }] });
|
|
616
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
617
618
|
}
|
|
618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputComponent, decorators: [{
|
|
619
620
|
type: Component,
|
|
620
|
-
args: [{ selector: 'ds-input', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"wrapperClasses()\">\
|
|
621
|
+
args: [{ selector: 'ds-input', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, 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"] }]
|
|
621
622
|
}], 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"] }] } });
|
|
622
623
|
|
|
623
624
|
class NumberStepperComponent {
|
|
@@ -657,12 +658,12 @@ class NumberStepperComponent {
|
|
|
657
658
|
clamped = Math.min(max, clamped);
|
|
658
659
|
this.value.set(clamped);
|
|
659
660
|
}
|
|
660
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
661
|
+
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 (click)=\"dec()\"\n [disabled]=\"atMin() || disabled()\"\n >\u2212</button>\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 <button\n type=\"button\"\n class=\"step plus\"\n (click)=\"inc()\"\n [disabled]=\"atMax() || disabled()\"\n >+</button>\n</div>\n", styles: [":host{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(--focus-field)}.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 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;-moz-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 });
|
|
662
663
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NumberStepperComponent, decorators: [{
|
|
664
665
|
type: Component,
|
|
665
|
-
args: [{ selector: 'ds-number-stepper', standalone: true, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"stepperClass()\">\
|
|
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 (click)=\"dec()\"\n [disabled]=\"atMin() || disabled()\"\n >\u2212</button>\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 <button\n type=\"button\"\n class=\"step plus\"\n (click)=\"inc()\"\n [disabled]=\"atMax() || disabled()\"\n >+</button>\n</div>\n", styles: [":host{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(--focus-field)}.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 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;-moz-appearance:textfield}.qty:disabled{color:var(--text-disabled)}.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{appearance:none;margin:0}\n"] }]
|
|
666
667
|
}], 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 }] }] } });
|
|
667
668
|
|
|
668
669
|
let nextId$8 = 0;
|
|
@@ -705,12 +706,12 @@ class TextareaComponent {
|
|
|
705
706
|
autosizeMaxHeight = computed(() => this.autosize() && this.maxRows() ? `${this.maxRows()}lh` : null, ...(ngDevMode ? [{ debugName: "autosizeMaxHeight" }] : /* istanbul ignore next */ []));
|
|
706
707
|
// Autosize grows with content, so a manual resize handle conflicts — force none.
|
|
707
708
|
effectiveResize = computed(() => this.autosize() ? 'none' : this.resize(), ...(ngDevMode ? [{ debugName: "effectiveResize" }] : /* istanbul ignore next */ []));
|
|
708
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
709
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
709
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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" }, 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 <textarea\n [id]=\"uid\"\n [rows]=\"rows()\"\n [(ngModel)]=\"value\"\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]=\"disabled()\"\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 ></textarea>\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{display:block}.field{--_input-bg: var(--ds-input-bg, 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-fg: var(--ds-input-fg, 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(--focus-field));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-bg-error: var(--ds-input-bg-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: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: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: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;-webkit-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-fg);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:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled textarea{color:var(--text-disabled)}.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{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"] }] });
|
|
710
711
|
}
|
|
711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
712
713
|
type: Component,
|
|
713
|
-
args: [{ selector: 'ds-textarea', standalone: true, imports: [FormsModule], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"wrapperClasses()\">\
|
|
714
|
+
args: [{ selector: 'ds-textarea', standalone: true, imports: [FormsModule], encapsulation: ViewEncapsulation.Emulated, 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 <textarea\n [id]=\"uid\"\n [rows]=\"rows()\"\n [(ngModel)]=\"value\"\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]=\"disabled()\"\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 ></textarea>\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{display:block}.field{--_input-bg: var(--ds-input-bg, 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-fg: var(--ds-input-fg, 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(--focus-field));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-bg-error: var(--ds-input-bg-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: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: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: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;-webkit-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-fg);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:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled textarea{color:var(--text-disabled)}.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{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"] }]
|
|
714
715
|
}], 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 }] }] } });
|
|
715
716
|
|
|
716
717
|
class SearchComponent {
|
|
@@ -733,12 +734,12 @@ class SearchComponent {
|
|
|
733
734
|
// users don't get dropped onto <body>.
|
|
734
735
|
this.inputEl()?.nativeElement.focus();
|
|
735
736
|
}
|
|
736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
737
|
+
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 name=\"search\" [size]=\"16\"></ds-icon>\n }\n <input\n #searchInput\n class=\"input\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel() || placeholder() || null\"\n (keydown.enter)=\"onSubmit()\"\n />\n @if (clearable() && value()) {\n <button type=\"button\" class=\"search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\n </button>\n }\n @if (shortcut()) {\n <kbd class=\"kbd\">{{ shortcut() }}</kbd>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.search{--_search-height: var(--ds-search-height, var(--search-h));--_search-bg: var(--ds-search-bg, 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-focus: var(--ds-search-bg-focus, var(--surface-default));--_search-border-focus: var(--ds-search-border-focus, var(--primary));--_search-focus-shadow: var(--ds-search-focus-shadow, var(--focus-field));--_search-fg: var(--ds-search-fg, var(--text-primary));--_search-placeholder: var(--ds-search-placeholder, var(--text-tertiary));display:flex;align-items:center;gap:var(--space-2);background:var(--_search-bg);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:var(--_search-bg-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-fg)}.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"] }] });
|
|
738
739
|
}
|
|
739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SearchComponent, decorators: [{
|
|
740
741
|
type: Component,
|
|
741
|
-
args: [{ selector: 'ds-search', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"search\">\
|
|
742
|
+
args: [{ selector: 'ds-search', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"search\">\n @if (showIcon()) {\n <ds-icon name=\"search\" [size]=\"16\"></ds-icon>\n }\n <input\n #searchInput\n class=\"input\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel() || placeholder() || null\"\n (keydown.enter)=\"onSubmit()\"\n />\n @if (clearable() && value()) {\n <button type=\"button\" class=\"search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\n </button>\n }\n @if (shortcut()) {\n <kbd class=\"kbd\">{{ shortcut() }}</kbd>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.search{--_search-height: var(--ds-search-height, var(--search-h));--_search-bg: var(--ds-search-bg, 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-focus: var(--ds-search-bg-focus, var(--surface-default));--_search-border-focus: var(--ds-search-border-focus, var(--primary));--_search-focus-shadow: var(--ds-search-focus-shadow, var(--focus-field));--_search-fg: var(--ds-search-fg, var(--text-primary));--_search-placeholder: var(--ds-search-placeholder, var(--text-tertiary));display:flex;align-items:center;gap:var(--space-2);background:var(--_search-bg);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:var(--_search-bg-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-fg)}.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"] }]
|
|
742
743
|
}], 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 }] }] } });
|
|
743
744
|
|
|
744
745
|
/** Showcase-only: renders the component's open/overlay surface inline in normal
|
|
@@ -746,10 +747,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
746
747
|
* Not part of the production contract. */
|
|
747
748
|
class DsStaticPreview {
|
|
748
749
|
staticPreview = input(false, { ...(ngDevMode ? { debugName: "staticPreview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
749
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
750
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
750
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsStaticPreview, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
751
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: DsStaticPreview, isStandalone: true, inputs: { staticPreview: { classPropertyName: "staticPreview", publicName: "staticPreview", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
751
752
|
}
|
|
752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsStaticPreview, decorators: [{
|
|
753
754
|
type: Directive,
|
|
754
755
|
args: [{ standalone: true }]
|
|
755
756
|
}], propDecorators: { staticPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "staticPreview", required: false }] }] } });
|
|
@@ -986,12 +987,12 @@ class SelectComponent {
|
|
|
986
987
|
}
|
|
987
988
|
return -1;
|
|
988
989
|
}
|
|
989
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
990
|
+
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" }, 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 class=\"select-label\" [id]=\"labelId\">\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 </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]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\n <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></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 class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\n @for (item of options(); track item.label; let groupIdx = $index) {\n @if (isOptionGroup(item)) {\n <li class=\"optgroup\" role=\"group\" [attr.aria-label]=\"item.label\">\n <span class=\"optgroup-label\" [class.is-first]=\"groupIdx === 0\">{{ item.label }}</span>\n <ul class=\"optgroup-list\" role=\"presentation\">\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]=\"isOptionDisabled(opt, item.disabled) ? 'true' : null\"\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\">{{ opt.label }}</span>\n @if (isSelected(opt)) {\n <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\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\">{{ item.label }}</span>\n @if (isSelected(item)) {\n <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\n }\n </button>\n </li>\n }\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{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(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-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"] }] });
|
|
991
992
|
}
|
|
992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
993
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
993
994
|
type: Component,
|
|
994
|
-
args: [{ selector: 'ds-select', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\
|
|
995
|
+
args: [{ selector: 'ds-select', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\n <span class=\"select-label\" [id]=\"labelId\">\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 </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]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\n <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></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 class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\n @for (item of options(); track item.label; let groupIdx = $index) {\n @if (isOptionGroup(item)) {\n <li class=\"optgroup\" role=\"group\" [attr.aria-label]=\"item.label\">\n <span class=\"optgroup-label\" [class.is-first]=\"groupIdx === 0\">{{ item.label }}</span>\n <ul class=\"optgroup-list\" role=\"presentation\">\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]=\"isOptionDisabled(opt, item.disabled) ? 'true' : null\"\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\">{{ opt.label }}</span>\n @if (isSelected(opt)) {\n <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\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\">{{ item.label }}</span>\n @if (isSelected(item)) {\n <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\n }\n </button>\n </li>\n }\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{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(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-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"] }]
|
|
995
996
|
}], 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 }] }] } });
|
|
996
997
|
|
|
997
998
|
let nextId$6 = 0;
|
|
@@ -1192,12 +1193,12 @@ class DropdownComponent {
|
|
|
1192
1193
|
}
|
|
1193
1194
|
return -1;
|
|
1194
1195
|
}
|
|
1195
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1196
|
+
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 class=\"dropdown-label\" [id]=\"labelId\">{{ label() }}</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 class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\n <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></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 class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\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 class=\"option-icon\" [name]=\"opt.icon\" [size]=\"16\" />\n }\n <span class=\"option-label\">{{ opt.label }}</span>\n @if (isSelected(opt)) {\n <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\n }\n </button>\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{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(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-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"] }] });
|
|
1197
1198
|
}
|
|
1198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
1199
1200
|
type: Component,
|
|
1200
|
-
args: [{ selector: 'ds-dropdown', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\
|
|
1201
|
+
args: [{ selector: 'ds-dropdown', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\n <span class=\"dropdown-label\" [id]=\"labelId\">{{ label() }}</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 class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\n <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></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 class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\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 class=\"option-icon\" [name]=\"opt.icon\" [size]=\"16\" />\n }\n <span class=\"option-label\">{{ opt.label }}</span>\n @if (isSelected(opt)) {\n <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\n }\n </button>\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{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(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtitle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-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"] }]
|
|
1201
1202
|
}], 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 }] }] } });
|
|
1202
1203
|
|
|
1203
1204
|
class SkeletonComponent {
|
|
@@ -1205,10 +1206,10 @@ class SkeletonComponent {
|
|
|
1205
1206
|
height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
1206
1207
|
circle = input(false, ...(ngDevMode ? [{ debugName: "circle" }] : /* istanbul ignore next */ []));
|
|
1207
1208
|
inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
|
|
1208
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1209
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SkeletonComponent, isStandalone: true, selector: "ds-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "style.width": "width()", "style.height": "height()", "class.circle": "circle()", "class.inline": "inline()" } }, ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;background:var(--surface-secondary);border-radius:var(--radius-md)}:host(.circle){border-radius:var(--radius-pill)}:host(.inline){display:inline-block;vertical-align:middle}:host:after{content:\"\";position:absolute;inset:0;background:var(--surface-muted);pointer-events:none;will-change:mask-position;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);-webkit-mask-size:200vw 100%;mask-size:200vw 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-attachment:fixed;mask-attachment:fixed;-webkit-mask-position:var(--skeleton-shimmer-x, 100vw) 0;mask-position:var(--skeleton-shimmer-x, 100vw) 0}\n"] });
|
|
1210
1211
|
}
|
|
1211
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
1212
1213
|
type: Component,
|
|
1213
1214
|
args: [{ selector: 'ds-skeleton', standalone: true, template: '', host: {
|
|
1214
1215
|
'aria-hidden': 'true',
|
|
@@ -1240,10 +1241,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1240
1241
|
class CellTemplateDirective {
|
|
1241
1242
|
dsCellTemplate = input.required(...(ngDevMode ? [{ debugName: "dsCellTemplate" }] : /* istanbul ignore next */ []));
|
|
1242
1243
|
template = inject((TemplateRef));
|
|
1243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1244
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
1244
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1245
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: CellTemplateDirective, isStandalone: true, selector: "[dsCellTemplate]", inputs: { dsCellTemplate: { classPropertyName: "dsCellTemplate", publicName: "dsCellTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
1245
1246
|
}
|
|
1246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CellTemplateDirective, decorators: [{
|
|
1247
1248
|
type: Directive,
|
|
1248
1249
|
args: [{
|
|
1249
1250
|
selector: '[dsCellTemplate]',
|
|
@@ -1425,14 +1426,14 @@ class TableComponent {
|
|
|
1425
1426
|
const widths = ['45%', '55%', '65%', '75%', '85%'];
|
|
1426
1427
|
return widths[Math.abs(hash) % widths.length] ?? '70%';
|
|
1427
1428
|
}
|
|
1428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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()\">\r\n @if (isOverlayLoading()) {\r\n <div class=\"overlay\" aria-hidden=\"true\">\r\n <span class=\"spinner\"></span>\r\n </div>\r\n }\r\n <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\r\n @if (loading() !== false) { Loading\u2026 }\r\n </div>\r\n <table [class]=\"tableClasses()\" [attr.role]=\"rowInteractive() ? 'grid' : null\" [attr.aria-busy]=\"loading() !== false ? 'true' : null\">\r\n @if (caption()) {\r\n <caption class=\"visually-hidden\">{{ caption() }}</caption>\r\n }\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th scope=\"col\" class=\"select-col\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"check\"\r\n aria-label=\"Select all rows\"\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (change)=\"onToggleAll($event)\"\r\n />\r\n </th>\r\n }\r\n @for (col of columns(); track col.key) {\r\n <th\r\n scope=\"col\"\r\n [class]=\"headerClasses(col)\"\r\n [class.numeric]=\"col.align === 'right'\"\r\n [attr.aria-sort]=\"ariaSort(col)\"\r\n >\r\n @if (col.sortable) {\r\n <button type=\"button\" class=\"th-label\" (click)=\"onSort(col)\">\r\n {{ col.label }}\r\n <ds-icon class=\"sort-icon\" [name]=\"sortIcon(col)\" [size]=\"12\"></ds-icon>\r\n </button>\r\n } @else {\r\n <span class=\"th-label\">{{ col.label }}</span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (isSkeletonLoading()) {\r\n @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\r\n <tr>\r\n @if (selectable()) {\r\n <td><ds-skeleton width=\"14px\" height=\"14px\" [inline]=\"true\" /></td>\r\n }\r\n @for (col of columns(); track col.key) {\r\n <td [class.numeric]=\"col.align === 'right'\">\r\n <ds-skeleton [width]=\"skeletonWidth(col, rowIndex)\" height=\"14px\" [inline]=\"true\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else if (!data().length) {\r\n <tr>\r\n <td\r\n [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\r\n class=\"empty\"\r\n >\r\n @if (emptyTemplate()) {\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\"></ng-container>\r\n } @else {\r\n <ng-content select=\"[empty]\"></ng-content>\r\n }\r\n </td>\r\n </tr>\r\n } @else {\r\n @for (row of data(); track row.id) {\r\n <tr\r\n [class.selected]=\"isSelected(row)\"\r\n [class.clickable]=\"rowInteractive()\"\r\n [attr.tabindex]=\"rowInteractive() ? 0 : null\"\r\n [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\r\n (click)=\"onRowClick(row, $event)\"\r\n (keydown.enter)=\"onRowKey(row, $event)\"\r\n (keydown.space)=\"onRowKey(row, $event)\"\r\n >\r\n @if (selectable()) {\r\n <td>\r\n <input\r\n type=\"checkbox\"\r\n class=\"check\"\r\n [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\r\n [checked]=\"isSelected(row)\"\r\n (change)=\"onToggleRow(row, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </td>\r\n }\r\n @for (col of columns(); track col.key) {\r\n <td [class.numeric]=\"col.align === 'right'\">\r\n @if (cellTemplate(col); as tpl) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"tpl\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\r\n ></ng-container>\r\n } @else {\r\n {{ cellValue(row, col) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n@if (selectable() && someSelected()) {\r\n <div class=\"bulk-bar\">\r\n <span class=\"count\">{{ selectedIds().size }} selected</span>\r\n <span class=\"sep\"></span>\r\n <ng-content select=\"[bulk-actions]\"></ng-content>\r\n </div>\r\n}\r\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-subtle));--_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"] }] });
|
|
1429
|
+
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"] }] });
|
|
1430
1431
|
}
|
|
1431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
|
|
1432
1433
|
type: Component,
|
|
1433
1434
|
args: [{ selector: 'ds-table', standalone: true, imports: [IconComponent, NgTemplateOutlet, SkeletonComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
1434
1435
|
'[class.bordered]': 'bordered()',
|
|
1435
|
-
}, template: "<div class=\"scroll-wrap\" [class.loading-overlay]=\"isOverlayLoading()\">\r\n @if (isOverlayLoading()) {\r\n <div class=\"overlay\" aria-hidden=\"true\">\r\n <span class=\"spinner\"></span>\r\n </div>\r\n }\r\n <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\r\n @if (loading() !== false) { Loading\u2026 }\r\n </div>\r\n <table [class]=\"tableClasses()\" [attr.role]=\"rowInteractive() ? 'grid' : null\" [attr.aria-busy]=\"loading() !== false ? 'true' : null\">\r\n @if (caption()) {\r\n <caption class=\"visually-hidden\">{{ caption() }}</caption>\r\n }\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th scope=\"col\" class=\"select-col\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"check\"\r\n aria-label=\"Select all rows\"\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (change)=\"onToggleAll($event)\"\r\n />\r\n </th>\r\n }\r\n @for (col of columns(); track col.key) {\r\n <th\r\n scope=\"col\"\r\n [class]=\"headerClasses(col)\"\r\n [class.numeric]=\"col.align === 'right'\"\r\n [attr.aria-sort]=\"ariaSort(col)\"\r\n >\r\n @if (col.sortable) {\r\n <button type=\"button\" class=\"th-label\" (click)=\"onSort(col)\">\r\n {{ col.label }}\r\n <ds-icon class=\"sort-icon\" [name]=\"sortIcon(col)\" [size]=\"12\"></ds-icon>\r\n </button>\r\n } @else {\r\n <span class=\"th-label\">{{ col.label }}</span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (isSkeletonLoading()) {\r\n @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\r\n <tr>\r\n @if (selectable()) {\r\n <td><ds-skeleton width=\"14px\" height=\"14px\" [inline]=\"true\" /></td>\r\n }\r\n @for (col of columns(); track col.key) {\r\n <td [class.numeric]=\"col.align === 'right'\">\r\n <ds-skeleton [width]=\"skeletonWidth(col, rowIndex)\" height=\"14px\" [inline]=\"true\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else if (!data().length) {\r\n <tr>\r\n <td\r\n [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\r\n class=\"empty\"\r\n >\r\n @if (emptyTemplate()) {\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\"></ng-container>\r\n } @else {\r\n <ng-content select=\"[empty]\"></ng-content>\r\n }\r\n </td>\r\n </tr>\r\n } @else {\r\n @for (row of data(); track row.id) {\r\n <tr\r\n [class.selected]=\"isSelected(row)\"\r\n [class.clickable]=\"rowInteractive()\"\r\n [attr.tabindex]=\"rowInteractive() ? 0 : null\"\r\n [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\r\n (click)=\"onRowClick(row, $event)\"\r\n (keydown.enter)=\"onRowKey(row, $event)\"\r\n (keydown.space)=\"onRowKey(row, $event)\"\r\n >\r\n @if (selectable()) {\r\n <td>\r\n <input\r\n type=\"checkbox\"\r\n class=\"check\"\r\n [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\r\n [checked]=\"isSelected(row)\"\r\n (change)=\"onToggleRow(row, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </td>\r\n }\r\n @for (col of columns(); track col.key) {\r\n <td [class.numeric]=\"col.align === 'right'\">\r\n @if (cellTemplate(col); as tpl) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"tpl\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\r\n ></ng-container>\r\n } @else {\r\n {{ cellValue(row, col) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n@if (selectable() && someSelected()) {\r\n <div class=\"bulk-bar\">\r\n <span class=\"count\">{{ selectedIds().size }} selected</span>\r\n <span class=\"sep\"></span>\r\n <ng-content select=\"[bulk-actions]\"></ng-content>\r\n </div>\r\n}\r\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-subtle));--_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"] }]
|
|
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"] }]
|
|
1436
1437
|
}], 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 }] }] } });
|
|
1437
1438
|
|
|
1438
1439
|
class PaginationComponent {
|
|
@@ -1487,12 +1488,12 @@ class PaginationComponent {
|
|
|
1487
1488
|
this.pageSizeChange.emit(next);
|
|
1488
1489
|
this.pageChange.emit(1);
|
|
1489
1490
|
}
|
|
1490
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1491
|
+
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 class=\"pagination\" aria-label=\"Pagination\">\n @if (showLabel()) {\n <span class=\"label\">{{ rangeLabel() }}</span>\n }\n <button class=\"pagination-button\" type=\"button\" aria-label=\"Previous page\" [disabled]=\"currentPage() === 1\" (click)=\"goTo(currentPage() - 1)\">\n <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\n </button>\n @for (item of pageItems(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ellipsis\" aria-hidden=\"true\">\u2026</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 >{{ item }}</button>\n }\n }\n <button class=\"pagination-button\" type=\"button\" aria-label=\"Next page\" [disabled]=\"currentPage() === totalPages()\" (click)=\"goTo(currentPage() + 1)\">\n <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\n </button>\n <ds-select\n class=\"size\"\n ariaLabel=\"Rows per page\"\n [options]=\"sizeOptions()\"\n [value]=\"pageSizeStr()\"\n (valueChange)=\"onSizeChange($event)\"\n size=\"sm\"\n ></ds-select>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.pagination{--_pagination-btn-bg: var(--ds-pagination-btn-bg, var(--surface-default));--_pagination-btn-bg-hover: var(--ds-pagination-btn-bg-hover, var(--surface-secondary));--_pagination-btn-fg: var(--ds-pagination-btn-fg, var(--text-secondary));--_pagination-btn-fg-hover: var(--ds-pagination-btn-fg-hover, var(--text-primary));--_pagination-btn-border: var(--ds-pagination-btn-border, var(--border-default));--_pagination-active-bg: var(--ds-pagination-active-bg, var(--primary));--_pagination-active-bg-hover: var(--ds-pagination-active-bg-hover, var(--primary-hover));--_pagination-active-fg: var(--ds-pagination-active-fg, var(--primary-on));--_pagination-radius: var(--ds-pagination-radius, var(--radius-md));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:var(--_pagination-btn-bg);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_pagination-btn-fg);border-radius:var(--_pagination-radius);cursor:pointer;display:inline-grid;place-items:center}.pagination .pagination-button:hover:not([disabled]):not(.active){background:var(--_pagination-btn-bg-hover);color:var(--_pagination-btn-fg-hover)}.pagination .pagination-button.active{background:var(--_pagination-active-bg);color:var(--_pagination-active-fg);border-color:var(--_pagination-active-bg)}.pagination .pagination-button.active:hover:not([disabled]){background:var(--_pagination-active-bg-hover);border-color:var(--_pagination-active-bg-hover)}.pagination .pagination-button[disabled]{color:var(--text-disabled);cursor:not-allowed}.pagination .pagination-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.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"] }] });
|
|
1492
1493
|
}
|
|
1493
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1494
1495
|
type: Component,
|
|
1495
|
-
args: [{ selector: 'ds-pagination', standalone: true, imports: [FormsModule, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav class=\"pagination\" aria-label=\"Pagination\">\
|
|
1496
|
+
args: [{ selector: 'ds-pagination', standalone: true, imports: [FormsModule, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav class=\"pagination\" aria-label=\"Pagination\">\n @if (showLabel()) {\n <span class=\"label\">{{ rangeLabel() }}</span>\n }\n <button class=\"pagination-button\" type=\"button\" aria-label=\"Previous page\" [disabled]=\"currentPage() === 1\" (click)=\"goTo(currentPage() - 1)\">\n <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\n </button>\n @for (item of pageItems(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ellipsis\" aria-hidden=\"true\">\u2026</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 >{{ item }}</button>\n }\n }\n <button class=\"pagination-button\" type=\"button\" aria-label=\"Next page\" [disabled]=\"currentPage() === totalPages()\" (click)=\"goTo(currentPage() + 1)\">\n <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\n </button>\n <ds-select\n class=\"size\"\n ariaLabel=\"Rows per page\"\n [options]=\"sizeOptions()\"\n [value]=\"pageSizeStr()\"\n (valueChange)=\"onSizeChange($event)\"\n size=\"sm\"\n ></ds-select>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.pagination{--_pagination-btn-bg: var(--ds-pagination-btn-bg, var(--surface-default));--_pagination-btn-bg-hover: var(--ds-pagination-btn-bg-hover, var(--surface-secondary));--_pagination-btn-fg: var(--ds-pagination-btn-fg, var(--text-secondary));--_pagination-btn-fg-hover: var(--ds-pagination-btn-fg-hover, var(--text-primary));--_pagination-btn-border: var(--ds-pagination-btn-border, var(--border-default));--_pagination-active-bg: var(--ds-pagination-active-bg, var(--primary));--_pagination-active-bg-hover: var(--ds-pagination-active-bg-hover, var(--primary-hover));--_pagination-active-fg: var(--ds-pagination-active-fg, var(--primary-on));--_pagination-radius: var(--ds-pagination-radius, var(--radius-md));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:var(--_pagination-btn-bg);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_pagination-btn-fg);border-radius:var(--_pagination-radius);cursor:pointer;display:inline-grid;place-items:center}.pagination .pagination-button:hover:not([disabled]):not(.active){background:var(--_pagination-btn-bg-hover);color:var(--_pagination-btn-fg-hover)}.pagination .pagination-button.active{background:var(--_pagination-active-bg);color:var(--_pagination-active-fg);border-color:var(--_pagination-active-bg)}.pagination .pagination-button.active:hover:not([disabled]){background:var(--_pagination-active-bg-hover);border-color:var(--_pagination-active-bg-hover)}.pagination .pagination-button[disabled]{color:var(--text-disabled);cursor:not-allowed}.pagination .pagination-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.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"] }]
|
|
1496
1497
|
}], 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"] }] } });
|
|
1497
1498
|
|
|
1498
1499
|
let nextId$5 = 0;
|
|
@@ -1756,12 +1757,12 @@ class DatePickerComponent {
|
|
|
1756
1757
|
parts.push('selected');
|
|
1757
1758
|
return parts.join(' ');
|
|
1758
1759
|
}
|
|
1759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1760
|
+
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 class=\"label\" [id]=\"labelId\">\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 </span>\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 name=\"calendar\" [size]=\"14\"></ds-icon>\n <span>{{ displayLabel() }}</span>\n </button>\n @if (hint()) {\n <small class=\"hint\">{{ hint() }}</small>\n }\n</div>\n\n<ng-template #panel>\n <div class=\"calendar\">\n <div class=\"head\">\n <span class=\"title\">{{ monthLabel() }}</span>\n <span class=\"nav\">\n <button type=\"button\" (click)=\"prevMonth()\">\n <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\n </button>\n <button type=\"button\" (click)=\"nextMonth()\">\n <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\n </button>\n </span>\n </div>\n <div class=\"grid\">\n <span class=\"dow\">Mo</span>\n <span class=\"dow\">Tu</span>\n <span class=\"dow\">We</span>\n <span class=\"dow\">Th</span>\n <span class=\"dow\">Fr</span>\n <span class=\"dow\">Sa</span>\n <span class=\"dow\">Su</span>\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{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(--focus-ring)}.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: var(--ds-datepicker-bg, 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: var(--ds-datepicker-day-hover-bg, var(--surface-secondary));--_datepicker-day-today-fg: var(--ds-datepicker-day-today-fg, var(--primary));--_datepicker-day-selected-bg: var(--ds-datepicker-day-selected-bg, var(--primary));--_datepicker-day-selected-bg-hover: var(--ds-datepicker-day-selected-bg-hover, var(--primary-selected-hover));--_datepicker-day-selected-fg: var(--ds-datepicker-day-selected-fg, var(--primary-on));--_datepicker-day-range-bg: var(--ds-datepicker-day-range-bg, var(--primary-subtitle));--_datepicker-day-range-fg: var(--ds-datepicker-day-range-fg, var(--primary-strong));--_datepicker-day-disabled-fg: var(--ds-datepicker-day-disabled-fg, var(--text-disabled));--_datepicker-width: var(--ds-datepicker-width, var(--datepicker-w));background:var(--_datepicker-bg);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:var(--_datepicker-day-hover-bg)}.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:var(--_datepicker-day-hover-bg)}.calendar .day.muted{color:var(--text-muted)}.calendar .day.today{font-weight:var(--font-weight-bold);color:var(--_datepicker-day-today-fg)}.calendar .day.selected{background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.selected:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.in-range{background:var(--_datepicker-day-range-bg);color:var(--_datepicker-day-range-fg);border-radius:var(--radius-flat)}.calendar .day.range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-start:hover,.calendar .day.range-end:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.disabled{color:var(--_datepicker-day-disabled-fg);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
1761
1762
|
}
|
|
1762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1763
1764
|
type: Component,
|
|
1764
|
-
args: [{ selector: 'ds-date-picker', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"field\">\
|
|
1765
|
+
args: [{ selector: 'ds-date-picker', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"field\">\n @if (label()) {\n <span class=\"label\" [id]=\"labelId\">\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 </span>\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 name=\"calendar\" [size]=\"14\"></ds-icon>\n <span>{{ displayLabel() }}</span>\n </button>\n @if (hint()) {\n <small class=\"hint\">{{ hint() }}</small>\n }\n</div>\n\n<ng-template #panel>\n <div class=\"calendar\">\n <div class=\"head\">\n <span class=\"title\">{{ monthLabel() }}</span>\n <span class=\"nav\">\n <button type=\"button\" (click)=\"prevMonth()\">\n <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\n </button>\n <button type=\"button\" (click)=\"nextMonth()\">\n <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\n </button>\n </span>\n </div>\n <div class=\"grid\">\n <span class=\"dow\">Mo</span>\n <span class=\"dow\">Tu</span>\n <span class=\"dow\">We</span>\n <span class=\"dow\">Th</span>\n <span class=\"dow\">Fr</span>\n <span class=\"dow\">Sa</span>\n <span class=\"dow\">Su</span>\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{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(--focus-ring)}.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: var(--ds-datepicker-bg, 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: var(--ds-datepicker-day-hover-bg, var(--surface-secondary));--_datepicker-day-today-fg: var(--ds-datepicker-day-today-fg, var(--primary));--_datepicker-day-selected-bg: var(--ds-datepicker-day-selected-bg, var(--primary));--_datepicker-day-selected-bg-hover: var(--ds-datepicker-day-selected-bg-hover, var(--primary-selected-hover));--_datepicker-day-selected-fg: var(--ds-datepicker-day-selected-fg, var(--primary-on));--_datepicker-day-range-bg: var(--ds-datepicker-day-range-bg, var(--primary-subtitle));--_datepicker-day-range-fg: var(--ds-datepicker-day-range-fg, var(--primary-strong));--_datepicker-day-disabled-fg: var(--ds-datepicker-day-disabled-fg, var(--text-disabled));--_datepicker-width: var(--ds-datepicker-width, var(--datepicker-w));background:var(--_datepicker-bg);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:var(--_datepicker-day-hover-bg)}.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:var(--_datepicker-day-hover-bg)}.calendar .day.muted{color:var(--text-muted)}.calendar .day.today{font-weight:var(--font-weight-bold);color:var(--_datepicker-day-today-fg)}.calendar .day.selected{background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.selected:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.in-range{background:var(--_datepicker-day-range-bg);color:var(--_datepicker-day-range-fg);border-radius:var(--radius-flat)}.calendar .day.range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-start:hover,.calendar .day.range-end:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.disabled{color:var(--_datepicker-day-disabled-fg);cursor:not-allowed}\n"] }]
|
|
1765
1766
|
}], 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 }] }] } });
|
|
1766
1767
|
|
|
1767
1768
|
/**
|
|
@@ -1787,10 +1788,10 @@ class BreadcrumbsService {
|
|
|
1787
1788
|
clear() {
|
|
1788
1789
|
this._items.set([]);
|
|
1789
1790
|
}
|
|
1790
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1791
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
1791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BreadcrumbsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1792
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BreadcrumbsService, providedIn: 'root' });
|
|
1792
1793
|
}
|
|
1793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BreadcrumbsService, decorators: [{
|
|
1794
1795
|
type: Injectable,
|
|
1795
1796
|
args: [{ providedIn: 'root' }]
|
|
1796
1797
|
}] });
|
|
@@ -1817,21 +1818,21 @@ class BreadcrumbsComponent {
|
|
|
1817
1818
|
event.preventDefault();
|
|
1818
1819
|
this.navigate.emit(item);
|
|
1819
1820
|
}
|
|
1820
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1821
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1821
|
+
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 class=\"breadcrumbs\" aria-label=\"Breadcrumb\" [class.is-static]=\"!effectiveClickable()\">\n @for (item of resolvedItems(); track $index; let last = $last) {\n @if (item.href && !last && effectiveClickable()) {\n <a [href]=\"item.href\" (click)=\"onNav($event, item)\">\n @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\n @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\n </a>\n } @else {\n <span [class.current]=\"last\" [attr.aria-current]=\"last ? 'page' : null\">\n @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\n @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\n </span>\n }\n @if (!last) { <span class=\"sep\" aria-hidden=\"true\"><ds-icon [name]=\"effectiveSeparator()\" [size]=\"12\" /></span> }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;min-width:0;max-width:100%}.breadcrumbs{--_breadcrumbs-fg: var(--ds-breadcrumbs-fg, var(--text-tertiary));--_breadcrumbs-fg-hover: var(--ds-breadcrumbs-fg-hover, var(--primary));--_breadcrumbs-separator-fg: var(--ds-breadcrumbs-separator-fg, var(--icon-muted));--_breadcrumbs-current-fg: var(--ds-breadcrumbs-current-fg, var(--text-primary));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-fg);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-fg);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}.breadcrumbs a:hover{color:var(--_breadcrumbs-fg-hover);text-decoration:underline;text-underline-offset:2px}.breadcrumbs a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.breadcrumbs.is-static a,.breadcrumbs.is-static .current{cursor:default}.breadcrumbs .sep{color:var(--_breadcrumbs-separator-fg);display:inline-flex;align-items:center}.breadcrumbs .current{color:var(--_breadcrumbs-current-fg);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"] }] });
|
|
1822
1823
|
}
|
|
1823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1824
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
1824
1825
|
type: Component,
|
|
1825
|
-
args: [{ selector: 'ds-breadcrumbs', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\" [class.is-static]=\"!effectiveClickable()\">\
|
|
1826
|
+
args: [{ selector: 'ds-breadcrumbs', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\" [class.is-static]=\"!effectiveClickable()\">\n @for (item of resolvedItems(); track $index; let last = $last) {\n @if (item.href && !last && effectiveClickable()) {\n <a [href]=\"item.href\" (click)=\"onNav($event, item)\">\n @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\n @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\n </a>\n } @else {\n <span [class.current]=\"last\" [attr.aria-current]=\"last ? 'page' : null\">\n @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\n @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\n </span>\n }\n @if (!last) { <span class=\"sep\" aria-hidden=\"true\"><ds-icon [name]=\"effectiveSeparator()\" [size]=\"12\" /></span> }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;min-width:0;max-width:100%}.breadcrumbs{--_breadcrumbs-fg: var(--ds-breadcrumbs-fg, var(--text-tertiary));--_breadcrumbs-fg-hover: var(--ds-breadcrumbs-fg-hover, var(--primary));--_breadcrumbs-separator-fg: var(--ds-breadcrumbs-separator-fg, var(--icon-muted));--_breadcrumbs-current-fg: var(--ds-breadcrumbs-current-fg, var(--text-primary));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-fg);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-fg);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}.breadcrumbs a:hover{color:var(--_breadcrumbs-fg-hover);text-decoration:underline;text-underline-offset:2px}.breadcrumbs a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.breadcrumbs.is-static a,.breadcrumbs.is-static .current{cursor:default}.breadcrumbs .sep{color:var(--_breadcrumbs-separator-fg);display:inline-flex;align-items:center}.breadcrumbs .current{color:var(--_breadcrumbs-current-fg);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"] }]
|
|
1826
1827
|
}], 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"] }] } });
|
|
1827
1828
|
|
|
1828
1829
|
class SidenavComponent {
|
|
1829
1830
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
1830
1831
|
brand = input('', ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
|
|
1831
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1832
|
+
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\">{{ brand().charAt(0) }}</span>\n <span class=\"brand-name\">{{ brand() }}</span>\n </div>\n}\n<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-bg: var(--ds-sidenav-bg, 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: var(--ds-sidenav-mark-bg, var(--primary));--_sidenav-mark-fg: var(--ds-sidenav-mark-fg, var(--primary-on));display:flex;flex-direction:column;gap:var(--space-1);width:var(--_sidenav-width);background:var(--_sidenav-bg);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:var(--_sidenav-mark-bg);display:grid;place-items:center;color:var(--_sidenav-mark-fg);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"] });
|
|
1833
1834
|
}
|
|
1834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1835
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
1835
1836
|
type: Component,
|
|
1836
1837
|
args: [{ selector: 'ds-sidenav', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
1837
1838
|
'[class.sidenav]': 'true',
|
|
@@ -1855,10 +1856,10 @@ class SidenavGroupComponent {
|
|
|
1855
1856
|
return;
|
|
1856
1857
|
this.expanded.update((v) => !v);
|
|
1857
1858
|
}
|
|
1858
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1859
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1859
|
+
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 (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded()\"\n >\n @if (icon()) {\n <ds-icon class=\"group-icon\" [name]=\"icon()!\" [size]=\"18\"></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\"><ng-content select=\"[ds-group-icon]\"></ng-content></span>\n }\n @if (label()) {\n <span class=\"group-title\">{{ label() }}</span>\n }\n <ds-icon\n class=\"group-caret\"\n [class.open]=\"expanded()\"\n name=\"chevronDown\"\n [size]=\"14\"\n ></ds-icon>\n </button>\n} @else if (label()) {\n <span class=\"group-label\">{{ label() }}</span>\n}\n<div class=\"group-body\" [class.hidden]=\"expandable() && !expanded()\">\n <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-group-open-bg: var(--ds-sidenav-group-open-bg, 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));display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--_sidenav-group-radius);transition:background var(--duration-fast) var(--ease-standard)}:host(:has(.group-header[aria-expanded=true])){background:var(--_sidenav-group-open-bg)}.group-label{--_sidenav-group-fg: var(--ds-sidenav-group-fg, var(--text-tertiary));display:block;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);color:var(--_sidenav-group-fg);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(--focus-ring)}.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)}.group-body.hidden{display: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"] }] });
|
|
1860
1861
|
}
|
|
1861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavGroupComponent, decorators: [{
|
|
1862
1863
|
type: Component,
|
|
1863
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 (click)=\"toggle()\"\n [attr.aria-expanded]=\"expanded()\"\n >\n @if (icon()) {\n <ds-icon class=\"group-icon\" [name]=\"icon()!\" [size]=\"18\"></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\"><ng-content select=\"[ds-group-icon]\"></ng-content></span>\n }\n @if (label()) {\n <span class=\"group-title\">{{ label() }}</span>\n }\n <ds-icon\n class=\"group-caret\"\n [class.open]=\"expanded()\"\n name=\"chevronDown\"\n [size]=\"14\"\n ></ds-icon>\n </button>\n} @else if (label()) {\n <span class=\"group-label\">{{ label() }}</span>\n}\n<div class=\"group-body\" [class.hidden]=\"expandable() && !expanded()\">\n <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-group-open-bg: var(--ds-sidenav-group-open-bg, 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));display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--_sidenav-group-radius);transition:background var(--duration-fast) var(--ease-standard)}:host(:has(.group-header[aria-expanded=true])){background:var(--_sidenav-group-open-bg)}.group-label{--_sidenav-group-fg: var(--ds-sidenav-group-fg, var(--text-tertiary));display:block;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);color:var(--_sidenav-group-fg);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(--focus-ring)}.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)}.group-body.hidden{display:none}:host-context(.sidenav.collapsed) .group-label,:host-context(.sidenav.collapsed) .group-title,:host-context(.sidenav.collapsed) .group-caret{display:none}\n"] }]
|
|
1864
1865
|
}], 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"] }] } });
|
|
@@ -1885,19 +1886,19 @@ class SidenavItemComponent {
|
|
|
1885
1886
|
parts.push('disabled');
|
|
1886
1887
|
return parts.join(' ');
|
|
1887
1888
|
}, ...(ngDevMode ? [{ debugName: "linkClasses" }] : /* istanbul ignore next */ []));
|
|
1888
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1889
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1889
|
+
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 routerLinkActive=\"active\"\n #rla=\"routerLinkActive\"\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 class=\"icon\" [name]=\"icon()!\" [size]=\"20\"></ds-icon>\n } @else {\n <span class=\"icon\"><ng-content select=\"[icon]\"></ng-content></span>\n }\n @if (label()) {\n <span class=\"item-label\">{{ label() }}</span>\n }\n <span class=\"trailing\"><ng-content select=\"[trailing]\"></ng-content></span>\n @if (badge() !== null) {\n <span class=\"count\">{{ badge() }}</span>\n }\n @if (hasAlert()) {\n <span class=\"alert\"></span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-item-fg: var(--ds-sidenav-item-fg, var(--text-secondary));--_sidenav-item-fg-hover: var(--ds-sidenav-item-fg-hover, var(--text-primary));--_sidenav-item-bg-hover: var(--ds-sidenav-item-bg-hover, var(--surface-secondary));--_sidenav-item-bg-active: var(--ds-sidenav-item-bg-active, var(--primary));--_sidenav-item-fg-active: var(--ds-sidenav-item-fg-active, var(--text-on-primary));--_sidenav-item-bg-active-hover: var(--ds-sidenav-item-bg-active-hover, color-mix(in srgb, var(--_sidenav-item-bg-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));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-fg);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:var(--_sidenav-item-bg-hover);color:var(--_sidenav-item-fg-hover)}.item:focus-visible{outline:none;box-shadow:var(--focus-ring)}.item.active{background:var(--_sidenav-item-bg-active);color:var(--_sidenav-item-fg-active);box-shadow:inset 3px 0 0 var(--_sidenav-item-rail)}.item.active:hover{background:var(--_sidenav-item-bg-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"] }] });
|
|
1890
1891
|
}
|
|
1891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidenavItemComponent, decorators: [{
|
|
1892
1893
|
type: Component,
|
|
1893
|
-
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\
|
|
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 routerLinkActive=\"active\"\n #rla=\"routerLinkActive\"\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 class=\"icon\" [name]=\"icon()!\" [size]=\"20\"></ds-icon>\n } @else {\n <span class=\"icon\"><ng-content select=\"[icon]\"></ng-content></span>\n }\n @if (label()) {\n <span class=\"item-label\">{{ label() }}</span>\n }\n <span class=\"trailing\"><ng-content select=\"[trailing]\"></ng-content></span>\n @if (badge() !== null) {\n <span class=\"count\">{{ badge() }}</span>\n }\n @if (hasAlert()) {\n <span class=\"alert\"></span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-item-fg: var(--ds-sidenav-item-fg, var(--text-secondary));--_sidenav-item-fg-hover: var(--ds-sidenav-item-fg-hover, var(--text-primary));--_sidenav-item-bg-hover: var(--ds-sidenav-item-bg-hover, var(--surface-secondary));--_sidenav-item-bg-active: var(--ds-sidenav-item-bg-active, var(--primary));--_sidenav-item-fg-active: var(--ds-sidenav-item-fg-active, var(--text-on-primary));--_sidenav-item-bg-active-hover: var(--ds-sidenav-item-bg-active-hover, color-mix(in srgb, var(--_sidenav-item-bg-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));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-fg);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:var(--_sidenav-item-bg-hover);color:var(--_sidenav-item-fg-hover)}.item:focus-visible{outline:none;box-shadow:var(--focus-ring)}.item.active{background:var(--_sidenav-item-bg-active);color:var(--_sidenav-item-fg-active);box-shadow:inset 3px 0 0 var(--_sidenav-item-rail)}.item.active:hover{background:var(--_sidenav-item-bg-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"] }]
|
|
1894
1895
|
}], 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 }] }] } });
|
|
1895
1896
|
|
|
1896
1897
|
class TopBarComponent {
|
|
1897
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
1898
|
+
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\"><ng-content select=\"[title]\"></ng-content></div>\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n <div class=\"spacer\"><ng-content select=\"[search]\"></ng-content></div>\n <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}.topbar{--_topbar-height: var(--ds-topbar-height, var(--topbar-h));--_topbar-bg: var(--ds-topbar-bg, var(--surface-default));--_topbar-border: var(--ds-topbar-border, var(--border-divider));--_topbar-title-fg: var(--ds-topbar-title-fg, var(--text-primary));display:flex;align-items:center;gap:var(--space-4);height:var(--_topbar-height);padding:0 var(--space-6);background:var(--_topbar-bg);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-fg)}.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"] });
|
|
1899
1900
|
}
|
|
1900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TopBarComponent, decorators: [{
|
|
1901
1902
|
type: Component,
|
|
1902
1903
|
args: [{ selector: 'ds-topbar', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header class=\"topbar\">\n <div class=\"title\"><ng-content select=\"[title]\"></ng-content></div>\n <ng-content select=\"[breadcrumbs]\"></ng-content>\n <div class=\"spacer\"><ng-content select=\"[search]\"></ng-content></div>\n <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}.topbar{--_topbar-height: var(--ds-topbar-height, var(--topbar-h));--_topbar-bg: var(--ds-topbar-bg, var(--surface-default));--_topbar-border: var(--ds-topbar-border, var(--border-divider));--_topbar-title-fg: var(--ds-topbar-title-fg, var(--text-primary));display:flex;align-items:center;gap:var(--space-4);height:var(--_topbar-height);padding:0 var(--space-6);background:var(--_topbar-bg);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-fg)}.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"] }]
|
|
1903
1904
|
}] });
|
|
@@ -1919,10 +1920,10 @@ class PageHeaderComponent {
|
|
|
1919
1920
|
parts.push('with-meta-divider');
|
|
1920
1921
|
return parts.join(' ');
|
|
1921
1922
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1922
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1923
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1923
|
+
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()) { <div class=\"eyebrow\">{{ eyebrow() }}</div> }\n <div class=\"title-line\">\n <h1 class=\"title\">{{ title() }}</h1>\n <ng-content select=\"[title-badge]\"></ng-content>\n </div>\n @if (subtitle()) { <p class=\"subtitle\">{{ subtitle() }}</p> }\n <div class=\"meta\"><ng-content select=\"[meta]\"></ng-content></div>\n </div>\n <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n </div>\n <ng-content select=\"[tabs]\"></ng-content>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.eyebrow-secondary){--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--secondary-strong))}.page-header{--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--text-tertiary));--_pagehdr-title-fg: var(--ds-pagehdr-title-fg, var(--text-primary));--_pagehdr-subtitle-fg: var(--ds-pagehdr-subtitle-fg, var(--text-secondary));--_pagehdr-meta-fg: var(--ds-pagehdr-meta-fg, var(--text-secondary));--_pagehdr-meta-icon-fg: var(--ds-pagehdr-meta-icon-fg, 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: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-fg)}.page-header .title{font:var(--font-weight-extrabold) var(--_pagehdr-title-fs)/var(--line-height-tight) var(--font-display);color:var(--_pagehdr-title-fg);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-fg);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-fg)}.page-header .meta-item .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--_pagehdr-meta-icon-fg)}.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(max-width:720px){.page-header .actions{width:100%}}\n"] });
|
|
1924
1925
|
}
|
|
1925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
1926
1927
|
type: Component,
|
|
1927
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()) { <div class=\"eyebrow\">{{ eyebrow() }}</div> }\n <div class=\"title-line\">\n <h1 class=\"title\">{{ title() }}</h1>\n <ng-content select=\"[title-badge]\"></ng-content>\n </div>\n @if (subtitle()) { <p class=\"subtitle\">{{ subtitle() }}</p> }\n <div class=\"meta\"><ng-content select=\"[meta]\"></ng-content></div>\n </div>\n <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n </div>\n <ng-content select=\"[tabs]\"></ng-content>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.eyebrow-secondary){--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--secondary-strong))}.page-header{--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--text-tertiary));--_pagehdr-title-fg: var(--ds-pagehdr-title-fg, var(--text-primary));--_pagehdr-subtitle-fg: var(--ds-pagehdr-subtitle-fg, var(--text-secondary));--_pagehdr-meta-fg: var(--ds-pagehdr-meta-fg, var(--text-secondary));--_pagehdr-meta-icon-fg: var(--ds-pagehdr-meta-icon-fg, 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: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-fg)}.page-header .title{font:var(--font-weight-extrabold) var(--_pagehdr-title-fs)/var(--line-height-tight) var(--font-display);color:var(--_pagehdr-title-fg);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-fg);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-fg)}.page-header .meta-item .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--_pagehdr-meta-icon-fg)}.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(max-width:720px){.page-header .actions{width:100%}}\n"] }]
|
|
1928
1929
|
}], 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 }] }] } });
|
|
@@ -1944,12 +1945,12 @@ class ModalCardComponent {
|
|
|
1944
1945
|
onClose() {
|
|
1945
1946
|
this.closed.emit();
|
|
1946
1947
|
}
|
|
1947
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1948
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1948
|
+
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 [class]=\"classes()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"titleId\"\n>\n <div class=\"header\">\n <h2 class=\"title\" [id]=\"titleId\">{{ title() }}</h2>\n @if (showClose()) {\n <button class=\"close\" type=\"button\" aria-label=\"Close dialog\" (click)=\"onClose()\">\n <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n </button>\n }\n </div>\n <div class=\"body\">\n <ng-content select=\"[body]\"></ng-content>\n <div class=\"impact\"><ng-content select=\"[impact]\"></ng-content></div>\n </div>\n <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, 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-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);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-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-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-fg-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"] }] });
|
|
1949
1950
|
}
|
|
1950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ModalCardComponent, decorators: [{
|
|
1951
1952
|
type: Component,
|
|
1952
|
-
args: [{ selector: 'ds-modal-card', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\
|
|
1953
|
+
args: [{ selector: 'ds-modal-card', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\n [class]=\"classes()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"titleId\"\n>\n <div class=\"header\">\n <h2 class=\"title\" [id]=\"titleId\">{{ title() }}</h2>\n @if (showClose()) {\n <button class=\"close\" type=\"button\" aria-label=\"Close dialog\" (click)=\"onClose()\">\n <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n </button>\n }\n </div>\n <div class=\"body\">\n <ng-content select=\"[body]\"></ng-content>\n <div class=\"impact\"><ng-content select=\"[impact]\"></ng-content></div>\n </div>\n <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, 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-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);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-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-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-fg-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"] }]
|
|
1953
1954
|
}], 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"] }] } });
|
|
1954
1955
|
|
|
1955
1956
|
class ModalComponent {
|
|
@@ -1982,12 +1983,12 @@ class ModalComponent {
|
|
|
1982
1983
|
if (event.target === event.currentTarget)
|
|
1983
1984
|
this.onClose();
|
|
1984
1985
|
}
|
|
1985
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1986
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1986
|
+
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><ng-content select=\"[body]\"></ng-content></ng-container>\n <ng-container impact><ng-content select=\"[impact]\"></ng-content></ng-container>\n <ng-container actions><ng-content select=\"[actions]\"></ng-content></ng-container>\n </ds-modal-card>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, 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-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);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-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-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-fg-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"] }] });
|
|
1987
1988
|
}
|
|
1988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1989
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1989
1990
|
type: Component,
|
|
1990
|
-
args: [{ selector: 'ds-modal', standalone: true, imports: [ModalCardComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (open() || preview.staticPreview()) {\
|
|
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><ng-content select=\"[body]\"></ng-content></ng-container>\n <ng-container impact><ng-content select=\"[impact]\"></ng-content></ng-container>\n <ng-container actions><ng-content select=\"[actions]\"></ng-content></ng-container>\n </ds-modal-card>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, 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-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);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-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-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-fg-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"] }]
|
|
1991
1992
|
}], 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"] }] } });
|
|
1992
1993
|
|
|
1993
1994
|
class BannerComponent {
|
|
@@ -2031,12 +2032,12 @@ class BannerComponent {
|
|
|
2031
2032
|
onDismiss() {
|
|
2032
2033
|
this.dismissed.emit();
|
|
2033
2034
|
}
|
|
2034
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2035
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2035
|
+
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 class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"20\"></ds-icon>\n <div class=\"body\">\n @if (title()) { <div class=\"title\">{{ title() }}</div> }\n <ng-content></ng-content>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n @if (dismissible()) {\n <button class=\"close\" type=\"button\" (click)=\"onDismiss()\">\n <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg: var(--ds-banner-bg, var(--info-subtitle));--_banner-fg: var(--ds-banner-fg, 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-fg: var(--ds-banner-title-fg, var(--text-primary));--_banner-close-fg: var(--ds-banner-close-fg, var(--icon-default));--_banner-close-fg-hover: var(--ds-banner-close-fg-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:var(--_banner-bg);color:var(--_banner-fg)}: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: var(--ds-banner-bg, var(--success-subtitle));--_banner-fg: var(--ds-banner-fg, var(--success-text))}.banner.warning{--_banner-bar: var(--ds-banner-bar, var(--warning));--_banner-bg: var(--ds-banner-bg, var(--warning-subtitle));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.severe{--_banner-bar: var(--ds-banner-bar, var(--warning-hover));--_banner-bg: var(--ds-banner-bg, var(--warning-muted));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.error{--_banner-bar: var(--ds-banner-bar, var(--error));--_banner-bg: var(--ds-banner-bg, var(--error-subtitle));--_banner-fg: var(--ds-banner-fg, var(--error-text))}.banner.neutral{--_banner-bar: var(--ds-banner-bar, var(--border-strong));--_banner-bg: var(--ds-banner-bg, var(--surface-secondary));--_banner-fg: var(--ds-banner-fg, 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-fg);margin:0 0 var(--space-1)}.banner .close{background:none;border:0;cursor:pointer;color:var(--_banner-close-fg)}.banner .close:hover{color:var(--_banner-close-fg-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"] }] });
|
|
2036
2037
|
}
|
|
2037
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BannerComponent, decorators: [{
|
|
2038
2039
|
type: Component,
|
|
2039
|
-
args: [{ selector: 'ds-banner', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"classes()\">\n <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"20\"></ds-icon>\n <div class=\"body\">\n @if (title()) { <div class=\"title\">{{ title() }}</div> }\n <ng-content></ng-content>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n @if (dismissible()) {\n <button class=\"close\" type=\"button\" (click)=\"onDismiss()\">\n <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg: var(--ds-banner-bg, var(--info-
|
|
2040
|
+
args: [{ selector: 'ds-banner', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"classes()\">\n <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"20\"></ds-icon>\n <div class=\"body\">\n @if (title()) { <div class=\"title\">{{ title() }}</div> }\n <ng-content></ng-content>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n @if (dismissible()) {\n <button class=\"close\" type=\"button\" (click)=\"onDismiss()\">\n <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg: var(--ds-banner-bg, var(--info-subtitle));--_banner-fg: var(--ds-banner-fg, 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-fg: var(--ds-banner-title-fg, var(--text-primary));--_banner-close-fg: var(--ds-banner-close-fg, var(--icon-default));--_banner-close-fg-hover: var(--ds-banner-close-fg-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:var(--_banner-bg);color:var(--_banner-fg)}: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: var(--ds-banner-bg, var(--success-subtitle));--_banner-fg: var(--ds-banner-fg, var(--success-text))}.banner.warning{--_banner-bar: var(--ds-banner-bar, var(--warning));--_banner-bg: var(--ds-banner-bg, var(--warning-subtitle));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.severe{--_banner-bar: var(--ds-banner-bar, var(--warning-hover));--_banner-bg: var(--ds-banner-bg, var(--warning-muted));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.error{--_banner-bar: var(--ds-banner-bar, var(--error));--_banner-bg: var(--ds-banner-bg, var(--error-subtitle));--_banner-fg: var(--ds-banner-fg, var(--error-text))}.banner.neutral{--_banner-bar: var(--ds-banner-bar, var(--border-strong));--_banner-bg: var(--ds-banner-bg, var(--surface-secondary));--_banner-fg: var(--ds-banner-fg, 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-fg);margin:0 0 var(--space-1)}.banner .close{background:none;border:0;cursor:pointer;color:var(--_banner-close-fg)}.banner .close:hover{color:var(--_banner-close-fg-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"] }]
|
|
2040
2041
|
}], 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: [{
|
|
2041
2042
|
type: HostBinding,
|
|
2042
2043
|
args: ['class.no-rail']
|
|
@@ -2113,12 +2114,12 @@ class DropzoneComponent {
|
|
|
2113
2114
|
return 'error';
|
|
2114
2115
|
return 'file';
|
|
2115
2116
|
}
|
|
2116
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2117
|
+
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 name=\"upload\" [size]=\"24\"></ds-icon>\n <div class=\"title\">Drop files here</div>\n <div class=\"hint\">or click to browse</div>\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 class=\"icon\" [name]=\"fileIcon(file.state)\" [size]=\"20\"></ds-icon>\n <div class=\"main\">\n <div class=\"name\">{{ file.name }}</div>\n <div class=\"meta\">{{ formatSize(file.size) }} \u00B7 {{ file.state }}</div>\n @if (file.state === 'uploading') {\n <div class=\"progress\"><div class=\"progress-fill\" [style.width.%]=\"file.progress\"></div></div>\n }\n </div>\n <button class=\"remove\" type=\"button\" [attr.aria-label]=\"'Remove ' + file.name\" (click)=\"onRemove(file); $event.preventDefault(); $event.stopPropagation()\">\n <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\n </button>\n </div>\n }\n </div>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0}.dz-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dropzone:focus-within{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px}.dropzone{flex:1;--_dropzone-bg: var(--ds-dropzone-bg, var(--surface-default));--_dropzone-bg-hover: var(--ds-dropzone-bg-hover, var(--primary-subtitle));--_dropzone-bg-active: var(--ds-dropzone-bg-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-fg: var(--ds-dropzone-fg, var(--text-secondary));--_dropzone-fg-active: var(--ds-dropzone-fg-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;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:var(--_dropzone-bg);cursor:pointer;min-height:160px}.dropzone:hover{border-color:var(--_dropzone-border-hover);background:var(--_dropzone-bg-hover)}.dropzone.active{border-color:var(--_dropzone-border-active);background:var(--_dropzone-bg-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-fg)}.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"] }] });
|
|
2118
2119
|
}
|
|
2119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropzoneComponent, decorators: [{
|
|
2120
2121
|
type: Component,
|
|
2121
|
-
args: [{ selector: 'ds-dropzone', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<label\
|
|
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 name=\"upload\" [size]=\"24\"></ds-icon>\n <div class=\"title\">Drop files here</div>\n <div class=\"hint\">or click to browse</div>\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 class=\"icon\" [name]=\"fileIcon(file.state)\" [size]=\"20\"></ds-icon>\n <div class=\"main\">\n <div class=\"name\">{{ file.name }}</div>\n <div class=\"meta\">{{ formatSize(file.size) }} \u00B7 {{ file.state }}</div>\n @if (file.state === 'uploading') {\n <div class=\"progress\"><div class=\"progress-fill\" [style.width.%]=\"file.progress\"></div></div>\n }\n </div>\n <button class=\"remove\" type=\"button\" [attr.aria-label]=\"'Remove ' + file.name\" (click)=\"onRemove(file); $event.preventDefault(); $event.stopPropagation()\">\n <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\n </button>\n </div>\n }\n </div>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0}.dz-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dropzone:focus-within{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px}.dropzone{flex:1;--_dropzone-bg: var(--ds-dropzone-bg, var(--surface-default));--_dropzone-bg-hover: var(--ds-dropzone-bg-hover, var(--primary-subtitle));--_dropzone-bg-active: var(--ds-dropzone-bg-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-fg: var(--ds-dropzone-fg, var(--text-secondary));--_dropzone-fg-active: var(--ds-dropzone-fg-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;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:var(--_dropzone-bg);cursor:pointer;min-height:160px}.dropzone:hover{border-color:var(--_dropzone-border-hover);background:var(--_dropzone-bg-hover)}.dropzone.active{border-color:var(--_dropzone-border-active);background:var(--_dropzone-bg-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-fg)}.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"] }]
|
|
2122
2123
|
}], 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"] }] } });
|
|
2123
2124
|
|
|
2124
2125
|
class MenuItemComponent {
|
|
@@ -2153,12 +2154,12 @@ class MenuItemComponent {
|
|
|
2153
2154
|
this.pressed.emit(event);
|
|
2154
2155
|
this.closeRef?.close();
|
|
2155
2156
|
}
|
|
2156
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2157
|
+
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 [name]=\"icon()!\" [size]=\"16\"></ds-icon>\n } @else {\n <span class=\"menu-item-icon\"><ng-content select=\"[icon]\"></ng-content></span>\n }\n <span><ng-content></ng-content></span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.menu-item{--_menu-item-fg: var(--ds-menu-item-fg, var(--text-primary));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-fg);cursor:pointer;text-align:left;transition:background var(--duration-fast) var(--ease-standard)}.menu-item:hover{background:var(--surface-secondary)}.menu-item:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}.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"] }] });
|
|
2158
2159
|
}
|
|
2159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
2160
2161
|
type: Component,
|
|
2161
|
-
args: [{ selector: 'ds-menu-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'none' }, template: "<button\
|
|
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 [name]=\"icon()!\" [size]=\"16\"></ds-icon>\n } @else {\n <span class=\"menu-item-icon\"><ng-content select=\"[icon]\"></ng-content></span>\n }\n <span><ng-content></ng-content></span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.menu-item{--_menu-item-fg: var(--ds-menu-item-fg, var(--text-primary));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-fg);cursor:pointer;text-align:left;transition:background var(--duration-fast) var(--ease-standard)}.menu-item:hover{background:var(--surface-secondary)}.menu-item:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}.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"] }]
|
|
2162
2163
|
}], 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"] }] } });
|
|
2163
2164
|
|
|
2164
2165
|
class MenuComponent {
|
|
@@ -2240,20 +2241,20 @@ class MenuComponent {
|
|
|
2240
2241
|
this.activeIndex.set(index);
|
|
2241
2242
|
this.items()[index].focus();
|
|
2242
2243
|
}
|
|
2243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
2244
|
+
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 class=\"menu\" role=\"menu\">\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"] });
|
|
2245
2246
|
}
|
|
2246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2247
2248
|
type: Component,
|
|
2248
|
-
args: [{ selector: 'ds-menu', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: { '(keydown)': 'onKeydown($event)' }, template: "<ul class=\"menu\" role=\"menu\">\
|
|
2249
|
+
args: [{ selector: 'ds-menu', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: { '(keydown)': 'onKeydown($event)' }, template: "<ul class=\"menu\" role=\"menu\">\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"] }]
|
|
2249
2250
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuItemComponent), { isSignal: true }] }] } });
|
|
2250
2251
|
|
|
2251
2252
|
class SpinnerComponent {
|
|
2252
2253
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2253
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
2254
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "ds-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Loading" }, properties: { "class.sm": "size() === 'sm'", "class.lg": "size() === 'lg'" } }, ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-block;width:var(--spinner-md);height:var(--spinner-md);border:var(--spinner-bw) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:spinner-rotate var(--duration-loop-fast) linear infinite}:host(.sm){width:var(--spinner-sm);height:var(--spinner-sm);border-width:var(--border-width-default)}:host(.lg){width:var(--spinner-lg);height:var(--spinner-lg);border-width:var(--border-width-strong)}@keyframes spinner-rotate{to{transform:rotate(360deg)}}\n"] });
|
|
2255
2256
|
}
|
|
2256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
2257
2258
|
type: Component,
|
|
2258
2259
|
args: [{ selector: 'ds-spinner', standalone: true, template: '', host: {
|
|
2259
2260
|
'role': 'status',
|
|
@@ -2287,12 +2288,12 @@ class EmptyStateComponent {
|
|
|
2287
2288
|
return 'package';
|
|
2288
2289
|
return 'package';
|
|
2289
2290
|
}, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
2290
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2291
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2291
|
+
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 [name]=\"resolvedIcon()\" [size]=\"28\"></ds-icon>\n </span>\n @if (title()) { <span class=\"title\">{{ title() }}</span> }\n @if (body()) { <span class=\"body\">{{ body() }}</span> }\n <span class=\"cta\"><ng-content select=\"[actions]\"></ng-content></span>\n @if (variant() === 'loading') {\n <span class=\"overlay-spin\"><ds-spinner size=\"lg\" /></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:block}.empty-state{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-tint));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-secondary));--_es-title-fg: var(--ds-empty-state-title-fg, var(--text-primary));--_es-body-fg: var(--ds-empty-state-body-fg, 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: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:var(--_es-tile-bg);color:var(--_es-tile-fg);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-fg);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-fg);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: var(--ds-empty-state-tile-bg, var(--error-subtitle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--error-text))}.empty-state.locked{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-muted));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-tertiary))}.empty-state.success{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--success-subtitle));--_es-tile-fg: var(--ds-empty-state-tile-fg, 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"] }] });
|
|
2292
2293
|
}
|
|
2293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
2294
2295
|
type: Component,
|
|
2295
|
-
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 [name]=\"resolvedIcon()\" [size]=\"28\"></ds-icon>\n </span>\n @if (title()) { <span class=\"title\">{{ title() }}</span> }\n @if (body()) { <span class=\"body\">{{ body() }}</span> }\n <span class=\"cta\"><ng-content select=\"[actions]\"></ng-content></span>\n @if (variant() === 'loading') {\n <span class=\"overlay-spin\"><ds-spinner size=\"lg\" /></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:block}.empty-state{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-tint));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-secondary));--_es-title-fg: var(--ds-empty-state-title-fg, var(--text-primary));--_es-body-fg: var(--ds-empty-state-body-fg, 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: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:var(--_es-tile-bg);color:var(--_es-tile-fg);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-fg);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-fg);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: var(--ds-empty-state-tile-bg, var(--error-
|
|
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 [name]=\"resolvedIcon()\" [size]=\"28\"></ds-icon>\n </span>\n @if (title()) { <span class=\"title\">{{ title() }}</span> }\n @if (body()) { <span class=\"body\">{{ body() }}</span> }\n <span class=\"cta\"><ng-content select=\"[actions]\"></ng-content></span>\n @if (variant() === 'loading') {\n <span class=\"overlay-spin\"><ds-spinner size=\"lg\" /></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:block}.empty-state{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-tint));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-secondary));--_es-title-fg: var(--ds-empty-state-title-fg, var(--text-primary));--_es-body-fg: var(--ds-empty-state-body-fg, 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: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:var(--_es-tile-bg);color:var(--_es-tile-fg);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-fg);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-fg);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: var(--ds-empty-state-tile-bg, var(--error-subtitle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--error-text))}.empty-state.locked{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-muted));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-tertiary))}.empty-state.success{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--success-subtitle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--success-text))}\n"] }]
|
|
2296
2297
|
}], 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 }] }] } });
|
|
2297
2298
|
|
|
2298
2299
|
class ProgressComponent {
|
|
@@ -2305,10 +2306,10 @@ class ProgressComponent {
|
|
|
2305
2306
|
return Math.max(0, Math.min(100, v));
|
|
2306
2307
|
}, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
|
|
2307
2308
|
isIndet = computed(() => this.variant() === 'indeterminate', ...(ngDevMode ? [{ debugName: "isIndet" }] : /* istanbul ignore next */ []));
|
|
2308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ProgressComponent, isStandalone: true, selector: "ds-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-valuenow": "isIndet() ? null : clampedValue()", "attr.aria-label": "ariaLabel()", "class.success": "variant() === 'success'", "class.warn": "variant() === 'warn'", "class.error": "variant() === 'error'", "class.indeterminate": "isIndet()" } }, ngImport: i0, template: "@if (isIndet()) {\n <span></span>\n} @else {\n <span [style.width.%]=\"clampedValue()\"></span>\n}\n", styles: [":host{display:block;width:100%;height:var(--progress-h);background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden}:host>span{display:block;height:100%;background:var(--primary);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}:host(.success)>span{background:var(--success)}:host(.warn)>span{background:var(--warning-hover)}:host(.error)>span{background:var(--error)}:host(.indeterminate)>span{width:30%;animation:progress-indet var(--duration-loop-slow) var(--ease-standard) infinite}@keyframes progress-indet{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"] });
|
|
2310
2311
|
}
|
|
2311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProgressComponent, decorators: [{
|
|
2312
2313
|
type: Component,
|
|
2313
2314
|
args: [{ selector: 'ds-progress', standalone: true, imports: [], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2314
2315
|
role: 'progressbar',
|
|
@@ -2324,10 +2325,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
2324
2325
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
2325
2326
|
|
|
2326
2327
|
class AccordionComponent {
|
|
2327
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
2328
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "ds-accordion", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-lg);overflow:hidden}\n"] });
|
|
2329
2330
|
}
|
|
2330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2331
2332
|
type: Component,
|
|
2332
2333
|
args: [{ selector: 'ds-accordion', standalone: true, imports: [], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:block;border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-lg);overflow:hidden}\n"] }]
|
|
2333
2334
|
}] });
|
|
@@ -2342,12 +2343,12 @@ class AccordionItemComponent {
|
|
|
2342
2343
|
toggle() {
|
|
2343
2344
|
this.expanded.set(!this.expanded());
|
|
2344
2345
|
}
|
|
2345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2346
|
+
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.0.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>{{ title() }}</span>\n <ng-content select=\"[badge]\"></ng-content>\n <ds-icon name=\"chevronRight\" class=\"chev\" [size]=\"16\" />\n</button>\n@if (expanded()) {\n <div class=\"body\" role=\"region\" [id]=\"bodyId\" [attr.aria-labelledby]=\"headId\">\n <ng-content></ng-content>\n </div>\n}\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{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"] }] });
|
|
2347
2348
|
}
|
|
2348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
2349
2350
|
type: Component,
|
|
2350
|
-
args: [{ selector: 'ds-accordion-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\
|
|
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>{{ title() }}</span>\n <ng-content select=\"[badge]\"></ng-content>\n <ds-icon name=\"chevronRight\" class=\"chev\" [size]=\"16\" />\n</button>\n@if (expanded()) {\n <div class=\"body\" role=\"region\" [id]=\"bodyId\" [attr.aria-labelledby]=\"headId\">\n <ng-content></ng-content>\n </div>\n}\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{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"] }]
|
|
2351
2352
|
}], 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"] }] } });
|
|
2352
2353
|
|
|
2353
2354
|
class StepperComponent {
|
|
@@ -2372,22 +2373,22 @@ class StepperComponent {
|
|
|
2372
2373
|
barClass(i) {
|
|
2373
2374
|
return i < this.current() ? 'bar done' : 'bar';
|
|
2374
2375
|
}
|
|
2375
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2376
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2376
|
+
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 [class]=\"nodeClass(i)\"\n role=\"listitem\"\n [attr.aria-current]=\"i === current() ? 'step' : null\"\n >\n <span aria-hidden=\"true\">\n @if (i < current()) {\n <ds-icon name=\"check\" [size]=\"14\" />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"visually-hidden\">Step {{ i + 1 }}: {{ label }} ({{ stepState(i) }})</span>\n </span>\n @if (!last) {\n <span [class]=\"barClass(i)\" aria-hidden=\"true\"></span>\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host .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 .node{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 .bar{height:var(--stepper-bar-h);width:var(--stepper-bar-w);background:var(--border-divider)}:host .bar.done{background:var(--primary)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
|
|
2377
2378
|
}
|
|
2378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2379
2380
|
type: Component,
|
|
2380
|
-
args: [{ selector: 'ds-stepper', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'list', 'aria-label': 'Progress' }, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\
|
|
2381
|
+
args: [{ selector: 'ds-stepper', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'list', 'aria-label': 'Progress' }, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\n <span\n [class]=\"nodeClass(i)\"\n role=\"listitem\"\n [attr.aria-current]=\"i === current() ? 'step' : null\"\n >\n <span aria-hidden=\"true\">\n @if (i < current()) {\n <ds-icon name=\"check\" [size]=\"14\" />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"visually-hidden\">Step {{ i + 1 }}: {{ label }} ({{ stepState(i) }})</span>\n </span>\n @if (!last) {\n <span [class]=\"barClass(i)\" aria-hidden=\"true\"></span>\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host .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 .node{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 .bar{height:var(--stepper-bar-h);width:var(--stepper-bar-w);background:var(--border-divider)}:host .bar.done{background:var(--primary)}\n"] }]
|
|
2381
2382
|
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
|
|
2382
2383
|
|
|
2383
2384
|
class TooltipPanelComponent {
|
|
2384
2385
|
text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
2385
2386
|
placement = input.required(...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
2386
2387
|
panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
|
|
2387
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
2388
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2389
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: TooltipPanelComponent, isStandalone: true, selector: "ds-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: true, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "panelId()", "class.top": "placement() === 'top'", "class.bottom": "placement() === 'bottom'", "class.left": "placement() === 'left'", "class.right": "placement() === 'right'" } }, ngImport: i0, template: `{{ text() }}`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;position:relative;background:var(--surface-inverted);color:var(--text-inverted);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-base) var(--font-sans);padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-md);max-width:var(--tooltip-maxw);z-index:var(--layer-tooltip);box-shadow:var(--shadow-2)}:host:after{content:\"\";position:absolute;width:var(--space-2);height:var(--space-2);background:var(--surface-inverted);transform:rotate(45deg)}:host(.bottom):after{top:calc(var(--tooltip-arrow) / -2);left:50%;margin-left:calc(var(--tooltip-arrow) / -2)}:host(.top):after{bottom:calc(var(--tooltip-arrow) / -2);left:50%;margin-left:calc(var(--tooltip-arrow) / -2)}:host(.left):after{right:calc(var(--tooltip-arrow) / -2);top:50%;margin-top:calc(var(--tooltip-arrow) / -2)}:host(.right):after{left:calc(var(--tooltip-arrow) / -2);top:50%;margin-top:calc(var(--tooltip-arrow) / -2)}\n"] });
|
|
2389
2390
|
}
|
|
2390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TooltipPanelComponent, decorators: [{
|
|
2391
2392
|
type: Component,
|
|
2392
2393
|
args: [{ selector: 'ds-tooltip-panel', standalone: true, template: `{{ text() }}`, host: {
|
|
2393
2394
|
role: 'tooltip',
|
|
@@ -2469,10 +2470,10 @@ class TooltipDirective {
|
|
|
2469
2470
|
ngOnDestroy() {
|
|
2470
2471
|
this.onClose();
|
|
2471
2472
|
}
|
|
2472
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2473
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
2473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2474
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: TooltipDirective, isStandalone: true, selector: "[dsTooltip]", inputs: { dsTooltip: { classPropertyName: "dsTooltip", publicName: "dsTooltip", isSignal: true, isRequired: false, transformFunction: null }, dsTooltipPlacement: { classPropertyName: "dsTooltipPlacement", publicName: "dsTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, dsTooltipDelay: { classPropertyName: "dsTooltipDelay", publicName: "dsTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onOpen()", "focus": "onOpen()", "mouseleave": "onClose()", "blur": "onClose()", "keydown.escape": "onEscape()" } }, ngImport: i0 });
|
|
2474
2475
|
}
|
|
2475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
2476
2477
|
type: Directive,
|
|
2477
2478
|
args: [{
|
|
2478
2479
|
selector: '[dsTooltip]',
|
|
@@ -2551,10 +2552,10 @@ class PopoverComponent {
|
|
|
2551
2552
|
ngOnDestroy() {
|
|
2552
2553
|
this.close();
|
|
2553
2554
|
}
|
|
2554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2555
|
+
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: [{ provide: DsOverlayCloseRef, useExisting: forwardRef(() => PopoverComponent) }], 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><ng-content /></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"] }] });
|
|
2556
2557
|
}
|
|
2557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2558
2559
|
type: Component,
|
|
2559
2560
|
args: [{ selector: 'ds-popover', standalone: true, imports: [CdkTrapFocus, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], providers: [{ provide: DsOverlayCloseRef, useExisting: forwardRef(() => PopoverComponent) }], 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><ng-content /></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"] }]
|
|
2560
2561
|
}], 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 }] }] } });
|
|
@@ -2589,12 +2590,12 @@ class ToastComponent {
|
|
|
2589
2590
|
onDismiss() {
|
|
2590
2591
|
this.dismissed.emit();
|
|
2591
2592
|
}
|
|
2592
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2593
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2593
|
+
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 aria-atomic=\"true\"\n>\n <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"16\" />\n <div class=\"body\">\n @if (title()) { <div class=\"title\">{{ title() }}</div> }\n {{ message() }}\n <ng-content></ng-content>\n </div>\n @if (action(); as act) {\n <button type=\"button\" class=\"action\" (click)=\"onAction(act)\">{{ act.label }}</button>\n }\n <span class=\"actions\"><ng-content select=\"[actions]\"></ng-content></span>\n @if (dismissible()) {\n <button type=\"button\" class=\"close\" (click)=\"onDismiss()\" aria-label=\"Dismiss\">\n <ds-icon name=\"x\" [size]=\"14\" />\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: var(--ds-toast-bg, var(--surface-overlay));--_toast-border: var(--ds-toast-border, var(--border-default));display:flex;align-items:flex-start;gap:var(--space-3);background:var(--_toast-bg);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(--focus-ring)}.toast .actions{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}.toast .actions:empty{display:none}.toast.info{--_toast-bg: var(--ds-toast-bg-info, var(--ds-toast-bg, 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: var(--ds-toast-bg-success, var(--ds-toast-bg, 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: var(--ds-toast-bg-warning, var(--ds-toast-bg, 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: var(--ds-toast-bg-error, var(--ds-toast-bg, 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"] }] });
|
|
2594
2595
|
}
|
|
2595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2596
2597
|
type: Component,
|
|
2597
|
-
args: [{ selector: 'ds-toast', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\
|
|
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 aria-atomic=\"true\"\n>\n <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"16\" />\n <div class=\"body\">\n @if (title()) { <div class=\"title\">{{ title() }}</div> }\n {{ message() }}\n <ng-content></ng-content>\n </div>\n @if (action(); as act) {\n <button type=\"button\" class=\"action\" (click)=\"onAction(act)\">{{ act.label }}</button>\n }\n <span class=\"actions\"><ng-content select=\"[actions]\"></ng-content></span>\n @if (dismissible()) {\n <button type=\"button\" class=\"close\" (click)=\"onDismiss()\" aria-label=\"Dismiss\">\n <ds-icon name=\"x\" [size]=\"14\" />\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: var(--ds-toast-bg, var(--surface-overlay));--_toast-border: var(--ds-toast-border, var(--border-default));display:flex;align-items:flex-start;gap:var(--space-3);background:var(--_toast-bg);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(--focus-ring)}.toast .actions{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}.toast .actions:empty{display:none}.toast.info{--_toast-bg: var(--ds-toast-bg-info, var(--ds-toast-bg, 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: var(--ds-toast-bg-success, var(--ds-toast-bg, 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: var(--ds-toast-bg-warning, var(--ds-toast-bg, 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: var(--ds-toast-bg-error, var(--ds-toast-bg, 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"] }]
|
|
2598
2599
|
}], 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"] }] } });
|
|
2599
2600
|
|
|
2600
2601
|
// Must match the leave transition on :host in toast.component.scss (--duration-base).
|
|
@@ -2625,15 +2626,15 @@ class ToastRegionComponent {
|
|
|
2625
2626
|
this.entries.set([]);
|
|
2626
2627
|
this.leaving.set(new Set());
|
|
2627
2628
|
}
|
|
2628
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2629
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastRegionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastRegionComponent, isStandalone: true, selector: "ds-toast-region", host: { attributes: { "role": "region", "aria-label": "Notifications" } }, ngImport: i0, template: "@for (entry of entries(); track entry.id) {\n <ds-toast\n [variant]=\"entry.variant\"\n [title]=\"entry.title ?? ''\"\n [message]=\"entry.body\"\n [dismissible]=\"entry.dismissible\"\n [action]=\"entry.action ?? null\"\n [class.leaving]=\"isLeaving(entry.id)\"\n (dismissed)=\"remove(entry.id)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--space-2)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ds-toast", inputs: ["variant", "title", "message", "dismissible", "icon", "action"], outputs: ["dismissed"] }] });
|
|
2630
2631
|
}
|
|
2631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastRegionComponent, decorators: [{
|
|
2632
2633
|
type: Component,
|
|
2633
2634
|
args: [{ selector: 'ds-toast-region', standalone: true, imports: [ToastComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2634
2635
|
role: 'region',
|
|
2635
2636
|
'aria-label': 'Notifications',
|
|
2636
|
-
}, template: "@for (entry of entries(); track entry.id) {\
|
|
2637
|
+
}, template: "@for (entry of entries(); track entry.id) {\n <ds-toast\n [variant]=\"entry.variant\"\n [title]=\"entry.title ?? ''\"\n [message]=\"entry.body\"\n [dismissible]=\"entry.dismissible\"\n [action]=\"entry.action ?? null\"\n [class.leaving]=\"isLeaving(entry.id)\"\n (dismissed)=\"remove(entry.id)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--space-2)}\n"] }]
|
|
2637
2638
|
}] });
|
|
2638
2639
|
|
|
2639
2640
|
const DS_TOAST_POSITION = new InjectionToken('DS_TOAST_POSITION');
|
|
@@ -2699,10 +2700,10 @@ class ToastService {
|
|
|
2699
2700
|
strategy.centerHorizontally();
|
|
2700
2701
|
return strategy;
|
|
2701
2702
|
}
|
|
2702
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2703
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
2703
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2704
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
2704
2705
|
}
|
|
2705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, decorators: [{
|
|
2706
2707
|
type: Injectable,
|
|
2707
2708
|
args: [{ providedIn: 'root' }]
|
|
2708
2709
|
}] });
|
|
@@ -2728,12 +2729,12 @@ class DrawerComponent {
|
|
|
2728
2729
|
this.open.set(false);
|
|
2729
2730
|
this.closed.emit();
|
|
2730
2731
|
}
|
|
2731
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2732
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2732
|
+
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 class=\"drawer-scrim\" (click)=\"onClose()\"></div>\n <div\n [class]=\"classes()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n (keydown.escape)=\"onClose()\"\n >\n <header class=\"header\">\n <h4 class=\"title\" [id]=\"titleId\">{{ title() }}</h4>\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"onClose()\">\n <ds-icon name=\"x\" [size]=\"16\" />\n </button>\n </header>\n <div class=\"body\"><ng-content select=\"[drawer-body]\"></ng-content></div>\n <div class=\"footer\"><ng-content select=\"[drawer-footer]\"></ng-content></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"] }] });
|
|
2733
2734
|
}
|
|
2734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
2735
2736
|
type: Component,
|
|
2736
|
-
args: [{ selector: 'ds-drawer', standalone: true, imports: [IconComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, template: "@if (open()) {\
|
|
2737
|
+
args: [{ selector: 'ds-drawer', standalone: true, imports: [IconComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, template: "@if (open()) {\n <div class=\"drawer-scrim\" (click)=\"onClose()\"></div>\n <div\n [class]=\"classes()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n (keydown.escape)=\"onClose()\"\n >\n <header class=\"header\">\n <h4 class=\"title\" [id]=\"titleId\">{{ title() }}</h4>\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"onClose()\">\n <ds-icon name=\"x\" [size]=\"16\" />\n </button>\n </header>\n <div class=\"body\"><ng-content select=\"[drawer-body]\"></ng-content></div>\n <div class=\"footer\"><ng-content select=\"[drawer-footer]\"></ng-content></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"] }]
|
|
2737
2738
|
}], 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"] }] } });
|
|
2738
2739
|
|
|
2739
2740
|
/** Bottom-anchored sheet — the mobile sibling of ds-drawer. Closes on scrim
|
|
@@ -2811,14 +2812,14 @@ class BottomSheetComponent {
|
|
|
2811
2812
|
this.dragOffset.set(null);
|
|
2812
2813
|
}
|
|
2813
2814
|
}
|
|
2814
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2815
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2815
|
+
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 class=\"sheet-overlay\" (click)=\"close()\">\n <div\n #sheet\n class=\"sheet\"\n [class.dragging]=\"dragOffset() !== null\"\n [style.transform]=\"dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null\"\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 @if (title()) {\n <h3 class=\"sheet-title\">{{ title() }}</h3>\n }\n <div class=\"sheet-body\">\n <ng-content />\n </div>\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"] });
|
|
2816
2817
|
}
|
|
2817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2818
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BottomSheetComponent, decorators: [{
|
|
2818
2819
|
type: Component,
|
|
2819
2820
|
args: [{ selector: 'ds-bottom-sheet', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2820
2821
|
'(document:keydown.escape)': 'onEscape()',
|
|
2821
|
-
}, template: "@if (open()) {\
|
|
2822
|
+
}, template: "@if (open()) {\n <div class=\"sheet-overlay\" (click)=\"close()\">\n <div\n #sheet\n class=\"sheet\"\n [class.dragging]=\"dragOffset() !== null\"\n [style.transform]=\"dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null\"\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 @if (title()) {\n <h3 class=\"sheet-title\">{{ title() }}</h3>\n }\n <div class=\"sheet-body\">\n <ng-content />\n </div>\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"] }]
|
|
2822
2823
|
}], 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 }] }] } });
|
|
2823
2824
|
|
|
2824
2825
|
class TagComponent {
|
|
@@ -2834,10 +2835,10 @@ class TagComponent {
|
|
|
2834
2835
|
if (this.interactive())
|
|
2835
2836
|
this.toggled.emit();
|
|
2836
2837
|
}
|
|
2837
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2838
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2838
|
+
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 type=\"button\" class=\"close\" [attr.aria-label]=\"closeLabel()\" (click)=\"$event.stopPropagation(); closed.emit()\">\n <ds-icon name=\"x\" [size]=\"12\" />\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: var(--ds-tag-bg, 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));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:var(--_tag-bg);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: var(--ds-tag-bg, var(--surface-secondary));background:var(--_tag-bg);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){--_tag-hover-bg: var(--ds-tag-hover-bg, var(--surface-muted));background:var(--_tag-hover-bg);color:var(--text-primary)}:host(.interactive.is-active){--_tag-active-bg: var(--ds-tag-active-bg, var(--primary-muted));--_tag-active-fg: var(--ds-tag-active-fg, var(--primary-strong));--_tag-active-border: var(--ds-tag-active-border, var(--primary));background:var(--_tag-active-bg);color:var(--_tag-active-fg);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 var(--duration-fast) var(--ease-standard)}.close:hover{background:color-mix(in oklab,currentColor calc(var(--opacity-state-pressed) * 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"] }] });
|
|
2839
2840
|
}
|
|
2840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, decorators: [{
|
|
2841
2842
|
type: Component,
|
|
2842
2843
|
args: [{ selector: 'ds-tag', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2843
2844
|
'[class.neutral]': "variant() === 'neutral'",
|
|
@@ -2845,7 +2846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
2845
2846
|
'[class.interactive]': 'interactive()',
|
|
2846
2847
|
'[class.is-active]': 'selected()',
|
|
2847
2848
|
'(click)': 'onClick()',
|
|
2848
|
-
}, template: "<ng-content></ng-content>\
|
|
2849
|
+
}, template: "<ng-content></ng-content>\n@if (closable()) {\n <button type=\"button\" class=\"close\" [attr.aria-label]=\"closeLabel()\" (click)=\"$event.stopPropagation(); closed.emit()\">\n <ds-icon name=\"x\" [size]=\"12\" />\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: var(--ds-tag-bg, 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));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:var(--_tag-bg);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: var(--ds-tag-bg, var(--surface-secondary));background:var(--_tag-bg);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){--_tag-hover-bg: var(--ds-tag-hover-bg, var(--surface-muted));background:var(--_tag-hover-bg);color:var(--text-primary)}:host(.interactive.is-active){--_tag-active-bg: var(--ds-tag-active-bg, var(--primary-muted));--_tag-active-fg: var(--ds-tag-active-fg, var(--primary-strong));--_tag-active-border: var(--ds-tag-active-border, var(--primary));background:var(--_tag-active-bg);color:var(--_tag-active-fg);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 var(--duration-fast) var(--ease-standard)}.close:hover{background:color-mix(in oklab,currentColor calc(var(--opacity-state-pressed) * 100%),transparent)}.close:focus-visible{outline:var(--border-width-strong, 2px) solid var(--focus-ring-color, currentColor);outline-offset:1px}\n"] }]
|
|
2849
2850
|
}], 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"] }] } });
|
|
2850
2851
|
|
|
2851
2852
|
class W3wComponent {
|
|
@@ -2866,10 +2867,10 @@ class W3wComponent {
|
|
|
2866
2867
|
}
|
|
2867
2868
|
this.copied.emit(this.address());
|
|
2868
2869
|
}
|
|
2869
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2870
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2870
|
+
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 name=\"map\" [size]=\"14\" />\n<span><span class=\"mark\">{{ prefix() }}</span>{{ address() }}</span>\n@if (copyable()) { <ds-icon name=\"copy\" [size]=\"12\" /> }\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 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"] }] });
|
|
2871
2872
|
}
|
|
2872
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: W3wComponent, decorators: [{
|
|
2873
2874
|
type: Component,
|
|
2874
2875
|
args: [{ selector: 'ds-w3w', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2875
2876
|
'[attr.role]': "copyable() ? 'button' : null",
|
|
@@ -2878,20 +2879,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
2878
2879
|
'(click)': 'onCopy()',
|
|
2879
2880
|
'(keydown.enter)': 'onCopy()',
|
|
2880
2881
|
'(keydown.space)': 'onKeyActivate($event)',
|
|
2881
|
-
}, template: "<ds-icon name=\"map\" [size]=\"14\" />\n<span><span class=\"mark\">{{ prefix() }}</span>{{ address() }}</span>\n@if (copyable()) { <ds-icon name=\"copy\" [size]=\"12\" /> }\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-
|
|
2882
|
+
}, template: "<ds-icon name=\"map\" [size]=\"14\" />\n<span><span class=\"mark\">{{ prefix() }}</span>{{ address() }}</span>\n@if (copyable()) { <ds-icon name=\"copy\" [size]=\"12\" /> }\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 var(--duration-fast) var(--ease-standard)}:host:hover{background:var(--primary-muted)}:host .mark{color:var(--error);font-weight:var(--font-weight-bold)}\n"] }]
|
|
2882
2883
|
}], 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"] }] } });
|
|
2883
2884
|
|
|
2884
2885
|
class PageFooterComponent {
|
|
2885
2886
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2886
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2887
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
2887
|
+
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"] });
|
|
2888
2889
|
}
|
|
2889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFooterComponent, decorators: [{
|
|
2890
2891
|
type: Component,
|
|
2891
2892
|
args: [{ selector: 'ds-page-footer', standalone: true, imports: [], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
2892
2893
|
'[class.compact]': "variant() === 'compact'",
|
|
2893
2894
|
'[class.save]': "variant() === 'save'",
|
|
2894
|
-
}, 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-
|
|
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"] }]
|
|
2895
2896
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
2896
2897
|
|
|
2897
2898
|
let nextId = 0;
|
|
@@ -3072,12 +3073,12 @@ class ComboboxComponent {
|
|
|
3072
3073
|
const current = this.value() ?? [];
|
|
3073
3074
|
this.value.set(current.filter((existing) => existing !== target));
|
|
3074
3075
|
}
|
|
3075
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3076
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3076
|
+
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 #trigger class=\"combo-trigger\" [class.open]=\"isOpen()\" (click)=\"onTriggerClick()\">\n @if (multiple()) {\n @for (selectedOption of selectedTags(); track selectedOption.value) {\n <ds-tag [closable]=\"true\" [closeLabel]=\"'Remove ' + selectedOption.label\" (closed)=\"remove(selectedOption.value)\">{{ selectedOption.label }}</ds-tag>\n }\n } @else if (displayLabel()) {\n <span class=\"combo-value\">{{ displayLabel() }}</span>\n }\n <input #filter type=\"text\" 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()\" (input)=\"onFilter($event)\" (focus)=\"openPanel()\" (keydown)=\"onKeydown($event)\"\n [placeholder]=\"placeholderText()\" />\n <ds-icon name=\"chevronDown\" [size]=\"16\" class=\"combo-chevron\" (click)=\"togglePanel($event)\" />\n</div>\n\n<ng-template #panel>\n <ul class=\"combo-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\">\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li [class]=\"optionClass(option)\" role=\"option\" [id]=\"optionId(i)\"\n [class.is-active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"onPick(option)\" (mouseenter)=\"activeIndex.set(i)\">\n @if (multiple()) {\n <input type=\"checkbox\" class=\"check\" tabindex=\"-1\" aria-hidden=\"true\" [checked]=\"isSelected(option)\" />\n }\n <span>{{ option.label }}</span>\n @if (!multiple() && isSelected(option)) {\n <ds-icon name=\"check\" class=\"icon\" [size]=\"14\" />\n }\n </li>\n }\n @if (filteredOptions().length === 0) {\n <li class=\"empty t-s\" role=\"option\" [attr.aria-disabled]=\"true\">No matches</li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{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(--focus-ring);outline:0}.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"] }] });
|
|
3077
3078
|
}
|
|
3078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
3079
3080
|
type: Component,
|
|
3080
|
-
args: [{ selector: 'ds-combobox', standalone: true, imports: [IconComponent, TagComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div #trigger class=\"combo-trigger\" [class.open]=\"isOpen()\" (click)=\"onTriggerClick()\">\
|
|
3081
|
+
args: [{ selector: 'ds-combobox', standalone: true, imports: [IconComponent, TagComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div #trigger class=\"combo-trigger\" [class.open]=\"isOpen()\" (click)=\"onTriggerClick()\">\n @if (multiple()) {\n @for (selectedOption of selectedTags(); track selectedOption.value) {\n <ds-tag [closable]=\"true\" [closeLabel]=\"'Remove ' + selectedOption.label\" (closed)=\"remove(selectedOption.value)\">{{ selectedOption.label }}</ds-tag>\n }\n } @else if (displayLabel()) {\n <span class=\"combo-value\">{{ displayLabel() }}</span>\n }\n <input #filter type=\"text\" 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()\" (input)=\"onFilter($event)\" (focus)=\"openPanel()\" (keydown)=\"onKeydown($event)\"\n [placeholder]=\"placeholderText()\" />\n <ds-icon name=\"chevronDown\" [size]=\"16\" class=\"combo-chevron\" (click)=\"togglePanel($event)\" />\n</div>\n\n<ng-template #panel>\n <ul class=\"combo-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\">\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li [class]=\"optionClass(option)\" role=\"option\" [id]=\"optionId(i)\"\n [class.is-active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"onPick(option)\" (mouseenter)=\"activeIndex.set(i)\">\n @if (multiple()) {\n <input type=\"checkbox\" class=\"check\" tabindex=\"-1\" aria-hidden=\"true\" [checked]=\"isSelected(option)\" />\n }\n <span>{{ option.label }}</span>\n @if (!multiple() && isSelected(option)) {\n <ds-icon name=\"check\" class=\"icon\" [size]=\"14\" />\n }\n </li>\n }\n @if (filteredOptions().length === 0) {\n <li class=\"empty t-s\" role=\"option\" [attr.aria-disabled]=\"true\">No matches</li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{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(--focus-ring);outline:0}.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"] }]
|
|
3081
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 }] }] } });
|
|
3082
3083
|
|
|
3083
3084
|
class DividerComponent {
|
|
@@ -3085,10 +3086,10 @@ class DividerComponent {
|
|
|
3085
3086
|
// Vertical margin around the divider. Defaults to `md` (8px) for parity
|
|
3086
3087
|
// with menus / sidenavs; bump to `lg` for content-section separators.
|
|
3087
3088
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
3088
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3089
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3089
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3090
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: DividerComponent, isStandalone: true, selector: "ds-divider", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class.strong": "variant() === 'strong'", "class.vertical": "variant() === 'vertical'", "class.label": "variant() === 'label'", "class.spacing-none": "spacing() === 'none'", "class.spacing-sm": "spacing() === 'sm'", "class.spacing-md": "spacing() === 'md'", "class.spacing-lg": "spacing() === 'lg'", "attr.aria-orientation": "variant() === 'vertical' ? 'vertical' : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;height:var(--border-width-default);background:var(--border-divider);margin:var(--space-2) 0;border:0}:host(.spacing-none){margin:0}:host(.spacing-sm){margin:var(--space-1) 0}:host(.spacing-md){margin:var(--space-2) 0}:host(.spacing-lg){margin:var(--space-4) 0}:host(.strong){background:var(--border-default)}:host(.vertical){width:var(--border-width-default);height:auto;align-self:stretch;margin:0 var(--space-3)}:host(.label){display:flex;align-items:center;gap:var(--space-3);background:transparent;height:auto;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--text-tertiary)}:host(.label):before,:host(.label):after{content:\"\";flex:1;height:var(--border-width-default);background:var(--border-divider)}\n"] });
|
|
3090
3091
|
}
|
|
3091
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DividerComponent, decorators: [{
|
|
3092
3093
|
type: Component,
|
|
3093
3094
|
args: [{ selector: 'ds-divider', standalone: true, template: '<ng-content></ng-content>', host: {
|
|
3094
3095
|
role: 'separator',
|
|
@@ -3112,10 +3113,10 @@ class CheckboxComponent {
|
|
|
3112
3113
|
onChange(event) {
|
|
3113
3114
|
this.checked.set(event.target.checked);
|
|
3114
3115
|
}
|
|
3115
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3116
|
+
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;-webkit-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 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(--focus-ring)}.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"] });
|
|
3117
3118
|
}
|
|
3118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
3119
3120
|
type: Component,
|
|
3120
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;-webkit-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 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(--focus-ring)}.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"] }]
|
|
3121
3122
|
}], 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 }] }] } });
|
|
@@ -3129,10 +3130,10 @@ class RadioComponent {
|
|
|
3129
3130
|
onChange(event) {
|
|
3130
3131
|
this.checked.set(event.target.checked);
|
|
3131
3132
|
}
|
|
3132
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3133
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3133
|
+
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;-webkit-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 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(--focus-ring)}.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"] });
|
|
3134
3135
|
}
|
|
3135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RadioComponent, decorators: [{
|
|
3136
3137
|
type: Component,
|
|
3137
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;-webkit-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 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(--focus-ring)}.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"] }]
|
|
3138
3139
|
}], 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 }] }] } });
|
|
@@ -3150,10 +3151,10 @@ class SwitchComponent {
|
|
|
3150
3151
|
onChange(event) {
|
|
3151
3152
|
this.checked.set(event.target.checked);
|
|
3152
3153
|
}
|
|
3153
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3154
|
+
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;-webkit-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 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(--focus-ring)}.switch:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.switch.success:checked{background:var(--success)}.switch.error:checked{background:var(--error)}\n"] });
|
|
3155
3156
|
}
|
|
3156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
3157
3158
|
type: Component,
|
|
3158
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;-webkit-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 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(--focus-ring)}.switch:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.switch.success:checked{background:var(--success)}.switch.error:checked{background:var(--error)}\n"] }]
|
|
3159
3160
|
}], 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 }] }] } });
|