@eui/mobile-core 16.1.0 → 16.2.0-snapshot-1701338256451
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EuiMUserProfileActionComponent.html +1 -1
- package/docs/components/EuiMUserProfileAvatarComponent.html +1 -1
- package/docs/components/EuiMUserProfileInfosComponent.html +1 -1
- package/docs/components/EuiMUserProfileInfosItemComponent.html +1 -1
- package/docs/components/EuimAppComponent.html +1 -1
- package/docs/components/EuimAppSidebarComponent.html +1 -1
- package/docs/components/EuimAppSidebarFooterComponent.html +1 -1
- package/docs/components/EuimAppSidebarHeaderComponent.html +1 -1
- package/docs/components/EuimAppSidebarMenuComponent.html +1 -1
- package/docs/components/EuimAvatarComponent.html +1 -1
- package/docs/components/EuimAvatarIconComponent.html +1 -1
- package/docs/components/EuimBadgeComponent.html +1 -1
- package/docs/components/EuimChipSelectorComponent.html +1 -1
- package/docs/components/EuimControlFeedbackComponent.html +1 -1
- package/docs/components/EuimDataSummaryColComponent.html +1 -1
- package/docs/components/EuimDataSummaryComponent.html +1 -1
- package/docs/components/EuimEmptyListPlaceholderComponent.html +1 -1
- package/docs/components/EuimFieldSetComponent.html +1 -1
- package/docs/components/EuimFieldsetActionsComponent.html +1 -1
- package/docs/components/EuimFieldsetLegendComponent.html +1 -1
- package/docs/components/EuimHeaderDetailsComponent.html +1 -1
- package/docs/components/EuimInfoScreenComponent.html +1 -1
- package/docs/components/EuimLabelComponent.html +1 -1
- package/docs/components/EuimLanguageListComponent.html +1 -1
- package/docs/components/EuimLanguageSelectorComponent.html +1 -1
- package/docs/components/EuimMediaHeaderComponent.html +1 -1
- package/docs/components/EuimMenuComponent.html +1 -1
- package/docs/components/EuimMessageComponent.html +1 -1
- package/docs/components/EuimMessageTitleComponent.html +1 -1
- package/docs/components/EuimNotificationItemComponent.html +1 -1
- package/docs/components/EuimScrollerXComponent.html +1 -1
- package/docs/components/EuimSidebarComponent.html +1 -1
- package/docs/components/EuimSidebarContentComponent.html +1 -1
- package/docs/components/EuimSkeletonListItemComponent.html +1 -1
- package/docs/components/EuimSlideComponent.html +1 -1
- package/docs/components/EuimSliderComponent.html +402 -66
- package/docs/components/EuimSpinnerComponent.html +1 -1
- package/docs/components/EuimSpinnerDescriptionComponent.html +1 -1
- package/docs/components/EuimSpinnerMessageComponent.html +1 -1
- package/docs/components/EuimStepperComponent.html +1 -1
- package/docs/components/EuimToolbarActionItemsComponent.html +1 -1
- package/docs/components/EuimToolbarComponent.html +1 -1
- package/docs/components/EuimToolbarTitleComponent.html +1 -1
- package/docs/components/EuimUserProfileComponent.html +1 -1
- package/docs/dependencies.html +1 -1
- package/docs/directives/{EuimInfoScreenMetaDirective.html → EuimInfoScreenContentDirective.html} +6 -6
- package/docs/interfaces/ActionBtnNames.html +51 -12
- package/docs/js/menu-wc.js +7 -7
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/miscellaneous/variables.html +1 -1
- package/esm2022/lib/components/euim-info-screen/euim-info-screen-content/euim-info-screen-content.directive.mjs +19 -0
- package/esm2022/lib/components/euim-info-screen/euim-info-screen.component.mjs +2 -2
- package/esm2022/lib/components/euim-info-screen/euim-info-screen.module.mjs +5 -5
- package/esm2022/lib/components/euim-info-screen/index.mjs +2 -2
- package/esm2022/lib/components/euim-media-header/euim-media-header.component.mjs +2 -2
- package/esm2022/lib/components/euim-slider/euim-slider.component.mjs +88 -28
- package/fesm2022/eui-mobile-core.mjs +99 -41
- package/fesm2022/eui-mobile-core.mjs.map +1 -1
- package/lib/components/euim-info-screen/euim-info-screen-content/euim-info-screen-content.directive.d.ts +7 -0
- package/lib/components/euim-info-screen/euim-info-screen-content/euim-info-screen-content.directive.d.ts.map +1 -0
- package/lib/components/euim-info-screen/euim-info-screen.module.d.ts +2 -2
- package/lib/components/euim-info-screen/index.d.ts +1 -1
- package/lib/components/euim-info-screen/index.d.ts.map +1 -1
- package/lib/components/euim-slider/euim-slider.component.d.ts +17 -8
- package/lib/components/euim-slider/euim-slider.component.d.ts.map +1 -1
- package/package.json +2 -2
- package/esm2022/lib/components/euim-info-screen/euim-info-screen-meta/euim-info-screen-meta.directive.mjs +0 -19
- package/lib/components/euim-info-screen/euim-info-screen-meta/euim-info-screen-meta.directive.d.ts +0 -7
- package/lib/components/euim-info-screen/euim-info-screen-meta/euim-info-screen-meta.directive.d.ts.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { coerceBoolean } from '@eui/base';
|
|
2
2
|
export * from '@eui/base';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Injectable, Directive, HostBinding, Input, Component, ViewEncapsulation, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, ViewChild } from '@angular/core';
|
|
4
|
+
import { Injectable, Directive, HostBinding, Input, Component, ViewEncapsulation, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, ViewChild, HostListener } from '@angular/core';
|
|
5
5
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
6
6
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
7
7
|
import * as i2 from '@angular/common';
|
|
@@ -2233,11 +2233,11 @@ class EuimMediaHeaderComponent extends EuimBaseDirective {
|
|
|
2233
2233
|
].join(' ');
|
|
2234
2234
|
}
|
|
2235
2235
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMediaHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2236
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: "euimNoGradient", euimSizeS: "euimSizeS", euimSizeM: "euimSizeM", euimSizeL: "euimSizeL" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n<div *ngIf=\"!euimNoGradient\" class=\"euim-media-header__gradient\">\n</div>\n<div class=\"euim-media-header__text\">\n <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;z-index:99;bottom:var(--eui-base-spacing-m);left:var(--eui-base-spacing-m);color:#fff}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(
|
|
2236
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: "euimNoGradient", euimSizeS: "euimSizeS", euimSizeM: "euimSizeM", euimSizeL: "euimSizeL" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n<div *ngIf=\"!euimNoGradient\" class=\"euim-media-header__gradient\">\n</div>\n<div class=\"euim-media-header__text\">\n <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;z-index:99;bottom:var(--eui-base-spacing-m);left:var(--eui-base-spacing-m);right:var(--eui-base-spacing-m);color:#fff}.euim-media-header__text h1,.euim-media-header__text h2,.euim-media-header__text h3,.euim-media-header__text h4,.euim-media-header__text h5,.euim-media-header__text h6{margin-bottom:var(--eui-base-spacing-2xs)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--eui-base-color-black));background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__size-s{height:calc(var(--eui-base-spacing-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-base-spacing-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-base-spacing-m) * 25)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2237
2237
|
}
|
|
2238
2238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMediaHeaderComponent, decorators: [{
|
|
2239
2239
|
type: Component,
|
|
2240
|
-
args: [{ selector: 'euim-media-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n<div *ngIf=\"!euimNoGradient\" class=\"euim-media-header__gradient\">\n</div>\n<div class=\"euim-media-header__text\">\n <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;z-index:99;bottom:var(--eui-base-spacing-m);left:var(--eui-base-spacing-m);color:#fff}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(
|
|
2240
|
+
args: [{ selector: 'euim-media-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n<div *ngIf=\"!euimNoGradient\" class=\"euim-media-header__gradient\">\n</div>\n<div class=\"euim-media-header__text\">\n <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;z-index:99;bottom:var(--eui-base-spacing-m);left:var(--eui-base-spacing-m);right:var(--eui-base-spacing-m);color:#fff}.euim-media-header__text h1,.euim-media-header__text h2,.euim-media-header__text h3,.euim-media-header__text h4,.euim-media-header__text h5,.euim-media-header__text h6{margin-bottom:var(--eui-base-spacing-2xs)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--eui-base-color-black));background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__size-s{height:calc(var(--eui-base-spacing-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-base-spacing-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-base-spacing-m) * 25)}\n"] }]
|
|
2241
2241
|
}], propDecorators: { euimNoGradient: [{
|
|
2242
2242
|
type: Input
|
|
2243
2243
|
}], euimSizeS: [{
|
|
@@ -2691,27 +2691,27 @@ class EuimInfoScreenComponent extends EuimBaseDirective {
|
|
|
2691
2691
|
].join(' ');
|
|
2692
2692
|
}
|
|
2693
2693
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2694
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimInfoScreenComponent, selector: "euim-info-screen", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-info-screen__title{font
|
|
2694
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimInfoScreenComponent, selector: "euim-info-screen", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-info-screen__title{font:normal normal 400 1.75rem/2rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-info-screen__title+.euim-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-info-screen__sub-title+.euim-info-screen__content,title+.euim-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2695
2695
|
}
|
|
2696
2696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenComponent, decorators: [{
|
|
2697
2697
|
type: Component,
|
|
2698
|
-
args: [{ selector: 'euim-info-screen', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".euim-info-screen__title{font
|
|
2698
|
+
args: [{ selector: 'euim-info-screen', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".euim-info-screen__title{font:normal normal 400 1.75rem/2rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-info-screen__title+.euim-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-info-screen__sub-title+.euim-info-screen__content,title+.euim-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"] }]
|
|
2699
2699
|
}], propDecorators: { cssClasses: [{
|
|
2700
2700
|
type: HostBinding,
|
|
2701
2701
|
args: ['class']
|
|
2702
2702
|
}] } });
|
|
2703
2703
|
|
|
2704
|
-
class
|
|
2704
|
+
class EuimInfoScreenContentDirective {
|
|
2705
2705
|
constructor() {
|
|
2706
|
-
this.className = 'euim-info-
|
|
2706
|
+
this.className = 'euim-info-screen__content';
|
|
2707
2707
|
}
|
|
2708
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type:
|
|
2709
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type:
|
|
2708
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2709
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimInfoScreenContentDirective, selector: "[euimInfoScreenContent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
|
|
2710
2710
|
}
|
|
2711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type:
|
|
2711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenContentDirective, decorators: [{
|
|
2712
2712
|
type: Directive,
|
|
2713
2713
|
args: [{
|
|
2714
|
-
selector: '[
|
|
2714
|
+
selector: '[euimInfoScreenContent]',
|
|
2715
2715
|
}]
|
|
2716
2716
|
}], propDecorators: { className: [{
|
|
2717
2717
|
type: HostBinding,
|
|
@@ -2755,18 +2755,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2755
2755
|
const COMPONENTS$2 = [
|
|
2756
2756
|
EuimInfoScreenComponent,
|
|
2757
2757
|
EuimInfoScreenTitleDirective,
|
|
2758
|
-
|
|
2758
|
+
EuimInfoScreenContentDirective,
|
|
2759
2759
|
EuimInfoScreenSubTitleDirective,
|
|
2760
2760
|
];
|
|
2761
2761
|
class EuimInfoScreenModule {
|
|
2762
2762
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2763
2763
|
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenModule, declarations: [EuimInfoScreenComponent,
|
|
2764
2764
|
EuimInfoScreenTitleDirective,
|
|
2765
|
-
|
|
2765
|
+
EuimInfoScreenContentDirective,
|
|
2766
2766
|
EuimInfoScreenSubTitleDirective], imports: [CommonModule,
|
|
2767
2767
|
IonicModule], exports: [EuimInfoScreenComponent,
|
|
2768
2768
|
EuimInfoScreenTitleDirective,
|
|
2769
|
-
|
|
2769
|
+
EuimInfoScreenContentDirective,
|
|
2770
2770
|
EuimInfoScreenSubTitleDirective] }); }
|
|
2771
2771
|
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenModule, imports: [CommonModule,
|
|
2772
2772
|
IonicModule] }); }
|
|
@@ -2788,6 +2788,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2788
2788
|
}] });
|
|
2789
2789
|
|
|
2790
2790
|
class EuimSliderComponent {
|
|
2791
|
+
get actionBtnNames() {
|
|
2792
|
+
return this._actionBtnNames;
|
|
2793
|
+
}
|
|
2794
|
+
set actionBtnNames(value) {
|
|
2795
|
+
this._actionBtnNames = value;
|
|
2796
|
+
}
|
|
2791
2797
|
constructor(renderer, gestureCtrl, sliderElement, cdr) {
|
|
2792
2798
|
this.renderer = renderer;
|
|
2793
2799
|
this.gestureCtrl = gestureCtrl;
|
|
@@ -2795,43 +2801,31 @@ class EuimSliderComponent {
|
|
|
2795
2801
|
this.cdr = cdr;
|
|
2796
2802
|
this.actionClicked = new EventEmitter();
|
|
2797
2803
|
this.lastStepActionClicked = new EventEmitter();
|
|
2804
|
+
this.leftBtnActionClicked = new EventEmitter();
|
|
2805
|
+
this.isLastItemReached = false;
|
|
2806
|
+
this.isLeftBtnVisible = false;
|
|
2807
|
+
this.isPreviousBtn = false;
|
|
2808
|
+
this.isNextBtn = false;
|
|
2798
2809
|
this.slidesArray = [];
|
|
2799
2810
|
this.currentSlide = 0;
|
|
2800
2811
|
this.startX = 0;
|
|
2801
2812
|
this._actionBtnNames = {
|
|
2802
|
-
|
|
2803
|
-
|
|
2813
|
+
actionBtnName: 'Skip',
|
|
2814
|
+
lastStepActionBtnName: 'Done',
|
|
2815
|
+
leftActionBtnName: 'Previous',
|
|
2804
2816
|
};
|
|
2805
|
-
this._isLastItemReached = false;
|
|
2806
|
-
}
|
|
2807
|
-
get actionBtnNames() {
|
|
2808
|
-
return this._actionBtnNames;
|
|
2809
|
-
}
|
|
2810
|
-
set actionBtnNames(value) {
|
|
2811
|
-
this._actionBtnNames = value;
|
|
2812
|
-
}
|
|
2813
|
-
get isLastItemReached() {
|
|
2814
|
-
return this._isLastItemReached;
|
|
2815
|
-
}
|
|
2816
|
-
set isLastItemReached(value) {
|
|
2817
|
-
this._isLastItemReached = value;
|
|
2818
2817
|
}
|
|
2819
2818
|
get cssClasses() {
|
|
2820
2819
|
return this.getCssClasses();
|
|
2821
2820
|
}
|
|
2821
|
+
onResize(event) {
|
|
2822
|
+
this.setSliderStyles();
|
|
2823
|
+
}
|
|
2822
2824
|
getCssClasses() {
|
|
2823
2825
|
return ['euim-slider'].join(' ');
|
|
2824
2826
|
}
|
|
2825
2827
|
ngAfterViewInit() {
|
|
2826
|
-
this.
|
|
2827
|
-
this.renderer.setStyle(this.slides.nativeElement, 'width', `${this.slidesArray.length * 100}%`);
|
|
2828
|
-
for (const slide of this.slidesArray) {
|
|
2829
|
-
this.renderer.setStyle(slide, 'width', `${100 / this.slidesArray.length}%`);
|
|
2830
|
-
}
|
|
2831
|
-
// to calculate the case when there is only one slide
|
|
2832
|
-
if (!this._isLastItemReached && this.slidesArray.length < 2) {
|
|
2833
|
-
this._isLastItemReached = true;
|
|
2834
|
-
}
|
|
2828
|
+
this.setSliderStyles();
|
|
2835
2829
|
}
|
|
2836
2830
|
ngOnInit() {
|
|
2837
2831
|
const gesture = this.gestureCtrl.create({
|
|
@@ -2843,6 +2837,22 @@ class EuimSliderComponent {
|
|
|
2843
2837
|
});
|
|
2844
2838
|
gesture.enable();
|
|
2845
2839
|
}
|
|
2840
|
+
setSliderStyles() {
|
|
2841
|
+
const windowHeight = window.innerHeight;
|
|
2842
|
+
const paginationHeight = 60;
|
|
2843
|
+
const slideHeight = windowHeight - paginationHeight;
|
|
2844
|
+
this.slidesArray = this.slides.nativeElement.children;
|
|
2845
|
+
this.renderer.setStyle(this.slides.nativeElement, 'width', `${this.slidesArray.length * 100}%`);
|
|
2846
|
+
for (const slide of this.slidesArray) {
|
|
2847
|
+
this.renderer.setStyle(slide, 'width', `${100 / this.slidesArray.length}%`);
|
|
2848
|
+
this.renderer.setStyle(slide, 'maxHeight', `${slideHeight}px`);
|
|
2849
|
+
this.renderer.setStyle(slide, 'overflow', 'scroll');
|
|
2850
|
+
}
|
|
2851
|
+
// to calculate the case when there is only one slide
|
|
2852
|
+
if (!this.isLastItemReached && this.slidesArray.length < 2) {
|
|
2853
|
+
this.isLastItemReached = true;
|
|
2854
|
+
}
|
|
2855
|
+
}
|
|
2846
2856
|
handleTouchEnd(e) {
|
|
2847
2857
|
const difference = -e.deltaX;
|
|
2848
2858
|
if (difference > 0 && this.currentSlide < this.slidesArray.length - 1) {
|
|
@@ -2861,18 +2871,53 @@ class EuimSliderComponent {
|
|
|
2861
2871
|
this.currentSlide = index;
|
|
2862
2872
|
this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
|
|
2863
2873
|
}
|
|
2874
|
+
goToPreviousSlide() {
|
|
2875
|
+
if (this.currentSlide > 0) {
|
|
2876
|
+
this.currentSlide--;
|
|
2877
|
+
this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
|
|
2878
|
+
}
|
|
2879
|
+
}
|
|
2880
|
+
goToNextSlide() {
|
|
2881
|
+
if (this.currentSlide < this.slidesArray.length - 1) {
|
|
2882
|
+
this.currentSlide++;
|
|
2883
|
+
this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
|
|
2884
|
+
}
|
|
2885
|
+
}
|
|
2864
2886
|
onAction(event) {
|
|
2887
|
+
if (this.isNextBtn) {
|
|
2888
|
+
this.goToNextSlide();
|
|
2889
|
+
return;
|
|
2890
|
+
}
|
|
2865
2891
|
this.actionClicked.emit(event);
|
|
2866
2892
|
}
|
|
2867
2893
|
onLastStepAction(event) {
|
|
2868
2894
|
this.lastStepActionClicked.emit(event);
|
|
2869
2895
|
}
|
|
2896
|
+
onLeftBtnAction(event) {
|
|
2897
|
+
if (this.isPreviousBtn) {
|
|
2898
|
+
this.goToPreviousSlide();
|
|
2899
|
+
return;
|
|
2900
|
+
}
|
|
2901
|
+
this.leftBtnActionClicked.emit(event);
|
|
2902
|
+
}
|
|
2870
2903
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i1.GestureController }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2871
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSliderComponent, selector: "euim-slider", inputs: { actionBtnNames: "actionBtnNames" }, outputs: { actionClicked: "actionClicked", lastStepActionClicked: "lastStepActionClicked" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider__slider-container\">\n <div #slides class=\"euim-slider__slides\">\n <ng-content></ng-content>\n </div>\n <div class=\"euim-slider__pagination-container\">\n <div class=\"euim-slider__pagination\">\n <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n [ngClass]=\"{ 'active': currentSlide === i }\"\n class=\"euim-slider__span\"></span>\n </div>\n <ion-button (click)=\"onAction($event)\" *ngIf=!isLastItemReached class=\"euim-slider__action-button\"\n fill=\"clear\">{{actionBtnNames.
|
|
2904
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSliderComponent, selector: "euim-slider", inputs: { actionBtnNames: "actionBtnNames", isLastItemReached: "isLastItemReached", isLeftBtnVisible: "isLeftBtnVisible", isPreviousBtn: "isPreviousBtn", isNextBtn: "isNextBtn" }, outputs: { actionClicked: "actionClicked", lastStepActionClicked: "lastStepActionClicked", leftBtnActionClicked: "leftBtnActionClicked" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider__slider-container\">\n <div #slides class=\"euim-slider__slides\">\n <ng-content></ng-content>\n </div>\n <div class=\"euim-slider__pagination-container\">\n <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=isLeftBtnVisible class=\"euim-slider__action-button euim-slider__action-button--left\"\n fill=\"clear\">{{actionBtnNames.leftActionBtnName}}</ion-button>\n <div class=\"euim-slider__pagination\">\n <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n [ngClass]=\"{ 'active': currentSlide === i }\"\n class=\"euim-slider__span\"></span>\n </div>\n <ion-button (click)=\"onAction($event)\" *ngIf=!isLastItemReached class=\"euim-slider__action-button euim-slider__action-button--right\"\n fill=\"clear\">{{actionBtnNames.actionBtnName}}</ion-button>\n <ion-button (click)=\"onLastStepAction($event)\" *ngIf=isLastItemReached class=\"euim-slider__action-button euim-slider__action-button--right\"\n fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n </div>\n</div>\n", styles: [".euim-slider__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider__slides{display:flex;transition:all .5s ease;width:100%}.euim-slider__slide{width:100%}.euim-slider__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider__pagination{display:flex}.euim-slider__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary)}.euim-slider__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider__span.active{background-color:var(--eui-base-color-primary)}.euim-slider__action-button{position:absolute;color:var(--eui-base-color-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
|
|
2872
2905
|
}
|
|
2906
|
+
__decorate([
|
|
2907
|
+
coerceBoolean
|
|
2908
|
+
], EuimSliderComponent.prototype, "isLastItemReached", void 0);
|
|
2909
|
+
__decorate([
|
|
2910
|
+
coerceBoolean
|
|
2911
|
+
], EuimSliderComponent.prototype, "isLeftBtnVisible", void 0);
|
|
2912
|
+
__decorate([
|
|
2913
|
+
coerceBoolean
|
|
2914
|
+
], EuimSliderComponent.prototype, "isPreviousBtn", void 0);
|
|
2915
|
+
__decorate([
|
|
2916
|
+
coerceBoolean
|
|
2917
|
+
], EuimSliderComponent.prototype, "isNextBtn", void 0);
|
|
2873
2918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSliderComponent, decorators: [{
|
|
2874
2919
|
type: Component,
|
|
2875
|
-
args: [{ selector: 'euim-slider', template: "<div #sliderElement class=\"euim-slider__slider-container\">\n <div #slides class=\"euim-slider__slides\">\n <ng-content></ng-content>\n </div>\n <div class=\"euim-slider__pagination-container\">\n <div class=\"euim-slider__pagination\">\n <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n [ngClass]=\"{ 'active': currentSlide === i }\"\n class=\"euim-slider__span\"></span>\n </div>\n <ion-button (click)=\"onAction($event)\" *ngIf=!isLastItemReached class=\"euim-slider__action-button\"\n fill=\"clear\">{{actionBtnNames.
|
|
2920
|
+
args: [{ selector: 'euim-slider', template: "<div #sliderElement class=\"euim-slider__slider-container\">\n <div #slides class=\"euim-slider__slides\">\n <ng-content></ng-content>\n </div>\n <div class=\"euim-slider__pagination-container\">\n <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=isLeftBtnVisible class=\"euim-slider__action-button euim-slider__action-button--left\"\n fill=\"clear\">{{actionBtnNames.leftActionBtnName}}</ion-button>\n <div class=\"euim-slider__pagination\">\n <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n [ngClass]=\"{ 'active': currentSlide === i }\"\n class=\"euim-slider__span\"></span>\n </div>\n <ion-button (click)=\"onAction($event)\" *ngIf=!isLastItemReached class=\"euim-slider__action-button euim-slider__action-button--right\"\n fill=\"clear\">{{actionBtnNames.actionBtnName}}</ion-button>\n <ion-button (click)=\"onLastStepAction($event)\" *ngIf=isLastItemReached class=\"euim-slider__action-button euim-slider__action-button--right\"\n fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n </div>\n</div>\n", styles: [".euim-slider__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider__slides{display:flex;transition:all .5s ease;width:100%}.euim-slider__slide{width:100%}.euim-slider__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider__pagination{display:flex}.euim-slider__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary)}.euim-slider__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider__span.active{background-color:var(--eui-base-color-primary)}.euim-slider__action-button{position:absolute;color:var(--eui-base-color-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}\n"] }]
|
|
2876
2921
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { slides: [{
|
|
2877
2922
|
type: ViewChild,
|
|
2878
2923
|
args: ['slides', { static: true }]
|
|
@@ -2880,11 +2925,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2880
2925
|
type: Output
|
|
2881
2926
|
}], lastStepActionClicked: [{
|
|
2882
2927
|
type: Output
|
|
2928
|
+
}], leftBtnActionClicked: [{
|
|
2929
|
+
type: Output
|
|
2883
2930
|
}], actionBtnNames: [{
|
|
2884
2931
|
type: Input
|
|
2932
|
+
}], isLastItemReached: [{
|
|
2933
|
+
type: Input
|
|
2934
|
+
}], isLeftBtnVisible: [{
|
|
2935
|
+
type: Input
|
|
2936
|
+
}], isPreviousBtn: [{
|
|
2937
|
+
type: Input
|
|
2938
|
+
}], isNextBtn: [{
|
|
2939
|
+
type: Input
|
|
2885
2940
|
}], cssClasses: [{
|
|
2886
2941
|
type: HostBinding,
|
|
2887
2942
|
args: ['class']
|
|
2943
|
+
}], onResize: [{
|
|
2944
|
+
type: HostListener,
|
|
2945
|
+
args: ['window:resize', ['$event']]
|
|
2888
2946
|
}] } });
|
|
2889
2947
|
|
|
2890
2948
|
class EuimSlideComponent {
|
|
@@ -3389,5 +3447,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3389
3447
|
* Generated bundle index. Do not edit.
|
|
3390
3448
|
*/
|
|
3391
3449
|
|
|
3392
|
-
export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAppSidebarComponent, EuimAppSidebarFooterComponent, EuimAppSidebarHeaderComponent, EuimAppSidebarMenuComponent, EuimAppSidebarModule, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimControlFeedbackComponent, EuimControlFeedbackModule, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimFieldSetComponent, EuimFieldsetActionsComponent, EuimFieldsetLegendComponent, EuimFieldsetModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimInfoScreenComponent,
|
|
3450
|
+
export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAppSidebarComponent, EuimAppSidebarFooterComponent, EuimAppSidebarHeaderComponent, EuimAppSidebarMenuComponent, EuimAppSidebarModule, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimControlFeedbackComponent, EuimControlFeedbackModule, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimFieldSetComponent, EuimFieldsetActionsComponent, EuimFieldsetLegendComponent, EuimFieldsetModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimInfoScreenComponent, EuimInfoScreenContentDirective, EuimInfoScreenModule, EuimInfoScreenSubTitleDirective, EuimInfoScreenTitleDirective, EuimItemDividerDirective, EuimItemDividerModule, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimListHeaderDirective, EuimListHeaderModule, EuimMediaHeaderComponent, EuimMediaHeaderImageDirective, EuimMediaHeaderMetaDirective, EuimMediaHeaderModule, EuimMediaHeaderTitleDirective, EuimMenuComponent, EuimMenuModule, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarModule, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideComponent, EuimSliderComponent, EuimSliderModule, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimStepperChangeEvent, EuimStepperComponent, EuimStepperComponentModule, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarTitleComponent, EuimUserProfileComponent, EuimUserProfileModule };
|
|
3393
3451
|
//# sourceMappingURL=eui-mobile-core.mjs.map
|