ngx-sfc-components 0.0.8 → 0.0.10

package/fesm2020/ngx-sfc-components.mjs

@@ -993,7 +993,7 @@ class SliderItemComponent {
     ;
 }
 SliderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderItemComponent, selector: "sfc-slider-item", inputs: { model: "model" }, host: { properties: { "style.height.px": "this._height" } }, viewQueries: [{ propertyName: "imageEl", first: true, predicate: ["image"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"title\">\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <div class=\"image\">\r\n        <img #image [src]=\"model.imageSrc\" sfcImageLoad>\r\n    </div>   \r\n</div>", styles: [":host{display:inline-block}:host .container{position:absolute;left:0;top:0;width:100%}:host .container .title{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em;z-index:2}:host .container .title h2{margin:0;text-transform:uppercase}:host .container .image{position:relative;z-index:1}:host .container .image img{max-width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.ImageLoadDirective, selector: "[sfcImageLoad]" }] });
+SliderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderItemComponent, selector: "sfc-slider-item", inputs: { model: "model" }, host: { properties: { "style.height.px": "this._height" } }, viewQueries: [{ propertyName: "imageEl", first: true, predicate: ["image"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"title\">\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <div class=\"image\">\r\n        <img #image [src]=\"model.imageSrc\" sfcImageLoad>\r\n    </div>   \r\n</div>", styles: [":host{display:inline-block}:host .container{position:absolute;left:0;top:0;width:100%}:host .container .title{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em;z-index:2}:host .container .title h2{margin:0;text-transform:uppercase}:host .container .image{position:relative;z-index:1}:host .container .image img{max-width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.ImageLoadDirective, selector: "[sfcImageLoad]", outputs: ["sfcImageLoad"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-slider-item', template: "<div class=\"container\">\r\n    <div class=\"title\">\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <div class=\"image\">\r\n        <img #image [src]=\"model.imageSrc\" sfcImageLoad>\r\n    </div>   \r\n</div>", styles: [":host{display:inline-block}:host .container{position:absolute;left:0;top:0;width:100%}:host .container .title{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em;z-index:2}:host .container .title h2{margin:0;text-transform:uppercase}:host .container .image{position:relative;z-index:1}:host .container .image img{max-width:100%;height:auto}\n"] }]
@@ -1102,10 +1102,10 @@ class SliderButtonComponent {
     }
 }
 SliderButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: { type: "type", active: "active" }, host: { properties: { "class": "this.type", "class.active": "this.active" } }, ngImport: i0, template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;top:45%;line-height:3.7em;text-align:center;cursor:pointer;background:rgba(0,0,0,.1019607843);transition:all .1s ease;z-index:9999}:host:hover{background:rgba(0,0,0,.3019607843)}:host.next{right:0;border-radius:.43em 0 0 .43em}:host.previous{left:0;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+SliderButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: { type: "type", active: "active" }, host: { properties: { "class": "this.type", "class.active": "this.active" } }, ngImport: i0, template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;top:45%;line-height:3.7em;text-align:center;cursor:pointer;background:rgba(0,0,0,.1019607843);transition:all .1s ease;z-index:9999;border-radius:.43em}:host:hover{background:rgba(0,0,0,.3019607843)}:host.next{right:0}:host.previous{left:0}:host.active.next{right:0}:host.active.previous{left:0}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-slider-button', template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;top:45%;line-height:3.7em;text-align:center;cursor:pointer;background:rgba(0,0,0,.1019607843);transition:all .1s ease;z-index:9999}:host:hover{background:rgba(0,0,0,.3019607843)}:host.next{right:0;border-radius:.43em 0 0 .43em}:host.previous{left:0;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"] }]
+            args: [{ selector: 'sfc-slider-button', template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;top:45%;line-height:3.7em;text-align:center;cursor:pointer;background:rgba(0,0,0,.1019607843);transition:all .1s ease;z-index:9999;border-radius:.43em}:host:hover{background:rgba(0,0,0,.3019607843)}:host.next{right:0}:host.previous{left:0}:host.active.next{right:0}:host.active.previous{left:0}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }, {
@@ -1151,6 +1151,7 @@ class SliderComponent {
         this.resizeService = resizeService;
         this.imageLoadService = imageLoadService;
         this.changeDetector = changeDetector;
+        this.SIZE_FACTOR = 0.00225;
         this.PAUSE_ICON = faPauseCircle;
         this.PLAY_ICON = faPlayCircle;
         this.SliderButtonType = SliderButtonType;
@@ -1197,11 +1198,12 @@ class SliderComponent {
         }));
         if (this.isAutomatic)
             this.automaticService.start();
-        this.imageLoadService.load$.subscribe(sizeEvent => {
-            this._sizeFactor = this.getSizeFactor(sizeEvent.height);
-            this._maxWidth = sizeEvent.width;
+        this.imageLoadService.load$.subscribe((sizeEvent) => {
+            this._sizeFactor = this.getSizeFactor(sizeEvent.offset.height);
+            this._maxWidth = sizeEvent.natural.width;
         });
         this.resizeService.onResize$.subscribe(() => this._sizeFactor = this.getSizeFactor(this.itemsEl.nativeElement.offsetHeight));
+        this.changeDetector.detectChanges();
     }
     ngAfterViewChecked() {
         this.changeDetector.detectChanges();
@@ -1216,11 +1218,11 @@ class SliderComponent {
         this.automaticService.toggle();
     }
     getSizeFactor(value) {
-        return value * 0.00225;
+        return value * this.SIZE_FACTOR;
     }
 }
 SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderComponent, deps: [{ token: SliderService }, { token: SliderAutomaticService }, { token: i1$1.ResizeService }, { token: i1$1.ImageLoadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderComponent, selector: "sfc-slider", inputs: { items: "items", type: "type", showCount: "showCount", pagination: "pagination", handlers: "handlers", showAutomaticToggle: "showAutomaticToggle" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, properties: { "style.fontSize.em": "this._sizeFactor", "style.max-width.px": "this._maxWidth" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "itemsEl", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div #itemsContainer class=\"items\">\r\n        <sfc-slider-item *ngFor=\"let item of items; let itemIndex = index;\" [model]=\"item\"\r\n            [sfcShowHideElement]=\"itemIndex === vm.index\"></sfc-slider-item>\r\n    </div>\r\n\r\n    <div *ngIf=\"handlers\" class=\"buttons\">\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n        </sfc-slider-button>\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n        </sfc-slider-button>\r\n    </div>\r\n\r\n    <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n    <div class=\"actions\">\r\n        <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n        </sfc-slider-pagination>\r\n\r\n        <div *ngIf=\"isAutomatic && showAutomaticToggle\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n            <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;width:100%}:host .container{position:relative;color:#fff}:host .container .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .actions{cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:absolute;top:85%;align-items:center;width:100%}:host .container .actions .automatic{margin-top:.3em}:host .container .buttons,:host .container .counter,:host .container .actions{z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1$1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: SliderItemComponent, selector: "sfc-slider-item", inputs: ["model"] }, { kind: "component", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: ["type", "active"] }, { kind: "component", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: ["count", "index"], outputs: ["selected"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderComponent, selector: "sfc-slider", inputs: { items: "items", type: "type", showCount: "showCount", pagination: "pagination", handlers: "handlers", showAutomaticToggle: "showAutomaticToggle" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, properties: { "style.font-size.em": "this._sizeFactor", "style.max-width.px": "this._maxWidth" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "itemsEl", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div #itemsContainer class=\"items\">\r\n        <sfc-slider-item *ngFor=\"let item of items; let itemIndex = index;\" [model]=\"item\"\r\n            [sfcShowHideElement]=\"itemIndex === vm.index\"></sfc-slider-item>\r\n    </div>\r\n\r\n    <div *ngIf=\"handlers\" class=\"buttons\">\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n        </sfc-slider-button>\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n        </sfc-slider-button>\r\n    </div>\r\n\r\n    <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n    <div class=\"actions\">\r\n        <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n        </sfc-slider-pagination>\r\n\r\n        <div *ngIf=\"isAutomatic && showAutomaticToggle\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n            <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;width:100%}:host .container{position:relative;color:#fff}:host .container .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .actions{cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:absolute;top:85%;align-items:center;width:100%}:host .container .actions .automatic{margin-top:.3em}:host .container .buttons,:host .container .counter,:host .container .actions{z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1$1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: SliderItemComponent, selector: "sfc-slider-item", inputs: ["model"] }, { kind: "component", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: ["type", "active"] }, { kind: "component", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: ["count", "index"], outputs: ["selected"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-slider', providers: [SliderService, SliderAutomaticService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div #itemsContainer class=\"items\">\r\n        <sfc-slider-item *ngFor=\"let item of items; let itemIndex = index;\" [model]=\"item\"\r\n            [sfcShowHideElement]=\"itemIndex === vm.index\"></sfc-slider-item>\r\n    </div>\r\n\r\n    <div *ngIf=\"handlers\" class=\"buttons\">\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n        </sfc-slider-button>\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n        </sfc-slider-button>\r\n    </div>\r\n\r\n    <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n    <div class=\"actions\">\r\n        <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n        </sfc-slider-pagination>\r\n\r\n        <div *ngIf=\"isAutomatic && showAutomaticToggle\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n            <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;width:100%}:host .container{position:relative;color:#fff}:host .container .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .actions{cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:absolute;top:85%;align-items:center;width:100%}:host .container .actions .automatic{margin-top:.3em}:host .container .buttons,:host .container .counter,:host .container .actions{z-index:2}\n"] }]
@@ -1250,7 +1252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['itemsContainer']
             }], _sizeFactor: [{
                 type: HostBinding,
-                args: ['style.fontSize.em']
+                args: ['style.font-size.em']
             }], _maxWidth: [{
                 type: HostBinding,
                 args: ['style.max-width.px']
@@ -4015,3 +4017,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { AvatarBadgeComponent, AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableComponent, TableDataType, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition };
 //# sourceMappingURL=ngx-sfc-components.mjs.map
+//# sourceMappingURL=ngx-sfc-components.mjs.map