asksuite-citrus 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/citrus-i18n/pt.json +2 -2
- package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs +17 -3
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +6 -3
- package/fesm2022/asksuite-citrus.mjs +21 -4
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.d.ts +5 -1
- package/lib/components/date-picker/date-picker.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -887,10 +887,14 @@ const formatTo = (from) => from.endOf('day').format(DEFAULT_DATE_FORMAT);
|
|
|
887
887
|
class DatePickerCalendarComponent {
|
|
888
888
|
constructor() {
|
|
889
889
|
this.isRange = false;
|
|
890
|
+
this.disableFutureDate = false;
|
|
890
891
|
this.dateChange = new EventEmitter();
|
|
891
892
|
this._weekDays = [];
|
|
892
893
|
this._days = [];
|
|
893
894
|
}
|
|
895
|
+
get shouldDisableNextMonth() {
|
|
896
|
+
return this.isFutureDate(this.displayDate.clone().add(1, 'month').unix());
|
|
897
|
+
}
|
|
894
898
|
get days() {
|
|
895
899
|
return this._days;
|
|
896
900
|
}
|
|
@@ -1025,6 +1029,7 @@ class DatePickerCalendarComponent {
|
|
|
1025
1029
|
month: day.month(),
|
|
1026
1030
|
weekDay: day.day(),
|
|
1027
1031
|
formatted: day.format(DEFAULT_DATE_FORMAT),
|
|
1032
|
+
isFuture: this.isFutureDate(day.unix())
|
|
1028
1033
|
};
|
|
1029
1034
|
}
|
|
1030
1035
|
getDayFromString(date) {
|
|
@@ -1086,14 +1091,23 @@ class DatePickerCalendarComponent {
|
|
|
1086
1091
|
this.innerDate = this.getDayFromMoment(momentDate);
|
|
1087
1092
|
this.dateChange.emit(momentDate.format(DEFAULT_DATE_FORMAT));
|
|
1088
1093
|
}
|
|
1094
|
+
isFutureDate(timestamp) {
|
|
1095
|
+
if (!this.disableFutureDate)
|
|
1096
|
+
return false;
|
|
1097
|
+
const date = moment.unix(timestamp);
|
|
1098
|
+
const now = moment();
|
|
1099
|
+
return date.isAfter(now);
|
|
1100
|
+
}
|
|
1089
1101
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button
|
|
1102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", disableFutureDate: "disableFutureDate", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button\n type=\"button\"\n class=\"selector-button\"\n [disabled]=\"shouldDisableNextMonth\"\n (click)=\"incrementMonth(1)\"\n >\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <button\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [disabled]=\"day.isFuture\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </button>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-button{padding:8px 24px;border-radius:6px;border:none;outline:none;height:48px;font-size:1rem;transition:background-color .1s,box-shadow .1s;cursor:pointer;font-weight:500;background:white;color:var(--grey-500)}.ask-button:not(.-primary,.-secondary){box-shadow:0 1px 2px #2a304229}.ask-button:not(.-primary):hover:not(:disabled){box-shadow:0 0 6px #2a304229}.ask-button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}.ask-button:active:not(:disabled){background-color:#f34915}.ask-button:disabled{cursor:not-allowed;background-color:#9aa5b1}.ask-button.-primary{background:#FF5724;color:#fff}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button:disabled{cursor:default;opacity:0}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border:none;color:var(--font-color-200);background:none;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day:disabled{text-decoration:line-through;color:var(--font-color-300)}.days-block>.day:disabled:hover{color:var(--font-color-300);background:none;cursor:not-allowed}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
1091
1103
|
}
|
|
1092
1104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, decorators: [{
|
|
1093
1105
|
type: Component,
|
|
1094
|
-
args: [{ selector: 'ask-date-picker-calendar', template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button
|
|
1106
|
+
args: [{ selector: 'ask-date-picker-calendar', template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button\n type=\"button\"\n class=\"selector-button\"\n [disabled]=\"shouldDisableNextMonth\"\n (click)=\"incrementMonth(1)\"\n >\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <button\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [disabled]=\"day.isFuture\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </button>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-button{padding:8px 24px;border-radius:6px;border:none;outline:none;height:48px;font-size:1rem;transition:background-color .1s,box-shadow .1s;cursor:pointer;font-weight:500;background:white;color:var(--grey-500)}.ask-button:not(.-primary,.-secondary){box-shadow:0 1px 2px #2a304229}.ask-button:not(.-primary):hover:not(:disabled){box-shadow:0 0 6px #2a304229}.ask-button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}.ask-button:active:not(:disabled){background-color:#f34915}.ask-button:disabled{cursor:not-allowed;background-color:#9aa5b1}.ask-button.-primary{background:#FF5724;color:#fff}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button:disabled{cursor:default;opacity:0}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border:none;color:var(--font-color-200);background:none;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day:disabled{text-decoration:line-through;color:var(--font-color-300)}.days-block>.day:disabled:hover{color:var(--font-color-300);background:none;cursor:not-allowed}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"] }]
|
|
1095
1107
|
}], propDecorators: { isRange: [{
|
|
1096
1108
|
type: Input
|
|
1109
|
+
}], disableFutureDate: [{
|
|
1110
|
+
type: Input
|
|
1097
1111
|
}], date: [{
|
|
1098
1112
|
type: Input
|
|
1099
1113
|
}], dateChange: [{
|
|
@@ -1109,6 +1123,7 @@ class DatePickerComponent {
|
|
|
1109
1123
|
constructor() {
|
|
1110
1124
|
this.date = moment().format();
|
|
1111
1125
|
this.isRange = false;
|
|
1126
|
+
this.disableFutureDate = false;
|
|
1112
1127
|
this.periodsFilter = [];
|
|
1113
1128
|
this.dateChange = new EventEmitter();
|
|
1114
1129
|
this.close = new EventEmitter();
|
|
@@ -1217,15 +1232,17 @@ class DatePickerComponent {
|
|
|
1217
1232
|
this.onTouch = fn;
|
|
1218
1233
|
}
|
|
1219
1234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1220
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange", periodsFilter: "periodsFilter" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.label === selectedPeriod?.label }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-button{padding:8px 24px;border-radius:6px;border:none;outline:none;height:48px;font-size:1rem;transition:background-color .1s,box-shadow .1s;cursor:pointer;font-weight:500;background:white;color:var(--grey-500)}.ask-button:not(.-primary,.-secondary){box-shadow:0 1px 2px #2a304229}.ask-button:not(.-primary):hover:not(:disabled){box-shadow:0 0 6px #2a304229}.ask-button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}.ask-button:active:not(:disabled){background-color:#f34915}.ask-button:disabled{cursor:not-allowed;background-color:#9aa5b1}.ask-button.-primary{background:#FF5724;color:#fff}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange", disableFutureDate: "disableFutureDate", periodsFilter: "periodsFilter" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.label === selectedPeriod?.label }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n [disableFutureDate]=\"disableFutureDate\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-button{padding:8px 24px;border-radius:6px;border:none;outline:none;height:48px;font-size:1rem;transition:background-color .1s,box-shadow .1s;cursor:pointer;font-weight:500;background:white;color:var(--grey-500)}.ask-button:not(.-primary,.-secondary){box-shadow:0 1px 2px #2a304229}.ask-button:not(.-primary):hover:not(:disabled){box-shadow:0 0 6px #2a304229}.ask-button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}.ask-button:active:not(:disabled){background-color:#f34915}.ask-button:disabled{cursor:not-allowed;background-color:#9aa5b1}.ask-button.-primary{background:#FF5724;color:#fff}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "disableFutureDate", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1221
1236
|
}
|
|
1222
1237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1223
1238
|
type: Component,
|
|
1224
|
-
args: [{ selector: 'ask-date-picker', providers: [VALUE_ACCESSOR], template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.label === selectedPeriod?.label }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-button{padding:8px 24px;border-radius:6px;border:none;outline:none;height:48px;font-size:1rem;transition:background-color .1s,box-shadow .1s;cursor:pointer;font-weight:500;background:white;color:var(--grey-500)}.ask-button:not(.-primary,.-secondary){box-shadow:0 1px 2px #2a304229}.ask-button:not(.-primary):hover:not(:disabled){box-shadow:0 0 6px #2a304229}.ask-button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}.ask-button:active:not(:disabled){background-color:#f34915}.ask-button:disabled{cursor:not-allowed;background-color:#9aa5b1}.ask-button.-primary{background:#FF5724;color:#fff}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"] }]
|
|
1239
|
+
args: [{ selector: 'ask-date-picker', providers: [VALUE_ACCESSOR], template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.label === selectedPeriod?.label }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n [disableFutureDate]=\"disableFutureDate\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-button{padding:8px 24px;border-radius:6px;border:none;outline:none;height:48px;font-size:1rem;transition:background-color .1s,box-shadow .1s;cursor:pointer;font-weight:500;background:white;color:var(--grey-500)}.ask-button:not(.-primary,.-secondary){box-shadow:0 1px 2px #2a304229}.ask-button:not(.-primary):hover:not(:disabled){box-shadow:0 0 6px #2a304229}.ask-button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}.ask-button:active:not(:disabled){background-color:#f34915}.ask-button:disabled{cursor:not-allowed;background-color:#9aa5b1}.ask-button.-primary{background:#FF5724;color:#fff}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"] }]
|
|
1225
1240
|
}], propDecorators: { date: [{
|
|
1226
1241
|
type: Input
|
|
1227
1242
|
}], isRange: [{
|
|
1228
1243
|
type: Input
|
|
1244
|
+
}], disableFutureDate: [{
|
|
1245
|
+
type: Input
|
|
1229
1246
|
}], periodsFilter: [{
|
|
1230
1247
|
type: Input
|
|
1231
1248
|
}], dateChange: [{
|