design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
64 lines • 10.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { ItIconComponent } from '../../utils/icon/icon.component';
import * as i0 from "@angular/core";
/**
* Callout
* @description Callouts can be used to highlight certain parts of the text that require particular attention. They may contain error messages, warnings, hints, etc.
*/
export class ItCalloutComponent {
constructor() {
/**
* Callout appearance
* - <b>default</b>
* - <b>highlight</b>: Callout version with border only on the left side
* - <b>more</b>: It looks radically different from the other styles available and is suitable for more extensive texts
* @default default
*/
this.appearance = 'default';
/**
* The input label even get labelWaria icon
* @default undefined
*/
this.labelWaria = undefined;
}
get iconName() {
if (this.icon) {
return this.icon;
}
if (this.appearance === 'more') {
return 'zoom-in';
}
switch (this.color) {
case 'success':
return 'check-circle';
case 'warning':
return 'help-circle';
case 'danger':
return 'close-circle';
case 'important':
case 'note':
default:
return 'info-circle';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n @if (appearance === 'default') {\n <div class=\"callout-inner\">\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n }\n</div>\n\n<ng-template #inner>\n @if (label) {\n <div class=\"callout-title\">\n <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n @if (hiddenLabel) {\n <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n }\n <span class=\"text\">{{ label }}</span>\n </div>\n }\n <p class=\"callout-big-text\">\n <ng-content select=\"[bigText]\"></ng-content>\n </p>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItIconComponent], template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n @if (appearance === 'default') {\n <div class=\"callout-inner\">\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n }\n</div>\n\n<ng-template #inner>\n @if (label) {\n <div class=\"callout-title\">\n <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n @if (hiddenLabel) {\n <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n }\n <span class=\"text\">{{ label }}</span>\n </div>\n }\n <p class=\"callout-big-text\">\n <ng-content select=\"[bigText]\"></ng-content>\n </p>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
}], propDecorators: { label: [{
type: Input
}], hiddenLabel: [{
type: Input
}], color: [{
type: Input
}], appearance: [{
type: Input
}], icon: [{
type: Input
}], labelWaria: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsbG91dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tYW5ndWxhci1raXQvc3JjL2xpYi9jb21wb25lbnRzL2NvcmUvY2FsbG91dC9jYWxsb3V0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9jYWxsb3V0L2NhbGxvdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHMUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOztBQUVsRTs7O0dBR0c7QUFlSCxNQUFNLE9BQU8sa0JBQWtCO0lBZC9CO1FBc0NFOzs7Ozs7V0FNRztRQUNNLGVBQVUsR0FBc0IsU0FBUyxDQUFDO1FBUW5EOzs7V0FHRztRQUNNLGVBQVUsR0FBdUIsU0FBUyxDQUFDO0tBd0JyRDtJQXRCQyxJQUFjLFFBQVE7UUFDcEIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDZCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDbkIsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLFVBQVUsS0FBSyxNQUFNLEVBQUUsQ0FBQztZQUMvQixPQUFPLFNBQVMsQ0FBQztRQUNuQixDQUFDO1FBRUQsUUFBUSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDbkIsS0FBSyxTQUFTO2dCQUNaLE9BQU8sY0FBYyxDQUFDO1lBQ3hCLEtBQUssU0FBUztnQkFDWixPQUFPLGFBQWEsQ0FBQztZQUN2QixLQUFLLFFBQVE7Z0JBQ1gsT0FBTyxjQUFjLENBQUM7WUFDeEIsS0FBSyxXQUFXLENBQUM7WUFDakIsS0FBSyxNQUFNLENBQUM7WUFDWjtnQkFDRSxPQUFPLGFBQWEsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQzs4R0FsRVUsa0JBQWtCO2tHQUFsQixrQkFBa0IsZ05DeEIvQixvMEJBeUJBLGlHREhZLGdCQUFnQixvSkFBRSxlQUFlOzsyRkFFaEMsa0JBQWtCO2tCQWQ5QixTQUFTO2lDQUNJLElBQUksWUFDTixZQUFZLG1CQVNMLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxnQkFBZ0IsRUFBRSxlQUFlLENBQUM7OEJBT25DLEtBQUs7c0JBQWIsS0FBSztnQkFNRyxXQUFXO3NCQUFuQixLQUFLO2dCQVdHLEtBQUs7c0JBQWIsS0FBSztnQkFTRyxVQUFVO3NCQUFsQixLQUFLO2dCQU1HLElBQUk7c0JBQVosS0FBSztnQkFNRyxVQUFVO3NCQUFsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhbGxvdXRBcHBlYXJhbmNlLCBDYWxsb3V0Q29sb3IgfSBmcm9tICcuLi8uLi8uLi9pbnRlcmZhY2VzL2NvcmUnO1xuaW1wb3J0IHsgSWNvbk5hbWUgfSBmcm9tICcuLi8uLi8uLi9pbnRlcmZhY2VzL2ljb24nO1xuaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJdEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi91dGlscy9pY29uL2ljb24uY29tcG9uZW50JztcblxuLyoqXG4gKiBDYWxsb3V0XG4gKiBAZGVzY3JpcHRpb24gQ2FsbG91dHMgY2FuIGJlIHVzZWQgdG8gaGlnaGxpZ2h0IGNlcnRhaW4gcGFydHMgb2YgdGhlIHRleHQgdGhhdCByZXF1aXJlIHBhcnRpY3VsYXIgYXR0ZW50aW9uLiBUaGV5IG1heSBjb250YWluIGVycm9yIG1lc3NhZ2VzLCB3YXJuaW5ncywgaGludHMsIGV0Yy5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnaXQtY2FsbG91dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYWxsb3V0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmNhbGxvdXQtYmlnLXRleHQ6ZW1wdHkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTmdUZW1wbGF0ZU91dGxldCwgSXRJY29uQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgSXRDYWxsb3V0Q29tcG9uZW50IHtcbiAgLyoqXG4gICAqIENhbGxvdXQgbGFiZWxcbiAgICogQGRlZmF1bHQgdW5kZWZpbmVkXG4gICAqL1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBDYWxsb3V0IGhpZGRlbkxhYmVsXG4gICAqIEBkZWZhdWx0IHVuZGVmaW5lZFxuICAgKi9cbiAgQElucHV0KCkgaGlkZGVuTGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogQ2FsbG91dCBjb2xvclxuICAgKiAtIDxiPnN1Y2Nlc3M8L2I+XG4gICAqIC0gPGI+ZGFuZ2VyPC9iPlxuICAgKiAtIDxiPndhcm5pbmc8L2I+XG4gICAqIC0gPGI+aW1wb3J0YW50PC9iPlxuICAgKiAtIDxiPm5vdGU8L2I+XG4gICAqIEBkZWZhdWx0IHVuZGVmaW5lZFxuICAgKi9cbiAgQElucHV0KCkgY29sb3I6IENhbGxvdXRDb2xvciB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogQ2FsbG91dCBhcHBlYXJhbmNlXG4gICAqIC0gPGI+ZGVmYXVsdDwvYj5cbiAgICogLSA8Yj5oaWdobGlnaHQ8L2I+OiBDYWxsb3V0IHZlcnNpb24gd2l0aCBib3JkZXIgb25seSBvbiB0aGUgbGVmdCBzaWRlXG4gICAqIC0gPGI+bW9yZTwvYj46IEl0IGxvb2tzIHJhZGljYWxseSBkaWZmZXJlbnQgZnJvbSB0aGUgb3RoZXIgc3R5bGVzIGF2YWlsYWJsZSBhbmQgaXMgc3VpdGFibGUgZm9yIG1vcmUgZXh0ZW5zaXZlIHRleHRzXG4gICAqIEBkZWZhdWx0IGRlZmF1bHRcbiAgICovXG4gIEBJbnB1dCgpIGFwcGVhcmFuY2U6IENhbGxvdXRBcHBlYXJhbmNlID0gJ2RlZmF1bHQnO1xuXG4gIC8qKlxuICAgKiBDdXN0b20gaWNvblxuICAgKiBAZGVmYXVsdCB1bmRlZmluZWRcbiAgICovXG4gIEBJbnB1dCgpIGljb246IEljb25OYW1lIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBUaGUgaW5wdXQgbGFiZWwgZXZlbiBnZXQgbGFiZWxXYXJpYSBpY29uXG4gICAqIEBkZWZhdWx0IHVuZGVmaW5lZFxuICAgKi9cbiAgQElucHV0KCkgbGFiZWxXYXJpYTogc3RyaW5nIHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xuXG4gIHByb3RlY3RlZCBnZXQgaWNvbk5hbWUoKTogSWNvbk5hbWUge1xuICAgIGlmICh0aGlzLmljb24pIHtcbiAgICAgIHJldHVybiB0aGlzLmljb247XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuYXBwZWFyYW5jZSA9PT0gJ21vcmUnKSB7XG4gICAgICByZXR1cm4gJ3pvb20taW4nO1xuICAgIH1cblxuICAgIHN3aXRjaCAodGhpcy5jb2xvcikge1xuICAgICAgY2FzZSAnc3VjY2Vzcyc6XG4gICAgICAgIHJldHVybiAnY2hlY2stY2lyY2xlJztcbiAgICAgIGNhc2UgJ3dhcm5pbmcnOlxuICAgICAgICByZXR1cm4gJ2hlbHAtY2lyY2xlJztcbiAgICAgIGNhc2UgJ2Rhbmdlcic6XG4gICAgICAgIHJldHVybiAnY2xvc2UtY2lyY2xlJztcbiAgICAgIGNhc2UgJ2ltcG9ydGFudCc6XG4gICAgICBjYXNlICdub3RlJzpcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiAnaW5mby1jaXJjbGUnO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNhbGxvdXQge3sgY29sb3IgfX1cIiBbY2xhc3MuY2FsbG91dC1oaWdobGlnaHRdPVwiYXBwZWFyYW5jZSA9PT0gJ2hpZ2hsaWdodCdcIiBbY2xhc3MuY2FsbG91dC1tb3JlXT1cImFwcGVhcmFuY2UgPT09ICdtb3JlJ1wiPlxuICBAaWYgKGFwcGVhcmFuY2UgPT09ICdkZWZhdWx0Jykge1xuICAgIDxkaXYgY2xhc3M9XCJjYWxsb3V0LWlubmVyXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaW5uZXJcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgfSBAZWxzZSB7XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImlubmVyXCI+PC9uZy1jb250YWluZXI+XG4gIH1cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2lubmVyPlxuICBAaWYgKGxhYmVsKSB7XG4gICAgPGRpdiBjbGFzcz1cImNhbGxvdXQtdGl0bGVcIj5cbiAgICAgIDxpdC1pY29uIFtsYWJlbFdhcmlhXT1cImxhYmVsV2FyaWFcIiBbbmFtZV09XCJpY29uTmFtZVwiPjwvaXQtaWNvbj5cbiAgICAgIEBpZiAoaGlkZGVuTGFiZWwpIHtcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ2aXN1YWxseS1oaWRkZW5cIj57eyBoaWRkZW5MYWJlbCB9fTwvc3Bhbj5cbiAgICAgIH1cbiAgICAgIDxzcGFuIGNsYXNzPVwidGV4dFwiPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICB9XG4gIDxwIGNsYXNzPVwiY2FsbG91dC1iaWctdGV4dFwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltiaWdUZXh0XVwiPjwvbmctY29udGVudD5cbiAgPC9wPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuIl19