@net7/components 3.8.3 → 3.8.5

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.
@@ -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\" class=\"n7-footer {{data.classes || ''}}\">\n <div class=\"n7-footer__content\">\n <!-- Loop footer content columns -->\n <div\n class=\"n7-footer__column {{column.classes || ''}}\"\n *ngFor=\"let column of data.columns\"\n >\n <ng-container\n *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"\n ></ng-container>\n </div>\n </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n {{ column.title }}\n </h2>\n <p\n *ngIf=\"column.text\"\n class=\"n7-footer__column-text\"\n [innerHTML]=\"column.text\"\n ></p>\n <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n <ul class=\"n7-footer__column-nav-list\">\n <li\n *ngFor=\"let link of column.links\"\n class=\"n7-footer__column-nav-item {{link.classes || ''}}\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-footer__column-nav-link'\"\n [data]=\"link.anchor\"\n (clicked)=\"onClick($event)\"\n >\n {{ link.text }}\n </n7-anchor-wrapper>\n </li>\n </ul>\n </div>\n\n <div *ngIf=\"column.selects\" class=\"n7-footer__column-selects\">\n <n7-input-select\n *ngFor=\"let selectData of column.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n <n7-anchor-wrapper\n *ngFor=\"let image of column.images\"\n [classes]=\"image.classes || ''\"\n [data]=\"image.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img [src]=\"image.url\" [attr.alt]=\"image.alttext\" />\n </n7-anchor-wrapper>\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"] }] });
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\" class=\"n7-footer {{data.classes || ''}}\">\n <div class=\"n7-footer__content\">\n <!-- Loop footer content columns -->\n <div\n class=\"n7-footer__column {{column.classes || ''}}\"\n *ngFor=\"let column of data.columns\"\n >\n <ng-container\n *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"\n ></ng-container>\n </div>\n </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n {{ column.title }}\n </h2>\n <p\n *ngIf=\"column.text\"\n class=\"n7-footer__column-text\"\n [innerHTML]=\"column.text\"\n ></p>\n <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n <ul class=\"n7-footer__column-nav-list\">\n <li\n *ngFor=\"let link of column.links\"\n class=\"n7-footer__column-nav-item {{link.classes || ''}}\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-footer__column-nav-link'\"\n [data]=\"link.anchor\"\n (clicked)=\"onClick($event)\"\n >\n {{ link.text }}\n </n7-anchor-wrapper>\n </li>\n </ul>\n </div>\n\n <div *ngIf=\"column.selects\" class=\"n7-footer__column-selects\">\n <n7-input-select\n *ngFor=\"let selectData of column.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n <n7-anchor-wrapper\n *ngFor=\"let image of column.images\"\n [classes]=\"image.classes || ''\"\n [data]=\"image.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img [src]=\"image.url\" [attr.alt]=\"image.alttext\" />\n </n7-anchor-wrapper>\n </div>\n</ng-template>\n" }]
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: [{
@@ -1780,12 +1780,23 @@ class TagComponent {
1780
1780
  return;
1781
1781
  this.emit('click', payload);
1782
1782
  }
1783
+ getIcon(data) {
1784
+ if (!data.icon)
1785
+ return null;
1786
+ if (typeof data.icon === 'string') {
1787
+ return {
1788
+ id: data.icon,
1789
+ payload: data.payload,
1790
+ };
1791
+ }
1792
+ return data.icon;
1793
+ }
1783
1794
  }
1784
1795
  TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1785
- TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "n7-tag", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n {{ data.label }}\n </span>\n <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n {{ data.text }}\n </span>\n <span class=\"n7-tag__icon {{data.icon.id}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.icon.payload)\"></span>\n</span>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1796
+ TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "n7-tag", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n {{ data.label }}\n </span>\n <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n {{ data.text }}\n </span>\n <span class=\"n7-tag__icon {{icon.id}}\" *ngIf=\"getIcon(data) as icon\" (click)=\"onClick(icon.payload)\"></span>\n</span>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1786
1797
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
1787
1798
  type: Component,
1788
- args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n {{ data.label }}\n </span>\n <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n {{ data.text }}\n </span>\n <span class=\"n7-tag__icon {{data.icon.id}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.icon.payload)\"></span>\n</span>\n" }]
1799
+ args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n {{ data.label }}\n </span>\n <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n {{ data.text }}\n </span>\n <span class=\"n7-tag__icon {{icon.id}}\" *ngIf=\"getIcon(data) as icon\" (click)=\"onClick(icon.payload)\"></span>\n</span>\n" }]
1789
1800
  }], propDecorators: { data: [{
1790
1801
  type: Input
1791
1802
  }], emit: [{
@@ -7818,14 +7829,7 @@ const TABLE_MOCK = {
7818
7829
  const TAG_MOCK = {
7819
7830
  label: 'label: ',
7820
7831
  text: 'text',
7821
- icon: {
7822
- id: 'n7-icon-close',
7823
- payload: 'close'
7824
- },
7825
- preIcon: {
7826
- id: 'n7-icon-angle-left',
7827
- payload: 'preicon'
7828
- },
7832
+ icon: 'n7-icon-close',
7829
7833
  payload: 'tag-payload',
7830
7834
  classes: 'tag1-class',
7831
7835
  };