@ndwnu/design-system 11.0.1 → 11.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ndwnu-design-system.mjs +4 -4
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/lib/components/form-field/form-field.component.d.ts +2 -1
- package/lib/components/form-field/input/index.d.ts +0 -1
- package/lib/components/form-field/picker-button/picker-button.component.d.ts +2 -1
- package/package.json +1 -1
- package/styles/components/_list-item.scss +1 -13
- package/styles/utils/index.scss +1 -1
- package/lib/components/form-field/input/input.model.d.ts +0 -1
- package/styles/utils/_screenreader.scss +0 -18
|
@@ -1655,7 +1655,7 @@ class ListItemComponent {
|
|
|
1655
1655
|
this.expanded.update((expanded) => !expanded);
|
|
1656
1656
|
}
|
|
1657
1657
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1658
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n <button\n list-item\n
|
|
1658
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div ndw-list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[ndw-list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["checked", "switch", "disabled", "error", "success", "indeterminate", "required"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { kind: "component", type: RadioButtonComponent, selector: "ndw-radio-button", inputs: ["checked", "disabled", "error", "success", "required", "value"], outputs: ["checkedChange", "disabledChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1659
1659
|
}
|
|
1660
1660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
1661
1661
|
type: Component,
|
|
@@ -1668,7 +1668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1668
1668
|
NgTemplateOutlet,
|
|
1669
1669
|
PillComponent,
|
|
1670
1670
|
RadioButtonComponent,
|
|
1671
|
-
], selector: 'ndw-list-item', template: "@if (actionable()) {\n <button\n list-item\n
|
|
1671
|
+
], selector: 'ndw-list-item', template: "@if (actionable()) {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div ndw-list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[ndw-list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
|
|
1672
1672
|
}], ctorParameters: () => [] });
|
|
1673
1673
|
|
|
1674
1674
|
const collapsibleAnimation = [
|
|
@@ -2199,13 +2199,13 @@ class HoverableListItemComponent {
|
|
|
2199
2199
|
this.selected.emit();
|
|
2200
2200
|
}
|
|
2201
2201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HoverableListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: HoverableListItemComponent, isStandalone: true, selector: "ndw-hoverable-list-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected", selected: "selected" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (path(); as path) {\n <a\n list-item\n
|
|
2202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: HoverableListItemComponent, isStandalone: true, selector: "ndw-hoverable-list-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected", selected: "selected" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (path(); as path) {\n <a\n ndw-list-item\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[ndw-list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2203
2203
|
}
|
|
2204
2204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HoverableListItemComponent, decorators: [{
|
|
2205
2205
|
type: Component,
|
|
2206
2206
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2207
2207
|
role: 'listitem',
|
|
2208
|
-
}, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\n <a\n list-item\n
|
|
2208
|
+
}, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\n <a\n ndw-list-item\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[ndw-list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
|
|
2209
2209
|
}] });
|
|
2210
2210
|
|
|
2211
2211
|
class KeyValueListComponent extends CoreKeyValueListComponent {
|