asksuite-citrus 0.5.2 → 0.5.4
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/en.json +3 -0
- package/assets/citrus-i18n/es.json +3 -0
- package/assets/citrus-i18n/pt.json +3 -0
- package/esm2022/lib/asksuite-citrus.module.mjs +2 -6
- package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +130 -48
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +5 -5
- package/esm2022/lib/components/select/select.component.mjs +8 -6
- package/fesm2022/asksuite-citrus.mjs +142 -63
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/asksuite-citrus.module.d.ts +3 -4
- package/lib/components/autocomplete/autocomplete.component.d.ts +20 -2
- package/lib/components/select/select.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -8,12 +8,10 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
|
8
8
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
9
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
10
10
|
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
11
|
-
import { startWith, tap, map
|
|
12
|
-
import * as
|
|
13
|
-
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
14
|
-
import moment from 'moment';
|
|
15
|
-
import * as i4$1 from '@ngx-translate/core';
|
|
11
|
+
import { debounceTime, startWith, tap, map } from 'rxjs';
|
|
12
|
+
import * as i6 from '@ngx-translate/core';
|
|
16
13
|
import { TranslateModule } from '@ngx-translate/core';
|
|
14
|
+
import moment from 'moment';
|
|
17
15
|
import * as i1$3 from 'ngx-skeleton-loader';
|
|
18
16
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
19
17
|
|
|
@@ -211,19 +209,21 @@ class SelectComponent {
|
|
|
211
209
|
handleOptionClick(option) {
|
|
212
210
|
this.setSelectedOption(option);
|
|
213
211
|
}
|
|
214
|
-
setSelectedOption(option) {
|
|
212
|
+
setSelectedOption(option, emit = true) {
|
|
215
213
|
if (option?.value === this.value) {
|
|
216
214
|
return;
|
|
217
215
|
}
|
|
218
216
|
this.selectedOption = option;
|
|
219
217
|
this.value = option?.value || null;
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
218
|
+
if (emit) {
|
|
219
|
+
this.onChange(this.value);
|
|
220
|
+
this.onTouch(this.value);
|
|
221
|
+
this.valueChange.emit(this.value);
|
|
222
|
+
}
|
|
224
223
|
}
|
|
225
224
|
writeValue(value) {
|
|
226
225
|
this.value = value;
|
|
226
|
+
this.setSelectedOption(this.value, false);
|
|
227
227
|
}
|
|
228
228
|
registerOnChange(fn) {
|
|
229
229
|
this.onChange = fn;
|
|
@@ -475,8 +475,9 @@ class CheckboxComponent {
|
|
|
475
475
|
this.focus.emit(event);
|
|
476
476
|
}
|
|
477
477
|
onModelChange(newValue) {
|
|
478
|
-
this.
|
|
478
|
+
this.value = newValue;
|
|
479
479
|
this.onChange(newValue);
|
|
480
|
+
this.valueChange.emit(newValue);
|
|
480
481
|
}
|
|
481
482
|
handleChange(event) {
|
|
482
483
|
this.change.emit(event);
|
|
@@ -497,14 +498,13 @@ class CheckboxComponent {
|
|
|
497
498
|
}
|
|
498
499
|
writeValue(value) {
|
|
499
500
|
this.value = value;
|
|
500
|
-
this.valueChange.emit(this.value);
|
|
501
501
|
}
|
|
502
502
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor$1], ngImport: i0, template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";: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}:host{
|
|
503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor$1], ngImport: i0, template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";: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}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
504
504
|
}
|
|
505
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
506
506
|
type: Component,
|
|
507
|
-
args: [{ selector: 'ask-checkbox', providers: [valueAccessor$1], template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";: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}:host{
|
|
507
|
+
args: [{ selector: 'ask-checkbox', providers: [valueAccessor$1], template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";: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}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
508
508
|
}], propDecorators: { value: [{
|
|
509
509
|
type: Input
|
|
510
510
|
}], disabled: [{
|
|
@@ -525,6 +525,17 @@ const valueAccessor = {
|
|
|
525
525
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
526
526
|
};
|
|
527
527
|
class AutocompleteComponent {
|
|
528
|
+
set listViewport(value) {
|
|
529
|
+
if (value) {
|
|
530
|
+
const listEl = value.nativeElement;
|
|
531
|
+
const scrollThreshold = 50;
|
|
532
|
+
listEl.addEventListener('scroll', (event) => {
|
|
533
|
+
if ((listEl.scrollHeight - listEl.scrollTop - listEl.clientHeight) <= scrollThreshold) {
|
|
534
|
+
this.getMoreItems();
|
|
535
|
+
}
|
|
536
|
+
});
|
|
537
|
+
}
|
|
538
|
+
}
|
|
528
539
|
constructor(formBuilder, overlay, viewContainerRef, change) {
|
|
529
540
|
this.formBuilder = formBuilder;
|
|
530
541
|
this.overlay = overlay;
|
|
@@ -533,10 +544,22 @@ class AutocompleteComponent {
|
|
|
533
544
|
this.inputControl = new FormControl("");
|
|
534
545
|
this.filteredOptions = [];
|
|
535
546
|
this.paginatedFilteredOptions = [];
|
|
547
|
+
this.selection = [];
|
|
536
548
|
this.closed = true;
|
|
537
549
|
this.chipsCollapsed = true;
|
|
538
550
|
this.checkAllValue = false;
|
|
539
551
|
this.disabled = false;
|
|
552
|
+
this.showChips = false;
|
|
553
|
+
this.showAllSelectionBtn = false;
|
|
554
|
+
this.showPlaceholder = false;
|
|
555
|
+
this.showExpandedSelectionActions = false;
|
|
556
|
+
this.showSelectAllCheckbox = false;
|
|
557
|
+
this.chipsContainerClasses = {
|
|
558
|
+
"-two": false,
|
|
559
|
+
"-three": false,
|
|
560
|
+
"-four": false,
|
|
561
|
+
"-many": false
|
|
562
|
+
};
|
|
540
563
|
this._destroy = inject(DestroyRef);
|
|
541
564
|
this.ITEMS_PER_PAGE = 40;
|
|
542
565
|
this._pageNumber = 1;
|
|
@@ -545,37 +568,59 @@ class AutocompleteComponent {
|
|
|
545
568
|
this.valueProp = '';
|
|
546
569
|
this.options = [];
|
|
547
570
|
this.placeholder = '';
|
|
548
|
-
this.emptyMessage = '
|
|
571
|
+
this.emptyMessage = 'NO_OPTIONS';
|
|
549
572
|
this.selectAll = false;
|
|
550
573
|
this.onChange = (_) => { };
|
|
551
574
|
this.onTouched = () => { };
|
|
552
575
|
this.selectionForm = formBuilder.group({});
|
|
553
576
|
}
|
|
554
577
|
ngAfterViewInit() {
|
|
578
|
+
this.checkAllValue = Object.keys(this.selectionForm.value).length === this.options.length
|
|
579
|
+
&& this.options.every(value => this.selectionForm.value[value[this.valueProp]]);
|
|
555
580
|
this.handleInputChange();
|
|
556
|
-
this.
|
|
557
|
-
this.checkAllValue = this.selectAll;
|
|
581
|
+
this.listenSelectionChange();
|
|
558
582
|
}
|
|
559
583
|
handleInputChange() {
|
|
560
|
-
this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), startWith(''), tap(() => {
|
|
584
|
+
this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), debounceTime(300), startWith(''), tap(() => {
|
|
561
585
|
this._pageNumber = 1;
|
|
562
586
|
this._reachedEnd = false;
|
|
563
587
|
this.paginatedFilteredOptions = [];
|
|
564
588
|
}), map(value => this.filterFn ? this.filterFn(value || '') : [])).subscribe(items => {
|
|
565
589
|
this.filteredOptions = items;
|
|
566
|
-
this.getMoreItems(
|
|
590
|
+
this.getMoreItems();
|
|
567
591
|
});
|
|
568
592
|
}
|
|
569
|
-
|
|
593
|
+
listenSelectionChange() {
|
|
594
|
+
if (Object.keys(this.selectionForm.value).length) {
|
|
595
|
+
this.selection = this.options.filter(option => this.selectionForm.value[option[this.valueProp]]);
|
|
596
|
+
this.updateValidation();
|
|
597
|
+
this.change.detectChanges();
|
|
598
|
+
}
|
|
570
599
|
this.selectionForm
|
|
571
600
|
.valueChanges
|
|
572
|
-
.pipe(takeUntilDestroyed(this._destroy)
|
|
601
|
+
.pipe(takeUntilDestroyed(this._destroy))
|
|
573
602
|
.subscribe((values) => {
|
|
574
603
|
this.checkAllValue = Object.keys(values).every(value => values[value]);
|
|
575
|
-
this.
|
|
604
|
+
this.handleSelectionChange(values);
|
|
605
|
+
this.onChange(this.selection);
|
|
576
606
|
this.onTouched();
|
|
577
607
|
});
|
|
578
608
|
}
|
|
609
|
+
handleSelectionChange(values) {
|
|
610
|
+
this.selection = this.options.filter(option => values[option[this.valueProp]]);
|
|
611
|
+
if (!this.chipsCollapsed) {
|
|
612
|
+
this.chipsCollapsed = this.selection.length < 2;
|
|
613
|
+
}
|
|
614
|
+
this.updateValidation();
|
|
615
|
+
}
|
|
616
|
+
updateChipsContainerClasses() {
|
|
617
|
+
this.chipsContainerClasses = {
|
|
618
|
+
"-two": this.selectedOptions.length === 2,
|
|
619
|
+
"-three": this.selectedOptions.length === 3,
|
|
620
|
+
"-four": this.selectedOptions.length === 4,
|
|
621
|
+
"-many": this.selectedOptions.length >= 5
|
|
622
|
+
};
|
|
623
|
+
}
|
|
579
624
|
handleOptionSelected(item) {
|
|
580
625
|
this.selectedOption = item;
|
|
581
626
|
this.onChange(this.selectedOption);
|
|
@@ -583,9 +628,21 @@ class AutocompleteComponent {
|
|
|
583
628
|
this.change.detectChanges();
|
|
584
629
|
}
|
|
585
630
|
handleAutocompleteClick() {
|
|
586
|
-
this.
|
|
587
|
-
|
|
588
|
-
|
|
631
|
+
if (!this.disabled) {
|
|
632
|
+
this.chipsCollapsed = true;
|
|
633
|
+
this.closed
|
|
634
|
+
? this.showOptions()
|
|
635
|
+
: this.hideOptions();
|
|
636
|
+
}
|
|
637
|
+
this.updateValidation();
|
|
638
|
+
this.updateChipsContainerClasses();
|
|
639
|
+
this.change.detectChanges();
|
|
640
|
+
}
|
|
641
|
+
handleChipsListActionClick() {
|
|
642
|
+
this.chipsCollapsed = !this.chipsCollapsed;
|
|
643
|
+
this.updateValidation();
|
|
644
|
+
this.updateChipsContainerClasses();
|
|
645
|
+
this.change.detectChanges();
|
|
589
646
|
}
|
|
590
647
|
showOptions() {
|
|
591
648
|
this.closed = false;
|
|
@@ -594,6 +651,9 @@ class AutocompleteComponent {
|
|
|
594
651
|
this._portal = new TemplatePortal(this.overlayContent, this.viewContainerRef);
|
|
595
652
|
}
|
|
596
653
|
this._overlayRef?.attach(this._portal);
|
|
654
|
+
this.updateValidation();
|
|
655
|
+
if (this.paginatedFilteredOptions.length === 0)
|
|
656
|
+
this.getMoreItems();
|
|
597
657
|
}
|
|
598
658
|
getOverlayConfig(wrapper) {
|
|
599
659
|
return this.overlay.create({
|
|
@@ -613,33 +673,34 @@ class AutocompleteComponent {
|
|
|
613
673
|
this.chipsCollapsed = true;
|
|
614
674
|
this._overlayRef?.detach();
|
|
615
675
|
this.change.detectChanges();
|
|
676
|
+
this._pageNumber = 1;
|
|
677
|
+
this.paginatedFilteredOptions = [];
|
|
678
|
+
this.updateValidation();
|
|
679
|
+
this.change.detectChanges();
|
|
616
680
|
}
|
|
617
681
|
handleClick(event) {
|
|
618
682
|
if (!this.closed
|
|
619
683
|
&& !this.input?.nativeElement.contains(event.target)
|
|
620
684
|
&& !this.list?.nativeElement.contains(event.target)) {
|
|
621
685
|
this.hideOptions();
|
|
686
|
+
this.updateValidation();
|
|
687
|
+
this.change.detectChanges();
|
|
622
688
|
}
|
|
623
689
|
}
|
|
624
690
|
get selectedOptions() {
|
|
625
691
|
if (!this.multiple)
|
|
626
692
|
return this.selectedOption ? [this.selectedOption] : [];
|
|
627
|
-
const selected = this.options
|
|
628
|
-
.filter(item => this.selectionForm.value[item[this.valueProp]]);
|
|
629
693
|
return this.chipsCollapsed
|
|
630
|
-
?
|
|
631
|
-
:
|
|
694
|
+
? this.selection.slice(0, 1)
|
|
695
|
+
: this.selection;
|
|
632
696
|
}
|
|
633
|
-
handleSelectAll(
|
|
634
|
-
const checked = event.target.checked;
|
|
697
|
+
handleSelectAll(checked) {
|
|
635
698
|
this.selectAllOptions(checked);
|
|
699
|
+
this.updateValidation();
|
|
700
|
+
this.change.detectChanges();
|
|
636
701
|
}
|
|
637
702
|
selectAllOptions(selected) {
|
|
638
|
-
this.options.
|
|
639
|
-
if (this.selectionForm.value[option[this.valueProp]] === undefined) {
|
|
640
|
-
this.selectionForm.addControl(option[this.valueProp], this.formBuilder.control(selected), { emitEvent: false });
|
|
641
|
-
}
|
|
642
|
-
});
|
|
703
|
+
this.updateFormControls(this.options, this.selectionForm, this.formBuilder, this.valueProp, selected);
|
|
643
704
|
const newValues = Object.keys(this.selectionForm.controls)
|
|
644
705
|
.reduce((acc, curr) => {
|
|
645
706
|
acc[curr] = selected;
|
|
@@ -647,7 +708,6 @@ class AutocompleteComponent {
|
|
|
647
708
|
}, {});
|
|
648
709
|
this.selectionForm.patchValue(newValues);
|
|
649
710
|
this.selectionForm.updateValueAndValidity();
|
|
650
|
-
this.change.detectChanges();
|
|
651
711
|
}
|
|
652
712
|
handleChipAction(option) {
|
|
653
713
|
if (this.multiple) {
|
|
@@ -656,43 +716,62 @@ class AutocompleteComponent {
|
|
|
656
716
|
else {
|
|
657
717
|
this.selectedOption = null;
|
|
658
718
|
}
|
|
719
|
+
this.updateChipsContainerClasses();
|
|
720
|
+
this.updateValidation();
|
|
721
|
+
this.change.detectChanges();
|
|
659
722
|
}
|
|
660
723
|
display(option) {
|
|
661
724
|
return this.displayFn && this.displayFn(option);
|
|
662
725
|
}
|
|
663
|
-
getMoreItems(
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
726
|
+
getMoreItems() {
|
|
727
|
+
const nextPageItems = this.filteredOptions.slice(this.ITEMS_PER_PAGE * (this._pageNumber - 1), this.ITEMS_PER_PAGE * this._pageNumber);
|
|
728
|
+
if (nextPageItems.length) {
|
|
729
|
+
this.updateFormControls(nextPageItems, this.selectionForm, this.formBuilder, this.valueProp, this.checkAllValue);
|
|
730
|
+
this.selectionForm.updateValueAndValidity();
|
|
731
|
+
this.paginatedFilteredOptions = [...this.paginatedFilteredOptions, ...nextPageItems];
|
|
732
|
+
this._pageNumber += 1;
|
|
733
|
+
}
|
|
734
|
+
else {
|
|
735
|
+
this._reachedEnd = true;
|
|
736
|
+
}
|
|
737
|
+
this.updateValidation();
|
|
738
|
+
this.change.detectChanges();
|
|
739
|
+
}
|
|
740
|
+
updateFormControls(items, form, fb, propValue, checked) {
|
|
741
|
+
items.forEach(item => {
|
|
742
|
+
if (form.value[item[propValue]] === undefined) {
|
|
743
|
+
form.addControl(item[propValue], fb.control(checked), { emitEvent: false });
|
|
675
744
|
}
|
|
676
|
-
else {
|
|
677
|
-
|
|
745
|
+
else if (!form.value[item[propValue]]) {
|
|
746
|
+
form.get(item[propValue])?.setValue(checked, { emitEvent: false });
|
|
678
747
|
}
|
|
679
|
-
}
|
|
748
|
+
});
|
|
749
|
+
}
|
|
750
|
+
updateValidation() {
|
|
751
|
+
this.showChips = Boolean(this.selectedOptions.length) && this.closed;
|
|
752
|
+
this.showAllSelectionBtn = this.multiple && Boolean(this.selection.length > 1) && this.chipsCollapsed;
|
|
753
|
+
this.showPlaceholder = this.closed && !this.selectedOptions.length;
|
|
754
|
+
this.showExpandedSelectionActions = this.multiple && !this.chipsCollapsed;
|
|
755
|
+
this.showSelectAllCheckbox = Boolean(this.paginatedFilteredOptions.length) && this.selectAll;
|
|
680
756
|
}
|
|
681
757
|
// Control Value Accessor
|
|
682
758
|
writeValue(obj) {
|
|
683
|
-
|
|
759
|
+
this.selection = [];
|
|
760
|
+
if ((!obj || (Array.isArray(obj) && !obj.length)) && this.selectAll) {
|
|
684
761
|
this.selectAllOptions(this.selectAll);
|
|
685
762
|
return;
|
|
686
763
|
}
|
|
687
764
|
if (this.multiple && Array.isArray(obj)) {
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
});
|
|
765
|
+
this.selectionForm.reset({}, { emitEvent: false });
|
|
766
|
+
this.updateFormControls(obj, this.selectionForm, this.formBuilder, this.valueProp, true);
|
|
691
767
|
this.selectionForm.updateValueAndValidity();
|
|
692
768
|
}
|
|
693
769
|
else {
|
|
694
770
|
this.selectedOption = obj;
|
|
695
771
|
}
|
|
772
|
+
if (this.multiple && !this.selection.length) {
|
|
773
|
+
this.handleSelectionChange(obj);
|
|
774
|
+
}
|
|
696
775
|
this.change.detectChanges();
|
|
697
776
|
}
|
|
698
777
|
registerOnChange(fn) {
|
|
@@ -705,11 +784,11 @@ class AutocompleteComponent {
|
|
|
705
784
|
this.disabled = isDisabled;
|
|
706
785
|
}
|
|
707
786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
708
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AutocompleteComponent, selector: "ask-autocomplete", inputs: { filterFn: "filterFn", displayFn: "displayFn", multiple: "multiple", valueProp: "valueProp", options: "options", placeholder: "placeholder", emptyMessage: "emptyMessage", selectAll: "selectAll" }, host: { listeners: { "window:mousedown": "handleClick($event)" } }, providers: [valueAccessor], viewQueries: [{ propertyName: "input", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "overlayContent", first: true, predicate: ["overlayContent"], descendants: true }], ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n [formControl]=\"inputControl\"\n [placeholder]=\"placeholder\"/>\n <ng-template #selectionOrPlaceholder>\n <ng-container *ngIf=\"selectedOptions.length && closed\">\n <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\">\n <ask-chips [style.max-width]=\"chipsCollapsed ? '75%' : '100%'\"\n [showAction]=\"true\"\n *ngFor=\"let option of selectedOptions\"\n (action)=\"handleChipAction(option)\">\n {{display(option)}}\n </ask-chips>\n <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n </span>\n </div>\n </ng-container>\n <span data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\n (click)=\"!disabled && handleAutocompleteClick()\">{{closed ? \"expand_more\" : \"expand_less\"}}</span>\n </div>\n</div>\n\n<ng-template #overlayContent>\n <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n <ng-container *ngIf=\"!multiple; else multipleSelection\">\n <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"list\" (scrolledIndexChange)=\"getMoreItems($event)\">\n <ng-container *cdkVirtualFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\"\n [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n (click)=\"handleOptionSelected(option)\">\n <p class=\"text\">{{display(option)}}</p>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-template #multipleSelection>\n <div class=\"option-item\" *ngIf=\"paginatedFilteredOptions.length && selectAll\">\n <ask-checkbox (change)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n </div>\n <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"list-box\" (scrolledIndexChange)=\"getMoreItems($event)\">\n <ng-container *cdkVirtualFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\">\n <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </form>\n </ng-template>\n <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage}}</span>\n </div>\n</ng-template>\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,.option-item>.text,.option-item{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}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:end;justify-content:space-between}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:16px;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.chip-list{overflow:hidden;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1}.chip-list.-collapsed{height:26px}.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:12px}.chip-list>.expand:hover{cursor:pointer}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.list-box,.menu-container>.list{min-height:148px}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AutocompleteComponent, selector: "ask-autocomplete", inputs: { filterFn: "filterFn", displayFn: "displayFn", multiple: "multiple", valueProp: "valueProp", options: "options", placeholder: "placeholder", emptyMessage: "emptyMessage", selectAll: "selectAll" }, host: { listeners: { "window:mousedown": "handleClick($event)" } }, providers: [valueAccessor], viewQueries: [{ propertyName: "input", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "overlayContent", first: true, predicate: ["overlayContent"], descendants: true }, { propertyName: "listViewport", first: true, predicate: ["listViewport"], descendants: true }], ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n [formControl]=\"inputControl\"\n [placeholder]=\"placeholder\"/>\n <ng-template #selectionOrPlaceholder>\n <ng-container *ngIf=\"showChips\">\n <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\"\n [ngClass]=\"chipsContainerClasses\">\n <ask-chips [style.max-width]=\"chipsCollapsed ? '85%' : '100%'\"\n [showAction]=\"true\"\n *ngFor=\"let option of selectedOptions\"\n (action)=\"handleChipAction(option)\">\n {{display(option)}}\n </ask-chips>\n <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"showAllSelectionBtn\"\n (click)=\"handleChipsListActionClick()\">\n +{{selection.length - 1}}\n </span>\n </div>\n </ng-container>\n <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\"\n (click)=\"handleAutocompleteClick()\">{{placeholder}}</span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\n (click)=\"handleAutocompleteClick()\"\n *ngIf=\"chipsCollapsed\">\n {{closed ? \"expand_more\" : \"expand_less\"}}\n </span>\n </div>\n <div class=\"actions\" *ngIf=\"showExpandedSelectionActions\">\n <span class=\"see-more\" data-testid=\"see-less\"\n (click)=\"handleChipsListActionClick()\">\n {{'SEE_LESS' | translate}}\n </span>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\n (click)=\"handleAutocompleteClick()\">\n {{closed ? \"expand_more\" : \"expand_less\"}}\n </span>\n </div>\n</div>\n\n<ng-template #overlayContent>\n <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n <ng-container *ngIf=\"!multiple; else multipleSelection\">\n <div class=\"list\" #listViewport>\n <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\"\n [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n (click)=\"handleOptionSelected(option)\">\n <p class=\"text\">{{display(option)}}</p>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-template #multipleSelection>\n <div class=\"option-item\" *ngIf=\"showSelectAllCheckbox\">\n <ask-checkbox (valueChange)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n </div>\n <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n <div class=\"list-box\" #listViewport>\n <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\">\n <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n </div>\n </ng-container>\n </div>\n </form>\n </ng-template>\n <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage | translate}}</span>\n </div>\n</ng-template>\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,.option-item>.text,.option-item{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}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between}.autocomplete-wrapper>.actions{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:1rem;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.see-more,.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:.875rem;font-weight:500}.see-more:hover,.chip-list>.expand:hover{cursor:pointer}.chip-list{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1;max-height:155px;transition:all ease-in-out .3s}.chip-list.-collapsed{height:31px;overflow:hidden;transition:none}.chip-list.-two{height:62px}.chip-list.-three{height:93px}.chip-list.-four{height:124px}.chip-list.-many{overflow-y:auto;height:155px}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list{min-height:1rem;overflow-y:auto}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\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: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
709
788
|
}
|
|
710
789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
711
790
|
type: Component,
|
|
712
|
-
args: [{ selector: 'ask-autocomplete', providers: [valueAccessor], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n [formControl]=\"inputControl\"\n [placeholder]=\"placeholder\"/>\n <ng-template #selectionOrPlaceholder>\n <ng-container *ngIf=\"
|
|
791
|
+
args: [{ selector: 'ask-autocomplete', providers: [valueAccessor], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n [formControl]=\"inputControl\"\n [placeholder]=\"placeholder\"/>\n <ng-template #selectionOrPlaceholder>\n <ng-container *ngIf=\"showChips\">\n <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\"\n [ngClass]=\"chipsContainerClasses\">\n <ask-chips [style.max-width]=\"chipsCollapsed ? '85%' : '100%'\"\n [showAction]=\"true\"\n *ngFor=\"let option of selectedOptions\"\n (action)=\"handleChipAction(option)\">\n {{display(option)}}\n </ask-chips>\n <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"showAllSelectionBtn\"\n (click)=\"handleChipsListActionClick()\">\n +{{selection.length - 1}}\n </span>\n </div>\n </ng-container>\n <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\"\n (click)=\"handleAutocompleteClick()\">{{placeholder}}</span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\n (click)=\"handleAutocompleteClick()\"\n *ngIf=\"chipsCollapsed\">\n {{closed ? \"expand_more\" : \"expand_less\"}}\n </span>\n </div>\n <div class=\"actions\" *ngIf=\"showExpandedSelectionActions\">\n <span class=\"see-more\" data-testid=\"see-less\"\n (click)=\"handleChipsListActionClick()\">\n {{'SEE_LESS' | translate}}\n </span>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\n (click)=\"handleAutocompleteClick()\">\n {{closed ? \"expand_more\" : \"expand_less\"}}\n </span>\n </div>\n</div>\n\n<ng-template #overlayContent>\n <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n <ng-container *ngIf=\"!multiple; else multipleSelection\">\n <div class=\"list\" #listViewport>\n <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\"\n [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n (click)=\"handleOptionSelected(option)\">\n <p class=\"text\">{{display(option)}}</p>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-template #multipleSelection>\n <div class=\"option-item\" *ngIf=\"showSelectAllCheckbox\">\n <ask-checkbox (valueChange)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n </div>\n <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n <div class=\"list-box\" #listViewport>\n <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\">\n <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n </div>\n </ng-container>\n </div>\n </form>\n </ng-template>\n <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage | translate}}</span>\n </div>\n</ng-template>\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,.option-item>.text,.option-item{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}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between}.autocomplete-wrapper>.actions{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:1rem;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.see-more,.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:.875rem;font-weight:500}.see-more:hover,.chip-list>.expand:hover{cursor:pointer}.chip-list{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1;max-height:155px;transition:all ease-in-out .3s}.chip-list.-collapsed{height:31px;overflow:hidden;transition:none}.chip-list.-two{height:62px}.chip-list.-three{height:93px}.chip-list.-four{height:124px}.chip-list.-many{overflow-y:auto;height:155px}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list{min-height:1rem;overflow-y:auto}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\n"] }]
|
|
713
792
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
|
|
714
793
|
type: ViewChild,
|
|
715
794
|
args: ["autocomplete"]
|
|
@@ -722,6 +801,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
722
801
|
}], overlayContent: [{
|
|
723
802
|
type: ViewChild,
|
|
724
803
|
args: ['overlayContent']
|
|
804
|
+
}], listViewport: [{
|
|
805
|
+
type: ViewChild,
|
|
806
|
+
args: ['listViewport']
|
|
725
807
|
}], filterFn: [{
|
|
726
808
|
type: Input
|
|
727
809
|
}], displayFn: [{
|
|
@@ -1085,7 +1167,7 @@ class DatePickerComponent {
|
|
|
1085
1167
|
this.onTouch = fn;
|
|
1086
1168
|
}
|
|
1087
1169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1088
|
-
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.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", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type:
|
|
1170
|
+
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.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", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
|
|
1089
1171
|
}
|
|
1090
1172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1091
1173
|
type: Component,
|
|
@@ -1203,8 +1285,7 @@ class AsksuiteCitrusModule {
|
|
|
1203
1285
|
ReactiveFormsModule,
|
|
1204
1286
|
CdkOverlayOrigin,
|
|
1205
1287
|
CdkConnectedOverlay,
|
|
1206
|
-
OverlayModule,
|
|
1207
|
-
ScrollingModule, i4$1.TranslateModule, NgxSkeletonLoaderModule], exports: [ButtonComponent,
|
|
1288
|
+
OverlayModule, i6.TranslateModule, NgxSkeletonLoaderModule], exports: [ButtonComponent,
|
|
1208
1289
|
InputComponent,
|
|
1209
1290
|
SelectComponent,
|
|
1210
1291
|
BoxComponent,
|
|
@@ -1222,7 +1303,6 @@ class AsksuiteCitrusModule {
|
|
|
1222
1303
|
FormsModule,
|
|
1223
1304
|
ReactiveFormsModule,
|
|
1224
1305
|
OverlayModule,
|
|
1225
|
-
ScrollingModule,
|
|
1226
1306
|
TranslateModule.forChild(),
|
|
1227
1307
|
NgxSkeletonLoaderModule] }); }
|
|
1228
1308
|
}
|
|
@@ -1253,7 +1333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
1253
1333
|
CdkOverlayOrigin,
|
|
1254
1334
|
CdkConnectedOverlay,
|
|
1255
1335
|
OverlayModule,
|
|
1256
|
-
ScrollingModule,
|
|
1257
1336
|
TranslateModule.forChild(),
|
|
1258
1337
|
NgxSkeletonLoaderModule,
|
|
1259
1338
|
],
|