@dev-tcloud/tcloud-ui 7.0.0 → 7.0.3

package/fesm2022/dev-tcloud-tcloud-ui.mjs

@@ -2024,11 +2024,11 @@ class TCloudUiDatepickerComponent {
         this.onTouchedCallback = fn;
     }
     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 }); }
-    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:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;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{border:none;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:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
             type: Component,
-            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:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;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{border:none;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:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: DateBRPipe }, { type: TCloudUiLayoutService }], propDecorators: { multiple: [{
                 type: Input
             }], maxNumberOfDates: [{
@@ -3773,7 +3773,7 @@ class TCloudUiModalComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiModalComponent, isStandalone: true, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", confirmInput: "confirmInput", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", position: "position", sticky: "sticky", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
             TcloudModalService,
             TCloudUiLayoutService
-        ], ngImport: i0, template: "@if (control_open) {\n  <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n  <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n    <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n      <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n        <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n          @if( layout === 'classic'){\n            <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n            }@else{\n            <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n          }\n        </div>\n        @if (title) {\n          <h4 [innerHTML]=\"title\"></h4>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n  <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n  <tcloud-ui-modal-body>\n    Conte\u00FAdo do modal aqui\n  </tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n  <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        ], ngImport: i0, template: "@if (control_open) {\n  <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n  <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n    <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n      <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n        <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n          @if( layout === 'classic'){\n            <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n            }@else{\n            <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n          }\n        </div>\n        @if (title) {\n          <h4 [innerHTML]=\"title\"></h4>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n  <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n  <tcloud-ui-modal-body>\n    Conte\u00FAdo do modal aqui\n  </tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n  <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky>.tc-modal{border-radius:0}.sub-modal.is-sticky.position-left>.tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right>.tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom>.tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center>.tc-modal,.sub-modal.is-sticky.position-bottom>.tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('fade', [
                 transition('void => *', [
                     style({ opacity: 0, transform: '{{enterTransform}}' }),
@@ -3800,7 +3800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                                 animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
                             ], { params: { leaveTransform: 'translateY(-38%)' } })
                         ])
-                    ], standalone: true, imports: [CommonModule], template: "@if (control_open) {\n  <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n  <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n    <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n      <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n        <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n          @if( layout === 'classic'){\n            <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n            }@else{\n            <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n          }\n        </div>\n        @if (title) {\n          <h4 [innerHTML]=\"title\"></h4>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n  <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n  <tcloud-ui-modal-body>\n    Conte\u00FAdo do modal aqui\n  </tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n  <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
+                    ], standalone: true, imports: [CommonModule], template: "@if (control_open) {\n  <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n  <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n    <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n      <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n        <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n          @if( layout === 'classic'){\n            <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n            }@else{\n            <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n              @if (!loading) {\n                <i class=\"fas fa-times\"></i>\n              }\n              @if (loading) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              }\n            </button>\n          }\n        </div>\n        @if (title) {\n          <h4 [innerHTML]=\"title\"></h4>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n  <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n  <tcloud-ui-modal-body>\n    Conte\u00FAdo do modal aqui\n  </tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n  <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky>.tc-modal{border-radius:0}.sub-modal.is-sticky.position-left>.tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right>.tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom>.tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center>.tc-modal,.sub-modal.is-sticky.position-bottom>.tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
                 type: Input
             }], confirmText: [{
@@ -8570,13 +8570,13 @@ class TCloudUiCalendarComponent {
         return this.appointments.find(appointment => appointment.appointmentDate === dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }}&nbsp;-&nbsp;</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"] }] }); }
+    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 }}&nbsp;-&nbsp;</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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-calendar', imports: [
                         CommonModule,
-                    ], 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 }}&nbsp;-&nbsp;</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"] }]
+                    ], 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 }}&nbsp;-&nbsp;</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"] }]
         }], propDecorators: { appointments: [{
                 type: Input
             }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], onSelectDate: [{ type: i0.Output, args: ["onSelectDate"] }] } });
@@ -11037,13 +11037,13 @@ class TcRevCalendarComponent {
         return this.appointments.find(appointment => appointment.appointmentDate === dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }}&nbsp;-&nbsp;</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"] }] }); }
+    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 }}&nbsp;-&nbsp;</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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tc-rev-calendar', imports: [
                         CommonModule,
-                    ], 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 }}&nbsp;-&nbsp;</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"] }]
+                    ], 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 }}&nbsp;-&nbsp;</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"] }]
         }], propDecorators: { appointments: [{
                 type: Input
             }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], onSelectDate: [{ type: i0.Output, args: ["onSelectDate"] }] } });