design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
56 lines • 12.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ItLinkComponent } from '../../link/link.component';
import { NgTemplateOutlet } from '@angular/common';
import { inputToBoolean } from '../../../../utils/coercion';
import * as i0 from "@angular/core";
export class ItListItemComponent extends ItLinkComponent {
constructor(elRef) {
super();
this.elRef = elRef;
}
get itemClass() {
const inSidebar = this.elRef.nativeElement.closest('.sidebar-linklist-wrapper') ? true : false;
let itemClass = 'list-item';
if (this.disabled) {
itemClass += ` disabled`;
}
if (this.active) {
itemClass += ` active`;
}
if (this.size) {
itemClass += ` ${this.size}`;
}
if (this.iconLeft) {
itemClass += inSidebar ? ` left-icon` : ` icon-left`;
}
if (this.iconRight) {
itemClass += inSidebar ? ` right-icon` : ` icon-right`;
}
if (this.class) {
itemClass += ` ${this.class}`;
}
return itemClass;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n <ng-template #content>\n <div class=\"it-rounded-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (avatar) {\n <div class=\"avatar size-lg\">\n <img [attr.src]=\"avatar\" alt=\"avatar\" />\n </div>\n }\n\n @if (image) {\n <div class=\"it-thumb\">\n <img [attr.src]=\"image\" alt=\"thumb\" />\n </div>\n }\n\n <div class=\"it-right-zone\">\n <ng-content></ng-content>\n <ng-content select=\"[action]\"></ng-content>\n\n <span class=\"it-multiple\">\n <span class=\"metadata\">\n <ng-content select=\"[metadata]\"></ng-content>\n </span>\n\n <ng-content select=\"[multiple]\"></ng-content>\n </span>\n </div>\n </ng-template>\n\n @if (!href) {\n <div [class]=\"itemClass\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n } @else {\n <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </it-link>\n }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "<li>\n <ng-template #content>\n <div class=\"it-rounded-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (avatar) {\n <div class=\"avatar size-lg\">\n <img [attr.src]=\"avatar\" alt=\"avatar\" />\n </div>\n }\n\n @if (image) {\n <div class=\"it-thumb\">\n <img [attr.src]=\"image\" alt=\"thumb\" />\n </div>\n }\n\n <div class=\"it-right-zone\">\n <ng-content></ng-content>\n <ng-content select=\"[action]\"></ng-content>\n\n <span class=\"it-multiple\">\n <span class=\"metadata\">\n <ng-content select=\"[metadata]\"></ng-content>\n </span>\n\n <ng-content select=\"[multiple]\"></ng-content>\n </span>\n </div>\n </ng-template>\n\n @if (!href) {\n <div [class]=\"itemClass\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n } @else {\n <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </it-link>\n }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], size: [{
type: Input
}], iconLeft: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], iconRight: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], avatar: [{
type: Input
}], image: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9saXN0L2xpc3QtaXRlbS9saXN0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9saWIvY29tcG9uZW50cy9jb3JlL2xpc3QvbGlzdC1pdGVtL2xpc3QtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0RixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQVU1RCxNQUFNLE9BQU8sbUJBQW9CLFNBQVEsZUFBZTtJQUN0RCxZQUFvQixLQUFpQjtRQUNuQyxLQUFLLEVBQUUsQ0FBQztRQURVLFVBQUssR0FBTCxLQUFLLENBQVk7SUFFckMsQ0FBQztJQW1DRCxJQUFJLFNBQVM7UUFDWCxNQUFNLFNBQVMsR0FBWSxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsMkJBQTJCLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDeEcsSUFBSSxTQUFTLEdBQUcsV0FBVyxDQUFDO1FBQzVCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2xCLFNBQVMsSUFBSSxXQUFXLENBQUM7UUFDM0IsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQ2hCLFNBQVMsSUFBSSxTQUFTLENBQUM7UUFDekIsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2QsU0FBUyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQy9CLENBQUM7UUFDRCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixTQUFTLElBQUksU0FBUyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQztRQUN2RCxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDbkIsU0FBUyxJQUFJLFNBQVMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUM7UUFDekQsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2YsU0FBUyxJQUFJLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2hDLENBQUM7UUFDRCxPQUFPLFNBQVMsQ0FBQztJQUNuQixDQUFDOzhHQTVEVSxtQkFBbUI7a0dBQW5CLG1CQUFtQix1RkFTVixjQUFjLG9EQVdkLGNBQWMseUNBTWQsY0FBYyxzRkN2Q3BDLG1tQ0EwQ0Esb1REL0JZLGdCQUFnQixvSkFBRSxlQUFlOzsyRkFFaEMsbUJBQW1CO2tCQVIvQixTQUFTO2lDQUNJLElBQUksWUFDTixjQUFjLG1CQUdQLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxnQkFBZ0IsRUFBRSxlQUFlLENBQUM7K0VBV04sTUFBTTtzQkFBM0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBSzNCLElBQUk7c0JBQVosS0FBSztnQkFNZ0MsUUFBUTtzQkFBN0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsU0FBUztzQkFBOUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBSzNCLE1BQU07c0JBQWQsS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSXRMaW5rQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbGluay9saW5rLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IGlucHV0VG9Cb29sZWFuIH0gZnJvbSAnLi4vLi4vLi4vLi4vdXRpbHMvY29lcmNpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdpdC1saXN0LWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbGlzdC1pdGVtLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTmdUZW1wbGF0ZU91dGxldCwgSXRMaW5rQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgSXRMaXN0SXRlbUNvbXBvbmVudCBleHRlbmRzIEl0TGlua0NvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxSZWY6IEVsZW1lbnRSZWYpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgLyoqXG4gICAqIEFkZCBhY3RpdmUgY2xhc3NcbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogaW5wdXRUb0Jvb2xlYW4gfSkgYWN0aXZlPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogQWRkIGxhcmdlIGNsYXNzXG4gICAqL1xuICBASW5wdXQoKSBzaXplPzogJ2xhcmdlJyB8ICdtZWRpdW0nO1xuXG4gIC8qKlxuICAgKiBBZGQgaWNvbi1sZWZ0IGNsYXNzXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIGljb25MZWZ0PzogYm9vbGVhbjtcblxuICAvKipcbiAgICogQWRkIGljb24tcmlnaHQgY2xhc3NcbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogaW5wdXRUb0Jvb2xlYW4gfSkgaWNvblJpZ2h0PzogYm9vbGVhbjtcblxuICAvKipcbiAgICogVGhlIGF2YXRhciB1cmxcbiAgICovXG4gIEBJbnB1dCgpIGF2YXRhcjogVVJMIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBUaGUgdGh1bWIgaW1hZ2UgdXJsXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZTogVVJMIHwgdW5kZWZpbmVkO1xuXG4gIGdldCBpdGVtQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBjb25zdCBpblNpZGViYXI6IGJvb2xlYW4gPSB0aGlzLmVsUmVmLm5hdGl2ZUVsZW1lbnQuY2xvc2VzdCgnLnNpZGViYXItbGlua2xpc3Qtd3JhcHBlcicpID8gdHJ1ZSA6IGZhbHNlO1xuICAgIGxldCBpdGVtQ2xhc3MgPSAnbGlzdC1pdGVtJztcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgaXRlbUNsYXNzICs9IGAgZGlzYWJsZWRgO1xuICAgIH1cbiAgICBpZiAodGhpcy5hY3RpdmUpIHtcbiAgICAgIGl0ZW1DbGFzcyArPSBgIGFjdGl2ZWA7XG4gICAgfVxuICAgIGlmICh0aGlzLnNpemUpIHtcbiAgICAgIGl0ZW1DbGFzcyArPSBgICR7dGhpcy5zaXplfWA7XG4gICAgfVxuICAgIGlmICh0aGlzLmljb25MZWZ0KSB7XG4gICAgICBpdGVtQ2xhc3MgKz0gaW5TaWRlYmFyID8gYCBsZWZ0LWljb25gIDogYCBpY29uLWxlZnRgO1xuICAgIH1cbiAgICBpZiAodGhpcy5pY29uUmlnaHQpIHtcbiAgICAgIGl0ZW1DbGFzcyArPSBpblNpZGViYXIgPyBgIHJpZ2h0LWljb25gIDogYCBpY29uLXJpZ2h0YDtcbiAgICB9XG4gICAgaWYgKHRoaXMuY2xhc3MpIHtcbiAgICAgIGl0ZW1DbGFzcyArPSBgICR7dGhpcy5jbGFzc31gO1xuICAgIH1cbiAgICByZXR1cm4gaXRlbUNsYXNzO1xuICB9XG59XG4iLCI8bGk+XG4gIDxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgICA8ZGl2IGNsYXNzPVwiaXQtcm91bmRlZC1pY29uXCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbaWNvbl1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG5cbiAgICBAaWYgKGF2YXRhcikge1xuICAgICAgPGRpdiBjbGFzcz1cImF2YXRhciBzaXplLWxnXCI+XG4gICAgICAgIDxpbWcgW2F0dHIuc3JjXT1cImF2YXRhclwiIGFsdD1cImF2YXRhclwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICB9XG5cbiAgICBAaWYgKGltYWdlKSB7XG4gICAgICA8ZGl2IGNsYXNzPVwiaXQtdGh1bWJcIj5cbiAgICAgICAgPGltZyBbYXR0ci5zcmNdPVwiaW1hZ2VcIiBhbHQ9XCJ0aHVtYlwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICB9XG5cbiAgICA8ZGl2IGNsYXNzPVwiaXQtcmlnaHQtem9uZVwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2FjdGlvbl1cIj48L25nLWNvbnRlbnQ+XG5cbiAgICAgIDxzcGFuIGNsYXNzPVwiaXQtbXVsdGlwbGVcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtZXRhZGF0YVwiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlttZXRhZGF0YV1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbXVsdGlwbGVdXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L25nLXRlbXBsYXRlPlxuXG4gIEBpZiAoIWhyZWYpIHtcbiAgICA8ZGl2IFtjbGFzc109XCJpdGVtQ2xhc3NcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIH0gQGVsc2Uge1xuICAgIDxpdC1saW5rIFtjbGFzc109XCJpdGVtQ2xhc3NcIiBbaHJlZl09XCJocmVmXCIgW2V4dGVybmFsTGlua109XCIhIWV4dGVybmFsTGlua1wiIFtkaXNhYmxlZF09XCIhIWRpc2FibGVkXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvaXQtbGluaz5cbiAgfVxuPC9saT5cbiJdfQ==