@net7/components 3.11.0 → 3.12.0

package/fesm2015/net7-components.mjs

@@ -431,6 +431,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class LoaderComponent {
+}
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-loader', template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class IconComponent {
+    onClick(value) {
+        if (!this.emit)
+            return;
+        this.emit('click', value);
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: IconComponent, selector: "n7-icon", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<ng-container *ngIf=\"data as icon\">\n    <span  class=\"n7-icon\" *ngIf=\"icon.id\"\n        [ngClass]=\"icon.id\"\n        [ngStyle]=\"icon.style\"\n        (click)=\"onClick(icon.payload)\">\n    </span>\n</ng-container>\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-icon', template: "<ng-container *ngIf=\"data as icon\">\n    <span  class=\"n7-icon\" *ngIf=\"icon.id\"\n        [ngClass]=\"icon.id\"\n        [ngStyle]=\"icon.style\"\n        (click)=\"onClick(icon.payload)\">\n    </span>\n</ng-container>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
+class ButtonComponent {
+    onClick(value) {
+        if (!this.emit)
+            return;
+        this.emit('click', value);
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "n7-button", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<ng-container *ngIf=\"data && data.anchor\">\n    <n7-anchor-wrapper [data]=\"data.anchor\"\n                       (clicked)=\"onClick($event)\">\n        <button class=\"n7-btn\"\n                [ngClass]=\"data.classes\"\n                [disabled]=\"data.isDisabled\"\n                [class.is-disabled]=\"data.isDisabled\"\n                [class.is-loading]=\"data.isLoading\">\n            <!-- loader -->\n            <n7-loader [data]=\"{classes: 'n7-btn__loader'}\"\n                       *ngIf=\"data.isLoading\"></n7-loader>\n            <!-- icon left -->\n            <n7-icon [data]=\"data.iconLeft\"\n                     *ngIf=\"data.iconLeft\">\n            </n7-icon>\n            <!-- button label -->\n            <span *ngIf=\"data.text\"\n                  class=\"n7-btn__text\">{{ data.text }}</span>\n            <!-- icon right -->\n            <n7-icon [data]=\"data.iconRight\"\n                     *ngIf=\"data.iconRight\">\n            </n7-icon>\n        </button>\n    </n7-anchor-wrapper>\n</ng-container>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: LoaderComponent, selector: "n7-loader", inputs: ["data"] }, { type: IconComponent, selector: "n7-icon", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-button', template: "<ng-container *ngIf=\"data && data.anchor\">\n    <n7-anchor-wrapper [data]=\"data.anchor\"\n                       (clicked)=\"onClick($event)\">\n        <button class=\"n7-btn\"\n                [ngClass]=\"data.classes\"\n                [disabled]=\"data.isDisabled\"\n                [class.is-disabled]=\"data.isDisabled\"\n                [class.is-loading]=\"data.isLoading\">\n            <!-- loader -->\n            <n7-loader [data]=\"{classes: 'n7-btn__loader'}\"\n                       *ngIf=\"data.isLoading\"></n7-loader>\n            <!-- icon left -->\n            <n7-icon [data]=\"data.iconLeft\"\n                     *ngIf=\"data.iconLeft\">\n            </n7-icon>\n            <!-- button label -->\n            <span *ngIf=\"data.text\"\n                  class=\"n7-btn__text\">{{ data.text }}</span>\n            <!-- icon right -->\n            <n7-icon [data]=\"data.iconRight\"\n                     *ngIf=\"data.iconRight\">\n            </n7-icon>\n        </button>\n    </n7-anchor-wrapper>\n</ng-container>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class CarouselComponent {
     constructor() {
@@ -1293,10 +1341,10 @@ class InnerTitleComponent {
     }
 }
 InnerTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InnerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InnerTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InnerTitleComponent, selector: "n7-inner-title", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+InnerTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InnerTitleComponent, selector: "n7-inner-title", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"n7-inner-title\"\n     [ngClass]=\"data.classes\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\"\n             class=\"n7-inner-title__image-left\"\n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\">\n        </div>\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n                 [innerHTML]=\"data.title.main.text\"\n                 class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\"\n                 [innerHTML]=\"data.title.secondary.text\"\n                 class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\"\n         *ngIf=\"data.tools || data.actions\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n             class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions\n             let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<!-- Template sorting -->\n<ng-template #select\n             let-select>\n    <div class=\"n7-inner-title__sorting\">\n        <span *ngIf=\"select.label\"\n              class=\"n7-inner-title__sorting-label \">\n            {{select.label}}\n        </span>\n        <select (change)=\"onChange(select.payload, $event.target.value)\"\n                class=\"n7-inner-title__sorting-select\">\n            <option *ngFor=\"let opt of select.options\"\n                    value=\"{{opt.value}}\"\n                    class=\"n7-inner-title__sorting-option\"\n                    [selected]=\"opt.selected\"\n                    [disabled]=\"opt.disabled\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search\n             let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\"\n               class=\"n7-inner-title__search-bar \"\n               placeholder=\"{{search.placeholder}}\"\n               (input)=\"onInputChange(search.payload, $event.target.value)\"\n               (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n        <button *ngIf=\"search.button\"\n                (click)=\"onClick(search.button.payload)\"\n                class=\"n7-btn n7-inner-title__search-button \">\n            {{search.button.text}}\n        </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons\n             let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n             class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n                               [data]=\"btn.anchor\"\n                               (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\"\n                      class=\"n7-btn__icon {{btn.icon || ''}}\"></span>\n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon\n             let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InnerTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-inner-title', template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n" }]
+            args: [{ selector: 'n7-inner-title', template: "<div *ngIf=\"data\"\n     class=\"n7-inner-title\"\n     [ngClass]=\"data.classes\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\"\n             class=\"n7-inner-title__image-left\"\n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\">\n        </div>\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n                 [innerHTML]=\"data.title.main.text\"\n                 class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\"\n                 [innerHTML]=\"data.title.secondary.text\"\n                 class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\"\n         *ngIf=\"data.tools || data.actions\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n             class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions\n             let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<!-- Template sorting -->\n<ng-template #select\n             let-select>\n    <div class=\"n7-inner-title__sorting\">\n        <span *ngIf=\"select.label\"\n              class=\"n7-inner-title__sorting-label \">\n            {{select.label}}\n        </span>\n        <select (change)=\"onChange(select.payload, $event.target.value)\"\n                class=\"n7-inner-title__sorting-select\">\n            <option *ngFor=\"let opt of select.options\"\n                    value=\"{{opt.value}}\"\n                    class=\"n7-inner-title__sorting-option\"\n                    [selected]=\"opt.selected\"\n                    [disabled]=\"opt.disabled\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search\n             let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\"\n               class=\"n7-inner-title__search-bar \"\n               placeholder=\"{{search.placeholder}}\"\n               (input)=\"onInputChange(search.payload, $event.target.value)\"\n               (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n        <button *ngIf=\"search.button\"\n                (click)=\"onClick(search.button.payload)\"\n                class=\"n7-btn n7-inner-title__search-button \">\n            {{search.button.text}}\n        </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons\n             let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n             class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n                               [data]=\"btn.anchor\"\n                               (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\"\n                      class=\"n7-btn__icon {{btn.icon || ''}}\"></span>\n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon\n             let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1341,6 +1389,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+class InputTextareaComponent {
+    onChange(inputPayload, value) {
+        if (!this.emit)
+            return;
+        this.emit('change', { inputPayload, value });
+    }
+}
+InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-input-textarea', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class InputTextComponent {
     onChange(inputPayload, value) {
@@ -1379,18 +1445,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class LoaderComponent {
-}
-LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-loader', template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }] } });
-
 class MapComponent {
     constructor() {
         /** Knows if the component is loaded */
@@ -1513,6 +1567,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class ProgressLineComponent {
+}
+ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "n7-progress-line", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-progress-line', template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class SidebarHeaderComponent {
     onClick(payload) {
@@ -1620,6 +1688,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class TagComponent {
+    onClick(payload) {
+        if (!this.emit)
+            return;
+        this.emit('click', payload);
+    }
+    getIcon(data) {
+        if (!data.icon)
+            return null;
+        if (typeof data.icon === 'string') {
+            return {
+                id: data.icon,
+                payload: data.payload,
+            };
+        }
+        return data.icon;
+    }
+}
+TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "n7-tag", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{icon.id}}\" *ngIf=\"getIcon(data) as icon\"  (click)=\"onClick(icon.payload)\"></span>\n</span>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{icon.id}}\" *ngIf=\"getIcon(data) as icon\"  (click)=\"onClick(icon.payload)\"></span>\n</span>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class TextViewerComponent {
     ngOnInit() {
@@ -1657,36 +1755,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class TagComponent {
-    onClick(payload) {
-        if (!this.emit)
-            return;
-        this.emit('click', payload);
-    }
-    getIcon(data) {
-        if (!data.icon)
-            return null;
-        if (typeof data.icon === 'string') {
-            return {
-                id: data.icon,
-                payload: data.payload,
-            };
-        }
-        return data.icon;
-    }
-}
-TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "n7-tag", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{icon.id}}\" *ngIf=\"getIcon(data) as icon\"  (click)=\"onClick(icon.payload)\"></span>\n</span>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{icon.id}}\" *ngIf=\"getIcon(data) as icon\"  (click)=\"onClick(icon.payload)\"></span>\n</span>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
 class TimelineComponent {
     constructor() {
         /** Knows if the component is loaded */
@@ -1807,38 +1875,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class ProgressLineComponent {
-}
-ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "n7-progress-line", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-progress-line', template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
-class InputTextareaComponent {
-    onChange(inputPayload, value) {
-        if (!this.emit)
-            return;
-        this.emit('change', { inputPayload, value });
-    }
-}
-InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-input-textarea', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
 const COMPONENTS = [
     AdvancedAutocompleteComponent,
     AlertComponent,
@@ -1846,6 +1882,7 @@ const COMPONENTS = [
     AvatarComponent,
     BreadcrumbsComponent,
     BubbleChartComponent,
+    ButtonComponent,
     CarouselComponent,
     ChartComponent,
     ContentPlaceholderComponent,
@@ -1857,6 +1894,7 @@ const COMPONENTS = [
     FooterComponent,
     HeaderComponent,
     HeroComponent,
+    IconComponent,
     HistogramRangeComponent,
     ImageViewerComponent,
     ImageViewerToolsComponent,
@@ -1894,6 +1932,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         AvatarComponent,
         BreadcrumbsComponent,
         BubbleChartComponent,
+        ButtonComponent,
         CarouselComponent,
         ChartComponent,
         ContentPlaceholderComponent,
@@ -1905,6 +1944,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         FooterComponent,
         HeaderComponent,
         HeroComponent,
+        IconComponent,
         HistogramRangeComponent,
         ImageViewerComponent,
         ImageViewerToolsComponent,
@@ -1937,6 +1977,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         AvatarComponent,
         BreadcrumbsComponent,
         BubbleChartComponent,
+        ButtonComponent,
         CarouselComponent,
         ChartComponent,
         ContentPlaceholderComponent,
@@ -1948,6 +1989,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         FooterComponent,
         HeaderComponent,
         HeroComponent,
+        IconComponent,
         HistogramRangeComponent,
         ImageViewerComponent,
         ImageViewerToolsComponent,
@@ -6163,6 +6205,19 @@ const BUBBLECHART_MOCK = {
     ],
 };
 
+const BUTTON_MOCK = {
+    text: 'The Button\'s label',
+    // isDisabled: true,
+    isLoading: true,
+    anchor: {
+        payload: 'button-click',
+    },
+    classes: 'n7-btn-cta',
+    iconLeft: {
+        id: 'n7-icon-circle-full'
+    },
+};
+
 const CAROUSEL_MOCK = {
     containerId: 'carousel-root',
     classes: 'demo',
@@ -7018,6 +7073,14 @@ const HISTOGRAM_RANGE_MOCK = {
     ]
 };
 
+const ICON_MOCK = {
+    id: 'n7-icon-bell',
+    payload: 'bell-click',
+    style: {
+        color: 'tomato',
+    }
+};
+
 const IMAGE_VIEWER_TOOLS_MOCK = {
     images: [
         { thumb: 'http://placekitten.com/200/130', payload: 'img1-payload' },
@@ -7146,7 +7209,8 @@ const INNER_TITLE_MOCK = {
                 classes: 'n7-btn-cta'
             },
         ]
-    }
+    },
+    classes: 'mock-inner-title'
 };
 
 const INPUT_CHECKBOX_MOCK = {
@@ -8315,5 +8379,5 @@ const WIZARD_MOCK = {
  * Generated bundle index. Do not edit.
  */
 
-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_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, 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 };
+export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BUTTON_MOCK, BreadcrumbsComponent, BubbleChartComponent, ButtonComponent, 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, ICON_MOCK, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, IconComponent, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, 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 };
 //# sourceMappingURL=net7-components.mjs.map