cloud-ide-element 1.0.7 → 1.0.9
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.
|
@@ -812,13 +812,13 @@ class CideIconComponent {
|
|
|
812
812
|
type = "round";
|
|
813
813
|
toolTip = "";
|
|
814
814
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
815
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideIconComponent, isStandalone: true, selector: "cide-ele-icon", inputs: { size: "size", type: "type", toolTip: "toolTip" }, host: { properties: { "class.mpro-icon-field": "type === 'box'" } }, ngImport: i0, template: "<button class=\"cide-icon tw-m-1 tw-inline-block tw-outline-none tw-relative\" [ngClass]=\"{\r\n 'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n 'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n 'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n 'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n 'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n 'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n 'cide-tooltip': (toolTip),\r\n }\">\r\n <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' : (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' : (size === '2xs'), 'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' : (size === '3xs')}\"><ng-content></ng-content></span>\r\n</button>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
815
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideIconComponent, isStandalone: true, selector: "cide-ele-icon", inputs: { size: "size", type: "type", toolTip: "toolTip" }, host: { properties: { "class.mpro-icon-field": "type === 'box'" } }, ngImport: i0, template: "<button class=\"cide-icon tw-m-1 tw-inline-block tw-outline-none tw-relative\" [ngClass]=\"{\r\n 'tw-h-[35px] tw-w-[35px]': (size === 'lg'), \r\n 'tw-h-[27px] tw-w-[27px]': (size === 'md'), \r\n 'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n 'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n 'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n 'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n 'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n 'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n 'cide-tooltip': (toolTip),\r\n }\">\r\n <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' : (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' : (size === '2xs'), 'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' : (size === '3xs')}\"><ng-content></ng-content></span>\r\n</button>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
816
816
|
}
|
|
817
817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideIconComponent, decorators: [{
|
|
818
818
|
type: Component,
|
|
819
819
|
args: [{ selector: 'cide-ele-icon', standalone: true, imports: [CommonModule], host: {
|
|
820
820
|
'[class.mpro-icon-field]': "type === 'box'"
|
|
821
|
-
}, template: "<button class=\"cide-icon tw-m-1 tw-inline-block tw-outline-none tw-relative\" [ngClass]=\"{\r\n 'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n 'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n 'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n 'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n 'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n 'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n 'cide-tooltip': (toolTip),\r\n }\">\r\n <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' : (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' : (size === '2xs'), 'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' : (size === '3xs')}\"><ng-content></ng-content></span>\r\n</button>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"] }]
|
|
821
|
+
}, template: "<button class=\"cide-icon tw-m-1 tw-inline-block tw-outline-none tw-relative\" [ngClass]=\"{\r\n 'tw-h-[35px] tw-w-[35px]': (size === 'lg'), \r\n 'tw-h-[27px] tw-w-[27px]': (size === 'md'), \r\n 'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n 'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n 'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n 'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n 'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n 'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n 'cide-tooltip': (toolTip),\r\n }\">\r\n <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' : (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' : (size === '2xs'), 'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' : (size === '3xs')}\"><ng-content></ng-content></span>\r\n</button>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"] }]
|
|
822
822
|
}], propDecorators: { size: [{
|
|
823
823
|
type: Input
|
|
824
824
|
}], type: [{
|
|
@@ -1346,11 +1346,11 @@ class CideEleTabComponent {
|
|
|
1346
1346
|
.join(' ');
|
|
1347
1347
|
}
|
|
1348
1348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleTabComponent, isStandalone: true, selector: "cide-ele-tab", inputs: { tabs: "tabs", activeTabId: "activeTabId", size: "size", variant: "variant", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\r\n @for (tab of tabs; track tab.id) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getTabClasses(tab)\"\r\n [disabled]=\"tab.disabled || disabled\"\r\n (click)=\"onTabClick(tab)\"\r\n [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\"\r\n role=\"tab\">\r\n \r\n @if (tab.icon) {\r\n <
|
|
1349
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleTabComponent, isStandalone: true, selector: "cide-ele-tab", inputs: { tabs: "tabs", activeTabId: "activeTabId", size: "size", variant: "variant", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\r\n @for (tab of tabs; track tab.id) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getTabClasses(tab)\"\r\n [disabled]=\"tab.disabled || disabled\"\r\n (click)=\"onTabClick(tab)\"\r\n [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\"\r\n role=\"tab\">\r\n \r\n @if (tab.icon) {\r\n <cide-ele-icon class=\"cide-tab-icon\">{{ tab.icon }}</cide-ele-icon>\r\n }\r\n \r\n <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n \r\n @if (tab.badge) {\r\n <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n }\r\n </button>\r\n }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-theme-primary-color);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-theme-primary-color)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-theme-primary-color)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-theme-primary-color);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
1350
1350
|
}
|
|
1351
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleTabComponent, decorators: [{
|
|
1352
1352
|
type: Component,
|
|
1353
|
-
args: [{ selector: 'cide-ele-tab', standalone: true, imports: [CommonModule], template: "<div [class]=\"getContainerClasses()\">\r\n @for (tab of tabs; track tab.id) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getTabClasses(tab)\"\r\n [disabled]=\"tab.disabled || disabled\"\r\n (click)=\"onTabClick(tab)\"\r\n [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\"\r\n role=\"tab\">\r\n \r\n @if (tab.icon) {\r\n <
|
|
1353
|
+
args: [{ selector: 'cide-ele-tab', standalone: true, imports: [CommonModule, CideIconComponent], template: "<div [class]=\"getContainerClasses()\">\r\n @for (tab of tabs; track tab.id) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getTabClasses(tab)\"\r\n [disabled]=\"tab.disabled || disabled\"\r\n (click)=\"onTabClick(tab)\"\r\n [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\"\r\n role=\"tab\">\r\n \r\n @if (tab.icon) {\r\n <cide-ele-icon class=\"cide-tab-icon\">{{ tab.icon }}</cide-ele-icon>\r\n }\r\n \r\n <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n \r\n @if (tab.badge) {\r\n <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n }\r\n </button>\r\n }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-theme-primary-color);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-theme-primary-color)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-theme-primary-color)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-theme-primary-color);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"] }]
|
|
1354
1354
|
}], propDecorators: { tabs: [{
|
|
1355
1355
|
type: Input
|
|
1356
1356
|
}], activeTabId: [{
|
|
@@ -1374,17 +1374,25 @@ class CideEleFileInputComponent {
|
|
|
1374
1374
|
disabled = false;
|
|
1375
1375
|
helperText = '';
|
|
1376
1376
|
errorText = '';
|
|
1377
|
+
showPreview = false;
|
|
1378
|
+
previewWidth = '200px';
|
|
1379
|
+
previewHeight = '200px';
|
|
1380
|
+
previewBoxMode = false;
|
|
1381
|
+
placeholderText = 'Click to select image';
|
|
1382
|
+
placeholderIcon = '📷';
|
|
1377
1383
|
id = Math.random().toString(36).substring(2, 10);
|
|
1378
1384
|
fileChange = new EventEmitter();
|
|
1379
1385
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1380
1386
|
files = null;
|
|
1381
1387
|
fileNames = [];
|
|
1388
|
+
previewUrls = [];
|
|
1382
1389
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1383
1390
|
onChange = (files) => { };
|
|
1384
1391
|
onTouched = () => { };
|
|
1385
1392
|
writeValue(files) {
|
|
1386
1393
|
this.files = files;
|
|
1387
1394
|
this.fileNames = files ? Array.from(files).map(f => f.name) : [];
|
|
1395
|
+
this.generatePreviews();
|
|
1388
1396
|
}
|
|
1389
1397
|
registerOnChange(fn) {
|
|
1390
1398
|
this.onChange = fn;
|
|
@@ -1399,6 +1407,7 @@ class CideEleFileInputComponent {
|
|
|
1399
1407
|
const input = event.target;
|
|
1400
1408
|
this.files = input.files;
|
|
1401
1409
|
this.fileNames = this.files ? Array.from(this.files).map(f => f.name) : [];
|
|
1410
|
+
this.generatePreviews();
|
|
1402
1411
|
this.onChange(this.files);
|
|
1403
1412
|
this.fileChange.emit(this.files);
|
|
1404
1413
|
this.onTouched();
|
|
@@ -1406,17 +1415,87 @@ class CideEleFileInputComponent {
|
|
|
1406
1415
|
clearFiles() {
|
|
1407
1416
|
this.files = null;
|
|
1408
1417
|
this.fileNames = [];
|
|
1418
|
+
this.clearPreviews();
|
|
1409
1419
|
this.onChange(null);
|
|
1410
1420
|
this.fileChange.emit(null);
|
|
1411
1421
|
}
|
|
1422
|
+
generatePreviews() {
|
|
1423
|
+
// Clear existing previews
|
|
1424
|
+
this.clearPreviews();
|
|
1425
|
+
if (!this.showPreview || !this.files) {
|
|
1426
|
+
return;
|
|
1427
|
+
}
|
|
1428
|
+
Array.from(this.files).forEach(file => {
|
|
1429
|
+
if (this.isImageFile(file)) {
|
|
1430
|
+
const reader = new FileReader();
|
|
1431
|
+
reader.onload = (e) => {
|
|
1432
|
+
if (e.target?.result) {
|
|
1433
|
+
this.previewUrls.push(e.target.result);
|
|
1434
|
+
}
|
|
1435
|
+
};
|
|
1436
|
+
reader.readAsDataURL(file);
|
|
1437
|
+
}
|
|
1438
|
+
});
|
|
1439
|
+
}
|
|
1440
|
+
clearPreviews() {
|
|
1441
|
+
// Revoke object URLs to prevent memory leaks
|
|
1442
|
+
this.previewUrls.forEach(url => {
|
|
1443
|
+
if (url.startsWith('blob:')) {
|
|
1444
|
+
URL.revokeObjectURL(url);
|
|
1445
|
+
}
|
|
1446
|
+
});
|
|
1447
|
+
this.previewUrls = [];
|
|
1448
|
+
}
|
|
1449
|
+
isImageFile(file) {
|
|
1450
|
+
return file.type.startsWith('image/');
|
|
1451
|
+
}
|
|
1452
|
+
isImagePreviewAvailable() {
|
|
1453
|
+
return this.showPreview && this.previewUrls.length > 0;
|
|
1454
|
+
}
|
|
1455
|
+
removePreview(index) {
|
|
1456
|
+
if (this.files && this.files.length > index) {
|
|
1457
|
+
// Create new FileList without the removed file
|
|
1458
|
+
const dt = new DataTransfer();
|
|
1459
|
+
Array.from(this.files).forEach((file, i) => {
|
|
1460
|
+
if (i !== index) {
|
|
1461
|
+
dt.items.add(file);
|
|
1462
|
+
}
|
|
1463
|
+
});
|
|
1464
|
+
this.files = dt.files;
|
|
1465
|
+
this.fileNames = Array.from(this.files).map(f => f.name);
|
|
1466
|
+
// Remove the preview URL
|
|
1467
|
+
if (this.previewUrls[index] && this.previewUrls[index].startsWith('blob:')) {
|
|
1468
|
+
URL.revokeObjectURL(this.previewUrls[index]);
|
|
1469
|
+
}
|
|
1470
|
+
this.previewUrls.splice(index, 1);
|
|
1471
|
+
this.onChange(this.files);
|
|
1472
|
+
this.fileChange.emit(this.files);
|
|
1473
|
+
}
|
|
1474
|
+
}
|
|
1475
|
+
ngOnDestroy() {
|
|
1476
|
+
// Clean up preview URLs to prevent memory leaks
|
|
1477
|
+
this.clearPreviews();
|
|
1478
|
+
}
|
|
1479
|
+
triggerFileSelect() {
|
|
1480
|
+
const fileInput = document.getElementById('cide-file-input-' + this.id);
|
|
1481
|
+
if (fileInput && !this.disabled) {
|
|
1482
|
+
fileInput.click();
|
|
1483
|
+
}
|
|
1484
|
+
}
|
|
1485
|
+
isPreviewBoxMode() {
|
|
1486
|
+
return this.previewBoxMode && this.showPreview;
|
|
1487
|
+
}
|
|
1488
|
+
hasImages() {
|
|
1489
|
+
return this.previewUrls.length > 0;
|
|
1490
|
+
}
|
|
1412
1491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1413
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", helperText: "helperText", errorText: "errorText" }, outputs: { fileChange: "fileChange" }, providers: [
|
|
1492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon" }, outputs: { fileChange: "fileChange" }, providers: [
|
|
1414
1493
|
{
|
|
1415
1494
|
provide: NG_VALUE_ACCESSOR,
|
|
1416
1495
|
useExisting: forwardRef(() => CideEleFileInputComponent),
|
|
1417
1496
|
multi: true
|
|
1418
1497
|
}
|
|
1419
|
-
], ngImport: i0, template: "<div class=\"cide-file-input\">\r\n <label *ngIf=\"label\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n <div class=\"cide-file-input-wrapper\">\r\n <input\r\n type=\"file\"\r\n [attr.id]=\"'cide-file-input-' + id\"\r\n [attr.accept]=\"accept\"\r\n [attr.multiple]=\"multiple ? true : null\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n class=\"cide-file-input-element\"\r\n />\r\n <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n Clear\r\n </button>\r\n </div>\r\n <div *ngIf=\"fileNames.length\" class=\"cide-file-input-files\">\r\n <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n </div>\r\n <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1498
|
+
], ngImport: i0, template: "<div class=\"cide-file-input\">\r\n <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n \r\n <!-- Preview Box Mode -->\r\n <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\r\n <!-- Hidden file input -->\r\n <input\r\n type=\"file\"\r\n [attr.id]=\"'cide-file-input-' + id\"\r\n [attr.accept]=\"accept\"\r\n [attr.multiple]=\"multiple ? true : null\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n class=\"cide-file-input-hidden\"\r\n />\r\n \r\n <!-- Preview Box -->\r\n <div \r\n class=\"cide-file-input-preview-box\"\r\n [class.cide-file-input-preview-box-disabled]=\"disabled\"\r\n [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\r\n [style.width]=\"previewWidth\"\r\n [style.height]=\"previewHeight\"\r\n (click)=\"triggerFileSelect()\"\r\n [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\r\n \r\n <!-- No Image State -->\r\n <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\r\n <div class=\"cide-file-input-preview-box-icon\">{{ placeholderIcon }}</div>\r\n <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\r\n </div>\r\n \r\n <!-- Image Preview State -->\r\n <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\r\n <img \r\n [src]=\"previewUrls[0]\" \r\n [alt]=\"fileNames[0] || 'Preview image'\"\r\n class=\"cide-file-input-preview-box-image\">\r\n <div class=\"cide-file-input-preview-box-overlay\">\r\n <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\r\n </div>\r\n <button \r\n *ngIf=\"!disabled\"\r\n type=\"button\" \r\n class=\"cide-file-input-preview-box-remove\"\r\n (click)=\"clearFiles(); $event.stopPropagation()\"\r\n title=\"Remove image\">\r\n \u00D7\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <!-- File name display for preview box mode -->\r\n <div *ngIf=\"hasImages() && fileNames.length\" class=\"cide-file-input-preview-box-filename\">\r\n {{ fileNames[0] }}\r\n </div>\r\n </div>\r\n\r\n <!-- Standard Mode -->\r\n <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\r\n <input\r\n type=\"file\"\r\n [attr.id]=\"'cide-file-input-' + id\"\r\n [attr.accept]=\"accept\"\r\n [attr.multiple]=\"multiple ? true : null\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n class=\"cide-file-input-element\"\r\n />\r\n <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n Clear\r\n </button>\r\n </div>\r\n <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\r\n <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n </div>\r\n \r\n <!-- Image Preview Section (only for standard mode) -->\r\n <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\r\n <div class=\"cide-file-input-preview-label\">Preview:</div>\r\n <div class=\"cide-file-input-preview-container\">\r\n <div \r\n *ngFor=\"let previewUrl of previewUrls; let i = index\" \r\n class=\"cide-file-input-preview-item\"\r\n [style.width]=\"previewWidth\"\r\n [style.height]=\"previewHeight\">\r\n <button \r\n type=\"button\" \r\n class=\"cide-file-input-preview-remove\"\r\n (click)=\"removePreview(i)\"\r\n title=\"Remove image\">\r\n \u00D7\r\n </button>\r\n <img \r\n [src]=\"previewUrl\" \r\n [alt]=\"fileNames[i] || 'Preview image'\"\r\n class=\"cide-file-input-preview-image\"\r\n loading=\"lazy\">\r\n <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1420
1499
|
}
|
|
1421
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
|
|
1422
1501
|
type: Component,
|
|
@@ -1426,7 +1505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1426
1505
|
useExisting: forwardRef(() => CideEleFileInputComponent),
|
|
1427
1506
|
multi: true
|
|
1428
1507
|
}
|
|
1429
|
-
], template: "<div class=\"cide-file-input\">\r\n <label *ngIf=\"label\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n <div class=\"cide-file-input-wrapper\">\r\n <input\r\n type=\"file\"\r\n [attr.id]=\"'cide-file-input-' + id\"\r\n [attr.accept]=\"accept\"\r\n [attr.multiple]=\"multiple ? true : null\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n class=\"cide-file-input-element\"\r\n />\r\n <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n Clear\r\n </button>\r\n </div>\r\n <div *ngIf=\"fileNames.length\" class=\"cide-file-input-files\">\r\n <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n </div>\r\n <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}\n"] }]
|
|
1508
|
+
], template: "<div class=\"cide-file-input\">\r\n <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n \r\n <!-- Preview Box Mode -->\r\n <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\r\n <!-- Hidden file input -->\r\n <input\r\n type=\"file\"\r\n [attr.id]=\"'cide-file-input-' + id\"\r\n [attr.accept]=\"accept\"\r\n [attr.multiple]=\"multiple ? true : null\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n class=\"cide-file-input-hidden\"\r\n />\r\n \r\n <!-- Preview Box -->\r\n <div \r\n class=\"cide-file-input-preview-box\"\r\n [class.cide-file-input-preview-box-disabled]=\"disabled\"\r\n [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\r\n [style.width]=\"previewWidth\"\r\n [style.height]=\"previewHeight\"\r\n (click)=\"triggerFileSelect()\"\r\n [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\r\n \r\n <!-- No Image State -->\r\n <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\r\n <div class=\"cide-file-input-preview-box-icon\">{{ placeholderIcon }}</div>\r\n <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\r\n </div>\r\n \r\n <!-- Image Preview State -->\r\n <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\r\n <img \r\n [src]=\"previewUrls[0]\" \r\n [alt]=\"fileNames[0] || 'Preview image'\"\r\n class=\"cide-file-input-preview-box-image\">\r\n <div class=\"cide-file-input-preview-box-overlay\">\r\n <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\r\n </div>\r\n <button \r\n *ngIf=\"!disabled\"\r\n type=\"button\" \r\n class=\"cide-file-input-preview-box-remove\"\r\n (click)=\"clearFiles(); $event.stopPropagation()\"\r\n title=\"Remove image\">\r\n \u00D7\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <!-- File name display for preview box mode -->\r\n <div *ngIf=\"hasImages() && fileNames.length\" class=\"cide-file-input-preview-box-filename\">\r\n {{ fileNames[0] }}\r\n </div>\r\n </div>\r\n\r\n <!-- Standard Mode -->\r\n <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\r\n <input\r\n type=\"file\"\r\n [attr.id]=\"'cide-file-input-' + id\"\r\n [attr.accept]=\"accept\"\r\n [attr.multiple]=\"multiple ? true : null\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n class=\"cide-file-input-element\"\r\n />\r\n <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n Clear\r\n </button>\r\n </div>\r\n <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\r\n <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n </div>\r\n \r\n <!-- Image Preview Section (only for standard mode) -->\r\n <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\r\n <div class=\"cide-file-input-preview-label\">Preview:</div>\r\n <div class=\"cide-file-input-preview-container\">\r\n <div \r\n *ngFor=\"let previewUrl of previewUrls; let i = index\" \r\n class=\"cide-file-input-preview-item\"\r\n [style.width]=\"previewWidth\"\r\n [style.height]=\"previewHeight\">\r\n <button \r\n type=\"button\" \r\n class=\"cide-file-input-preview-remove\"\r\n (click)=\"removePreview(i)\"\r\n title=\"Remove image\">\r\n \u00D7\r\n </button>\r\n <img \r\n [src]=\"previewUrl\" \r\n [alt]=\"fileNames[i] || 'Preview image'\"\r\n class=\"cide-file-input-preview-image\"\r\n loading=\"lazy\">\r\n <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
|
|
1430
1509
|
}], propDecorators: { label: [{
|
|
1431
1510
|
type: Input
|
|
1432
1511
|
}], accept: [{
|
|
@@ -1439,6 +1518,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1439
1518
|
type: Input
|
|
1440
1519
|
}], errorText: [{
|
|
1441
1520
|
type: Input
|
|
1521
|
+
}], showPreview: [{
|
|
1522
|
+
type: Input
|
|
1523
|
+
}], previewWidth: [{
|
|
1524
|
+
type: Input
|
|
1525
|
+
}], previewHeight: [{
|
|
1526
|
+
type: Input
|
|
1527
|
+
}], previewBoxMode: [{
|
|
1528
|
+
type: Input
|
|
1529
|
+
}], placeholderText: [{
|
|
1530
|
+
type: Input
|
|
1531
|
+
}], placeholderIcon: [{
|
|
1532
|
+
type: Input
|
|
1442
1533
|
}], fileChange: [{
|
|
1443
1534
|
type: Output
|
|
1444
1535
|
}] } });
|