@kms-ngx-ui/presentational 14.1.3 → 14.2.0
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/esm2020/lib/services/viewport.service.mjs +44 -11
- package/esm2020/lib/ui/dropdown-from-data/dropdown-from-data.component.mjs +6 -4
- package/esm2020/lib/ui/image-slider/image-slider.component.mjs +3 -3
- package/esm2020/lib/ui/kms-accordion-item/kms-accordion-item.component.mjs +8 -8
- package/fesm2015/kms-ngx-ui-presentational.mjs +58 -23
- package/fesm2015/kms-ngx-ui-presentational.mjs.map +1 -1
- package/fesm2020/kms-ngx-ui-presentational.mjs +58 -23
- package/fesm2020/kms-ngx-ui-presentational.mjs.map +1 -1
- package/lib/services/viewport.service.d.ts +31 -5
- package/lib/ui/dropdown-from-data/dropdown-from-data.component.d.ts +3 -2
- package/lib/ui/kms-accordion-item/kms-accordion-item.component.d.ts +2 -2
- package/package.json +1 -1
- package/src/lib/ui/image-slider/image-slider.component.scss +209 -202
|
@@ -1640,34 +1640,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1640
1640
|
class KMSAccordionItemComponent {
|
|
1641
1641
|
constructor(sanitizer) {
|
|
1642
1642
|
this.sanitizer = sanitizer;
|
|
1643
|
-
this.itemTitle = '';
|
|
1644
1643
|
this.showAsCard = false;
|
|
1645
1644
|
this.isSmall = false;
|
|
1646
1645
|
this.expanded = false;
|
|
1647
1646
|
this.panelOpenState = false;
|
|
1648
1647
|
}
|
|
1649
|
-
|
|
1650
|
-
this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(
|
|
1648
|
+
set itemTitle(val) {
|
|
1649
|
+
this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(val);
|
|
1651
1650
|
}
|
|
1651
|
+
ngOnInit() { }
|
|
1652
1652
|
}
|
|
1653
1653
|
KMSAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1654
|
-
KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: {
|
|
1654
|
+
KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n class=\"accordion-item\"\n [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n (opened)=\"panelOpenState = true\"\n (closed)=\"panelOpenState = false\"\n [expanded] = \"expanded\"\n hideToggle=\"true\">\n <mat-expansion-panel-header class=\"accordion-item-header\">\n <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n <ng-content select=\"[itemTitleElement]\"></ng-content>\n </mat-panel-title>\n <div class=\"accordion-item-header-icon-wrapper\">\n <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n </div>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
|
|
1655
1655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
|
|
1656
1656
|
type: Component,
|
|
1657
1657
|
args: [{ selector: 'kms-accordion-item', template: "<mat-expansion-panel\n class=\"accordion-item\"\n [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n (opened)=\"panelOpenState = true\"\n (closed)=\"panelOpenState = false\"\n [expanded] = \"expanded\"\n hideToggle=\"true\">\n <mat-expansion-panel-header class=\"accordion-item-header\">\n <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n <ng-content select=\"[itemTitleElement]\"></ng-content>\n </mat-panel-title>\n <div class=\"accordion-item-header-icon-wrapper\">\n <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n </div>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n</mat-expansion-panel>\n" }]
|
|
1658
|
-
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: {
|
|
1659
|
-
type: Input
|
|
1660
|
-
}], showAsCard: [{
|
|
1658
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { showAsCard: [{
|
|
1661
1659
|
type: Input
|
|
1662
1660
|
}], isSmall: [{
|
|
1663
1661
|
type: Input
|
|
1664
1662
|
}], expanded: [{
|
|
1665
1663
|
type: Input
|
|
1664
|
+
}], itemTitle: [{
|
|
1665
|
+
type: Input
|
|
1666
1666
|
}] } });
|
|
1667
1667
|
|
|
1668
1668
|
/**
|
|
1669
1669
|
* @copyright KMS GmbH
|
|
1670
1670
|
*/
|
|
1671
|
+
class WindowDimensions {
|
|
1672
|
+
constructor(data) {
|
|
1673
|
+
Object.assign(this, data);
|
|
1674
|
+
}
|
|
1675
|
+
}
|
|
1671
1676
|
class SimpleBreakpoint {
|
|
1672
1677
|
constructor(data) {
|
|
1673
1678
|
Object.assign(this, data);
|
|
@@ -1746,13 +1751,13 @@ class ViewportService {
|
|
|
1746
1751
|
}
|
|
1747
1752
|
}
|
|
1748
1753
|
/**
|
|
1749
|
-
* Get
|
|
1754
|
+
* Get document height
|
|
1750
1755
|
*/
|
|
1751
1756
|
getDocumentHeight() {
|
|
1752
1757
|
return this.isBrowser ? document.body.clientHeight : 1200;
|
|
1753
1758
|
}
|
|
1754
1759
|
/**
|
|
1755
|
-
* Get
|
|
1760
|
+
* Get document width
|
|
1756
1761
|
*/
|
|
1757
1762
|
getDocumentWidth() {
|
|
1758
1763
|
return this.isBrowser ? document.body.clientWidth : 1200;
|
|
@@ -1793,11 +1798,33 @@ class ViewportService {
|
|
|
1793
1798
|
}
|
|
1794
1799
|
/**
|
|
1795
1800
|
* Returns the current viewport as number
|
|
1801
|
+
* @deprecated use getCurrentViewPortDimensions instead
|
|
1796
1802
|
* @returns string
|
|
1797
1803
|
*/
|
|
1798
1804
|
getCurrentViewPortNumber() {
|
|
1799
1805
|
return this.isBrowser ? document.body.clientWidth : 1200;
|
|
1800
1806
|
}
|
|
1807
|
+
/**
|
|
1808
|
+
* Returns the current viewport width as number
|
|
1809
|
+
* @returns string
|
|
1810
|
+
*/
|
|
1811
|
+
getCurrentViewPortWidth() {
|
|
1812
|
+
return this.isBrowser ? document.body.clientWidth : 1200;
|
|
1813
|
+
}
|
|
1814
|
+
/**
|
|
1815
|
+
* Returns the current viewport as number
|
|
1816
|
+
* @returns string
|
|
1817
|
+
*/
|
|
1818
|
+
getCurrentViewPortHeight() {
|
|
1819
|
+
return this.isBrowser ? document.body.clientHeight : 600;
|
|
1820
|
+
}
|
|
1821
|
+
/**
|
|
1822
|
+
* Returns the current viewport dimensions
|
|
1823
|
+
* @returns string
|
|
1824
|
+
*/
|
|
1825
|
+
getCurrentViewPortDimensions() {
|
|
1826
|
+
return this.isBrowser ? { Width: document.body.clientWidth, Height: document.body.clientWidth, Orientation: this.getOrientationAsString() } : { Width: 800, Height: 600, Orientation: "landscape" };
|
|
1827
|
+
}
|
|
1801
1828
|
/**
|
|
1802
1829
|
* Provides mq´s as string
|
|
1803
1830
|
*/
|
|
@@ -1860,7 +1887,7 @@ class ViewportService {
|
|
|
1860
1887
|
if (this.isBrowser)
|
|
1861
1888
|
return window.innerHeight > window.innerWidth;
|
|
1862
1889
|
else
|
|
1863
|
-
return;
|
|
1890
|
+
return undefined;
|
|
1864
1891
|
}
|
|
1865
1892
|
/**
|
|
1866
1893
|
* If orientation is landscape
|
|
@@ -1871,9 +1898,15 @@ class ViewportService {
|
|
|
1871
1898
|
return isLandscape;
|
|
1872
1899
|
}
|
|
1873
1900
|
else {
|
|
1874
|
-
return;
|
|
1901
|
+
return undefined;
|
|
1875
1902
|
}
|
|
1876
1903
|
}
|
|
1904
|
+
/**
|
|
1905
|
+
* Get screen orientation (portrait/landscape)
|
|
1906
|
+
*/
|
|
1907
|
+
getOrientationAsString() {
|
|
1908
|
+
return this.isPortrait ? "portrait" : "landscape";
|
|
1909
|
+
}
|
|
1877
1910
|
/**
|
|
1878
1911
|
* If mobile breakpoint (below tablet)
|
|
1879
1912
|
*/
|
|
@@ -1885,6 +1918,12 @@ class ViewportService {
|
|
|
1885
1918
|
* @deprecated
|
|
1886
1919
|
*/
|
|
1887
1920
|
calculateFullscreenElementsheight(id, defaultheight, extra) {
|
|
1921
|
+
return this.calculateFullscreenElementsHeight(id, defaultheight, extra);
|
|
1922
|
+
}
|
|
1923
|
+
/**
|
|
1924
|
+
* Get height of an element
|
|
1925
|
+
*/
|
|
1926
|
+
calculateFullscreenElementsHeight(id, defaultheight, extra) {
|
|
1888
1927
|
if (!this.isBrowser || this.isMobile()) {
|
|
1889
1928
|
return defaultheight;
|
|
1890
1929
|
}
|
|
@@ -1900,12 +1939,6 @@ class ViewportService {
|
|
|
1900
1939
|
}
|
|
1901
1940
|
}
|
|
1902
1941
|
}
|
|
1903
|
-
/**
|
|
1904
|
-
* Get height of an element
|
|
1905
|
-
*/
|
|
1906
|
-
calculateFullscreenElementsHeight(id, defaultheight, extra) {
|
|
1907
|
-
return this.calculateFullscreenElementsheight(id, defaultheight, extra);
|
|
1908
|
-
}
|
|
1909
1942
|
/**
|
|
1910
1943
|
* If viewport changed
|
|
1911
1944
|
* @event
|
|
@@ -2484,13 +2517,13 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
2484
2517
|
}
|
|
2485
2518
|
}
|
|
2486
2519
|
DropdownFromDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2487
|
-
DropdownFromDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple" }, providers: [
|
|
2520
|
+
DropdownFromDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple", control: "control" }, providers: [
|
|
2488
2521
|
{
|
|
2489
2522
|
provide: NG_VALUE_ACCESSOR,
|
|
2490
2523
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
2491
2524
|
multi: true,
|
|
2492
2525
|
},
|
|
2493
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required\"\n [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n >\n <mat-label>{{ label }}</mat-label>\n <mat-select\n placeholder=\"{{ placeholder }}\"\n disableOptionCentering\n [(value)]=\"value\"\n (selectionChange)=\"valueChanged($event?.value)\"\n #child\n [disabled]=\"disabled\"\n [multiple]=\"multiple\"\n >\n <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n <span>{{ setDisplayKey(key) }}</span>\n </mat-option>\n </mat-select>\n </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
|
|
2526
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required\"\n [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n >\n <mat-label>{{ label }}</mat-label>\n <mat-select\n placeholder=\"{{ placeholder }}\"\n disableOptionCentering\n [(value)]=\"control?.value ? control.value : value\"\n (selectionChange)=\"valueChanged($event?.value)\"\n #child\n [disabled]=\"disabled\"\n [multiple]=\"multiple\"\n >\n <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n <span>{{ setDisplayKey(key) }}</span>\n </mat-option>\n </mat-select>\n </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
|
|
2494
2527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
|
|
2495
2528
|
type: Component,
|
|
2496
2529
|
args: [{ selector: 'kms-dropdown-from-data', providers: [
|
|
@@ -2499,7 +2532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2499
2532
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
2500
2533
|
multi: true,
|
|
2501
2534
|
},
|
|
2502
|
-
], template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required\"\n [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n >\n <mat-label>{{ label }}</mat-label>\n <mat-select\n placeholder=\"{{ placeholder }}\"\n disableOptionCentering\n [(value)]=\"value\"\n (selectionChange)=\"valueChanged($event?.value)\"\n #child\n [disabled]=\"disabled\"\n [multiple]=\"multiple\"\n >\n <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n <span>{{ setDisplayKey(key) }}</span>\n </mat-option>\n </mat-select>\n </mat-form-field>\n</form>\n" }]
|
|
2535
|
+
], template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required\"\n [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n >\n <mat-label>{{ label }}</mat-label>\n <mat-select\n placeholder=\"{{ placeholder }}\"\n disableOptionCentering\n [(value)]=\"control?.value ? control.value : value\"\n (selectionChange)=\"valueChanged($event?.value)\"\n #child\n [disabled]=\"disabled\"\n [multiple]=\"multiple\"\n >\n <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n <span>{{ setDisplayKey(key) }}</span>\n </mat-option>\n </mat-select>\n </mat-form-field>\n</form>\n" }]
|
|
2503
2536
|
}], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { optionsEnum: [{
|
|
2504
2537
|
type: Input
|
|
2505
2538
|
}], optionsPlainArray: [{
|
|
@@ -2524,6 +2557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2524
2557
|
type: Input
|
|
2525
2558
|
}], multiple: [{
|
|
2526
2559
|
type: Input
|
|
2560
|
+
}], control: [{
|
|
2561
|
+
type: Input
|
|
2527
2562
|
}] } });
|
|
2528
2563
|
|
|
2529
2564
|
/*!
|
|
@@ -2861,10 +2896,10 @@ class ImageSliderComponent {
|
|
|
2861
2896
|
}
|
|
2862
2897
|
}
|
|
2863
2898
|
ImageSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2864
|
-
ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"all-wrapper\">\n
|
|
2899
|
+
ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"all-wrapper\">\n <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n <div\n class=\"swiper-bigImage\"\n [style.backgroundImage]=\"selectedSlideImage\"\n [swipeDirective]=\"swipeConfig\"\n (moveEvent)=\"handleMoveEvent($event)\"\n (releaseEvent)=\"handleReleaseEvent($event)\"\n (mouseup)=\"lastClicked()\"\n (mouseout)=\"noLastClicked()\"\n ></div>\n\n <ng-content select=\"[description]\"></ng-content>\n\n <div class=\"swiper-holder\">\n <!--\n (mouseWheelUp)=\"scrollLeft($event)\"\n (mouseWheelDown)=\"scrollRight($event)\"\n -->\n\n <swiper [config]=\"config\" #usefulSwiper>\n <div\n class=\"swiper-wrapper\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n cdkDropListOrientation=\"horizontal\"\n >\n <div\n class=\"swiper-slide\"\n *ngFor=\"let slide of slides; let index = index\"\n cdkDrag\n [cdkDragDisabled]=\"!editMode\"\n >\n <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\">\n <kms-icon icon=\"trash\"></kms-icon>\n </button>\n <div\n class=\"img\"\n (click)=\"openSlide(index)\"\n [style.backgroundImage]=\"\n sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\n \"\n [ngClass]=\"{ active: index === selectedSlide }\"\n ></div>\n\n <div class=\"default-image\">\n {{ \"common.defaultImage\" | translate }}\n </div>\n </div>\n </div>\n </swiper>\n\n <button\n class=\"swiper-button-next\"\n (click)=\"nextSlide()\"\n *ngIf=\"slides?.length > 3\"\n > </button>\n <button\n class=\"swiper-button-prev\"\n (click)=\"previousSlide()\"\n *ngIf=\"slides?.length > 3\"\n > </button>\n\n <div\n class=\"swiper-button-next2\"\n *ngIf=\"slides?.length > 1\"\n (click)=\"nextSlide()\"\n >\n <kms-icon\n icon=\"chevron-right\"\n [iconClass]=\"{\n 'color-disabled': selectedSlide == slides?.length - 1,\n 'color-primary': true\n }\"\n ></kms-icon>\n </div>\n <div\n class=\"swiper-button-prev2\"\n *ngIf=\"slides?.length > 1\"\n (click)=\"previousSlide()\"\n >\n <kms-icon\n icon=\"chevron-left\"\n [iconClass]=\"{\n 'color-disabled': selectedSlide == 0,\n 'color-primary': true\n }\"\n ></kms-icon>\n </div>\n </div>\n\n <ng-content></ng-content>\n</div>\n", styles: [""], 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: "directive", type: i3$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { kind: "component", type: i6$1.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
|
|
2865
2900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageSliderComponent, decorators: [{
|
|
2866
2901
|
type: Component,
|
|
2867
|
-
args: [{ selector: 'kms-image-slider', template: "<div class=\"all-wrapper\">\n
|
|
2902
|
+
args: [{ selector: 'kms-image-slider', template: "<div class=\"all-wrapper\">\n <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n <div\n class=\"swiper-bigImage\"\n [style.backgroundImage]=\"selectedSlideImage\"\n [swipeDirective]=\"swipeConfig\"\n (moveEvent)=\"handleMoveEvent($event)\"\n (releaseEvent)=\"handleReleaseEvent($event)\"\n (mouseup)=\"lastClicked()\"\n (mouseout)=\"noLastClicked()\"\n ></div>\n\n <ng-content select=\"[description]\"></ng-content>\n\n <div class=\"swiper-holder\">\n <!--\n (mouseWheelUp)=\"scrollLeft($event)\"\n (mouseWheelDown)=\"scrollRight($event)\"\n -->\n\n <swiper [config]=\"config\" #usefulSwiper>\n <div\n class=\"swiper-wrapper\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n cdkDropListOrientation=\"horizontal\"\n >\n <div\n class=\"swiper-slide\"\n *ngFor=\"let slide of slides; let index = index\"\n cdkDrag\n [cdkDragDisabled]=\"!editMode\"\n >\n <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\">\n <kms-icon icon=\"trash\"></kms-icon>\n </button>\n <div\n class=\"img\"\n (click)=\"openSlide(index)\"\n [style.backgroundImage]=\"\n sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\n \"\n [ngClass]=\"{ active: index === selectedSlide }\"\n ></div>\n\n <div class=\"default-image\">\n {{ \"common.defaultImage\" | translate }}\n </div>\n </div>\n </div>\n </swiper>\n\n <button\n class=\"swiper-button-next\"\n (click)=\"nextSlide()\"\n *ngIf=\"slides?.length > 3\"\n > </button>\n <button\n class=\"swiper-button-prev\"\n (click)=\"previousSlide()\"\n *ngIf=\"slides?.length > 3\"\n > </button>\n\n <div\n class=\"swiper-button-next2\"\n *ngIf=\"slides?.length > 1\"\n (click)=\"nextSlide()\"\n >\n <kms-icon\n icon=\"chevron-right\"\n [iconClass]=\"{\n 'color-disabled': selectedSlide == slides?.length - 1,\n 'color-primary': true\n }\"\n ></kms-icon>\n </div>\n <div\n class=\"swiper-button-prev2\"\n *ngIf=\"slides?.length > 1\"\n (click)=\"previousSlide()\"\n >\n <kms-icon\n icon=\"chevron-left\"\n [iconClass]=\"{\n 'color-disabled': selectedSlide == 0,\n 'color-primary': true\n }\"\n ></kms-icon>\n </div>\n </div>\n\n <ng-content></ng-content>\n</div>\n" }]
|
|
2868
2903
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { slides: [{
|
|
2869
2904
|
type: Input
|
|
2870
2905
|
}], editMode: [{
|
|
@@ -3155,5 +3190,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3155
3190
|
* Generated bundle index. Do not edit.
|
|
3156
3191
|
*/
|
|
3157
3192
|
|
|
3158
|
-
export { ActionsParentComponent, BackToTopComponent, Breakpoint, ButtonWithConfirmDialogComponent, CheckboxComponent, ColorInputComponent, CustomPipesModule, DecodeUriPipe, DirectivesModule, DropdownFromDataComponent, EncodeUriPipe, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GenericDialogComponent, GetMaxHeightDirective, IconComponent, IconSize, ImageSliderComponent, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, MouseWheelDirective, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeStylePipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SizeDirective, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, YesNoRadiogroupComponent };
|
|
3193
|
+
export { ActionsParentComponent, BackToTopComponent, Breakpoint, ButtonWithConfirmDialogComponent, CheckboxComponent, ColorInputComponent, CustomPipesModule, DecodeUriPipe, DirectivesModule, DropdownFromDataComponent, EncodeUriPipe, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GenericDialogComponent, GetMaxHeightDirective, IconComponent, IconSize, ImageSliderComponent, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, MouseWheelDirective, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeStylePipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SizeDirective, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent };
|
|
3159
3194
|
//# sourceMappingURL=kms-ngx-ui-presentational.mjs.map
|