@ng-nest/ui 20.1.6 → 20.1.7

package/fesm2022/ng-nest-ui-attachments.mjs

@@ -0,0 +1,331 @@
+import * as i0 from '@angular/core';
+import { input, output, Component, ChangeDetectionStrategy, ViewEncapsulation, computed, NgModule } from '@angular/core';
+import { XToBoolean, XToNumber, XPropertyFunction, XIsString, XFileSize, XIsEmpty } from '@ng-nest/ui/core';
+import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
+import { XUploadComponent } from '@ng-nest/ui/upload';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XIconComponent } from '@ng-nest/ui/icon';
+import { NgClass } from '@angular/common';
+import { XImageComponent } from '@ng-nest/ui/image';
+
+/**
+ * Attachments
+ * @selector x-attachments
+ * @decorator component
+ */
+const XAttachmentsPrefix = 'x-attachments';
+const X_ATTACHMENTS_CONFIG_NAME = 'attachments';
+/**
+ * Attachments Property
+ */
+class XAttachmentsProperty extends XFormControlFunction(X_ATTACHMENTS_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 请求地址
+         * @en_US Request address
+         */
+        this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域
+         * @en_US Drag and drop upload area
+         */
+        this.dropContainer = input(...(ngDevMode ? [undefined, { debugName: "dropContainer" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的图标
+         * @en_US Drag and drop upload area icon
+         */
+        this.dropIcon = input(...(ngDevMode ? [undefined, { debugName: "dropIcon" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的标题
+         * @en_US Drag and drop upload area title
+         */
+        this.dropTitle = input(...(ngDevMode ? [undefined, { debugName: "dropTitle" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的描述
+         * @en_US Drag and drop upload area description
+         */
+        this.dropDescription = input(...(ngDevMode ? [undefined, { debugName: "dropDescription" }] : []));
+        /**
+         * @zh_CN 直接显示可拖拽上传的区域
+         * @en_US Show the drag and drop upload area directly
+         */
+        this.showDrop = input(false, ...(ngDevMode ? [{ debugName: "showDrop", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 上传文件类型，与原生的 input file 组件一致
+         * @en_US Upload file type, consistent with native input file component
+         */
+        this.accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+        /**
+         * @zh_CN 文件显示类型
+         * @en_US File display type
+         */
+        this.type = input('list', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         * @zh_CN 图片类型下面加载失败显示
+         * @en_US Photo type below loading failed display
+         */
+        this.imgFallback = input(...(ngDevMode ? [undefined, { debugName: "imgFallback" }] : []));
+        /**
+         * @zh_CN 图片剪裁
+         * @en_US Picture cropping
+         */
+        this.imgCut = input(false, ...(ngDevMode ? [{ debugName: "imgCut", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 多文件上传
+         * @en_US Multiple file upload
+         */
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 点击下载
+         * @en_US click download
+         */
+        this.download = input(this.config?.download ?? true, ...(ngDevMode ? [{ debugName: "download", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 多次上传的模式，cover 覆盖现有, add 继续添加
+         * @en_US For many upload mode, 'cover' covers the existing, 'add' continue to add
+         */
+        this.multipleModel = input(this.config?.multipleModel ?? 'cover', ...(ngDevMode ? [{ debugName: "multipleModel" }] : []));
+        /**
+         * @zh_CN 文件列表自定义显示模板
+         * @en_US File list custom display template
+         */
+        this.filesTpl = input(...(ngDevMode ? [undefined, { debugName: "filesTpl" }] : []));
+        /**
+         * @zh_CN 限制单次上传文件个数，只有开启多文件上传 multiple 时生效，默认不做限制
+         * @en_US Limit the number of files uploaded files. Do not restrict the default
+         */
+        this.maxLimit = input(-1, ...(ngDevMode ? [{ debugName: "maxLimit", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 设置上传的请求头部
+         * @en_US Set the upload request header
+         */
+        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : []));
+        /**
+         * @zh_CN 删除按钮的事件
+         * @en_US Delete button event
+         */
+        this.removeClick = output();
+        /**
+         * @zh_CN 开始上传事件
+         * @en_US Start upload event
+         */
+        this.uploadReady = output();
+        /**
+         * @zh_CN 正在上传事件
+         * @en_US Start upload event
+         */
+        this.uploading = output();
+        /**
+         * @zh_CN 上传成功事件
+         * @en_US Start upload event
+         */
+        this.uploadSuccess = output();
+        /**
+         * @zh_CN 上传失败事件
+         * @en_US Start upload event
+         */
+        this.uploadError = output();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XAttachmentsProperty, isStandalone: true, selector: "x-attachments-property", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XAttachmentsPrefix}-property`, template: '' }]
+        }] });
+/**
+ * FileCard
+ * @selector x-file-card
+ * @decorator component
+ */
+const XFileCardPrefix = 'x-file-card';
+const X_FILE_CARD_CONFIG_NAME = 'fileCard';
+/**
+ * FileCard Property
+ */
+class XFileCardProperty extends XPropertyFunction(X_FILE_CARD_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 图标
+         * @en_US Icon
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * @zh_CN 图标颜色
+         * @en_US Icon color
+         */
+        this.iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+        /**
+         * @zh_CN 文件名
+         * @en_US File name
+         */
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        /**
+         * @zh_CN 文件大小
+         * @en_US File size
+         */
+        this.size = input(0, ...(ngDevMode ? [{ debugName: "size", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 文件描述
+         * @en_US File description
+         */
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+        /**
+         * @zh_CN 文件类型
+         * @en_US File type
+         */
+        this.type = input('file', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         * @zh_CN 文件/图片链接地址
+         * @en_US File/image url
+         */
+        this.url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : []));
+        /**
+         * @zh_CN 形态变体
+         * @en_US Bubble variant
+         */
+        this.variant = input(this.config?.variant ?? 'outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XFileCardProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XFileCardProperty, isStandalone: true, selector: "x-file-card-property", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XFileCardProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XFileCardPrefix}-property`, template: '' }]
+        }] });
+
+class XAttachmentsComponent extends XAttachmentsProperty {
+    valueChange(value) {
+        this.onChange && this.onChange(value);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XAttachmentsComponent, isStandalone: true, selector: "x-attachments", providers: [XValueAccessor(XAttachmentsComponent)], usesInheritance: true, ngImport: i0, template: "<div class=\"x-attachments\">\r\n  <x-upload\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [action]=\"action()\"\r\n    [dropContainer]=\"dropContainer()\"\r\n    [dropIcon]=\"dropIcon()\"\r\n    [dropTitle]=\"dropTitle()\"\r\n    [dropDescription]=\"dropDescription()\"\r\n    [showDrop]=\"showDrop()\"\r\n    [text]=\"textTpl\"\r\n    [accept]=\"accept()\"\r\n    [type]=\"type()\"\r\n    [imgFallback]=\"imgFallback()\"\r\n    [imgCut]=\"imgCut()\"\r\n    [multiple]=\"multiple()\"\r\n    [download]=\"download()\"\r\n    [multipleModel]=\"multipleModel()\"\r\n    [filesTpl]=\"filesTpl() ?? innerfilesTpl\"\r\n    [maxLimit]=\"maxLimit()\"\r\n    [headers]=\"headers()\"\r\n    (removeClick)=\"removeClick.emit($event)\"\r\n    (uploadReady)=\"uploadReady.emit($event)\"\r\n    (uploading)=\"uploading.emit($event)\"\r\n    (uploadSuccess)=\"uploadSuccess.emit($event)\"\r\n    (uploadError)=\"uploadError.emit($event)\"\r\n  ></x-upload>\r\n  <ng-template #textTpl>\r\n    <ng-content></ng-content>\r\n  </ng-template>\r\n  <ng-template #innerfilesTpl></ng-template>\r\n</div>\r\n", styles: [".x-attachments{margin:0;padding:0}.x-attachments{width:100%;height:100%}.x-attachments-title{color:var(--x-text-400);margin-bottom:.5rem}.x-attachments-list{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;list-style:none;padding-inline-start:0;margin-block:0;align-items:stretch}.x-attachments-vertical .x-attachments-list{flex-direction:column;align-items:flex-start}.x-attachments-wrap .x-attachments-list{flex-wrap:wrap}.x-attachments-item{flex:none;min-width:10rem;display:inline-flex;gap:.5rem;padding:.5rem 1rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:all var(--x-animation-duration-base);cursor:pointer}.x-attachments-item:hover:not(.x-disabled){background-color:var(--x-background-a200)}.x-attachments-item.x-disabled{cursor:default;background-color:var(--x-background-a300)}.x-attachments-item-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.x-attachments-item-label{margin:0;font-weight:600}.x-attachments-item-description{color:var(--x-text-400)}.x-attachments-item-only-label{font-weight:500}.x-attachments-item-only-description{color:currentColor}x-attachments{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XUploadComponent, selector: "x-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-attachments', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, XUploadComponent], providers: [XValueAccessor(XAttachmentsComponent)], template: "<div class=\"x-attachments\">\r\n  <x-upload\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [action]=\"action()\"\r\n    [dropContainer]=\"dropContainer()\"\r\n    [dropIcon]=\"dropIcon()\"\r\n    [dropTitle]=\"dropTitle()\"\r\n    [dropDescription]=\"dropDescription()\"\r\n    [showDrop]=\"showDrop()\"\r\n    [text]=\"textTpl\"\r\n    [accept]=\"accept()\"\r\n    [type]=\"type()\"\r\n    [imgFallback]=\"imgFallback()\"\r\n    [imgCut]=\"imgCut()\"\r\n    [multiple]=\"multiple()\"\r\n    [download]=\"download()\"\r\n    [multipleModel]=\"multipleModel()\"\r\n    [filesTpl]=\"filesTpl() ?? innerfilesTpl\"\r\n    [maxLimit]=\"maxLimit()\"\r\n    [headers]=\"headers()\"\r\n    (removeClick)=\"removeClick.emit($event)\"\r\n    (uploadReady)=\"uploadReady.emit($event)\"\r\n    (uploading)=\"uploading.emit($event)\"\r\n    (uploadSuccess)=\"uploadSuccess.emit($event)\"\r\n    (uploadError)=\"uploadError.emit($event)\"\r\n  ></x-upload>\r\n  <ng-template #textTpl>\r\n    <ng-content></ng-content>\r\n  </ng-template>\r\n  <ng-template #innerfilesTpl></ng-template>\r\n</div>\r\n", styles: [".x-attachments{margin:0;padding:0}.x-attachments{width:100%;height:100%}.x-attachments-title{color:var(--x-text-400);margin-bottom:.5rem}.x-attachments-list{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;list-style:none;padding-inline-start:0;margin-block:0;align-items:stretch}.x-attachments-vertical .x-attachments-list{flex-direction:column;align-items:flex-start}.x-attachments-wrap .x-attachments-list{flex-wrap:wrap}.x-attachments-item{flex:none;min-width:10rem;display:inline-flex;gap:.5rem;padding:.5rem 1rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:all var(--x-animation-duration-base);cursor:pointer}.x-attachments-item:hover:not(.x-disabled){background-color:var(--x-background-a200)}.x-attachments-item.x-disabled{cursor:default;background-color:var(--x-background-a300)}.x-attachments-item-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.x-attachments-item-label{margin:0;font-weight:600}.x-attachments-item-description{color:var(--x-text-400)}.x-attachments-item-only-label{font-weight:500}.x-attachments-item-only-description{color:currentColor}x-attachments{display:block;width:100%;height:100%}\n"] }]
+        }] });
+
+const defaultIcon = {
+    xlsx: 'adf-file-excel',
+    xls: 'adf-file-excel',
+    docx: 'adf-file-word',
+    doc: 'adf-file-word',
+    ppt: 'adf-file-ppt',
+    pptx: 'adf-file-ppt',
+    pdf: 'adf-file-pdf',
+    zip: 'adf-file-zip',
+    rar: 'adf-file-zip',
+    '7z': 'adf-file-zip',
+    png: 'adf-file-image',
+    jpg: 'adf-file-image',
+    jpeg: 'adf-file-image',
+    gif: 'adf-file-image',
+    bmp: 'adf-file-image',
+    md: 'adf-file-markdown',
+    txt: 'adf-file-text',
+    mp4: 'adf-video-camera',
+    avi: 'adf-video-camera',
+    mkv: 'adf-video-camera',
+    mov: 'adf-video-camera',
+    mp3: 'adf-audio',
+    wav: 'adf-audio',
+    flac: 'adf-audio',
+    default: 'adf-file'
+};
+const defaultIconColors = {
+    'adf-file-excel': '#217346',
+    'adf-file-word': '#2b579a',
+    'adf-file-ppt': '#d24726',
+    'adf-file-pdf': '#dc3545',
+    'adf-file-zip': '#6c757d',
+    'adf-file-image': '#ffc107',
+    'adf-file-markdown': '#000000',
+    'adf-file-text': '#6c757d',
+    'adf-video-camera': '#ff6b6b',
+    'adf-audio': '#007bff',
+    'adf-file': '#6c757d'
+};
+class XFileCardComponent extends XFileCardProperty {
+    constructor() {
+        super(...arguments);
+        this.iconString = computed(() => {
+            if (XIsString(this.icon())) {
+                return this.icon();
+            }
+            else {
+                return '';
+            }
+        }, ...(ngDevMode ? [{ debugName: "iconString" }] : []));
+        this.descriptionString = computed(() => {
+            if (XIsString(this.description())) {
+                return this.description();
+            }
+            else {
+                return '';
+            }
+        }, ...(ngDevMode ? [{ debugName: "descriptionString" }] : []));
+        this.sizeTransform = computed(() => {
+            if (this.size() && this.size() !== 0) {
+                return XFileSize(this.size(), { precision: 0 });
+            }
+            else {
+                return '';
+            }
+        }, ...(ngDevMode ? [{ debugName: "sizeTransform" }] : []));
+        this.nameSubfix = computed(() => {
+            const name = this.name();
+            const index = name.lastIndexOf('.');
+            return index > -1 ? name.substring(index + 1).toLowerCase() : '';
+        }, ...(ngDevMode ? [{ debugName: "nameSubfix" }] : []));
+        this.defaultIcon = computed(() => {
+            console.log(this.nameSubfix());
+            if (Object.keys(defaultIcon).includes(this.nameSubfix())) {
+                return defaultIcon[this.nameSubfix()];
+            }
+            else {
+                return defaultIcon['default'];
+            }
+        }, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
+        this.defaultColor = computed(() => {
+            return defaultIconColors[this.defaultIcon()];
+        }, ...(ngDevMode ? [{ debugName: "defaultColor" }] : []));
+        this.classMap = computed(() => ({
+            [`${XFileCardPrefix}-${this.variant()}`]: !XIsEmpty(this.variant())
+        }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
+        this.isImage = computed(() => {
+            const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
+            return imageExtensions.includes(this.nameSubfix().toLowerCase());
+        }, ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XFileCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XFileCardComponent, isStandalone: true, selector: "x-file-card", usesInheritance: true, ngImport: i0, template: "<div class=\"x-file-card\" [ngClass]=\"classMap()\" [class.x-file-card-image]=\"isImage() && !!url()\">\r\n  @if (isImage() && !!url()) {\r\n    <x-image width=\"100px\" height=\"100px\" [src]=\"url()\" [alt]=\"descriptionString()\"></x-image>\r\n  } @else {\r\n    @if (icon()) {\r\n      <div class=\"x-file-card-icon\">\r\n        <ng-container *xOutlet=\"icon()\">\r\n          <x-icon [type]=\"iconString()\" [style.color]=\"iconColor()\"></x-icon>\r\n        </ng-container>\r\n      </div>\r\n    } @else {\r\n      <div class=\"x-file-card-icon\">\r\n        <x-icon [type]=\"defaultIcon()\" [style.color]=\"iconColor() ?? defaultColor()\"></x-icon>\r\n      </div>\r\n    }\r\n    <div class=\"x-file-card-content\">\r\n      @if (name()) {\r\n        <div class=\"x-file-card-name\">\r\n          <ng-container *xOutlet=\"name()\">{{ name() }}</ng-container>\r\n        </div>\r\n      }\r\n      @if (size()) {\r\n        <div class=\"x-file-card-size\">\r\n          {{ sizeTransform() }}\r\n        </div>\r\n      }\r\n      @if (description()) {\r\n        <div class=\"x-file-card-description\">\r\n          <ng-container *xOutlet=\"description()\">{{ description() }}</ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-file-card{width:100%;height:100%}.x-file-card{margin:0;padding:0}.x-file-card{position:relative;box-sizing:border-box;display:inline-flex;flex-wrap:nowrap;gap:var(--x-padding-small);padding:var(--x-padding-mini) var(--x-padding-medium);align-items:center;border-radius:var(--x-border-radius);word-break:break-word;min-width:14rem}.x-file-card-image{padding:0;min-width:initial}.x-file-card-icon x-icon{font-size:2.5rem}.x-file-card-outlined{border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-file-card-filled{background-color:var(--x-background-a200)}.x-file-card-shadow{box-shadow:var(--x-box-shadow)}.x-file-card-size,.x-file-card-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XFileCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-file-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XImageComponent, XIconComponent, NgClass], template: "<div class=\"x-file-card\" [ngClass]=\"classMap()\" [class.x-file-card-image]=\"isImage() && !!url()\">\r\n  @if (isImage() && !!url()) {\r\n    <x-image width=\"100px\" height=\"100px\" [src]=\"url()\" [alt]=\"descriptionString()\"></x-image>\r\n  } @else {\r\n    @if (icon()) {\r\n      <div class=\"x-file-card-icon\">\r\n        <ng-container *xOutlet=\"icon()\">\r\n          <x-icon [type]=\"iconString()\" [style.color]=\"iconColor()\"></x-icon>\r\n        </ng-container>\r\n      </div>\r\n    } @else {\r\n      <div class=\"x-file-card-icon\">\r\n        <x-icon [type]=\"defaultIcon()\" [style.color]=\"iconColor() ?? defaultColor()\"></x-icon>\r\n      </div>\r\n    }\r\n    <div class=\"x-file-card-content\">\r\n      @if (name()) {\r\n        <div class=\"x-file-card-name\">\r\n          <ng-container *xOutlet=\"name()\">{{ name() }}</ng-container>\r\n        </div>\r\n      }\r\n      @if (size()) {\r\n        <div class=\"x-file-card-size\">\r\n          {{ sizeTransform() }}\r\n        </div>\r\n      }\r\n      @if (description()) {\r\n        <div class=\"x-file-card-description\">\r\n          <ng-container *xOutlet=\"description()\">{{ description() }}</ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-file-card{width:100%;height:100%}.x-file-card{margin:0;padding:0}.x-file-card{position:relative;box-sizing:border-box;display:inline-flex;flex-wrap:nowrap;gap:var(--x-padding-small);padding:var(--x-padding-mini) var(--x-padding-medium);align-items:center;border-radius:var(--x-border-radius);word-break:break-word;min-width:14rem}.x-file-card-image{padding:0;min-width:initial}.x-file-card-icon x-icon{font-size:2.5rem}.x-file-card-outlined{border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-file-card-filled{background-color:var(--x-background-a200)}.x-file-card-shadow{box-shadow:var(--x-box-shadow)}.x-file-card-size,.x-file-card-description{color:var(--x-text-400)}\n"] }]
+        }] });
+
+class XAttachmentsModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsModule, imports: [XAttachmentsComponent, XFileCardComponent], exports: [XAttachmentsComponent, XFileCardComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsModule, imports: [XAttachmentsComponent, XFileCardComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAttachmentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XAttachmentsComponent, XFileCardComponent],
+                    imports: [XAttachmentsComponent, XFileCardComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XAttachmentsComponent, XAttachmentsModule, XAttachmentsPrefix, XAttachmentsProperty, XFileCardComponent, XFileCardPrefix, XFileCardProperty, X_FILE_CARD_CONFIG_NAME };
+//# sourceMappingURL=ng-nest-ui-attachments.mjs.map

package/fesm2022/ng-nest-ui-attachments.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-nest-ui-attachments.mjs","sources":["../../../../lib/ng-nest/ui/attachments/attachments.property.ts","../../../../lib/ng-nest/ui/attachments/attachments.component.ts","../../../../lib/ng-nest/ui/attachments/attachments.component.html","../../../../lib/ng-nest/ui/attachments/file-card.component.ts","../../../../lib/ng-nest/ui/attachments/file-card.component.html","../../../../lib/ng-nest/ui/attachments/attachments.module.ts","../../../../lib/ng-nest/ui/attachments/ng-nest-ui-attachments.ts"],"sourcesContent":["import { Component, ElementRef, input, output } from '@angular/core';\r\nimport { XBoolean, XNumber, XPropertyFunction, XTemplate, XToBoolean, XToNumber } from '@ng-nest/ui/core';\r\nimport { XUploadMultipleModel, XUploadNode, XUploadType } from '@ng-nest/ui/upload';\r\nimport { XFormControlFunction } from '@ng-nest/ui/base-form';\r\n\r\n/**\r\n * Attachments\r\n * @selector x-attachments\r\n * @decorator component\r\n */\r\nexport const XAttachmentsPrefix = 'x-attachments';\r\nconst X_ATTACHMENTS_CONFIG_NAME = 'attachments';\r\n\r\n/**\r\n * Attachments Property\r\n */\r\n@Component({ selector: `${XAttachmentsPrefix}-property`, template: '' })\r\nexport class XAttachmentsProperty extends XFormControlFunction(X_ATTACHMENTS_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 请求地址\r\n   * @en_US Request address\r\n   */\r\n  readonly action = input<string>();\r\n  /**\r\n   * @zh_CN 可拖拽上传的区域\r\n   * @en_US Drag and drop upload area\r\n   */\r\n  readonly dropContainer = input<ElementRef | HTMLElement>();\r\n  /**\r\n   * @zh_CN 可拖拽上传的区域的图标\r\n   * @en_US Drag and drop upload area icon\r\n   */\r\n  readonly dropIcon = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 可拖拽上传的区域的标题\r\n   * @en_US Drag and drop upload area title\r\n   */\r\n  readonly dropTitle = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 可拖拽上传的区域的描述\r\n   * @en_US Drag and drop upload area description\r\n   */\r\n  readonly dropDescription = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 直接显示可拖拽上传的区域\r\n   * @en_US Show the drag and drop upload area directly\r\n   */\r\n  readonly showDrop = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 上传文件类型，与原生的 input file 组件一致\r\n   * @en_US Upload file type, consistent with native input file component\r\n   */\r\n  readonly accept = input<string>();\r\n  /**\r\n   * @zh_CN 文件显示类型\r\n   * @en_US File display type\r\n   */\r\n  readonly type = input<XUploadType>('list');\r\n  /**\r\n   * @zh_CN 图片类型下面加载失败显示\r\n   * @en_US Photo type below loading failed display\r\n   */\r\n  readonly imgFallback = input<string>();\r\n  /**\r\n   * @zh_CN 图片剪裁\r\n   * @en_US Picture cropping\r\n   */\r\n  readonly imgCut = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 多文件上传\r\n   * @en_US Multiple file upload\r\n   */\r\n  readonly multiple = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 点击下载\r\n   * @en_US click download\r\n   */\r\n  readonly download = input<boolean, XBoolean>(this.config?.download ?? true, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 多次上传的模式，cover 覆盖现有, add 继续添加\r\n   * @en_US For many upload mode, 'cover' covers the existing, 'add' continue to add\r\n   */\r\n  readonly multipleModel = input<XUploadMultipleModel>(this.config?.multipleModel ?? 'cover');\r\n  /**\r\n   * @zh_CN 文件列表自定义显示模板\r\n   * @en_US File list custom display template\r\n   */\r\n  readonly filesTpl = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 限制单次上传文件个数，只有开启多文件上传 multiple 时生效，默认不做限制\r\n   * @en_US Limit the number of files uploaded files. Do not restrict the default\r\n   */\r\n  readonly maxLimit = input<number, XNumber>(-1, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 设置上传的请求头部\r\n   * @en_US Set the upload request header\r\n   */\r\n  readonly headers = input<{ [key: string]: any }>();\r\n  /**\r\n   * @zh_CN 删除按钮的事件\r\n   * @en_US Delete button event\r\n   */\r\n  readonly removeClick = output<{ file: XUploadNode; index: number }>();\r\n  /**\r\n   * @zh_CN 开始上传事件\r\n   * @en_US Start upload event\r\n   */\r\n  readonly uploadReady = output<XUploadNode>();\r\n  /**\r\n   * @zh_CN 正在上传事件\r\n   * @en_US Start upload event\r\n   */\r\n  readonly uploading = output<XUploadNode>();\r\n  /**\r\n   * @zh_CN 上传成功事件\r\n   * @en_US Start upload event\r\n   */\r\n  readonly uploadSuccess = output<XUploadNode>();\r\n  /**\r\n   * @zh_CN 上传失败事件\r\n   * @en_US Start upload event\r\n   */\r\n  readonly uploadError = output<XUploadNode>();\r\n}\r\n\r\n/**\r\n * FileCard\r\n * @selector x-file-card\r\n * @decorator component\r\n */\r\nexport const XFileCardPrefix = 'x-file-card';\r\nexport const X_FILE_CARD_CONFIG_NAME = 'fileCard';\r\n\r\n/**\r\n * FileCard Property\r\n */\r\n@Component({ selector: `${XFileCardPrefix}-property`, template: '' })\r\nexport class XFileCardProperty extends XPropertyFunction(X_FILE_CARD_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  readonly icon = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 图标颜色\r\n   * @en_US Icon color\r\n   */\r\n  readonly iconColor = input<string>();\r\n  /**\r\n   * @zh_CN 文件名\r\n   * @en_US File name\r\n   */\r\n  readonly name = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 文件大小\r\n   * @en_US File size\r\n   */\r\n  readonly size = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 文件描述\r\n   * @en_US File description\r\n   */\r\n  readonly description = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 文件类型\r\n   * @en_US File type\r\n   */\r\n  readonly type = input<XFileCard>('file');\r\n  /**\r\n   * @zh_CN 文件/图片链接地址\r\n   * @en_US File/image url\r\n   */\r\n  readonly url = input<string>();\r\n  /**\r\n   * @zh_CN 形态变体\r\n   * @en_US Bubble variant\r\n   */\r\n  readonly variant = input<XFileCardVariant>(this.config?.variant ?? 'outlined');\r\n}\r\n\r\n/**\r\n * @zh_CN 文件卡片类型\r\n * @en_US File card type\r\n */\r\nexport type XFileCard = 'file' | 'img';\r\n\r\n/**\r\n * @zh_CN 形态变体\r\n * @en_US Bubble variant\r\n */\r\nexport type XFileCardVariant = 'outlined' | 'filled' | 'shadow' | 'borderless';\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\r\nimport { XAttachmentsProperty } from './attachments.property';\r\nimport { XUploadComponent } from '@ng-nest/ui/upload';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { XValueAccessor } from '@ng-nest/ui/base-form';\r\n\r\n@Component({\r\n  selector: 'x-attachments',\r\n  templateUrl: './attachments.component.html',\r\n  styleUrls: ['./attachments.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [FormsModule, XUploadComponent],\r\n  providers: [XValueAccessor(XAttachmentsComponent)]\r\n})\r\nexport class XAttachmentsComponent extends XAttachmentsProperty {\r\n  valueChange(value: any) {\r\n    this.onChange && this.onChange(value);\r\n  }\r\n}\r\n","<div class=\"x-attachments\">\r\n  <x-upload\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [action]=\"action()\"\r\n    [dropContainer]=\"dropContainer()\"\r\n    [dropIcon]=\"dropIcon()\"\r\n    [dropTitle]=\"dropTitle()\"\r\n    [dropDescription]=\"dropDescription()\"\r\n    [showDrop]=\"showDrop()\"\r\n    [text]=\"textTpl\"\r\n    [accept]=\"accept()\"\r\n    [type]=\"type()\"\r\n    [imgFallback]=\"imgFallback()\"\r\n    [imgCut]=\"imgCut()\"\r\n    [multiple]=\"multiple()\"\r\n    [download]=\"download()\"\r\n    [multipleModel]=\"multipleModel()\"\r\n    [filesTpl]=\"filesTpl() ?? innerfilesTpl\"\r\n    [maxLimit]=\"maxLimit()\"\r\n    [headers]=\"headers()\"\r\n    (removeClick)=\"removeClick.emit($event)\"\r\n    (uploadReady)=\"uploadReady.emit($event)\"\r\n    (uploading)=\"uploading.emit($event)\"\r\n    (uploadSuccess)=\"uploadSuccess.emit($event)\"\r\n    (uploadError)=\"uploadError.emit($event)\"\r\n  ></x-upload>\r\n  <ng-template #textTpl>\r\n    <ng-content></ng-content>\r\n  </ng-template>\r\n  <ng-template #innerfilesTpl></ng-template>\r\n</div>\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed } from '@angular/core';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XFileCardPrefix, XFileCardProperty } from './attachments.property';\r\nimport { XFileSize, XIsEmpty, XIsString } from '@ng-nest/ui/core';\r\nimport { NgClass } from '@angular/common';\r\nimport { XImageComponent } from '@ng-nest/ui/image';\r\n\r\nconst defaultIcon: { [key: string]: string } = {\r\n  xlsx: 'adf-file-excel',\r\n  xls: 'adf-file-excel',\r\n  docx: 'adf-file-word',\r\n  doc: 'adf-file-word',\r\n  ppt: 'adf-file-ppt',\r\n  pptx: 'adf-file-ppt',\r\n  pdf: 'adf-file-pdf',\r\n  zip: 'adf-file-zip',\r\n  rar: 'adf-file-zip',\r\n  '7z': 'adf-file-zip',\r\n  png: 'adf-file-image',\r\n  jpg: 'adf-file-image',\r\n  jpeg: 'adf-file-image',\r\n  gif: 'adf-file-image',\r\n  bmp: 'adf-file-image',\r\n  md: 'adf-file-markdown',\r\n  txt: 'adf-file-text',\r\n  mp4: 'adf-video-camera',\r\n  avi: 'adf-video-camera',\r\n  mkv: 'adf-video-camera',\r\n  mov: 'adf-video-camera',\r\n  mp3: 'adf-audio',\r\n  wav: 'adf-audio',\r\n  flac: 'adf-audio',\r\n  default: 'adf-file'\r\n};\r\n\r\nconst defaultIconColors: { [key: string]: string } = {\r\n  'adf-file-excel': '#217346',\r\n  'adf-file-word': '#2b579a',\r\n  'adf-file-ppt': '#d24726',\r\n  'adf-file-pdf': '#dc3545',\r\n  'adf-file-zip': '#6c757d',\r\n  'adf-file-image': '#ffc107',\r\n  'adf-file-markdown': '#000000',\r\n  'adf-file-text': '#6c757d',\r\n  'adf-video-camera': '#ff6b6b',\r\n  'adf-audio': '#007bff',\r\n  'adf-file': '#6c757d'\r\n};\r\n\r\n@Component({\r\n  selector: 'x-file-card',\r\n  templateUrl: './file-card.component.html',\r\n  styleUrl: './file-card.component.scss',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [XOutletDirective, XImageComponent, XIconComponent, NgClass]\r\n})\r\nexport class XFileCardComponent extends XFileCardProperty {\r\n  iconString = computed(() => {\r\n    if (XIsString(this.icon())) {\r\n      return this.icon() as string;\r\n    } else {\r\n      return '';\r\n    }\r\n  });\r\n  descriptionString = computed(() => {\r\n    if (XIsString(this.description())) {\r\n      return this.description() as string;\r\n    } else {\r\n      return '';\r\n    }\r\n  });\r\n  sizeTransform = computed(() => {\r\n    if (this.size() && this.size() !== 0) {\r\n      return XFileSize(this.size(), { precision: 0 });\r\n    } else {\r\n      return '';\r\n    }\r\n  });\r\n  nameSubfix = computed(() => {\r\n    const name = this.name() as string;\r\n    const index = name.lastIndexOf('.');\r\n    return index > -1 ? name.substring(index + 1).toLowerCase() : '';\r\n  });\r\n  defaultIcon = computed(() => {\r\n    console.log(this.nameSubfix());\r\n    if (Object.keys(defaultIcon).includes(this.nameSubfix())) {\r\n      return defaultIcon[this.nameSubfix()];\r\n    } else {\r\n      return defaultIcon['default'];\r\n    }\r\n  });\r\n  defaultColor = computed(() => {\r\n    return defaultIconColors[this.defaultIcon()];\r\n  });\r\n  classMap = computed(() => ({\r\n    [`${XFileCardPrefix}-${this.variant()}`]: !XIsEmpty(this.variant())\r\n  }));\r\n  isImage = computed(() => {\r\n    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];\r\n    return imageExtensions.includes(this.nameSubfix().toLowerCase());\r\n  });\r\n}\r\n","<div class=\"x-file-card\" [ngClass]=\"classMap()\" [class.x-file-card-image]=\"isImage() && !!url()\">\r\n  @if (isImage() && !!url()) {\r\n    <x-image width=\"100px\" height=\"100px\" [src]=\"url()\" [alt]=\"descriptionString()\"></x-image>\r\n  } @else {\r\n    @if (icon()) {\r\n      <div class=\"x-file-card-icon\">\r\n        <ng-container *xOutlet=\"icon()\">\r\n          <x-icon [type]=\"iconString()\" [style.color]=\"iconColor()\"></x-icon>\r\n        </ng-container>\r\n      </div>\r\n    } @else {\r\n      <div class=\"x-file-card-icon\">\r\n        <x-icon [type]=\"defaultIcon()\" [style.color]=\"iconColor() ?? defaultColor()\"></x-icon>\r\n      </div>\r\n    }\r\n    <div class=\"x-file-card-content\">\r\n      @if (name()) {\r\n        <div class=\"x-file-card-name\">\r\n          <ng-container *xOutlet=\"name()\">{{ name() }}</ng-container>\r\n        </div>\r\n      }\r\n      @if (size()) {\r\n        <div class=\"x-file-card-size\">\r\n          {{ sizeTransform() }}\r\n        </div>\r\n      }\r\n      @if (description()) {\r\n        <div class=\"x-file-card-description\">\r\n          <ng-container *xOutlet=\"description()\">{{ description() }}</ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XAttachmentsComponent } from './attachments.component';\r\nimport { XFileCardComponent } from './file-card.component';\r\n\r\n@NgModule({\r\n  exports: [XAttachmentsComponent, XFileCardComponent],\r\n  imports: [XAttachmentsComponent, XFileCardComponent]\r\n})\r\nexport class XAttachmentsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-nest-ui-auto-complete.mjs

@@ -266,6 +266,9 @@ class XAutoCompletePortalComponent {
             this.unSubject.complete();
         });
     }
+    ngAfterViewInit() {
+        this.list().keyManager.setFirstItemActive();
+    }
     stopPropagation(event) {
         event.stopPropagation();
     }