cloud-ide-element 1.0.22 → 1.0.23
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.
|
@@ -1131,7 +1131,7 @@ class CideInputComponent {
|
|
|
1131
1131
|
useExisting: forwardRef(() => CideInputComponent),
|
|
1132
1132
|
},
|
|
1133
1133
|
CapitalizePipe
|
|
1134
|
-
], 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------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date') {\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) -->\r\n @if (type !== 'date') {\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 </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-lg\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-lg tw-font-semibold 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-lg\">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-lg\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-lg tw-font-semibold 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-lg\">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}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1134
|
+
], 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-lg\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-lg tw-font-semibold 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-lg\">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-lg\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-lg tw-font-semibold 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-lg\">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}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1135
1135
|
// directives
|
|
1136
1136
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type:
|
|
1137
1137
|
// for ngModel
|
|
@@ -1157,7 +1157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1157
1157
|
useExisting: forwardRef(() => CideInputComponent),
|
|
1158
1158
|
},
|
|
1159
1159
|
CapitalizePipe
|
|
1160
|
-
], template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date') {\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) -->\r\n @if (type !== 'date') {\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 </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-lg\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-lg tw-font-semibold 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-lg\">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-lg\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-lg tw-font-semibold 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-lg\">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}\n"] }]
|
|
1160
|
+
], 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-lg\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-lg tw-font-semibold 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-lg\">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-lg\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-lg tw-font-semibold 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-lg\">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}\n"] }]
|
|
1161
1161
|
}], ctorParameters: () => [], propDecorators: { fill: [{
|
|
1162
1162
|
type: Input
|
|
1163
1163
|
}], label: [{
|