@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
|
@@ -721,6 +721,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
721
721
|
type: Input
|
|
722
722
|
}] } });
|
|
723
723
|
|
|
724
|
+
//---------------------------
|
|
725
|
+
class InputSelectComponent {
|
|
726
|
+
onChange(inputPayload, value) {
|
|
727
|
+
if (!this.emit)
|
|
728
|
+
return;
|
|
729
|
+
this.emit('change', { inputPayload, value });
|
|
730
|
+
}
|
|
731
|
+
}
|
|
732
|
+
InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
733
|
+
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"] }] });
|
|
734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
735
|
+
type: Component,
|
|
736
|
+
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" }]
|
|
737
|
+
}], propDecorators: { data: [{
|
|
738
|
+
type: Input
|
|
739
|
+
}], emit: [{
|
|
740
|
+
type: Input
|
|
741
|
+
}] } });
|
|
742
|
+
|
|
724
743
|
//---------------------------
|
|
725
744
|
class FooterComponent {
|
|
726
745
|
onClick(payload) {
|
|
@@ -730,10 +749,10 @@ class FooterComponent {
|
|
|
730
749
|
}
|
|
731
750
|
}
|
|
732
751
|
FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
733
|
-
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
|
|
752
|
+
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"] }] });
|
|
734
753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, decorators: [{
|
|
735
754
|
type: Component,
|
|
736
|
-
args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n
|
|
755
|
+
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" }]
|
|
737
756
|
}], propDecorators: { data: [{
|
|
738
757
|
type: Input
|
|
739
758
|
}], emit: [{
|
|
@@ -777,10 +796,10 @@ class HeaderComponent {
|
|
|
777
796
|
}
|
|
778
797
|
}
|
|
779
798
|
HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
780
|
-
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
|
|
799
|
+
HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n <div class=\"n7-header__content\">\n <!-- Logo and title -->\n <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n <n7-anchor-wrapper\n [classes]=\"'n7-header__logo-link'\"\n [data]=\"data.logo.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n class=\"n7-header__logo\"\n *ngIf=\"data.logo.image\"\n [src]=\"data.logo.image\"\n alt=\"{{ data.logo.title }}\"\n />\n <div class=\"n7-header__title-subtitle\">\n <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n {{ data.logo.subtitle }}\n </h2>\n </div>\n </n7-anchor-wrapper>\n </div>\n\n <!-- Main menu -->\n <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n <div class=\"n7-header__nav-content\">\n <ul class=\"n7-header__nav-list\">\n <li\n class=\"n7-header__nav-item {{item.classes || ''}}\"\n *ngFor=\"let item of data.nav.items\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__nav-link'\"\n [data]=\"item.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__nav-icon {{item.icon}}\"\n *ngIf=\"item.icon\"\n ></span>\n <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </n7-anchor-wrapper>\n <!-- Sublevel -->\n <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n <li\n class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n *ngFor=\"let subitem of item.subnav\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__subnav-link'\"\n [data]=\"subitem.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__subnav-icon {{subitem.icon}}\"\n *ngIf=\"subitem.icon\"\n ></span>\n <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n {{ subitem.text }}\n </span>\n </n7-anchor-wrapper>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n </nav>\n\n <!-- Mobile menu toggle -->\n <div class=\"n7-header__mobile-menu-toggle\">\n <span\n class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n (click)=\"onClick(data.menuToggle.open.payload)\"\n ></span>\n </div>\n\n <!-- Mobile menu close -->\n <span\n class=\"n7-header__mobile-menu-close n7-icon-close\"\n (click)=\"onClick(data.menuToggle.close.payload)\"\n ></span>\n\n <!-- Tools: search, notifications, use profile or login/signup -->\n <div class=\"n7-header__tools\">\n <div\n class=\"n7-header__search {{data.search.classes || ''}}\"\n *ngIf=\"data.search\"\n >\n <input\n class=\"n7-header__search-input\"\n type=\"search\"\n name=\"search\"\n placeholder=\"{{ data.search.hint || ''}}\"\n (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n />\n <button\n class=\"n7-header__search-btn\"\n type=\"submit\"\n (click)=\"onClick(data.search.payload)\"\n >\n <span class=\"n7-header__search-btn-label\"> Search </span>\n </button>\n </div>\n\n <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n <n7-anchor-wrapper\n *ngFor=\"let action of data.actions\"\n [classes]=\"'n7-header__action' + (action.classes || '')\"\n [data]=\"action.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n <span\n *ngIf=\"action.badge\"\n class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n >\n {{ action.badge.text }}\n </span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n <n7-anchor-wrapper\n *ngFor=\"let button of data.buttons\"\n [classes]=\"button.classes\"\n [data]=\"button.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n <n7-input-select\n *ngFor=\"let selectData of data.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div\n class=\"n7-header__user {{data.user.classes || ''}}\"\n *ngIf=\"data.user\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__user-content'\"\n [data]=\"data.user.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n *ngIf=\"data.user.img\"\n class=\"n7-header__user-img\"\n [src]=\"data.user.img\"\n />\n <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n <span class=\"n7-header__user-name-label\">\n {{ data.user.name }}\n </span>\n </p>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n</header>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
781
800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
782
801
|
type: Component,
|
|
783
|
-
args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n
|
|
802
|
+
args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n <div class=\"n7-header__content\">\n <!-- Logo and title -->\n <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n <n7-anchor-wrapper\n [classes]=\"'n7-header__logo-link'\"\n [data]=\"data.logo.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n class=\"n7-header__logo\"\n *ngIf=\"data.logo.image\"\n [src]=\"data.logo.image\"\n alt=\"{{ data.logo.title }}\"\n />\n <div class=\"n7-header__title-subtitle\">\n <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n {{ data.logo.subtitle }}\n </h2>\n </div>\n </n7-anchor-wrapper>\n </div>\n\n <!-- Main menu -->\n <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n <div class=\"n7-header__nav-content\">\n <ul class=\"n7-header__nav-list\">\n <li\n class=\"n7-header__nav-item {{item.classes || ''}}\"\n *ngFor=\"let item of data.nav.items\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__nav-link'\"\n [data]=\"item.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__nav-icon {{item.icon}}\"\n *ngIf=\"item.icon\"\n ></span>\n <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </n7-anchor-wrapper>\n <!-- Sublevel -->\n <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n <li\n class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n *ngFor=\"let subitem of item.subnav\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__subnav-link'\"\n [data]=\"subitem.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span\n class=\"n7-header__subnav-icon {{subitem.icon}}\"\n *ngIf=\"subitem.icon\"\n ></span>\n <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n {{ subitem.text }}\n </span>\n </n7-anchor-wrapper>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n </nav>\n\n <!-- Mobile menu toggle -->\n <div class=\"n7-header__mobile-menu-toggle\">\n <span\n class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n (click)=\"onClick(data.menuToggle.open.payload)\"\n ></span>\n </div>\n\n <!-- Mobile menu close -->\n <span\n class=\"n7-header__mobile-menu-close n7-icon-close\"\n (click)=\"onClick(data.menuToggle.close.payload)\"\n ></span>\n\n <!-- Tools: search, notifications, use profile or login/signup -->\n <div class=\"n7-header__tools\">\n <div\n class=\"n7-header__search {{data.search.classes || ''}}\"\n *ngIf=\"data.search\"\n >\n <input\n class=\"n7-header__search-input\"\n type=\"search\"\n name=\"search\"\n placeholder=\"{{ data.search.hint || ''}}\"\n (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n />\n <button\n class=\"n7-header__search-btn\"\n type=\"submit\"\n (click)=\"onClick(data.search.payload)\"\n >\n <span class=\"n7-header__search-btn-label\"> Search </span>\n </button>\n </div>\n\n <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n <n7-anchor-wrapper\n *ngFor=\"let action of data.actions\"\n [classes]=\"'n7-header__action' + (action.classes || '')\"\n [data]=\"action.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n <span\n *ngIf=\"action.badge\"\n class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n >\n {{ action.badge.text }}\n </span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n <n7-anchor-wrapper\n *ngFor=\"let button of data.buttons\"\n [classes]=\"button.classes\"\n [data]=\"button.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n </n7-anchor-wrapper>\n </div>\n\n <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n <n7-input-select\n *ngFor=\"let selectData of data.selects\"\n [data]=\"selectData\"\n [emit]=\"this.emit\"\n >\n </n7-input-select>\n </div>\n\n <div\n class=\"n7-header__user {{data.user.classes || ''}}\"\n *ngIf=\"data.user\"\n >\n <n7-anchor-wrapper\n [classes]=\"'n7-header__user-content'\"\n [data]=\"data.user.anchor\"\n (clicked)=\"onClick($event)\"\n >\n <img\n *ngIf=\"data.user.img\"\n class=\"n7-header__user-img\"\n [src]=\"data.user.img\"\n />\n <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n <span class=\"n7-header__user-name-label\">\n {{ data.user.name }}\n </span>\n </p>\n </n7-anchor-wrapper>\n </div>\n </div>\n </div>\n</header>\n" }]
|
|
784
803
|
}], propDecorators: { data: [{
|
|
785
804
|
type: Input
|
|
786
805
|
}], emit: [{
|
|
@@ -1257,10 +1276,10 @@ class ImageViewerToolsComponent {
|
|
|
1257
1276
|
}
|
|
1258
1277
|
}
|
|
1259
1278
|
ImageViewerToolsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1260
|
-
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: "
|
|
1279
|
+
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"] }] });
|
|
1261
1280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerToolsComponent, decorators: [{
|
|
1262
1281
|
type: Component,
|
|
1263
|
-
args: [{ selector: 'n7-image-viewer-tools', template: "
|
|
1282
|
+
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>" }]
|
|
1264
1283
|
}], propDecorators: { data: [{
|
|
1265
1284
|
type: Input
|
|
1266
1285
|
}], emit: [{
|
|
@@ -1339,25 +1358,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1339
1358
|
type: Input
|
|
1340
1359
|
}] } });
|
|
1341
1360
|
|
|
1342
|
-
//---------------------------
|
|
1343
|
-
class InputSelectComponent {
|
|
1344
|
-
onChange(inputPayload, value) {
|
|
1345
|
-
if (!this.emit)
|
|
1346
|
-
return;
|
|
1347
|
-
this.emit('change', { inputPayload, value });
|
|
1348
|
-
}
|
|
1349
|
-
}
|
|
1350
|
-
InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1351
|
-
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"] }] });
|
|
1352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
1353
|
-
type: Component,
|
|
1354
|
-
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" }]
|
|
1355
|
-
}], propDecorators: { data: [{
|
|
1356
|
-
type: Input
|
|
1357
|
-
}], emit: [{
|
|
1358
|
-
type: Input
|
|
1359
|
-
}] } });
|
|
1360
|
-
|
|
1361
1361
|
//---------------------------
|
|
1362
1362
|
class InputTextComponent {
|
|
1363
1363
|
onChange(inputPayload, value) {
|
|
@@ -6600,6 +6600,16 @@ const FOOTER_MOCK = {
|
|
|
6600
6600
|
},
|
|
6601
6601
|
{
|
|
6602
6602
|
text: 'Arianna Web is powered by Hyperborea.<br><a href="#" target="_blank">www.hyperborea.com</a>',
|
|
6603
|
+
selects: [{
|
|
6604
|
+
id: 'language',
|
|
6605
|
+
label: 'Select language',
|
|
6606
|
+
options: [
|
|
6607
|
+
{ value: 'en', label: 'English' },
|
|
6608
|
+
{ value: 'it', label: 'Italian' },
|
|
6609
|
+
{ value: 'de', label: 'German' }
|
|
6610
|
+
],
|
|
6611
|
+
payload: 'language'
|
|
6612
|
+
}],
|
|
6603
6613
|
}
|
|
6604
6614
|
]
|
|
6605
6615
|
};
|
|
@@ -6653,6 +6663,16 @@ const HEADER_MOCK = {
|
|
|
6653
6663
|
anchor: { payload: '/facebook' }
|
|
6654
6664
|
}
|
|
6655
6665
|
],
|
|
6666
|
+
selects: [{
|
|
6667
|
+
id: 'language',
|
|
6668
|
+
// label: 'Language',
|
|
6669
|
+
options: [
|
|
6670
|
+
{ value: 'en', label: 'English' },
|
|
6671
|
+
{ value: 'it', label: 'Italian' },
|
|
6672
|
+
{ value: 'de', label: 'German' }
|
|
6673
|
+
],
|
|
6674
|
+
payload: 'language'
|
|
6675
|
+
}],
|
|
6656
6676
|
buttons: [
|
|
6657
6677
|
{
|
|
6658
6678
|
text: 'Log In',
|