@net7/components 3.8.2 → 3.8.4
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/esm2020/lib/components/footer/footer.mjs +3 -3
- package/esm2020/lib/components/toast/toast.mjs +3 -3
- package/esm2020/lib/components/toast/toast.mock.mjs +7 -3
- package/fesm2015/net7-components.mjs +10 -6
- package/fesm2015/net7-components.mjs.map +1 -1
- package/fesm2020/net7-components.mjs +10 -6
- package/fesm2020/net7-components.mjs.map +1 -1
- package/lib/components/footer/footer.d.ts +29 -2
- package/lib/components/toast/toast.d.ts +23 -19
- package/package.json +1 -1
- package/src/lib/styles/components/_toast.scss +2 -0
|
@@ -779,10 +779,10 @@ class FooterComponent {
|
|
|
779
779
|
}
|
|
780
780
|
}
|
|
781
781
|
FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
782
|
-
FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"
|
|
782
|
+
FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n class=\"n7-footer {{data.classes || ''}}\">\n <div class=\"n7-footer__content\">\n <!-- Loop footer content columns -->\n <div class=\"n7-footer__column {{column.classes || ''}}\"\n *ngFor=\"let column of data.columns\">\n <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n </div>\n </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n <!-- Custom order for content (sections) -->\n <ng-container *ngFor=\"let section of column.sections\">\n <ng-container [ngSwitch]=\"section.type\">\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngTemplateOutlet=\"text; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'title'\">\n <ng-container *ngTemplateOutlet=\"title; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'links'\">\n <ng-container *ngTemplateOutlet=\"links; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'selects'\">\n <ng-container *ngTemplateOutlet=\"selects; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'images'\">\n <ng-container *ngTemplateOutlet=\"images; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Legacy configuration without sections -->\n <ng-container *ngIf=\"column.title\">\n <ng-container *ngTemplateOutlet=\"title; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column.text\">\n <ng-container *ngTemplateOutlet=\"text; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column.links\">\n <ng-container *ngTemplateOutlet=\"links; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column.images\">\n <ng-container *ngTemplateOutlet=\"images; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Content Sections -->\n<!-- TITLE -->\n<ng-template #title let-section>\n <h2 *ngIf=\"section.title\"\n class=\"n7-footer__column-title\">\n {{ section.title }}\n </h2>\n</ng-template>\n<!-- TEXT -->\n<ng-template #text let-section>\n <p *ngIf=\"section.text\"\n class=\"n7-footer__column-text\"\n [innerHTML]=\"section.text\"></p>\n</ng-template>\n<!-- IMAGES -->\n<ng-template #images let-section>\n <div *ngIf=\"section.images\"\n class=\"n7-footer__column-images\">\n <n7-anchor-wrapper *ngFor=\"let image of section.images\"\n [classes]=\"image.classes || ''\"\n [data]=\"image.anchor\"\n (clicked)=\"onClick($event)\">\n <img [src]=\"image.url\"\n [attr.alt]=\"image.alttext\" />\n </n7-anchor-wrapper>\n </div>\n</ng-template>\n<!-- SELECTS -->\n<ng-template #selects let-section>\n <div *ngIf=\"section.selects\"\n class=\"n7-footer__column-selects\">\n <n7-input-select *ngFor=\"let selectData of section.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\">\n </n7-input-select>\n </div>\n</ng-template>\n<!-- LINKS -->\n<ng-template #links let-section>\n <div *ngIf=\"section.links\"\n class=\"n7-footer__column-nav\">\n <ul class=\"n7-footer__column-nav-list\">\n <li *ngFor=\"let link of section.links\"\n class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n [data]=\"link.anchor\"\n (clicked)=\"onClick($event)\">\n {{ link.text }}\n </n7-anchor-wrapper>\n </li>\n </ul>\n </div>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
783
783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, decorators: [{
|
|
784
784
|
type: Component,
|
|
785
|
-
args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\"
|
|
785
|
+
args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\"\n class=\"n7-footer {{data.classes || ''}}\">\n <div class=\"n7-footer__content\">\n <!-- Loop footer content columns -->\n <div class=\"n7-footer__column {{column.classes || ''}}\"\n *ngFor=\"let column of data.columns\">\n <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n </div>\n </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n <!-- Custom order for content (sections) -->\n <ng-container *ngFor=\"let section of column.sections\">\n <ng-container [ngSwitch]=\"section.type\">\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngTemplateOutlet=\"text; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'title'\">\n <ng-container *ngTemplateOutlet=\"title; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'links'\">\n <ng-container *ngTemplateOutlet=\"links; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'selects'\">\n <ng-container *ngTemplateOutlet=\"selects; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'images'\">\n <ng-container *ngTemplateOutlet=\"images; context:{$implicit: section}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Legacy configuration without sections -->\n <ng-container *ngIf=\"column.title\">\n <ng-container *ngTemplateOutlet=\"title; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column.text\">\n <ng-container *ngTemplateOutlet=\"text; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column.links\">\n <ng-container *ngTemplateOutlet=\"links; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column.images\">\n <ng-container *ngTemplateOutlet=\"images; context:{$implicit: column}\">\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Content Sections -->\n<!-- TITLE -->\n<ng-template #title let-section>\n <h2 *ngIf=\"section.title\"\n class=\"n7-footer__column-title\">\n {{ section.title }}\n </h2>\n</ng-template>\n<!-- TEXT -->\n<ng-template #text let-section>\n <p *ngIf=\"section.text\"\n class=\"n7-footer__column-text\"\n [innerHTML]=\"section.text\"></p>\n</ng-template>\n<!-- IMAGES -->\n<ng-template #images let-section>\n <div *ngIf=\"section.images\"\n class=\"n7-footer__column-images\">\n <n7-anchor-wrapper *ngFor=\"let image of section.images\"\n [classes]=\"image.classes || ''\"\n [data]=\"image.anchor\"\n (clicked)=\"onClick($event)\">\n <img [src]=\"image.url\"\n [attr.alt]=\"image.alttext\" />\n </n7-anchor-wrapper>\n </div>\n</ng-template>\n<!-- SELECTS -->\n<ng-template #selects let-section>\n <div *ngIf=\"section.selects\"\n class=\"n7-footer__column-selects\">\n <n7-input-select *ngFor=\"let selectData of section.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\">\n </n7-input-select>\n </div>\n</ng-template>\n<!-- LINKS -->\n<ng-template #links let-section>\n <div *ngIf=\"section.links\"\n class=\"n7-footer__column-nav\">\n <ul class=\"n7-footer__column-nav-list\">\n <li *ngFor=\"let link of section.links\"\n class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n [data]=\"link.anchor\"\n (clicked)=\"onClick($event)\">\n {{ link.text }}\n </n7-anchor-wrapper>\n </li>\n </ul>\n </div>\n</ng-template>\n" }]
|
|
786
786
|
}], propDecorators: { data: [{
|
|
787
787
|
type: Input
|
|
788
788
|
}], emit: [{
|
|
@@ -1847,10 +1847,10 @@ class ToastComponent {
|
|
|
1847
1847
|
}
|
|
1848
1848
|
}
|
|
1849
1849
|
ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1850
|
-
ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToastComponent, selector: "n7-toast", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-toast\">\n <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n <!-- Toast boxes -->\n <div class=\"n7-toast__box\" \n *ngFor=\"let box of data.toasts\"\n [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n \n <!-- Toast text -->\n <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n </div>\n\n <!-- Toast actions -->\n <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n <span\n class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n *ngIf=\"box.closeIcon\" \n (click)=\"onClick(box.closeIcon.payload)\">\n </span>\n <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n (click)=\"onClick(action.payload)\">\n {{action.text}}\n </button>\n </span>\n </span>\n </div>\n </div>\n </div>\n</div
|
|
1850
|
+
ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToastComponent, selector: "n7-toast", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-toast\">\n <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n <!-- Toast boxes -->\n <div class=\"n7-toast__box\" \n *ngFor=\"let box of data.toasts\"\n [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n\n <!-- Toast icon -->\n <div class=\"n7-toast__icon\" *ngIf=\"box.icon\">\n <span class=\"{{ box.icon }}\"></span>\n </div>\n \n <!-- Toast text -->\n <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n </div>\n\n <!-- Toast actions -->\n <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n <span\n class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n *ngIf=\"box.closeIcon\" \n (click)=\"onClick(box.closeIcon.payload)\">\n </span>\n <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n (click)=\"onClick(action.payload)\">\n {{action.text}}\n </button>\n </span>\n </span>\n </div>\n </div>\n </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1851
1851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToastComponent, decorators: [{
|
|
1852
1852
|
type: Component,
|
|
1853
|
-
args: [{ selector: 'n7-toast', template: "<div *ngIf=\"data\" class=\"n7-toast\">\n <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n <!-- Toast boxes -->\n <div class=\"n7-toast__box\" \n *ngFor=\"let box of data.toasts\"\n [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n \n <!-- Toast text -->\n <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n </div>\n\n <!-- Toast actions -->\n <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n <span\n class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n *ngIf=\"box.closeIcon\" \n (click)=\"onClick(box.closeIcon.payload)\">\n </span>\n <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n (click)=\"onClick(action.payload)\">\n {{action.text}}\n </button>\n </span>\n </span>\n </div>\n </div>\n </div>\n</div
|
|
1853
|
+
args: [{ selector: 'n7-toast', template: "<div *ngIf=\"data\" class=\"n7-toast\">\n <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n <!-- Toast boxes -->\n <div class=\"n7-toast__box\" \n *ngFor=\"let box of data.toasts\"\n [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n\n <!-- Toast icon -->\n <div class=\"n7-toast__icon\" *ngIf=\"box.icon\">\n <span class=\"{{ box.icon }}\"></span>\n </div>\n \n <!-- Toast text -->\n <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n </div>\n\n <!-- Toast actions -->\n <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n <span\n class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n *ngIf=\"box.closeIcon\" \n (click)=\"onClick(box.closeIcon.payload)\">\n </span>\n <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n (click)=\"onClick(action.payload)\">\n {{action.text}}\n </button>\n </span>\n </span>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
1854
1854
|
}], propDecorators: { data: [{
|
|
1855
1855
|
type: Input
|
|
1856
1856
|
}], emit: [{
|
|
@@ -8061,8 +8061,12 @@ const TOAST_MOCK = {
|
|
|
8061
8061
|
classes: 'is-warning',
|
|
8062
8062
|
title: 'Title',
|
|
8063
8063
|
text: 'Questo messaggio ha soltanto un titolo e del testo, è di tipo is-warning ed ha un tempo di 15 secondi',
|
|
8064
|
-
}
|
|
8065
|
-
|
|
8064
|
+
}, {
|
|
8065
|
+
classes: 'is-info',
|
|
8066
|
+
icon: 'n7-icon-bell',
|
|
8067
|
+
title: 'Toast & Icon',
|
|
8068
|
+
text: 'Questo messaggio contiene un\'icona di accompagnamento, è di tipo is-info ed ha un tempo di 15 secondi',
|
|
8069
|
+
}]
|
|
8066
8070
|
};
|
|
8067
8071
|
|
|
8068
8072
|
const TOOLTIP_CONTENT_MOCK = {
|