@net7/components 3.3.0 → 3.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/footer/footer.mjs +5 -4
- package/esm2020/lib/components/footer/footer.mock.mjs +11 -1
- package/esm2020/lib/components/header/header.mjs +5 -4
- package/esm2020/lib/components/header/header.mock.mjs +11 -1
- package/esm2020/lib/components/image-viewer-tools/image-viewer-tools.mjs +3 -3
- package/fesm2015/net7-components.mjs +45 -25
- package/fesm2015/net7-components.mjs.map +1 -1
- package/fesm2020/net7-components.mjs +45 -25
- package/fesm2020/net7-components.mjs.map +1 -1
- package/lib/components/footer/footer.d.ts +5 -0
- package/lib/components/header/header.d.ts +6 -0
- package/package.json +1 -1
- package/src/lib/styles/components/_footer.scss +39 -10
- package/src/lib/styles/components/_header.scss +33 -13
- package/src/lib/styles/components/_image-viewer-tools.scss +1 -0
|
@@ -722,6 +722,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
722
722
|
type: Input
|
|
723
723
|
}] } });
|
|
724
724
|
|
|
725
|
+
//---------------------------
|
|
726
|
+
class InputSelectComponent {
|
|
727
|
+
onChange(inputPayload, value) {
|
|
728
|
+
if (!this.emit)
|
|
729
|
+
return;
|
|
730
|
+
this.emit('change', { inputPayload, value });
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
734
|
+
InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select {{ input.classes || '' }}\"\n [disabled]=\"input.disabled\">\n <option *ngFor=\"let option of input.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"option.selected\">{{ option.label }}</option>\n </select>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
736
|
+
type: Component,
|
|
737
|
+
args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select {{ input.classes || '' }}\"\n [disabled]=\"input.disabled\">\n <option *ngFor=\"let option of input.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"option.selected\">{{ option.label }}</option>\n </select>\n</div>\n" }]
|
|
738
|
+
}], propDecorators: { data: [{
|
|
739
|
+
type: Input
|
|
740
|
+
}], emit: [{
|
|
741
|
+
type: Input
|
|
742
|
+
}] } });
|
|
743
|
+
|
|
725
744
|
//---------------------------
|
|
726
745
|
class FooterComponent {
|
|
727
746
|
onClick(payload) {
|
|
@@ -731,10 +750,10 @@ class FooterComponent {
|
|
|
731
750
|
}
|
|
732
751
|
}
|
|
733
752
|
FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
734
|
-
FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n
|
|
753
|
+
FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n <div class=\"n7-footer__content\">\n <!-- Loop footer content columns -->\n <div\n class=\"n7-footer__column {{column.classes || ''}}\"\n *ngFor=\"let column of data.columns\"\n >\n <ng-container\n *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"\n ></ng-container>\n </div>\n </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n {{ column.title }}\n </h2>\n <p\n *ngIf=\"column.text\"\n class=\"n7-footer__column-text\"\n [innerHTML]=\"column.text\"\n ></p>\n <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n <ul class=\"n7-footer__column-nav-list\">\n <li\n *ngFor=\"let link of column.links\"\n class=\"n7-footer__column-nav-item {{link.classes || ''}}\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-footer__column-nav-link'\"\n [data]=\"link.anchor\"\n (clicked)=\"onClick($event)\"\n >\n {{ link.text }}\n </n7-anchor-wrapper>\n </li>\n </ul>\n </div>\n\n <div *ngIf=\"column.selects\" class=\"n7-footer__column-selects\">\n <n7-input-select\n *ngFor=\"let selectData of column.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n <n7-anchor-wrapper\n *ngFor=\"let image of column.images\"\n [classes]=\"image.classes || ''\"\n [data]=\"image.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img [src]=\"image.url\" [attr.alt]=\"image.alttext\" />\n </n7-anchor-wrapper>\n </div>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
735
754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, decorators: [{
|
|
736
755
|
type: Component,
|
|
737
|
-
args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n
|
|
756
|
+
args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n <div class=\"n7-footer__content\">\n <!-- Loop footer content columns -->\n <div\n class=\"n7-footer__column {{column.classes || ''}}\"\n *ngFor=\"let column of data.columns\"\n >\n <ng-container\n *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"\n ></ng-container>\n </div>\n </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n {{ column.title }}\n </h2>\n <p\n *ngIf=\"column.text\"\n class=\"n7-footer__column-text\"\n [innerHTML]=\"column.text\"\n ></p>\n <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n <ul class=\"n7-footer__column-nav-list\">\n <li\n *ngFor=\"let link of column.links\"\n class=\"n7-footer__column-nav-item {{link.classes || ''}}\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-footer__column-nav-link'\"\n [data]=\"link.anchor\"\n (clicked)=\"onClick($event)\"\n >\n {{ link.text }}\n </n7-anchor-wrapper>\n </li>\n </ul>\n </div>\n\n <div *ngIf=\"column.selects\" class=\"n7-footer__column-selects\">\n <n7-input-select\n *ngFor=\"let selectData of column.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n <n7-anchor-wrapper\n *ngFor=\"let image of column.images\"\n [classes]=\"image.classes || ''\"\n [data]=\"image.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img [src]=\"image.url\" [attr.alt]=\"image.alttext\" />\n </n7-anchor-wrapper>\n </div>\n</ng-template>\n" }]
|
|
738
757
|
}], propDecorators: { data: [{
|
|
739
758
|
type: Input
|
|
740
759
|
}], emit: [{
|
|
@@ -778,10 +797,10 @@ class HeaderComponent {
|
|
|
778
797
|
}
|
|
779
798
|
}
|
|
780
799
|
HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
781
|
-
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
|
|
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"] }] });
|
|
782
801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
783
802
|
type: Component,
|
|
784
|
-
args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n
|
|
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" }]
|
|
785
804
|
}], propDecorators: { data: [{
|
|
786
805
|
type: Input
|
|
787
806
|
}], emit: [{
|
|
@@ -1269,10 +1288,10 @@ class ImageViewerToolsComponent {
|
|
|
1269
1288
|
}
|
|
1270
1289
|
}
|
|
1271
1290
|
ImageViewerToolsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1272
|
-
ImageViewerToolsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImageViewerToolsComponent, selector: "n7-image-viewer-tools", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "
|
|
1291
|
+
ImageViewerToolsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImageViewerToolsComponent, selector: "n7-image-viewer-tools", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-image-viewer-tools {{data.classes || ''}}\">\n <div class=\"n7-image-viewer-tools__bar\">\n <div class=\"n7-image-viewer-tools__controls\">\n <div class=\"n7-image-viewer-tools__control-wrapper\">\n <ng-container *ngIf=\"data.controls.description && data.description\">\n <n7-anchor-wrapper \n class=\"n7-image-viewer-tools__control-btn\"\n [ngClass]=\"{\n 'is-active': data.controls.description.isActive\n }\"\n [data]=\"data.controls.description.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- $event -->\n <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.description.icon}}\"></span>\n </n7-anchor-wrapper>\n </ng-container>\n </div>\n\n <div class=\"n7-image-viewer-tools__control-wrapper\">\n <ng-container *ngIf=\"data.controls.thumbs\">\n <n7-anchor-wrapper \n class=\"n7-image-viewer-tools__control-btn\"\n [ngClass]=\"{\n 'is-active': data.controls.thumbs.isActive\n }\"\n [data]=\"data.controls.thumbs.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- $event -->\n <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.thumbs.icon}}\"></span>\n </n7-anchor-wrapper>\n </ng-container>\n </div>\n </div>\n\n <div class=\"n7-image-viewer-tools__thumbs-description\">\n <div class=\"n7-image-viewer-tools__thumbs\" \n *ngIf=\"data.isVisible.thumbnails && data.images\" >\n <div class=\"n7-image-viewer-tools__thumbs-strip\">\n <div *ngFor=\"let img of data.images; let imgIndex = index\" \n class=\"n7-image-viewer-tools__thumb\"\n [class.active]=\"imgIndex == data.initial\">\n <img\n class=\"n7-image-viewer-tools__thumb-image\"\n src=\"{{img.thumb}}\"\n (click)=\"onClick(img.payload)\" >\n </div>\n </div> \n \n <ng-container *ngIf=\"data.navigation\">\n <div\n class=\"{{ data.navigation.prev.classes || '' }}\"\n (click)=\"onClick(data.navigation.prev.payload)\">\n <!-- (click)=\"\" -->\n <span class=\"n7-icon-angle-left\"></span>\n </div>\n <div\n class=\"{{ data.navigation.next.classes || '' }}\"\n (click)=\"onClick(data.navigation.next.payload)\">\n <span class=\"n7-icon-angle-right\"></span>\n </div>\n </ng-container>\n\n </div>\n\n <div class=\"n7-image-viewer-tools__description\" \n *ngIf=\"data.isVisible.description\" >\n <div class=\"n7-image-viewer-tools__description-close\"\n (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n <!-- data.controls.closedescription.anchor.payload -->\n <span class=\"{{data.controls.closedescription.icon}}\"></span>\n </div>\n <div class=\"n7-image-viewer-tools__description-text-wrapper\">\n <div class=\"n7-image-viewer-tools__description-text\" [innerHTML]=\"data.description\"></div>\n </div>\n \n </div>\n </div> \n </div>\n</div>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1273
1292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerToolsComponent, decorators: [{
|
|
1274
1293
|
type: Component,
|
|
1275
|
-
args: [{ selector: 'n7-image-viewer-tools', template: "
|
|
1294
|
+
args: [{ selector: 'n7-image-viewer-tools', template: "<div *ngIf=\"data\" class=\"n7-image-viewer-tools {{data.classes || ''}}\">\n <div class=\"n7-image-viewer-tools__bar\">\n <div class=\"n7-image-viewer-tools__controls\">\n <div class=\"n7-image-viewer-tools__control-wrapper\">\n <ng-container *ngIf=\"data.controls.description && data.description\">\n <n7-anchor-wrapper \n class=\"n7-image-viewer-tools__control-btn\"\n [ngClass]=\"{\n 'is-active': data.controls.description.isActive\n }\"\n [data]=\"data.controls.description.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- $event -->\n <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.description.icon}}\"></span>\n </n7-anchor-wrapper>\n </ng-container>\n </div>\n\n <div class=\"n7-image-viewer-tools__control-wrapper\">\n <ng-container *ngIf=\"data.controls.thumbs\">\n <n7-anchor-wrapper \n class=\"n7-image-viewer-tools__control-btn\"\n [ngClass]=\"{\n 'is-active': data.controls.thumbs.isActive\n }\"\n [data]=\"data.controls.thumbs.anchor\"\n (clicked)=\"onClick($event)\">\n <!-- $event -->\n <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.thumbs.icon}}\"></span>\n </n7-anchor-wrapper>\n </ng-container>\n </div>\n </div>\n\n <div class=\"n7-image-viewer-tools__thumbs-description\">\n <div class=\"n7-image-viewer-tools__thumbs\" \n *ngIf=\"data.isVisible.thumbnails && data.images\" >\n <div class=\"n7-image-viewer-tools__thumbs-strip\">\n <div *ngFor=\"let img of data.images; let imgIndex = index\" \n class=\"n7-image-viewer-tools__thumb\"\n [class.active]=\"imgIndex == data.initial\">\n <img\n class=\"n7-image-viewer-tools__thumb-image\"\n src=\"{{img.thumb}}\"\n (click)=\"onClick(img.payload)\" >\n </div>\n </div> \n \n <ng-container *ngIf=\"data.navigation\">\n <div\n class=\"{{ data.navigation.prev.classes || '' }}\"\n (click)=\"onClick(data.navigation.prev.payload)\">\n <!-- (click)=\"\" -->\n <span class=\"n7-icon-angle-left\"></span>\n </div>\n <div\n class=\"{{ data.navigation.next.classes || '' }}\"\n (click)=\"onClick(data.navigation.next.payload)\">\n <span class=\"n7-icon-angle-right\"></span>\n </div>\n </ng-container>\n\n </div>\n\n <div class=\"n7-image-viewer-tools__description\" \n *ngIf=\"data.isVisible.description\" >\n <div class=\"n7-image-viewer-tools__description-close\"\n (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n <!-- data.controls.closedescription.anchor.payload -->\n <span class=\"{{data.controls.closedescription.icon}}\"></span>\n </div>\n <div class=\"n7-image-viewer-tools__description-text-wrapper\">\n <div class=\"n7-image-viewer-tools__description-text\" [innerHTML]=\"data.description\"></div>\n </div>\n \n </div>\n </div> \n </div>\n</div>" }]
|
|
1276
1295
|
}], propDecorators: { data: [{
|
|
1277
1296
|
type: Input
|
|
1278
1297
|
}], emit: [{
|
|
@@ -1351,25 +1370,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1351
1370
|
type: Input
|
|
1352
1371
|
}] } });
|
|
1353
1372
|
|
|
1354
|
-
//---------------------------
|
|
1355
|
-
class InputSelectComponent {
|
|
1356
|
-
onChange(inputPayload, value) {
|
|
1357
|
-
if (!this.emit)
|
|
1358
|
-
return;
|
|
1359
|
-
this.emit('change', { inputPayload, value });
|
|
1360
|
-
}
|
|
1361
|
-
}
|
|
1362
|
-
InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1363
|
-
InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select {{ input.classes || '' }}\"\n [disabled]=\"input.disabled\">\n <option *ngFor=\"let option of input.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"option.selected\">{{ option.label }}</option>\n </select>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
1365
|
-
type: Component,
|
|
1366
|
-
args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select {{ input.classes || '' }}\"\n [disabled]=\"input.disabled\">\n <option *ngFor=\"let option of input.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"option.selected\">{{ option.label }}</option>\n </select>\n</div>\n" }]
|
|
1367
|
-
}], propDecorators: { data: [{
|
|
1368
|
-
type: Input
|
|
1369
|
-
}], emit: [{
|
|
1370
|
-
type: Input
|
|
1371
|
-
}] } });
|
|
1372
|
-
|
|
1373
1373
|
//---------------------------
|
|
1374
1374
|
class InputTextComponent {
|
|
1375
1375
|
onChange(inputPayload, value) {
|
|
@@ -6613,6 +6613,16 @@ const FOOTER_MOCK = {
|
|
|
6613
6613
|
},
|
|
6614
6614
|
{
|
|
6615
6615
|
text: 'Arianna Web is powered by Hyperborea.<br><a href="#" target="_blank">www.hyperborea.com</a>',
|
|
6616
|
+
selects: [{
|
|
6617
|
+
id: 'language',
|
|
6618
|
+
label: 'Select language',
|
|
6619
|
+
options: [
|
|
6620
|
+
{ value: 'en', label: 'English' },
|
|
6621
|
+
{ value: 'it', label: 'Italian' },
|
|
6622
|
+
{ value: 'de', label: 'German' }
|
|
6623
|
+
],
|
|
6624
|
+
payload: 'language'
|
|
6625
|
+
}],
|
|
6616
6626
|
}
|
|
6617
6627
|
]
|
|
6618
6628
|
};
|
|
@@ -6666,6 +6676,16 @@ const HEADER_MOCK = {
|
|
|
6666
6676
|
anchor: { payload: '/facebook' }
|
|
6667
6677
|
}
|
|
6668
6678
|
],
|
|
6679
|
+
selects: [{
|
|
6680
|
+
id: 'language',
|
|
6681
|
+
// label: 'Language',
|
|
6682
|
+
options: [
|
|
6683
|
+
{ value: 'en', label: 'English' },
|
|
6684
|
+
{ value: 'it', label: 'Italian' },
|
|
6685
|
+
{ value: 'de', label: 'German' }
|
|
6686
|
+
],
|
|
6687
|
+
payload: 'language'
|
|
6688
|
+
}],
|
|
6669
6689
|
buttons: [
|
|
6670
6690
|
{
|
|
6671
6691
|
text: 'Log In',
|