asksuite-citrus 0.2.0 → 0.2.1
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/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs +30 -19
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +68 -21
- package/fesm2022/asksuite-citrus.mjs +94 -37
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.d.ts +19 -7
- package/lib/components/date-picker/date-picker.component.d.ts +14 -6
- package/package.json +1 -1
|
@@ -686,9 +686,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
686
686
|
args: ["window:mousedown", ['$event']]
|
|
687
687
|
}] } });
|
|
688
688
|
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
689
|
+
var PeriodLabel;
|
|
690
|
+
(function (PeriodLabel) {
|
|
691
|
+
PeriodLabel["TODAY"] = "TODAY";
|
|
692
|
+
PeriodLabel["YESTERDAY"] = "YESTERDAY";
|
|
693
|
+
PeriodLabel["LAST_7_DAYS"] = "LAST_7_DAYS";
|
|
694
|
+
PeriodLabel["LAST_30_DAYS"] = "LAST_30_DAYS";
|
|
695
|
+
PeriodLabel["THIS_MONTH"] = "THIS_MONTH";
|
|
696
|
+
PeriodLabel["LAST_QUARTER"] = "LAST_QUARTER";
|
|
697
|
+
PeriodLabel["CUSTOM_PERIOD"] = "CUSTOM_PERIOD";
|
|
698
|
+
})(PeriodLabel || (PeriodLabel = {}));
|
|
699
|
+
const DEFAULT_DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ';
|
|
700
|
+
const formatFrom = (from) => from.startOf('day').format(DEFAULT_DATE_FORMAT);
|
|
701
|
+
const formatTo = (from) => from.endOf('day').format(DEFAULT_DATE_FORMAT);
|
|
692
702
|
class DatePickerCalendarComponent {
|
|
693
703
|
constructor() {
|
|
694
704
|
this.isRange = false;
|
|
@@ -727,15 +737,15 @@ class DatePickerCalendarComponent {
|
|
|
727
737
|
}
|
|
728
738
|
isFirstSelectedDay(day) {
|
|
729
739
|
if (this.isRange) {
|
|
730
|
-
return day.
|
|
740
|
+
return day.formatted === this.innerDate.from?.formatted;
|
|
731
741
|
}
|
|
732
|
-
return this.innerDate.
|
|
742
|
+
return this.innerDate.formatted === day.formatted;
|
|
733
743
|
}
|
|
734
744
|
isLastSelectedDay(day) {
|
|
735
745
|
if (this.isRange) {
|
|
736
|
-
return day.
|
|
746
|
+
return day.formatted === (this.innerDate.to?.formatted || this.innerDate.from?.formatted);
|
|
737
747
|
}
|
|
738
|
-
return this.innerDate.
|
|
748
|
+
return this.innerDate.formatted === day.formatted;
|
|
739
749
|
}
|
|
740
750
|
ngOnInit() {
|
|
741
751
|
this.assignInitialValues();
|
|
@@ -746,9 +756,9 @@ class DatePickerCalendarComponent {
|
|
|
746
756
|
const receivedDate = this.date;
|
|
747
757
|
if (receivedDate.from && receivedDate.to) {
|
|
748
758
|
this.innerDate = {
|
|
749
|
-
from: this.
|
|
750
|
-
to: this.
|
|
751
|
-
label: receivedDate.label || 'CUSTOM_PERIOD'
|
|
759
|
+
from: this.getDayFromString(receivedDate.from),
|
|
760
|
+
to: this.getDayFromString(receivedDate.to),
|
|
761
|
+
label: PeriodLabel[receivedDate.label || 'CUSTOM_PERIOD'].toString()
|
|
752
762
|
};
|
|
753
763
|
}
|
|
754
764
|
else {
|
|
@@ -759,7 +769,7 @@ class DatePickerCalendarComponent {
|
|
|
759
769
|
this.displayDate = moment.unix(this.innerDate.from?.timestamp || (Date.now() / 1000));
|
|
760
770
|
}
|
|
761
771
|
else {
|
|
762
|
-
this.innerDate = this.
|
|
772
|
+
this.innerDate = this.getDayFromString(this.date);
|
|
763
773
|
this.displayDate = moment.unix(this.innerDate.timestamp);
|
|
764
774
|
}
|
|
765
775
|
this.firstDayOfWeek = this.displayDate.clone().startOf('week').day();
|
|
@@ -828,14 +838,15 @@ class DatePickerCalendarComponent {
|
|
|
828
838
|
timestamp: day.unix(),
|
|
829
839
|
day: day.format('D'),
|
|
830
840
|
month: day.month(),
|
|
831
|
-
weekDay: day.day()
|
|
841
|
+
weekDay: day.day(),
|
|
842
|
+
formatted: day.format(DEFAULT_DATE_FORMAT),
|
|
832
843
|
};
|
|
833
844
|
}
|
|
834
|
-
|
|
835
|
-
return this.getDayFromMoment(moment(date)
|
|
845
|
+
getDayFromString(date) {
|
|
846
|
+
return this.getDayFromMoment(moment(date));
|
|
836
847
|
}
|
|
837
848
|
getDateFromDay(day) {
|
|
838
|
-
return moment.unix(day.timestamp).startOf('day').
|
|
849
|
+
return moment.unix(day.timestamp).startOf('day').format(DEFAULT_DATE_FORMAT);
|
|
839
850
|
}
|
|
840
851
|
incrementMonth(amount) {
|
|
841
852
|
this.displayDate.add(amount, 'month');
|
|
@@ -878,17 +889,17 @@ class DatePickerCalendarComponent {
|
|
|
878
889
|
}
|
|
879
890
|
emitRange(range) {
|
|
880
891
|
const newRange = {};
|
|
881
|
-
newRange.label =
|
|
892
|
+
newRange.label = PeriodLabel.CUSTOM_PERIOD;
|
|
882
893
|
if (range.from) {
|
|
883
894
|
newRange.from = this.getDateFromDay(range.from);
|
|
884
895
|
if (range.to)
|
|
885
|
-
newRange.to =
|
|
896
|
+
newRange.to = formatTo(moment.unix(range.to.timestamp));
|
|
886
897
|
}
|
|
887
898
|
this.dateChange.emit(newRange);
|
|
888
899
|
}
|
|
889
900
|
handleSingleSelect(momentDate) {
|
|
890
901
|
this.innerDate = this.getDayFromMoment(momentDate);
|
|
891
|
-
this.dateChange.emit(
|
|
902
|
+
this.dateChange.emit(momentDate.format(DEFAULT_DATE_FORMAT));
|
|
892
903
|
}
|
|
893
904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
894
905
|
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 type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\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 <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\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 </span>\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}.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}.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>.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-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.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"] }] }); }
|
|
@@ -904,71 +915,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
904
915
|
type: Output
|
|
905
916
|
}] } });
|
|
906
917
|
|
|
918
|
+
const VALUE_ACCESSOR = {
|
|
919
|
+
provide: NG_VALUE_ACCESSOR,
|
|
920
|
+
multi: true,
|
|
921
|
+
useExisting: forwardRef(() => DatePickerComponent),
|
|
922
|
+
};
|
|
907
923
|
class DatePickerComponent {
|
|
908
924
|
constructor() {
|
|
909
925
|
this.periods = [
|
|
910
|
-
{ label:
|
|
911
|
-
{ label:
|
|
912
|
-
{ label:
|
|
913
|
-
{ label:
|
|
914
|
-
{ label:
|
|
915
|
-
{ label:
|
|
916
|
-
{ label:
|
|
926
|
+
{ label: PeriodLabel.TODAY, getRange: () => ({ from: formatFrom(moment()), to: formatTo(moment()) }), selected: false },
|
|
927
|
+
{ label: PeriodLabel.YESTERDAY, getRange: () => ({ from: formatFrom(moment().subtract(1, 'day')), to: formatTo(moment().subtract(1, 'day')) }), selected: false },
|
|
928
|
+
{ label: PeriodLabel.LAST_7_DAYS, getRange: () => ({ from: formatFrom(moment().subtract(1, 'week')), to: formatTo(moment()) }), selected: false },
|
|
929
|
+
{ label: PeriodLabel.LAST_30_DAYS, getRange: () => ({ from: formatFrom(moment().subtract(30, 'days')), to: formatTo(moment()) }), selected: false },
|
|
930
|
+
{ label: PeriodLabel.THIS_MONTH, getRange: () => ({ from: formatFrom(moment().startOf('month')), to: formatTo(moment().endOf('month')) }), selected: false },
|
|
931
|
+
{ label: PeriodLabel.LAST_QUARTER, getRange: () => ({ from: formatFrom(moment().subtract(3, 'months')), to: formatTo(moment().endOf('month')) }), selected: false },
|
|
932
|
+
{ label: PeriodLabel.CUSTOM_PERIOD, getRange: () => ({}), isCustomRange: true, selected: false },
|
|
917
933
|
];
|
|
918
|
-
this.date =
|
|
934
|
+
this.date = moment().format();
|
|
919
935
|
this.isRange = false;
|
|
920
936
|
this.dateChange = new EventEmitter();
|
|
921
937
|
this.close = new EventEmitter();
|
|
922
938
|
this.isCustomRange = false;
|
|
939
|
+
this.onChange = (value) => { };
|
|
940
|
+
this.onTouch = () => { };
|
|
923
941
|
}
|
|
924
942
|
get from() {
|
|
925
|
-
if (this.
|
|
943
|
+
if (!this.isRange) {
|
|
926
944
|
return;
|
|
927
945
|
}
|
|
928
946
|
return this.date.from;
|
|
929
947
|
}
|
|
930
948
|
get to() {
|
|
931
|
-
if (this.
|
|
949
|
+
if (!this.isRange) {
|
|
932
950
|
return;
|
|
933
951
|
}
|
|
934
952
|
return this.date.to;
|
|
935
953
|
}
|
|
936
954
|
get dateDisplay() {
|
|
937
|
-
const from = this.from ? moment(this.from).
|
|
938
|
-
const to = this.to ? moment(this.to).
|
|
955
|
+
const from = this.from ? moment(this.from).format('L') : '';
|
|
956
|
+
const to = this.to ? moment(this.to).format('L') : '';
|
|
939
957
|
return `${from} ${to ? '- ' + to : ''}`;
|
|
940
958
|
}
|
|
941
959
|
ngOnInit() {
|
|
942
960
|
}
|
|
943
961
|
selectPeriod(period) {
|
|
944
|
-
this.periods.forEach(period => period.selected = false);
|
|
962
|
+
this.periods.forEach((period) => period.selected = false);
|
|
945
963
|
this.date = period.getRange();
|
|
946
964
|
this.date.label = period.label;
|
|
947
965
|
this.isCustomRange = period.isCustomRange || false;
|
|
948
966
|
period.selected = true;
|
|
949
967
|
if (!this.isCustomRange) {
|
|
950
|
-
this.
|
|
968
|
+
this.emitValue();
|
|
951
969
|
}
|
|
952
970
|
}
|
|
953
971
|
handleDateChange(value) {
|
|
954
972
|
this.date = value;
|
|
955
973
|
if (!this.isRange) {
|
|
956
|
-
this.
|
|
974
|
+
this.emitValue();
|
|
957
975
|
}
|
|
958
976
|
}
|
|
959
|
-
|
|
977
|
+
emitValue() {
|
|
960
978
|
this.dateChange.emit(this.date);
|
|
979
|
+
this.onChange(this.date);
|
|
961
980
|
this.close.emit();
|
|
962
981
|
}
|
|
963
982
|
handleCancelClick() {
|
|
964
983
|
this.close.emit();
|
|
965
984
|
}
|
|
985
|
+
getPeriodOrDefault(periodName, defaultPeriodName = PeriodLabel.TODAY) {
|
|
986
|
+
return this.periods.find(p => p.label === periodName) ||
|
|
987
|
+
this.periods.find(p => p.label === defaultPeriodName);
|
|
988
|
+
}
|
|
989
|
+
checkPeriodShouldBeSelectedByValue() {
|
|
990
|
+
if (!this.isRange) {
|
|
991
|
+
return;
|
|
992
|
+
}
|
|
993
|
+
this.periods.forEach((period) => period.selected = false);
|
|
994
|
+
const period = this.periods.find(p => p.label === this.date?.label);
|
|
995
|
+
if (!period) {
|
|
996
|
+
return;
|
|
997
|
+
}
|
|
998
|
+
period.selected = true;
|
|
999
|
+
this.isCustomRange = period.isCustomRange || false;
|
|
1000
|
+
}
|
|
1001
|
+
writeValue(value) {
|
|
1002
|
+
if (this.isRange) {
|
|
1003
|
+
const valueRange = value;
|
|
1004
|
+
if (valueRange.label && valueRange.label !== PeriodLabel.CUSTOM_PERIOD) {
|
|
1005
|
+
const period = this.getPeriodOrDefault(valueRange.label)?.getRange() || {};
|
|
1006
|
+
this.date = { ...period, label: valueRange.label };
|
|
1007
|
+
}
|
|
1008
|
+
else if (valueRange.from && valueRange.to) {
|
|
1009
|
+
this.date = { from: valueRange.from, to: valueRange.to, label: PeriodLabel.CUSTOM_PERIOD };
|
|
1010
|
+
}
|
|
1011
|
+
this.checkPeriodShouldBeSelectedByValue();
|
|
1012
|
+
}
|
|
1013
|
+
else {
|
|
1014
|
+
this.date = value;
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
registerOnChange(fn) {
|
|
1018
|
+
this.onChange = fn;
|
|
1019
|
+
}
|
|
1020
|
+
registerOnTouched(fn) {
|
|
1021
|
+
this.onTouch = fn;
|
|
1022
|
+
}
|
|
966
1023
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
967
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange" }, outputs: { dateChange: "dateChange", close: "close" }, 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 periods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label | 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)=\"
|
|
1024
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange" }, 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 periods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\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}.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}.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"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
968
1025
|
}
|
|
969
1026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
970
1027
|
type: Component,
|
|
971
|
-
args: [{ selector: 'ask-date-picker', 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 periods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label | 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)=\"
|
|
1028
|
+
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 periods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\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}.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}.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"] }]
|
|
972
1029
|
}], propDecorators: { date: [{
|
|
973
1030
|
type: Input
|
|
974
1031
|
}], isRange: [{
|
|
@@ -1069,5 +1126,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
1069
1126
|
* Generated bundle index. Do not edit.
|
|
1070
1127
|
*/
|
|
1071
1128
|
|
|
1072
|
-
export { AskDropdownDirective, AsksuiteCitrusModule, AutocompleteComponent, AvatarComponent, AvatarStatus, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, SelectComponent,
|
|
1129
|
+
export { AskDropdownDirective, AsksuiteCitrusModule, AutocompleteComponent, AvatarComponent, AvatarStatus, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DEFAULT_DATE_FORMAT, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, PeriodLabel, SelectComponent, formatFrom, formatTo };
|
|
1073
1130
|
//# sourceMappingURL=asksuite-citrus.mjs.map
|