@recursyve/nice-ui-kit.v2 14.0.0-beta.119 → 14.0.0-beta.120
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/components/assets-carousel/assets-carousel.component.mjs +48 -25
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +48 -24
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +47 -24
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/lib/components/assets-carousel/assets-carousel.component.d.ts +8 -4
- package/package.json +1 -1
|
@@ -1734,7 +1734,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1734
1734
|
this.color = this.defaultColor;
|
|
1735
1735
|
this.edit = false;
|
|
1736
1736
|
this.loading = false;
|
|
1737
|
-
this.accept = [
|
|
1737
|
+
this.accept = [];
|
|
1738
1738
|
this.customActions = [];
|
|
1739
1739
|
this.multipleUpload = false;
|
|
1740
1740
|
this.visiblePreviewAsset = 4;
|
|
@@ -1742,6 +1742,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1742
1742
|
this.activeChange = new EventEmitter();
|
|
1743
1743
|
this.removedAsset = new EventEmitter();
|
|
1744
1744
|
this.listStyle = { transform: "translateX(0px)" };
|
|
1745
|
+
this._imagesMimeTypes = ["image/png", "image/jpeg", "image/webp", "image/avif"];
|
|
1745
1746
|
if (!this.options) {
|
|
1746
1747
|
this.options = {
|
|
1747
1748
|
actionButtons: {
|
|
@@ -1803,6 +1804,20 @@ class NiceAssetsCarouselComponent {
|
|
|
1803
1804
|
|| this._active >= this.visiblePreviewAsset;
|
|
1804
1805
|
this.activeChange.emit(this._active);
|
|
1805
1806
|
}
|
|
1807
|
+
ngOnInit() {
|
|
1808
|
+
if (!this.accept?.length) {
|
|
1809
|
+
this.accept = [...this._imagesMimeTypes];
|
|
1810
|
+
}
|
|
1811
|
+
}
|
|
1812
|
+
ngOnChanges(changes) {
|
|
1813
|
+
if ("accept" in changes && this.accept) {
|
|
1814
|
+
const index = this.accept.indexOf("image/*");
|
|
1815
|
+
if (index >= 0) {
|
|
1816
|
+
this.accept.splice(index, 1);
|
|
1817
|
+
this.accept.push(...this._imagesMimeTypes);
|
|
1818
|
+
}
|
|
1819
|
+
}
|
|
1820
|
+
}
|
|
1806
1821
|
writeValue(assets) {
|
|
1807
1822
|
this._assets = assets ?? [];
|
|
1808
1823
|
if (this._assets.length === 0) {
|
|
@@ -1845,39 +1860,27 @@ class NiceAssetsCarouselComponent {
|
|
|
1845
1860
|
this.activeAsset = index;
|
|
1846
1861
|
}
|
|
1847
1862
|
async onFilesChange(event) {
|
|
1848
|
-
|
|
1849
|
-
if (this.imagesProcessor) {
|
|
1850
|
-
files = await this.getProcessedFiles(files);
|
|
1851
|
-
}
|
|
1863
|
+
const files = event.target?.files;
|
|
1852
1864
|
await this.onFilesDrop(files);
|
|
1853
1865
|
this.inputElement.nativeElement.value = "";
|
|
1854
1866
|
}
|
|
1855
|
-
async onFilesDrop(
|
|
1867
|
+
async onFilesDrop(fileList) {
|
|
1868
|
+
let files = this.filterOutUnsupportedFiles(fileList);
|
|
1869
|
+
if (this.imagesProcessor) {
|
|
1870
|
+
files = await this.getProcessedFiles(files);
|
|
1871
|
+
}
|
|
1856
1872
|
if (!files?.length) {
|
|
1857
1873
|
return;
|
|
1858
1874
|
}
|
|
1859
|
-
|
|
1860
|
-
for (let i = 0; i < files.length; i++) {
|
|
1861
|
-
const file = files.item(i);
|
|
1862
|
-
if (!this.accept.some((accept) => {
|
|
1863
|
-
if (accept.endsWith("*")) {
|
|
1864
|
-
return file.type.startsWith(accept.replace("*", ""));
|
|
1865
|
-
}
|
|
1866
|
-
return accept === file.type;
|
|
1867
|
-
})) {
|
|
1868
|
-
continue;
|
|
1869
|
-
}
|
|
1870
|
-
newAssetsAdded = true;
|
|
1875
|
+
for (const file of files) {
|
|
1871
1876
|
this._assets.push({
|
|
1872
1877
|
file,
|
|
1873
1878
|
type: file.type.split("/").shift(),
|
|
1874
1879
|
base64: await FileUtils.getDataUrl(file)
|
|
1875
1880
|
});
|
|
1876
1881
|
}
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
this.propagate?.(this._assets);
|
|
1880
|
-
}
|
|
1882
|
+
this.clickAsset(this._assets.length - 1);
|
|
1883
|
+
this.propagate?.(this._assets);
|
|
1881
1884
|
}
|
|
1882
1885
|
clickRemove() {
|
|
1883
1886
|
this.removedAsset.emit(this._assets[this._active]);
|
|
@@ -1900,11 +1903,31 @@ class NiceAssetsCarouselComponent {
|
|
|
1900
1903
|
await this._activeVideoElement.nativeElement.play();
|
|
1901
1904
|
await this._assetsElement.get(this._active).nativeElement.firstElementChild.play();
|
|
1902
1905
|
}
|
|
1906
|
+
filterOutUnsupportedFiles(fileList) {
|
|
1907
|
+
const files = [];
|
|
1908
|
+
for (let i = 0; i < fileList.length; i++) {
|
|
1909
|
+
const file = fileList.item(i);
|
|
1910
|
+
if (this.accept.some((accept) => {
|
|
1911
|
+
if (accept.endsWith("*")) {
|
|
1912
|
+
return file.type.startsWith(accept.replace("*", ""));
|
|
1913
|
+
}
|
|
1914
|
+
return accept === file.type;
|
|
1915
|
+
})) {
|
|
1916
|
+
files.push(file);
|
|
1917
|
+
}
|
|
1918
|
+
}
|
|
1919
|
+
return files;
|
|
1920
|
+
}
|
|
1903
1921
|
async getProcessedFiles(files) {
|
|
1904
1922
|
try {
|
|
1923
|
+
if (!files.length) {
|
|
1924
|
+
return null;
|
|
1925
|
+
}
|
|
1905
1926
|
return await this.imagesProcessor(files);
|
|
1906
1927
|
}
|
|
1907
|
-
catch (e) {
|
|
1928
|
+
catch (e) {
|
|
1929
|
+
return null;
|
|
1930
|
+
}
|
|
1908
1931
|
}
|
|
1909
1932
|
}
|
|
1910
1933
|
NiceAssetsCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselComponent, deps: [{ token: NICE_ASSETS_CAROUSEL_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -1914,7 +1937,7 @@ NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
1914
1937
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1915
1938
|
multi: true
|
|
1916
1939
|
}
|
|
1917
|
-
], queries: [{ propertyName: "activeContent", first: true, predicate: NiceAssetsCarouselActiveContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div\n class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click();\n $event.stopPropagation()\"\n >\n <div *ngIf=\"loading\" class=\"flex flex-row justify-center items-center h-full\">\n <mat-spinner [diameter]=\"32\"></mat-spinner>\n </div>\n <ng-container *ngIf=\"!loading\">\n <ng-container\n *ngIf=\"_activeAsset && activeContent\"\n [ngTemplateOutlet]=\"activeContent\"\n [ngTemplateOutletContext]=\"{ $implicit: _activeAsset}\"\n ></ng-container>\n <img\n *ngIf=\"_activeAsset?.type === 'image'\"\n (mouseover)=\"showOverlay=true\"\n [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n draggable=\"false\"\n class=\"relative\"\n alt=\"active-image\"\n >\n <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n <div class=\"text\">\n {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n </div>\n </div>\n\n <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n <div\n (mouseout)=\"showOverlay=false\"\n class=\"flex flex-col justify-center items-center w-full h-full\"\n >\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div *ngIf=\"edit\" class=\"active-buttons\">\n <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n </button>\n <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n </button>\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let action of customActions\"\n (click)=\"clickCustom(action)\"\n >\n <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n <span>{{ action.name | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"clickRemove()\">\n <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n </button>\n </mat-menu>\n </div>\n </ng-container>\n </div>\n\n <div class=\"carousel\">\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n </button>\n <div class=\"asset-list-container\">\n <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n </div>\n </div>\n <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n <div\n #assets\n class=\"asset\"\n *ngFor=\"let asset of _assets; let i = index\"\n (click)=\"clickAsset(i)\"\n [ngClass]=\"color\"\n [class.active]=\"_active === i\"\n >\n <ng-container>\n <img\n *ngIf=\"asset.type === 'image'\"\n draggable=\"false\"\n [src]=\"asset.url ?? asset.base64\"\n alt=\"add-image\"\n />\n <video\n *ngIf=\"asset.type === 'video'\"\n draggable=\"false\"\n loop\n [src]=\"asset.url ?? asset.base64\"\n ></video>\n </ng-container>\n </div>\n </div>\n </div>\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n </button>\n </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
|
|
1940
|
+
], queries: [{ propertyName: "activeContent", first: true, predicate: NiceAssetsCarouselActiveContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div\n class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click();\n $event.stopPropagation()\"\n >\n <div *ngIf=\"loading\" class=\"flex flex-row justify-center items-center h-full\">\n <mat-spinner [diameter]=\"32\"></mat-spinner>\n </div>\n <ng-container *ngIf=\"!loading\">\n <ng-container\n *ngIf=\"_activeAsset && activeContent\"\n [ngTemplateOutlet]=\"activeContent\"\n [ngTemplateOutletContext]=\"{ $implicit: _activeAsset}\"\n ></ng-container>\n <img\n *ngIf=\"_activeAsset?.type === 'image'\"\n (mouseover)=\"showOverlay=true\"\n [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n draggable=\"false\"\n class=\"relative\"\n alt=\"active-image\"\n >\n <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n <div class=\"text\">\n {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n </div>\n </div>\n\n <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n <div\n (mouseout)=\"showOverlay=false\"\n class=\"flex flex-col justify-center items-center w-full h-full\"\n >\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div *ngIf=\"edit\" class=\"active-buttons\">\n <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n </button>\n <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n </button>\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let action of customActions\"\n (click)=\"clickCustom(action)\"\n >\n <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n <span>{{ action.name | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"clickRemove()\">\n <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n </button>\n </mat-menu>\n </div>\n </ng-container>\n </div>\n\n <div class=\"carousel\">\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n </button>\n <div class=\"asset-list-container\">\n <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n </div>\n </div>\n <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n <div\n #assets\n class=\"asset\"\n *ngFor=\"let asset of _assets; let i = index\"\n (click)=\"clickAsset(i)\"\n [ngClass]=\"color\"\n [class.active]=\"_active === i\"\n >\n <ng-container>\n <img\n *ngIf=\"asset.type === 'image'\"\n draggable=\"false\"\n [src]=\"asset.url ?? asset.base64\"\n alt=\"add-image\"\n />\n <video\n *ngIf=\"asset.type === 'video'\"\n draggable=\"false\"\n loop\n [src]=\"asset.url ?? asset.base64\"\n ></video>\n </ng-container>\n </div>\n </div>\n </div>\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n </button>\n </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
|
|
1918
1941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
|
|
1919
1942
|
type: Component,
|
|
1920
1943
|
args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
|