@dev-tcloud/tcloud-ui 6.30.1-beta.7 → 7.0.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.
|
@@ -2024,11 +2024,11 @@ class TCloudUiDatepickerComponent {
|
|
|
2024
2024
|
this.onTouchedCallback = fn;
|
|
2025
2025
|
}
|
|
2026
2026
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2027
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n@if (modeInput) {\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n}\n\n<!-- Inline mode -->\n@if (!modeInput) {\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n}\n\n<!-- EX de uso\n<tc-datepicker\n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n</tc-datepicker>\n\n// multiple = false\n// dateValue - string - pode ser: 12/12/2022\n\n// multiple = true\n// dateValue - string - pode ser: 11/12/2022,12/12/2022 ...\n\n<pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color
|
|
2027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n@if (modeInput) {\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n}\n\n<!-- Inline mode -->\n@if (!modeInput) {\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n}\n\n<!-- EX de uso\n<tc-datepicker\n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n</tc-datepicker>\n\n// multiple = false\n// dateValue - string - pode ser: 12/12/2022\n\n// multiple = true\n// dateValue - string - pode ser: 11/12/2022,12/12/2022 ...\n\n<pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:3px;color:var(--c-neutral-700);height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{background-color:transparent;border:none;color:var(--c-neutral-700);margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:var(--c-neutral-100)!important}.datepicker-picker{border:1px solid var(--c-neutral-300);padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2028
2028
|
}
|
|
2029
2029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
|
|
2030
2030
|
type: Component,
|
|
2031
|
-
args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [FormsModule, DateBRPipe], template: "<!-- Input mode -->\n@if (modeInput) {\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n}\n\n<!-- Inline mode -->\n@if (!modeInput) {\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n}\n\n<!-- EX de uso\n<tc-datepicker\n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n</tc-datepicker>\n\n// multiple = false\n// dateValue - string - pode ser: 12/12/2022\n\n// multiple = true\n// dateValue - string - pode ser: 11/12/2022,12/12/2022 ...\n\n<pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color
|
|
2031
|
+
args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [FormsModule, DateBRPipe], template: "<!-- Input mode -->\n@if (modeInput) {\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n}\n\n<!-- Inline mode -->\n@if (!modeInput) {\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n}\n\n<!-- EX de uso\n<tc-datepicker\n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n</tc-datepicker>\n\n// multiple = false\n// dateValue - string - pode ser: 12/12/2022\n\n// multiple = true\n// dateValue - string - pode ser: 11/12/2022,12/12/2022 ...\n\n<pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:3px;color:var(--c-neutral-700);height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{background-color:transparent;border:none;color:var(--c-neutral-700);margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:var(--c-neutral-100)!important}.datepicker-picker{border:1px solid var(--c-neutral-300);padding:10px 15px}\n"] }]
|
|
2032
2032
|
}], ctorParameters: () => [{ type: DateBRPipe }, { type: TCloudUiLayoutService }], propDecorators: { multiple: [{
|
|
2033
2033
|
type: Input
|
|
2034
2034
|
}], maxNumberOfDates: [{
|
|
@@ -8570,13 +8570,13 @@ class TCloudUiCalendarComponent {
|
|
|
8570
8570
|
return this.appointments.find(appointment => appointment.appointmentDate === dateString);
|
|
8571
8571
|
}
|
|
8572
8572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiCalendarComponent, isStandalone: true, selector: "tcloud-ui-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tcloud-ui-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
8573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiCalendarComponent, isStandalone: true, selector: "tcloud-ui-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tcloud-ui-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
8574
8574
|
}
|
|
8575
8575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiCalendarComponent, decorators: [{
|
|
8576
8576
|
type: Component,
|
|
8577
8577
|
args: [{ selector: 'tcloud-ui-calendar', imports: [
|
|
8578
8578
|
CommonModule,
|
|
8579
|
-
], template: "<div class=\"tcloud-ui-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
8579
|
+
], template: "<div class=\"tcloud-ui-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
8580
8580
|
}], propDecorators: { appointments: [{
|
|
8581
8581
|
type: Input
|
|
8582
8582
|
}], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], onSelectDate: [{ type: i0.Output, args: ["onSelectDate"] }] } });
|
|
@@ -11037,13 +11037,13 @@ class TcRevCalendarComponent {
|
|
|
11037
11037
|
return this.appointments.find(appointment => appointment.appointmentDate === dateString);
|
|
11038
11038
|
}
|
|
11039
11039
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevCalendarComponent, isStandalone: true, selector: "tc-rev-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tc-rev-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
11040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevCalendarComponent, isStandalone: true, selector: "tc-rev-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tc-rev-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
11041
11041
|
}
|
|
11042
11042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevCalendarComponent, decorators: [{
|
|
11043
11043
|
type: Component,
|
|
11044
11044
|
args: [{ selector: 'tc-rev-calendar', imports: [
|
|
11045
11045
|
CommonModule,
|
|
11046
|
-
], template: "<div class=\"tc-rev-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
11046
|
+
], template: "<div class=\"tc-rev-calendar\">\n <div class=\"calendar-header\">\n @if (viewMode === 'days') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n }\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n <div class=\"calendar-grid\">\n @for (day of daysOfWeek; track day) {\n <div class=\"day-header\">{{ day }}</div>\n }\n @for (day of calendarDays; track day) {\n <button\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n @if (isAppointment(day.date)) {\n <span\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n }\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n}\n\n@if (viewMode === 'months') {\n <div class=\"calendar-grid months\">\n @for (month of calendarMonths; track month; let i = $index) {\n <div\n class=\"month\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n }\n </div>\n}\n\n@if (viewMode === 'years') {\n <div class=\"calendar-grid years\">\n @for (year of calendarYears; track year) {\n <div\n class=\"year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
11047
11047
|
}], propDecorators: { appointments: [{
|
|
11048
11048
|
type: Input
|
|
11049
11049
|
}], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], onSelectDate: [{ type: i0.Output, args: ["onSelectDate"] }] } });
|