@net7/components 3.7.2 → 3.8.0

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.
Files changed (39) hide show
  1. package/esm2020/lib/components/avatar/avatar.mjs +34 -0
  2. package/esm2020/lib/components/avatar/avatar.mock.mjs +12 -0
  3. package/esm2020/lib/components/carousel/carousel.mjs +3 -3
  4. package/esm2020/lib/components/carousel/carousel.mock.mjs +2 -1
  5. package/esm2020/lib/components/data-widget/data-widget.mjs +3 -3
  6. package/esm2020/lib/components/data-widget/data-widget.mock.mjs +4 -1
  7. package/esm2020/lib/components/header/header.mjs +5 -4
  8. package/esm2020/lib/components/header/header.mock.mjs +11 -3
  9. package/esm2020/lib/components/inner-title/inner-title.mjs +1 -1
  10. package/esm2020/lib/components/nav/nav.mjs +8 -3
  11. package/esm2020/lib/components/nav/nav.mock.mjs +9 -2
  12. package/esm2020/lib/components/tag/tag.mjs +3 -3
  13. package/esm2020/lib/components/tag/tag.mock.mjs +9 -2
  14. package/esm2020/lib/dv-components-lib.module.mjs +5 -1
  15. package/esm2020/lib/shared-interfaces.mjs +1 -1
  16. package/esm2020/public-api.mjs +3 -1
  17. package/fesm2015/net7-components.mjs +90 -15
  18. package/fesm2015/net7-components.mjs.map +1 -1
  19. package/fesm2020/net7-components.mjs +90 -15
  20. package/fesm2020/net7-components.mjs.map +1 -1
  21. package/lib/components/avatar/avatar.d.ts +57 -0
  22. package/lib/components/avatar/avatar.mock.d.ts +2 -0
  23. package/lib/components/carousel/carousel.d.ts +5 -1
  24. package/lib/components/data-widget/data-widget.d.ts +18 -1
  25. package/lib/components/header/header.d.ts +16 -19
  26. package/lib/components/inner-title/inner-title.d.ts +12 -14
  27. package/lib/components/nav/nav.d.ts +7 -2
  28. package/lib/components/tag/tag.d.ts +6 -1
  29. package/lib/dv-components-lib.module.d.ts +43 -42
  30. package/lib/shared-interfaces.d.ts +12 -1
  31. package/package.json +1 -1
  32. package/public-api.d.ts +2 -0
  33. package/src/lib/styles/_imports.scss +1 -0
  34. package/src/lib/styles/components/_avatar.scss +41 -0
  35. package/src/lib/styles/components/_carousel.scss +12 -0
  36. package/src/lib/styles/components/_data-widget.scss +5 -0
  37. package/src/lib/styles/components/_header.scss +4 -0
  38. package/src/lib/styles/components/_nav.scss +4 -0
  39. package/src/lib/styles/components/_tag.scss +5 -2
@@ -73,6 +73,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
73
73
  type: Input
74
74
  }] } });
75
75
 
76
+ //---------------------------
77
+ class AvatarComponent {
78
+ onClick(payload) {
79
+ if (!this.emit)
80
+ return;
81
+ this.emit('click', payload);
82
+ }
83
+ onMouseEnter(payload) {
84
+ if (!this.emit)
85
+ return;
86
+ this.emit('mouseenter', payload);
87
+ }
88
+ onMouseLeave(payload) {
89
+ if (!this.emit)
90
+ return;
91
+ this.emit('mouseleave', payload);
92
+ }
93
+ }
94
+ AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
95
+ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AvatarComponent, selector: "n7-avatar", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div class=\"n7-avatar {{data.classes || ''}}\"\n *ngIf=\"data\"\n (click)=\"onClick(data.payload)\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n <div *ngIf=\"data.image\"\n [ngClass]=\"'n7-avatar__background'\"\n [ngStyle]=\"{\n 'background-image': 'url('+data.image.src+')',\n 'height': data.size,\n 'width': data.size\n }\">\n </div>\n <div *ngIf=\"!data.image\"\n [ngClass]=\"'n7-avatar__background'\"\n [ngStyle]=\"{\n 'background': data.color,\n 'height': data.size,\n 'width': data.size\n }\">\n <p class=\"n7-avatar__label\" [ngStyle]=\"{\n 'color': data.labelColor || 'black',\n 'font-size': 'calc(' + data.size + ' / 2)'\n \n }\">\n {{ data.label }}\n </p>\n </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
96
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
97
+ type: Component,
98
+ args: [{ selector: 'n7-avatar', template: "<div class=\"n7-avatar {{data.classes || ''}}\"\n *ngIf=\"data\"\n (click)=\"onClick(data.payload)\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n <div *ngIf=\"data.image\"\n [ngClass]=\"'n7-avatar__background'\"\n [ngStyle]=\"{\n 'background-image': 'url('+data.image.src+')',\n 'height': data.size,\n 'width': data.size\n }\">\n </div>\n <div *ngIf=\"!data.image\"\n [ngClass]=\"'n7-avatar__background'\"\n [ngStyle]=\"{\n 'background': data.color,\n 'height': data.size,\n 'width': data.size\n }\">\n <p class=\"n7-avatar__label\" [ngStyle]=\"{\n 'color': data.labelColor || 'black',\n 'font-size': 'calc(' + data.size + ' / 2)'\n \n }\">\n {{ data.label }}\n </p>\n </div>\n</div>\n" }]
99
+ }], propDecorators: { data: [{
100
+ type: Input
101
+ }], emit: [{
102
+ type: Input
103
+ }] } });
104
+
76
105
  //---------------------------
77
106
  class BreadcrumbsComponent {
78
107
  onClick(payload) {
@@ -521,10 +550,10 @@ class CarouselComponent {
521
550
  }
522
551
  }
523
552
  CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
524
- CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "n7-carousel", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<button *ngIf=\"data && data.classes === 'demo'\"\n class=\"n7-btn\"\n (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n class=\"n7-carousel {{ data.classes || '' }}\">\n <!-- Warning: Do not style div.latte-carousel -->\n <div id=\"{{data.containerId}}\"\n class=\"latte-carousel\">\n <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n let-slide=\"slide\"\n let-slideID=\"index\">\n <!-- Warning: Do not style div.latte-item -->\n <div class=\"latte-item\">\n <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n <div class=\"n7-carousel__slide-content-wrapper\">\n <div class=\"n7-carousel__slide-content\">\n <div class=\"n7-carousel__slide-content-left\">\n <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n </ng-container>\n </div>\n <div class=\"n7-carousel__slide-content-right\"\n *ngIf=\"slide.action\">\n <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n <button id=\"{{data.containerId}}-{{slideID}}\"\n class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n {{slide.action.text}}\n </button>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"slide.background\">\n <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n let-items=\"items\"\n let-slideID=\"slideID\">\n <ng-container *ngFor=\"let el of items; let itemID = index\">\n <h1 class=\"n7-carousel__slide-title\"\n *ngIf=\"el.title\">{{el.title}}</h1>\n <div class=\"n7-carousel__slide-text\"\n *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n <div class=\"n7-carousel__slide-metadata-wrapper\"\n *ngIf=\"el.metadata\">\n <ng-container *ngFor=\"let m of el.metadata\">\n <div class=\"n7-carousel__slide-metadata\">\n <span class=\"n7-carousel__slide-metadata-label\"\n *ngIf=\"m.key\">{{m.key}}</span>\n <span class=\"n7-carousel__slide-metadata-value\"\n *ngIf=\"m.value\">{{m.value}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n let-bg>\n <ng-container *ngIf=\"bg.video as v\">\n <video #video\n class=\"n7-carousel__slide-video\"\n [poster]=\"v.poster\"\n [height]=\"v.height\"\n [width]=\"v.width\"\n loop\n muted\n autoplay\n playsinline>\n <source #source\n class=\"lazy\"\n [attr.data-src]=\"v.url\"\n type=\"video/mp4\">\n </video>\n <div class=\"n7-carousel__slide-video-overlay\">\n\n </div>\n </ng-container>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
553
+ CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "n7-carousel", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<button *ngIf=\"data && data.classes === 'demo'\"\n class=\"n7-btn\"\n (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n class=\"n7-carousel {{ data.classes || '' }}\">\n <!-- Warning: Do not style div.latte-carousel -->\n <div id=\"{{data.containerId}}\"\n class=\"latte-carousel\">\n <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n let-slide=\"slide\"\n let-slideID=\"index\">\n <!-- Warning: Do not style div.latte-item -->\n <div class=\"latte-item\">\n <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n <div class=\"n7-carousel__slide-content-wrapper\">\n <div class=\"n7-carousel__slide-content\">\n <div class=\"n7-carousel__slide-content-left\">\n <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n </ng-container>\n </div>\n <div class=\"n7-carousel__slide-content-right\"\n *ngIf=\"slide.action\">\n <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n <button id=\"{{data.containerId}}-{{slideID}}\"\n class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n {{slide.action.text}}\n </button>\n </n7-anchor-wrapper>\n <ng-container *ngTemplateOutlet=\"sideImage; context:{items: slide.items, slideID: slideID}\">\n </ng-container>\n </div>\n\n </div>\n </div>\n <ng-container *ngIf=\"slide.background\">\n <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n let-items=\"items\"\n let-slideID=\"slideID\">\n <ng-container *ngFor=\"let el of items; let itemID = index\">\n <!-- title -->\n <h1 class=\"n7-carousel__slide-title\"\n *ngIf=\"el.title\">{{el.title}}</h1>\n <!-- text -->\n <div class=\"n7-carousel__slide-text\"\n *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n <!-- image -->\n <ng-container *ngIf=\"el.image as img\">\n <img class=\"n7-carousel__slide-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n </ng-container>\n <!-- metadata -->\n <div class=\"n7-carousel__slide-metadata-wrapper\"\n *ngIf=\"el.metadata\">\n <ng-container *ngFor=\"let m of el.metadata\">\n <div class=\"n7-carousel__slide-metadata\">\n <span class=\"n7-carousel__slide-metadata-label\"\n *ngIf=\"m.key\">{{m.key}}</span>\n <span class=\"n7-carousel__slide-metadata-value\"\n *ngIf=\"m.value\">{{m.value}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n\n<!-- ===== SIDE IMAGE ===== -->\n<ng-template #sideImage\n let-items=\"items\"\n let-slideID=\"slideID\">\n <ng-container *ngFor=\"let el of items; let itemID = index\"> \n <!-- image -->\n <ng-container *ngIf=\"el.image as img\">\n <img class=\"n7-carousel__side-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n let-bg>\n <ng-container *ngIf=\"bg.video as v\">\n <video #video\n class=\"n7-carousel__slide-video\"\n [poster]=\"v.poster\"\n [height]=\"v.height\"\n [width]=\"v.width\"\n loop\n muted\n autoplay\n playsinline>\n <source #source\n class=\"lazy\"\n [attr.data-src]=\"v.url\"\n type=\"video/mp4\">\n </video>\n <div class=\"n7-carousel__slide-video-overlay\">\n\n </div>\n </ng-container>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
525
554
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
526
555
  type: Component,
527
- args: [{ selector: 'n7-carousel', template: "<button *ngIf=\"data && data.classes === 'demo'\"\n class=\"n7-btn\"\n (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n class=\"n7-carousel {{ data.classes || '' }}\">\n <!-- Warning: Do not style div.latte-carousel -->\n <div id=\"{{data.containerId}}\"\n class=\"latte-carousel\">\n <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n let-slide=\"slide\"\n let-slideID=\"index\">\n <!-- Warning: Do not style div.latte-item -->\n <div class=\"latte-item\">\n <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n <div class=\"n7-carousel__slide-content-wrapper\">\n <div class=\"n7-carousel__slide-content\">\n <div class=\"n7-carousel__slide-content-left\">\n <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n </ng-container>\n </div>\n <div class=\"n7-carousel__slide-content-right\"\n *ngIf=\"slide.action\">\n <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n <button id=\"{{data.containerId}}-{{slideID}}\"\n class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n {{slide.action.text}}\n </button>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"slide.background\">\n <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n let-items=\"items\"\n let-slideID=\"slideID\">\n <ng-container *ngFor=\"let el of items; let itemID = index\">\n <h1 class=\"n7-carousel__slide-title\"\n *ngIf=\"el.title\">{{el.title}}</h1>\n <div class=\"n7-carousel__slide-text\"\n *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n <div class=\"n7-carousel__slide-metadata-wrapper\"\n *ngIf=\"el.metadata\">\n <ng-container *ngFor=\"let m of el.metadata\">\n <div class=\"n7-carousel__slide-metadata\">\n <span class=\"n7-carousel__slide-metadata-label\"\n *ngIf=\"m.key\">{{m.key}}</span>\n <span class=\"n7-carousel__slide-metadata-value\"\n *ngIf=\"m.value\">{{m.value}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n let-bg>\n <ng-container *ngIf=\"bg.video as v\">\n <video #video\n class=\"n7-carousel__slide-video\"\n [poster]=\"v.poster\"\n [height]=\"v.height\"\n [width]=\"v.width\"\n loop\n muted\n autoplay\n playsinline>\n <source #source\n class=\"lazy\"\n [attr.data-src]=\"v.url\"\n type=\"video/mp4\">\n </video>\n <div class=\"n7-carousel__slide-video-overlay\">\n\n </div>\n </ng-container>\n</ng-template>\n" }]
556
+ args: [{ selector: 'n7-carousel', template: "<button *ngIf=\"data && data.classes === 'demo'\"\n class=\"n7-btn\"\n (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n class=\"n7-carousel {{ data.classes || '' }}\">\n <!-- Warning: Do not style div.latte-carousel -->\n <div id=\"{{data.containerId}}\"\n class=\"latte-carousel\">\n <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n let-slide=\"slide\"\n let-slideID=\"index\">\n <!-- Warning: Do not style div.latte-item -->\n <div class=\"latte-item\">\n <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n <div class=\"n7-carousel__slide-content-wrapper\">\n <div class=\"n7-carousel__slide-content\">\n <div class=\"n7-carousel__slide-content-left\">\n <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n </ng-container>\n </div>\n <div class=\"n7-carousel__slide-content-right\"\n *ngIf=\"slide.action\">\n <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n <button id=\"{{data.containerId}}-{{slideID}}\"\n class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n {{slide.action.text}}\n </button>\n </n7-anchor-wrapper>\n <ng-container *ngTemplateOutlet=\"sideImage; context:{items: slide.items, slideID: slideID}\">\n </ng-container>\n </div>\n\n </div>\n </div>\n <ng-container *ngIf=\"slide.background\">\n <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n let-items=\"items\"\n let-slideID=\"slideID\">\n <ng-container *ngFor=\"let el of items; let itemID = index\">\n <!-- title -->\n <h1 class=\"n7-carousel__slide-title\"\n *ngIf=\"el.title\">{{el.title}}</h1>\n <!-- text -->\n <div class=\"n7-carousel__slide-text\"\n *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n <!-- image -->\n <ng-container *ngIf=\"el.image as img\">\n <img class=\"n7-carousel__slide-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n </ng-container>\n <!-- metadata -->\n <div class=\"n7-carousel__slide-metadata-wrapper\"\n *ngIf=\"el.metadata\">\n <ng-container *ngFor=\"let m of el.metadata\">\n <div class=\"n7-carousel__slide-metadata\">\n <span class=\"n7-carousel__slide-metadata-label\"\n *ngIf=\"m.key\">{{m.key}}</span>\n <span class=\"n7-carousel__slide-metadata-value\"\n *ngIf=\"m.value\">{{m.value}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n\n<!-- ===== SIDE IMAGE ===== -->\n<ng-template #sideImage\n let-items=\"items\"\n let-slideID=\"slideID\">\n <ng-container *ngFor=\"let el of items; let itemID = index\"> \n <!-- image -->\n <ng-container *ngIf=\"el.image as img\">\n <img class=\"n7-carousel__side-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n let-bg>\n <ng-container *ngIf=\"bg.video as v\">\n <video #video\n class=\"n7-carousel__slide-video\"\n [poster]=\"v.poster\"\n [height]=\"v.height\"\n [width]=\"v.width\"\n loop\n muted\n autoplay\n playsinline>\n <source #source\n class=\"lazy\"\n [attr.data-src]=\"v.url\"\n type=\"video/mp4\">\n </video>\n <div class=\"n7-carousel__slide-video-overlay\">\n\n </div>\n </ng-container>\n</ng-template>\n" }]
528
557
  }], propDecorators: { data: [{
529
558
  type: Input
530
559
  }], emit: [{
@@ -589,10 +618,10 @@ class DataWidgetComponent {
589
618
  }
590
619
  }
591
620
  DataWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
592
- DataWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DataWidgetComponent, selector: "n7-data-widget", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n <div class=\"n7-data-widget__main\">\n <span *ngIf=\"data.icon\"\n class=\"n7-data-widget__main-icon {{data.icon}}\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n </span>\n <h2 class=\"n7-data-widget__main-title\"\n [innerHTML]=\"data.text\">\n </h2>\n </div>\n \n <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n class=\"n7-data-widget__sub\">\n <p *ngIf=\"data.subtitle.text\"\n class=\"n7-data-widget__sub-title\"\n [innerHTML]=\"data.subtitle.text\">\n </p>\n <span *ngIf=\"data.subtitle.icon || data.subtitle.value\"\n class=\"n7-data-widget__sub-info\"\n (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n <span *ngIf=\"data.subtitle.icon\"\n class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n </span>\n <span *ngIf=\"data.subtitle.value\"\n class=\"n7-data-widget__sub-info-label\"\n [innerHTML]=\"data.subtitle.value\">\n </span>\n </span>\n </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
621
+ DataWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DataWidgetComponent, selector: "n7-data-widget", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n <div class=\"n7-data-widget__main\">\n <span *ngIf=\"data.icon\"\n class=\"n7-data-widget__main-icon {{data.icon}}\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n </span>\n <img class=\"n7-data-widget__second-icon\" *ngIf=\"data.imgIcon\"\n [src]=\"data.imgIcon.path\"\n [alt]=\"data.imgIcon.alt\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n <h2 class=\"n7-data-widget__main-title\"\n [innerHTML]=\"data.text\">\n </h2>\n </div>\n \n <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n class=\"n7-data-widget__sub\">\n <p *ngIf=\"data.subtitle.text\"\n class=\"n7-data-widget__sub-title\"\n [innerHTML]=\"data.subtitle.text\">\n </p>\n <span *ngIf=\"data.subtitle.icon || data.subtitle.value || data.subtitle.imgIcon\"\n class=\"n7-data-widget__sub-info\"\n (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n <img *ngIf=\"data.subtitle.imgIcon\" \n [src]=\"data.subtitle.imgIcon.path\"\n [alt]=\"data.subtitle.imgIcon.alt\">\n <span *ngIf=\"data.subtitle.icon\"\n class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n </span>\n <span *ngIf=\"data.subtitle.value\"\n class=\"n7-data-widget__sub-info-label\"\n [innerHTML]=\"data.subtitle.value\">\n </span>\n </span>\n </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
593
622
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataWidgetComponent, decorators: [{
594
623
  type: Component,
595
- args: [{ selector: 'n7-data-widget', template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n <div class=\"n7-data-widget__main\">\n <span *ngIf=\"data.icon\"\n class=\"n7-data-widget__main-icon {{data.icon}}\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n </span>\n <h2 class=\"n7-data-widget__main-title\"\n [innerHTML]=\"data.text\">\n </h2>\n </div>\n \n <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n class=\"n7-data-widget__sub\">\n <p *ngIf=\"data.subtitle.text\"\n class=\"n7-data-widget__sub-title\"\n [innerHTML]=\"data.subtitle.text\">\n </p>\n <span *ngIf=\"data.subtitle.icon || data.subtitle.value\"\n class=\"n7-data-widget__sub-info\"\n (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n <span *ngIf=\"data.subtitle.icon\"\n class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n </span>\n <span *ngIf=\"data.subtitle.value\"\n class=\"n7-data-widget__sub-info-label\"\n [innerHTML]=\"data.subtitle.value\">\n </span>\n </span>\n </div>\n</div>\n" }]
624
+ args: [{ selector: 'n7-data-widget', template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n <div class=\"n7-data-widget__main\">\n <span *ngIf=\"data.icon\"\n class=\"n7-data-widget__main-icon {{data.icon}}\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n </span>\n <img class=\"n7-data-widget__second-icon\" *ngIf=\"data.imgIcon\"\n [src]=\"data.imgIcon.path\"\n [alt]=\"data.imgIcon.alt\"\n (mouseenter)=\"onMouseEnter(data.payload)\"\n (mouseleave)=\"onMouseLeave(data.payload)\">\n <h2 class=\"n7-data-widget__main-title\"\n [innerHTML]=\"data.text\">\n </h2>\n </div>\n \n <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n class=\"n7-data-widget__sub\">\n <p *ngIf=\"data.subtitle.text\"\n class=\"n7-data-widget__sub-title\"\n [innerHTML]=\"data.subtitle.text\">\n </p>\n <span *ngIf=\"data.subtitle.icon || data.subtitle.value || data.subtitle.imgIcon\"\n class=\"n7-data-widget__sub-info\"\n (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n <img *ngIf=\"data.subtitle.imgIcon\" \n [src]=\"data.subtitle.imgIcon.path\"\n [alt]=\"data.subtitle.imgIcon.alt\">\n <span *ngIf=\"data.subtitle.icon\"\n class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n </span>\n <span *ngIf=\"data.subtitle.value\"\n class=\"n7-data-widget__sub-info-label\"\n [innerHTML]=\"data.subtitle.value\">\n </span>\n </span>\n </div>\n</div>\n" }]
596
625
  }], propDecorators: { data: [{
597
626
  type: Input
598
627
  }], emit: [{
@@ -796,10 +825,10 @@ class HeaderComponent {
796
825
  }
797
826
  }
798
827
  HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
799
- HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n <div class=\"n7-header__content\">\n <!-- Logo and title -->\n <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n <n7-anchor-wrapper\n [classes]=\"'n7-header__logo-link'\"\n [data]=\"data.logo.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n class=\"n7-header__logo\"\n *ngIf=\"data.logo.image\"\n [src]=\"data.logo.image\"\n alt=\"{{ data.logo.title }}\"\n />\n <div class=\"n7-header__title-subtitle\">\n <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n {{ data.logo.subtitle }}\n </h2>\n </div>\n </n7-anchor-wrapper>\n </div>\n\n <!-- Main menu -->\n <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n <div class=\"n7-header__nav-content\">\n <ul class=\"n7-header__nav-list\">\n <li\n class=\"n7-header__nav-item {{item.classes || ''}}\"\n *ngFor=\"let item of data.nav.items\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__nav-link'\"\n [data]=\"item.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__nav-icon {{item.icon}}\"\n *ngIf=\"item.icon\"\n ></span>\n <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </n7-anchor-wrapper>\n <!-- Sublevel -->\n <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n <li\n class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n *ngFor=\"let subitem of item.subnav\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__subnav-link'\"\n [data]=\"subitem.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__subnav-icon {{subitem.icon}}\"\n *ngIf=\"subitem.icon\"\n ></span>\n <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n {{ subitem.text }}\n </span>\n </n7-anchor-wrapper>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n </nav>\n\n <!-- Mobile menu toggle -->\n <div class=\"n7-header__mobile-menu-toggle\">\n <span\n class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n (click)=\"onClick(data.menuToggle.open.payload)\"\n ></span>\n </div>\n\n <!-- Mobile menu close -->\n <span\n class=\"n7-header__mobile-menu-close n7-icon-close\"\n (click)=\"onClick(data.menuToggle.close.payload)\"\n ></span>\n\n <!-- Tools: search, notifications, use profile or login/signup -->\n <div class=\"n7-header__tools\">\n <div\n class=\"n7-header__search {{data.search.classes || ''}}\"\n *ngIf=\"data.search\"\n >\n <input\n class=\"n7-header__search-input\"\n type=\"search\"\n name=\"search\"\n placeholder=\"{{ data.search.hint || ''}}\"\n (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n />\n <button\n class=\"n7-header__search-btn\"\n type=\"submit\"\n (click)=\"onClick(data.search.payload)\"\n >\n <span class=\"n7-header__search-btn-label\"> Search </span>\n </button>\n </div>\n\n <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n <n7-anchor-wrapper\n *ngFor=\"let action of data.actions\"\n [classes]=\"'n7-header__action' + (action.classes || '')\"\n [data]=\"action.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n <span\n *ngIf=\"action.badge\"\n class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n >\n {{ action.badge.text }}\n </span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n <n7-anchor-wrapper\n *ngFor=\"let button of data.buttons\"\n [classes]=\"button.classes\"\n [data]=\"button.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n <n7-input-select\n *ngFor=\"let selectData of data.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div\n class=\"n7-header__user {{data.user.classes || ''}}\"\n *ngIf=\"data.user\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__user-content'\"\n [data]=\"data.user.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n *ngIf=\"data.user.img\"\n class=\"n7-header__user-img\"\n [src]=\"data.user.img\"\n />\n <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n <span class=\"n7-header__user-name-label\">\n {{ data.user.name }}\n </span>\n </p>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n</header>\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"] }] });
828
+ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n <div class=\"n7-header__content\">\n <!-- Logo and title -->\n <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n <n7-anchor-wrapper\n [classes]=\"'n7-header__logo-link'\"\n [data]=\"data.logo.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n class=\"n7-header__logo\"\n *ngIf=\"data.logo.image\"\n [src]=\"data.logo.image\"\n alt=\"{{ data.logo.title }}\"\n />\n <div class=\"n7-header__title-subtitle\">\n <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n {{ data.logo.subtitle }}\n </h2>\n </div>\n </n7-anchor-wrapper>\n </div>\n\n <!-- Main menu -->\n <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n <div class=\"n7-header__nav-content\">\n <ul class=\"n7-header__nav-list\">\n <li\n class=\"n7-header__nav-item {{item.classes || ''}}\"\n *ngFor=\"let item of data.nav.items\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__nav-link'\"\n [data]=\"item.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__nav-icon {{item.icon}}\"\n *ngIf=\"item.icon\"\n ></span>\n <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </n7-anchor-wrapper>\n <!-- Sublevel -->\n <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n <li\n class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n *ngFor=\"let subitem of item.subnav\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__subnav-link'\"\n [data]=\"subitem.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__subnav-icon {{subitem.icon}}\"\n *ngIf=\"subitem.icon\"\n ></span>\n <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n {{ subitem.text }}\n </span>\n </n7-anchor-wrapper>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n </nav>\n\n <!-- Mobile menu toggle -->\n <div class=\"n7-header__mobile-menu-toggle\">\n <span\n class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n (click)=\"onClick(data.menuToggle.open.payload)\"\n ></span>\n </div>\n\n <!-- Mobile menu close -->\n <span\n class=\"n7-header__mobile-menu-close n7-icon-close\"\n (click)=\"onClick(data.menuToggle.close.payload)\"\n ></span>\n\n <!-- Tools: search, notifications, use profile or login/signup -->\n <div class=\"n7-header__tools\">\n <div\n class=\"n7-header__search {{data.search.classes || ''}}\"\n *ngIf=\"data.search\"\n >\n <input\n class=\"n7-header__search-input\"\n type=\"search\"\n name=\"search\"\n placeholder=\"{{ data.search.hint || ''}}\"\n (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n />\n <button\n class=\"n7-header__search-btn\"\n type=\"submit\"\n (click)=\"onClick(data.search.payload)\"\n >\n <span class=\"n7-header__search-btn-label\"> Search </span>\n </button>\n </div>\n\n <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n <n7-anchor-wrapper\n *ngFor=\"let action of data.actions\"\n [classes]=\"'n7-header__action' + (action.classes || '')\"\n [data]=\"action.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n <span\n *ngIf=\"action.badge\"\n class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n >\n {{ action.badge.text }}\n </span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n <n7-anchor-wrapper\n *ngFor=\"let button of data.buttons\"\n [classes]=\"button.classes\"\n [data]=\"button.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n <n7-input-select\n *ngFor=\"let selectData of data.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div\n class=\"n7-header__user {{data.user.classes || ''}}\"\n *ngIf=\"data.user\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__user-content'\"\n [data]=\"data.user.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <n7-avatar [data]=\"data.user\" [emit]=\"this.emit\"></n7-avatar>\n <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n <span class=\"n7-header__user-name-label\">\n {{ data.user.name }}\n </span>\n </p>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n</header>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }, { type: AvatarComponent, selector: "n7-avatar", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
800
829
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, decorators: [{
801
830
  type: Component,
802
- args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n <div class=\"n7-header__content\">\n <!-- Logo and title -->\n <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n <n7-anchor-wrapper\n [classes]=\"'n7-header__logo-link'\"\n [data]=\"data.logo.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n class=\"n7-header__logo\"\n *ngIf=\"data.logo.image\"\n [src]=\"data.logo.image\"\n alt=\"{{ data.logo.title }}\"\n />\n <div class=\"n7-header__title-subtitle\">\n <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n {{ data.logo.subtitle }}\n </h2>\n </div>\n </n7-anchor-wrapper>\n </div>\n\n <!-- Main menu -->\n <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n <div class=\"n7-header__nav-content\">\n <ul class=\"n7-header__nav-list\">\n <li\n class=\"n7-header__nav-item {{item.classes || ''}}\"\n *ngFor=\"let item of data.nav.items\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__nav-link'\"\n [data]=\"item.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__nav-icon {{item.icon}}\"\n *ngIf=\"item.icon\"\n ></span>\n <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </n7-anchor-wrapper>\n <!-- Sublevel -->\n <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n <li\n class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n *ngFor=\"let subitem of item.subnav\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__subnav-link'\"\n [data]=\"subitem.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__subnav-icon {{subitem.icon}}\"\n *ngIf=\"subitem.icon\"\n ></span>\n <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n {{ subitem.text }}\n </span>\n </n7-anchor-wrapper>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n </nav>\n\n <!-- Mobile menu toggle -->\n <div class=\"n7-header__mobile-menu-toggle\">\n <span\n class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n (click)=\"onClick(data.menuToggle.open.payload)\"\n ></span>\n </div>\n\n <!-- Mobile menu close -->\n <span\n class=\"n7-header__mobile-menu-close n7-icon-close\"\n (click)=\"onClick(data.menuToggle.close.payload)\"\n ></span>\n\n <!-- Tools: search, notifications, use profile or login/signup -->\n <div class=\"n7-header__tools\">\n <div\n class=\"n7-header__search {{data.search.classes || ''}}\"\n *ngIf=\"data.search\"\n >\n <input\n class=\"n7-header__search-input\"\n type=\"search\"\n name=\"search\"\n placeholder=\"{{ data.search.hint || ''}}\"\n (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n />\n <button\n class=\"n7-header__search-btn\"\n type=\"submit\"\n (click)=\"onClick(data.search.payload)\"\n >\n <span class=\"n7-header__search-btn-label\"> Search </span>\n </button>\n </div>\n\n <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n <n7-anchor-wrapper\n *ngFor=\"let action of data.actions\"\n [classes]=\"'n7-header__action' + (action.classes || '')\"\n [data]=\"action.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n <span\n *ngIf=\"action.badge\"\n class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n >\n {{ action.badge.text }}\n </span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n <n7-anchor-wrapper\n *ngFor=\"let button of data.buttons\"\n [classes]=\"button.classes\"\n [data]=\"button.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n <n7-input-select\n *ngFor=\"let selectData of data.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div\n class=\"n7-header__user {{data.user.classes || ''}}\"\n *ngIf=\"data.user\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__user-content'\"\n [data]=\"data.user.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n *ngIf=\"data.user.img\"\n class=\"n7-header__user-img\"\n [src]=\"data.user.img\"\n />\n <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n <span class=\"n7-header__user-name-label\">\n {{ data.user.name }}\n </span>\n </p>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n</header>\n" }]
831
+ args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n <div class=\"n7-header__content\">\n <!-- Logo and title -->\n <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n <n7-anchor-wrapper\n [classes]=\"'n7-header__logo-link'\"\n [data]=\"data.logo.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n class=\"n7-header__logo\"\n *ngIf=\"data.logo.image\"\n [src]=\"data.logo.image\"\n alt=\"{{ data.logo.title }}\"\n />\n <div class=\"n7-header__title-subtitle\">\n <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n {{ data.logo.subtitle }}\n </h2>\n </div>\n </n7-anchor-wrapper>\n </div>\n\n <!-- Main menu -->\n <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n <div class=\"n7-header__nav-content\">\n <ul class=\"n7-header__nav-list\">\n <li\n class=\"n7-header__nav-item {{item.classes || ''}}\"\n *ngFor=\"let item of data.nav.items\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__nav-link'\"\n [data]=\"item.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__nav-icon {{item.icon}}\"\n *ngIf=\"item.icon\"\n ></span>\n <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </n7-anchor-wrapper>\n <!-- Sublevel -->\n <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n <li\n class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n *ngFor=\"let subitem of item.subnav\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__subnav-link'\"\n [data]=\"subitem.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__subnav-icon {{subitem.icon}}\"\n *ngIf=\"subitem.icon\"\n ></span>\n <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n {{ subitem.text }}\n </span>\n </n7-anchor-wrapper>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n </nav>\n\n <!-- Mobile menu toggle -->\n <div class=\"n7-header__mobile-menu-toggle\">\n <span\n class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n (click)=\"onClick(data.menuToggle.open.payload)\"\n ></span>\n </div>\n\n <!-- Mobile menu close -->\n <span\n class=\"n7-header__mobile-menu-close n7-icon-close\"\n (click)=\"onClick(data.menuToggle.close.payload)\"\n ></span>\n\n <!-- Tools: search, notifications, use profile or login/signup -->\n <div class=\"n7-header__tools\">\n <div\n class=\"n7-header__search {{data.search.classes || ''}}\"\n *ngIf=\"data.search\"\n >\n <input\n class=\"n7-header__search-input\"\n type=\"search\"\n name=\"search\"\n placeholder=\"{{ data.search.hint || ''}}\"\n (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n />\n <button\n class=\"n7-header__search-btn\"\n type=\"submit\"\n (click)=\"onClick(data.search.payload)\"\n >\n <span class=\"n7-header__search-btn-label\"> Search </span>\n </button>\n </div>\n\n <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n <n7-anchor-wrapper\n *ngFor=\"let action of data.actions\"\n [classes]=\"'n7-header__action' + (action.classes || '')\"\n [data]=\"action.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n <span\n *ngIf=\"action.badge\"\n class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n >\n {{ action.badge.text }}\n </span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n <n7-anchor-wrapper\n *ngFor=\"let button of data.buttons\"\n [classes]=\"button.classes\"\n [data]=\"button.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n <n7-input-select\n *ngFor=\"let selectData of data.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div\n class=\"n7-header__user {{data.user.classes || ''}}\"\n *ngIf=\"data.user\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__user-content'\"\n [data]=\"data.user.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <n7-avatar [data]=\"data.user\" [emit]=\"this.emit\"></n7-avatar>\n <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n <span class=\"n7-header__user-name-label\">\n {{ data.user.name }}\n </span>\n </p>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n</header>\n" }]
803
832
  }], propDecorators: { data: [{
804
833
  type: Input
805
834
  }], emit: [{
@@ -1488,12 +1517,17 @@ class NavComponent {
1488
1517
  return;
1489
1518
  this.emit('click', payload);
1490
1519
  }
1520
+ onMouseEnter(payload) {
1521
+ if (!this.emit)
1522
+ return;
1523
+ this.emit('mouseenter', payload);
1524
+ }
1491
1525
  }
1492
1526
  NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1493
- NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavComponent, selector: "n7-nav", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<nav class=\"n7-nav {{data.classes || ''}}\" *ngIf=\"data\">\n <ul class=\"n7-nav__list\">\n <n7-anchor-wrapper \n *ngFor=\"let item of data.items\"\n [data]=\"item.anchor\" \n [classes]=\"'n7-nav__link'\" \n (clicked)=\"onClick($event)\">\n <li class=\"n7-nav__item {{ item.classes || '' }}\">\n <img class=\"n7-nav__image\" *ngIf=\"item.image\" src=\"{{ item.image }}\">\n <span class=\"n7-nav__icon {{ item.icon }}\" *ngIf=\"item.icon\"></span>\n <span class=\"n7-nav__label\">{{ item.text }}</span>\n </li>\n </n7-anchor-wrapper>\n </ul>\n</nav>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1527
+ NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavComponent, selector: "n7-nav", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<nav class=\"n7-nav {{data.classes || ''}}\"\n *ngIf=\"data\">\n <ul class=\"n7-nav__list\">\n <n7-anchor-wrapper *ngFor=\"let item of data.items\"\n [data]=\"item.anchor\"\n [classes]=\"'n7-nav__link'\"\n (clicked)=\"onClick($event)\">\n <li class=\"n7-nav__item {{ item.classes || '' }}\">\n <!-- image -->\n <img class=\"n7-nav__image\"\n *ngIf=\"item.image\"\n src=\"{{ item.image }}\">\n <!-- primary icon -->\n <span class=\"n7-nav__icon {{ item.icon.id }}\"\n *ngIf=\"item.icon\"\n (mouseenter)=\"onMouseEnter(item.icon.payload)\"></span>\n <!-- element label -->\n <span class=\"n7-nav__label\">{{ item.text }}</span>\n <!-- secondary icon -->\n <span class=\"n7-nav__icon-secondary {{ item.iconSecondary.id }}\"\n *ngIf=\"item.iconSecondary\"\n (mouseenter)=\"onMouseEnter(item.iconSecondary.payload)\"></span>\n </li>\n </n7-anchor-wrapper>\n </ul>\n</nav>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1494
1528
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavComponent, decorators: [{
1495
1529
  type: Component,
1496
- args: [{ selector: 'n7-nav', template: "<nav class=\"n7-nav {{data.classes || ''}}\" *ngIf=\"data\">\n <ul class=\"n7-nav__list\">\n <n7-anchor-wrapper \n *ngFor=\"let item of data.items\"\n [data]=\"item.anchor\" \n [classes]=\"'n7-nav__link'\" \n (clicked)=\"onClick($event)\">\n <li class=\"n7-nav__item {{ item.classes || '' }}\">\n <img class=\"n7-nav__image\" *ngIf=\"item.image\" src=\"{{ item.image }}\">\n <span class=\"n7-nav__icon {{ item.icon }}\" *ngIf=\"item.icon\"></span>\n <span class=\"n7-nav__label\">{{ item.text }}</span>\n </li>\n </n7-anchor-wrapper>\n </ul>\n</nav>" }]
1530
+ args: [{ selector: 'n7-nav', template: "<nav class=\"n7-nav {{data.classes || ''}}\"\n *ngIf=\"data\">\n <ul class=\"n7-nav__list\">\n <n7-anchor-wrapper *ngFor=\"let item of data.items\"\n [data]=\"item.anchor\"\n [classes]=\"'n7-nav__link'\"\n (clicked)=\"onClick($event)\">\n <li class=\"n7-nav__item {{ item.classes || '' }}\">\n <!-- image -->\n <img class=\"n7-nav__image\"\n *ngIf=\"item.image\"\n src=\"{{ item.image }}\">\n <!-- primary icon -->\n <span class=\"n7-nav__icon {{ item.icon.id }}\"\n *ngIf=\"item.icon\"\n (mouseenter)=\"onMouseEnter(item.icon.payload)\"></span>\n <!-- element label -->\n <span class=\"n7-nav__label\">{{ item.text }}</span>\n <!-- secondary icon -->\n <span class=\"n7-nav__icon-secondary {{ item.iconSecondary.id }}\"\n *ngIf=\"item.iconSecondary\"\n (mouseenter)=\"onMouseEnter(item.iconSecondary.payload)\"></span>\n </li>\n </n7-anchor-wrapper>\n </ul>\n</nav>\n" }]
1497
1531
  }], propDecorators: { data: [{
1498
1532
  type: Input
1499
1533
  }], emit: [{
@@ -1712,10 +1746,10 @@ class TagComponent {
1712
1746
  }
1713
1747
  }
1714
1748
  TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1715
- 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__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}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.payload)\"></span>\n</span>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1749
+ 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"] }] });
1716
1750
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
1717
1751
  type: Component,
1718
- args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\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}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.payload)\"></span>\n</span>" }]
1752
+ 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" }]
1719
1753
  }], propDecorators: { data: [{
1720
1754
  type: Input
1721
1755
  }], emit: [{
@@ -1860,6 +1894,7 @@ const COMPONENTS = [
1860
1894
  AdvancedAutocompleteComponent,
1861
1895
  AlertComponent,
1862
1896
  AnchorWrapperComponent,
1897
+ AvatarComponent,
1863
1898
  BreadcrumbsComponent,
1864
1899
  BubbleChartComponent,
1865
1900
  CarouselComponent,
@@ -1906,6 +1941,7 @@ DvComponentsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
1906
1941
  DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, declarations: [AdvancedAutocompleteComponent,
1907
1942
  AlertComponent,
1908
1943
  AnchorWrapperComponent,
1944
+ AvatarComponent,
1909
1945
  BreadcrumbsComponent,
1910
1946
  BubbleChartComponent,
1911
1947
  CarouselComponent,
@@ -1947,6 +1983,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
1947
1983
  ProgressLineComponent], imports: [CommonModule, RouterModule], exports: [AdvancedAutocompleteComponent,
1948
1984
  AlertComponent,
1949
1985
  AnchorWrapperComponent,
1986
+ AvatarComponent,
1950
1987
  BreadcrumbsComponent,
1951
1988
  BubbleChartComponent,
1952
1989
  CarouselComponent,
@@ -2112,6 +2149,18 @@ const ALERT_MOCK = {
2112
2149
  classes: 'is-warning'
2113
2150
  };
2114
2151
 
2152
+ const AVATAR_MOCK = {
2153
+ // image: {
2154
+ // src: 'https://i.pravatar.cc/300',
2155
+ // alt: '',
2156
+ // },
2157
+ color: 'coral',
2158
+ labelColor: 'white',
2159
+ label: 'A',
2160
+ payload: 'avatar',
2161
+ size: '150px',
2162
+ };
2163
+
2115
2164
  const BREADCRUMBS_MOCK = {
2116
2165
  items: [
2117
2166
  {
@@ -6189,6 +6238,7 @@ const CAROUSEL_MOCK = {
6189
6238
  { text: 'Cum sociis natoque penatibus<br /> et magnis dis parturient montes, nascetur ridiculus mus.' },
6190
6239
  { title: 'Lorem Donec sed odio dui.' },
6191
6240
  { text: '<i>Morbi leo risus, porta ac consectetur ac</i>, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.' },
6241
+ { image: { src: 'assets/images/heart.svg', classes: 'some test classes' } },
6192
6242
  {
6193
6243
  metadata: [
6194
6244
  { key: 'Metadato 1', value: 'Valore 1' },
@@ -6424,6 +6474,9 @@ const CONTENT_PLACEHOLDER_MOCK = {
6424
6474
 
6425
6475
  const DATA_WIDGET_MOCK = {
6426
6476
  icon: 'n7-icon-earth',
6477
+ imgIcon: {
6478
+ path: 'assets/images/heart.svg'
6479
+ },
6427
6480
  text: '497 <em>Dipendenti</em>',
6428
6481
  subtitle: {
6429
6482
  text: 'In Crescita',
@@ -6722,9 +6775,17 @@ const HEADER_MOCK = {
6722
6775
  }
6723
6776
  ],
6724
6777
  user: {
6725
- img: 'https://placeimg.com/150/150/any/people',
6778
+ // image: {
6779
+ // src: 'https://placeimg.com/150/150/any/people',
6780
+ // alt: 'profile picture'
6781
+ // },
6782
+ color: 'coral',
6783
+ labelColor: 'white',
6784
+ label: 'A',
6785
+ size: '40px',
6726
6786
  name: 'Massimiliano Spinosa',
6727
- anchor: { href: '/user', target: '_blank' }
6787
+ // anchor: { href: '/user', target: '_blank' }
6788
+ payload: 'user'
6728
6789
  },
6729
6790
  menuToggle: {
6730
6791
  open: {
@@ -7391,7 +7452,14 @@ const NAV_MOCK = {
7391
7452
  {
7392
7453
  text: 'Stuff',
7393
7454
  image: 'http://placekitten.com/200/300',
7394
- icon: 'n7-icon-archway',
7455
+ icon: {
7456
+ id: 'n7-icon-archway',
7457
+ payload: 'icon-primary',
7458
+ },
7459
+ iconSecondary: {
7460
+ id: 'n7-icon-bell',
7461
+ payload: 'icon-secondary',
7462
+ },
7395
7463
  anchor: { href: '/examples', target: '_blank', payload: 'clicked!' }
7396
7464
  },
7397
7465
  { text: 'Other stuff', anchor: { payload: 'clicked!' } },
@@ -7712,7 +7780,14 @@ const TABLE_MOCK = {
7712
7780
  const TAG_MOCK = {
7713
7781
  label: 'label: ',
7714
7782
  text: 'text',
7715
- icon: 'n7-icon-close',
7783
+ icon: {
7784
+ id: 'n7-icon-close',
7785
+ payload: 'close'
7786
+ },
7787
+ preIcon: {
7788
+ id: 'n7-icon-angle-left',
7789
+ payload: 'preicon'
7790
+ },
7716
7791
  payload: 'tag-payload',
7717
7792
  classes: 'tag1-class',
7718
7793
  };
@@ -8282,5 +8357,5 @@ const WIZARD_MOCK = {
8282
8357
  * Generated bundle index. Do not edit.
8283
8358
  */
8284
8359
 
8285
- export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BreadcrumbsComponent, BubbleChartComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
8360
+ export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BreadcrumbsComponent, BubbleChartComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
8286
8361
  //# sourceMappingURL=net7-components.mjs.map