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

package/bundles/pepperi-addons-ngx-lib-size-detector.umd.js

@@ -4,125 +4,125 @@
     (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']['size-detector'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global['pepperi-addons']['ngx-lib']));
 }(this, (function (exports, core, common, forms, flexLayout, ngxLib) { 'use strict';
 
-    var PepSizeDetectorComponent = /** @class */ (function () {
-        function PepSizeDetectorComponent(hostElement, layoutService) {
-            var _this = this;
-            this.hostElement = hostElement;
-            this.layoutService = layoutService;
-            this.showScreenSize = false;
-            this._useAsWebComponent = false;
-            this.sizeChange = new core.EventEmitter();
-            this.prefix = 'is-';
-            this.sizes = [
-                {
-                    id: ngxLib.PepScreenSizeType.XS,
-                    name: 'xs',
-                    css: "d-block d-sm-none",
-                },
-                {
-                    id: ngxLib.PepScreenSizeType.SM,
-                    name: 'sm',
-                    css: "d-none d-sm-block d-md-none",
-                },
-                {
-                    id: ngxLib.PepScreenSizeType.MD,
-                    name: 'md',
-                    css: "d-none d-md-block d-lg-none",
-                },
-                {
-                    id: ngxLib.PepScreenSizeType.LG,
-                    name: 'lg',
-                    css: "d-none d-lg-block d-xl-none",
-                },
-                {
-                    id: ngxLib.PepScreenSizeType.XL,
-                    name: 'xl',
-                    css: "d-none d-xl-block",
-                },
-            ];
-            this.layoutService.onResize$.subscribe(function (size) {
-                _this.currentSize = _this.sizes.find(function (s) { return s.id === size; });
-                _this.sizeChange.emit(_this.currentSize);
-            });
-        }
-        Object.defineProperty(PepSizeDetectorComponent.prototype, "useAsWebComponent", {
-            get: function () {
-                return this._useAsWebComponent;
-            },
-            set: function (value) {
-                if (value) {
-                    this.exportFunctionsOnHostElement();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepSizeDetectorComponent.prototype.onResize = function (event) {
-            this.detectScreenSize();
-        };
-        PepSizeDetectorComponent.prototype.ngAfterViewInit = function () {
-            this.detectScreenSize();
-        };
-        PepSizeDetectorComponent.prototype.detectScreenSize = function () {
-            var _this = this;
-            this.currentSize = this.sizes.find(function (x) {
-                var el = _this.hostElement.nativeElement.querySelector("." + _this.prefix + x.id);
-                var isVisible = window.getComputedStyle(el).display !== 'none';
-                return isVisible;
-            });
-            this.layoutService.onResize(this.currentSize.id);
-        };
-        PepSizeDetectorComponent.prototype.exportFunctionsOnHostElement = function () {
-            // This is for web component usage for use those functions.
-            this.hostElement.nativeElement.getCurrentSize = this.getCurrentSize.bind(this);
-        };
-        PepSizeDetectorComponent.prototype.getCurrentSize = function () {
-            return this.currentSize;
-        };
-        return PepSizeDetectorComponent;
-    }());
-    PepSizeDetectorComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-size-detector',
-                    template: "<!-- Bootstrap -->\n<!-- <div *ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div *ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n  fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n  class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n  <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>"
-                },] }
-    ];
-    PepSizeDetectorComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: ngxLib.PepLayoutService }
-    ]; };
-    PepSizeDetectorComponent.propDecorators = {
-        showScreenSize: [{ type: core.Input }],
-        useAsWebComponent: [{ type: core.Input }],
-        sizeChange: [{ type: core.Output }],
-        onResize: [{ type: core.HostListener, args: ['window:resize', ['$event'],] }]
+    var PepSizeDetectorComponent = /** @class */ (function () {
+        function PepSizeDetectorComponent(hostElement, layoutService) {
+            var _this = this;
+            this.hostElement = hostElement;
+            this.layoutService = layoutService;
+            this.showScreenSize = false;
+            this._useAsWebComponent = false;
+            this.sizeChange = new core.EventEmitter();
+            this.prefix = 'is-';
+            this.sizes = [
+                {
+                    id: ngxLib.PepScreenSizeType.XS,
+                    name: 'xs',
+                    css: "d-block d-sm-none",
+                },
+                {
+                    id: ngxLib.PepScreenSizeType.SM,
+                    name: 'sm',
+                    css: "d-none d-sm-block d-md-none",
+                },
+                {
+                    id: ngxLib.PepScreenSizeType.MD,
+                    name: 'md',
+                    css: "d-none d-md-block d-lg-none",
+                },
+                {
+                    id: ngxLib.PepScreenSizeType.LG,
+                    name: 'lg',
+                    css: "d-none d-lg-block d-xl-none",
+                },
+                {
+                    id: ngxLib.PepScreenSizeType.XL,
+                    name: 'xl',
+                    css: "d-none d-xl-block",
+                },
+            ];
+            this.layoutService.onResize$.subscribe(function (size) {
+                _this.currentSize = _this.sizes.find(function (s) { return s.id === size; });
+                _this.sizeChange.emit(_this.currentSize);
+            });
+        }
+        Object.defineProperty(PepSizeDetectorComponent.prototype, "useAsWebComponent", {
+            get: function () {
+                return this._useAsWebComponent;
+            },
+            set: function (value) {
+                if (value) {
+                    this.exportFunctionsOnHostElement();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepSizeDetectorComponent.prototype.onResize = function (event) {
+            this.detectScreenSize();
+        };
+        PepSizeDetectorComponent.prototype.ngAfterViewInit = function () {
+            this.detectScreenSize();
+        };
+        PepSizeDetectorComponent.prototype.detectScreenSize = function () {
+            var _this = this;
+            this.currentSize = this.sizes.find(function (x) {
+                var el = _this.hostElement.nativeElement.querySelector("." + _this.prefix + x.id);
+                var isVisible = window.getComputedStyle(el).display !== 'none';
+                return isVisible;
+            });
+            this.layoutService.onResize(this.currentSize.id);
+        };
+        PepSizeDetectorComponent.prototype.exportFunctionsOnHostElement = function () {
+            // This is for web component usage for use those functions.
+            this.hostElement.nativeElement.getCurrentSize = this.getCurrentSize.bind(this);
+        };
+        PepSizeDetectorComponent.prototype.getCurrentSize = function () {
+            return this.currentSize;
+        };
+        return PepSizeDetectorComponent;
+    }());
+    PepSizeDetectorComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-size-detector',
+                    template: "<!-- Bootstrap -->\n<!-- <div *ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div *ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n  fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n  class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n  <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>"
+                },] }
+    ];
+    PepSizeDetectorComponent.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: ngxLib.PepLayoutService }
+    ]; };
+    PepSizeDetectorComponent.propDecorators = {
+        showScreenSize: [{ type: core.Input }],
+        useAsWebComponent: [{ type: core.Input }],
+        sizeChange: [{ type: core.Output }],
+        onResize: [{ type: core.HostListener, args: ['window:resize', ['$event'],] }]
     };
 
-    var PepSizeDetectorModule = /** @class */ (function () {
-        function PepSizeDetectorModule() {
-        }
-        return PepSizeDetectorModule;
-    }());
-    PepSizeDetectorModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        flexLayout.FlexLayoutModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                    ],
-                    exports: [PepSizeDetectorComponent],
-                    declarations: [PepSizeDetectorComponent],
-                },] }
+    var PepSizeDetectorModule = /** @class */ (function () {
+        function PepSizeDetectorModule() {
+        }
+        return PepSizeDetectorModule;
+    }());
+    PepSizeDetectorModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        flexLayout.FlexLayoutModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                    ],
+                    exports: [PepSizeDetectorComponent],
+                    declarations: [PepSizeDetectorComponent],
+                },] }
     ];
 
-    /*
-     * Public API Surface of ngx-lib/size-detector
+    /*
+     * Public API Surface of ngx-lib/size-detector
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepSizeDetectorComponent = PepSizeDetectorComponent;

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

@@ -4,136 +4,136 @@
     (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'].slider = {}), global.ng.core, global.ng.common, global.ng.material.core, global.ng.material.slider, global['pepperi-addons']['ngx-lib']['field-title'], global['pepperi-addons']['ngx-lib']));
 }(this, (function (exports, core, common, core$1, slider, fieldTitle, ngxLib) { 'use strict';
 
-    /**
-     * This is a slider component that support pepperi theme
-     * style & state & sizes
-     *
-     * @export
-     * @class PepSliderComponent
-     * @implements {OnDestroy}
-     */
-    var PepSliderComponent = /** @class */ (function () {
-        function PepSliderComponent(renderer, element, pepLayoutService) {
-            this.renderer = renderer;
-            this.element = element;
-            this.pepLayoutService = pepLayoutService;
-            this.label = '';
-            this.disabled = false;
-            this.hint = '';
-            this._background = '';
-            this.step = 1;
-            this.minValue = NaN;
-            this.maxValue = NaN;
-            this._value = NaN;
-            this.valueChange = new core.EventEmitter();
-            this.inputChange = new core.EventEmitter();
-            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
-            this.sliderWrapper = null;
-        }
-        Object.defineProperty(PepSliderComponent.prototype, "background", {
-            get: function () {
-                return this._background;
-            },
-            set: function (background) {
-                if (!background) {
-                    background = '';
-                }
-                this._background = background;
-                this.setBackground();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSliderComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            set: function (value) {
-                this._value = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepSliderComponent.prototype.setBackground = function () {
-            var _a, _b;
-            // Get the wrapper for set the background.
-            if (!this.sliderWrapper) {
-                this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
-            }
-            if (this.sliderWrapper) {
-                this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '');
-                if (((_b = this.background) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                    this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
-                }
-                else {
-                    this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
-                }
-            }
-        };
-        PepSliderComponent.prototype.ngOnInit = function () {
-            this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';
-            this.setBackground();
-        };
-        PepSliderComponent.prototype.onValueChange = function (event) {
-            this.valueChange.emit(event.value);
-        };
-        PepSliderComponent.prototype.onInputChange = function (event) {
-            this.inputChange.emit(event.value);
-        };
-        return PepSliderComponent;
-    }());
-    PepSliderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-slider',
-                    template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>",
-                    styles: ["", ".pep-slider-container ::ng-deep.mat-slider{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.12)}.pep-slider-container ::ng-deep.mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:calc(.375rem / 2 * -1);left:unset;right:unset;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:calc(9px * -1);bottom:calc(9px * -1);transform:scale(.7)!important;border-color:#fff;border-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 .125rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-2xs,.125rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}"]
-                },] }
-    ];
-    PepSliderComponent.ctorParameters = function () { return [
-        { type: core.Renderer2 },
-        { type: core.ElementRef },
-        { type: ngxLib.PepLayoutService }
-    ]; };
-    PepSliderComponent.propDecorators = {
-        label: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        hint: [{ type: core.Input }],
-        background: [{ type: core.Input }],
-        step: [{ type: core.Input }],
-        minValue: [{ type: core.Input }],
-        maxValue: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }],
-        inputChange: [{ type: core.Output }]
+    /**
+     * This is a slider component that support pepperi theme
+     * style & state & sizes
+     *
+     * @export
+     * @class PepSliderComponent
+     * @implements {OnDestroy}
+     */
+    var PepSliderComponent = /** @class */ (function () {
+        function PepSliderComponent(renderer, element, pepLayoutService) {
+            this.renderer = renderer;
+            this.element = element;
+            this.pepLayoutService = pepLayoutService;
+            this.label = '';
+            this.disabled = false;
+            this.hint = '';
+            this._background = '';
+            this.step = 1;
+            this.minValue = NaN;
+            this.maxValue = NaN;
+            this._value = NaN;
+            this.valueChange = new core.EventEmitter();
+            this.inputChange = new core.EventEmitter();
+            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
+            this.sliderWrapper = null;
+        }
+        Object.defineProperty(PepSliderComponent.prototype, "background", {
+            get: function () {
+                return this._background;
+            },
+            set: function (background) {
+                if (!background) {
+                    background = '';
+                }
+                this._background = background;
+                this.setBackground();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSliderComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepSliderComponent.prototype.setBackground = function () {
+            var _a, _b;
+            // Get the wrapper for set the background.
+            if (!this.sliderWrapper) {
+                this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
+            }
+            if (this.sliderWrapper) {
+                this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '');
+                if (((_b = this.background) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
+                }
+                else {
+                    this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
+                }
+            }
+        };
+        PepSliderComponent.prototype.ngOnInit = function () {
+            this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';
+            this.setBackground();
+        };
+        PepSliderComponent.prototype.onValueChange = function (event) {
+            this.valueChange.emit(event.value);
+        };
+        PepSliderComponent.prototype.onInputChange = function (event) {
+            this.inputChange.emit(event.value);
+        };
+        return PepSliderComponent;
+    }());
+    PepSliderComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-slider',
+                    template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>",
+                    styles: ["", ".pep-slider-container ::ng-deep.mat-slider{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.12)}.pep-slider-container ::ng-deep.mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:calc(.375rem / 2 * -1);left:unset;right:unset;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:calc(9px * -1);bottom:calc(9px * -1);transform:scale(.7)!important;border-color:#fff;border-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 .125rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-2xs,.125rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}"]
+                },] }
+    ];
+    PepSliderComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: ngxLib.PepLayoutService }
+    ]; };
+    PepSliderComponent.propDecorators = {
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        hint: [{ type: core.Input }],
+        background: [{ type: core.Input }],
+        step: [{ type: core.Input }],
+        minValue: [{ type: core.Input }],
+        maxValue: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        valueChange: [{ type: core.Output }],
+        inputChange: [{ type: core.Output }]
     };
 
-    var PepSliderModule = /** @class */ (function () {
-        function PepSliderModule() {
-        }
-        return PepSliderModule;
-    }());
-    PepSliderModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        // Material modules
-                        core$1.MatCommonModule,
-                        slider.MatSliderModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        fieldTitle.PepFieldTitleModule,
-                    ],
-                    exports: [PepSliderComponent],
-                    declarations: [PepSliderComponent],
-                },] }
+    var PepSliderModule = /** @class */ (function () {
+        function PepSliderModule() {
+        }
+        return PepSliderModule;
+    }());
+    PepSliderModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        // Material modules
+                        core$1.MatCommonModule,
+                        slider.MatSliderModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        fieldTitle.PepFieldTitleModule,
+                    ],
+                    exports: [PepSliderComponent],
+                    declarations: [PepSliderComponent],
+                },] }
     ];
 
-    /*
-     * Public API Surface of ngx-lib/slider
+    /*
+     * Public API Surface of ngx-lib/slider
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepSliderComponent = PepSliderComponent;