@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
@@ -72,6 +72,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
72
72
  type: Input
73
73
  }] } });
74
74
 
75
+ //---------------------------
76
+ class AvatarComponent {
77
+ onClick(payload) {
78
+ if (!this.emit)
79
+ return;
80
+ this.emit('click', payload);
81
+ }
82
+ onMouseEnter(payload) {
83
+ if (!this.emit)
84
+ return;
85
+ this.emit('mouseenter', payload);
86
+ }
87
+ onMouseLeave(payload) {
88
+ if (!this.emit)
89
+ return;
90
+ this.emit('mouseleave', payload);
91
+ }
92
+ }
93
+ AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
94
+ 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"] }] });
95
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
96
+ type: Component,
97
+ 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" }]
98
+ }], propDecorators: { data: [{
99
+ type: Input
100
+ }], emit: [{
101
+ type: Input
102
+ }] } });
103
+
75
104
  //---------------------------
76
105
  class BreadcrumbsComponent {
77
106
  onClick(payload) {
@@ -519,10 +548,10 @@ class CarouselComponent {
519
548
  }
520
549
  }
521
550
  CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
522
- 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"] }] });
551
+ 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"] }] });
523
552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
524
553
  type: Component,
525
- 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" }]
554
+ 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" }]
526
555
  }], propDecorators: { data: [{
527
556
  type: Input
528
557
  }], emit: [{
@@ -587,10 +616,10 @@ class DataWidgetComponent {
587
616
  }
588
617
  }
589
618
  DataWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
590
- 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"] }] });
619
+ 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"] }] });
591
620
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataWidgetComponent, decorators: [{
592
621
  type: Component,
593
- 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" }]
622
+ 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" }]
594
623
  }], propDecorators: { data: [{
595
624
  type: Input
596
625
  }], emit: [{
@@ -797,10 +826,10 @@ class HeaderComponent {
797
826
  }
798
827
  }
799
828
  HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
800
- 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"] }] });
829
+ 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"] }] });
801
830
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, decorators: [{
802
831
  type: Component,
803
- 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" }]
832
+ 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" }]
804
833
  }], propDecorators: { data: [{
805
834
  type: Input
806
835
  }], emit: [{
@@ -1499,12 +1528,17 @@ class NavComponent {
1499
1528
  return;
1500
1529
  this.emit('click', payload);
1501
1530
  }
1531
+ onMouseEnter(payload) {
1532
+ if (!this.emit)
1533
+ return;
1534
+ this.emit('mouseenter', payload);
1535
+ }
1502
1536
  }
1503
1537
  NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1504
- 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"] }] });
1538
+ 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"] }] });
1505
1539
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavComponent, decorators: [{
1506
1540
  type: Component,
1507
- 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>" }]
1541
+ 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" }]
1508
1542
  }], propDecorators: { data: [{
1509
1543
  type: Input
1510
1544
  }], emit: [{
@@ -1723,10 +1757,10 @@ class TagComponent {
1723
1757
  }
1724
1758
  }
1725
1759
  TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1726
- 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"] }] });
1760
+ 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"] }] });
1727
1761
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
1728
1762
  type: Component,
1729
- 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>" }]
1763
+ 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" }]
1730
1764
  }], propDecorators: { data: [{
1731
1765
  type: Input
1732
1766
  }], emit: [{
@@ -1873,6 +1907,7 @@ const COMPONENTS = [
1873
1907
  AdvancedAutocompleteComponent,
1874
1908
  AlertComponent,
1875
1909
  AnchorWrapperComponent,
1910
+ AvatarComponent,
1876
1911
  BreadcrumbsComponent,
1877
1912
  BubbleChartComponent,
1878
1913
  CarouselComponent,
@@ -1919,6 +1954,7 @@ DvComponentsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
1919
1954
  DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, declarations: [AdvancedAutocompleteComponent,
1920
1955
  AlertComponent,
1921
1956
  AnchorWrapperComponent,
1957
+ AvatarComponent,
1922
1958
  BreadcrumbsComponent,
1923
1959
  BubbleChartComponent,
1924
1960
  CarouselComponent,
@@ -1960,6 +1996,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
1960
1996
  ProgressLineComponent], imports: [CommonModule, RouterModule], exports: [AdvancedAutocompleteComponent,
1961
1997
  AlertComponent,
1962
1998
  AnchorWrapperComponent,
1999
+ AvatarComponent,
1963
2000
  BreadcrumbsComponent,
1964
2001
  BubbleChartComponent,
1965
2002
  CarouselComponent,
@@ -2125,6 +2162,18 @@ const ALERT_MOCK = {
2125
2162
  classes: 'is-warning'
2126
2163
  };
2127
2164
 
2165
+ const AVATAR_MOCK = {
2166
+ // image: {
2167
+ // src: 'https://i.pravatar.cc/300',
2168
+ // alt: '',
2169
+ // },
2170
+ color: 'coral',
2171
+ labelColor: 'white',
2172
+ label: 'A',
2173
+ payload: 'avatar',
2174
+ size: '150px',
2175
+ };
2176
+
2128
2177
  const BREADCRUMBS_MOCK = {
2129
2178
  items: [
2130
2179
  {
@@ -6202,6 +6251,7 @@ const CAROUSEL_MOCK = {
6202
6251
  { text: 'Cum sociis natoque penatibus<br /> et magnis dis parturient montes, nascetur ridiculus mus.' },
6203
6252
  { title: 'Lorem Donec sed odio dui.' },
6204
6253
  { 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.' },
6254
+ { image: { src: 'assets/images/heart.svg', classes: 'some test classes' } },
6205
6255
  {
6206
6256
  metadata: [
6207
6257
  { key: 'Metadato 1', value: 'Valore 1' },
@@ -6437,6 +6487,9 @@ const CONTENT_PLACEHOLDER_MOCK = {
6437
6487
 
6438
6488
  const DATA_WIDGET_MOCK = {
6439
6489
  icon: 'n7-icon-earth',
6490
+ imgIcon: {
6491
+ path: 'assets/images/heart.svg'
6492
+ },
6440
6493
  text: '497 <em>Dipendenti</em>',
6441
6494
  subtitle: {
6442
6495
  text: 'In Crescita',
@@ -6735,9 +6788,17 @@ const HEADER_MOCK = {
6735
6788
  }
6736
6789
  ],
6737
6790
  user: {
6738
- img: 'https://placeimg.com/150/150/any/people',
6791
+ // image: {
6792
+ // src: 'https://placeimg.com/150/150/any/people',
6793
+ // alt: 'profile picture'
6794
+ // },
6795
+ color: 'coral',
6796
+ labelColor: 'white',
6797
+ label: 'A',
6798
+ size: '40px',
6739
6799
  name: 'Massimiliano Spinosa',
6740
- anchor: { href: '/user', target: '_blank' }
6800
+ // anchor: { href: '/user', target: '_blank' }
6801
+ payload: 'user'
6741
6802
  },
6742
6803
  menuToggle: {
6743
6804
  open: {
@@ -7404,7 +7465,14 @@ const NAV_MOCK = {
7404
7465
  {
7405
7466
  text: 'Stuff',
7406
7467
  image: 'http://placekitten.com/200/300',
7407
- icon: 'n7-icon-archway',
7468
+ icon: {
7469
+ id: 'n7-icon-archway',
7470
+ payload: 'icon-primary',
7471
+ },
7472
+ iconSecondary: {
7473
+ id: 'n7-icon-bell',
7474
+ payload: 'icon-secondary',
7475
+ },
7408
7476
  anchor: { href: '/examples', target: '_blank', payload: 'clicked!' }
7409
7477
  },
7410
7478
  { text: 'Other stuff', anchor: { payload: 'clicked!' } },
@@ -7725,7 +7793,14 @@ const TABLE_MOCK = {
7725
7793
  const TAG_MOCK = {
7726
7794
  label: 'label: ',
7727
7795
  text: 'text',
7728
- icon: 'n7-icon-close',
7796
+ icon: {
7797
+ id: 'n7-icon-close',
7798
+ payload: 'close'
7799
+ },
7800
+ preIcon: {
7801
+ id: 'n7-icon-angle-left',
7802
+ payload: 'preicon'
7803
+ },
7729
7804
  payload: 'tag-payload',
7730
7805
  classes: 'tag1-class',
7731
7806
  };
@@ -8295,5 +8370,5 @@ const WIZARD_MOCK = {
8295
8370
  * Generated bundle index. Do not edit.
8296
8371
  */
8297
8372
 
8298
- 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 };
8373
+ 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 };
8299
8374
  //# sourceMappingURL=net7-components.mjs.map