mn-angular-lib 1.0.90 → 1.0.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mn-angular-lib.mjs +193 -137
- package/fesm2022/mn-angular-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/mn-angular-lib.d.ts +44 -2
|
@@ -9,8 +9,8 @@ import * as i2 from '@angular/forms';
|
|
|
9
9
|
import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
|
10
10
|
import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
|
|
11
11
|
import JSON5 from 'json5';
|
|
12
|
+
import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideFilter, LucideFunnel } from '@lucide/angular';
|
|
12
13
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
13
|
-
import { LucideX } from '@lucide/angular';
|
|
14
14
|
|
|
15
15
|
// projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.tokens.ts
|
|
16
16
|
const MN_ALERT_CONFIG = new InjectionToken('MN_ALERT_CONFIG');
|
|
@@ -2061,137 +2061,6 @@ const mnFileInputVariants = tv({
|
|
|
2061
2061
|
},
|
|
2062
2062
|
});
|
|
2063
2063
|
|
|
2064
|
-
const mnIconVariants = tv({
|
|
2065
|
-
base: 'inline-flex shrink-0',
|
|
2066
|
-
variants: {
|
|
2067
|
-
color: {
|
|
2068
|
-
current: 'text-current',
|
|
2069
|
-
primary: 'text-primary',
|
|
2070
|
-
secondary: 'text-neutral',
|
|
2071
|
-
danger: 'text-error',
|
|
2072
|
-
warning: 'text-warning',
|
|
2073
|
-
success: 'text-success',
|
|
2074
|
-
accent: 'text-accent',
|
|
2075
|
-
},
|
|
2076
|
-
},
|
|
2077
|
-
defaultVariants: {
|
|
2078
|
-
color: 'current',
|
|
2079
|
-
},
|
|
2080
|
-
});
|
|
2081
|
-
|
|
2082
|
-
// Inline SVGs sourced from the .svg files in the ./icons/ directory
|
|
2083
|
-
const pistolSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.72 14.56 9 10h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v4c2.5 0 1 4 1 4-4 6-1 6-1 6h3.38a1 1 0 0 0 .89-.55za1 1 0 0 1 .9-.56H13a2 2 0 0 0 2-2v-1a1 1 0 0 1 1-1" /></svg>`;
|
|
2084
|
-
const pendingSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v5l4 2" /><path d="M14 20.775A9 9 0 0112 21" /><path d="M19 17.656a9 9 0 01-1.5 1.456" /><path d="M21 12a9 9 0 01-.228 2" /><path d="M21 8h-5" /><path d="M7.5 19.794c-6-3.464-6-12.124 0-15.588A9 9 0 0112 3a9.75 9.75 0 016.74 2.74L21 8V3" /></svg>`;
|
|
2085
|
-
// Lucide icons (https://lucide.dev) — inner paths; mn-icon wraps them in a sized svg.
|
|
2086
|
-
const imagePlusSvg = `<path d="M16 5h6" /><path d="M19 2v6" /><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /><circle cx="9" cy="9" r="2" />`;
|
|
2087
|
-
const uploadSvg = `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" x2="12" y1="3" y2="15" />`;
|
|
2088
|
-
const fileSvg = `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" />`;
|
|
2089
|
-
const trash2Svg = `<path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" />`;
|
|
2090
|
-
const xSvg = `<path d="M18 6 6 18" /><path d="m6 6 12 12" />`;
|
|
2091
|
-
const MN_ICON_MAP = {
|
|
2092
|
-
pistol: pistolSvg,
|
|
2093
|
-
pending: pendingSvg,
|
|
2094
|
-
imagePlus: imagePlusSvg,
|
|
2095
|
-
upload: uploadSvg,
|
|
2096
|
-
file: fileSvg,
|
|
2097
|
-
trash2: trash2Svg,
|
|
2098
|
-
x: xSvg,
|
|
2099
|
-
};
|
|
2100
|
-
|
|
2101
|
-
class MnIcon {
|
|
2102
|
-
data = {};
|
|
2103
|
-
sanitizer = inject(DomSanitizer);
|
|
2104
|
-
el = inject(ElementRef);
|
|
2105
|
-
svgContent = '';
|
|
2106
|
-
get iconSize() {
|
|
2107
|
-
return this.data.size ?? 24;
|
|
2108
|
-
}
|
|
2109
|
-
get hostClasses() {
|
|
2110
|
-
return mnIconVariants({
|
|
2111
|
-
color: this.data.color,
|
|
2112
|
-
});
|
|
2113
|
-
}
|
|
2114
|
-
resolvedName = null;
|
|
2115
|
-
ngOnInit() {
|
|
2116
|
-
const attrs = this.el.nativeElement.attributes;
|
|
2117
|
-
for (const item of Array.from(attrs)) {
|
|
2118
|
-
const attr = item.name.toLowerCase();
|
|
2119
|
-
if (attr.startsWith('mnicon')) {
|
|
2120
|
-
const iconKey = attr.slice('mnicon'.length);
|
|
2121
|
-
for (const key of Object.keys(MN_ICON_MAP)) {
|
|
2122
|
-
if (key.toLowerCase() === iconKey) {
|
|
2123
|
-
this.resolvedName = key;
|
|
2124
|
-
break;
|
|
2125
|
-
}
|
|
2126
|
-
}
|
|
2127
|
-
if (this.resolvedName)
|
|
2128
|
-
break;
|
|
2129
|
-
}
|
|
2130
|
-
}
|
|
2131
|
-
this.updateContent();
|
|
2132
|
-
}
|
|
2133
|
-
ngOnChanges() {
|
|
2134
|
-
this.updateContent();
|
|
2135
|
-
}
|
|
2136
|
-
updateContent() {
|
|
2137
|
-
const name = this.data.name ?? this.resolvedName;
|
|
2138
|
-
if (name) {
|
|
2139
|
-
const raw = MN_ICON_MAP[name];
|
|
2140
|
-
if (raw) {
|
|
2141
|
-
const size = this.iconSize;
|
|
2142
|
-
const isFullSvg = raw.trim().startsWith('<svg');
|
|
2143
|
-
if (isFullSvg) {
|
|
2144
|
-
const sized = raw.replace(/<svg([^>]*)>/, (_match, attrs) => {
|
|
2145
|
-
let updated = attrs.replace(/width="[^"]*"/, `width="${size}"`);
|
|
2146
|
-
updated = updated.replace(/height="[^"]*"/, `height="${size}"`);
|
|
2147
|
-
if (!attrs.includes('width='))
|
|
2148
|
-
updated += ` width="${size}"`;
|
|
2149
|
-
if (!attrs.includes('height='))
|
|
2150
|
-
updated += ` height="${size}"`;
|
|
2151
|
-
return `<svg${updated}>`;
|
|
2152
|
-
});
|
|
2153
|
-
this.svgContent = this.sanitizer.bypassSecurityTrustHtml(sized);
|
|
2154
|
-
}
|
|
2155
|
-
else {
|
|
2156
|
-
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${raw}</svg>`;
|
|
2157
|
-
this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
2158
|
-
}
|
|
2159
|
-
}
|
|
2160
|
-
else {
|
|
2161
|
-
this.svgContent = '';
|
|
2162
|
-
}
|
|
2163
|
-
}
|
|
2164
|
-
else {
|
|
2165
|
-
this.svgContent = '';
|
|
2166
|
-
}
|
|
2167
|
-
}
|
|
2168
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2169
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnIcon, isStandalone: true, selector: "mn-icon", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: "<span\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\"\n style=\"display: inline-flex; align-items: center; justify-content: center;\"\n [innerHTML]=\"svgContent\"\n></span>\n" });
|
|
2170
|
-
}
|
|
2171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, decorators: [{
|
|
2172
|
-
type: Component,
|
|
2173
|
-
args: [{ selector: 'mn-icon', standalone: true, template: "<span\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\"\n style=\"display: inline-flex; align-items: center; justify-content: center;\"\n [innerHTML]=\"svgContent\"\n></span>\n" }]
|
|
2174
|
-
}], propDecorators: { data: [{
|
|
2175
|
-
type: Input
|
|
2176
|
-
}], hostClasses: [{
|
|
2177
|
-
type: HostBinding,
|
|
2178
|
-
args: ['class']
|
|
2179
|
-
}] } });
|
|
2180
|
-
|
|
2181
|
-
// AUTO-GENERATED — do not edit manually.
|
|
2182
|
-
// Run `npm run generate:icons` to regenerate after modifying MN_ICON_MAP.
|
|
2183
|
-
class MnIconAttributes {
|
|
2184
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2185
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnIconAttributes, isStandalone: true, selector: "mn-icon[mnIconPistol], mn-icon[mnIconPending], mn-icon[mnIconImagePlus], mn-icon[mnIconUpload], mn-icon[mnIconFile], mn-icon[mnIconTrash2], mn-icon[mnIconX]", ngImport: i0 });
|
|
2186
|
-
}
|
|
2187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, decorators: [{
|
|
2188
|
-
type: Directive,
|
|
2189
|
-
args: [{
|
|
2190
|
-
selector: 'mn-icon[mnIconPistol], mn-icon[mnIconPending], mn-icon[mnIconImagePlus], mn-icon[mnIconUpload], mn-icon[mnIconFile], mn-icon[mnIconTrash2], mn-icon[mnIconX]',
|
|
2191
|
-
standalone: true,
|
|
2192
|
-
}]
|
|
2193
|
-
}] });
|
|
2194
|
-
|
|
2195
2064
|
/**
|
|
2196
2065
|
* MnFileInput Component
|
|
2197
2066
|
*
|
|
@@ -2585,11 +2454,11 @@ class MnFileInput {
|
|
|
2585
2454
|
return segment || 'image';
|
|
2586
2455
|
}
|
|
2587
2456
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2588
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFileInput, isStandalone: true, selector: "mn-lib-file-input", inputs: { props: "props" }, outputs: { filesChange: "filesChange", cleared: "cleared" }, ngImport: i0, template: "<div [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\" class=\"flex flex-col\">\n <!-- Label -->\n @if (uiConfig.label) {\n <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n <p>{{ uiConfig.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <!-- Hidden native file input shared by every trigger -->\n <input\n #fileInput\n (change)=\"onFileSelected($event)\"\n [accept]=\"acceptAttr\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n [attr.multiple]=\"props.multiple || null\"\n [attr.name]=\"resolvedName\"\n [disabled]=\"isDisabled\"\n [id]=\"resolvedId\"\n class=\"hidden\"\n type=\"file\"\n />\n\n @switch (displayMode) {\n <!-- Compact: inline button + filename chips -->\n @case ('compact') {\n <div class=\"flex flex-wrap items-center gap-2\">\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n type=\"button\">\n <
|
|
2457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFileInput, isStandalone: true, selector: "mn-lib-file-input", inputs: { props: "props" }, outputs: { filesChange: "filesChange", cleared: "cleared" }, ngImport: i0, template: "<div [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\" class=\"flex flex-col\">\n <!-- Label -->\n @if (uiConfig.label) {\n <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n <p>{{ uiConfig.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <!-- Hidden native file input shared by every trigger -->\n <input\n #fileInput\n (change)=\"onFileSelected($event)\"\n [accept]=\"acceptAttr\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n [attr.multiple]=\"props.multiple || null\"\n [attr.name]=\"resolvedName\"\n [disabled]=\"isDisabled\"\n [id]=\"resolvedId\"\n class=\"hidden\"\n type=\"file\"\n />\n\n @switch (displayMode) {\n <!-- Compact: inline button + filename chips -->\n @case ('compact') {\n <div class=\"flex flex-wrap items-center gap-2\">\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n type=\"button\">\n <svg lucideUpload [size]=\"18\"></svg>\n <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n </button>\n @for (item of displayItems(); track itemKey(item)) {\n <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n @if (item.isImage && item.previewUrl) {\n <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n } @else {\n <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n }\n <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"text-base-content/50 hover:text-error cursor-pointer\"\n type=\"button\">\n <svg lucideX [size]=\"14\"></svg>\n </button>\n </span>\n }\n </div>\n }\n\n <!-- List: compact rows of file icon + name + size -->\n @case ('list') {\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n type=\"button\">\n <svg lucideUpload [size]=\"18\"></svg>\n <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n </button>\n @if (displayItems().length > 0) {\n <div class=\"mt-2 flex flex-col gap-1\">\n @for (item of displayItems(); track itemKey(item)) {\n <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n @if (item.sizeLabel) {\n <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n }\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"text-base-content/50 hover:text-error cursor-pointer\"\n type=\"button\">\n <svg lucideX [size]=\"16\"></svg>\n </button>\n </div>\n }\n </div>\n }\n }\n\n <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n @case ('thumbnail') {\n <div class=\"flex flex-wrap gap-3\">\n @for (item of displayItems(); track itemKey(item)) {\n <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n @if (item.isImage && item.previewUrl) {\n <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n } @else {\n <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\n <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n </div>\n }\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"btn btn-circle btn-xs absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n type=\"button\">\n <svg lucideX [size]=\"14\"></svg>\n </button>\n </div>\n }\n @if (props.multiple || displayItems().length === 0) {\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n type=\"button\">\n <svg lucideImagePlus [size]=\"22\"></svg>\n </button>\n }\n </div>\n }\n\n <!-- Dropzone (default): large dashed area + preview rows -->\n @default {\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n type=\"button\">\n <svg lucideImagePlus [size]=\"28\" class=\"text-base-content/40\"></svg>\n <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n </button>\n @if (displayItems().length > 0) {\n <div class=\"mt-2 flex flex-col gap-2\">\n @for (item of displayItems(); track itemKey(item)) {\n <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n @if (item.isImage && item.previewUrl) {\n <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n } @else {\n <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\n }\n <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n @if (item.sizeLabel) {\n <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n }\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"btn btn-circle btn-sm btn-ghost text-base-content/60 hover:text-error\"\n type=\"button\">\n <svg lucideTrash2 [size]=\"16\"></svg>\n </button>\n </div>\n }\n </div>\n }\n }\n }\n\n <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n @if (internalError(); as msg) {\n <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n }\n\n <!-- Control validation errors -->\n @if (showError) {\n @if (props.showAllErrors) {\n <div class=\"flex flex-col gap-y-1\">\n @for (error of errorMessages; track $index) {\n <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n }\n </div>\n } @else if (errorMessage !== null) {\n <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideFile, selector: "svg[lucideFile]" }, { kind: "component", type: LucideImagePlus, selector: "svg[lucideImagePlus]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
|
|
2589
2458
|
}
|
|
2590
2459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFileInput, decorators: [{
|
|
2591
2460
|
type: Component,
|
|
2592
|
-
args: [{ selector: 'mn-lib-file-input', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage,
|
|
2461
|
+
args: [{ selector: 'mn-lib-file-input', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX], template: "<div [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\" class=\"flex flex-col\">\n <!-- Label -->\n @if (uiConfig.label) {\n <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n <p>{{ uiConfig.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <!-- Hidden native file input shared by every trigger -->\n <input\n #fileInput\n (change)=\"onFileSelected($event)\"\n [accept]=\"acceptAttr\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n [attr.multiple]=\"props.multiple || null\"\n [attr.name]=\"resolvedName\"\n [disabled]=\"isDisabled\"\n [id]=\"resolvedId\"\n class=\"hidden\"\n type=\"file\"\n />\n\n @switch (displayMode) {\n <!-- Compact: inline button + filename chips -->\n @case ('compact') {\n <div class=\"flex flex-wrap items-center gap-2\">\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n type=\"button\">\n <svg lucideUpload [size]=\"18\"></svg>\n <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n </button>\n @for (item of displayItems(); track itemKey(item)) {\n <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n @if (item.isImage && item.previewUrl) {\n <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n } @else {\n <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n }\n <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"text-base-content/50 hover:text-error cursor-pointer\"\n type=\"button\">\n <svg lucideX [size]=\"14\"></svg>\n </button>\n </span>\n }\n </div>\n }\n\n <!-- List: compact rows of file icon + name + size -->\n @case ('list') {\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n type=\"button\">\n <svg lucideUpload [size]=\"18\"></svg>\n <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n </button>\n @if (displayItems().length > 0) {\n <div class=\"mt-2 flex flex-col gap-1\">\n @for (item of displayItems(); track itemKey(item)) {\n <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n @if (item.sizeLabel) {\n <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n }\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"text-base-content/50 hover:text-error cursor-pointer\"\n type=\"button\">\n <svg lucideX [size]=\"16\"></svg>\n </button>\n </div>\n }\n </div>\n }\n }\n\n <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n @case ('thumbnail') {\n <div class=\"flex flex-wrap gap-3\">\n @for (item of displayItems(); track itemKey(item)) {\n <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n @if (item.isImage && item.previewUrl) {\n <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n } @else {\n <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\n <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n </div>\n }\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"btn btn-circle btn-xs absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n type=\"button\">\n <svg lucideX [size]=\"14\"></svg>\n </button>\n </div>\n }\n @if (props.multiple || displayItems().length === 0) {\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n type=\"button\">\n <svg lucideImagePlus [size]=\"22\"></svg>\n </button>\n }\n </div>\n }\n\n <!-- Dropzone (default): large dashed area + preview rows -->\n @default {\n <button\n (click)=\"fileInput.click()\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"controlClasses\"\n type=\"button\">\n <svg lucideImagePlus [size]=\"28\" class=\"text-base-content/40\"></svg>\n <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n </button>\n @if (displayItems().length > 0) {\n <div class=\"mt-2 flex flex-col gap-2\">\n @for (item of displayItems(); track itemKey(item)) {\n <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n @if (item.isImage && item.previewUrl) {\n <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n } @else {\n <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\n }\n <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n @if (item.sizeLabel) {\n <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n }\n <button\n (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n [attr.aria-label]=\"uiConfig.removeLabel\"\n class=\"btn btn-circle btn-sm btn-ghost text-base-content/60 hover:text-error\"\n type=\"button\">\n <svg lucideTrash2 [size]=\"16\"></svg>\n </button>\n </div>\n }\n </div>\n }\n }\n }\n\n <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n @if (internalError(); as msg) {\n <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n }\n\n <!-- Control validation errors -->\n @if (showError) {\n @if (props.showAllErrors) {\n <div class=\"flex flex-col gap-y-1\">\n @for (error of errorMessages; track $index) {\n <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n }\n </div>\n } @else if (errorMessage !== null) {\n <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n }\n }\n</div>\n" }]
|
|
2593
2462
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
2594
2463
|
type: Input,
|
|
2595
2464
|
args: [{ required: true }]
|
|
@@ -5085,6 +4954,16 @@ class MnTable extends MnSelectableCollectionBase {
|
|
|
5085
4954
|
currentSort = null;
|
|
5086
4955
|
/** Per-column filter values keyed by column key. */
|
|
5087
4956
|
columnFilters = {};
|
|
4957
|
+
/** Viewport width (px) below which the inline filter row collapses into a panel. */
|
|
4958
|
+
static FILTER_COLLAPSE_WIDTH = 640;
|
|
4959
|
+
/**
|
|
4960
|
+
* True when the viewport is narrow enough that the per-column filter inputs no
|
|
4961
|
+
* longer fit under their headers; the inline row is then replaced by a toggle
|
|
4962
|
+
* button and a stacked filter panel.
|
|
4963
|
+
*/
|
|
4964
|
+
filtersCollapsed = false;
|
|
4965
|
+
/** Whether the small-screen filter panel is currently expanded. */
|
|
4966
|
+
filtersPanelOpen = false;
|
|
5088
4967
|
componentName = 'MnTable';
|
|
5089
4968
|
get trackedToolbarTemplate() {
|
|
5090
4969
|
return this.dataSource?.toolbarLeftTemplate;
|
|
@@ -5110,6 +4989,51 @@ class MnTable extends MnSelectableCollectionBase {
|
|
|
5110
4989
|
get hasColumnFilters() {
|
|
5111
4990
|
return this.dataSource.columns.some(c => c.filterable);
|
|
5112
4991
|
}
|
|
4992
|
+
/** Whether at least one column filter is active. */
|
|
4993
|
+
get hasActiveFilters() {
|
|
4994
|
+
return this.dataSource.columns.some(col => col.filterable && !!this.columnFilters[col.key]);
|
|
4995
|
+
}
|
|
4996
|
+
/** Label for the small-screen filters toggle button. */
|
|
4997
|
+
get filtersButtonLabel() {
|
|
4998
|
+
return this.dataSource.filtersLabel ?? 'Filters';
|
|
4999
|
+
}
|
|
5000
|
+
/** Label for the "clear all filters" action in the small-screen panel. */
|
|
5001
|
+
get clearFiltersButtonLabel() {
|
|
5002
|
+
return this.dataSource.clearFiltersLabel ?? 'Clear all';
|
|
5003
|
+
}
|
|
5004
|
+
/** Opens/closes the stacked filter panel shown on small screens. */
|
|
5005
|
+
toggleFiltersPanel() {
|
|
5006
|
+
this.filtersPanelOpen = !this.filtersPanelOpen;
|
|
5007
|
+
}
|
|
5008
|
+
/** Resets every column filter and re-applies filtering. */
|
|
5009
|
+
clearAllFilters() {
|
|
5010
|
+
for (const col of this.dataSource.columns) {
|
|
5011
|
+
if (col.filterable)
|
|
5012
|
+
this.columnFilters[col.key] = '';
|
|
5013
|
+
}
|
|
5014
|
+
this.currentPage = 1;
|
|
5015
|
+
this.applyFilter(false);
|
|
5016
|
+
this.cdr.markForCheck();
|
|
5017
|
+
}
|
|
5018
|
+
/** True when the viewport is below the filter-collapse breakpoint. */
|
|
5019
|
+
isFilterViewport() {
|
|
5020
|
+
return typeof window !== 'undefined' && window.innerWidth < MnTable.FILTER_COLLAPSE_WIDTH;
|
|
5021
|
+
}
|
|
5022
|
+
/**
|
|
5023
|
+
* Recomputes whether the inline filter row should collapse into the panel.
|
|
5024
|
+
* Closes the panel when returning to the wide layout so reopened state never
|
|
5025
|
+
* leaks across the breakpoint. Marks for check only when the layout flips.
|
|
5026
|
+
*/
|
|
5027
|
+
updateFilterLayout(reflow) {
|
|
5028
|
+
const collapsed = this.isFilterViewport();
|
|
5029
|
+
if (collapsed === this.filtersCollapsed)
|
|
5030
|
+
return;
|
|
5031
|
+
this.filtersCollapsed = collapsed;
|
|
5032
|
+
if (!collapsed)
|
|
5033
|
+
this.filtersPanelOpen = false;
|
|
5034
|
+
if (reflow)
|
|
5035
|
+
this.cdr.markForCheck();
|
|
5036
|
+
}
|
|
5113
5037
|
sort(column) {
|
|
5114
5038
|
if (!column.sortType || column.sortType === ColumnSortType.NONE)
|
|
5115
5039
|
return;
|
|
@@ -5182,9 +5106,10 @@ class MnTable extends MnSelectableCollectionBase {
|
|
|
5182
5106
|
if (reflow)
|
|
5183
5107
|
this.cdr.markForCheck();
|
|
5184
5108
|
}
|
|
5185
|
-
/** Re-evaluate
|
|
5109
|
+
/** Re-evaluate responsive page size and filter layout when the viewport changes. */
|
|
5186
5110
|
onWindowResize() {
|
|
5187
5111
|
this.applyResponsivePageSize(true);
|
|
5112
|
+
this.updateFilterLayout(true);
|
|
5188
5113
|
}
|
|
5189
5114
|
/** Tracks the desktop page size when the user picks one (selector only shows at >= md). */
|
|
5190
5115
|
onPageSizeChange(newSize) {
|
|
@@ -5197,6 +5122,8 @@ class MnTable extends MnSelectableCollectionBase {
|
|
|
5197
5122
|
// Force the mobile row count below `md`; use the consumer's pageSize (or 10) above it.
|
|
5198
5123
|
this.desktopPageSize = this.dataSource.pageSize ?? 10;
|
|
5199
5124
|
this.applyResponsivePageSize(false);
|
|
5125
|
+
// Seed the filter layout for the initial viewport (no markForCheck pre-render).
|
|
5126
|
+
this.updateFilterLayout(false);
|
|
5200
5127
|
this.currentSort = this.dataSource.defaultSort ?? null;
|
|
5201
5128
|
for (const col of this.dataSource.columns) {
|
|
5202
5129
|
if (col.filterable) {
|
|
@@ -5242,6 +5169,12 @@ class MnTable extends MnSelectableCollectionBase {
|
|
|
5242
5169
|
col.filterPlaceholder = this.lang.t(col.filterPlaceholderKey);
|
|
5243
5170
|
}
|
|
5244
5171
|
}
|
|
5172
|
+
if (this.dataSource.filtersLabelKey) {
|
|
5173
|
+
this.dataSource.filtersLabel = this.lang.t(this.dataSource.filtersLabelKey);
|
|
5174
|
+
}
|
|
5175
|
+
if (this.dataSource.clearFiltersLabelKey) {
|
|
5176
|
+
this.dataSource.clearFiltersLabel = this.lang.t(this.dataSource.clearFiltersLabelKey);
|
|
5177
|
+
}
|
|
5245
5178
|
}
|
|
5246
5179
|
// ── Filtering & sorting ──
|
|
5247
5180
|
applyFilter(searchForItems) {
|
|
@@ -5303,11 +5236,11 @@ class MnTable extends MnSelectableCollectionBase {
|
|
|
5303
5236
|
});
|
|
5304
5237
|
}
|
|
5305
5238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n @if (dataSource.toolbarLeftTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n </div>\n }\n </div>\n <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n @if (dataSource.canSearch) {\n <mn-lib-input-field\n class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n [props]=\"{\n id: 'mn-table-search',\n type: 'search',\n label: '',\n placeholder: dataSource.searchPlaceholder ?? 'Search...',\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true\n }\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearch($event)\"\n ></mn-lib-input-field>\n }\n @if (dataSource.toolbarRightTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\" class=\"overflow-x-auto\"\n role=\"region\">\n <table [class]=\"tableClasses\">\n <thead>\n <tr class=\"bg-base-100\">\n <!-- Selection checkbox column header -->\n @if (hasSelection) {\n <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n @if (isMultiSelect) {\n <mn-lib-checkbox\n (checkedChange)=\"toggleAll()\"\n [checked]=\"allSelected\"\n [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n ></mn-lib-checkbox>\n }\n </th>\n }\n\n <!-- Data columns -->\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n [class.cursor-pointer]=\"isSortable(column)\"\n [class.select-none]=\"isSortable(column)\"\n [class.hover:bg-base-200]=\"isSortable(column)\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n (click)=\"sort(column)\"\n >\n <span class=\"inline-flex items-center gap-1\">\n @if (isTemplateRef(column.header)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n } @else {\n <span>{{ column.header }}</span>\n }\n @if (isSortable(column)) {\n <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n }\n </span>\n </th>\n }\n\n </tr>\n\n <!-- Per-column filter row -->\n @if (hasColumnFilters) {\n <tr class=\"bg-base-100 border-b border-base-300\">\n @if (hasSelection) {\n <th class=\"px-2 py-1 \"></th>\n }\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"px-4 py-2\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n >\n @if (column.filterable) {\n @if ((column.filterType ?? 'text') === 'text') {\n <mn-lib-input-field\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n type: 'text',\n label: '',\n placeholder: column.filterPlaceholder ?? '',\n autocomplete: column.filterAutocomplete ?? undefined,\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true,\n hover: true\n }\"\n [ngModel]=\"columnFilters[column.key]\"\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n ></mn-lib-input-field>\n } @else if (column.filterType === 'select') {\n <mn-lib-select\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n [ngModel]=\"columnFilters[column.key] ?? ''\"\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n options: getFilterSelectOptions(column),\n size: 'sm',\n fullWidth: true\n }\"\n (click)=\"$event.stopPropagation()\"\n ></mn-lib-select>\n }\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n <!-- Loading state -->\n @if (dataSource.isDataLoading) {\n @for (_ of skeletonRows; track $index) {\n <tr>\n @if (hasSelection) {\n <td class=\"px-2 py-3\">\n <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n </td>\n }\n @for (column of dataSource.columns; track column.key) {\n <td class=\"px-4 py-3\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (isTemplateRef(column.skeleton)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n } @else {\n <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n }\n </td>\n }\n </tr>\n }\n } @else {\n <!-- Empty state -->\n @if (filteredItems.length === 0) {\n <tr class=\"bg-base-100\">\n <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n @if (dataSource.emptyTemplate) {\n <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n } @else {\n <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n </div>\n }\n </td>\n </tr>\n }\n\n <!-- Data rows -->\n @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n <tr\n class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n [class.border-b]=\"!last\"\n [class.border-base-300]=\"!last\"\n [class.border-b-1]=\"last\"\n [class.border-black]=\"last\"\n [class.shadow-3xl]=\"last\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection checkbox -->\n @if (hasSelection) {\n <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n <mn-lib-checkbox\n (checkedChange)=\"toggle(row)\"\n [checked]=\"isSelected(row)\"\n [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n ></mn-lib-checkbox>\n </td>\n }\n\n <!-- Data cells -->\n @for (column of dataSource.columns; track column.key) {\n <td\n class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (column.cellSm) {\n <!-- Default cell: hidden below the cellSm breakpoint -->\n <span [mnShowAbove]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n </span>\n <!-- Small cell: shown only below the cellSm breakpoint -->\n <span [mnShowBelow]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cellSm.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n } @else {\n {{ getCellSmValue(column, row) }}\n }\n </span>\n } @else {\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n }\n </td>\n }\n\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n (loadMore)=\"loadMoreRows()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n [currentPage]=\"currentPage\"\n [isPaginated]=\"isPaginated\"\n [isServerPaginated]=\"isServerPaginated\"\n [labels]=\"dataSource.labels\"\n [loadingMoreRows]=\"loadingMoreRows\"\n [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n [pageSize]=\"pageSize\"\n [showLoadMore]=\"showLoadMore\"\n [totalItemCount]=\"totalItemCount\"\n [totalPages]=\"totalPages\"\n [visiblePages]=\"visiblePages\"\n idPrefix=\"mn-table\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5239
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n @if (dataSource.toolbarLeftTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n </div>\n }\n </div>\n <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n @if (dataSource.canSearch) {\n <mn-lib-input-field\n class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n [props]=\"{\n id: 'mn-table-search',\n type: 'search',\n label: '',\n placeholder: dataSource.searchPlaceholder ?? 'Search...',\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true\n }\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearch($event)\"\n ></mn-lib-input-field>\n }\n @if (dataSource.toolbarRightTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n </div>\n }\n <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n @if (hasColumnFilters && filtersCollapsed) {\n <button\n type=\"button\"\n mnButton\n [data]=\"{ variant: 'outline', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n class=\"w-full min-[375px]:w-auto gap-1.5\"\n [class.border-primary]=\"hasActiveFilters\"\n [class.text-primary]=\"hasActiveFilters\"\n [attr.aria-expanded]=\"filtersPanelOpen\"\n aria-controls=\"mn-table-filters-panel\"\n (click)=\"toggleFiltersPanel()\"\n >\n <svg lucideFunnel [size]=\"15\"></svg>\n <span>{{ filtersButtonLabel }}</span>\n </button>\n }\n </div>\n</div>\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n <div\n id=\"mn-table-filters-panel\"\n class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n >\n <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n @for (column of dataSource.columns; track column.key) {\n @if (column.filterable) {\n <div class=\"flex flex-col gap-1\">\n <label\n class=\"text-xs font-medium text-base-content/70\"\n [attr.for]=\"'mn-table-filter-' + column.key\"\n >\n @if (isTemplateRef(column.header)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n } @else {\n {{ column.header }}\n }\n </label>\n @if ((column.filterType ?? 'text') === 'text') {\n <mn-lib-input-field\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n type: 'text',\n label: '',\n placeholder: column.filterPlaceholder ?? '',\n autocomplete: column.filterAutocomplete ?? undefined,\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true,\n hover: true\n }\"\n [ngModel]=\"columnFilters[column.key]\"\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n ></mn-lib-input-field>\n } @else if (column.filterType === 'select') {\n <mn-lib-select\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n [ngModel]=\"columnFilters[column.key] ?? ''\"\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n options: getFilterSelectOptions(column),\n size: 'sm',\n fullWidth: true\n }\"\n ></mn-lib-select>\n }\n </div>\n }\n }\n @if (hasActiveFilters) {\n <button\n type=\"button\"\n mnButton\n [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n class=\"self-start gap-1\"\n (click)=\"clearAllFilters()\"\n >\n <svg lucideX [size]=\"14\"></svg>\n <span>{{ clearFiltersButtonLabel }}</span>\n </button>\n }\n </div>\n </div>\n </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\" class=\"overflow-x-auto\"\n role=\"region\">\n <table [class]=\"tableClasses\">\n <thead>\n <tr class=\"bg-base-100\">\n <!-- Selection checkbox column header -->\n @if (hasSelection) {\n <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n @if (isMultiSelect) {\n <mn-lib-checkbox\n (checkedChange)=\"toggleAll()\"\n [checked]=\"allSelected\"\n [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n ></mn-lib-checkbox>\n }\n </th>\n }\n\n <!-- Data columns -->\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n [class.cursor-pointer]=\"isSortable(column)\"\n [class.select-none]=\"isSortable(column)\"\n [class.hover:bg-base-200]=\"isSortable(column)\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n (click)=\"sort(column)\"\n >\n <span class=\"inline-flex items-center gap-1\">\n @if (isTemplateRef(column.header)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n } @else {\n <span>{{ column.header }}</span>\n }\n @if (isSortable(column)) {\n <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n }\n </span>\n </th>\n }\n\n </tr>\n\n <!-- Per-column filter row (wide screens only; collapses into a panel below 640px) -->\n @if (hasColumnFilters && !filtersCollapsed) {\n <tr class=\"bg-base-100 border-b border-base-300\">\n @if (hasSelection) {\n <th class=\"px-2 py-1 \"></th>\n }\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"px-4 py-2\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n >\n @if (column.filterable) {\n @if ((column.filterType ?? 'text') === 'text') {\n <mn-lib-input-field\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n type: 'text',\n label: '',\n placeholder: column.filterPlaceholder ?? '',\n autocomplete: column.filterAutocomplete ?? undefined,\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true,\n hover: true\n }\"\n [ngModel]=\"columnFilters[column.key]\"\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n ></mn-lib-input-field>\n } @else if (column.filterType === 'select') {\n <mn-lib-select\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n [ngModel]=\"columnFilters[column.key] ?? ''\"\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n options: getFilterSelectOptions(column),\n size: 'sm',\n fullWidth: true\n }\"\n (click)=\"$event.stopPropagation()\"\n ></mn-lib-select>\n }\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n <!-- Loading state -->\n @if (dataSource.isDataLoading) {\n @for (_ of skeletonRows; track $index) {\n <tr>\n @if (hasSelection) {\n <td class=\"px-2 py-3\">\n <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n </td>\n }\n @for (column of dataSource.columns; track column.key) {\n <td class=\"px-4 py-3\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (isTemplateRef(column.skeleton)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n } @else {\n <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n }\n </td>\n }\n </tr>\n }\n } @else {\n <!-- Empty state -->\n @if (filteredItems.length === 0) {\n <tr class=\"bg-base-100\">\n <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n @if (dataSource.emptyTemplate) {\n <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n } @else {\n <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n </div>\n }\n </td>\n </tr>\n }\n\n <!-- Data rows -->\n @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n <tr\n class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n [class.border-b]=\"!last\"\n [class.border-base-300]=\"!last\"\n [class.border-b-1]=\"last\"\n [class.border-black]=\"last\"\n [class.shadow-3xl]=\"last\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection checkbox -->\n @if (hasSelection) {\n <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n <mn-lib-checkbox\n (checkedChange)=\"toggle(row)\"\n [checked]=\"isSelected(row)\"\n [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n ></mn-lib-checkbox>\n </td>\n }\n\n <!-- Data cells -->\n @for (column of dataSource.columns; track column.key) {\n <td\n class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (column.cellSm) {\n <!-- Default cell: hidden below the cellSm breakpoint -->\n <span [mnShowAbove]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n </span>\n <!-- Small cell: shown only below the cellSm breakpoint -->\n <span [mnShowBelow]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cellSm.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n } @else {\n {{ getCellSmValue(column, row) }}\n }\n </span>\n } @else {\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n }\n </td>\n }\n\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n (loadMore)=\"loadMoreRows()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n [currentPage]=\"currentPage\"\n [isPaginated]=\"isPaginated\"\n [isServerPaginated]=\"isServerPaginated\"\n [labels]=\"dataSource.labels\"\n [loadingMoreRows]=\"loadingMoreRows\"\n [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n [pageSize]=\"pageSize\"\n [showLoadMore]=\"showLoadMore\"\n [totalItemCount]=\"totalItemCount\"\n [totalPages]=\"totalPages\"\n [visiblePages]=\"visiblePages\"\n idPrefix=\"mn-table\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5307
5240
|
}
|
|
5308
5241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
|
|
5309
5242
|
type: Component,
|
|
5310
|
-
args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnSkeleton, FormsModule, MnCollectionPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n @if (dataSource.toolbarLeftTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n </div>\n }\n </div>\n <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n @if (dataSource.canSearch) {\n <mn-lib-input-field\n class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n [props]=\"{\n id: 'mn-table-search',\n type: 'search',\n label: '',\n placeholder: dataSource.searchPlaceholder ?? 'Search...',\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true\n }\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearch($event)\"\n ></mn-lib-input-field>\n }\n @if (dataSource.toolbarRightTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\" class=\"overflow-x-auto\"\n role=\"region\">\n <table [class]=\"tableClasses\">\n <thead>\n <tr class=\"bg-base-100\">\n <!-- Selection checkbox column header -->\n @if (hasSelection) {\n <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n @if (isMultiSelect) {\n <mn-lib-checkbox\n (checkedChange)=\"toggleAll()\"\n [checked]=\"allSelected\"\n [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n ></mn-lib-checkbox>\n }\n </th>\n }\n\n <!-- Data columns -->\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n [class.cursor-pointer]=\"isSortable(column)\"\n [class.select-none]=\"isSortable(column)\"\n [class.hover:bg-base-200]=\"isSortable(column)\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n (click)=\"sort(column)\"\n >\n <span class=\"inline-flex items-center gap-1\">\n @if (isTemplateRef(column.header)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n } @else {\n <span>{{ column.header }}</span>\n }\n @if (isSortable(column)) {\n <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n }\n </span>\n </th>\n }\n\n </tr>\n\n <!-- Per-column filter row -->\n @if (hasColumnFilters) {\n <tr class=\"bg-base-100 border-b border-base-300\">\n @if (hasSelection) {\n <th class=\"px-2 py-1 \"></th>\n }\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"px-4 py-2\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n >\n @if (column.filterable) {\n @if ((column.filterType ?? 'text') === 'text') {\n <mn-lib-input-field\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n type: 'text',\n label: '',\n placeholder: column.filterPlaceholder ?? '',\n autocomplete: column.filterAutocomplete ?? undefined,\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true,\n hover: true\n }\"\n [ngModel]=\"columnFilters[column.key]\"\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n ></mn-lib-input-field>\n } @else if (column.filterType === 'select') {\n <mn-lib-select\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n [ngModel]=\"columnFilters[column.key] ?? ''\"\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n options: getFilterSelectOptions(column),\n size: 'sm',\n fullWidth: true\n }\"\n (click)=\"$event.stopPropagation()\"\n ></mn-lib-select>\n }\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n <!-- Loading state -->\n @if (dataSource.isDataLoading) {\n @for (_ of skeletonRows; track $index) {\n <tr>\n @if (hasSelection) {\n <td class=\"px-2 py-3\">\n <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n </td>\n }\n @for (column of dataSource.columns; track column.key) {\n <td class=\"px-4 py-3\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (isTemplateRef(column.skeleton)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n } @else {\n <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n }\n </td>\n }\n </tr>\n }\n } @else {\n <!-- Empty state -->\n @if (filteredItems.length === 0) {\n <tr class=\"bg-base-100\">\n <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n @if (dataSource.emptyTemplate) {\n <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n } @else {\n <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n </div>\n }\n </td>\n </tr>\n }\n\n <!-- Data rows -->\n @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n <tr\n class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n [class.border-b]=\"!last\"\n [class.border-base-300]=\"!last\"\n [class.border-b-1]=\"last\"\n [class.border-black]=\"last\"\n [class.shadow-3xl]=\"last\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection checkbox -->\n @if (hasSelection) {\n <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n <mn-lib-checkbox\n (checkedChange)=\"toggle(row)\"\n [checked]=\"isSelected(row)\"\n [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n ></mn-lib-checkbox>\n </td>\n }\n\n <!-- Data cells -->\n @for (column of dataSource.columns; track column.key) {\n <td\n class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (column.cellSm) {\n <!-- Default cell: hidden below the cellSm breakpoint -->\n <span [mnShowAbove]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n </span>\n <!-- Small cell: shown only below the cellSm breakpoint -->\n <span [mnShowBelow]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cellSm.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n } @else {\n {{ getCellSmValue(column, row) }}\n }\n </span>\n } @else {\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n }\n </td>\n }\n\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n (loadMore)=\"loadMoreRows()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n [currentPage]=\"currentPage\"\n [isPaginated]=\"isPaginated\"\n [isServerPaginated]=\"isServerPaginated\"\n [labels]=\"dataSource.labels\"\n [loadingMoreRows]=\"loadingMoreRows\"\n [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n [pageSize]=\"pageSize\"\n [showLoadMore]=\"showLoadMore\"\n [totalItemCount]=\"totalItemCount\"\n [totalPages]=\"totalPages\"\n [visiblePages]=\"visiblePages\"\n idPrefix=\"mn-table\"\n></mn-collection-pagination>\n" }]
|
|
5243
|
+
args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n @if (dataSource.toolbarLeftTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n </div>\n }\n </div>\n <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n @if (dataSource.canSearch) {\n <mn-lib-input-field\n class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n [props]=\"{\n id: 'mn-table-search',\n type: 'search',\n label: '',\n placeholder: dataSource.searchPlaceholder ?? 'Search...',\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true\n }\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearch($event)\"\n ></mn-lib-input-field>\n }\n @if (dataSource.toolbarRightTemplate) {\n <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n </div>\n }\n <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n @if (hasColumnFilters && filtersCollapsed) {\n <button\n type=\"button\"\n mnButton\n [data]=\"{ variant: 'outline', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n class=\"w-full min-[375px]:w-auto gap-1.5\"\n [class.border-primary]=\"hasActiveFilters\"\n [class.text-primary]=\"hasActiveFilters\"\n [attr.aria-expanded]=\"filtersPanelOpen\"\n aria-controls=\"mn-table-filters-panel\"\n (click)=\"toggleFiltersPanel()\"\n >\n <svg lucideFunnel [size]=\"15\"></svg>\n <span>{{ filtersButtonLabel }}</span>\n </button>\n }\n </div>\n</div>\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n <div\n id=\"mn-table-filters-panel\"\n class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n >\n <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n @for (column of dataSource.columns; track column.key) {\n @if (column.filterable) {\n <div class=\"flex flex-col gap-1\">\n <label\n class=\"text-xs font-medium text-base-content/70\"\n [attr.for]=\"'mn-table-filter-' + column.key\"\n >\n @if (isTemplateRef(column.header)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n } @else {\n {{ column.header }}\n }\n </label>\n @if ((column.filterType ?? 'text') === 'text') {\n <mn-lib-input-field\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n type: 'text',\n label: '',\n placeholder: column.filterPlaceholder ?? '',\n autocomplete: column.filterAutocomplete ?? undefined,\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true,\n hover: true\n }\"\n [ngModel]=\"columnFilters[column.key]\"\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n ></mn-lib-input-field>\n } @else if (column.filterType === 'select') {\n <mn-lib-select\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n [ngModel]=\"columnFilters[column.key] ?? ''\"\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n options: getFilterSelectOptions(column),\n size: 'sm',\n fullWidth: true\n }\"\n ></mn-lib-select>\n }\n </div>\n }\n }\n @if (hasActiveFilters) {\n <button\n type=\"button\"\n mnButton\n [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n class=\"self-start gap-1\"\n (click)=\"clearAllFilters()\"\n >\n <svg lucideX [size]=\"14\"></svg>\n <span>{{ clearFiltersButtonLabel }}</span>\n </button>\n }\n </div>\n </div>\n </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\" class=\"overflow-x-auto\"\n role=\"region\">\n <table [class]=\"tableClasses\">\n <thead>\n <tr class=\"bg-base-100\">\n <!-- Selection checkbox column header -->\n @if (hasSelection) {\n <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n @if (isMultiSelect) {\n <mn-lib-checkbox\n (checkedChange)=\"toggleAll()\"\n [checked]=\"allSelected\"\n [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n ></mn-lib-checkbox>\n }\n </th>\n }\n\n <!-- Data columns -->\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n [class.cursor-pointer]=\"isSortable(column)\"\n [class.select-none]=\"isSortable(column)\"\n [class.hover:bg-base-200]=\"isSortable(column)\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n (click)=\"sort(column)\"\n >\n <span class=\"inline-flex items-center gap-1\">\n @if (isTemplateRef(column.header)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n } @else {\n <span>{{ column.header }}</span>\n }\n @if (isSortable(column)) {\n <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n }\n </span>\n </th>\n }\n\n </tr>\n\n <!-- Per-column filter row (wide screens only; collapses into a panel below 640px) -->\n @if (hasColumnFilters && !filtersCollapsed) {\n <tr class=\"bg-base-100 border-b border-base-300\">\n @if (hasSelection) {\n <th class=\"px-2 py-1 \"></th>\n }\n @for (column of dataSource.columns; track column.key) {\n <th\n class=\"px-4 py-2\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n >\n @if (column.filterable) {\n @if ((column.filterType ?? 'text') === 'text') {\n <mn-lib-input-field\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n type: 'text',\n label: '',\n placeholder: column.filterPlaceholder ?? '',\n autocomplete: column.filterAutocomplete ?? undefined,\n size: 'sm',\n borderRadius: 'md',\n fullWidth: true,\n hover: true\n }\"\n [ngModel]=\"columnFilters[column.key]\"\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n ></mn-lib-input-field>\n } @else if (column.filterType === 'select') {\n <mn-lib-select\n (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n [ngModel]=\"columnFilters[column.key] ?? ''\"\n [props]=\"{\n id: 'mn-table-filter-' + column.key,\n options: getFilterSelectOptions(column),\n size: 'sm',\n fullWidth: true\n }\"\n (click)=\"$event.stopPropagation()\"\n ></mn-lib-select>\n }\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n <!-- Loading state -->\n @if (dataSource.isDataLoading) {\n @for (_ of skeletonRows; track $index) {\n <tr>\n @if (hasSelection) {\n <td class=\"px-2 py-3\">\n <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n </td>\n }\n @for (column of dataSource.columns; track column.key) {\n <td class=\"px-4 py-3\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (isTemplateRef(column.skeleton)) {\n <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n } @else {\n <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n }\n </td>\n }\n </tr>\n }\n } @else {\n <!-- Empty state -->\n @if (filteredItems.length === 0) {\n <tr class=\"bg-base-100\">\n <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n @if (dataSource.emptyTemplate) {\n <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n } @else {\n <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n </div>\n }\n </td>\n </tr>\n }\n\n <!-- Data rows -->\n @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n <tr\n class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n [class.border-b]=\"!last\"\n [class.border-base-300]=\"!last\"\n [class.border-b-1]=\"last\"\n [class.border-black]=\"last\"\n [class.shadow-3xl]=\"last\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection checkbox -->\n @if (hasSelection) {\n <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n <mn-lib-checkbox\n (checkedChange)=\"toggle(row)\"\n [checked]=\"isSelected(row)\"\n [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n ></mn-lib-checkbox>\n </td>\n }\n\n <!-- Data cells -->\n @for (column of dataSource.columns; track column.key) {\n <td\n class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n [class.text-center]=\"column.align === 'center'\"\n [class.text-right]=\"column.align === 'right'\"\n [mnHiddenBelow]=\"column.hiddenBelow\"\n [style.width]=\"column.width ?? null\"\n >\n @if (column.cellSm) {\n <!-- Default cell: hidden below the cellSm breakpoint -->\n <span [mnShowAbove]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n </span>\n <!-- Small cell: shown only below the cellSm breakpoint -->\n <span [mnShowBelow]=\"column.cellSm.below\">\n @if (isTemplateRef(column.cellSm.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n } @else {\n {{ getCellSmValue(column, row) }}\n }\n </span>\n } @else {\n @if (isTemplateRef(column.cell)) {\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n } @else {\n {{ getCellValue(column, row) }}\n }\n }\n </td>\n }\n\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n (loadMore)=\"loadMoreRows()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n [currentPage]=\"currentPage\"\n [isPaginated]=\"isPaginated\"\n [isServerPaginated]=\"isServerPaginated\"\n [labels]=\"dataSource.labels\"\n [loadingMoreRows]=\"loadingMoreRows\"\n [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n [pageSize]=\"pageSize\"\n [showLoadMore]=\"showLoadMore\"\n [totalItemCount]=\"totalItemCount\"\n [totalPages]=\"totalPages\"\n [visiblePages]=\"visiblePages\"\n idPrefix=\"mn-table\"\n></mn-collection-pagination>\n" }]
|
|
5311
5244
|
}], propDecorators: { sortChange: [{
|
|
5312
5245
|
type: Output
|
|
5313
5246
|
}], rowClick: [{
|
|
@@ -8535,6 +8468,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
8535
8468
|
type: Output
|
|
8536
8469
|
}] } });
|
|
8537
8470
|
|
|
8471
|
+
const mnIconVariants = tv({
|
|
8472
|
+
base: 'inline-flex shrink-0',
|
|
8473
|
+
variants: {
|
|
8474
|
+
color: {
|
|
8475
|
+
current: 'text-current',
|
|
8476
|
+
primary: 'text-primary',
|
|
8477
|
+
secondary: 'text-neutral',
|
|
8478
|
+
danger: 'text-error',
|
|
8479
|
+
warning: 'text-warning',
|
|
8480
|
+
success: 'text-success',
|
|
8481
|
+
accent: 'text-accent',
|
|
8482
|
+
},
|
|
8483
|
+
},
|
|
8484
|
+
defaultVariants: {
|
|
8485
|
+
color: 'current',
|
|
8486
|
+
},
|
|
8487
|
+
});
|
|
8488
|
+
|
|
8489
|
+
// Custom SVGs that are NOT available in lucide (https://lucide.dev).
|
|
8490
|
+
// For any lucide icon, use the @lucide/angular directive directly instead —
|
|
8491
|
+
// e.g. `<svg lucideX [size]="18"></svg>` — rather than adding it here.
|
|
8492
|
+
// Sourced from the .svg files in the ./icons/ directory.
|
|
8493
|
+
const pistolSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.72 14.56 9 10h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v4c2.5 0 1 4 1 4-4 6-1 6-1 6h3.38a1 1 0 0 0 .89-.55za1 1 0 0 1 .9-.56H13a2 2 0 0 0 2-2v-1a1 1 0 0 1 1-1" /></svg>`;
|
|
8494
|
+
const pendingSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v5l4 2" /><path d="M14 20.775A9 9 0 0112 21" /><path d="M19 17.656a9 9 0 01-1.5 1.456" /><path d="M21 12a9 9 0 01-.228 2" /><path d="M21 8h-5" /><path d="M7.5 19.794c-6-3.464-6-12.124 0-15.588A9 9 0 0112 3a9.75 9.75 0 016.74 2.74L21 8V3" /></svg>`;
|
|
8495
|
+
const MN_ICON_MAP = {
|
|
8496
|
+
pistol: pistolSvg,
|
|
8497
|
+
pending: pendingSvg,
|
|
8498
|
+
};
|
|
8499
|
+
|
|
8500
|
+
class MnIcon {
|
|
8501
|
+
data = {};
|
|
8502
|
+
sanitizer = inject(DomSanitizer);
|
|
8503
|
+
el = inject(ElementRef);
|
|
8504
|
+
svgContent = '';
|
|
8505
|
+
get iconSize() {
|
|
8506
|
+
return this.data.size ?? 24;
|
|
8507
|
+
}
|
|
8508
|
+
get hostClasses() {
|
|
8509
|
+
return mnIconVariants({
|
|
8510
|
+
color: this.data.color,
|
|
8511
|
+
});
|
|
8512
|
+
}
|
|
8513
|
+
resolvedName = null;
|
|
8514
|
+
ngOnInit() {
|
|
8515
|
+
const attrs = this.el.nativeElement.attributes;
|
|
8516
|
+
for (const item of Array.from(attrs)) {
|
|
8517
|
+
const attr = item.name.toLowerCase();
|
|
8518
|
+
if (attr.startsWith('mnicon')) {
|
|
8519
|
+
const iconKey = attr.slice('mnicon'.length);
|
|
8520
|
+
for (const key of Object.keys(MN_ICON_MAP)) {
|
|
8521
|
+
if (key.toLowerCase() === iconKey) {
|
|
8522
|
+
this.resolvedName = key;
|
|
8523
|
+
break;
|
|
8524
|
+
}
|
|
8525
|
+
}
|
|
8526
|
+
if (this.resolvedName)
|
|
8527
|
+
break;
|
|
8528
|
+
}
|
|
8529
|
+
}
|
|
8530
|
+
this.updateContent();
|
|
8531
|
+
}
|
|
8532
|
+
ngOnChanges() {
|
|
8533
|
+
this.updateContent();
|
|
8534
|
+
}
|
|
8535
|
+
updateContent() {
|
|
8536
|
+
const name = this.data.name ?? this.resolvedName;
|
|
8537
|
+
if (name) {
|
|
8538
|
+
const raw = MN_ICON_MAP[name];
|
|
8539
|
+
if (raw) {
|
|
8540
|
+
const size = this.iconSize;
|
|
8541
|
+
const isFullSvg = raw.trim().startsWith('<svg');
|
|
8542
|
+
if (isFullSvg) {
|
|
8543
|
+
const sized = raw.replace(/<svg([^>]*)>/, (_match, attrs) => {
|
|
8544
|
+
let updated = attrs.replace(/width="[^"]*"/, `width="${size}"`);
|
|
8545
|
+
updated = updated.replace(/height="[^"]*"/, `height="${size}"`);
|
|
8546
|
+
if (!attrs.includes('width='))
|
|
8547
|
+
updated += ` width="${size}"`;
|
|
8548
|
+
if (!attrs.includes('height='))
|
|
8549
|
+
updated += ` height="${size}"`;
|
|
8550
|
+
return `<svg${updated}>`;
|
|
8551
|
+
});
|
|
8552
|
+
this.svgContent = this.sanitizer.bypassSecurityTrustHtml(sized);
|
|
8553
|
+
}
|
|
8554
|
+
else {
|
|
8555
|
+
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${raw}</svg>`;
|
|
8556
|
+
this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
8557
|
+
}
|
|
8558
|
+
}
|
|
8559
|
+
else {
|
|
8560
|
+
this.svgContent = '';
|
|
8561
|
+
}
|
|
8562
|
+
}
|
|
8563
|
+
else {
|
|
8564
|
+
this.svgContent = '';
|
|
8565
|
+
}
|
|
8566
|
+
}
|
|
8567
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8568
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnIcon, isStandalone: true, selector: "mn-icon", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: "<span\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\"\n style=\"display: inline-flex; align-items: center; justify-content: center;\"\n [innerHTML]=\"svgContent\"\n></span>\n" });
|
|
8569
|
+
}
|
|
8570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, decorators: [{
|
|
8571
|
+
type: Component,
|
|
8572
|
+
args: [{ selector: 'mn-icon', standalone: true, template: "<span\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\"\n style=\"display: inline-flex; align-items: center; justify-content: center;\"\n [innerHTML]=\"svgContent\"\n></span>\n" }]
|
|
8573
|
+
}], propDecorators: { data: [{
|
|
8574
|
+
type: Input
|
|
8575
|
+
}], hostClasses: [{
|
|
8576
|
+
type: HostBinding,
|
|
8577
|
+
args: ['class']
|
|
8578
|
+
}] } });
|
|
8579
|
+
|
|
8580
|
+
// AUTO-GENERATED — do not edit manually.
|
|
8581
|
+
// Run `npm run generate:icons` to regenerate after modifying MN_ICON_MAP.
|
|
8582
|
+
class MnIconAttributes {
|
|
8583
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8584
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnIconAttributes, isStandalone: true, selector: "mn-icon[mnIconPistol], mn-icon[mnIconPending]", ngImport: i0 });
|
|
8585
|
+
}
|
|
8586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, decorators: [{
|
|
8587
|
+
type: Directive,
|
|
8588
|
+
args: [{
|
|
8589
|
+
selector: 'mn-icon[mnIconPistol], mn-icon[mnIconPending]',
|
|
8590
|
+
standalone: true,
|
|
8591
|
+
}]
|
|
8592
|
+
}] });
|
|
8593
|
+
|
|
8538
8594
|
/**
|
|
8539
8595
|
* Injection token for the base URL used by all CRUD service requests.
|
|
8540
8596
|
*
|