@recursyve/nice-ui-kit.v2 13.2.0-beta.105 → 13.2.0-beta.106
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 +7 -4
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +6 -3
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +6 -3
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/lib/components/assets-carousel/assets-carousel.component.d.ts +3 -1
- package/package.json +1 -1
- package/src/lib/components/assets-carousel/assets-carousel.theme.scss +31 -33
|
@@ -1685,6 +1685,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1685
1685
|
this.edit = false;
|
|
1686
1686
|
this.accept = ["image/*"];
|
|
1687
1687
|
this.customActions = [];
|
|
1688
|
+
this.multipleUpload = false;
|
|
1688
1689
|
this.activeChange = new EventEmitter();
|
|
1689
1690
|
this.listStyle = { transform: "translateX(0px)" };
|
|
1690
1691
|
if (!this.options) {
|
|
@@ -1840,13 +1841,13 @@ class NiceAssetsCarouselComponent {
|
|
|
1840
1841
|
}
|
|
1841
1842
|
}
|
|
1842
1843
|
NiceAssetsCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, deps: [{ token: NICE_ASSETS_CAROUSEL_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1843
|
-
NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAssetsCarouselComponent, selector: "nice-assets-carousel", inputs: { color: "color", edit: "edit", accept: "accept", customActions: "customActions", assets: "assets" }, outputs: { activeChange: "activeChange" }, providers: [
|
|
1844
|
+
NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAssetsCarouselComponent, selector: "nice-assets-carousel", inputs: { color: "color", edit: "edit", accept: "accept", customActions: "customActions", multipleUpload: "multipleUpload", assets: "assets" }, outputs: { activeChange: "activeChange" }, providers: [
|
|
1844
1845
|
{
|
|
1845
1846
|
provide: NG_VALUE_ACCESSOR,
|
|
1846
1847
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1847
1848
|
multi: true
|
|
1848
1849
|
}
|
|
1849
|
-
], 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 class=\"active-image\"
|
|
1850
|
+
], 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 class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (mouseover)=\"showOverlay=true\"\n (mouseout)=\"showOverlay=false\"\n (click)=\"edit && fileInput.click()\"\n >\n <img *ngIf=\"_activeAsset?.type === 'image'\" draggable=\"false\" [src]=\"_activeAsset.url ?? _activeAsset.base64\" class=\"relative\" alt=\"active-image\">\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\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 class=\"flex flex-col justify-center items-center w-full h-full\">\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()\">\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\" [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\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let action of customActions\" (click)=\"clickCustom(action)\">\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\n <div class=\"upload-overlay\">\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 class=\"carousel\">\n <button 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 class=\"add-asset-container\" *ngIf=\"edit\">\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\n <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n </div>\n </div>\n </div>\n <button 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: [""], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.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"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { type: i2$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
|
|
1850
1851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
|
|
1851
1852
|
type: Component,
|
|
1852
1853
|
args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
|
|
@@ -1855,7 +1856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1855
1856
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1856
1857
|
multi: true
|
|
1857
1858
|
}
|
|
1858
|
-
], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"
|
|
1859
|
+
], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (mouseover)=\"showOverlay=true\"\n (mouseout)=\"showOverlay=false\"\n (click)=\"edit && fileInput.click()\"\n >\n <img *ngIf=\"_activeAsset?.type === 'image'\" draggable=\"false\" [src]=\"_activeAsset.url ?? _activeAsset.base64\" class=\"relative\" alt=\"active-image\">\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\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 class=\"flex flex-col justify-center items-center w-full h-full\">\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()\">\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\" [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\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let action of customActions\" (click)=\"clickCustom(action)\">\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\n <div class=\"upload-overlay\">\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 class=\"carousel\">\n <button 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 class=\"add-asset-container\" *ngIf=\"edit\">\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\n <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n </div>\n </div>\n </div>\n <button 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: [""] }]
|
|
1859
1860
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1860
1861
|
type: Optional
|
|
1861
1862
|
}, {
|
|
@@ -1872,6 +1873,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1872
1873
|
type: Input
|
|
1873
1874
|
}], customActions: [{
|
|
1874
1875
|
type: Input
|
|
1876
|
+
}], multipleUpload: [{
|
|
1877
|
+
type: Input
|
|
1875
1878
|
}], activeChange: [{
|
|
1876
1879
|
type: Output
|
|
1877
1880
|
}], activeVideoElement: [{
|