@wizishop/angular-components 14.3.1 → 14.3.3

package/fesm2020/wizishop-angular-components.mjs

@@ -20,7 +20,7 @@ import * as i4 from 'ngx-autosize';
 import { AutosizeModule } from 'ngx-autosize';
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, ESCAPE } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, ESCAPE, A, Z, ZERO, NINE } from '@angular/cdk/keycodes';
 import * as i2$2 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import * as i3 from 'ngx-scrollbar/reached-event';
@@ -357,8 +357,6 @@ class SelectOptionDirective {
     onClick() {
         this.onSelectOption();
     }
-    ngOnInit() {
-    }
     onSelectOption() {
         if (this.disabled) {
             return;
@@ -384,11 +382,11 @@ class SelectOptionDirective {
     }
 }
 SelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectOptionDirective, selector: "[selectOption]", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()" } }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }], ngImport: i0 });
+SelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectOptionDirective, selector: "[wacSelectOption]", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()" } }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectOptionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[selectOption]',
+                    selector: '[wacSelectOption]',
                     providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onClick: [{
@@ -4224,7 +4222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }] } });
 
 class ValueChangeService {
-    constructor() {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
         this.valueChange$ = new Subject();
         this.indexSelectedOption = null;
         this.resetListeners$ = new Subject();
@@ -4252,6 +4251,7 @@ class ValueChangeService {
     handleValueChange() {
         this.changeSelectedOption();
         this.updateSelectPlaceholder();
+        this.changeDetectorRef.markForCheck();
     }
     selectNextOption() {
         if (this.indexSelectedOption + 1 >= this.optionChildren.length) {
@@ -4274,6 +4274,31 @@ class ValueChangeService {
         this.indexSelectedOption = this.indexSelectedOption - 1;
         this.assignValue(this.optionChildren.get(this.indexSelectedOption).value);
     }
+    searchOptionByFirstLetter(letter) {
+        const matchedOptionsIndex = this.optionChildren
+            .map((option, index) => {
+            const textOption = option.getContentRef().nativeElement.textContent.trim().toLowerCase();
+            return textOption.startsWith(letter) ? index : null;
+        })
+            .filter((index) => index !== null);
+        if (!matchedOptionsIndex.length) { // reset the selection
+            this.indexSelectedOption = null;
+            this.assignValue(null);
+            return;
+        }
+        // find the next option after the current selected option, or the first option
+        const validOptionIndex = matchedOptionsIndex.find((index) => {
+            if (isNaN(this.indexSelectedOption)) {
+                return true;
+            }
+            if (index > this.indexSelectedOption) {
+                return true;
+            }
+            return false;
+        });
+        this.indexSelectedOption = isNaN(validOptionIndex) ? matchedOptionsIndex[0] : validOptionIndex;
+        this.assignValue(this.optionChildren.get(this.indexSelectedOption).value);
+    }
     handleInitialSelectedOption() {
         setTimeout(() => {
             if (!this.value) {
@@ -4329,11 +4354,11 @@ class ValueChangeService {
         this.resetListeners$.complete();
     }
 }
-ValueChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ValueChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
 ValueChangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class SelectSearchTriggerComponent {
     constructor() {
@@ -4387,7 +4412,8 @@ class SelectTestComponent {
     constructor(valueChangeService) {
         this.valueChangeService = valueChangeService;
         //! Refacto improve sroll on mobile, see with Pauline
-        // todo handle multiple selection ?
+        // todo handle when user search with first letter from keyboard event
+        // angular material select https://github.com/angular/components/blob/main/src/material/select/select.ts
         this.role = 'combobox';
         this.valueChange = new EventEmitter();
         this.disabled = false;
@@ -4502,28 +4528,34 @@ class SelectTestComponent {
     }
     /** Handles keyboard events when the selected is open. */
     _handleOpenKeydown(event) {
+        console.log('event', event);
         const keyCode = event.keyCode;
         const isArrowKey = keyCode === DOWN_ARROW ||
             keyCode === UP_ARROW ||
             keyCode === LEFT_ARROW ||
             keyCode === RIGHT_ARROW;
         const isEscapeKey = keyCode === ESCAPE || keyCode === ENTER || keyCode === SPACE;
+        const isTyping = (keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE);
         if ((isArrowKey && event.altKey) || isEscapeKey) {
             // Close the select on ALT + arrow key to match the native <select>
             event.preventDefault();
             this.openPanel = false;
             return;
         }
-        if (!isArrowKey) {
+        else if (isArrowKey) {
+            event.preventDefault(); // prevents the page from scrolling
+            // select the next option on arrow key down
+            if (keyCode === DOWN_ARROW || keyCode === RIGHT_ARROW) {
+                this.valueChangeService.selectNextOption();
+                return;
+            }
+            this.valueChangeService.selectPreviousOption();
             return;
         }
-        event.preventDefault(); // prevents the page from scrolling
-        // select the next option on arrow key down
-        if (keyCode === DOWN_ARROW || keyCode === RIGHT_ARROW) {
-            this.valueChangeService.selectNextOption();
+        if (isTyping && !this.customSearchTrigger) {
+            this.valueChangeService.searchOptionByFirstLetter(event.key);
             return;
         }
-        this.valueChangeService.selectPreviousOption();
     }
     writeValue(value) {
         if (isNaN(value)) {
@@ -4546,13 +4578,13 @@ SelectTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 SelectTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectTestComponent, selector: "wac-select-test", inputs: { value: "value", required: "required", disabled: "disabled", keepPanelOpen: "keepPanelOpen", openPanel: "openPanel", enableSearch: "enableSearch" }, outputs: { valueChange: "valueChange", openPanelChange: "openPanelChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, properties: { "attr.role": "this.role" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: SelectTestComponent, multi: true },
         ValueChangeService
-    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "optionChildren", predicate: OPTION_SELECTION_HANDLER, descendants: true }], ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "optionChildren", predicate: OPTION_SELECTION_HANDLER, descendants: true }], ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectTestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select-test', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: SelectTestComponent, multi: true },
                         ValueChangeService
-                    ], encapsulation: ViewEncapsulation.None, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>" }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -4587,33 +4619,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }] } });
 
 class OptionComponent {
-    constructor(renderer, elementRef) {
+    constructor(renderer, elementRef, changeDetectorRef) {
         this.renderer = renderer;
         this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.disabled = false;
         this.selectedChange = new EventEmitter();
     }
     set selected(selected) {
         this._selected = selected;
         selected ? this.renderer.addClass(this.elementRef.nativeElement, 'selected') : this.renderer.removeClass(this.elementRef.nativeElement, 'selected');
+        this.changeDetectorRef.markForCheck();
     }
     get selected() {
         return this._selected;
     }
-    ngOnInit() {
-    }
     onSelectOption() {
         if (this.disabled) {
             return;
         }
         this.selected = !this.selected;
         this.selectedChange.emit(this.value);
+        this.changeDetectorRef.markForCheck();
     }
     getValue() {
         return this.value;
     }
     setValue(value) {
         this.value = value;
+        this.changeDetectorRef.markForCheck();
     }
     isSelected() {
         return this.selected;
@@ -4626,12 +4660,12 @@ class OptionComponent {
         return this.contentRef;
     }
 }
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionComponent, selector: "wac-option", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionComponent, selector: "wac-option", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-option', encapsulation: ViewEncapsulation.None, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { contentRef: [{
+            args: [{ selector: 'wac-option', encapsulation: ViewEncapsulation.None, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { contentRef: [{
                 type: ViewChild,
                 args: ['contentWrapper']
             }], disabled: [{
@@ -4673,13 +4707,14 @@ class WrapperSidebarComponent {
         this.reverse = false;
         this.hideBackground = false;
         this.stickySidebar = false;
+        this.transparentSidebar = false;
     }
 }
 WrapperSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: WrapperSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WrapperSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: WrapperSidebarComponent, selector: "wac-wrapper-sidebar", inputs: { reverse: "reverse", hideBackground: "hideBackground", backgroundGrey: "backgroundGrey", backgroundWidth: "backgroundWidth", stickySidebar: "stickySidebar" }, ngImport: i0, template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\" [ngClass]=\"{'sticky': stickySidebar}\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+WrapperSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: WrapperSidebarComponent, selector: "wac-wrapper-sidebar", inputs: { reverse: "reverse", hideBackground: "hideBackground", backgroundGrey: "backgroundGrey", backgroundWidth: "backgroundWidth", stickySidebar: "stickySidebar", transparentSidebar: "transparentSidebar" }, ngImport: i0, template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\" [ngClass]=\"{'sticky': stickySidebar, 'transparent': transparentSidebar}\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: WrapperSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-wrapper-sidebar', template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\" [ngClass]=\"{'sticky': stickySidebar}\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-wrapper-sidebar', template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\" [ngClass]=\"{'sticky': stickySidebar, 'transparent': transparentSidebar}\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { reverse: [{
                 type: Input
             }], hideBackground: [{
@@ -4690,6 +4725,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], stickySidebar: [{
                 type: Input
+            }], transparentSidebar: [{
+                type: Input
             }] } });
 
 class BreadcrumbsComponent {
@@ -5433,6 +5470,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }] } });
 
+;
+class SummaryComponent {
+    constructor() {
+        this._activeItem = 0;
+        this.itemChanged = new EventEmitter();
+    }
+    set activeItem(activeItem) {
+        this._activeItem = activeItem;
+    }
+    get activeItem() {
+        return this._activeItem;
+    }
+    scrollToItem(i) {
+        this._activeItem = i;
+        this.itemChanged.emit(i);
+        if (this.items[i].href) {
+            const yOffset = -20;
+            const element = window.document.getElementById(this.items[i].href);
+            if (element) {
+                const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+                window.scrollTo({ top: y, behavior: 'smooth' });
+            }
+        }
+    }
+}
+SummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SummaryComponent, selector: "wac-summary", inputs: { activeItem: "activeItem", items: "items" }, outputs: { itemChanged: "itemChanged" }, ngImport: i0, template: "<div class=\"wac-summary\">\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <p [ngClass]=\"{'active' : activeItem === i, 'item-link': item.href}\" (click)=\"scrollToItem(i)\">{{ item.label }}</p>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-summary', encapsulation: ViewEncapsulation.None, template: "<div class=\"wac-summary\">\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <p [ngClass]=\"{'active' : activeItem === i, 'item-link': item.href}\" (click)=\"scrollToItem(i)\">{{ item.label }}</p>\n    </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { activeItem: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], itemChanged: [{
+                type: Output
+            }] } });
+
 const components = [
     TagComponent,
     TabComponent,
@@ -5493,7 +5568,8 @@ const components = [
     ContentWithButtonsComponent,
     WrapperMultipleBlockComponent,
     DraganddropListComponent,
-    BlockSeparatorComponent
+    BlockSeparatorComponent,
+    SummaryComponent
 ];
 const exportsFromModule = [
     PaginationComponent,
@@ -5573,7 +5649,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ContentWithButtonsComponent,
         WrapperMultipleBlockComponent,
         DraganddropListComponent,
-        BlockSeparatorComponent], imports: [CommonModule,
+        BlockSeparatorComponent,
+        SummaryComponent], imports: [CommonModule,
         FormsModule,
         NwbAllModule, i1$3.TranslateModule, ReactiveFormsModule,
         SharedDirectives,
@@ -5655,7 +5732,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ContentWithButtonsComponent,
         WrapperMultipleBlockComponent,
         DraganddropListComponent,
-        BlockSeparatorComponent, PaginationComponent,
+        BlockSeparatorComponent,
+        SummaryComponent, PaginationComponent,
         TableComponent,
         TableColumn,
         CheckBoxRow,
@@ -5774,5 +5852,5 @@ class TableFiltersGroup extends NwbFilterGroup {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
+export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
 //# sourceMappingURL=wizishop-angular-components.mjs.map