asksuite-citrus 0.9.0 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +32 -52
- package/esm2022/lib/components/chips/chips.component.mjs +7 -3
- package/fesm2022/asksuite-citrus.mjs +37 -53
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/components/autocomplete/autocomplete.component.d.ts +6 -5
- package/lib/components/chips/chips.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
|
10
10
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
11
11
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
12
12
|
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
13
|
-
import { debounceTime,
|
|
13
|
+
import { debounceTime, tap, map } from 'rxjs';
|
|
14
14
|
import * as i8 from '@ngx-translate/core';
|
|
15
15
|
import { TranslateModule } from '@ngx-translate/core';
|
|
16
16
|
import moment from 'moment';
|
|
@@ -506,6 +506,7 @@ class ChipsComponent {
|
|
|
506
506
|
set appearance(value) {
|
|
507
507
|
this._isAppearanceLight = value === 'light';
|
|
508
508
|
this._isAppearancePrimary = value === 'primary';
|
|
509
|
+
this._isAppearanceTag = value === 'tag';
|
|
509
510
|
}
|
|
510
511
|
;
|
|
511
512
|
set size(value) {
|
|
@@ -518,20 +519,23 @@ class ChipsComponent {
|
|
|
518
519
|
this._isSmall = false;
|
|
519
520
|
this._isAppearanceLight = false;
|
|
520
521
|
this._isAppearancePrimary = false;
|
|
522
|
+
this._isAppearanceTag = false;
|
|
521
523
|
this.action = new EventEmitter();
|
|
522
524
|
}
|
|
523
525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChipsComponent, selector: "ask-chips", inputs: { appearance: "appearance", showAction: "showAction", size: "size" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary
|
|
526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChipsComponent, selector: "ask-chips", inputs: { appearance: "appearance", showAction: "showAction", size: "size", color: "color" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary,\n '-tag': _isAppearanceTag,\n }\"\n [style.background-color]=\"color\"\n>\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\" *ngIf=\"showAction\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"$event.stopPropagation(); action.emit()\">cancel</span>\n </div>\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,.chip-container>.body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding:0 8px;width:-moz-fit-content;width:fit-content;border-radius:50px;color:#fff}.chip-container>.body{color:inherit}.chip-container>.action{width:24px;height:24px;border-radius:50%;color:#fff}.chip-container>.action:hover{cursor:pointer}.chip-container.-small{font-size:.875rem;padding:5px 8px}.chip-container.-action{padding-right:0}.chip-container.-light{background:var(--grey-200);color:var(--font-color-200)}.chip-container.-primary{background:var(--asksuite-orange);color:#fff}.chip-container.-tag{color:var(--font-color-200);font-size:11px;line-height:11px;padding:4px 10px;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
525
527
|
}
|
|
526
528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
527
529
|
type: Component,
|
|
528
|
-
args: [{ selector: 'ask-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary
|
|
530
|
+
args: [{ selector: 'ask-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary,\n '-tag': _isAppearanceTag,\n }\"\n [style.background-color]=\"color\"\n>\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\" *ngIf=\"showAction\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"$event.stopPropagation(); action.emit()\">cancel</span>\n </div>\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,.chip-container>.body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding:0 8px;width:-moz-fit-content;width:fit-content;border-radius:50px;color:#fff}.chip-container>.body{color:inherit}.chip-container>.action{width:24px;height:24px;border-radius:50%;color:#fff}.chip-container>.action:hover{cursor:pointer}.chip-container.-small{font-size:.875rem;padding:5px 8px}.chip-container.-action{padding-right:0}.chip-container.-light{background:var(--grey-200);color:var(--font-color-200)}.chip-container.-primary{background:var(--asksuite-orange);color:#fff}.chip-container.-tag{color:var(--font-color-200);font-size:11px;line-height:11px;padding:4px 10px;text-transform:uppercase}\n"] }]
|
|
529
531
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
530
532
|
type: Input
|
|
531
533
|
}], showAction: [{
|
|
532
534
|
type: Input
|
|
533
535
|
}], size: [{
|
|
534
536
|
type: Input
|
|
537
|
+
}], color: [{
|
|
538
|
+
type: Input
|
|
535
539
|
}], action: [{
|
|
536
540
|
type: Output
|
|
537
541
|
}] } });
|
|
@@ -683,6 +687,7 @@ class AutocompleteComponent {
|
|
|
683
687
|
"-four": false,
|
|
684
688
|
"-many": false
|
|
685
689
|
};
|
|
690
|
+
this.optionsSelected = {};
|
|
686
691
|
this._destroy = inject(DestroyRef);
|
|
687
692
|
this.ITEMS_PER_PAGE = 40;
|
|
688
693
|
this._pageNumber = 1;
|
|
@@ -696,16 +701,13 @@ class AutocompleteComponent {
|
|
|
696
701
|
this.allOptionsSelectedText = null;
|
|
697
702
|
this.onChange = (_) => { };
|
|
698
703
|
this.onTouched = () => { };
|
|
699
|
-
this.selectionForm = formBuilder.group({});
|
|
700
704
|
}
|
|
701
705
|
ngAfterViewInit() {
|
|
702
|
-
this.checkAllValue = this.isAllOptionsSelected
|
|
706
|
+
this.checkAllValue = this.isAllOptionsSelected;
|
|
703
707
|
this.handleInputChange();
|
|
704
|
-
this.listenSelectionChange();
|
|
705
708
|
}
|
|
706
|
-
isAllOptionsSelected() {
|
|
707
|
-
return
|
|
708
|
-
&& this.options.every(value => this.selectionForm.value[value[this.valueProp]]);
|
|
709
|
+
get isAllOptionsSelected() {
|
|
710
|
+
return this.selection.length === this.options.length;
|
|
709
711
|
}
|
|
710
712
|
ngOnChanges(changes) {
|
|
711
713
|
if (changes['options']) {
|
|
@@ -713,12 +715,11 @@ class AutocompleteComponent {
|
|
|
713
715
|
this._reachedEnd = false;
|
|
714
716
|
this.paginatedFilteredOptions = [];
|
|
715
717
|
this.filteredOptions = changes['options'].currentValue;
|
|
716
|
-
this.
|
|
717
|
-
this.getMoreItems();
|
|
718
|
+
this.updateValidation();
|
|
718
719
|
}
|
|
719
720
|
}
|
|
720
721
|
handleInputChange() {
|
|
721
|
-
this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), debounceTime(300),
|
|
722
|
+
this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), debounceTime(300), tap(() => {
|
|
722
723
|
this._pageNumber = 1;
|
|
723
724
|
this._reachedEnd = false;
|
|
724
725
|
this.paginatedFilteredOptions = [];
|
|
@@ -727,28 +728,14 @@ class AutocompleteComponent {
|
|
|
727
728
|
this.getMoreItems();
|
|
728
729
|
});
|
|
729
730
|
}
|
|
730
|
-
listenSelectionChange() {
|
|
731
|
-
if (Object.keys(this.selectionForm.value).length) {
|
|
732
|
-
this.selection = this.options.filter(option => this.selectionForm.value[option[this.valueProp]]);
|
|
733
|
-
this.updateValidation();
|
|
734
|
-
this.change.detectChanges();
|
|
735
|
-
}
|
|
736
|
-
this.selectionForm
|
|
737
|
-
.valueChanges
|
|
738
|
-
.pipe(takeUntilDestroyed(this._destroy))
|
|
739
|
-
.subscribe((values) => {
|
|
740
|
-
this.handleSelectionChange(this.options.filter(option => values[option[this.valueProp]]));
|
|
741
|
-
this.onChange(this.selection);
|
|
742
|
-
this.onTouched();
|
|
743
|
-
this.checkAllValue = this.selection.length === this.options.length;
|
|
744
|
-
});
|
|
745
|
-
}
|
|
746
731
|
handleSelectionChange(values) {
|
|
747
732
|
this.selection = values;
|
|
733
|
+
this.checkAllValue = this.isAllOptionsSelected;
|
|
748
734
|
if (!this.chipsCollapsed) {
|
|
749
735
|
this.chipsCollapsed = this.selection.length < 2;
|
|
750
736
|
}
|
|
751
737
|
this.updateValidation();
|
|
738
|
+
this.change.detectChanges();
|
|
752
739
|
}
|
|
753
740
|
updateChipsContainerClasses() {
|
|
754
741
|
this.chipsContainerClasses = {
|
|
@@ -822,7 +809,6 @@ class AutocompleteComponent {
|
|
|
822
809
|
&& !this.wrapper?.nativeElement.contains(event.target)
|
|
823
810
|
&& !this.list?.nativeElement.contains(event.target)) {
|
|
824
811
|
this.hideOptions();
|
|
825
|
-
this.updateValidation();
|
|
826
812
|
this.change.detectChanges();
|
|
827
813
|
}
|
|
828
814
|
}
|
|
@@ -835,22 +821,32 @@ class AutocompleteComponent {
|
|
|
835
821
|
}
|
|
836
822
|
handleSelectAll(checked) {
|
|
837
823
|
this.selectAllOptions(checked);
|
|
824
|
+
this.selection = checked ? this.options : [];
|
|
825
|
+
this.onChange(this.selection);
|
|
826
|
+
this.updateValidation();
|
|
827
|
+
this.change.detectChanges();
|
|
828
|
+
}
|
|
829
|
+
valueChange(option, value) {
|
|
830
|
+
this.optionsSelected[option[this.valueProp]] = value;
|
|
831
|
+
this.selection = this.options.filter(o => this.optionsSelected[o[this.valueProp]]);
|
|
832
|
+
this.checkAllValue = this.selection.length === this.options.length;
|
|
833
|
+
this.onChange(this.selection);
|
|
834
|
+
this.onTouched();
|
|
835
|
+
this.updateChipsContainerClasses();
|
|
838
836
|
this.updateValidation();
|
|
839
837
|
this.change.detectChanges();
|
|
840
838
|
}
|
|
841
839
|
selectAllOptions(selected) {
|
|
842
|
-
this.
|
|
843
|
-
const newValues = Object.keys(this.selectionForm.controls)
|
|
840
|
+
this.optionsSelected = this.options
|
|
844
841
|
.reduce((acc, curr) => {
|
|
845
|
-
acc[curr] = selected;
|
|
842
|
+
acc[curr[this.valueProp]] = selected;
|
|
846
843
|
return acc;
|
|
847
844
|
}, {});
|
|
848
|
-
this.selectionForm.patchValue(newValues);
|
|
849
|
-
this.selectionForm.updateValueAndValidity();
|
|
850
845
|
}
|
|
851
846
|
handleChipAction(option) {
|
|
852
847
|
if (this.multiple) {
|
|
853
|
-
this.
|
|
848
|
+
this.optionsSelected[option[this.valueProp]] = false;
|
|
849
|
+
this.selection = this.selection.filter(selectedOption => selectedOption[this.valueProp] !== option[this.valueProp]);
|
|
854
850
|
}
|
|
855
851
|
else {
|
|
856
852
|
this.selectedOption = null;
|
|
@@ -868,7 +864,6 @@ class AutocompleteComponent {
|
|
|
868
864
|
const nextPageItems = sortedFilteredOptions
|
|
869
865
|
.slice(this.ITEMS_PER_PAGE * (this._pageNumber - 1), this.ITEMS_PER_PAGE * this._pageNumber);
|
|
870
866
|
if (nextPageItems.length) {
|
|
871
|
-
this.selectionForm.updateValueAndValidity();
|
|
872
867
|
this.paginatedFilteredOptions = [...this.paginatedFilteredOptions, ...nextPageItems];
|
|
873
868
|
this._pageNumber += 1;
|
|
874
869
|
}
|
|
@@ -893,17 +888,8 @@ class AutocompleteComponent {
|
|
|
893
888
|
}
|
|
894
889
|
});
|
|
895
890
|
}
|
|
896
|
-
updateFormControls(items, form, fb, propValue, checked) {
|
|
897
|
-
items.forEach(item => {
|
|
898
|
-
if (form.value[item[propValue]] === undefined) {
|
|
899
|
-
form.addControl(item[propValue], fb.control(checked), { emitEvent: false });
|
|
900
|
-
}
|
|
901
|
-
else if (!form.value[item[propValue]]) {
|
|
902
|
-
form.get(item[propValue])?.setValue(checked, { emitEvent: false });
|
|
903
|
-
}
|
|
904
|
-
});
|
|
905
|
-
}
|
|
906
891
|
updateValidation() {
|
|
892
|
+
this.checkAllValue = this.isAllOptionsSelected;
|
|
907
893
|
this.showChips = Boolean(this.selectedOptions.length) && this.closed && (!this.multiple || !this.checkAllValue || (this.checkAllValue && !Boolean(this.allOptionsSelectedText)));
|
|
908
894
|
this.showAllSelectionBtn = this.multiple && Boolean(this.selection.length > 1) && this.chipsCollapsed;
|
|
909
895
|
this.showPlaceholder = this.closed && (!this.selectedOptions.length || (this.checkAllValue && Boolean(this.allOptionsSelectedText) && this.multiple));
|
|
@@ -914,16 +900,14 @@ class AutocompleteComponent {
|
|
|
914
900
|
writeValue(obj) {
|
|
915
901
|
this.selection = [];
|
|
916
902
|
if (this.multiple && Array.isArray(obj)) {
|
|
917
|
-
this.
|
|
918
|
-
|
|
919
|
-
this.selectionForm.updateValueAndValidity();
|
|
903
|
+
this.optionsSelected = {};
|
|
904
|
+
obj.forEach(option => this.optionsSelected[option[this.valueProp]] = true);
|
|
920
905
|
}
|
|
921
906
|
else {
|
|
922
907
|
this.selectedOption = obj;
|
|
923
908
|
}
|
|
924
|
-
if (this.multiple
|
|
909
|
+
if (this.multiple) {
|
|
925
910
|
this.handleSelectionChange(obj);
|
|
926
|
-
this.checkAllValue = this.selection.length === this.options.length;
|
|
927
911
|
}
|
|
928
912
|
this.change.detectChanges();
|
|
929
913
|
}
|
|
@@ -937,11 +921,11 @@ class AutocompleteComponent {
|
|
|
937
921
|
this.disabled = isDisabled;
|
|
938
922
|
}
|
|
939
923
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
940
|
-
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", allOptionsSelectedText: "allOptionsSelectedText" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n (click)=\"handleAutocompleteClick()\"\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n askAutofocus\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n +{{selection.length - 1}}\n </span>\n </div>\n </ng-container>\n <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n </span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\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($event)\">\n {{'SEE_LESS' | translate}}\n </span>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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 askScroll [askScrollThreshold]=\"50\"\n *ngIf=\"selectionForm.controls\"\n [formGroup]=\"selectionForm\"\n (scrollEnd)=\"getMoreItems()\"\n data-testid=\"options-form\"\n class=\"options-form\"\n [class.-select-all]=\"showSelectAllCheckbox\">\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 </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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\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: "directive", type: AutofocusDirective, selector: "[askAutofocus]" }, { kind: "directive", type: ScrollDirective, selector: "[askScroll]", inputs: ["askScrollThreshold"], outputs: ["scrollEnd"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
924
|
+
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", allOptionsSelectedText: "allOptionsSelectedText" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n (click)=\"handleAutocompleteClick()\"\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n askAutofocus\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n +{{selection.length - 1}}\n </span>\n </div>\n </ng-container>\n <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n </span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\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($event)\">\n {{'SEE_LESS' | translate}}\n </span>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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 <div askScroll [askScrollThreshold]=\"50\"\n (scrollEnd)=\"getMoreItems()\"\n data-testid=\"options-form\"\n class=\"options-form\"\n [class.-select-all]=\"showSelectAllCheckbox\">\n <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\">\n <ask-checkbox [value]=\"optionsSelected[option[valueProp]]\" (valueChange)=\"valueChange(option, $event)\">\n {{display(option)}}</ask-checkbox>\n </div>\n </ng-container>\n </div>\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\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.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.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: "component", type: ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size", "color"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }, { kind: "directive", type: AutofocusDirective, selector: "[askAutofocus]" }, { kind: "directive", type: ScrollDirective, selector: "[askScroll]", inputs: ["askScrollThreshold"], outputs: ["scrollEnd"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
941
925
|
}
|
|
942
926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
943
927
|
type: Component,
|
|
944
|
-
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 (click)=\"handleAutocompleteClick()\"\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n askAutofocus\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n +{{selection.length - 1}}\n </span>\n </div>\n </ng-container>\n <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n </span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\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($event)\">\n {{'SEE_LESS' | translate}}\n </span>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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 <
|
|
928
|
+
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 (click)=\"handleAutocompleteClick()\"\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n askAutofocus\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n +{{selection.length - 1}}\n </span>\n </div>\n </ng-container>\n <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n </span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\"\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($event)\">\n {{'SEE_LESS' | translate}}\n </span>\n <span class=\"btn-expand material-icons\"\n data-testid=\"btn-expand\"\n [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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 <div askScroll [askScrollThreshold]=\"50\"\n (scrollEnd)=\"getMoreItems()\"\n data-testid=\"options-form\"\n class=\"options-form\"\n [class.-select-all]=\"showSelectAllCheckbox\">\n <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n <div class=\"option-item\">\n <ask-checkbox [value]=\"optionsSelected[option[valueProp]]\" (valueChange)=\"valueChange(option, $event)\">\n {{display(option)}}</ask-checkbox>\n </div>\n </ng-container>\n </div>\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\n"] }]
|
|
945
929
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
|
|
946
930
|
type: ViewChild,
|
|
947
931
|
args: ["autocomplete"]
|