@wizishop/angular-components 14.3.3 → 14.3.4

package/fesm2020/wizishop-angular-components.mjs

@@ -1,11 +1,11 @@
 import * as i1$2 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, NgModule, Inject, Pipe, ContentChildren, ViewChild, ChangeDetectionStrategy, HostBinding, ContentChild } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, NgModule, Inject, Pipe, ContentChildren, Attribute, Optional, ViewChild, ChangeDetectionStrategy, HostBinding, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import * as i4$1 from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { Subject, merge, fromEvent, ReplaySubject, interval, takeUntil as takeUntil$1, startWith as startWith$1, map as map$1 } from 'rxjs';
@@ -1098,7 +1098,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }] } });
 
 class ButtonComponent {
-    constructor() {
+    constructor(type, formGroup) {
+        this.type = type;
+        this.formGroup = formGroup;
         // todo add button type (ex: for submit and check if it works with template driven forms)
         this.extraClasses = 'is-info'; // todo make a list of existing class
         this.label = '';
@@ -1172,6 +1174,9 @@ class ButtonComponent {
         if (this.disabled) {
             return;
         }
+        if (this.type === 'submit' && this.formGroup) { // Maybe there is a better way to handle submit
+            this.formGroup.onSubmit(this.formGroup.value);
+        }
         if (this.hasLoader) {
             this.isLoading = false;
             setTimeout(() => {
@@ -1199,12 +1204,20 @@ class ButtonComponent {
         }, 1000);
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [{ token: 'type', attribute: true }, { token: FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ButtonComponent, selector: "wac-button", inputs: { extraClasses: "extraClasses", label: "label", icon: "icon", iconNext: "iconNext", textcolor: "textcolor", widthAuto: "widthAuto", contentHorizontalPosition: "contentHorizontalPosition", iconFontSize: "iconFontSize", hasLoader: "hasLoader", disabled: "disabled", whiteSpaceNowrap: "whiteSpaceNowrap", opacity: "opacity", animation: "animation", animationRight: "animationRight", animationText: "animationText", confirmDelete: "confirmDelete", confirmDeleteText: "confirmDeleteText", coin: "coin", tooltip: "tooltip", tooltipWidth: "tooltipWidth", noPadding: "noPadding", tooltipPosition: "tooltipPosition", tooltipOneline: "tooltipOneline", confirmDeletePosition: "confirmDeletePosition", isLoading: "isLoading" }, outputs: { click: "click", isLoadingChange: "isLoadingChange" }, viewQueries: [{ propertyName: "calculWidth", first: true, predicate: ["calculWidth"], descendants: true }, { propertyName: "calculWidthDelete", first: true, predicate: ["calculWidthDelete"], descendants: true }], ngImport: i0, template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    noPadding ? 'no-padding' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n  </span>\n  <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [ngClass]=\"{'oneline': tooltipOneline}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-button', template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    noPadding ? 'no-padding' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n  </span>\n  <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [ngClass]=\"{'oneline': tooltipOneline}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { extraClasses: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['type']
+                }] }, { type: i2.FormGroupDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FormGroupDirective]
+                }] }]; }, propDecorators: { extraClasses: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -4227,6 +4240,22 @@ class ValueChangeService {
         this.valueChange$ = new Subject();
         this.indexSelectedOption = null;
         this.resetListeners$ = new Subject();
+        this.indexOfMatchedOption = (option, index, letter) => {
+            const textOption = option.getContentRef().nativeElement.textContent.trim().toLowerCase();
+            return textOption.startsWith(letter) ? index : null;
+        };
+        this.isNotNull = (index) => {
+            return index !== null;
+        };
+        this.highestAndClosestIndex = (index) => {
+            if (isNaN(this.indexSelectedOption)) {
+                return true;
+            }
+            if (index > this.indexSelectedOption) {
+                return true;
+            }
+            return false;
+        };
     }
     set value(value) {
         this._value = value;
@@ -4276,26 +4305,15 @@ class ValueChangeService {
     }
     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);
+            .map((option, index) => this.indexOfMatchedOption(option, index, letter))
+            .filter(this.isNotNull);
         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;
-        });
+        const validOptionIndex = matchedOptionsIndex.find(this.highestAndClosestIndex);
         this.indexSelectedOption = isNaN(validOptionIndex) ? matchedOptionsIndex[0] : validOptionIndex;
         this.assignValue(this.optionChildren.get(this.indexSelectedOption).value);
     }
@@ -4528,7 +4546,6 @@ 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 ||