@recursyve/nice-ui-kit.v2 13.2.0-beta.108 → 13.2.0-beta.110
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 +20 -11
- package/esm2020/lib/directives/chip-list/chip-list.directive.mjs +6 -1
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +24 -10
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +24 -10
- 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 +15 -7
|
@@ -1686,8 +1686,10 @@ class NiceAssetsCarouselComponent {
|
|
|
1686
1686
|
this.accept = ["image/*"];
|
|
1687
1687
|
this.customActions = [];
|
|
1688
1688
|
this.multipleUpload = false;
|
|
1689
|
+
this.visiblePreviewAsset = 4;
|
|
1689
1690
|
this.showAddAssetContainer = true;
|
|
1690
1691
|
this.activeChange = new EventEmitter();
|
|
1692
|
+
this.removedAsset = new EventEmitter();
|
|
1691
1693
|
this.listStyle = { transform: "translateX(0px)" };
|
|
1692
1694
|
if (!this.options) {
|
|
1693
1695
|
this.options = {
|
|
@@ -1736,7 +1738,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1736
1738
|
}
|
|
1737
1739
|
set activeTranslationPosition(position) {
|
|
1738
1740
|
this._activeTranslationPosition = position;
|
|
1739
|
-
this.listStyle.transform = `translateX(${position}
|
|
1741
|
+
this.listStyle.transform = `translateX(calc((var(--nice-assets-carousel-asset-width) + var(--nice-assets-carousel-asset-gap)) * ${position}))`;
|
|
1740
1742
|
}
|
|
1741
1743
|
set activeAsset(position) {
|
|
1742
1744
|
if (position < 0) {
|
|
@@ -1745,7 +1747,9 @@ class NiceAssetsCarouselComponent {
|
|
|
1745
1747
|
this._active = position;
|
|
1746
1748
|
this._activeAsset = this._assets[this._active];
|
|
1747
1749
|
this._lastAsset = this._active === this._assets.length - 1 || !this._assets.length;
|
|
1748
|
-
this._shouldTransform
|
|
1750
|
+
this._shouldTransform
|
|
1751
|
+
= ((this.edit && this.showAddAssetContainer) && this._active >= (this.visiblePreviewAsset - 1))
|
|
1752
|
+
|| this._active >= this.visiblePreviewAsset;
|
|
1749
1753
|
this.activeChange.emit(this._active);
|
|
1750
1754
|
}
|
|
1751
1755
|
writeValue(assets) {
|
|
@@ -1766,7 +1770,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1766
1770
|
this.activeAsset = this._active - 1;
|
|
1767
1771
|
}
|
|
1768
1772
|
if (this._activeTranslationPosition < 0) {
|
|
1769
|
-
this.activeTranslationPosition = this._activeTranslationPosition +
|
|
1773
|
+
this.activeTranslationPosition = this._activeTranslationPosition + 1;
|
|
1770
1774
|
}
|
|
1771
1775
|
}
|
|
1772
1776
|
clickRight() {
|
|
@@ -1775,23 +1779,23 @@ class NiceAssetsCarouselComponent {
|
|
|
1775
1779
|
}
|
|
1776
1780
|
this.activeAsset = this._active + 1;
|
|
1777
1781
|
if (this._shouldTransform) {
|
|
1778
|
-
this.activeTranslationPosition = this._activeTranslationPosition -
|
|
1782
|
+
this.activeTranslationPosition = this._activeTranslationPosition - 1;
|
|
1779
1783
|
}
|
|
1780
1784
|
}
|
|
1781
1785
|
clickAsset(index) {
|
|
1782
|
-
let visibleAssets = this.edit ? 2 :
|
|
1786
|
+
let visibleAssets = (this.edit && this.showAddAssetContainer) ? (this.visiblePreviewAsset - 2) : (this.visiblePreviewAsset - 1);
|
|
1783
1787
|
if (index < visibleAssets) {
|
|
1784
1788
|
visibleAssets = index;
|
|
1785
1789
|
}
|
|
1786
1790
|
if (index >= 0) {
|
|
1787
|
-
this.activeTranslationPosition = (index - visibleAssets) * -
|
|
1791
|
+
this.activeTranslationPosition = (index - visibleAssets) * -1;
|
|
1788
1792
|
}
|
|
1789
1793
|
this.activeAsset = index;
|
|
1790
1794
|
}
|
|
1791
1795
|
async onFilesChange(event) {
|
|
1792
1796
|
const files = event.target?.files;
|
|
1793
1797
|
await this.onFilesDrop(files);
|
|
1794
|
-
this.inputElement.nativeElement.
|
|
1798
|
+
this.inputElement.nativeElement.value = "";
|
|
1795
1799
|
}
|
|
1796
1800
|
async onFilesDrop(files) {
|
|
1797
1801
|
if (!files?.length) {
|
|
@@ -1821,6 +1825,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1821
1825
|
}
|
|
1822
1826
|
}
|
|
1823
1827
|
clickRemove() {
|
|
1828
|
+
this.removedAsset.emit(this._assets[this._active]);
|
|
1824
1829
|
this._assets.splice(this._active, 1);
|
|
1825
1830
|
if (this._lastAsset) {
|
|
1826
1831
|
this.clickAsset(this._assets.length - 1);
|
|
@@ -1842,13 +1847,13 @@ class NiceAssetsCarouselComponent {
|
|
|
1842
1847
|
}
|
|
1843
1848
|
}
|
|
1844
1849
|
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 });
|
|
1845
|
-
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", showAddAssetContainer: "showAddAssetContainer", assets: "assets" }, outputs: { activeChange: "activeChange" }, providers: [
|
|
1850
|
+
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", visiblePreviewAsset: "visiblePreviewAsset", showAddAssetContainer: "showAddAssetContainer", assets: "assets" }, outputs: { activeChange: "activeChange", removedAsset: "removedAsset" }, providers: [
|
|
1846
1851
|
{
|
|
1847
1852
|
provide: NG_VALUE_ACCESSOR,
|
|
1848
1853
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1849
1854
|
multi: true
|
|
1850
1855
|
}
|
|
1851
|
-
], 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 (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\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\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()\">\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\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)
|
|
1856
|
+
], 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 (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\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\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\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 </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\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 *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"], 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 });
|
|
1852
1857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
|
|
1853
1858
|
type: Component,
|
|
1854
1859
|
args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
|
|
@@ -1857,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1857
1862
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1858
1863
|
multi: true
|
|
1859
1864
|
}
|
|
1860
|
-
], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\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\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()\">\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\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)
|
|
1865
|
+
], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\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\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\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 </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\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 *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"] }]
|
|
1861
1866
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1862
1867
|
type: Optional
|
|
1863
1868
|
}, {
|
|
@@ -1876,10 +1881,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1876
1881
|
type: Input
|
|
1877
1882
|
}], multipleUpload: [{
|
|
1878
1883
|
type: Input
|
|
1884
|
+
}], visiblePreviewAsset: [{
|
|
1885
|
+
type: Input
|
|
1879
1886
|
}], showAddAssetContainer: [{
|
|
1880
1887
|
type: Input
|
|
1881
1888
|
}], activeChange: [{
|
|
1882
1889
|
type: Output
|
|
1890
|
+
}], removedAsset: [{
|
|
1891
|
+
type: Output
|
|
1883
1892
|
}], activeVideoElement: [{
|
|
1884
1893
|
type: ViewChild,
|
|
1885
1894
|
args: ["activeVideo"]
|
|
@@ -9009,6 +9018,11 @@ class NiceChipListDirective {
|
|
|
9009
9018
|
if (this._values.includes(value)) {
|
|
9010
9019
|
return;
|
|
9011
9020
|
}
|
|
9021
|
+
if (value instanceof NiceTypeaheadNewValue) {
|
|
9022
|
+
if (this._values.some(x => x instanceof NiceTypeaheadNewValue && x.$new === value.$new)) {
|
|
9023
|
+
return;
|
|
9024
|
+
}
|
|
9025
|
+
}
|
|
9012
9026
|
this._values.push(value);
|
|
9013
9027
|
this.propagateChanges(this._values);
|
|
9014
9028
|
this.values$.next(this._values);
|