cloud-ide-element 1.1.0 → 1.1.2
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 +640 -20
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +220 -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: [{
|
|
@@ -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]
|
|
@@ -3853,7 +3866,7 @@ class CideEleFloatingFileUploaderService {
|
|
|
3853
3866
|
componentConfig: data ? {
|
|
3854
3867
|
inputs: { data },
|
|
3855
3868
|
outputs: {}
|
|
3856
|
-
} :
|
|
3869
|
+
} : { inputs: {}, outputs: {} }
|
|
3857
3870
|
};
|
|
3858
3871
|
const containerId = this.containerService.show(config);
|
|
3859
3872
|
console.log('✅ Container created with ID:', containerId);
|
|
@@ -5542,7 +5555,7 @@ class CideTextareaComponent {
|
|
|
5542
5555
|
multi: true,
|
|
5543
5556
|
useExisting: forwardRef(() => CideTextareaComponent),
|
|
5544
5557
|
}
|
|
5545
|
-
], 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"] }] });
|
|
5546
5559
|
}
|
|
5547
5560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideTextareaComponent, decorators: [{
|
|
5548
5561
|
type: Component,
|
|
@@ -5557,7 +5570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5557
5570
|
multi: true,
|
|
5558
5571
|
useExisting: forwardRef(() => CideTextareaComponent),
|
|
5559
5572
|
}
|
|
5560
|
-
], 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>" }]
|
|
5561
5574
|
}], propDecorators: { label: [{
|
|
5562
5575
|
type: Input
|
|
5563
5576
|
}], labelHide: [{
|
|
@@ -10060,7 +10073,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10060
10073
|
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
10061
10074
|
[style.max-width]="config().maxWidth || '90vw'"
|
|
10062
10075
|
[style.max-height]="config().maxHeight || '90vh'"
|
|
10063
|
-
[style.z-index]="zIndex
|
|
10076
|
+
[style.z-index]="zIndex()"
|
|
10064
10077
|
[class.tw-cursor-move]="isDragging()"
|
|
10065
10078
|
[class.tw-select-none]="true"
|
|
10066
10079
|
(mousedown)="onMouseDown($event)"
|
|
@@ -10097,7 +10110,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10097
10110
|
(click)="minimize(); $event.stopPropagation()"
|
|
10098
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"
|
|
10099
10112
|
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
10100
|
-
<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>
|
|
10101
10114
|
</button>
|
|
10102
10115
|
}
|
|
10103
10116
|
@if (config().maximizable !== false) {
|
|
@@ -10109,7 +10122,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10109
10122
|
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
10110
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"
|
|
10111
10124
|
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
10112
|
-
<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>
|
|
10113
10126
|
</button>
|
|
10114
10127
|
}
|
|
10115
10128
|
@if (config().closable !== false) {
|
|
@@ -10121,7 +10134,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10121
10134
|
(click)="close(); $event.stopPropagation()"
|
|
10122
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"
|
|
10123
10136
|
title="Close">
|
|
10124
|
-
<cide-ele-icon class="tw-w-
|
|
10137
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
10125
10138
|
</button>
|
|
10126
10139
|
}
|
|
10127
10140
|
</div>
|
|
@@ -10149,7 +10162,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10149
10162
|
<!-- Resize Handle (if resizable) -->
|
|
10150
10163
|
@if (config().resizable !== false) {
|
|
10151
10164
|
<div
|
|
10152
|
-
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"
|
|
10153
10166
|
(mousedown)="startResize($event)">
|
|
10154
10167
|
</div>
|
|
10155
10168
|
}
|
|
@@ -10170,7 +10183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10170
10183
|
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
10171
10184
|
[style.max-width]="config().maxWidth || '90vw'"
|
|
10172
10185
|
[style.max-height]="config().maxHeight || '90vh'"
|
|
10173
|
-
[style.z-index]="zIndex
|
|
10186
|
+
[style.z-index]="zIndex()"
|
|
10174
10187
|
[class.tw-cursor-move]="isDragging()"
|
|
10175
10188
|
[class.tw-select-none]="true"
|
|
10176
10189
|
(mousedown)="onMouseDown($event)"
|
|
@@ -10207,7 +10220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10207
10220
|
(click)="minimize(); $event.stopPropagation()"
|
|
10208
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"
|
|
10209
10222
|
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
10210
|
-
<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>
|
|
10211
10224
|
</button>
|
|
10212
10225
|
}
|
|
10213
10226
|
@if (config().maximizable !== false) {
|
|
@@ -10219,7 +10232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10219
10232
|
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
10220
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"
|
|
10221
10234
|
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
10222
|
-
<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>
|
|
10223
10236
|
</button>
|
|
10224
10237
|
}
|
|
10225
10238
|
@if (config().closable !== false) {
|
|
@@ -10231,7 +10244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10231
10244
|
(click)="close(); $event.stopPropagation()"
|
|
10232
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"
|
|
10233
10246
|
title="Close">
|
|
10234
|
-
<cide-ele-icon class="tw-w-
|
|
10247
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
10235
10248
|
</button>
|
|
10236
10249
|
}
|
|
10237
10250
|
</div>
|
|
@@ -10259,7 +10272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10259
10272
|
<!-- Resize Handle (if resizable) -->
|
|
10260
10273
|
@if (config().resizable !== false) {
|
|
10261
10274
|
<div
|
|
10262
|
-
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"
|
|
10263
10276
|
(mousedown)="startResize($event)">
|
|
10264
10277
|
</div>
|
|
10265
10278
|
}
|
|
@@ -10919,6 +10932,613 @@ var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
|
|
|
10919
10932
|
CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
|
|
10920
10933
|
});
|
|
10921
10934
|
|
|
10935
|
+
class CideFormFieldErrorComponent {
|
|
10936
|
+
control;
|
|
10937
|
+
formGroup;
|
|
10938
|
+
fieldName = '';
|
|
10939
|
+
customMessages = {};
|
|
10940
|
+
// Map to store field labels for efficient lookup
|
|
10941
|
+
fieldLabelsMap = new Map();
|
|
10942
|
+
// Inject the element service
|
|
10943
|
+
elementService = inject(CideElementsService);
|
|
10944
|
+
// Signal to hold form errors
|
|
10945
|
+
formErrors = signal([], ...(ngDevMode ? [{ debugName: "formErrors" }] : []));
|
|
10946
|
+
ngOnInit() {
|
|
10947
|
+
if (this.isFormGroupMode()) {
|
|
10948
|
+
this.loadFormErrors();
|
|
10949
|
+
this.setupFormChangeListener();
|
|
10950
|
+
}
|
|
10951
|
+
}
|
|
10952
|
+
ngOnChanges(changes) {
|
|
10953
|
+
if (changes['formGroup'] && this.isFormGroupMode()) {
|
|
10954
|
+
this.loadFormErrors();
|
|
10955
|
+
this.setupFormChangeListener();
|
|
10956
|
+
}
|
|
10957
|
+
}
|
|
10958
|
+
setupFormChangeListener() {
|
|
10959
|
+
if (this.formGroup) {
|
|
10960
|
+
// Listen to form value changes to update errors
|
|
10961
|
+
this.formGroup.valueChanges.subscribe(() => {
|
|
10962
|
+
this.updateFormErrors();
|
|
10963
|
+
});
|
|
10964
|
+
// Listen to form status changes
|
|
10965
|
+
this.formGroup.statusChanges.subscribe(() => {
|
|
10966
|
+
this.updateFormErrors();
|
|
10967
|
+
});
|
|
10968
|
+
}
|
|
10969
|
+
}
|
|
10970
|
+
updateFormErrors() {
|
|
10971
|
+
if (this.isFormGroupMode()) {
|
|
10972
|
+
this.loadFormErrors();
|
|
10973
|
+
}
|
|
10974
|
+
}
|
|
10975
|
+
loadFormErrors() {
|
|
10976
|
+
this.getFormGroupErrors().then(errors => {
|
|
10977
|
+
this.formErrors.set(errors);
|
|
10978
|
+
});
|
|
10979
|
+
}
|
|
10980
|
+
isFormGroupMode() {
|
|
10981
|
+
return !!this.formGroup && !this.control;
|
|
10982
|
+
}
|
|
10983
|
+
getFormGroupErrors() {
|
|
10984
|
+
if (!this.formGroup)
|
|
10985
|
+
return Promise.resolve([]);
|
|
10986
|
+
return this.buildFieldLabelsMap().then(() => {
|
|
10987
|
+
const errors = [];
|
|
10988
|
+
console.log('🔍 Form Controls:', this.formGroup.controls);
|
|
10989
|
+
console.log('🏷️ Field Labels Map:', this.fieldLabelsMap);
|
|
10990
|
+
Object.keys(this.formGroup.controls).forEach(key => {
|
|
10991
|
+
const control = this.formGroup.get(key);
|
|
10992
|
+
console.log(`📝 Control ${key}:`, {
|
|
10993
|
+
invalid: control?.invalid,
|
|
10994
|
+
dirty: control?.dirty,
|
|
10995
|
+
touched: control?.touched,
|
|
10996
|
+
errors: control?.errors,
|
|
10997
|
+
value: control?.value
|
|
10998
|
+
});
|
|
10999
|
+
if (control && control.invalid) {
|
|
11000
|
+
const errorMessage = this.getControlErrorMessage(control, key);
|
|
11001
|
+
if (errorMessage) {
|
|
11002
|
+
errors.push(errorMessage);
|
|
11003
|
+
}
|
|
11004
|
+
}
|
|
11005
|
+
});
|
|
11006
|
+
console.log('❌ Final Errors:', errors);
|
|
11007
|
+
return errors;
|
|
11008
|
+
});
|
|
11009
|
+
}
|
|
11010
|
+
buildFieldLabelsMap() {
|
|
11011
|
+
if (this.fieldLabelsMap.size > 0)
|
|
11012
|
+
return Promise.resolve(); // Already built
|
|
11013
|
+
const promises = Object.keys(this.formGroup.controls).map(key => {
|
|
11014
|
+
console.log('🔍 Element Data:', key);
|
|
11015
|
+
return this.elementService?.getElementData({ sype_key: key }).then(elementData => {
|
|
11016
|
+
if (elementData?.sype_label) {
|
|
11017
|
+
this.fieldLabelsMap.set(key, elementData.sype_label);
|
|
11018
|
+
}
|
|
11019
|
+
}).catch(error => {
|
|
11020
|
+
console.log(`Could not get element data for field: ${key}`, error);
|
|
11021
|
+
});
|
|
11022
|
+
});
|
|
11023
|
+
return Promise.all(promises).then(() => {
|
|
11024
|
+
// All promises completed
|
|
11025
|
+
});
|
|
11026
|
+
}
|
|
11027
|
+
getFormGroupErrorMessage() {
|
|
11028
|
+
const errors = this.formErrors();
|
|
11029
|
+
if (errors.length === 0)
|
|
11030
|
+
return '';
|
|
11031
|
+
if (errors.length === 1) {
|
|
11032
|
+
return errors[0];
|
|
11033
|
+
}
|
|
11034
|
+
return `Please fix the following errors: ${errors.join(', ')}`;
|
|
11035
|
+
}
|
|
11036
|
+
getControlErrorMessage(control, fieldName) {
|
|
11037
|
+
if (!control || !control.errors) {
|
|
11038
|
+
return '';
|
|
11039
|
+
}
|
|
11040
|
+
const errors = control.errors;
|
|
11041
|
+
// Get display name from map first, fallback to conversion
|
|
11042
|
+
const displayName = this.fieldLabelsMap.get(fieldName) || this.convertToDisplayName(fieldName);
|
|
11043
|
+
// Check for custom messages first
|
|
11044
|
+
for (const errorType in errors) {
|
|
11045
|
+
if (this.customMessages[errorType]) {
|
|
11046
|
+
return this.customMessages[errorType];
|
|
11047
|
+
}
|
|
11048
|
+
}
|
|
11049
|
+
// Default error messages
|
|
11050
|
+
if (errors['required']) {
|
|
11051
|
+
return `${displayName} is required`;
|
|
11052
|
+
}
|
|
11053
|
+
if (errors['email']) {
|
|
11054
|
+
return `${displayName} must be a valid email address`;
|
|
11055
|
+
}
|
|
11056
|
+
if (errors['minlength']) {
|
|
11057
|
+
return `${displayName} must be at least ${errors['minlength'].requiredLength} characters`;
|
|
11058
|
+
}
|
|
11059
|
+
if (errors['maxlength']) {
|
|
11060
|
+
return `${displayName} must not exceed ${errors['maxlength'].requiredLength} characters`;
|
|
11061
|
+
}
|
|
11062
|
+
if (errors['pattern']) {
|
|
11063
|
+
return `${displayName} format is invalid`;
|
|
11064
|
+
}
|
|
11065
|
+
// Fallback to first error
|
|
11066
|
+
const firstError = Object.keys(errors)[0];
|
|
11067
|
+
return `${displayName} is invalid`;
|
|
11068
|
+
}
|
|
11069
|
+
getErrorMessage() {
|
|
11070
|
+
if (!this.control || !this.control.errors) {
|
|
11071
|
+
return '';
|
|
11072
|
+
}
|
|
11073
|
+
const errors = this.control.errors;
|
|
11074
|
+
// Check for custom messages first
|
|
11075
|
+
for (const errorType in errors) {
|
|
11076
|
+
if (this.customMessages[errorType]) {
|
|
11077
|
+
return this.customMessages[errorType];
|
|
11078
|
+
}
|
|
11079
|
+
}
|
|
11080
|
+
// Default error messages
|
|
11081
|
+
if (errors['required']) {
|
|
11082
|
+
return `${this.getFieldDisplayName()} is required`;
|
|
11083
|
+
}
|
|
11084
|
+
if (errors['email']) {
|
|
11085
|
+
return `${this.getFieldDisplayName()} must be a valid email address`;
|
|
11086
|
+
}
|
|
11087
|
+
if (errors['minlength']) {
|
|
11088
|
+
return `${this.getFieldDisplayName()} must be at least ${errors['minlength'].requiredLength} characters`;
|
|
11089
|
+
}
|
|
11090
|
+
if (errors['maxlength']) {
|
|
11091
|
+
return `${this.getFieldDisplayName()} must not exceed ${errors['maxlength'].requiredLength} characters`;
|
|
11092
|
+
}
|
|
11093
|
+
if (errors['pattern']) {
|
|
11094
|
+
return `${this.getFieldDisplayName()} format is invalid`;
|
|
11095
|
+
}
|
|
11096
|
+
// Fallback to first error
|
|
11097
|
+
const firstError = Object.keys(errors)[0];
|
|
11098
|
+
return `${this.getFieldDisplayName()} is invalid`;
|
|
11099
|
+
}
|
|
11100
|
+
getFieldDisplayName() {
|
|
11101
|
+
if (this.fieldName) {
|
|
11102
|
+
return this.fieldName;
|
|
11103
|
+
}
|
|
11104
|
+
// Convert field name to display name
|
|
11105
|
+
if (this.control && this.control.parent) {
|
|
11106
|
+
const fieldName = Object.keys(this.control.parent.controls).find(key => this.control.parent.get(key) === this.control);
|
|
11107
|
+
if (fieldName) {
|
|
11108
|
+
return this.convertToDisplayName(fieldName);
|
|
11109
|
+
}
|
|
11110
|
+
}
|
|
11111
|
+
return 'This field';
|
|
11112
|
+
}
|
|
11113
|
+
convertToDisplayName(fieldName) {
|
|
11114
|
+
// Convert snake_case to Title Case
|
|
11115
|
+
return fieldName
|
|
11116
|
+
.split('_')
|
|
11117
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
11118
|
+
.join(' ');
|
|
11119
|
+
}
|
|
11120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFormFieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideFormFieldErrorComponent, isStandalone: true, selector: "cide-form-field-error", inputs: { control: "control", formGroup: "formGroup", fieldName: "fieldName", customMessages: "customMessages" }, usesOnChanges: true, ngImport: i0, template: `
|
|
11122
|
+
@if (isFormGroupMode()) {
|
|
11123
|
+
<!-- Form Group Error Display -->
|
|
11124
|
+
@if (formErrors().length > 0) {
|
|
11125
|
+
<div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
|
|
11126
|
+
<cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
|
|
11127
|
+
<span>{{ getFormGroupErrorMessage() }}</span>
|
|
11128
|
+
</div>
|
|
11129
|
+
}
|
|
11130
|
+
} @else {
|
|
11131
|
+
<!-- Individual Field Error Display -->
|
|
11132
|
+
@if (control && control.invalid && (control.dirty || control.touched)) {
|
|
11133
|
+
<div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
|
|
11134
|
+
<cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
|
|
11135
|
+
<span>{{ getErrorMessage() }}</span>
|
|
11136
|
+
</div>
|
|
11137
|
+
}
|
|
11138
|
+
}
|
|
11139
|
+
`, isInline: true, dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
11140
|
+
}
|
|
11141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFormFieldErrorComponent, decorators: [{
|
|
11142
|
+
type: Component,
|
|
11143
|
+
args: [{
|
|
11144
|
+
selector: 'cide-form-field-error',
|
|
11145
|
+
standalone: true,
|
|
11146
|
+
template: `
|
|
11147
|
+
@if (isFormGroupMode()) {
|
|
11148
|
+
<!-- Form Group Error Display -->
|
|
11149
|
+
@if (formErrors().length > 0) {
|
|
11150
|
+
<div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
|
|
11151
|
+
<cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
|
|
11152
|
+
<span>{{ getFormGroupErrorMessage() }}</span>
|
|
11153
|
+
</div>
|
|
11154
|
+
}
|
|
11155
|
+
} @else {
|
|
11156
|
+
<!-- Individual Field Error Display -->
|
|
11157
|
+
@if (control && control.invalid && (control.dirty || control.touched)) {
|
|
11158
|
+
<div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
|
|
11159
|
+
<cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
|
|
11160
|
+
<span>{{ getErrorMessage() }}</span>
|
|
11161
|
+
</div>
|
|
11162
|
+
}
|
|
11163
|
+
}
|
|
11164
|
+
`,
|
|
11165
|
+
imports: [CideIconComponent]
|
|
11166
|
+
}]
|
|
11167
|
+
}], propDecorators: { control: [{
|
|
11168
|
+
type: Input
|
|
11169
|
+
}], formGroup: [{
|
|
11170
|
+
type: Input
|
|
11171
|
+
}], fieldName: [{
|
|
11172
|
+
type: Input
|
|
11173
|
+
}], customMessages: [{
|
|
11174
|
+
type: Input
|
|
11175
|
+
}] } });
|
|
11176
|
+
|
|
11177
|
+
class CideEleBreadcrumbComponent {
|
|
11178
|
+
// Input properties
|
|
11179
|
+
items = [];
|
|
11180
|
+
style = 'modern';
|
|
11181
|
+
separator = { type: 'chevron' };
|
|
11182
|
+
showHomeIcon = true;
|
|
11183
|
+
homeIcon = 'home';
|
|
11184
|
+
maxItems = 5;
|
|
11185
|
+
showDropdownOnOverflow = true;
|
|
11186
|
+
dropdownOptions = [];
|
|
11187
|
+
clickableItems = true;
|
|
11188
|
+
showTooltips = true;
|
|
11189
|
+
responsive = true;
|
|
11190
|
+
compact = false;
|
|
11191
|
+
animated = true;
|
|
11192
|
+
loading = false;
|
|
11193
|
+
disabled = false;
|
|
11194
|
+
// Output events
|
|
11195
|
+
itemClick = new EventEmitter();
|
|
11196
|
+
dropdownOptionClick = new EventEmitter();
|
|
11197
|
+
homeClick = new EventEmitter();
|
|
11198
|
+
// Internal state
|
|
11199
|
+
showDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showDropdown" }] : []));
|
|
11200
|
+
isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : []));
|
|
11201
|
+
visibleItems = signal([], ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
|
|
11202
|
+
hiddenItems = signal([], ...(ngDevMode ? [{ debugName: "hiddenItems" }] : []));
|
|
11203
|
+
// Computed properties
|
|
11204
|
+
showDropdownSignal = computed(() => this.showDropdown(), ...(ngDevMode ? [{ debugName: "showDropdownSignal" }] : []));
|
|
11205
|
+
isOverflowingSignal = computed(() => this.isOverflowing(), ...(ngDevMode ? [{ debugName: "isOverflowingSignal" }] : []));
|
|
11206
|
+
visibleItemsSignal = computed(() => this.visibleItems(), ...(ngDevMode ? [{ debugName: "visibleItemsSignal" }] : []));
|
|
11207
|
+
hiddenItemsSignal = computed(() => this.hiddenItems(), ...(ngDevMode ? [{ debugName: "hiddenItemsSignal" }] : []));
|
|
11208
|
+
// Configuration based on style
|
|
11209
|
+
config = computed(() => this.getConfigForStyle(this.style), ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
11210
|
+
ngOnInit() {
|
|
11211
|
+
this.processItems();
|
|
11212
|
+
}
|
|
11213
|
+
ngOnDestroy() {
|
|
11214
|
+
// Cleanup if needed
|
|
11215
|
+
}
|
|
11216
|
+
onDocumentClick(event) {
|
|
11217
|
+
const target = event.target;
|
|
11218
|
+
if (!target.closest('.breadcrumb-dropdown-container')) {
|
|
11219
|
+
this.showDropdown.set(false);
|
|
11220
|
+
}
|
|
11221
|
+
}
|
|
11222
|
+
// Process items based on maxItems and overflow
|
|
11223
|
+
processItems() {
|
|
11224
|
+
if (this.items.length <= this.maxItems) {
|
|
11225
|
+
this.visibleItems.set([...this.items]);
|
|
11226
|
+
this.hiddenItems.set([]);
|
|
11227
|
+
this.isOverflowing.set(false);
|
|
11228
|
+
}
|
|
11229
|
+
else {
|
|
11230
|
+
const visibleCount = this.showDropdownOnOverflow ? this.maxItems - 1 : this.maxItems;
|
|
11231
|
+
this.visibleItems.set(this.items.slice(0, visibleCount));
|
|
11232
|
+
this.hiddenItems.set(this.items.slice(visibleCount));
|
|
11233
|
+
this.isOverflowing.set(true);
|
|
11234
|
+
}
|
|
11235
|
+
}
|
|
11236
|
+
// Get configuration based on style
|
|
11237
|
+
getConfigForStyle(style) {
|
|
11238
|
+
const configs = {
|
|
11239
|
+
modern: {
|
|
11240
|
+
style: 'modern',
|
|
11241
|
+
separator: { type: 'chevron' },
|
|
11242
|
+
showHomeIcon: true,
|
|
11243
|
+
homeIcon: 'home',
|
|
11244
|
+
maxItems: 5,
|
|
11245
|
+
showDropdownOnOverflow: true,
|
|
11246
|
+
dropdownOptions: [],
|
|
11247
|
+
clickableItems: true,
|
|
11248
|
+
showTooltips: true,
|
|
11249
|
+
responsive: true,
|
|
11250
|
+
compact: false,
|
|
11251
|
+
animated: true
|
|
11252
|
+
},
|
|
11253
|
+
classic: {
|
|
11254
|
+
style: 'classic',
|
|
11255
|
+
separator: { type: 'slash' },
|
|
11256
|
+
showHomeIcon: false,
|
|
11257
|
+
homeIcon: 'home',
|
|
11258
|
+
maxItems: 8,
|
|
11259
|
+
showDropdownOnOverflow: false,
|
|
11260
|
+
dropdownOptions: [],
|
|
11261
|
+
clickableItems: true,
|
|
11262
|
+
showTooltips: false,
|
|
11263
|
+
responsive: false,
|
|
11264
|
+
compact: true,
|
|
11265
|
+
animated: false
|
|
11266
|
+
},
|
|
11267
|
+
minimal: {
|
|
11268
|
+
style: 'minimal',
|
|
11269
|
+
separator: { type: 'dot' },
|
|
11270
|
+
showHomeIcon: false,
|
|
11271
|
+
homeIcon: 'home',
|
|
11272
|
+
maxItems: 3,
|
|
11273
|
+
showDropdownOnOverflow: true,
|
|
11274
|
+
dropdownOptions: [],
|
|
11275
|
+
clickableItems: false,
|
|
11276
|
+
showTooltips: true,
|
|
11277
|
+
responsive: true,
|
|
11278
|
+
compact: true,
|
|
11279
|
+
animated: false
|
|
11280
|
+
},
|
|
11281
|
+
hierarchical: {
|
|
11282
|
+
style: 'hierarchical',
|
|
11283
|
+
separator: { type: 'chevron' },
|
|
11284
|
+
showHomeIcon: true,
|
|
11285
|
+
homeIcon: 'home',
|
|
11286
|
+
maxItems: 4,
|
|
11287
|
+
showDropdownOnOverflow: true,
|
|
11288
|
+
dropdownOptions: [],
|
|
11289
|
+
clickableItems: true,
|
|
11290
|
+
showTooltips: false,
|
|
11291
|
+
responsive: true,
|
|
11292
|
+
compact: true,
|
|
11293
|
+
animated: false
|
|
11294
|
+
}
|
|
11295
|
+
};
|
|
11296
|
+
return configs[style];
|
|
11297
|
+
}
|
|
11298
|
+
// Event handlers
|
|
11299
|
+
onItemClick(item) {
|
|
11300
|
+
if (!item.disabled && this.clickableItems && !this.disabled) {
|
|
11301
|
+
this.itemClick.emit(item);
|
|
11302
|
+
}
|
|
11303
|
+
}
|
|
11304
|
+
onHomeClick() {
|
|
11305
|
+
if (!this.disabled) {
|
|
11306
|
+
this.homeClick.emit();
|
|
11307
|
+
}
|
|
11308
|
+
}
|
|
11309
|
+
onDropdownToggle() {
|
|
11310
|
+
if (!this.disabled) {
|
|
11311
|
+
this.showDropdown.set(!this.showDropdown());
|
|
11312
|
+
}
|
|
11313
|
+
}
|
|
11314
|
+
onDropdownOptionClick(option) {
|
|
11315
|
+
if (!option.disabled && !this.disabled) {
|
|
11316
|
+
this.dropdownOptionClick.emit(option);
|
|
11317
|
+
this.showDropdown.set(false);
|
|
11318
|
+
}
|
|
11319
|
+
}
|
|
11320
|
+
// Utility methods
|
|
11321
|
+
getItemClasses(item, isLast = false) {
|
|
11322
|
+
const classes = ['breadcrumb-item'];
|
|
11323
|
+
if (this.config().compact)
|
|
11324
|
+
classes.push('compact');
|
|
11325
|
+
if (this.config().animated)
|
|
11326
|
+
classes.push('animated');
|
|
11327
|
+
if (item.disabled)
|
|
11328
|
+
classes.push('disabled');
|
|
11329
|
+
if (isLast)
|
|
11330
|
+
classes.push('last');
|
|
11331
|
+
if (this.clickableItems && !item.disabled)
|
|
11332
|
+
classes.push('clickable');
|
|
11333
|
+
return classes.join(' ');
|
|
11334
|
+
}
|
|
11335
|
+
getContainerClasses() {
|
|
11336
|
+
const classes = ['breadcrumb-container'];
|
|
11337
|
+
classes.push(`style-${this.style}`);
|
|
11338
|
+
if (this.config().compact)
|
|
11339
|
+
classes.push('compact');
|
|
11340
|
+
if (this.config().responsive)
|
|
11341
|
+
classes.push('responsive');
|
|
11342
|
+
if (this.config().animated)
|
|
11343
|
+
classes.push('animated');
|
|
11344
|
+
if (this.loading)
|
|
11345
|
+
classes.push('loading');
|
|
11346
|
+
if (this.disabled)
|
|
11347
|
+
classes.push('disabled');
|
|
11348
|
+
return classes.join(' ');
|
|
11349
|
+
}
|
|
11350
|
+
getSeparatorIcon() {
|
|
11351
|
+
const separatorMap = {
|
|
11352
|
+
'chevron': 'chevron_right',
|
|
11353
|
+
'slash': 'keyboard_arrow_right',
|
|
11354
|
+
'arrow': 'arrow_forward',
|
|
11355
|
+
'dot': 'fiber_manual_record'
|
|
11356
|
+
};
|
|
11357
|
+
return separatorMap[this.separator.type] || 'chevron_right';
|
|
11358
|
+
}
|
|
11359
|
+
getTooltipText(item) {
|
|
11360
|
+
if (!this.showTooltips)
|
|
11361
|
+
return '';
|
|
11362
|
+
let tooltip = item.label;
|
|
11363
|
+
if (item.type) {
|
|
11364
|
+
tooltip += ` (${item.type})`;
|
|
11365
|
+
}
|
|
11366
|
+
if (item.url) {
|
|
11367
|
+
tooltip += ` - ${item.url}`;
|
|
11368
|
+
}
|
|
11369
|
+
return tooltip;
|
|
11370
|
+
}
|
|
11371
|
+
// Public methods for external control
|
|
11372
|
+
toggleDropdown() {
|
|
11373
|
+
this.onDropdownToggle();
|
|
11374
|
+
}
|
|
11375
|
+
closeDropdown() {
|
|
11376
|
+
this.showDropdown.set(false);
|
|
11377
|
+
}
|
|
11378
|
+
updateItems(newItems) {
|
|
11379
|
+
this.items = newItems;
|
|
11380
|
+
this.processItems();
|
|
11381
|
+
}
|
|
11382
|
+
addItem(item) {
|
|
11383
|
+
this.items.push(item);
|
|
11384
|
+
this.processItems();
|
|
11385
|
+
}
|
|
11386
|
+
removeItem(itemId) {
|
|
11387
|
+
this.items = this.items.filter(item => item.id !== itemId);
|
|
11388
|
+
this.processItems();
|
|
11389
|
+
}
|
|
11390
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: "items", style: "style", separator: "separator", showHomeIcon: "showHomeIcon", homeIcon: "homeIcon", maxItems: "maxItems", showDropdownOnOverflow: "showDropdownOnOverflow", dropdownOptions: "dropdownOptions", clickableItems: "clickableItems", showTooltips: "showTooltips", responsive: "responsive", compact: "compact", animated: "animated", loading: "loading", disabled: "disabled" }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n \n <!-- Loading State -->\n @if (loading) {\n <div class=\"breadcrumb-loading\">\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n <span>Loading...</span>\n </div>\n }\n\n <!-- Main Breadcrumb Content -->\n @if (!loading) {\n <nav class=\"tw-flex tw-items-center tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\n \n <!-- Home Icon (if enabled) -->\n @if (config().showHomeIcon) {\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \n [class.tw-cursor-pointer]=\"clickableItems && !disabled\"\n (click)=\"onHomeClick()\"\n [title]=\"showTooltips ? 'Go to Home' : ''\">\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\n {{ config().homeIcon }}\n </cide-ele-icon>\n </li>\n \n <!-- Separator after home -->\n @if (visibleItemsSignal().length > 0) {\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n @if (separator.type === 'custom' && separator.text) {\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator.text }}</span>\n } @else {\n <cide-ele-icon class=\"tw-text-xs\">\n {{ getSeparatorIcon() }}\n </cide-ele-icon>\n }\n </li>\n }\n }\n\n <!-- Visible Items -->\n @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n [class.tw-cursor-pointer]=\"clickableItems && !disabled\"\n [class.tw-text-gray-400]=\"isLast\"\n (click)=\"onItemClick(item)\"\n [title]=\"getTooltipText(item)\"\n [attr.aria-current]=\"isLast ? 'page' : null\">\n \n <!-- Item Icon (if provided) -->\n @if (item.icon) {\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\n {{ item.icon }}\n </cide-ele-icon>\n }\n \n <!-- Item Label -->\n <span class=\"tw-font-medium tw-text-xs\">\n {{ item.label }}\n </span>\n \n <!-- Item Type Badge (for hierarchical style) -->\n @if (style === 'hierarchical' && item.type && item.type !== 'root') {\n <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n {{ item.type }}\n </span>\n }\n </li>\n\n <!-- Separator (except for last item) -->\n @if (!isLast || isOverflowingSignal()) {\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n @if (separator.type === 'custom' && separator.text) {\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator.text }}</span>\n } @else {\n <cide-ele-icon class=\"tw-text-xs\">\n {{ getSeparatorIcon() }}\n </cide-ele-icon>\n }\n </li>\n }\n }\n\n <!-- Overflow Dropdown -->\n @if (isOverflowingSignal() && showDropdownOnOverflow) {\n <li class=\"breadcrumb-item overflow-item\">\n <div class=\"breadcrumb-dropdown-container\">\n <button type=\"button\" \n class=\"overflow-button\"\n (click)=\"onDropdownToggle()\"\n [disabled]=\"disabled\"\n [attr.aria-expanded]=\"showDropdownSignal()\"\n aria-haspopup=\"true\"\n [title]=\"showTooltips ? 'More items' : ''\">\n <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n {{ hiddenItemsSignal().length }}+ more\n </span>\n </button>\n \n <!-- Dropdown Menu -->\n @if (showDropdownSignal()) {\n <div class=\"breadcrumb-dropdown\" role=\"menu\">\n <div class=\"dropdown-header\">\n <span>Hidden Items</span>\n </div>\n \n <!-- Hidden Items -->\n @for (item of hiddenItemsSignal(); track item.id) {\n <button type=\"button\" \n class=\"dropdown-item\"\n (click)=\"onItemClick(item)\"\n [disabled]=\"item.disabled || disabled\"\n role=\"menuitem\">\n @if (item.icon) {\n <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n }\n <span class=\"dropdown-item-label\">{{ item.label }}</span>\n </button>\n }\n \n <!-- Custom Dropdown Options -->\n @if (dropdownOptions.length > 0) {\n <div class=\"dropdown-divider\"></div>\n @for (option of dropdownOptions; track option.id) {\n <button type=\"button\" \n class=\"dropdown-option\"\n (click)=\"onDropdownOptionClick(option)\"\n [disabled]=\"option.disabled || disabled\"\n role=\"menuitem\">\n @if (option.icon) {\n <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n }\n <span class=\"dropdown-option-label\">{{ option.label }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </li>\n }\n </ol>\n </nav>\n }\n\n</div>\n", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:2px 0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:3px 0}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
11392
|
+
}
|
|
11393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
|
|
11394
|
+
type: Component,
|
|
11395
|
+
args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n \n <!-- Loading State -->\n @if (loading) {\n <div class=\"breadcrumb-loading\">\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n <span>Loading...</span>\n </div>\n }\n\n <!-- Main Breadcrumb Content -->\n @if (!loading) {\n <nav class=\"tw-flex tw-items-center tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\n \n <!-- Home Icon (if enabled) -->\n @if (config().showHomeIcon) {\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \n [class.tw-cursor-pointer]=\"clickableItems && !disabled\"\n (click)=\"onHomeClick()\"\n [title]=\"showTooltips ? 'Go to Home' : ''\">\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\n {{ config().homeIcon }}\n </cide-ele-icon>\n </li>\n \n <!-- Separator after home -->\n @if (visibleItemsSignal().length > 0) {\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n @if (separator.type === 'custom' && separator.text) {\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator.text }}</span>\n } @else {\n <cide-ele-icon class=\"tw-text-xs\">\n {{ getSeparatorIcon() }}\n </cide-ele-icon>\n }\n </li>\n }\n }\n\n <!-- Visible Items -->\n @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n [class.tw-cursor-pointer]=\"clickableItems && !disabled\"\n [class.tw-text-gray-400]=\"isLast\"\n (click)=\"onItemClick(item)\"\n [title]=\"getTooltipText(item)\"\n [attr.aria-current]=\"isLast ? 'page' : null\">\n \n <!-- Item Icon (if provided) -->\n @if (item.icon) {\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\n {{ item.icon }}\n </cide-ele-icon>\n }\n \n <!-- Item Label -->\n <span class=\"tw-font-medium tw-text-xs\">\n {{ item.label }}\n </span>\n \n <!-- Item Type Badge (for hierarchical style) -->\n @if (style === 'hierarchical' && item.type && item.type !== 'root') {\n <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n {{ item.type }}\n </span>\n }\n </li>\n\n <!-- Separator (except for last item) -->\n @if (!isLast || isOverflowingSignal()) {\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n @if (separator.type === 'custom' && separator.text) {\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator.text }}</span>\n } @else {\n <cide-ele-icon class=\"tw-text-xs\">\n {{ getSeparatorIcon() }}\n </cide-ele-icon>\n }\n </li>\n }\n }\n\n <!-- Overflow Dropdown -->\n @if (isOverflowingSignal() && showDropdownOnOverflow) {\n <li class=\"breadcrumb-item overflow-item\">\n <div class=\"breadcrumb-dropdown-container\">\n <button type=\"button\" \n class=\"overflow-button\"\n (click)=\"onDropdownToggle()\"\n [disabled]=\"disabled\"\n [attr.aria-expanded]=\"showDropdownSignal()\"\n aria-haspopup=\"true\"\n [title]=\"showTooltips ? 'More items' : ''\">\n <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n {{ hiddenItemsSignal().length }}+ more\n </span>\n </button>\n \n <!-- Dropdown Menu -->\n @if (showDropdownSignal()) {\n <div class=\"breadcrumb-dropdown\" role=\"menu\">\n <div class=\"dropdown-header\">\n <span>Hidden Items</span>\n </div>\n \n <!-- Hidden Items -->\n @for (item of hiddenItemsSignal(); track item.id) {\n <button type=\"button\" \n class=\"dropdown-item\"\n (click)=\"onItemClick(item)\"\n [disabled]=\"item.disabled || disabled\"\n role=\"menuitem\">\n @if (item.icon) {\n <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n }\n <span class=\"dropdown-item-label\">{{ item.label }}</span>\n </button>\n }\n \n <!-- Custom Dropdown Options -->\n @if (dropdownOptions.length > 0) {\n <div class=\"dropdown-divider\"></div>\n @for (option of dropdownOptions; track option.id) {\n <button type=\"button\" \n class=\"dropdown-option\"\n (click)=\"onDropdownOptionClick(option)\"\n [disabled]=\"option.disabled || disabled\"\n role=\"menuitem\">\n @if (option.icon) {\n <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n }\n <span class=\"dropdown-option-label\">{{ option.label }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </li>\n }\n </ol>\n </nav>\n }\n\n</div>\n", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:2px 0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:3px 0}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"] }]
|
|
11396
|
+
}], propDecorators: { items: [{
|
|
11397
|
+
type: Input
|
|
11398
|
+
}], style: [{
|
|
11399
|
+
type: Input
|
|
11400
|
+
}], separator: [{
|
|
11401
|
+
type: Input
|
|
11402
|
+
}], showHomeIcon: [{
|
|
11403
|
+
type: Input
|
|
11404
|
+
}], homeIcon: [{
|
|
11405
|
+
type: Input
|
|
11406
|
+
}], maxItems: [{
|
|
11407
|
+
type: Input
|
|
11408
|
+
}], showDropdownOnOverflow: [{
|
|
11409
|
+
type: Input
|
|
11410
|
+
}], dropdownOptions: [{
|
|
11411
|
+
type: Input
|
|
11412
|
+
}], clickableItems: [{
|
|
11413
|
+
type: Input
|
|
11414
|
+
}], showTooltips: [{
|
|
11415
|
+
type: Input
|
|
11416
|
+
}], responsive: [{
|
|
11417
|
+
type: Input
|
|
11418
|
+
}], compact: [{
|
|
11419
|
+
type: Input
|
|
11420
|
+
}], animated: [{
|
|
11421
|
+
type: Input
|
|
11422
|
+
}], loading: [{
|
|
11423
|
+
type: Input
|
|
11424
|
+
}], disabled: [{
|
|
11425
|
+
type: Input
|
|
11426
|
+
}], itemClick: [{
|
|
11427
|
+
type: Output
|
|
11428
|
+
}], dropdownOptionClick: [{
|
|
11429
|
+
type: Output
|
|
11430
|
+
}], homeClick: [{
|
|
11431
|
+
type: Output
|
|
11432
|
+
}], onDocumentClick: [{
|
|
11433
|
+
type: HostListener,
|
|
11434
|
+
args: ['document:click', ['$event']]
|
|
11435
|
+
}] } });
|
|
11436
|
+
|
|
11437
|
+
// Breadcrumb Component Interfaces and Types
|
|
11438
|
+
// Predefined configurations for each style
|
|
11439
|
+
const BREADCRUMB_STYLES = {
|
|
11440
|
+
modern: {
|
|
11441
|
+
style: 'modern',
|
|
11442
|
+
separator: { type: 'chevron' },
|
|
11443
|
+
showHomeIcon: true,
|
|
11444
|
+
homeIcon: 'home',
|
|
11445
|
+
maxItems: 5,
|
|
11446
|
+
showDropdownOnOverflow: true,
|
|
11447
|
+
dropdownOptions: [],
|
|
11448
|
+
clickableItems: true,
|
|
11449
|
+
showTooltips: true,
|
|
11450
|
+
responsive: true,
|
|
11451
|
+
compact: false,
|
|
11452
|
+
animated: true
|
|
11453
|
+
},
|
|
11454
|
+
classic: {
|
|
11455
|
+
style: 'classic',
|
|
11456
|
+
separator: { type: 'slash' },
|
|
11457
|
+
showHomeIcon: false,
|
|
11458
|
+
homeIcon: 'home',
|
|
11459
|
+
maxItems: 8,
|
|
11460
|
+
showDropdownOnOverflow: false,
|
|
11461
|
+
dropdownOptions: [],
|
|
11462
|
+
clickableItems: true,
|
|
11463
|
+
showTooltips: false,
|
|
11464
|
+
responsive: false,
|
|
11465
|
+
compact: true,
|
|
11466
|
+
animated: false
|
|
11467
|
+
},
|
|
11468
|
+
minimal: {
|
|
11469
|
+
style: 'minimal',
|
|
11470
|
+
separator: { type: 'dot' },
|
|
11471
|
+
showHomeIcon: false,
|
|
11472
|
+
homeIcon: 'home',
|
|
11473
|
+
maxItems: 3,
|
|
11474
|
+
showDropdownOnOverflow: true,
|
|
11475
|
+
dropdownOptions: [],
|
|
11476
|
+
clickableItems: false,
|
|
11477
|
+
showTooltips: true,
|
|
11478
|
+
responsive: true,
|
|
11479
|
+
compact: true,
|
|
11480
|
+
animated: false
|
|
11481
|
+
},
|
|
11482
|
+
hierarchical: {
|
|
11483
|
+
style: 'hierarchical',
|
|
11484
|
+
separator: { type: 'chevron' },
|
|
11485
|
+
showHomeIcon: true,
|
|
11486
|
+
homeIcon: 'home',
|
|
11487
|
+
maxItems: 4,
|
|
11488
|
+
showDropdownOnOverflow: true,
|
|
11489
|
+
dropdownOptions: [],
|
|
11490
|
+
clickableItems: true,
|
|
11491
|
+
showTooltips: true,
|
|
11492
|
+
responsive: true,
|
|
11493
|
+
compact: false,
|
|
11494
|
+
animated: true
|
|
11495
|
+
}
|
|
11496
|
+
};
|
|
11497
|
+
// Utility functions
|
|
11498
|
+
class BreadcrumbUtils {
|
|
11499
|
+
/**
|
|
11500
|
+
* Create a breadcrumb item
|
|
11501
|
+
*/
|
|
11502
|
+
static createItem(id, label, options = {}) {
|
|
11503
|
+
return {
|
|
11504
|
+
id,
|
|
11505
|
+
label,
|
|
11506
|
+
...options
|
|
11507
|
+
};
|
|
11508
|
+
}
|
|
11509
|
+
/**
|
|
11510
|
+
* Create a dropdown option
|
|
11511
|
+
*/
|
|
11512
|
+
static createDropdownOption(id, label, options = {}) {
|
|
11513
|
+
return {
|
|
11514
|
+
id,
|
|
11515
|
+
label,
|
|
11516
|
+
...options
|
|
11517
|
+
};
|
|
11518
|
+
}
|
|
11519
|
+
/**
|
|
11520
|
+
* Create a separator
|
|
11521
|
+
*/
|
|
11522
|
+
static createSeparator(type, options = {}) {
|
|
11523
|
+
return {
|
|
11524
|
+
type,
|
|
11525
|
+
...options
|
|
11526
|
+
};
|
|
11527
|
+
}
|
|
11528
|
+
/**
|
|
11529
|
+
* Get default configuration for a style
|
|
11530
|
+
*/
|
|
11531
|
+
static getDefaultConfig(style) {
|
|
11532
|
+
return { ...BREADCRUMB_STYLES[style] };
|
|
11533
|
+
}
|
|
11534
|
+
/**
|
|
11535
|
+
* Merge configurations
|
|
11536
|
+
*/
|
|
11537
|
+
static mergeConfig(base, override) {
|
|
11538
|
+
return { ...base, ...override };
|
|
11539
|
+
}
|
|
11540
|
+
}
|
|
11541
|
+
|
|
10922
11542
|
/*
|
|
10923
11543
|
* Public API Surface of cloud-ide-element
|
|
10924
11544
|
* Here we can add what need to be exported from library
|
|
@@ -10928,5 +11548,5 @@ var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
|
|
|
10928
11548
|
* Generated bundle index. Do not edit.
|
|
10929
11549
|
*/
|
|
10930
11550
|
|
|
10931
|
-
export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, TooltipDirective };
|
|
11551
|
+
export { BREADCRUMB_STYLES, BreadcrumbUtils, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, TooltipDirective };
|
|
10932
11552
|
//# sourceMappingURL=cloud-ide-element.mjs.map
|