@pepperi-addons/ngx-lib 0.3.9-beta.21 → 0.3.9-beta.24

package/bundles/pepperi-addons-ngx-lib-checkbox.umd.js

@@ -4,204 +4,204 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].checkbox = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.formField, global.ng.material.checkbox, global.ng.material.icon, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['field-title'], global.translate));
 }(this, (function (exports, core, common, forms, core$2, formField, checkbox, icon$1, ngxLib, icon, fieldTitle, core$1) { 'use strict';
 
-    var PepCheckboxComponent = /** @class */ (function () {
-        function PepCheckboxComponent(renderer, customizationService, element, translate) {
-            this.renderer = renderer;
-            this.customizationService = customizationService;
-            this.element = element;
-            this.translate = translate;
-            this.key = '';
-            this.value = false;
-            this.label = '';
-            this._type = 'checkbox'; // || 'booleanText'
-            this.mandatory = false;
-            this.disabled = false;
-            this.readonly = false;
-            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
-            this.rowSpan = 1;
-            this._additionalValue = undefined;
-            this.controlType = 'checkbox';
-            this.form = null;
-            this.isActive = false;
-            this.showTitle = true;
-            this.renderTitle = true;
-            this.layoutType = 'form';
-            this._visible = true;
-            this.valueChange = new core.EventEmitter();
-            this.standAlone = false;
-            this.jsonLib = JSON;
-        }
-        Object.defineProperty(PepCheckboxComponent.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (value) {
-                this._type = value;
-                this.setAdditionalValueObject();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCheckboxComponent.prototype, "additionalValue", {
-            get: function () {
-                return this._additionalValue;
-            },
-            set: function (value) {
-                this._additionalValue = value;
-                this.setAdditionalValueObject();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCheckboxComponent.prototype, "visible", {
-            get: function () {
-                return this._visible;
-            },
-            set: function (visible) {
-                this._visible = visible;
-                if (visible) {
-                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
-                }
-                else {
-                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepCheckboxComponent.prototype.setAdditionalValueObject = function () {
-            if (this.additionalValue && this.type === 'booleanText') {
-                try {
-                    if (typeof this.additionalValue === 'string') {
-                        this.additionalValueObject = JSON.parse(this.additionalValue);
-                    }
-                    else {
-                        this.additionalValueObject = this.additionalValue;
-                    }
-                }
-                catch (_a) {
-                    this.additionalValueObject = {
-                        CheckedText: this.translate.instant('CHECKBOX.TRUE'),
-                        UncheckedText: this.translate.instant('CHECKBOX.FALSE'),
-                    };
-                }
-            }
-        };
-        PepCheckboxComponent.prototype.setDefaultForm = function () {
-            var pepField = new ngxLib.PepCheckboxField({
-                key: this.key,
-                value: this.value,
-                mandatory: this.mandatory,
-                readonly: this.readonly,
-                disabled: this.disabled,
-            });
-            this.form = this.customizationService.getDefaultFromGroup(pepField);
-        };
-        PepCheckboxComponent.prototype.ngOnInit = function () {
-            if (this.form === null) {
-                this.standAlone = true;
-                this.setDefaultForm();
-                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-                if (!this.renderTitle) {
-                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-                }
-            }
-        };
-        PepCheckboxComponent.prototype.ngOnChanges = function (changes) {
-            if (this.standAlone) {
-                this.setDefaultForm();
-            }
-        };
-        PepCheckboxComponent.prototype.ngOnDestroy = function () {
-            //
-        };
-        PepCheckboxComponent.prototype.onMaterialChange = function (e) {
-            this.changeValue(e.checked);
-        };
-        PepCheckboxComponent.prototype.toggleChecked = function (event) {
-            if (!this.disabled) {
-                var isChecked = this.value ? true : false;
-                var newValue = !isChecked;
-                this.value = newValue;
-                this.changeValue(newValue);
-            }
-        };
-        PepCheckboxComponent.prototype.changeValue = function (value) {
-            this.customizationService.updateFormFieldValue(this.form, this.key, value);
-            this.valueChange.emit(value);
-        };
-        return PepCheckboxComponent;
-    }());
-    PepCheckboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-checkbox',
-                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center}", ""]
-                },] }
-    ];
-    PepCheckboxComponent.ctorParameters = function () { return [
-        { type: core.Renderer2 },
-        { type: ngxLib.PepCustomizationService },
-        { type: core.ElementRef },
-        { type: core$1.TranslateService }
-    ]; };
-    PepCheckboxComponent.propDecorators = {
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        mandatory: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        rowSpan: [{ type: core.Input }],
-        additionalValue: [{ type: core.Input }],
-        form: [{ type: core.Input }],
-        isActive: [{ type: core.Input }],
-        showTitle: [{ type: core.Input }],
-        renderTitle: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        visible: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }]
+    var PepCheckboxComponent = /** @class */ (function () {
+        function PepCheckboxComponent(renderer, customizationService, element, translate) {
+            this.renderer = renderer;
+            this.customizationService = customizationService;
+            this.element = element;
+            this.translate = translate;
+            this.key = '';
+            this.value = false;
+            this.label = '';
+            this._type = 'checkbox'; // || 'booleanText'
+            this.mandatory = false;
+            this.disabled = false;
+            this.readonly = false;
+            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
+            this.rowSpan = 1;
+            this._additionalValue = undefined;
+            this.controlType = 'checkbox';
+            this.form = null;
+            this.isActive = false;
+            this.showTitle = true;
+            this.renderTitle = true;
+            this.layoutType = 'form';
+            this._visible = true;
+            this.valueChange = new core.EventEmitter();
+            this.standAlone = false;
+            this.jsonLib = JSON;
+        }
+        Object.defineProperty(PepCheckboxComponent.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            set: function (value) {
+                this._type = value;
+                this.setAdditionalValueObject();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCheckboxComponent.prototype, "additionalValue", {
+            get: function () {
+                return this._additionalValue;
+            },
+            set: function (value) {
+                this._additionalValue = value;
+                this.setAdditionalValueObject();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCheckboxComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            set: function (visible) {
+                this._visible = visible;
+                if (visible) {
+                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+                }
+                else {
+                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepCheckboxComponent.prototype.setAdditionalValueObject = function () {
+            if (this.additionalValue && this.type === 'booleanText') {
+                try {
+                    if (typeof this.additionalValue === 'string') {
+                        this.additionalValueObject = JSON.parse(this.additionalValue);
+                    }
+                    else {
+                        this.additionalValueObject = this.additionalValue;
+                    }
+                }
+                catch (_a) {
+                    this.additionalValueObject = {
+                        CheckedText: this.translate.instant('CHECKBOX.TRUE'),
+                        UncheckedText: this.translate.instant('CHECKBOX.FALSE'),
+                    };
+                }
+            }
+        };
+        PepCheckboxComponent.prototype.setDefaultForm = function () {
+            var pepField = new ngxLib.PepCheckboxField({
+                key: this.key,
+                value: this.value,
+                mandatory: this.mandatory,
+                readonly: this.readonly,
+                disabled: this.disabled,
+            });
+            this.form = this.customizationService.getDefaultFromGroup(pepField);
+        };
+        PepCheckboxComponent.prototype.ngOnInit = function () {
+            if (this.form === null) {
+                this.standAlone = true;
+                this.setDefaultForm();
+                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                if (!this.renderTitle) {
+                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                }
+            }
+        };
+        PepCheckboxComponent.prototype.ngOnChanges = function (changes) {
+            if (this.standAlone) {
+                this.setDefaultForm();
+            }
+        };
+        PepCheckboxComponent.prototype.ngOnDestroy = function () {
+            //
+        };
+        PepCheckboxComponent.prototype.onMaterialChange = function (e) {
+            this.changeValue(e.checked);
+        };
+        PepCheckboxComponent.prototype.toggleChecked = function (event) {
+            if (!this.disabled) {
+                var isChecked = this.value ? true : false;
+                var newValue = !isChecked;
+                this.value = newValue;
+                this.changeValue(newValue);
+            }
+        };
+        PepCheckboxComponent.prototype.changeValue = function (value) {
+            this.customizationService.updateFormFieldValue(this.form, this.key, value);
+            this.valueChange.emit(value);
+        };
+        return PepCheckboxComponent;
+    }());
+    PepCheckboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-checkbox',
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center}", ""]
+                },] }
+    ];
+    PepCheckboxComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: ngxLib.PepCustomizationService },
+        { type: core.ElementRef },
+        { type: core$1.TranslateService }
+    ]; };
+    PepCheckboxComponent.propDecorators = {
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        mandatory: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        rowSpan: [{ type: core.Input }],
+        additionalValue: [{ type: core.Input }],
+        form: [{ type: core.Input }],
+        isActive: [{ type: core.Input }],
+        showTitle: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        visible: [{ type: core.Input }],
+        valueChange: [{ type: core.Output }]
     };
 
-    var PepCheckboxModule = /** @class */ (function () {
-        function PepCheckboxModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([icon.pepIconSystemBolt]);
-        }
-        return PepCheckboxModule;
-    }());
-    PepCheckboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        // Material modules
-                        core$2.MatCommonModule,
-                        formField.MatFormFieldModule,
-                        checkbox.MatCheckboxModule,
-                        icon$1.MatIconModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon.PepIconModule,
-                        fieldTitle.PepFieldTitleModule,
-                    ],
-                    exports: [PepCheckboxComponent],
-                    declarations: [PepCheckboxComponent],
-                },] }
-    ];
-    PepCheckboxModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepCheckboxModule = /** @class */ (function () {
+        function PepCheckboxModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([icon.pepIconSystemBolt]);
+        }
+        return PepCheckboxModule;
+    }());
+    PepCheckboxModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        // Material modules
+                        core$2.MatCommonModule,
+                        formField.MatFormFieldModule,
+                        checkbox.MatCheckboxModule,
+                        icon$1.MatIconModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon.PepIconModule,
+                        fieldTitle.PepFieldTitleModule,
+                    ],
+                    exports: [PepCheckboxComponent],
+                    declarations: [PepCheckboxComponent],
+                },] }
+    ];
+    PepCheckboxModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    /*
-     * Public API Surface of ngx-lib/checkbox
+    /*
+     * Public API Surface of ngx-lib/checkbox
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepCheckboxComponent = PepCheckboxComponent;