cats-ui-lib 2.0.15 → 2.0.16
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/README.md +179 -223
- package/fesm2022/cats-ui-lib.mjs +24 -4
- package/fesm2022/cats-ui-lib.mjs.map +1 -1
- package/index.d.ts +39 -3
- package/package.json +1 -1
package/fesm2022/cats-ui-lib.mjs
CHANGED
|
@@ -3790,6 +3790,7 @@ class FileUploadComponent {
|
|
|
3790
3790
|
maxSize = null;
|
|
3791
3791
|
minSize = null;
|
|
3792
3792
|
helperText = '';
|
|
3793
|
+
onfileChange = new EventEmitter();
|
|
3793
3794
|
/**
|
|
3794
3795
|
* Accepted MIME types or extensions, comma-separated.
|
|
3795
3796
|
* e.g. 'image/png,image/jpeg' or '.png,.jpg,.pdf'
|
|
@@ -3878,6 +3879,7 @@ class FileUploadComponent {
|
|
|
3878
3879
|
this.value = valid;
|
|
3879
3880
|
this.onChange(this.value);
|
|
3880
3881
|
}
|
|
3882
|
+
this.onfileChange.emit(this.value);
|
|
3881
3883
|
this.onTouched();
|
|
3882
3884
|
input.value = '';
|
|
3883
3885
|
this.isFocused = false;
|
|
@@ -3952,7 +3954,7 @@ class FileUploadComponent {
|
|
|
3952
3954
|
return !!this.displayError;
|
|
3953
3955
|
}
|
|
3954
3956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3955
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileUploadComponent, isStandalone: true, selector: "cats-ui-file-upload", inputs: { placeholder: "placeholder", errorMessage: "errorMessage", disabled: "disabled", multiple: "multiple", buttonPosition: "buttonPosition", maxSize: "maxSize", minSize: "minSize", helperText: "helperText", accept: "accept" }, providers: [
|
|
3957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileUploadComponent, isStandalone: true, selector: "cats-ui-file-upload", inputs: { placeholder: "placeholder", errorMessage: "errorMessage", disabled: "disabled", multiple: "multiple", buttonPosition: "buttonPosition", maxSize: "maxSize", minSize: "minSize", helperText: "helperText", accept: "accept" }, outputs: { onfileChange: "onfileChange" }, providers: [
|
|
3956
3958
|
{
|
|
3957
3959
|
provide: NG_VALUE_ACCESSOR,
|
|
3958
3960
|
useExisting: forwardRef(() => FileUploadComponent),
|
|
@@ -3985,6 +3987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
3985
3987
|
type: Input
|
|
3986
3988
|
}], helperText: [{
|
|
3987
3989
|
type: Input
|
|
3990
|
+
}], onfileChange: [{
|
|
3991
|
+
type: Output
|
|
3988
3992
|
}], accept: [{
|
|
3989
3993
|
type: Input
|
|
3990
3994
|
}] } });
|
|
@@ -4141,13 +4145,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
4141
4145
|
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
|
|
4142
4146
|
|
|
4143
4147
|
class SidebarComponent {
|
|
4148
|
+
config = [];
|
|
4149
|
+
expandedFeatures = new Set();
|
|
4150
|
+
activeItem = null;
|
|
4151
|
+
toggleFeature(key) {
|
|
4152
|
+
this.expandedFeatures.has(key)
|
|
4153
|
+
? this.expandedFeatures.delete(key)
|
|
4154
|
+
: this.expandedFeatures.add(key);
|
|
4155
|
+
}
|
|
4156
|
+
isExpanded(key) {
|
|
4157
|
+
return this.expandedFeatures.has(key);
|
|
4158
|
+
}
|
|
4159
|
+
setActive(key) {
|
|
4160
|
+
this.activeItem = key;
|
|
4161
|
+
}
|
|
4144
4162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SidebarComponent, isStandalone: true, selector: "cats-ui-sidebar", inputs: { config: "config" }, ngImport: i0, template: "<nav class=\"sidebar\">\r\n @for (mod of config; track mod.moduleName) {\r\n @if (mod.isEnable) {\r\n <div class=\"section\">\r\n <div class=\"section-label\">{{ mod.moduleName }}</div>\r\n\r\n @for (feat of mod.features; track feat.featuresName) {\r\n @if (feat.isEnable) {\r\n <div class=\"nav-item-wrapper\">\r\n <!-- Feature row -->\r\n <div\r\n class=\"nav-item\"\r\n [class.active]=\"activeItem === feat.featuresName\"\r\n (click)=\"\r\n feat.expandable\r\n ? toggleFeature(feat.featuresName)\r\n : setActive(feat.featuresName)\r\n \"\r\n >\r\n <span class=\"nav-icon\">\r\n @if (activeItem === feat.featuresName && feat.activeIcon) {\r\n <img [src]=\"feat.activeIcon\" alt=\"\" />\r\n } @else {\r\n @if (feat.icon) {\r\n <img [src]=\"feat.icon\" alt=\"\" />\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"nav-label\">{{ feat.featuresName }}</span>\r\n\r\n @if (feat.expandable) {\r\n <span\r\n class=\"nav-arrow\"\r\n [class.open]=\"isExpanded(feat.featuresName)\"\r\n >\r\n <svg\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n >\r\n <path d=\"M6 4l4 4-4 4\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Sub-items (attributes) -->\r\n @if (feat.expandable && isExpanded(feat.featuresName)) {\r\n <div class=\"sub-items\">\r\n @for (attr of feat.attributes; track attr.attributeName) {\r\n <div\r\n class=\"sub-item\"\r\n [class.active]=\"activeItem === attr.attributeName\"\r\n (click)=\"setActive(attr.attributeName)\"\r\n >\r\n <span class=\"dot\"></span>\r\n <span class=\"nav-label\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n</nav>\r\n", styles: [".sidebar{width:240px;height:100vh;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:99px}.section{padding-top:8px}.section+.section{border-top:1px solid #e5e7eb;margin-top:4px;padding-top:8px}.section-label{padding:8px 16px 4px;font-size:10px;font-weight:600;color:#9ca3af;letter-spacing:.9px;text-transform:uppercase;line-height:1}.nav-item-wrapper{padding:1px 8px}.nav-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;-webkit-user-select:none;user-select:none}.nav-item:hover:not(.active){background:#f3f4f6}.nav-item.active{background:#eff6ff}.nav-item.active .nav-label{color:#2563eb;font-weight:500}.nav-item.active .nav-icon{color:#2563eb}.nav-item.active:before{content:\"\";position:absolute;left:0;top:20%;height:60%;width:3px;border-radius:0 3px 3px 0;background:#2563eb}.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#6b7280}.nav-icon img{width:100%;height:100%;object-fit:contain}.nav-label{font-size:13px;color:#374151;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}.nav-arrow{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#9ca3af;flex-shrink:0;transition:transform .2s ease}.nav-arrow svg{width:12px;height:12px}.nav-arrow.open{transform:rotate(90deg);color:#2563eb}.sub-items{padding:2px 0 4px;animation:slideDown .2s ease forwards;overflow:hidden}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sub-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 42px;border-radius:6px;margin:1px 8px;cursor:pointer;transition:background .15s ease}.sub-item:hover:not(.active){background:#f3f4f6}.sub-item.active{background:#eff6ff}.sub-item.active .nav-label{color:#2563eb;font-weight:500}.sub-item.active .dot{background:#2563eb;transform:scale(1.3)}.dot{width:5px;height:5px;border-radius:50%;background:#d1d5db;flex-shrink:0;transition:background .15s ease,transform .15s ease}@media (prefers-color-scheme: dark){.sidebar{background:#111827;border-color:#1f2937}.section{border-color:#1f2937}.section-label{color:#4b5563}.nav-label{color:#d1d5db}.nav-icon{color:#6b7280}.nav-item:hover:not(.active){background:#1f2937}.nav-item.active{background:#1e3a5f}.nav-item.active .nav-label,.nav-item.active .nav-icon{color:#60a5fa}.nav-item.active:before{background:#3b82f6}.sub-item:hover:not(.active){background:#1f2937}.sub-item.active{background:#1e3a5f}.sub-item.active .nav-label{color:#60a5fa}.sub-item.active .dot{background:#3b82f6}.dot{background:#374151}.nav-arrow{color:#4b5563}}\n"] });
|
|
4146
4164
|
}
|
|
4147
4165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
4148
4166
|
type: Component,
|
|
4149
|
-
args: [{ selector: 'cats-ui-sidebar', imports: [], template: "<
|
|
4150
|
-
}]
|
|
4167
|
+
args: [{ selector: 'cats-ui-sidebar', imports: [], template: "<nav class=\"sidebar\">\r\n @for (mod of config; track mod.moduleName) {\r\n @if (mod.isEnable) {\r\n <div class=\"section\">\r\n <div class=\"section-label\">{{ mod.moduleName }}</div>\r\n\r\n @for (feat of mod.features; track feat.featuresName) {\r\n @if (feat.isEnable) {\r\n <div class=\"nav-item-wrapper\">\r\n <!-- Feature row -->\r\n <div\r\n class=\"nav-item\"\r\n [class.active]=\"activeItem === feat.featuresName\"\r\n (click)=\"\r\n feat.expandable\r\n ? toggleFeature(feat.featuresName)\r\n : setActive(feat.featuresName)\r\n \"\r\n >\r\n <span class=\"nav-icon\">\r\n @if (activeItem === feat.featuresName && feat.activeIcon) {\r\n <img [src]=\"feat.activeIcon\" alt=\"\" />\r\n } @else {\r\n @if (feat.icon) {\r\n <img [src]=\"feat.icon\" alt=\"\" />\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"nav-label\">{{ feat.featuresName }}</span>\r\n\r\n @if (feat.expandable) {\r\n <span\r\n class=\"nav-arrow\"\r\n [class.open]=\"isExpanded(feat.featuresName)\"\r\n >\r\n <svg\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n >\r\n <path d=\"M6 4l4 4-4 4\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Sub-items (attributes) -->\r\n @if (feat.expandable && isExpanded(feat.featuresName)) {\r\n <div class=\"sub-items\">\r\n @for (attr of feat.attributes; track attr.attributeName) {\r\n <div\r\n class=\"sub-item\"\r\n [class.active]=\"activeItem === attr.attributeName\"\r\n (click)=\"setActive(attr.attributeName)\"\r\n >\r\n <span class=\"dot\"></span>\r\n <span class=\"nav-label\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n</nav>\r\n", styles: [".sidebar{width:240px;height:100vh;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:99px}.section{padding-top:8px}.section+.section{border-top:1px solid #e5e7eb;margin-top:4px;padding-top:8px}.section-label{padding:8px 16px 4px;font-size:10px;font-weight:600;color:#9ca3af;letter-spacing:.9px;text-transform:uppercase;line-height:1}.nav-item-wrapper{padding:1px 8px}.nav-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;-webkit-user-select:none;user-select:none}.nav-item:hover:not(.active){background:#f3f4f6}.nav-item.active{background:#eff6ff}.nav-item.active .nav-label{color:#2563eb;font-weight:500}.nav-item.active .nav-icon{color:#2563eb}.nav-item.active:before{content:\"\";position:absolute;left:0;top:20%;height:60%;width:3px;border-radius:0 3px 3px 0;background:#2563eb}.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#6b7280}.nav-icon img{width:100%;height:100%;object-fit:contain}.nav-label{font-size:13px;color:#374151;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}.nav-arrow{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#9ca3af;flex-shrink:0;transition:transform .2s ease}.nav-arrow svg{width:12px;height:12px}.nav-arrow.open{transform:rotate(90deg);color:#2563eb}.sub-items{padding:2px 0 4px;animation:slideDown .2s ease forwards;overflow:hidden}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sub-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 42px;border-radius:6px;margin:1px 8px;cursor:pointer;transition:background .15s ease}.sub-item:hover:not(.active){background:#f3f4f6}.sub-item.active{background:#eff6ff}.sub-item.active .nav-label{color:#2563eb;font-weight:500}.sub-item.active .dot{background:#2563eb;transform:scale(1.3)}.dot{width:5px;height:5px;border-radius:50%;background:#d1d5db;flex-shrink:0;transition:background .15s ease,transform .15s ease}@media (prefers-color-scheme: dark){.sidebar{background:#111827;border-color:#1f2937}.section{border-color:#1f2937}.section-label{color:#4b5563}.nav-label{color:#d1d5db}.nav-icon{color:#6b7280}.nav-item:hover:not(.active){background:#1f2937}.nav-item.active{background:#1e3a5f}.nav-item.active .nav-label,.nav-item.active .nav-icon{color:#60a5fa}.nav-item.active:before{background:#3b82f6}.sub-item:hover:not(.active){background:#1f2937}.sub-item.active{background:#1e3a5f}.sub-item.active .nav-label{color:#60a5fa}.sub-item.active .dot{background:#3b82f6}.dot{background:#374151}.nav-arrow{color:#4b5563}}\n"] }]
|
|
4168
|
+
}], propDecorators: { config: [{
|
|
4169
|
+
type: Input
|
|
4170
|
+
}] } });
|
|
4151
4171
|
|
|
4152
4172
|
/*
|
|
4153
4173
|
* Public API Surface of cats-ui
|