@masterteam/components 0.0.36 → 0.0.38

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.
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-table.mjs","sources":["../../../../packages/masterteam/components/table/table.ts","../../../../packages/masterteam/components/table/table.html","../../../../packages/masterteam/components/table/masterteam-components-table.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n model,\n output,\n signal,\n TemplateRef,\n} from '@angular/core';\nimport { NgTemplateOutlet, DatePipe } from '@angular/common';\nimport { ColumnDef, TableAction } from './table-types';\nimport { ToggleField } from '@masterteam/components/toggle-field';\nimport { FormsModule } from '@angular/forms';\nimport { Button } from '@masterteam/components/button';\nimport { TextField } from '@masterteam/components/text-field';\nimport { SelectField } from '@masterteam/components/select-field';\nimport { Paginator } from '@masterteam/components/paginator';\nimport { CheckboxField } from '@masterteam/components/checkbox-field';\nimport { TableModule, TablePageEvent } from 'primeng/table';\nimport { Tabs } from '@masterteam/components/tabs';\n\n@Component({\n selector: 'mt-table',\n templateUrl: './table.html',\n styleUrls: ['./table.css'],\n standalone: true,\n imports: [\n TableModule,\n NgTemplateOutlet,\n DatePipe,\n ToggleField,\n FormsModule,\n Button,\n TextField,\n SelectField,\n Paginator,\n CheckboxField,\n Tabs,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Table {\n selectionChange = output<any[]>();\n\n data = input.required<any[]>();\n columns = input.required<ColumnDef[]>();\n rowActions = input<TableAction[]>([]);\n size = input<'small' | 'large' | undefined>(undefined);\n showGridlines = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n stripedRows = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n selectableRows = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n generalSearch = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n showFilters = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n loading = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n\n // Tabs inputs and outputs\n tabs = input<any[]>();\n tabsOptionLabel = input<string>();\n tabsOptionValue = input<string>();\n activeTab = model<any>();\n onTabChange = output<any>();\n\n // Table actions inputs and outputs\n actions = input<TableAction[]>([]);\n\n // Content TemplateRefs\n captionStartContent = contentChild<TemplateRef<any>>('captionStart');\n captionEndContent = contentChild<TemplateRef<any>>('captionEnd');\n emptyContent = contentChild<TemplateRef<any>>('empty');\n\n paginatorPosition = input<'end' | 'start' | 'center'>('end');\n pageSize = model<number>(10);\n currentPage = model<number>(0);\n first = model<number>(0);\n filterTerm = model<string>('');\n\n protected selectedRows = signal<Set<any>>(new Set());\n protected isFilterPanelOpen = signal<boolean>(false);\n\n protected pendingFilters = signal<Record<string, any>>({});\n protected appliedFilters = signal<Record<string, any>>({});\n\n protected filterableColumns = computed(() =>\n this.columns().filter((col) => !!col.filterConfig),\n );\n\n protected activeFilterCount = computed(() => {\n return Object.values(this.appliedFilters()).filter(\n (value) => value !== null && value !== undefined && value !== '',\n ).length;\n });\n\n protected filteredData = computed(() => {\n const data = this.data();\n const searchTerm = this.filterTerm().toLowerCase();\n\n const filters = this.appliedFilters();\n const filterKeys = Object.keys(filters);\n\n if (searchTerm != '') {\n return data.filter((item) => {\n return Object.values(item).some((value) => {\n if (typeof value === 'string') {\n return value.toLowerCase().includes(searchTerm);\n }\n return false;\n });\n });\n }\n\n if (filterKeys.length === 0) {\n return data;\n }\n\n return data.filter((item) => {\n return filterKeys.every((key) => {\n const filterValue = filters[key];\n const itemValue = this.getProperty(item, key);\n\n if (\n filterValue === null ||\n filterValue === undefined ||\n filterValue === ''\n ) {\n return true;\n }\n\n if (typeof itemValue === 'string') {\n return itemValue\n .toLowerCase()\n .includes(String(filterValue).toLowerCase());\n }\n return itemValue === filterValue;\n });\n });\n });\n\n protected totalRecords = computed(() => this.filteredData().length);\n\n // TODO: remove after updating the toggle and checkbox logic\n protected paginatedData = computed(() => {\n const data = this.filteredData();\n const first = this.first();\n const pageSize = this.pageSize();\n return data.slice(first, first + pageSize);\n });\n\n protected allSelectedOnPage = computed(() => {\n const pageData = this.paginatedData();\n if (pageData.length === 0) return false;\n return pageData.every((row) => this.selectedRows().has(row));\n });\n\n toggleFilterPanel(): void {\n const isOpen = this.isFilterPanelOpen();\n if (!isOpen) {\n this.pendingFilters.set({ ...this.appliedFilters() });\n }\n this.isFilterPanelOpen.set(!isOpen);\n }\n\n updatePendingFilter(key: string, value: any): void {\n if (value === 'true') value = true;\n if (value === 'false') value = false;\n\n this.pendingFilters.update((current) => ({ ...current, [key]: value }));\n }\n\n applyFilters(): void {\n this.appliedFilters.set({ ...this.pendingFilters() });\n this.first.set(0);\n this.currentPage.set(0);\n this.isFilterPanelOpen.set(false);\n }\n\n resetFilters(): void {\n this.pendingFilters.set({});\n this.appliedFilters.set({});\n this.first.set(0);\n this.currentPage.set(0);\n this.isFilterPanelOpen.set(false);\n }\n\n toggleRow(row: any): void {\n const newSet = new Set(this.selectedRows());\n if (newSet.has(row)) newSet.delete(row);\n else newSet.add(row);\n this.selectedRows.set(newSet);\n this.selectionChange.emit(Array.from(this.selectedRows()));\n }\n\n toggleAllRowsOnPage(): void {\n const currentSelection = new Set(this.selectedRows());\n const pageData = this.paginatedData();\n const allSelected = this.allSelectedOnPage();\n if (allSelected) {\n pageData.forEach((row) => currentSelection.delete(row));\n } else {\n pageData.forEach((row) => currentSelection.add(row));\n }\n this.selectedRows.set(currentSelection);\n this.selectionChange.emit(Array.from(this.selectedRows()));\n }\n\n getProperty(obj: any, key: string): any {\n return key.split('.').reduce((o, i) => (o ? o[i] : undefined), obj);\n }\n\n tabChanged(tab: any): void {\n this.filterTerm.set('');\n this.first.set(0);\n this.currentPage.set(0);\n this.onTabChange.emit(tab);\n }\n\n onTablePage(event: TablePageEvent): void {\n console.log('internal page change', event);\n this.first.set(event.first ?? 0);\n this.pageSize.set(event.rows ?? this.pageSize());\n this.currentPage.set(\n Math.floor((this.first() ?? 0) / (this.pageSize() || 1)),\n );\n }\n\n onSearchChange(searchTerm: Event) {\n const value = (searchTerm.target as HTMLInputElement).value;\n this.filterTerm.set(value);\n this.first.set(0);\n this.currentPage.set(0);\n }\n}\n","<div class=\"space-y-4\">\n <div>\n <div class=\"p-datatable-header\">\n <div\n class=\"flex relative\"\n [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\n >\n <div class=\"flex items-center gap-2\">\n <ng-container\n *ngTemplateOutlet=\"captionStartContent()\"\n ></ng-container>\n @if (tabs()) {\n <mt-tabs\n [(active)]=\"activeTab\"\n [options]=\"tabs()\"\n [optionLabel]=\"tabsOptionLabel()\"\n [optionValue]=\"tabsOptionValue()\"\n (onChange)=\"tabChanged($event)\"\n size=\"large\"\n ></mt-tabs>\n }\n @if (generalSearch()) {\n <mt-text-field\n [(ngModel)]=\"filterTerm\"\n (change)=\"onSearchChange($event)\"\n icon=\"general.search-lg\"\n placeholder=\"Search...\"\n ></mt-text-field>\n }\n </div>\n <div class=\"flex items-center gap-2\">\n @if (showFilters()) {\n <mt-button\n variant=\"outline\"\n (click)=\"toggleFilterPanel()\"\n label=\"Filter\"\n [badge]=\"activeFilterCount()\"\n icon=\"general.filter-funnel-01\"\n >\n </mt-button>\n @if (isFilterPanelOpen()) {\n <div\n class=\"absolute top-full right-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-content shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\"\n role=\"menu\"\n >\n <div class=\"p-4\">\n <h3 class=\"text-base font-semibold\">Filter Options</h3>\n </div>\n <div\n class=\"border-t border-surface-300 dark:border-surface-500 p-4 space-y-4\"\n >\n @for (col of filterableColumns(); track col.key) {\n <div class=\"space-y-1\">\n <label class=\"block text-sm font-medium\">\n {{ col.filterConfig?.label }}\n </label>\n @switch (col.filterConfig?.type) {\n @case (\"text\") {\n <mt-text-field\n [(ngModel)]=\"pendingFilters()[col.key]\"\n (ngModelChange)=\"\n updatePendingFilter(col.key, $event)\n \"\n ></mt-text-field>\n }\n @case (\"select\") {\n <mt-select-field\n [(ngModel)]=\"pendingFilters()[col.key]\"\n (ngModelChange)=\"\n updatePendingFilter(col.key, $event)\n \"\n [options]=\"col.filterConfig?.options\"\n [hasPlaceholderPrefix]=\"false\"\n [placeholder]=\"'Select ' + col.filterConfig?.label\"\n showClear\n ></mt-select-field>\n }\n }\n </div>\n }\n </div>\n <div\n class=\"flex items-center justify-end space-x-2 border-t border-surface-300 dark:border-surface-500 bg-surface-50 dark:bg-surface-950 p-4 rounded-b-md\"\n >\n <mt-button\n variant=\"outlined\"\n (click)=\"resetFilters()\"\n label=\"Reset\"\n />\n <mt-button (click)=\"applyFilters()\" label=\"Apply\" />\n </div>\n </div>\n }\n }\n @if (actions().length > 0) {\n <div class=\"flex items-center space-x-2\">\n @for (action of actions(); track action.label) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"action.size\"\n (click)=\"action.action(row)\"\n [label]=\"action.label\"\n [tooltip]=\"action.tooltip\"\n ></mt-button>\n }\n </div>\n }\n <ng-container *ngTemplateOutlet=\"captionEndContent()\"></ng-container>\n </div>\n </div>\n </div>\n @if (!loading() && emptyContent() && data().length === 0) {\n <div\n class=\"p-4 bg-content rounded-md text-center text-gray-600 dark:text-gray-300\"\n >\n <ng-container *ngTemplateOutlet=\"emptyContent()\"></ng-container>\n </div>\n } @else {\n <div class=\"overflow-x-auto bg-content\">\n <p-table\n [value]=\"filteredData()\"\n [columns]=\"columns()\"\n [size]=\"size()\"\n [showGridlines]=\"showGridlines()\"\n [stripedRows]=\"stripedRows()\"\n [first]=\"first()\"\n [rows]=\"pageSize()\"\n [loading]=\"loading()\"\n (onPage)=\"onTablePage($event)\"\n paginator\n paginatorStyleClass=\"hidden!\"\n class=\"min-w-full text-sm align-middle table-fixed\"\n >\n <ng-template\n #header\n let-columns\n class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\n >\n <tr>\n @if (selectableRows()) {\n <th class=\"w-12 text-start\">\n <mt-checkbox-field\n [ngModel]=\"allSelectedOnPage()\"\n (ngModelChange)=\"toggleAllRowsOnPage()\"\n ></mt-checkbox-field>\n </th>\n }\n\n @for (col of columns; track col.key) {\n <th\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n >\n {{ col.label }}\n </th>\n }\n\n @if (rowActions().length > 0) {\n <th\n class=\"text-end! font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n >\n Actions\n </th>\n }\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-row\n let-columns=\"columns\"\n class=\"divide-y divide-gray-200\"\n >\n <tr\n class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\n >\n @if (selectableRows()) {\n <td class=\"w-12\">\n <mt-checkbox-field\n [ngModel]=\"selectedRows().has(row)\"\n (ngModelChange)=\"toggleRow(row)\"\n ></mt-checkbox-field>\n </td>\n }\n\n @for (col of columns; track col.key) {\n <td class=\"text-gray-700 dark:text-gray-100\">\n @switch (col.type) {\n @case (\"boolean\") {\n <mt-toggle-field\n [(ngModel)]=\"row[col.key]\"\n ></mt-toggle-field>\n }\n @case (\"date\") {\n {{ getProperty(row, col.key) | date: \"mediumDate\" }}\n }\n @case (\"custom\") {\n <ng-container\n *ngTemplateOutlet=\"\n col.customCellTpl;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n }\n @default {\n {{ getProperty(row, col.key) }}\n }\n }\n </td>\n }\n\n @if (rowActions().length > 0) {\n <td class=\"text-right\">\n <div class=\"flex items-center justify-end space-x-2\">\n @for (action of rowActions(); track action.label) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"action.size || 'small'\"\n (click)=\"action.action(row)\"\n [tooltip]=\"action.tooltip\"\n [label]=\"action.label\"\n ></mt-button>\n }\n </div>\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td colspan=\"20\" class=\"text-center\">\n <div class=\"flex justify-center\">No data found.</div>\n </td>\n </tr>\n </ng-template>\n </p-table>\n </div>\n }\n </div>\n\n <div class=\"flex flex-col gap-3\" [class]=\"'items-' + paginatorPosition()\">\n <mt-paginator\n [(rows)]=\"pageSize\"\n [(first)]=\"first\"\n [(page)]=\"currentPage\"\n [totalRecords]=\"totalRecords()\"\n [alwaysShow]=\"false\"\n [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\n ></mt-paginator>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"masterteam-components-table.mjs","sources":["../../../../packages/masterteam/components/table/table.ts","../../../../packages/masterteam/components/table/table.html","../../../../packages/masterteam/components/table/masterteam-components-table.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n model,\n output,\n signal,\n TemplateRef,\n} from '@angular/core';\nimport { NgTemplateOutlet, DatePipe } from '@angular/common';\nimport { ColumnDef, TableAction } from './table-types';\nimport { ToggleField } from '@masterteam/components/toggle-field';\nimport { FormsModule } from '@angular/forms';\nimport { Button } from '@masterteam/components/button';\nimport { TextField } from '@masterteam/components/text-field';\nimport { SelectField } from '@masterteam/components/select-field';\nimport { Paginator } from '@masterteam/components/paginator';\nimport { CheckboxField } from '@masterteam/components/checkbox-field';\nimport { TableModule, TablePageEvent } from 'primeng/table';\nimport { Tabs } from '@masterteam/components/tabs';\n\n@Component({\n selector: 'mt-table',\n templateUrl: './table.html',\n styleUrls: ['./table.css'],\n standalone: true,\n imports: [\n TableModule,\n NgTemplateOutlet,\n DatePipe,\n ToggleField,\n FormsModule,\n Button,\n TextField,\n SelectField,\n Paginator,\n CheckboxField,\n Tabs,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Table {\n selectionChange = output<any[]>();\n\n data = input.required<any[]>();\n columns = input.required<ColumnDef[]>();\n rowActions = input<TableAction[]>([]);\n size = input<'small' | 'large' | undefined>(undefined);\n showGridlines = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n stripedRows = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n selectableRows = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n generalSearch = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n showFilters = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n loading = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n\n // Tabs inputs and outputs\n tabs = input<any[]>();\n tabsOptionLabel = input<string>();\n tabsOptionValue = input<string>();\n activeTab = model<any>();\n onTabChange = output<any>();\n\n // Table actions inputs and outputs\n actions = input<TableAction[]>([]);\n\n // Content TemplateRefs\n captionStartContent = contentChild<TemplateRef<any>>('captionStart');\n captionEndContent = contentChild<TemplateRef<any>>('captionEnd');\n emptyContent = contentChild<TemplateRef<any>>('empty');\n\n paginatorPosition = input<'end' | 'start' | 'center'>('end');\n pageSize = model<number>(10);\n currentPage = model<number>(0);\n first = model<number>(0);\n filterTerm = model<string>('');\n\n protected selectedRows = signal<Set<any>>(new Set());\n protected isFilterPanelOpen = signal<boolean>(false);\n\n protected pendingFilters = signal<Record<string, any>>({});\n protected appliedFilters = signal<Record<string, any>>({});\n\n protected filterableColumns = computed(() =>\n this.columns().filter((col) => !!col.filterConfig),\n );\n\n protected activeFilterCount = computed(() => {\n return Object.values(this.appliedFilters()).filter(\n (value) => value !== null && value !== undefined && value !== '',\n ).length;\n });\n\n protected filteredData = computed(() => {\n const data = this.data();\n const searchTerm = this.filterTerm().toLowerCase();\n\n const filters = this.appliedFilters();\n const filterKeys = Object.keys(filters);\n\n if (searchTerm != '') {\n return data.filter((item) => {\n return Object.values(item).some((value) => {\n if (typeof value === 'string') {\n return value.toLowerCase().includes(searchTerm);\n }\n return false;\n });\n });\n }\n\n if (filterKeys.length === 0) {\n return data;\n }\n\n return data.filter((item) => {\n return filterKeys.every((key) => {\n const filterValue = filters[key];\n const itemValue = this.getProperty(item, key);\n\n if (\n filterValue === null ||\n filterValue === undefined ||\n filterValue === ''\n ) {\n return true;\n }\n\n if (typeof itemValue === 'string') {\n return itemValue\n .toLowerCase()\n .includes(String(filterValue).toLowerCase());\n }\n return itemValue === filterValue;\n });\n });\n });\n\n protected totalRecords = computed(() => this.filteredData().length);\n\n // TODO: remove after updating the toggle and checkbox logic\n protected paginatedData = computed(() => {\n const data = this.filteredData();\n const first = this.first();\n const pageSize = this.pageSize();\n return data.slice(first, first + pageSize);\n });\n\n protected allSelectedOnPage = computed(() => {\n const pageData = this.paginatedData();\n if (pageData.length === 0) return false;\n return pageData.every((row) => this.selectedRows().has(row));\n });\n\n toggleFilterPanel(): void {\n const isOpen = this.isFilterPanelOpen();\n if (!isOpen) {\n this.pendingFilters.set({ ...this.appliedFilters() });\n }\n this.isFilterPanelOpen.set(!isOpen);\n }\n\n updatePendingFilter(key: string, value: any): void {\n if (value === 'true') value = true;\n if (value === 'false') value = false;\n\n this.pendingFilters.update((current) => ({ ...current, [key]: value }));\n }\n\n applyFilters(): void {\n this.appliedFilters.set({ ...this.pendingFilters() });\n this.first.set(0);\n this.currentPage.set(0);\n this.isFilterPanelOpen.set(false);\n }\n\n resetFilters(): void {\n this.pendingFilters.set({});\n this.appliedFilters.set({});\n this.first.set(0);\n this.currentPage.set(0);\n this.isFilterPanelOpen.set(false);\n }\n\n toggleRow(row: any): void {\n const newSet = new Set(this.selectedRows());\n if (newSet.has(row)) newSet.delete(row);\n else newSet.add(row);\n this.selectedRows.set(newSet);\n this.selectionChange.emit(Array.from(this.selectedRows()));\n }\n\n toggleAllRowsOnPage(): void {\n const currentSelection = new Set(this.selectedRows());\n const pageData = this.paginatedData();\n const allSelected = this.allSelectedOnPage();\n if (allSelected) {\n pageData.forEach((row) => currentSelection.delete(row));\n } else {\n pageData.forEach((row) => currentSelection.add(row));\n }\n this.selectedRows.set(currentSelection);\n this.selectionChange.emit(Array.from(this.selectedRows()));\n }\n\n getProperty(obj: any, key: string): any {\n return key.split('.').reduce((o, i) => (o ? o[i] : undefined), obj);\n }\n\n tabChanged(tab: any): void {\n this.filterTerm.set('');\n this.first.set(0);\n this.currentPage.set(0);\n this.onTabChange.emit(tab);\n }\n\n onTablePage(event: TablePageEvent): void {\n console.log('internal page change', event);\n this.first.set(event.first ?? 0);\n this.pageSize.set(event.rows ?? this.pageSize());\n this.currentPage.set(\n Math.floor((this.first() ?? 0) / (this.pageSize() || 1)),\n );\n }\n\n onSearchChange(searchTerm: Event) {\n const value = (searchTerm.target as HTMLInputElement).value;\n this.filterTerm.set(value);\n this.first.set(0);\n this.currentPage.set(0);\n }\n}\n","<div class=\"space-y-4\">\n <div>\n @if (\n captionStartContent() ||\n captionEndContent() ||\n generalSearch() ||\n showFilters() ||\n tabs()?.length > 0 ||\n actions()?.length > 0\n ) {\n <div class=\"p-datatable-header\">\n <div\n class=\"flex relative\"\n [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\n >\n <div class=\"flex items-center gap-2\">\n <ng-container\n *ngTemplateOutlet=\"captionStartContent()\"\n ></ng-container>\n @if (tabs()) {\n <mt-tabs\n [(active)]=\"activeTab\"\n [options]=\"tabs()\"\n [optionLabel]=\"tabsOptionLabel()\"\n [optionValue]=\"tabsOptionValue()\"\n (onChange)=\"tabChanged($event)\"\n size=\"large\"\n ></mt-tabs>\n }\n @if (generalSearch()) {\n <mt-text-field\n [(ngModel)]=\"filterTerm\"\n (change)=\"onSearchChange($event)\"\n icon=\"general.search-lg\"\n placeholder=\"Search...\"\n ></mt-text-field>\n }\n </div>\n <div class=\"flex items-center gap-2\">\n @if (showFilters()) {\n <mt-button\n variant=\"outline\"\n (click)=\"toggleFilterPanel()\"\n label=\"Filter\"\n [badge]=\"activeFilterCount()\"\n icon=\"general.filter-funnel-01\"\n >\n </mt-button>\n @if (isFilterPanelOpen()) {\n <div\n class=\"absolute top-full right-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-content shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\"\n role=\"menu\"\n >\n <div class=\"p-4\">\n <h3 class=\"text-base font-semibold\">Filter Options</h3>\n </div>\n <div\n class=\"border-t border-surface-300 dark:border-surface-500 p-4 space-y-4\"\n >\n @for (col of filterableColumns(); track col.key) {\n <div class=\"space-y-1\">\n <label class=\"block text-sm font-medium\">\n {{ col.filterConfig?.label }}\n </label>\n @switch (col.filterConfig?.type) {\n @case (\"text\") {\n <mt-text-field\n [(ngModel)]=\"pendingFilters()[col.key]\"\n (ngModelChange)=\"\n updatePendingFilter(col.key, $event)\n \"\n ></mt-text-field>\n }\n @case (\"select\") {\n <mt-select-field\n [(ngModel)]=\"pendingFilters()[col.key]\"\n (ngModelChange)=\"\n updatePendingFilter(col.key, $event)\n \"\n [options]=\"col.filterConfig?.options\"\n [hasPlaceholderPrefix]=\"false\"\n [placeholder]=\"\n 'Select ' + col.filterConfig?.label\n \"\n showClear\n ></mt-select-field>\n }\n }\n </div>\n }\n </div>\n <div\n class=\"flex items-center justify-end space-x-2 border-t border-surface-300 dark:border-surface-500 bg-surface-50 dark:bg-surface-950 p-4 rounded-b-md\"\n >\n <mt-button\n variant=\"outlined\"\n (click)=\"resetFilters()\"\n label=\"Reset\"\n />\n <mt-button (click)=\"applyFilters()\" label=\"Apply\" />\n </div>\n </div>\n }\n }\n @if (actions()?.length > 0) {\n <div class=\"flex items-center space-x-2\">\n @for (action of actions(); track action.label) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"action.size\"\n (click)=\"action.action(row)\"\n [label]=\"action.label\"\n [tooltip]=\"action.tooltip\"\n ></mt-button>\n }\n </div>\n }\n <ng-container\n *ngTemplateOutlet=\"captionEndContent()\"\n ></ng-container>\n </div>\n </div>\n </div>\n }\n @if (!loading() && emptyContent() && data().length === 0) {\n <div\n class=\"p-4 bg-content rounded-md text-center text-gray-600 dark:text-gray-300\"\n >\n <ng-container *ngTemplateOutlet=\"emptyContent()\"></ng-container>\n </div>\n } @else {\n <div class=\"overflow-x-auto bg-content\">\n <p-table\n [value]=\"filteredData()\"\n [columns]=\"columns()\"\n [size]=\"size()\"\n [showGridlines]=\"showGridlines()\"\n [stripedRows]=\"stripedRows()\"\n [first]=\"first()\"\n [rows]=\"pageSize()\"\n [loading]=\"loading()\"\n (onPage)=\"onTablePage($event)\"\n paginator\n paginatorStyleClass=\"hidden!\"\n class=\"min-w-full text-sm align-middle table-fixed\"\n >\n <ng-template\n #header\n let-columns\n class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\n >\n <tr>\n @if (selectableRows()) {\n <th class=\"w-12 text-start\">\n <mt-checkbox-field\n [ngModel]=\"allSelectedOnPage()\"\n (ngModelChange)=\"toggleAllRowsOnPage()\"\n ></mt-checkbox-field>\n </th>\n }\n\n @for (col of columns; track col.key) {\n <th\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n >\n {{ col.label }}\n </th>\n }\n\n @if (rowActions().length > 0) {\n <th\n class=\"text-end! font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n >\n Actions\n </th>\n }\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-row\n let-columns=\"columns\"\n class=\"divide-y divide-gray-200\"\n >\n <tr\n class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\n >\n @if (selectableRows()) {\n <td class=\"w-12\">\n <mt-checkbox-field\n [ngModel]=\"selectedRows().has(row)\"\n (ngModelChange)=\"toggleRow(row)\"\n ></mt-checkbox-field>\n </td>\n }\n\n @for (col of columns; track col.key) {\n <td class=\"text-gray-700 dark:text-gray-100\">\n @switch (col.type) {\n @case (\"boolean\") {\n <mt-toggle-field\n [(ngModel)]=\"row[col.key]\"\n ></mt-toggle-field>\n }\n @case (\"date\") {\n {{ getProperty(row, col.key) | date: \"mediumDate\" }}\n }\n @case (\"custom\") {\n <ng-container\n *ngTemplateOutlet=\"\n col.customCellTpl;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n }\n @default {\n {{ getProperty(row, col.key) }}\n }\n }\n </td>\n }\n\n @if (rowActions().length > 0) {\n <td class=\"text-right\">\n <div class=\"flex items-center justify-end space-x-2\">\n @for (action of rowActions(); track action.label) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"action.size || 'small'\"\n (click)=\"action.action(row)\"\n [tooltip]=\"action.tooltip\"\n [label]=\"action.label\"\n ></mt-button>\n }\n </div>\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td colspan=\"20\" class=\"text-center\">\n <div class=\"flex justify-center\">No data found.</div>\n </td>\n </tr>\n </ng-template>\n </p-table>\n </div>\n }\n </div>\n\n <div class=\"flex flex-col gap-3\" [class]=\"'items-' + paginatorPosition()\">\n <mt-paginator\n [(rows)]=\"pageSize\"\n [(first)]=\"first\"\n [(page)]=\"currentPage\"\n [totalRecords]=\"totalRecords()\"\n [alwaysShow]=\"false\"\n [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\n ></mt-paginator>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,11 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, ChangeDetectorRef, Pipe, input, output, computed, Component, model, signal } from '@angular/core';
2
+ import { inject, ChangeDetectorRef, Pipe, input, output, model, computed, Component, signal } from '@angular/core';
3
3
  import { CommonModule } from '@angular/common';
4
4
  import { Button } from '@masterteam/components/button';
5
5
  import { distinctUntilChanged, filter, switchMap, map, catchError, finalize, tap } from 'rxjs/operators';
6
6
  import { DomSanitizer } from '@angular/platform-browser';
7
7
  import { Subscription, BehaviorSubject, of, finalize as finalize$1, catchError as catchError$1, throwError, take } from 'rxjs';
8
8
  import { HttpClient } from '@angular/common/http';
9
+ import { Avatar } from '@masterteam/components/avatar';
9
10
  import { Icon } from '@masterteam/icons';
10
11
  import { FormsModule, Validators, NgControl } from '@angular/forms';
11
12
  import { ImageModule } from 'primeng/image';
@@ -22,31 +23,25 @@ class SecureImagePipe {
22
23
  this.subscription.unsubscribe();
23
24
  }
24
25
  subscription = new Subscription();
25
- loadingImagePath = './assets/images/loading-img.jpg';
26
- errorImagePath = './assets/images/default-img.png';
27
26
  latestValue;
28
27
  transformValue = new BehaviorSubject('');
29
28
  loading = true;
30
- transform(imagePath, noDefault, loadingImagePath, errorImagePath) {
31
- this.loadingImagePath = loadingImagePath ?? this.loadingImagePath;
32
- this.errorImagePath = noDefault
33
- ? ''
34
- : (errorImagePath ?? this.errorImagePath);
29
+ transform(imagePath) {
35
30
  this.transformValue.next(imagePath);
36
- // return (this.latestValue as string) || this.loadingImagePath;
37
- return this.loading ? this.loadingImagePath : this.latestValue;
31
+ return this.loading ? '' : this.latestValue;
38
32
  }
39
33
  setUpSubscription() {
40
34
  const transformSubscription = this.transformValue
41
35
  .asObservable()
42
36
  .pipe(distinctUntilChanged(), filter((v) => !!v && !v.includes('null')), switchMap((imagePath) => {
43
37
  this.latestValue = '';
38
+ this.loading = true;
44
39
  return this.httpClient
45
40
  .get(imagePath, {
46
41
  observe: 'response',
47
42
  responseType: 'blob',
48
43
  })
49
- .pipe(map((response) => URL.createObjectURL(response.body)), map((unsafeBlobUrl) => this.domSanitizer.bypassSecurityTrustUrl(unsafeBlobUrl)), filter((blobUrl) => blobUrl !== this.latestValue), catchError(() => of(this.errorImagePath)), finalize(() => (this.loading = false)));
44
+ .pipe(map((response) => URL.createObjectURL(response.body)), map((unsafeBlobUrl) => this.domSanitizer.bypassSecurityTrustUrl(unsafeBlobUrl)), filter((blobUrl) => blobUrl !== this.latestValue), catchError(() => of('')), finalize(() => (this.loading = false)));
50
45
  }), tap((imagePath) => {
51
46
  this.latestValue = imagePath;
52
47
  this.cdr.markForCheck();
@@ -74,17 +69,37 @@ class UploadFilePreview {
74
69
  onUploadInputClicked = output();
75
70
  ondDownloadFile = output();
76
71
  onDeleteFile = output();
77
- disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
72
+ disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
73
+ readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
78
74
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
79
75
  isImag = computed(() => {
80
- return this.value()?.fileType?.startsWith('image/');
76
+ return this.value()?.contentType?.startsWith('image/');
81
77
  }, ...(ngDevMode ? [{ debugName: "isImag" }] : []));
78
+ ngOnInit() {
79
+ if (this.readonly()) {
80
+ this.disabled.set(true);
81
+ }
82
+ }
83
+ defaultIcon = computed(() => {
84
+ switch (this.value()?.extension) {
85
+ case '.pdf':
86
+ return 'file.file-06';
87
+ case '.docx':
88
+ case '.doc':
89
+ return 'file.file-06';
90
+ case '.xlsx':
91
+ case '.xls':
92
+ return 'file.file-06';
93
+ default:
94
+ return 'image.image-03';
95
+ }
96
+ }, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
82
97
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UploadFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
83
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UploadFilePreview, isStandalone: true, selector: "mt-upload-file-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile" }, ngImport: i0, template: "<div class=\"flex items-center justify-between gap-2 w-full p-2\">\n <div class=\"flex gap-2 items-center\">\n <img\n [src]=\"\n isImag()\n ? imgPath()\n ? (imgPath() | secureImage)\n : './assets/images/default-img.png'\n : './assets/images/default-img.png'\n \"\n alt=\"image\"\n width=\"40\"\n height=\"40\"\n class=\"rounded-sm\"\n />\n <div class=\"w-[1/3]\">\n {{ value().name }}\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n @if (!disabled() && !!value() && !loading()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
98
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UploadFilePreview, isStandalone: true, selector: "mt-upload-file-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"flex items-center justify-between gap-2 w-full p-2\">\n <div class=\"flex gap-2 items-center\">\n <mt-avatar\n [size]=\"size()\"\n [shape]=\"'square'\"\n [image]=\"isImag() && imgPath() ? (imgPath() | secureImage) : ''\"\n [icon]=\"defaultIcon()\"\n styleClass=\"text-2xl!\"\n >\n </mt-avatar>\n\n <div class=\"w-[1/3]\">\n {{ value().name }}\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n @if (!disabled() && !!value() && !loading()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
84
99
  }
85
100
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UploadFilePreview, decorators: [{
86
101
  type: Component,
87
- args: [{ selector: 'mt-upload-file-preview', standalone: true, imports: [CommonModule, SecureImagePipe, Button], template: "<div class=\"flex items-center justify-between gap-2 w-full p-2\">\n <div class=\"flex gap-2 items-center\">\n <img\n [src]=\"\n isImag()\n ? imgPath()\n ? (imgPath() | secureImage)\n : './assets/images/default-img.png'\n : './assets/images/default-img.png'\n \"\n alt=\"image\"\n width=\"40\"\n height=\"40\"\n class=\"rounded-sm\"\n />\n <div class=\"w-[1/3]\">\n {{ value().name }}\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n @if (!disabled() && !!value() && !loading()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n }\n </div>\n</div>\n" }]
102
+ args: [{ selector: 'mt-upload-file-preview', standalone: true, imports: [CommonModule, SecureImagePipe, Button, Avatar], template: "<div class=\"flex items-center justify-between gap-2 w-full p-2\">\n <div class=\"flex gap-2 items-center\">\n <mt-avatar\n [size]=\"size()\"\n [shape]=\"'square'\"\n [image]=\"isImag() && imgPath() ? (imgPath() | secureImage) : ''\"\n [icon]=\"defaultIcon()\"\n styleClass=\"text-2xl!\"\n >\n </mt-avatar>\n\n <div class=\"w-[1/3]\">\n {{ value().name }}\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n @if (!disabled() && !!value() && !loading()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n (click)=\"$event.stopPropagation()\"\n >\n </mt-button>\n }\n </div>\n</div>\n" }]
88
103
  }] });
89
104
 
90
105
  class UploadUserPreview {
@@ -93,19 +108,27 @@ class UploadUserPreview {
93
108
  loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
94
109
  uploadProgress = input(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
95
110
  isDragging = input(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
111
+ defaultIcon = signal('image.image-03', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
96
112
  onUploadInputClicked = output();
97
113
  ondDownloadFile = output();
98
114
  onDeleteFile = output();
99
115
  onDragOver = output();
100
116
  onDragLeave = output();
101
117
  onDrop = output();
102
- disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
118
+ disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
119
+ readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
103
120
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
121
+ userImgClass = input('', ...(ngDevMode ? [{ debugName: "userImgClass" }] : []));
104
122
  OnUploadInputClicked() {
105
123
  if (!this.imgPath() && !this.loading() && !this.disabled()) {
106
124
  this.onUploadInputClicked.emit(true);
107
125
  }
108
126
  }
127
+ ngOnInit() {
128
+ if (this.readonly()) {
129
+ this.disabled.set(true);
130
+ }
131
+ }
109
132
  OnDragOver(event) {
110
133
  this.onDragOver.emit(event);
111
134
  }
@@ -116,21 +139,31 @@ class UploadUserPreview {
116
139
  this.onDrop.emit(event);
117
140
  }
118
141
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UploadUserPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
119
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UploadUserPreview, isStandalone: true, selector: "mt-upload-user-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, ngImport: i0, template: "<div\n class=\"rounded-full p-1 w-fit\"\n [style.background]=\"\n 'conic-gradient(var(--p-primary-300) ' +\n uploadProgress() +\n '%, transparent ' +\n uploadProgress() +\n '%)'\n \"\n>\n <div class=\"relative rounded-full w-fit\" [class.opacity-50]=\"isDragging()\">\n <img\n [src]=\"\n imgPath()\n ? (imgPath() | secureImage)\n : './assets/images/default-img.png'\n \"\n alt=\"image\"\n [width]=\"size()\"\n [height]=\"size()\"\n class=\"rounded-full\"\n />\n\n @if (!loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\n (click)=\"OnUploadInputClicked()\"\n (dragover)=\"OnDragOver($event)\"\n (dragleave)=\"OnDragLeave($event)\"\n (drop)=\"OnDrop($event)\"\n >\n @if (!disabled() && !!imgPath()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n >\n </mt-button>\n }\n @if (!imgPath() && !disabled()) {\n <mt-icon\n icon=\"general.upload-01\"\n class=\"text-primary-400 text-xl\"\n ></mt-icon>\n }\n </div>\n } @else if (loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50\"\n >\n @if (uploadProgress() === 100) {\n <mt-icon\n icon=\"general.check\"\n class=\"text-primary-400 text-2xl\"\n ></mt-icon>\n } @else {\n <small class=\"text-primary-300 font-bold\">{{\n uploadProgress() + \"%\"\n }}</small>\n }\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
142
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UploadUserPreview, isStandalone: true, selector: "mt-upload-user-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userImgClass: { classPropertyName: "userImgClass", publicName: "userImgClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop", disabled: "disabledChange" }, ngImport: i0, template: "<div\n class=\"rounded-full p-1 w-fit\"\n [style.background]=\"\n 'conic-gradient(var(--p-primary-300) ' +\n uploadProgress() +\n '%, transparent ' +\n uploadProgress() +\n '%)'\n \"\n>\n <div\n class=\"relative rounded-full w-fit border-2 border-dashed border-gray-300 bg-white\"\n [class.opacity-50]=\"isDragging()\"\n >\n <mt-avatar\n [size]=\"size()\"\n [image]=\"imgPath() ? (imgPath() | secureImage) : ''\"\n [icon]=\"defaultIcon()\"\n [styleClass]=\"userImgClass()\"\n >\n </mt-avatar>\n\n @if (!loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\n (click)=\"OnUploadInputClicked()\"\n (dragover)=\"OnDragOver($event)\"\n (dragleave)=\"OnDragLeave($event)\"\n (drop)=\"OnDrop($event)\"\n >\n @if (!disabled() && !!imgPath()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n >\n </mt-button>\n }\n @if (!imgPath() && !disabled()) {\n <mt-icon\n icon=\"general.upload-01\"\n class=\"text-primary-400 text-xl\"\n ></mt-icon>\n }\n </div>\n } @else if (loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50\"\n >\n @if (uploadProgress() === 100) {\n <mt-icon\n icon=\"general.check\"\n class=\"text-primary-400 text-2xl\"\n ></mt-icon>\n } @else {\n <small class=\"text-primary-300 font-bold text-lg\">{{\n uploadProgress() + \"%\"\n }}</small>\n }\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
120
143
  }
121
144
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UploadUserPreview, decorators: [{
122
145
  type: Component,
123
- args: [{ selector: 'mt-upload-user-preview', standalone: true, imports: [CommonModule, FormsModule, Icon, SecureImagePipe, Button, Icon], template: "<div\n class=\"rounded-full p-1 w-fit\"\n [style.background]=\"\n 'conic-gradient(var(--p-primary-300) ' +\n uploadProgress() +\n '%, transparent ' +\n uploadProgress() +\n '%)'\n \"\n>\n <div class=\"relative rounded-full w-fit\" [class.opacity-50]=\"isDragging()\">\n <img\n [src]=\"\n imgPath()\n ? (imgPath() | secureImage)\n : './assets/images/default-img.png'\n \"\n alt=\"image\"\n [width]=\"size()\"\n [height]=\"size()\"\n class=\"rounded-full\"\n />\n\n @if (!loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\n (click)=\"OnUploadInputClicked()\"\n (dragover)=\"OnDragOver($event)\"\n (dragleave)=\"OnDragLeave($event)\"\n (drop)=\"OnDrop($event)\"\n >\n @if (!disabled() && !!imgPath()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n >\n </mt-button>\n }\n @if (!imgPath() && !disabled()) {\n <mt-icon\n icon=\"general.upload-01\"\n class=\"text-primary-400 text-xl\"\n ></mt-icon>\n }\n </div>\n } @else if (loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50\"\n >\n @if (uploadProgress() === 100) {\n <mt-icon\n icon=\"general.check\"\n class=\"text-primary-400 text-2xl\"\n ></mt-icon>\n } @else {\n <small class=\"text-primary-300 font-bold\">{{\n uploadProgress() + \"%\"\n }}</small>\n }\n </div>\n }\n </div>\n</div>\n" }]
146
+ args: [{ selector: 'mt-upload-user-preview', standalone: true, imports: [
147
+ CommonModule,
148
+ FormsModule,
149
+ Icon,
150
+ SecureImagePipe,
151
+ Button,
152
+ Icon,
153
+ Avatar,
154
+ ], template: "<div\n class=\"rounded-full p-1 w-fit\"\n [style.background]=\"\n 'conic-gradient(var(--p-primary-300) ' +\n uploadProgress() +\n '%, transparent ' +\n uploadProgress() +\n '%)'\n \"\n>\n <div\n class=\"relative rounded-full w-fit border-2 border-dashed border-gray-300 bg-white\"\n [class.opacity-50]=\"isDragging()\"\n >\n <mt-avatar\n [size]=\"size()\"\n [image]=\"imgPath() ? (imgPath() | secureImage) : ''\"\n [icon]=\"defaultIcon()\"\n [styleClass]=\"userImgClass()\"\n >\n </mt-avatar>\n\n @if (!loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\n (click)=\"OnUploadInputClicked()\"\n (dragover)=\"OnDragOver($event)\"\n (dragleave)=\"OnDragLeave($event)\"\n (drop)=\"OnDrop($event)\"\n >\n @if (!disabled() && !!imgPath()) {\n <mt-button\n variant=\"text\"\n icon=\"general.download-01\"\n tooltip=\"Download\"\n (onClick)=\"ondDownloadFile.emit(value())\"\n >\n </mt-button>\n <mt-button\n variant=\"text\"\n icon=\"general.trash-01\"\n tooltip=\"Delete\"\n severity=\"danger\"\n (onClick)=\"onDeleteFile.emit(true)\"\n >\n </mt-button>\n }\n @if (!imgPath() && !disabled()) {\n <mt-icon\n icon=\"general.upload-01\"\n class=\"text-primary-400 text-xl\"\n ></mt-icon>\n }\n </div>\n } @else if (loading()) {\n <div\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50\"\n >\n @if (uploadProgress() === 100) {\n <mt-icon\n icon=\"general.check\"\n class=\"text-primary-400 text-2xl\"\n ></mt-icon>\n } @else {\n <small class=\"text-primary-300 font-bold text-lg\">{{\n uploadProgress() + \"%\"\n }}</small>\n }\n </div>\n }\n </div>\n</div>\n" }]
124
155
  }] });
125
156
 
126
157
  class UploadField {
127
158
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
128
159
  endPoint = input('uploader', ...(ngDevMode ? [{ debugName: "endPoint" }] : []));
129
- size = input('100', ...(ngDevMode ? [{ debugName: "size" }] : []));
160
+ size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
161
+ userImgClass = input('w-25! h-25! text-4xl! text-gray-400!', ...(ngDevMode ? [{ debugName: "userImgClass" }] : []));
130
162
  isUserField = input(false, ...(ngDevMode ? [{ debugName: "isUserField" }] : []));
131
- accept = input('.pdf,.doc,.docx,image/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
163
+ accept = input('.pdf,.doc,.docx,.xlsx,image/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
132
164
  isDragging = model(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
133
165
  fileSizeLimit = input(...(ngDevMode ? [undefined, { debugName: "fileSizeLimit" }] : []));
166
+ readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
134
167
  onChange = output();
135
168
  requiredValidator = Validators.required;
136
169
  value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -154,9 +187,6 @@ class UploadField {
154
187
  constructor() {
155
188
  if (this.ngControl) {
156
189
  this.ngControl.valueAccessor = this;
157
- setTimeout(() => {
158
- console.log('this.ngControl', this.size());
159
- }, 3000);
160
190
  }
161
191
  }
162
192
  writeValue(value) {
@@ -184,6 +214,7 @@ class UploadField {
184
214
  console.log('onDelete');
185
215
  this.value.set(null);
186
216
  this.onModelChange(this.value() ?? null);
217
+ this.onChange.emit(this.value());
187
218
  }
188
219
  }
189
220
  onFileSelect(event) {
@@ -219,7 +250,7 @@ class UploadField {
219
250
  setTimeout(() => {
220
251
  this.uploadProgress.set(0);
221
252
  this.loading.set(false);
222
- }, 1000);
253
+ }, 700);
223
254
  }), catchError$1(() => {
224
255
  this.uploadProgress.set(0); // Reset on error
225
256
  return throwError(() => new Error('Upload failed'));
@@ -306,7 +337,7 @@ class UploadField {
306
337
  }
307
338
  }
308
339
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UploadField, deps: [], target: i0.ɵɵFactoryTarget.Component });
309
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UploadField, isStandalone: true, selector: "mt-upload-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isUserField: { classPropertyName: "isUserField", publicName: "isUserField", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, fileSizeLimit: { classPropertyName: "fileSizeLimit", publicName: "fileSizeLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDragging: "isDraggingChange", onChange: "onChange" }, ngImport: i0, template: "<input\n #uploadInput\n type=\"file\"\n name=\"file[]\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none\"\n [accept]=\"isUserField() ? 'image/*' : accept()\"\n/>\n\n@if (isUserField()) {\n <div class=\"flex flex-col items-center gap-2 w-full\">\n <div class=\"flex\">\n <div class=\"flex flex-col items-center\">\n <mt-upload-user-preview\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [endPoint]=\"endPoint()\"\n [disabled]=\"disabled()\"\n [loading]=\"loading()\"\n [size]=\"size()\"\n [isDragging]=\"isDragging()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n (onDragOver)=\"onDragOver($event)\"\n (onDragLeave)=\"onDragLeave($event)\"\n (onDrop)=\"onDrop($event)\"\n ></mt-upload-user-preview>\n @if (label()) {\n <label\n [class.required]=\"\n ngControl?.control?.hasValidator(requiredValidator)\n \"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n </div>\n </div>\n </div>\n} @else {\n <div class=\"flex flex-col items-start gap-2 w-full\">\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n\n <div\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n (click)=\"uploadInput.click()\"\n [class.border-blue-500]=\"isDragging()\"\n [class.bg-blue-50]=\"isDragging()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (value()) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [endPoint]=\"endPoint()\"\n [disabled]=\"disabled()\"\n [loading]=\"loading()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n />\n } @else {\n @if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{ \"Uploading...\" + uploadProgress() + \"%\" }}\n </p>\n </div>\n } @else {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <mt-icon icon=\"general.upload-01\" />\n <p class=\"text-lg text-gray-500\">Click or drop a file to upload</p>\n </div>\n }\n }\n </div>\n </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: UploadUserPreview, selector: "mt-upload-user-preview", inputs: ["value", "imgPath", "loading", "uploadProgress", "isDragging", "disabled", "size"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "onDragOver", "onDragLeave", "onDrop"] }, { kind: "component", type: UploadFilePreview, selector: "mt-upload-file-preview", inputs: ["value", "imgPath", "loading", "uploadProgress", "disabled", "size"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }] });
340
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UploadField, isStandalone: true, selector: "mt-upload-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userImgClass: { classPropertyName: "userImgClass", publicName: "userImgClass", isSignal: true, isRequired: false, transformFunction: null }, isUserField: { classPropertyName: "isUserField", publicName: "isUserField", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, fileSizeLimit: { classPropertyName: "fileSizeLimit", publicName: "fileSizeLimit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDragging: "isDraggingChange", onChange: "onChange" }, ngImport: i0, template: "<input\n #uploadInput\n type=\"file\"\n name=\"file[]\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none\"\n [accept]=\"isUserField() ? 'image/*' : accept()\"\n/>\n\n@if (isUserField()) {\n <div class=\"flex flex-col items-center gap-2 w-full\">\n <div class=\"flex\">\n <div class=\"flex flex-col items-center\">\n <mt-upload-user-preview\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [size]=\"size()\"\n [userImgClass]=\"userImgClass()\"\n [isDragging]=\"isDragging()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n (onDragOver)=\"onDragOver($event)\"\n (onDragLeave)=\"onDragLeave($event)\"\n (onDrop)=\"onDrop($event)\"\n ></mt-upload-user-preview>\n @if (label()) {\n <label\n [class.required]=\"\n ngControl?.control?.hasValidator(requiredValidator)\n \"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n </div>\n </div>\n </div>\n} @else {\n <div class=\"flex flex-col items-start gap-2 w-full\">\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n\n <div\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n [class]=\"this.disabled() ? 'bg-gray-50' : ''\"\n (click)=\"\n !this.loading() && !this.disabled() && !this.readonly()\n ? uploadInput.click()\n : ''\n \"\n [class.border-blue-500]=\"isDragging()\"\n [class.bg-blue-50]=\"isDragging()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (value()) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n />\n } @else {\n @if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{ \"Uploading...\" + uploadProgress() + \"%\" }}\n </p>\n </div>\n } @else {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <mt-icon icon=\"general.upload-01\" />\n <p class=\"text-lg text-gray-500\">Click or drop a file to upload</p>\n </div>\n }\n }\n </div>\n </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: UploadUserPreview, selector: "mt-upload-user-preview", inputs: ["value", "imgPath", "loading", "uploadProgress", "isDragging", "disabled", "readonly", "size", "userImgClass"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "onDragOver", "onDragLeave", "onDrop", "disabledChange"] }, { kind: "component", type: UploadFilePreview, selector: "mt-upload-file-preview", inputs: ["value", "imgPath", "loading", "uploadProgress", "disabled", "readonly", "size"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "disabledChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }] });
310
341
  }
311
342
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UploadField, decorators: [{
312
343
  type: Component,
@@ -319,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
319
350
  UploadUserPreview,
320
351
  UploadFilePreview,
321
352
  FieldValidation,
322
- ], template: "<input\n #uploadInput\n type=\"file\"\n name=\"file[]\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none\"\n [accept]=\"isUserField() ? 'image/*' : accept()\"\n/>\n\n@if (isUserField()) {\n <div class=\"flex flex-col items-center gap-2 w-full\">\n <div class=\"flex\">\n <div class=\"flex flex-col items-center\">\n <mt-upload-user-preview\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [endPoint]=\"endPoint()\"\n [disabled]=\"disabled()\"\n [loading]=\"loading()\"\n [size]=\"size()\"\n [isDragging]=\"isDragging()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n (onDragOver)=\"onDragOver($event)\"\n (onDragLeave)=\"onDragLeave($event)\"\n (onDrop)=\"onDrop($event)\"\n ></mt-upload-user-preview>\n @if (label()) {\n <label\n [class.required]=\"\n ngControl?.control?.hasValidator(requiredValidator)\n \"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n </div>\n </div>\n </div>\n} @else {\n <div class=\"flex flex-col items-start gap-2 w-full\">\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n\n <div\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n (click)=\"uploadInput.click()\"\n [class.border-blue-500]=\"isDragging()\"\n [class.bg-blue-50]=\"isDragging()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (value()) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [endPoint]=\"endPoint()\"\n [disabled]=\"disabled()\"\n [loading]=\"loading()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n />\n } @else {\n @if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{ \"Uploading...\" + uploadProgress() + \"%\" }}\n </p>\n </div>\n } @else {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <mt-icon icon=\"general.upload-01\" />\n <p class=\"text-lg text-gray-500\">Click or drop a file to upload</p>\n </div>\n }\n }\n </div>\n </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n" }]
353
+ ], template: "<input\n #uploadInput\n type=\"file\"\n name=\"file[]\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none\"\n [accept]=\"isUserField() ? 'image/*' : accept()\"\n/>\n\n@if (isUserField()) {\n <div class=\"flex flex-col items-center gap-2 w-full\">\n <div class=\"flex\">\n <div class=\"flex flex-col items-center\">\n <mt-upload-user-preview\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [size]=\"size()\"\n [userImgClass]=\"userImgClass()\"\n [isDragging]=\"isDragging()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n (onDragOver)=\"onDragOver($event)\"\n (onDragLeave)=\"onDragLeave($event)\"\n (onDrop)=\"onDrop($event)\"\n ></mt-upload-user-preview>\n @if (label()) {\n <label\n [class.required]=\"\n ngControl?.control?.hasValidator(requiredValidator)\n \"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n </div>\n </div>\n </div>\n} @else {\n <div class=\"flex flex-col items-start gap-2 w-full\">\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n\n <div\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n [class]=\"this.disabled() ? 'bg-gray-50' : ''\"\n (click)=\"\n !this.loading() && !this.disabled() && !this.readonly()\n ? uploadInput.click()\n : ''\n \"\n [class.border-blue-500]=\"isDragging()\"\n [class.bg-blue-50]=\"isDragging()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (value()) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"value()\"\n [imgPath]=\"imgPath()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete()\"\n />\n } @else {\n @if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{ \"Uploading...\" + uploadProgress() + \"%\" }}\n </p>\n </div>\n } @else {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <mt-icon icon=\"general.upload-01\" />\n <p class=\"text-lg text-gray-500\">Click or drop a file to upload</p>\n </div>\n }\n }\n </div>\n </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n" }]
323
354
  }], ctorParameters: () => [] });
324
355
 
325
356
  /**