@wizishop/angular-components 0.0.237 → 0.0.241

package/bundles/wizishop-angular-components.umd.js

@@ -1245,6 +1245,7 @@
             this.confirmDeleteText = '';
             this.noPadding = false;
             this.tooltipPosition = 'top-center';
+            this.tooltipOneline = false;
             this.confirmDeletePosition = 'right';
             this.click = new i0.EventEmitter();
             this.isLoadingChange = new i0.EventEmitter();
@@ -1334,7 +1335,7 @@
     ButtonComponent.decorators = [
         { type: i0.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\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 }}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n"
+                    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"
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return []; };
@@ -1361,6 +1362,7 @@
         tooltipWidth: [{ type: i0.Input }],
         noPadding: [{ type: i0.Input }],
         tooltipPosition: [{ type: i0.Input }],
+        tooltipOneline: [{ type: i0.Input }],
         confirmDeletePosition: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
         isLoading: [{ type: i0.Input }],
@@ -2396,36 +2398,66 @@
     };
 
     var SwitchComponent = /** @class */ (function () {
-        function SwitchComponent() {
-            // todo add ngmodel and review texts display (textState is mandaoty in order to display textStateEnable and textStateDisable)
+        function SwitchComponent(changeDetectorRef) {
+            this.changeDetectorRef = changeDetectorRef;
+            // todo add ngmodel and review texts display (textState is mandatory in order to display textStateEnable and textStateDisable)
             this.value = false;
             this.textState = false;
             this.textStateEnable = '';
             this.textStateDisable = '';
-            this.showInput = false;
+            this.showInput = false; // todo should not be handle here, but in another component
             this.danger = false;
             this.whiteSpace = false;
             this.switchChange = new i0.EventEmitter(); // todo set emitted type
-            this.changeInput = new i0.EventEmitter(); // todo set emitted type
+            this.changeInput = new i0.EventEmitter(); // todo set emitted type, should be removed
+            this.onChange = function (value) { };
+            this.onTouched = function () { };
         }
         SwitchComponent.prototype.ngOnInit = function () {
             this.id = 'switch-' + Math.floor(Math.random() * Math.floor(1000));
         };
         SwitchComponent.prototype.changeValue = function (event) {
-            this.switchChange.emit(event.target.checked);
+            if (this.disabled) {
+                return;
+            }
+            this.value = event.target.checked;
+            this.switchChange.emit(this.value);
+            this.onChange(this.value);
         };
         SwitchComponent.prototype.triggerInput = function () {
             this.changeInput.emit(this.valueInput);
         };
+        SwitchComponent.prototype.writeValue = function (value) {
+            this.value = value;
+        };
+        SwitchComponent.prototype.registerOnChange = function (onChange) {
+            this.onChange = onChange;
+        };
+        SwitchComponent.prototype.onBlur = function () {
+            this.onTouched();
+        };
+        SwitchComponent.prototype.registerOnTouched = function (onTouched) {
+            this.onTouched = onTouched;
+        };
+        SwitchComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+            this.changeDetectorRef.markForCheck();
+        };
         return SwitchComponent;
     }());
     SwitchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-switch',
-                    template: "<div class=\"wac-switch\">\n  <input type=\"checkbox\" [checked]=\"value\" (change)=\"changeValue($event)\" [id]=\"id\" [ngClass]=\"{ danger: danger }\"/>\n  <label [for]=\"id\" class=\"wac-switch__label\">\n    <span class=\"wac-switch__label__text\"\n      ><ng-content></ng-content\n      ><span\n        *ngIf=\"textState\"\n        [ngStyle]=\"{'whiteSpace': whiteSpace ? 'nowrap' :'normal'}\"\n        >{{ textState }} <strong class=\"disable\" *ngIf=\"textStateDisable\">{{ textStateDisable }}</strong>\n        <strong class=\"enable\" *ngIf=\"textStateEnable\">{{ textStateEnable }}</strong></span\n      ></span\n    >\n  </label>\n</div>\n<div class=\"wac-show-input\" *ngIf=\"showInput && value\">\n  <input [placeholder]=\"placholderInput\" type=\"text\" [(ngModel)]=\"valueInput\" (blur)=\"triggerInput()\" />\n</div>\n"
+                    template: "<div class=\"wac-switch\">\n  <input type=\"checkbox\" [checked]=\"value\" (change)=\"changeValue($event)\" [id]=\"id\" [ngClass]=\"{ danger: danger }\" [disabled]=\"disabled\"/>\n  <label [for]=\"id\" class=\"wac-switch__label\">\n    <span class=\"wac-switch__label__text\"\n      ><ng-content></ng-content\n      ><span\n        *ngIf=\"textState\"\n        [ngStyle]=\"{'whiteSpace': whiteSpace ? 'nowrap' :'normal'}\"\n        >{{ textState }} <strong class=\"disable\" *ngIf=\"textStateDisable\">{{ textStateDisable }}</strong>\n        <strong class=\"enable\" *ngIf=\"textStateEnable\">{{ textStateEnable }}</strong></span\n      ></span\n    >\n  </label>\n</div>\n<div class=\"wac-show-input\" *ngIf=\"showInput && value\">\n  <input [placeholder]=\"placholderInput\" type=\"text\" [(ngModel)]=\"valueInput\" (blur)=\"triggerInput()\" />\n</div>\n",
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: SwitchComponent, multi: true },
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    SwitchComponent.ctorParameters = function () { return []; };
+    SwitchComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     SwitchComponent.propDecorators = {
         value: [{ type: i0.Input }],
         textState: [{ type: i0.Input }],