cloud-ide-element 1.0.121 → 1.1.1
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/cloud-ide-element.mjs +316 -282
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +15 -8
- package/package.json +1 -1
|
@@ -595,7 +595,8 @@ class CideInputComponent {
|
|
|
595
595
|
validate(control) {
|
|
596
596
|
const validation_error = this.isControlValid(this.ngModel);
|
|
597
597
|
if (validation_error?.status) {
|
|
598
|
-
|
|
598
|
+
// Return the validation object directly, not wrapped in ValidationStatus
|
|
599
|
+
return validation_error.validation;
|
|
599
600
|
}
|
|
600
601
|
else {
|
|
601
602
|
return null;
|
|
@@ -1208,7 +1209,7 @@ class CideInputComponent {
|
|
|
1208
1209
|
useExisting: forwardRef(() => CideInputComponent),
|
|
1209
1210
|
},
|
|
1210
1211
|
CapitalizePipe
|
|
1211
|
-
], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'url') {\r\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n 'cide-element-size-xxs': (size === '2xs'),\r\n 'cide-element-size-xs': (size === 'xs'),\r\n 'cide-element-size-sm': (size === 'sm'),\r\n 'cide-element-size-md': (size === 'md'),\r\n 'cide-element-size-lg': (size === 'lg'),\r\n 'cide-element-leading-icon': leadingIcon,\r\n 'cide-element-trailing-icon': trailingIconInternal,\r\n 'cide-element-clear-input': clearInput,\r\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n 'cide-element-input-label-start': (labelDir === 'start'),\r\n 'cide-element-input-label-end': (labelDir === 'end'),\r\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n 'cide-element-input-label-less': (!label || labelHide),\r\n 'cide-element-style-outline': (fill === 'outline'),\r\n 'cide-element-style-solid': (fill === 'solid'),\r\n 'cide-element-style-standard': (fill === 'standard'),\r\n 'cide-element-input-number': (type === 'number')\r\n }\">\r\n <!-- label -->\r\n @if (label && !labelHide) {\r\n <label [for]=\"id\" class=\"cide-input-label\">{{label}}</label>\r\n }\r\n\r\n <!-- all one line elemets which dose not affect with label and error text -->\r\n <div class=\"cide-element-input-wrapper\">\r\n <!-- Leading Icon -->\r\n @if (leadingIcon) {\r\n <span class=\"cide-input-leading-icon-wrapper\">\r\n <span\r\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Trailing icon -->\r\n @if (trailingIconInternal) {\r\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Clear -->\r\n @if (clearInput && ngModel) {\r\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n </button>\r\n }\r\n\r\n <!-- Date Input Wrapper -->\r\n @if (type === 'date') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Date Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty date -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Date picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Regular Input (non-date, non-url) -->\r\n @if (type !== 'date' && type !== 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n\r\n <!-- URL Input -->\r\n @if (type === 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n </div>\r\n <!-- error text / helper text -->\r\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n <span class=\"cide-input-help-error-text\">{{\r\n isValid\r\n ? helperText : (errorText ?\r\n (isTouched ? errorText : helperText)\r\n : helperText)}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Input with tralling icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!-- Input with leading icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!------------------------------------------CHECKBOX------------------------------------------>\r\n @if (type === 'checkbox') {\r\n <div class=\"tw-flex\">\r\n <div class=\"cide-checkbox tw-relative\">\r\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n [autocomplete]=\"autocomplete\" />\r\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n </svg>\r\n </span>\r\n @if (!labelHide) {\r\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n }\r\n </label>\r\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n <!-- Element hidden and its xpath is used to display inside SVG -->\r\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </symbol>\r\n </svg>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-------------------------------------------SELECT------------------------------------------->\r\n @if (type === 'select') {\r\n <div>sas\r\n <div class=\"tw-relative\">\r\n <div class=\"tw-absolute\">\r\n @for (item of option; track $index) {\r\n <div class=\"tw-w-full\">\r\n {{item}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- Date Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"selectDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Date Picker Footer -->\r\n <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Done\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1212
|
+
], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'url') {\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-leading-icon': leadingIcon,\n 'cide-element-trailing-icon': trailingIconInternal,\n 'cide-element-clear-input': clearInput,\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n 'cide-element-input-number': (type === 'number')\n }\">\n <!-- label -->\n @if (label && !labelHide) {\n <label [for]=\"id\" class=\"cide-input-label\">\n {{label}}\n @if (required) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <!-- all one line elemets which dose not affect with label and error text -->\n <div class=\"cide-element-input-wrapper\">\n <!-- Leading Icon -->\n @if (leadingIcon) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n </span>\n }\n\n <!-- Trailing icon -->\n @if (trailingIconInternal) {\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n </span>\n }\n\n <!-- Clear -->\n @if (clearInput && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n <!-- Date Input Wrapper -->\n @if (type === 'date') {\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n <!-- Date Input (read-only to prevent manual input) -->\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n [autocomplete]=\"autocomplete\"\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n \n <!-- Placeholder overlay for empty date -->\n @if (!ngModel && placeholder) {\n <div class=\"cide-input-date-overlay\">\n {{placeholder}}\n </div>\n }\n\n <!-- Date picker is now rendered as a portal appended to body -->\n </div>\n }\n\n <!-- Regular Input (non-date, non-url) -->\n @if (type !== 'date' && type !== 'url') {\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n }\n\n <!-- URL Input -->\n @if (type === 'url') {\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n [autocomplete]=\"autocomplete\"\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n }\n </div>\n <!-- error text / helper text -->\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\n <span class=\"cide-input-help-error-text\">{{\n isValid\n ? helperText : (errorText ?\n (isTouched ? errorText : helperText)\n : helperText)}}\n </span>\n }\n </div>\n }\n\n <!-- Input with tralling icon -->\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n <div class=\"tw-w-fullh-full tw-relative\">\n <label\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n </span>\n <input\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n value=\"Ankush Bhure\" />\n </div>\n </div> -->\n\n <!-- Input with leading icon -->\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n <div class=\"tw-w-fullh-full tw-relative\">\n <label\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n </span>\n <input\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n value=\"Ankush Bhure\" />\n </div>\n </div> -->\n\n <!------------------------------------------CHECKBOX------------------------------------------>\n @if (type === 'checkbox') {\n <div class=\"tw-flex\">\n <div class=\"cide-checkbox tw-relative\">\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\n [autocomplete]=\"autocomplete\" />\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\n </svg>\n </span>\n @if (!labelHide) {\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\n }\n </label>\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\n <!-- Element hidden and its xpath is used to display inside SVG -->\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </symbol>\n </svg>\n </div>\n </div>\n }\n\n <!-------------------------------------------SELECT------------------------------------------->\n @if (type === 'select') {\n <div>sas\n <div class=\"tw-relative\">\n <div class=\"tw-absolute\">\n @for (item of option; track $index) {\n <div class=\"tw-w-full\">\n {{item}}\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n<!-- Date Picker Template -->\n<ng-template #datePickerTemplate>\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n <!-- Date Picker Header -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"previousMonth()\">\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n </button>\n \n <button \n type=\"button\" \n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n (click)=\"toggleMonthYearSelector()\">\n {{ monthNames[currentMonth] }} {{ currentYear }}\n </button>\n \n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"nextMonth()\">\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n </button>\n </div>\n\n <!-- Month/Year Selector -->\n @if (showMonthYearSelector) {\n <div class=\"tw-mb-4\">\n <!-- Year Navigation -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"previousYear()\">\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n </button>\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"nextYear()\">\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n </button>\n </div>\n \n <!-- Month Grid -->\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n @for (monthName of shortMonthNames; track $index) {\n <button \n type=\"button\"\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\n [class.tw-text-white]=\"$index === currentMonth\"\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n (click)=\"selectMonth($index)\">\n {{ monthName }}\n </button>\n }\n </div>\n \n <!-- Back to Calendar Button -->\n <div class=\"tw-text-center\">\n <button \n type=\"button\" \n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n (click)=\"toggleMonthYearSelector()\">\n Back to Calendar\n </button>\n </div>\n </div>\n } @else {\n <!-- Calendar View -->\n <div>\n <!-- Days of Week Header -->\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\n {{ dayName }}\n </div>\n }\n </div>\n\n <!-- Calendar Days -->\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n <button \n type=\"button\"\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\n [class.tw-text-white]=\"dayInfo.isSelected\"\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n (click)=\"selectDate(dayInfo)\">\n {{ dayInfo.day }}\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Date Picker Footer -->\n <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\n <button \n type=\"button\" \n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\n (click)=\"closeDatePicker()\">\n Cancel\n </button>\n <button \n type=\"button\" \n class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\n (click)=\"closeDatePicker()\">\n Done\n </button>\n </div>\n </div>\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1212
1213
|
// directives
|
|
1213
1214
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type:
|
|
1214
1215
|
// for ngModel
|
|
@@ -1234,7 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1234
1235
|
useExisting: forwardRef(() => CideInputComponent),
|
|
1235
1236
|
},
|
|
1236
1237
|
CapitalizePipe
|
|
1237
|
-
], template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'url') {\r\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n 'cide-element-size-xxs': (size === '2xs'),\r\n 'cide-element-size-xs': (size === 'xs'),\r\n 'cide-element-size-sm': (size === 'sm'),\r\n 'cide-element-size-md': (size === 'md'),\r\n 'cide-element-size-lg': (size === 'lg'),\r\n 'cide-element-leading-icon': leadingIcon,\r\n 'cide-element-trailing-icon': trailingIconInternal,\r\n 'cide-element-clear-input': clearInput,\r\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n 'cide-element-input-label-start': (labelDir === 'start'),\r\n 'cide-element-input-label-end': (labelDir === 'end'),\r\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n 'cide-element-input-label-less': (!label || labelHide),\r\n 'cide-element-style-outline': (fill === 'outline'),\r\n 'cide-element-style-solid': (fill === 'solid'),\r\n 'cide-element-style-standard': (fill === 'standard'),\r\n 'cide-element-input-number': (type === 'number')\r\n }\">\r\n <!-- label -->\r\n @if (label && !labelHide) {\r\n <label [for]=\"id\" class=\"cide-input-label\">{{label}}</label>\r\n }\r\n\r\n <!-- all one line elemets which dose not affect with label and error text -->\r\n <div class=\"cide-element-input-wrapper\">\r\n <!-- Leading Icon -->\r\n @if (leadingIcon) {\r\n <span class=\"cide-input-leading-icon-wrapper\">\r\n <span\r\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Trailing icon -->\r\n @if (trailingIconInternal) {\r\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Clear -->\r\n @if (clearInput && ngModel) {\r\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n </button>\r\n }\r\n\r\n <!-- Date Input Wrapper -->\r\n @if (type === 'date') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Date Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty date -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Date picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Regular Input (non-date, non-url) -->\r\n @if (type !== 'date' && type !== 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n\r\n <!-- URL Input -->\r\n @if (type === 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n </div>\r\n <!-- error text / helper text -->\r\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n <span class=\"cide-input-help-error-text\">{{\r\n isValid\r\n ? helperText : (errorText ?\r\n (isTouched ? errorText : helperText)\r\n : helperText)}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Input with tralling icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!-- Input with leading icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!------------------------------------------CHECKBOX------------------------------------------>\r\n @if (type === 'checkbox') {\r\n <div class=\"tw-flex\">\r\n <div class=\"cide-checkbox tw-relative\">\r\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n [autocomplete]=\"autocomplete\" />\r\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n </svg>\r\n </span>\r\n @if (!labelHide) {\r\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n }\r\n </label>\r\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n <!-- Element hidden and its xpath is used to display inside SVG -->\r\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </symbol>\r\n </svg>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-------------------------------------------SELECT------------------------------------------->\r\n @if (type === 'select') {\r\n <div>sas\r\n <div class=\"tw-relative\">\r\n <div class=\"tw-absolute\">\r\n @for (item of option; track $index) {\r\n <div class=\"tw-w-full\">\r\n {{item}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- Date Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"selectDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Date Picker Footer -->\r\n <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Done\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
|
|
1238
|
+
], template: "<div class=\"cide-input\">\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'url') {\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-leading-icon': leadingIcon,\n 'cide-element-trailing-icon': trailingIconInternal,\n 'cide-element-clear-input': clearInput,\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n 'cide-element-input-number': (type === 'number')\n }\">\n <!-- label -->\n @if (label && !labelHide) {\n <label [for]=\"id\" class=\"cide-input-label\">\n {{label}}\n @if (required) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <!-- all one line elemets which dose not affect with label and error text -->\n <div class=\"cide-element-input-wrapper\">\n <!-- Leading Icon -->\n @if (leadingIcon) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n </span>\n }\n\n <!-- Trailing icon -->\n @if (trailingIconInternal) {\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n </span>\n }\n\n <!-- Clear -->\n @if (clearInput && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n <!-- Date Input Wrapper -->\n @if (type === 'date') {\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n <!-- Date Input (read-only to prevent manual input) -->\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n [autocomplete]=\"autocomplete\"\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n \n <!-- Placeholder overlay for empty date -->\n @if (!ngModel && placeholder) {\n <div class=\"cide-input-date-overlay\">\n {{placeholder}}\n </div>\n }\n\n <!-- Date picker is now rendered as a portal appended to body -->\n </div>\n }\n\n <!-- Regular Input (non-date, non-url) -->\n @if (type !== 'date' && type !== 'url') {\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n }\n\n <!-- URL Input -->\n @if (type === 'url') {\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n [autocomplete]=\"autocomplete\"\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n }\n </div>\n <!-- error text / helper text -->\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\n <span class=\"cide-input-help-error-text\">{{\n isValid\n ? helperText : (errorText ?\n (isTouched ? errorText : helperText)\n : helperText)}}\n </span>\n }\n </div>\n }\n\n <!-- Input with tralling icon -->\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n <div class=\"tw-w-fullh-full tw-relative\">\n <label\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n </span>\n <input\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n value=\"Ankush Bhure\" />\n </div>\n </div> -->\n\n <!-- Input with leading icon -->\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n <div class=\"tw-w-fullh-full tw-relative\">\n <label\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n </span>\n <input\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n value=\"Ankush Bhure\" />\n </div>\n </div> -->\n\n <!------------------------------------------CHECKBOX------------------------------------------>\n @if (type === 'checkbox') {\n <div class=\"tw-flex\">\n <div class=\"cide-checkbox tw-relative\">\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\n [autocomplete]=\"autocomplete\" />\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\n </svg>\n </span>\n @if (!labelHide) {\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\n }\n </label>\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\n <!-- Element hidden and its xpath is used to display inside SVG -->\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </symbol>\n </svg>\n </div>\n </div>\n }\n\n <!-------------------------------------------SELECT------------------------------------------->\n @if (type === 'select') {\n <div>sas\n <div class=\"tw-relative\">\n <div class=\"tw-absolute\">\n @for (item of option; track $index) {\n <div class=\"tw-w-full\">\n {{item}}\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n<!-- Date Picker Template -->\n<ng-template #datePickerTemplate>\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n <!-- Date Picker Header -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"previousMonth()\">\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n </button>\n \n <button \n type=\"button\" \n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n (click)=\"toggleMonthYearSelector()\">\n {{ monthNames[currentMonth] }} {{ currentYear }}\n </button>\n \n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"nextMonth()\">\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n </button>\n </div>\n\n <!-- Month/Year Selector -->\n @if (showMonthYearSelector) {\n <div class=\"tw-mb-4\">\n <!-- Year Navigation -->\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"previousYear()\">\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n </button>\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n <button \n type=\"button\" \n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n (click)=\"nextYear()\">\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n </button>\n </div>\n \n <!-- Month Grid -->\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n @for (monthName of shortMonthNames; track $index) {\n <button \n type=\"button\"\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\n [class.tw-text-white]=\"$index === currentMonth\"\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n (click)=\"selectMonth($index)\">\n {{ monthName }}\n </button>\n }\n </div>\n \n <!-- Back to Calendar Button -->\n <div class=\"tw-text-center\">\n <button \n type=\"button\" \n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n (click)=\"toggleMonthYearSelector()\">\n Back to Calendar\n </button>\n </div>\n </div>\n } @else {\n <!-- Calendar View -->\n <div>\n <!-- Days of Week Header -->\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\n {{ dayName }}\n </div>\n }\n </div>\n\n <!-- Calendar Days -->\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n <button \n type=\"button\"\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\n [class.tw-text-white]=\"dayInfo.isSelected\"\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n (click)=\"selectDate(dayInfo)\">\n {{ dayInfo.day }}\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Date Picker Footer -->\n <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\n <button \n type=\"button\" \n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\n (click)=\"closeDatePicker()\">\n Cancel\n </button>\n <button \n type=\"button\" \n class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\n (click)=\"closeDatePicker()\">\n Done\n </button>\n </div>\n </div>\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
|
|
1238
1239
|
}], ctorParameters: () => [], propDecorators: { fill: [{
|
|
1239
1240
|
type: Input
|
|
1240
1241
|
}], label: [{
|
|
@@ -1482,12 +1483,12 @@ class CideEleButtonComponent {
|
|
|
1482
1483
|
}
|
|
1483
1484
|
}
|
|
1484
1485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleButtonComponent, deps: [{ token: CideElementsService }, { token: i2$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton]", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-
|
|
1486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton]", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "<!-- Button content container -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container tw-mr-2\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n \r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner\r\n class=\"tw-inline-block tw-my-1 tw-mr-2\" \r\n size=\"xs\"\r\n [ngClass]=\"{'cide-pill-disabled': (disabled || loading)}\">\r\n </cide-ele-spinner>\r\n }\r\n \r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n \r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container tw-ml-2\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n \r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-w-6 tw-p-1 tw-mr-2\"></span>\r\n }\r\n</div>\r\n", styles: [":host{position:relative;background-color:var(--cide-theme-color-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-theme-color-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.75rem;padding:.2rem .4rem}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-theme-secondary-color, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-theme-secondary-color-hover, #374151)}:host.success{background-color:var(--cide-theme-success-color, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-theme-success-color-hover, #059669)}:host.danger{background-color:var(--cide-theme-danger-color, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-theme-danger-color-hover, #dc2626)}:host.warning{background-color:var(--cide-theme-warning-color, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-theme-warning-color-hover, #d97706)}:host.info{background-color:var(--cide-theme-info-color, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-theme-info-color-hover, #2563eb)}:host.outline{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:1px solid var(--cide-theme-color-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-theme-secondary-color, #4b5563);border-color:var(--cide-theme-secondary-color, #4b5563)}:host.outline.success{color:var(--cide-theme-success-color, #10b981);border-color:var(--cide-theme-success-color, #10b981)}:host.outline.danger{color:var(--cide-theme-danger-color, #ef4444);border-color:var(--cide-theme-danger-color, #ef4444)}:host.outline.warning{color:var(--cide-theme-warning-color, #f59e0b);border-color:var(--cide-theme-warning-color, #f59e0b)}:host.outline.info{color:var(--cide-theme-info-color, #3b82f6);border-color:var(--cide-theme-info-color, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.text.success{color:var(--cide-theme-success-color, #10b981)}:host.text.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.text.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.text.info{color:var(--cide-theme-info-color, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-theme-color-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.link.success{color:var(--cide-theme-success-color, #10b981)}:host.link.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.link.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.link.info{color:var(--cide-theme-info-color, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
|
|
1486
1487
|
}
|
|
1487
1488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleButtonComponent, decorators: [{
|
|
1488
1489
|
type: Component,
|
|
1489
1490
|
args: [{ selector: 'button[cideEleButton], a[cideEleButton]', standalone: true, imports: [CommonModule, CideSpinnerComponent], host: {
|
|
1490
|
-
'class': 'cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-
|
|
1491
|
+
'class': 'cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center',
|
|
1491
1492
|
'[class.cide-button-disabled]': 'disabled || loading',
|
|
1492
1493
|
'[attr.disabled]': '(disabled || loading) ? true : null',
|
|
1493
1494
|
'[class.primary]': 'variant === "primary"',
|
|
@@ -1669,6 +1670,7 @@ class CideSelectComponent {
|
|
|
1669
1670
|
dropdownContainer;
|
|
1670
1671
|
dropdownPosition = 'bottom';
|
|
1671
1672
|
isDropdownInteraction = false;
|
|
1673
|
+
dropdownWidthConstraints = { minWidth: 200, maxWidth: 400 };
|
|
1672
1674
|
// Debug tracking properties
|
|
1673
1675
|
debugId = Math.random().toString(36).substr(2, 9);
|
|
1674
1676
|
timeoutIds = [];
|
|
@@ -1878,7 +1880,8 @@ class CideSelectComponent {
|
|
|
1878
1880
|
offsetX: 0,
|
|
1879
1881
|
offsetY: 5,
|
|
1880
1882
|
maxHeight: 250,
|
|
1881
|
-
minWidth:
|
|
1883
|
+
minWidth: this.dropdownWidthConstraints.minWidth,
|
|
1884
|
+
maxWidth: this.dropdownWidthConstraints.maxWidth,
|
|
1882
1885
|
closeOnClickOutside: true,
|
|
1883
1886
|
closeOnEscape: true
|
|
1884
1887
|
};
|
|
@@ -2121,10 +2124,20 @@ class CideSelectComponent {
|
|
|
2121
2124
|
}
|
|
2122
2125
|
const rect = element.getBoundingClientRect();
|
|
2123
2126
|
const viewportHeight = window.innerHeight;
|
|
2127
|
+
const viewportWidth = window.innerWidth;
|
|
2124
2128
|
const dropdownHeight = Math.min(this.options.length * 40 + 100, 250);
|
|
2125
2129
|
const spaceBelow = viewportHeight - rect.bottom;
|
|
2126
2130
|
const spaceAbove = rect.top;
|
|
2127
2131
|
const buffer = 30;
|
|
2132
|
+
// Calculate dropdown width constraints
|
|
2133
|
+
const triggerWidth = rect.width;
|
|
2134
|
+
const maxDropdownWidth = Math.min(triggerWidth * 2, viewportWidth * 0.8); // Max 2x trigger width or 80% of viewport
|
|
2135
|
+
const minDropdownWidth = Math.max(triggerWidth, 200); // At least trigger width or 200px
|
|
2136
|
+
// Store width constraints for portal creation
|
|
2137
|
+
this.dropdownWidthConstraints = {
|
|
2138
|
+
minWidth: minDropdownWidth,
|
|
2139
|
+
maxWidth: maxDropdownWidth
|
|
2140
|
+
};
|
|
2128
2141
|
if (spaceBelow < (dropdownHeight + buffer) && spaceAbove > dropdownHeight) {
|
|
2129
2142
|
this.dropdownPosition = 'top';
|
|
2130
2143
|
}
|
|
@@ -2414,7 +2427,7 @@ class CideSelectComponent {
|
|
|
2414
2427
|
multi: true,
|
|
2415
2428
|
useExisting: forwardRef(() => CideSelectComponent),
|
|
2416
2429
|
}
|
|
2417
|
-
], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n}\">\n @if (label && !labelHide) {\n <label [for]=\"id\" class=\"cide-select-label\"
|
|
2430
|
+
], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n}\">\n @if (label && !labelHide) {\n <label [for]=\"id\" class=\"cide-select-label\">\n {{ label }}\n @if (required) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <div class=\"cide-element-select-wrapper tw-relative\">\n <!-- Leading Icon -->\n @if (leadingIcon) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n </span>\n }\n\n <!-- Select Button -->\n <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIcon || clearInput || loading,\n 'tw-pr-1': !trailingIcon && !clearInput && !loading,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled,\n 'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n }\" class=\"cide-select-button\">\n\n <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n </span>\n </button>\n\n <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n @if (!clearInput || !ngModel || loading) {\n <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n <!-- Loading Spinner -->\n @if (loading) {\n <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n </span>\n }\n <!-- Dropdown Arrow -->\n @if (!loading) {\n <span\n class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n [ngClass]=\"{'tw-rotate-180': isOpen}\">\n expand_more\n </span>\n }\n </span>\n }\n\n <!-- Clear Button -->\n @if (clearInput && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n\n </div>\n\n <!-- Error/Helper Text -->\n @if ((errorText || helperText) && !isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ errorText || helperText }}\n </span>\n }\n @if (helperText && isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ helperText }}\n </span>\n }\n\n <!-- Portal Container -->\n <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n <div\n class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n <!-- Search Input (if searchable and showSearchInput is true) -->\n @if (context?.searchable && showSearchInput) {\n <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n </div>\n }\n\n <!-- Options List -->\n <div class=\"tw-py-1\">\n <!-- Loading State -->\n @if (context?.loading) {\n <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n </div>\n </div>\n }\n <!-- Options -->\n @if (!context?.loading) {\n @for (option of context?.options; track $index) {\n <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n [disabled]=\"option.disabled\" [ngClass]=\"{\n 'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n 'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n 'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n }\" class=\"cide-select-option\">\n {{ context?.getOptionLabel(option) }}\n </button>\n }\n }\n\n <!-- No options message -->\n @if (!context?.loading && context?.options.length === 0) {\n <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n </div>\n }\n </div>\n </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2418
2431
|
}
|
|
2419
2432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, decorators: [{
|
|
2420
2433
|
type: Component,
|
|
@@ -2429,7 +2442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
2429
2442
|
multi: true,
|
|
2430
2443
|
useExisting: forwardRef(() => CideSelectComponent),
|
|
2431
2444
|
}
|
|
2432
|
-
], template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n}\">\n @if (label && !labelHide) {\n <label [for]=\"id\" class=\"cide-select-label\"
|
|
2445
|
+
], template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n}\">\n @if (label && !labelHide) {\n <label [for]=\"id\" class=\"cide-select-label\">\n {{ label }}\n @if (required) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <div class=\"cide-element-select-wrapper tw-relative\">\n <!-- Leading Icon -->\n @if (leadingIcon) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n </span>\n }\n\n <!-- Select Button -->\n <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIcon || clearInput || loading,\n 'tw-pr-1': !trailingIcon && !clearInput && !loading,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n 'tw-h-7': size === 'sm',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled,\n 'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n }\" class=\"cide-select-button\">\n\n <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n </span>\n </button>\n\n <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n @if (!clearInput || !ngModel || loading) {\n <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n <!-- Loading Spinner -->\n @if (loading) {\n <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n </span>\n }\n <!-- Dropdown Arrow -->\n @if (!loading) {\n <span\n class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n [ngClass]=\"{'tw-rotate-180': isOpen}\">\n expand_more\n </span>\n }\n </span>\n }\n\n <!-- Clear Button -->\n @if (clearInput && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n\n </div>\n\n <!-- Error/Helper Text -->\n @if ((errorText || helperText) && !isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ errorText || helperText }}\n </span>\n }\n @if (helperText && isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ helperText }}\n </span>\n }\n\n <!-- Portal Container -->\n <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n <div\n class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n <!-- Search Input (if searchable and showSearchInput is true) -->\n @if (context?.searchable && showSearchInput) {\n <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n </div>\n }\n\n <!-- Options List -->\n <div class=\"tw-py-1\">\n <!-- Loading State -->\n @if (context?.loading) {\n <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n </div>\n </div>\n }\n <!-- Options -->\n @if (!context?.loading) {\n @for (option of context?.options; track $index) {\n <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n [disabled]=\"option.disabled\" [ngClass]=\"{\n 'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n 'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n 'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n }\" class=\"cide-select-option\">\n {{ context?.getOptionLabel(option) }}\n </button>\n }\n }\n\n <!-- No options message -->\n @if (!context?.loading && context?.options.length === 0) {\n <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n </div>\n }\n </div>\n </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
|
|
2433
2446
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { optionComponents: [{
|
|
2434
2447
|
type: ContentChildren,
|
|
2435
2448
|
args: [CideSelectOptionComponent]
|
|
@@ -3385,7 +3398,7 @@ class CideEleFloatingContainerService {
|
|
|
3385
3398
|
activeComponents = new Map();
|
|
3386
3399
|
constructor(injector) {
|
|
3387
3400
|
this.injector = injector;
|
|
3388
|
-
// Keyboard shortcuts are
|
|
3401
|
+
// Keyboard shortcuts are registered by FloatingContainerShortcutsService independently
|
|
3389
3402
|
}
|
|
3390
3403
|
// Computed properties
|
|
3391
3404
|
visibleContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isVisible), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
|
|
@@ -3449,10 +3462,23 @@ class CideEleFloatingContainerService {
|
|
|
3449
3462
|
bringToFront(containerId) {
|
|
3450
3463
|
const maxZIndex = this.getMaxZIndex();
|
|
3451
3464
|
const newZIndex = maxZIndex + 1;
|
|
3465
|
+
const baseZIndex = 1000;
|
|
3452
3466
|
console.log(`🎯 [FloatingContainer] Bringing container '${containerId}' to front`);
|
|
3453
3467
|
console.log(`🎯 [FloatingContainer] Current max z-index: ${maxZIndex}, new z-index: ${newZIndex}`);
|
|
3454
3468
|
this.containers.update(containers => {
|
|
3455
3469
|
const newContainers = new Map(containers);
|
|
3470
|
+
// First, decrement all other visible containers by 1 (clamped to base)
|
|
3471
|
+
for (const [id, c] of newContainers) {
|
|
3472
|
+
if (c.isVisible && id !== containerId) {
|
|
3473
|
+
const decremented = Math.max(baseZIndex, (c.zIndex || baseZIndex) - 1);
|
|
3474
|
+
if (decremented !== c.zIndex) {
|
|
3475
|
+
c.zIndex = decremented;
|
|
3476
|
+
c.lastAccessed = new Date();
|
|
3477
|
+
newContainers.set(id, c);
|
|
3478
|
+
}
|
|
3479
|
+
}
|
|
3480
|
+
}
|
|
3481
|
+
// Then set the focused container to max + 1
|
|
3456
3482
|
const container = newContainers.get(containerId);
|
|
3457
3483
|
if (container) {
|
|
3458
3484
|
const oldZIndex = container.zIndex;
|
|
@@ -3840,7 +3866,7 @@ class CideEleFloatingFileUploaderService {
|
|
|
3840
3866
|
componentConfig: data ? {
|
|
3841
3867
|
inputs: { data },
|
|
3842
3868
|
outputs: {}
|
|
3843
|
-
} :
|
|
3869
|
+
} : { inputs: {}, outputs: {} }
|
|
3844
3870
|
};
|
|
3845
3871
|
const containerId = this.containerService.show(config);
|
|
3846
3872
|
console.log('✅ Container created with ID:', containerId);
|
|
@@ -4988,6 +5014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
4988
5014
|
class CideEleFloatingFileUploaderComponent {
|
|
4989
5015
|
destroyRef = inject(DestroyRef);
|
|
4990
5016
|
fileManagerService = inject(CideEleFileManagerService);
|
|
5017
|
+
fileInputRef;
|
|
4991
5018
|
// Input data from floating container
|
|
4992
5019
|
data = {};
|
|
4993
5020
|
// Signals for reactive state (simplified for floating container)
|
|
@@ -5383,10 +5410,8 @@ class CideEleFloatingFileUploaderComponent {
|
|
|
5383
5410
|
* Trigger file input click
|
|
5384
5411
|
*/
|
|
5385
5412
|
triggerFileInput() {
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
if (fileInput) {
|
|
5389
|
-
fileInput.click();
|
|
5413
|
+
if (this.fileInputRef?.nativeElement) {
|
|
5414
|
+
this.fileInputRef.nativeElement.click();
|
|
5390
5415
|
}
|
|
5391
5416
|
}
|
|
5392
5417
|
/**
|
|
@@ -5419,15 +5444,18 @@ class CideEleFloatingFileUploaderComponent {
|
|
|
5419
5444
|
});
|
|
5420
5445
|
}
|
|
5421
5446
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5422
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-
|
|
5447
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\n <!-- Content starts directly - no header needed since floating container provides it -->\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\n \n <!-- Drag and Drop Zone -->\n <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n [class.tw-border-blue-500]=\"isDragOver()\"\n [class.tw-bg-blue-100]=\"isDragOver()\"\n [class.tw-scale-105]=\"isDragOver()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\" \n (click)=\"triggerFileInput()\">\n \n <!-- Hidden file input -->\n <input #fileInput \n type=\"file\" \n [multiple]=\"data.multiple !== false\" \n [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n (change)=\"onFileInputChange($event)\" \n class=\"tw-hidden\">\n \n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n [class.tw-text-blue-500]=\"isDragOver()\"\n size=\"sm\">cloud_upload</cide-ele-icon>\n \n <div>\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n </div>\n @if (data.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n }\n </div>\n </div>\n </div>\n \n <!-- Upload Queue - Show files from service state -->\n @if (allFilesForGroup().length > 0) {\n <div class=\"tw-space-y-2\">\n <!-- Show all files from service state -->\n @for (file of allFilesForGroup(); track file.fileId) {\n <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\n [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n [class.tw-bg-red-50]=\"file.stage === 'error'\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n <div class=\"tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n <div class=\"tw-text-xs\">\n @switch (file.stage) {\n @case ('pending') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n }\n @case ('reading') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n }\n @case ('uploading') {\n <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n }\n @case ('complete') {\n <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n }\n @case ('error') {\n <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\n }\n }\n </div>\n </div>\n </div>\n\n <!-- Progress Bar (only for uploading files) -->\n @if (file.stage === 'uploading' && file.percentage !== undefined) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n </div>\n <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n </div>\n }\n\n <!-- Actions -->\n <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n @switch (file.stage) {\n @case ('pending') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('reading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('uploading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('complete') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n </button>\n }\n @case ('error') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n title=\"Retry\">\n <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n </button>\n }\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <!-- No uploads message when manually opened -->\n <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n <div>\n <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Status summary - integrated into content -->\n @if (hasActiveUploads()) {\n <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\n <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\n <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n <span>{{ getUploadingCount() }} uploading</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n <span>{{ getCompletedCount() }} completed</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\n <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n <span>{{ getFailedCount() }} failed</span>\n </div>\n </div>\n </div>\n }\n</div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
5423
5448
|
}
|
|
5424
5449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
|
|
5425
5450
|
type: Component,
|
|
5426
5451
|
args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
|
|
5427
5452
|
CommonModule,
|
|
5428
5453
|
CideIconComponent
|
|
5429
|
-
], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-
|
|
5430
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
5454
|
+
], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\n <!-- Content starts directly - no header needed since floating container provides it -->\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\n \n <!-- Drag and Drop Zone -->\n <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n [class.tw-border-blue-500]=\"isDragOver()\"\n [class.tw-bg-blue-100]=\"isDragOver()\"\n [class.tw-scale-105]=\"isDragOver()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\" \n (click)=\"triggerFileInput()\">\n \n <!-- Hidden file input -->\n <input #fileInput \n type=\"file\" \n [multiple]=\"data.multiple !== false\" \n [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n (change)=\"onFileInputChange($event)\" \n class=\"tw-hidden\">\n \n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n [class.tw-text-blue-500]=\"isDragOver()\"\n size=\"sm\">cloud_upload</cide-ele-icon>\n \n <div>\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n </div>\n @if (data.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n }\n </div>\n </div>\n </div>\n \n <!-- Upload Queue - Show files from service state -->\n @if (allFilesForGroup().length > 0) {\n <div class=\"tw-space-y-2\">\n <!-- Show all files from service state -->\n @for (file of allFilesForGroup(); track file.fileId) {\n <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\n [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n [class.tw-bg-red-50]=\"file.stage === 'error'\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n <div class=\"tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n <div class=\"tw-text-xs\">\n @switch (file.stage) {\n @case ('pending') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n }\n @case ('reading') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n }\n @case ('uploading') {\n <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n }\n @case ('complete') {\n <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n }\n @case ('error') {\n <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\n }\n }\n </div>\n </div>\n </div>\n\n <!-- Progress Bar (only for uploading files) -->\n @if (file.stage === 'uploading' && file.percentage !== undefined) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n </div>\n <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n </div>\n }\n\n <!-- Actions -->\n <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n @switch (file.stage) {\n @case ('pending') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('reading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('uploading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('complete') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n </button>\n }\n @case ('error') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n title=\"Retry\">\n <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n </button>\n }\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <!-- No uploads message when manually opened -->\n <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n <div>\n <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Status summary - integrated into content -->\n @if (hasActiveUploads()) {\n <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\n <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\n <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n <span>{{ getUploadingCount() }} uploading</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n <span>{{ getCompletedCount() }} completed</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\n <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n <span>{{ getFailedCount() }} failed</span>\n </div>\n </div>\n </div>\n }\n</div>\n}" }]
|
|
5455
|
+
}], ctorParameters: () => [], propDecorators: { fileInputRef: [{
|
|
5456
|
+
type: ViewChild,
|
|
5457
|
+
args: ['fileInput']
|
|
5458
|
+
}], data: [{
|
|
5431
5459
|
type: Input
|
|
5432
5460
|
}] } });
|
|
5433
5461
|
|
|
@@ -5527,7 +5555,7 @@ class CideTextareaComponent {
|
|
|
5527
5555
|
multi: true,
|
|
5528
5556
|
useExisting: forwardRef(() => CideTextareaComponent),
|
|
5529
5557
|
}
|
|
5530
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-textarea\" [ngClass]=\"{\
|
|
5558
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-textarea\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n}\">\n <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-textarea-label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"tw-text-red-500 tw-ml-1\">*</span>\n </label>\n <div class=\"cide-element-input-wrapper\">\n <!-- Leading Icon -->\n <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n </span>\n <!-- Trailing Icon -->\n <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\n *ngIf=\"trailingIconInternal\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n </span>\n <!-- Clear -->\n <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n <!-- Textarea -->\n <textarea [id]=\"id\" [attr.placeholder]=\"placeholder\" [attr.rows]=\"rows\"\n [attr.minlength]=\"minlength > 0 ? minlength : null\" [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\n [disabled]=\"disabled\" [(ngModel)]=\"ngModel\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n class=\"cide-textarea-input tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-py-[1px] tw-outline-none\"></textarea>\n </div>\n <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-textarea-help-error-text\">{{ errorText || helperText\n }}</span>\n <span *ngIf=\"helperText && isValid\" class=\"cide-textarea-help-error-text\">{{ helperText }}</span>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
|
|
5531
5559
|
}
|
|
5532
5560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideTextareaComponent, decorators: [{
|
|
5533
5561
|
type: Component,
|
|
@@ -5542,7 +5570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5542
5570
|
multi: true,
|
|
5543
5571
|
useExisting: forwardRef(() => CideTextareaComponent),
|
|
5544
5572
|
}
|
|
5545
|
-
], template: "<div class=\"cide-textarea\" [ngClass]=\"{\
|
|
5573
|
+
], template: "<div class=\"cide-textarea\" [ngClass]=\"{\n 'cide-element-size-xxs': (size === '2xs'),\n 'cide-element-size-xs': (size === 'xs'),\n 'cide-element-size-sm': (size === 'sm'),\n 'cide-element-size-md': (size === 'md'),\n 'cide-element-size-lg': (size === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\n 'cide-element-input-label-start': (labelDir === 'start'),\n 'cide-element-input-label-end': (labelDir === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n 'cide-element-input-label-less': (!label || labelHide),\n 'cide-element-style-outline': (fill === 'outline'),\n 'cide-element-style-solid': (fill === 'solid'),\n 'cide-element-style-standard': (fill === 'standard'),\n}\">\n <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-textarea-label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"tw-text-red-500 tw-ml-1\">*</span>\n </label>\n <div class=\"cide-element-input-wrapper\">\n <!-- Leading Icon -->\n <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n </span>\n <!-- Trailing Icon -->\n <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\n *ngIf=\"trailingIconInternal\">\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n </span>\n <!-- Clear -->\n <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n <!-- Textarea -->\n <textarea [id]=\"id\" [attr.placeholder]=\"placeholder\" [attr.rows]=\"rows\"\n [attr.minlength]=\"minlength > 0 ? minlength : null\" [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\n [disabled]=\"disabled\" [(ngModel)]=\"ngModel\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\n [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n 'tw-pl-1': !leadingIcon,\n 'tw-pr-8': trailingIconInternal,\n 'tw-pr-1': !trailingIconInternal,\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n '!tw-mt-0': labelHide,\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\n }\"\n class=\"cide-textarea-input tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-py-[1px] tw-outline-none\"></textarea>\n </div>\n <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-textarea-help-error-text\">{{ errorText || helperText\n }}</span>\n <span *ngIf=\"helperText && isValid\" class=\"cide-textarea-help-error-text\">{{ helperText }}</span>\n</div>" }]
|
|
5546
5574
|
}], propDecorators: { label: [{
|
|
5547
5575
|
type: Input
|
|
5548
5576
|
}], labelHide: [{
|
|
@@ -9878,6 +9906,7 @@ class CideEleFloatingContainerComponent {
|
|
|
9878
9906
|
isMinimized;
|
|
9879
9907
|
isMaximized;
|
|
9880
9908
|
isVisible;
|
|
9909
|
+
zIndex;
|
|
9881
9910
|
closeEvent = new EventEmitter();
|
|
9882
9911
|
minimizeEvent = new EventEmitter();
|
|
9883
9912
|
maximizeEvent = new EventEmitter();
|
|
@@ -10032,10 +10061,10 @@ class CideEleFloatingContainerComponent {
|
|
|
10032
10061
|
return 'linear-gradient(135deg, var(--cide-theme-primary-color) 0%, var(--tw-blue-400) 100%)';
|
|
10033
10062
|
}
|
|
10034
10063
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10035
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
10064
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible", zIndex: "zIndex" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
10036
10065
|
<div
|
|
10037
10066
|
#container
|
|
10038
|
-
class="tw-fixed tw-
|
|
10067
|
+
class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
|
|
10039
10068
|
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
10040
10069
|
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
10041
10070
|
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
@@ -10044,6 +10073,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10044
10073
|
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
10045
10074
|
[style.max-width]="config().maxWidth || '90vw'"
|
|
10046
10075
|
[style.max-height]="config().maxHeight || '90vh'"
|
|
10076
|
+
[style.z-index]="zIndex()"
|
|
10047
10077
|
[class.tw-cursor-move]="isDragging()"
|
|
10048
10078
|
[class.tw-select-none]="true"
|
|
10049
10079
|
(mousedown)="onMouseDown($event)"
|
|
@@ -10080,7 +10110,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10080
10110
|
(click)="minimize(); $event.stopPropagation()"
|
|
10081
10111
|
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
10082
10112
|
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
10083
|
-
<cide-ele-icon class="tw-w-
|
|
10113
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
|
|
10084
10114
|
</button>
|
|
10085
10115
|
}
|
|
10086
10116
|
@if (config().maximizable !== false) {
|
|
@@ -10092,7 +10122,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10092
10122
|
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
10093
10123
|
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
10094
10124
|
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
10095
|
-
<cide-ele-icon class="tw-w-
|
|
10125
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
10096
10126
|
</button>
|
|
10097
10127
|
}
|
|
10098
10128
|
@if (config().closable !== false) {
|
|
@@ -10104,7 +10134,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10104
10134
|
(click)="close(); $event.stopPropagation()"
|
|
10105
10135
|
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
10106
10136
|
title="Close">
|
|
10107
|
-
<cide-ele-icon class="tw-w-
|
|
10137
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
10108
10138
|
</button>
|
|
10109
10139
|
}
|
|
10110
10140
|
</div>
|
|
@@ -10117,7 +10147,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10117
10147
|
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
10118
10148
|
[style.min-height]="'200px'">
|
|
10119
10149
|
@defer (when !isMinimized() && isVisible()) {
|
|
10120
|
-
<div class="tw-p-
|
|
10150
|
+
<div class="tw-p-0 tw-min-h-full">
|
|
10121
10151
|
<ng-content></ng-content>
|
|
10122
10152
|
</div>
|
|
10123
10153
|
} @placeholder {
|
|
@@ -10132,7 +10162,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10132
10162
|
<!-- Resize Handle (if resizable) -->
|
|
10133
10163
|
@if (config().resizable !== false) {
|
|
10134
10164
|
<div
|
|
10135
|
-
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-
|
|
10165
|
+
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
|
|
10136
10166
|
(mousedown)="startResize($event)">
|
|
10137
10167
|
</div>
|
|
10138
10168
|
}
|
|
@@ -10144,7 +10174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10144
10174
|
args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
|
|
10145
10175
|
<div
|
|
10146
10176
|
#container
|
|
10147
|
-
class="tw-fixed tw-
|
|
10177
|
+
class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
|
|
10148
10178
|
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
10149
10179
|
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
10150
10180
|
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
@@ -10153,6 +10183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10153
10183
|
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
10154
10184
|
[style.max-width]="config().maxWidth || '90vw'"
|
|
10155
10185
|
[style.max-height]="config().maxHeight || '90vh'"
|
|
10186
|
+
[style.z-index]="zIndex()"
|
|
10156
10187
|
[class.tw-cursor-move]="isDragging()"
|
|
10157
10188
|
[class.tw-select-none]="true"
|
|
10158
10189
|
(mousedown)="onMouseDown($event)"
|
|
@@ -10189,7 +10220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10189
10220
|
(click)="minimize(); $event.stopPropagation()"
|
|
10190
10221
|
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
10191
10222
|
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
10192
|
-
<cide-ele-icon class="tw-w-
|
|
10223
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
|
|
10193
10224
|
</button>
|
|
10194
10225
|
}
|
|
10195
10226
|
@if (config().maximizable !== false) {
|
|
@@ -10201,7 +10232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10201
10232
|
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
10202
10233
|
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
10203
10234
|
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
10204
|
-
<cide-ele-icon class="tw-w-
|
|
10235
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
10205
10236
|
</button>
|
|
10206
10237
|
}
|
|
10207
10238
|
@if (config().closable !== false) {
|
|
@@ -10213,7 +10244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10213
10244
|
(click)="close(); $event.stopPropagation()"
|
|
10214
10245
|
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
10215
10246
|
title="Close">
|
|
10216
|
-
<cide-ele-icon class="tw-w-
|
|
10247
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
10217
10248
|
</button>
|
|
10218
10249
|
}
|
|
10219
10250
|
</div>
|
|
@@ -10226,7 +10257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10226
10257
|
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
10227
10258
|
[style.min-height]="'200px'">
|
|
10228
10259
|
@defer (when !isMinimized() && isVisible()) {
|
|
10229
|
-
<div class="tw-p-
|
|
10260
|
+
<div class="tw-p-0 tw-min-h-full">
|
|
10230
10261
|
<ng-content></ng-content>
|
|
10231
10262
|
</div>
|
|
10232
10263
|
} @placeholder {
|
|
@@ -10241,7 +10272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10241
10272
|
<!-- Resize Handle (if resizable) -->
|
|
10242
10273
|
@if (config().resizable !== false) {
|
|
10243
10274
|
<div
|
|
10244
|
-
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-
|
|
10275
|
+
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
|
|
10245
10276
|
(mousedown)="startResize($event)">
|
|
10246
10277
|
</div>
|
|
10247
10278
|
}
|
|
@@ -10255,6 +10286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10255
10286
|
type: Input
|
|
10256
10287
|
}], isVisible: [{
|
|
10257
10288
|
type: Input
|
|
10289
|
+
}], zIndex: [{
|
|
10290
|
+
type: Input
|
|
10258
10291
|
}], closeEvent: [{
|
|
10259
10292
|
type: Output
|
|
10260
10293
|
}], minimizeEvent: [{
|
|
@@ -10280,7 +10313,7 @@ class CideEleFloatingContainerManagerComponent {
|
|
|
10280
10313
|
[isMinimized]="containerService.getMinimizedSignal(container.id)"
|
|
10281
10314
|
[isMaximized]="containerService.getMaximizedSignal(container.id)"
|
|
10282
10315
|
[isVisible]="containerService.getVisibleSignal(container.id)"
|
|
10283
|
-
[
|
|
10316
|
+
[zIndex]="containerService.getZIndexSignal(container.id)"
|
|
10284
10317
|
(closeEvent)="containerService.onClose($event)"
|
|
10285
10318
|
(minimizeEvent)="containerService.onMinimize($event)"
|
|
10286
10319
|
(maximizeEvent)="containerService.onMaximize($event)"
|
|
@@ -10316,7 +10349,7 @@ class CideEleFloatingContainerManagerComponent {
|
|
|
10316
10349
|
}
|
|
10317
10350
|
</cide-ele-floating-container>
|
|
10318
10351
|
}
|
|
10319
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
|
|
10352
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible", "zIndex"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
|
|
10320
10353
|
}
|
|
10321
10354
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)], resolveMetadata: CideEleFloatingContainerDynamicDirective => ({ decorators: [{
|
|
10322
10355
|
type: Component,
|
|
@@ -10327,7 +10360,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ng
|
|
|
10327
10360
|
[isMinimized]="containerService.getMinimizedSignal(container.id)"
|
|
10328
10361
|
[isMaximized]="containerService.getMaximizedSignal(container.id)"
|
|
10329
10362
|
[isVisible]="containerService.getVisibleSignal(container.id)"
|
|
10330
|
-
[
|
|
10363
|
+
[zIndex]="containerService.getZIndexSignal(container.id)"
|
|
10331
10364
|
(closeEvent)="containerService.onClose($event)"
|
|
10332
10365
|
(minimizeEvent)="containerService.onMinimize($event)"
|
|
10333
10366
|
(maximizeEvent)="containerService.onMaximize($event)"
|
|
@@ -10366,253 +10399,6 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ng
|
|
|
10366
10399
|
` }]
|
|
10367
10400
|
}], ctorParameters: null, propDecorators: null }) });
|
|
10368
10401
|
|
|
10369
|
-
class CideEleFloatingFeaturesService {
|
|
10370
|
-
containerService = inject(CideEleFloatingContainerService);
|
|
10371
|
-
constructor() {
|
|
10372
|
-
// File uploader is handled by its own dedicated service
|
|
10373
|
-
// Entity rights sharing is handled by its own dedicated service
|
|
10374
|
-
}
|
|
10375
|
-
// Generic method to show any floating feature
|
|
10376
|
-
showFeature(featureId, config) {
|
|
10377
|
-
return this.containerService.show({ ...config, id: featureId });
|
|
10378
|
-
}
|
|
10379
|
-
// Generic method for showing any component dynamically
|
|
10380
|
-
showComponent(containerId, componentId, title, componentType, config = {}) {
|
|
10381
|
-
const containerConfig = {
|
|
10382
|
-
id: containerId,
|
|
10383
|
-
title,
|
|
10384
|
-
icon: 'widgets',
|
|
10385
|
-
width: '400px',
|
|
10386
|
-
height: '500px',
|
|
10387
|
-
minWidth: '300px',
|
|
10388
|
-
minHeight: '200px',
|
|
10389
|
-
resizable: true,
|
|
10390
|
-
draggable: true,
|
|
10391
|
-
closable: true,
|
|
10392
|
-
minimizable: true,
|
|
10393
|
-
maximizable: true,
|
|
10394
|
-
componentId,
|
|
10395
|
-
...config
|
|
10396
|
-
};
|
|
10397
|
-
// Register component if provided
|
|
10398
|
-
if (componentType) {
|
|
10399
|
-
this.registerComponent(componentId, componentType);
|
|
10400
|
-
}
|
|
10401
|
-
return this.containerService.show(containerConfig);
|
|
10402
|
-
}
|
|
10403
|
-
/**
|
|
10404
|
-
* Generic method for showing any component with input data
|
|
10405
|
-
*
|
|
10406
|
-
* @example
|
|
10407
|
-
* // Pass data to a component
|
|
10408
|
-
* this.floatingFeaturesService.showComponentWithData(
|
|
10409
|
-
* 'my-component-container',
|
|
10410
|
-
* 'my-component',
|
|
10411
|
-
* 'My Component Title',
|
|
10412
|
-
* {
|
|
10413
|
-
* data: {
|
|
10414
|
-
* userId: '123',
|
|
10415
|
-
* userName: 'John Doe',
|
|
10416
|
-
* settings: { theme: 'dark' }
|
|
10417
|
-
* },
|
|
10418
|
-
* outputs: {
|
|
10419
|
-
* onSave: (data) => console.log('Save event:', data),
|
|
10420
|
-
* onCancel: () => console.log('Cancel clicked')
|
|
10421
|
-
* }
|
|
10422
|
-
* },
|
|
10423
|
-
* {
|
|
10424
|
-
* width: '600px',
|
|
10425
|
-
* height: '400px',
|
|
10426
|
-
* icon: 'settings'
|
|
10427
|
-
* }
|
|
10428
|
-
* );
|
|
10429
|
-
*/
|
|
10430
|
-
showComponentWithData(containerId, componentId, title, componentData, containerConfig = {}) {
|
|
10431
|
-
const config = {
|
|
10432
|
-
id: containerId,
|
|
10433
|
-
title,
|
|
10434
|
-
icon: 'widgets',
|
|
10435
|
-
width: '400px',
|
|
10436
|
-
height: '500px',
|
|
10437
|
-
minWidth: '300px',
|
|
10438
|
-
minHeight: '200px',
|
|
10439
|
-
resizable: true,
|
|
10440
|
-
draggable: true,
|
|
10441
|
-
closable: true,
|
|
10442
|
-
minimizable: true,
|
|
10443
|
-
maximizable: true,
|
|
10444
|
-
componentId,
|
|
10445
|
-
componentConfig: {
|
|
10446
|
-
inputs: componentData.data,
|
|
10447
|
-
outputs: componentData.outputs || {}
|
|
10448
|
-
},
|
|
10449
|
-
...containerConfig
|
|
10450
|
-
};
|
|
10451
|
-
return this.containerService.show(config);
|
|
10452
|
-
}
|
|
10453
|
-
// Show multiple instances of the same component
|
|
10454
|
-
showMultipleInstances(componentId, titlePrefix, count, config = {}) {
|
|
10455
|
-
const containerIds = [];
|
|
10456
|
-
for (let i = 1; i <= count; i++) {
|
|
10457
|
-
const containerId = `${componentId}-instance-${i}-${Date.now()}`;
|
|
10458
|
-
const title = `${titlePrefix} ${i}`;
|
|
10459
|
-
const containerConfig = {
|
|
10460
|
-
id: containerId,
|
|
10461
|
-
title,
|
|
10462
|
-
icon: 'widgets',
|
|
10463
|
-
width: '400px',
|
|
10464
|
-
height: '500px',
|
|
10465
|
-
minWidth: '300px',
|
|
10466
|
-
minHeight: '200px',
|
|
10467
|
-
resizable: true,
|
|
10468
|
-
draggable: true,
|
|
10469
|
-
closable: true,
|
|
10470
|
-
minimizable: true,
|
|
10471
|
-
maximizable: true,
|
|
10472
|
-
componentId,
|
|
10473
|
-
...config
|
|
10474
|
-
};
|
|
10475
|
-
const id = this.containerService.show(containerConfig);
|
|
10476
|
-
containerIds.push(id);
|
|
10477
|
-
}
|
|
10478
|
-
return containerIds;
|
|
10479
|
-
}
|
|
10480
|
-
// Get all instances of a component type
|
|
10481
|
-
getInstancesOfType(componentType) {
|
|
10482
|
-
return this.containerService.getInstancesByComponentType(componentType);
|
|
10483
|
-
}
|
|
10484
|
-
// Get active instances of a component type
|
|
10485
|
-
getActiveInstancesOfType(componentType) {
|
|
10486
|
-
return this.containerService.getActiveInstancesByComponentType(componentType);
|
|
10487
|
-
}
|
|
10488
|
-
// Close all instances of a component type
|
|
10489
|
-
closeAllInstancesOfType(componentType) {
|
|
10490
|
-
this.containerService.closeAllInstancesOfType(componentType);
|
|
10491
|
-
}
|
|
10492
|
-
// Minimize all instances of a component type
|
|
10493
|
-
minimizeAllInstancesOfType(componentType) {
|
|
10494
|
-
this.containerService.minimizeAllInstancesOfType(componentType);
|
|
10495
|
-
}
|
|
10496
|
-
// Get instance count for a component type
|
|
10497
|
-
getInstanceCount(componentType) {
|
|
10498
|
-
return this.containerService.getInstanceCount(componentType);
|
|
10499
|
-
}
|
|
10500
|
-
// Get active instance count for a component type
|
|
10501
|
-
getActiveInstanceCount(componentType) {
|
|
10502
|
-
return this.containerService.getActiveInstanceCount(componentType);
|
|
10503
|
-
}
|
|
10504
|
-
// Register a component for dynamic loading
|
|
10505
|
-
registerComponent(componentId, componentType) {
|
|
10506
|
-
this.containerService.registerComponent(componentId, componentType);
|
|
10507
|
-
}
|
|
10508
|
-
// Unregister a component
|
|
10509
|
-
unregisterComponent(componentId) {
|
|
10510
|
-
this.containerService.unregisterComponent(componentId);
|
|
10511
|
-
}
|
|
10512
|
-
hideFeature(featureId) {
|
|
10513
|
-
this.containerService.hide(featureId);
|
|
10514
|
-
}
|
|
10515
|
-
// Utility methods
|
|
10516
|
-
bringToFront(featureId) {
|
|
10517
|
-
this.containerService.bringToFront(featureId);
|
|
10518
|
-
}
|
|
10519
|
-
minimize(featureId) {
|
|
10520
|
-
this.containerService.minimize(featureId);
|
|
10521
|
-
}
|
|
10522
|
-
maximize(featureId) {
|
|
10523
|
-
this.containerService.maximize(featureId);
|
|
10524
|
-
}
|
|
10525
|
-
isVisible(featureId) {
|
|
10526
|
-
return this.containerService.isVisible(featureId);
|
|
10527
|
-
}
|
|
10528
|
-
hideAll() {
|
|
10529
|
-
this.containerService.hideAll();
|
|
10530
|
-
}
|
|
10531
|
-
minimizeAll() {
|
|
10532
|
-
this.containerService.minimizeAll();
|
|
10533
|
-
}
|
|
10534
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
10535
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, providedIn: 'root' });
|
|
10536
|
-
}
|
|
10537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, decorators: [{
|
|
10538
|
-
type: Injectable,
|
|
10539
|
-
args: [{
|
|
10540
|
-
providedIn: 'root'
|
|
10541
|
-
}]
|
|
10542
|
-
}], ctorParameters: () => [] });
|
|
10543
|
-
|
|
10544
|
-
class CideEleFloatingContainerDynamicDirective {
|
|
10545
|
-
viewContainer;
|
|
10546
|
-
containerService;
|
|
10547
|
-
componentId;
|
|
10548
|
-
componentConfig;
|
|
10549
|
-
isVisible = true;
|
|
10550
|
-
componentRef = null;
|
|
10551
|
-
constructor(viewContainer, containerService) {
|
|
10552
|
-
this.viewContainer = viewContainer;
|
|
10553
|
-
this.containerService = containerService;
|
|
10554
|
-
}
|
|
10555
|
-
ngOnInit() {
|
|
10556
|
-
if (this.isVisible && this.componentId) {
|
|
10557
|
-
this.loadComponent();
|
|
10558
|
-
}
|
|
10559
|
-
}
|
|
10560
|
-
ngOnDestroy() {
|
|
10561
|
-
this.destroyComponent();
|
|
10562
|
-
}
|
|
10563
|
-
ngOnChanges() {
|
|
10564
|
-
if (this.isVisible && this.componentId && !this.componentRef) {
|
|
10565
|
-
this.loadComponent();
|
|
10566
|
-
}
|
|
10567
|
-
else if (!this.isVisible && this.componentRef) {
|
|
10568
|
-
this.destroyComponent();
|
|
10569
|
-
}
|
|
10570
|
-
}
|
|
10571
|
-
loadComponent() {
|
|
10572
|
-
if (this.componentId && this.containerService.isComponentRegistered(this.componentId)) {
|
|
10573
|
-
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10574
|
-
}
|
|
10575
|
-
else {
|
|
10576
|
-
console.warn(`Component '${this.componentId}' is not registered. Available components:`, this.containerService.getRegisteredComponentIds());
|
|
10577
|
-
// Retry after a short delay in case registration is still in progress
|
|
10578
|
-
setTimeout(() => {
|
|
10579
|
-
if (this.containerService.isComponentRegistered(this.componentId)) {
|
|
10580
|
-
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10581
|
-
}
|
|
10582
|
-
else {
|
|
10583
|
-
console.error(`Component '${this.componentId}' still not registered after retry`);
|
|
10584
|
-
}
|
|
10585
|
-
}, 100);
|
|
10586
|
-
}
|
|
10587
|
-
}
|
|
10588
|
-
destroyComponent() {
|
|
10589
|
-
if (this.componentRef) {
|
|
10590
|
-
this.componentRef.destroy();
|
|
10591
|
-
this.componentRef = null;
|
|
10592
|
-
}
|
|
10593
|
-
}
|
|
10594
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, deps: [{ token: i0.ViewContainerRef }, { token: CideEleFloatingContainerService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
10595
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFloatingContainerDynamicDirective, isStandalone: true, selector: "[cideEleFloatingDynamic]", inputs: { componentId: "componentId", componentConfig: "componentConfig", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0 });
|
|
10596
|
-
}
|
|
10597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, decorators: [{
|
|
10598
|
-
type: Directive,
|
|
10599
|
-
args: [{
|
|
10600
|
-
selector: '[cideEleFloatingDynamic]',
|
|
10601
|
-
standalone: true
|
|
10602
|
-
}]
|
|
10603
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: CideEleFloatingContainerService }], propDecorators: { componentId: [{
|
|
10604
|
-
type: Input
|
|
10605
|
-
}], componentConfig: [{
|
|
10606
|
-
type: Input
|
|
10607
|
-
}], isVisible: [{
|
|
10608
|
-
type: Input
|
|
10609
|
-
}] } });
|
|
10610
|
-
|
|
10611
|
-
var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
|
|
10612
|
-
__proto__: null,
|
|
10613
|
-
CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
|
|
10614
|
-
});
|
|
10615
|
-
|
|
10616
10402
|
class FloatingContainerShortcutsService {
|
|
10617
10403
|
keyboardShortcutService = inject(KeyboardShortcutService);
|
|
10618
10404
|
containerService = inject(CideEleFloatingContainerService);
|
|
@@ -10898,6 +10684,254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10898
10684
|
}]
|
|
10899
10685
|
}], ctorParameters: () => [] });
|
|
10900
10686
|
|
|
10687
|
+
class CideEleFloatingFeaturesService {
|
|
10688
|
+
containerService = inject(CideEleFloatingContainerService);
|
|
10689
|
+
shortcutsService = inject(FloatingContainerShortcutsService);
|
|
10690
|
+
constructor() {
|
|
10691
|
+
// File uploader is handled by its own dedicated service
|
|
10692
|
+
// Entity rights sharing is handled by its own dedicated service
|
|
10693
|
+
}
|
|
10694
|
+
// Generic method to show any floating feature
|
|
10695
|
+
showFeature(featureId, config) {
|
|
10696
|
+
return this.containerService.show({ ...config, id: featureId });
|
|
10697
|
+
}
|
|
10698
|
+
// Generic method for showing any component dynamically
|
|
10699
|
+
showComponent(containerId, componentId, title, componentType, config = {}) {
|
|
10700
|
+
const containerConfig = {
|
|
10701
|
+
id: containerId,
|
|
10702
|
+
title,
|
|
10703
|
+
icon: 'widgets',
|
|
10704
|
+
width: '400px',
|
|
10705
|
+
height: '500px',
|
|
10706
|
+
minWidth: '300px',
|
|
10707
|
+
minHeight: '200px',
|
|
10708
|
+
resizable: true,
|
|
10709
|
+
draggable: true,
|
|
10710
|
+
closable: true,
|
|
10711
|
+
minimizable: true,
|
|
10712
|
+
maximizable: true,
|
|
10713
|
+
componentId,
|
|
10714
|
+
...config
|
|
10715
|
+
};
|
|
10716
|
+
// Register component if provided
|
|
10717
|
+
if (componentType) {
|
|
10718
|
+
this.registerComponent(componentId, componentType);
|
|
10719
|
+
}
|
|
10720
|
+
return this.containerService.show(containerConfig);
|
|
10721
|
+
}
|
|
10722
|
+
/**
|
|
10723
|
+
* Generic method for showing any component with input data
|
|
10724
|
+
*
|
|
10725
|
+
* @example
|
|
10726
|
+
* // Pass data to a component
|
|
10727
|
+
* this.floatingFeaturesService.showComponentWithData(
|
|
10728
|
+
* 'my-component-container',
|
|
10729
|
+
* 'my-component',
|
|
10730
|
+
* 'My Component Title',
|
|
10731
|
+
* {
|
|
10732
|
+
* data: {
|
|
10733
|
+
* userId: '123',
|
|
10734
|
+
* userName: 'John Doe',
|
|
10735
|
+
* settings: { theme: 'dark' }
|
|
10736
|
+
* },
|
|
10737
|
+
* outputs: {
|
|
10738
|
+
* onSave: (data) => console.log('Save event:', data),
|
|
10739
|
+
* onCancel: () => console.log('Cancel clicked')
|
|
10740
|
+
* }
|
|
10741
|
+
* },
|
|
10742
|
+
* {
|
|
10743
|
+
* width: '600px',
|
|
10744
|
+
* height: '400px',
|
|
10745
|
+
* icon: 'settings'
|
|
10746
|
+
* }
|
|
10747
|
+
* );
|
|
10748
|
+
*/
|
|
10749
|
+
showComponentWithData(containerId, componentId, title, componentData, containerConfig = {}) {
|
|
10750
|
+
const config = {
|
|
10751
|
+
id: containerId,
|
|
10752
|
+
title,
|
|
10753
|
+
icon: 'widgets',
|
|
10754
|
+
width: '400px',
|
|
10755
|
+
height: '500px',
|
|
10756
|
+
minWidth: '300px',
|
|
10757
|
+
minHeight: '200px',
|
|
10758
|
+
resizable: true,
|
|
10759
|
+
draggable: true,
|
|
10760
|
+
closable: true,
|
|
10761
|
+
minimizable: true,
|
|
10762
|
+
maximizable: true,
|
|
10763
|
+
componentId,
|
|
10764
|
+
componentConfig: {
|
|
10765
|
+
inputs: componentData.data,
|
|
10766
|
+
outputs: componentData.outputs || {}
|
|
10767
|
+
},
|
|
10768
|
+
...containerConfig
|
|
10769
|
+
};
|
|
10770
|
+
return this.containerService.show(config);
|
|
10771
|
+
}
|
|
10772
|
+
// Show multiple instances of the same component
|
|
10773
|
+
showMultipleInstances(componentId, titlePrefix, count, config = {}) {
|
|
10774
|
+
const containerIds = [];
|
|
10775
|
+
for (let i = 1; i <= count; i++) {
|
|
10776
|
+
const containerId = `${componentId}-instance-${i}-${Date.now()}`;
|
|
10777
|
+
const title = `${titlePrefix} ${i}`;
|
|
10778
|
+
const containerConfig = {
|
|
10779
|
+
id: containerId,
|
|
10780
|
+
title,
|
|
10781
|
+
icon: 'widgets',
|
|
10782
|
+
width: '400px',
|
|
10783
|
+
height: '500px',
|
|
10784
|
+
minWidth: '300px',
|
|
10785
|
+
minHeight: '200px',
|
|
10786
|
+
resizable: true,
|
|
10787
|
+
draggable: true,
|
|
10788
|
+
closable: true,
|
|
10789
|
+
minimizable: true,
|
|
10790
|
+
maximizable: true,
|
|
10791
|
+
componentId,
|
|
10792
|
+
...config
|
|
10793
|
+
};
|
|
10794
|
+
const id = this.containerService.show(containerConfig);
|
|
10795
|
+
containerIds.push(id);
|
|
10796
|
+
}
|
|
10797
|
+
return containerIds;
|
|
10798
|
+
}
|
|
10799
|
+
// Get all instances of a component type
|
|
10800
|
+
getInstancesOfType(componentType) {
|
|
10801
|
+
return this.containerService.getInstancesByComponentType(componentType);
|
|
10802
|
+
}
|
|
10803
|
+
// Get active instances of a component type
|
|
10804
|
+
getActiveInstancesOfType(componentType) {
|
|
10805
|
+
return this.containerService.getActiveInstancesByComponentType(componentType);
|
|
10806
|
+
}
|
|
10807
|
+
// Close all instances of a component type
|
|
10808
|
+
closeAllInstancesOfType(componentType) {
|
|
10809
|
+
this.containerService.closeAllInstancesOfType(componentType);
|
|
10810
|
+
}
|
|
10811
|
+
// Minimize all instances of a component type
|
|
10812
|
+
minimizeAllInstancesOfType(componentType) {
|
|
10813
|
+
this.containerService.minimizeAllInstancesOfType(componentType);
|
|
10814
|
+
}
|
|
10815
|
+
// Get instance count for a component type
|
|
10816
|
+
getInstanceCount(componentType) {
|
|
10817
|
+
return this.containerService.getInstanceCount(componentType);
|
|
10818
|
+
}
|
|
10819
|
+
// Get active instance count for a component type
|
|
10820
|
+
getActiveInstanceCount(componentType) {
|
|
10821
|
+
return this.containerService.getActiveInstanceCount(componentType);
|
|
10822
|
+
}
|
|
10823
|
+
// Register a component for dynamic loading
|
|
10824
|
+
registerComponent(componentId, componentType) {
|
|
10825
|
+
this.containerService.registerComponent(componentId, componentType);
|
|
10826
|
+
}
|
|
10827
|
+
// Unregister a component
|
|
10828
|
+
unregisterComponent(componentId) {
|
|
10829
|
+
this.containerService.unregisterComponent(componentId);
|
|
10830
|
+
}
|
|
10831
|
+
hideFeature(featureId) {
|
|
10832
|
+
this.containerService.hide(featureId);
|
|
10833
|
+
}
|
|
10834
|
+
// Utility methods
|
|
10835
|
+
bringToFront(featureId) {
|
|
10836
|
+
this.containerService.bringToFront(featureId);
|
|
10837
|
+
}
|
|
10838
|
+
minimize(featureId) {
|
|
10839
|
+
this.containerService.minimize(featureId);
|
|
10840
|
+
}
|
|
10841
|
+
maximize(featureId) {
|
|
10842
|
+
this.containerService.maximize(featureId);
|
|
10843
|
+
}
|
|
10844
|
+
isVisible(featureId) {
|
|
10845
|
+
return this.containerService.isVisible(featureId);
|
|
10846
|
+
}
|
|
10847
|
+
hideAll() {
|
|
10848
|
+
this.containerService.hideAll();
|
|
10849
|
+
}
|
|
10850
|
+
minimizeAll() {
|
|
10851
|
+
this.containerService.minimizeAll();
|
|
10852
|
+
}
|
|
10853
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
10854
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, providedIn: 'root' });
|
|
10855
|
+
}
|
|
10856
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, decorators: [{
|
|
10857
|
+
type: Injectable,
|
|
10858
|
+
args: [{
|
|
10859
|
+
providedIn: 'root'
|
|
10860
|
+
}]
|
|
10861
|
+
}], ctorParameters: () => [] });
|
|
10862
|
+
|
|
10863
|
+
class CideEleFloatingContainerDynamicDirective {
|
|
10864
|
+
viewContainer;
|
|
10865
|
+
containerService;
|
|
10866
|
+
componentId;
|
|
10867
|
+
componentConfig;
|
|
10868
|
+
isVisible = true;
|
|
10869
|
+
componentRef = null;
|
|
10870
|
+
constructor(viewContainer, containerService) {
|
|
10871
|
+
this.viewContainer = viewContainer;
|
|
10872
|
+
this.containerService = containerService;
|
|
10873
|
+
}
|
|
10874
|
+
ngOnInit() {
|
|
10875
|
+
if (this.isVisible && this.componentId) {
|
|
10876
|
+
this.loadComponent();
|
|
10877
|
+
}
|
|
10878
|
+
}
|
|
10879
|
+
ngOnDestroy() {
|
|
10880
|
+
this.destroyComponent();
|
|
10881
|
+
}
|
|
10882
|
+
ngOnChanges() {
|
|
10883
|
+
if (this.isVisible && this.componentId && !this.componentRef) {
|
|
10884
|
+
this.loadComponent();
|
|
10885
|
+
}
|
|
10886
|
+
else if (!this.isVisible && this.componentRef) {
|
|
10887
|
+
this.destroyComponent();
|
|
10888
|
+
}
|
|
10889
|
+
}
|
|
10890
|
+
loadComponent() {
|
|
10891
|
+
if (this.componentId && this.containerService.isComponentRegistered(this.componentId)) {
|
|
10892
|
+
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10893
|
+
}
|
|
10894
|
+
else {
|
|
10895
|
+
console.warn(`Component '${this.componentId}' is not registered. Available components:`, this.containerService.getRegisteredComponentIds());
|
|
10896
|
+
// Retry after a short delay in case registration is still in progress
|
|
10897
|
+
setTimeout(() => {
|
|
10898
|
+
if (this.containerService.isComponentRegistered(this.componentId)) {
|
|
10899
|
+
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10900
|
+
}
|
|
10901
|
+
else {
|
|
10902
|
+
console.error(`Component '${this.componentId}' still not registered after retry`);
|
|
10903
|
+
}
|
|
10904
|
+
}, 100);
|
|
10905
|
+
}
|
|
10906
|
+
}
|
|
10907
|
+
destroyComponent() {
|
|
10908
|
+
if (this.componentRef) {
|
|
10909
|
+
this.componentRef.destroy();
|
|
10910
|
+
this.componentRef = null;
|
|
10911
|
+
}
|
|
10912
|
+
}
|
|
10913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, deps: [{ token: i0.ViewContainerRef }, { token: CideEleFloatingContainerService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
10914
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFloatingContainerDynamicDirective, isStandalone: true, selector: "[cideEleFloatingDynamic]", inputs: { componentId: "componentId", componentConfig: "componentConfig", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0 });
|
|
10915
|
+
}
|
|
10916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, decorators: [{
|
|
10917
|
+
type: Directive,
|
|
10918
|
+
args: [{
|
|
10919
|
+
selector: '[cideEleFloatingDynamic]',
|
|
10920
|
+
standalone: true
|
|
10921
|
+
}]
|
|
10922
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: CideEleFloatingContainerService }], propDecorators: { componentId: [{
|
|
10923
|
+
type: Input
|
|
10924
|
+
}], componentConfig: [{
|
|
10925
|
+
type: Input
|
|
10926
|
+
}], isVisible: [{
|
|
10927
|
+
type: Input
|
|
10928
|
+
}] } });
|
|
10929
|
+
|
|
10930
|
+
var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
|
|
10931
|
+
__proto__: null,
|
|
10932
|
+
CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
|
|
10933
|
+
});
|
|
10934
|
+
|
|
10901
10935
|
/*
|
|
10902
10936
|
* Public API Surface of cloud-ide-element
|
|
10903
10937
|
* Here we can add what need to be exported from library
|