asksuite-citrus 0.6.4 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +2 -2
- package/esm2022/lib/components/avatar/avatar.component.mjs +2 -2
- package/esm2022/lib/components/box/box.component.mjs +2 -2
- package/esm2022/lib/components/button/button.component.mjs +2 -2
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/lib/components/chips/chips.component.mjs +2 -2
- package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs +2 -2
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +2 -2
- package/esm2022/lib/components/dropdown-container/dropdown-container.component.mjs +2 -2
- package/esm2022/lib/components/input/input.component.mjs +2 -2
- package/esm2022/lib/components/select/select.component.mjs +2 -2
- package/esm2022/lib/components/skeleton/skeleton.component.mjs +6 -3
- package/esm2022/lib/directives/ask-dropdown.directive.mjs +26 -4
- package/fesm2022/asksuite-citrus.mjs +52 -27
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/components/skeleton/skeleton.component.d.ts +2 -1
- package/lib/directives/ask-dropdown.directive.d.ts +4 -2
- package/package.json +1 -1
- package/styles/styles.scss +6 -0
|
@@ -278,11 +278,11 @@ export class AutocompleteComponent {
|
|
|
278
278
|
this.disabled = isDisabled;
|
|
279
279
|
}
|
|
280
280
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1.FormBuilder }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
281
|
-
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 <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}}.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}.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%}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size"], outputs: ["action"] }, { kind: "component", type: i5.CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }, { kind: "directive", type: i6.AutofocusDirective, selector: "[askAutofocus]" }, { kind: "directive", type: i7.ScrollDirective, selector: "[askScroll]", inputs: ["askScrollThreshold"], outputs: ["scrollEnd"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
281
|
+
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 <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}}.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%}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size"], outputs: ["action"] }, { kind: "component", type: i5.CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }, { kind: "directive", type: i6.AutofocusDirective, selector: "[askAutofocus]" }, { kind: "directive", type: i7.ScrollDirective, selector: "[askScroll]", inputs: ["askScrollThreshold"], outputs: ["scrollEnd"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
282
282
|
}
|
|
283
283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
284
284
|
type: Component,
|
|
285
|
-
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 <form askScroll [askScrollThreshold]=\"50\"\n *ngIf=\"selectionForm.controls\"\n [formGroup]=\"selectionForm\"\n (scrollEnd)=\"getMoreItems()\"\n data-testid=\"options-form\"\n class=\"options-form\">\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}}.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}.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%}.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"] }]
|
|
285
|
+
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 <form askScroll [askScrollThreshold]=\"50\"\n *ngIf=\"selectionForm.controls\"\n [formGroup]=\"selectionForm\"\n (scrollEnd)=\"getMoreItems()\"\n data-testid=\"options-form\"\n class=\"options-form\">\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}}.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%}.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"] }]
|
|
286
286
|
}], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
|
|
287
287
|
type: ViewChild,
|
|
288
288
|
args: ["autocomplete"]
|
|
@@ -35,11 +35,11 @@ export class AvatarComponent {
|
|
|
35
35
|
return this.src || AvatarComponent.BOT_ICON;
|
|
36
36
|
}
|
|
37
37
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AvatarComponent, selector: "ask-avatar", inputs: { src: "src", status: "status", statusTitle: "statusTitle", background: "background", name: "name" }, ngImport: i0, template: "<div class=\"avatar-container\"\n [ngClass]=\"{\n '-primary': !this.src && background === 'primary',\n '-secondary': !this.src && background === 'secondary',\n '-dark': !this.src && background === 'dark',\n '-initials': !!_initials\n }\"\n>\n <img *ngIf=\"src || !_initials\" [src]=\"image\" alt=\"avatar\" />\n <span *ngIf=\"!src && _initials\" class=\"initials\">{{_initials}}</span>\n\n <span [class]=\"'status ' + status\" [title]=\"statusTitle\"></span>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;width:32px;height:32px;border-radius:9999px}.avatar-container.-primary{background-color:var(--asksuite-orange)}.avatar-container.-secondary{background-color:var(--grey-200)}.avatar-container.-dark{background-color:var(--grey-800)}.avatar-container img{height:100%;border-radius:9999px}.avatar-container>.initials{font-size:15px;color:#fff}.avatar-container .status{display:none;position:absolute;bottom:-7px;right:-2px;width:16px;height:16px;border-radius:9999px}.avatar-container .status.online,.avatar-container .status.busy,.avatar-container .status.absent,.avatar-container .status.offline{display:block;border:1px solid white}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}.avatar-container .status.offline{background-color:#cbd2d9}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AvatarComponent, selector: "ask-avatar", inputs: { src: "src", status: "status", statusTitle: "statusTitle", background: "background", name: "name" }, ngImport: i0, template: "<div class=\"avatar-container\"\n [ngClass]=\"{\n '-primary': !this.src && background === 'primary',\n '-secondary': !this.src && background === 'secondary',\n '-dark': !this.src && background === 'dark',\n '-initials': !!_initials\n }\"\n>\n <img *ngIf=\"src || !_initials\" [src]=\"image\" alt=\"avatar\" />\n <span *ngIf=\"!src && _initials\" class=\"initials\">{{_initials}}</span>\n\n <span [class]=\"'status ' + status\" [title]=\"statusTitle\"></span>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;width:32px;height:32px;border-radius:9999px}.avatar-container.-primary{background-color:var(--asksuite-orange)}.avatar-container.-secondary{background-color:var(--grey-200)}.avatar-container.-dark{background-color:var(--grey-800)}.avatar-container img{height:100%;border-radius:9999px}.avatar-container>.initials{font-size:15px;color:#fff}.avatar-container .status{display:none;position:absolute;bottom:-7px;right:-2px;width:16px;height:16px;border-radius:9999px}.avatar-container .status.online,.avatar-container .status.busy,.avatar-container .status.absent,.avatar-container .status.offline{display:block;border:1px solid white}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}.avatar-container .status.offline{background-color:#cbd2d9}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
39
39
|
}
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
|
-
args: [{ selector: 'ask-avatar', template: "<div class=\"avatar-container\"\n [ngClass]=\"{\n '-primary': !this.src && background === 'primary',\n '-secondary': !this.src && background === 'secondary',\n '-dark': !this.src && background === 'dark',\n '-initials': !!_initials\n }\"\n>\n <img *ngIf=\"src || !_initials\" [src]=\"image\" alt=\"avatar\" />\n <span *ngIf=\"!src && _initials\" class=\"initials\">{{_initials}}</span>\n\n <span [class]=\"'status ' + status\" [title]=\"statusTitle\"></span>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;width:32px;height:32px;border-radius:9999px}.avatar-container.-primary{background-color:var(--asksuite-orange)}.avatar-container.-secondary{background-color:var(--grey-200)}.avatar-container.-dark{background-color:var(--grey-800)}.avatar-container img{height:100%;border-radius:9999px}.avatar-container>.initials{font-size:15px;color:#fff}.avatar-container .status{display:none;position:absolute;bottom:-7px;right:-2px;width:16px;height:16px;border-radius:9999px}.avatar-container .status.online,.avatar-container .status.busy,.avatar-container .status.absent,.avatar-container .status.offline{display:block;border:1px solid white}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}.avatar-container .status.offline{background-color:#cbd2d9}\n"] }]
|
|
42
|
+
args: [{ selector: 'ask-avatar', template: "<div class=\"avatar-container\"\n [ngClass]=\"{\n '-primary': !this.src && background === 'primary',\n '-secondary': !this.src && background === 'secondary',\n '-dark': !this.src && background === 'dark',\n '-initials': !!_initials\n }\"\n>\n <img *ngIf=\"src || !_initials\" [src]=\"image\" alt=\"avatar\" />\n <span *ngIf=\"!src && _initials\" class=\"initials\">{{_initials}}</span>\n\n <span [class]=\"'status ' + status\" [title]=\"statusTitle\"></span>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;width:32px;height:32px;border-radius:9999px}.avatar-container.-primary{background-color:var(--asksuite-orange)}.avatar-container.-secondary{background-color:var(--grey-200)}.avatar-container.-dark{background-color:var(--grey-800)}.avatar-container img{height:100%;border-radius:9999px}.avatar-container>.initials{font-size:15px;color:#fff}.avatar-container .status{display:none;position:absolute;bottom:-7px;right:-2px;width:16px;height:16px;border-radius:9999px}.avatar-container .status.online,.avatar-container .status.busy,.avatar-container .status.absent,.avatar-container .status.offline{display:block;border:1px solid white}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}.avatar-container .status.offline{background-color:#cbd2d9}\n"] }]
|
|
43
43
|
}], propDecorators: { src: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}], status: [{
|
|
@@ -12,11 +12,11 @@ export class BoxComponent {
|
|
|
12
12
|
this.collapse = !this.collapse;
|
|
13
13
|
}
|
|
14
14
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: BoxComponent, selector: "ask-box", inputs: { title: "title", subtitle: "subtitle", canCollapse: "canCollapse", collapse: "collapse" }, ngImport: i0, template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\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{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}}.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}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: BoxComponent, selector: "ask-box", inputs: { title: "title", subtitle: "subtitle", canCollapse: "canCollapse", collapse: "collapse" }, ngImport: i0, template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\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{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}}.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}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
16
16
|
}
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: BoxComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
|
-
args: [{ selector: 'ask-box', template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\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{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}}.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}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"] }]
|
|
19
|
+
args: [{ selector: 'ask-box', template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\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{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}}.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}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"] }]
|
|
20
20
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
21
21
|
type: Input
|
|
22
22
|
}], subtitle: [{
|
|
@@ -23,11 +23,11 @@ export class ButtonComponent {
|
|
|
23
23
|
this.labelClass = `-${this.labelSide}`;
|
|
24
24
|
}
|
|
25
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ButtonComponent, selector: "ask-button", inputs: { label: "label", size: "size", type: "type", rounded: "rounded", disabled: "disabled", labelSide: "labelSide", loading: "loading" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ButtonComponent, selector: "ask-button", inputs: { label: "label", size: "size", type: "type", rounded: "rounded", disabled: "disabled", labelSide: "labelSide", loading: "loading" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
|
-
args: [{ selector: 'ask-button', template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"] }]
|
|
30
|
+
args: [{ selector: 'ask-button', template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.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}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"] }]
|
|
31
31
|
}], propDecorators: { label: [{
|
|
32
32
|
type: Input
|
|
33
33
|
}], size: [{
|
|
@@ -47,11 +47,11 @@ export class CheckboxComponent {
|
|
|
47
47
|
this.value = value;
|
|
48
48
|
}
|
|
49
49
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
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], 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}.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}}.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}: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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
50
|
+
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], 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}.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}}.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}: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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
51
51
|
}
|
|
52
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
53
53
|
type: Component,
|
|
54
|
-
args: [{ selector: 'ask-checkbox', providers: [valueAccessor], 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}.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}}.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}: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"] }]
|
|
54
|
+
args: [{ selector: 'ask-checkbox', providers: [valueAccessor], 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}.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}}.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}: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"] }]
|
|
55
55
|
}], propDecorators: { value: [{
|
|
56
56
|
type: Input
|
|
57
57
|
}], disabled: [{
|
|
@@ -20,11 +20,11 @@ export class ChipsComponent {
|
|
|
20
20
|
this.action = new EventEmitter();
|
|
21
21
|
}
|
|
22
22
|
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 }); }
|
|
23
|
-
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\n }\"\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}}.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}.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}\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 }); }
|
|
23
|
+
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\n }\"\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}}.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}\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 }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
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 }\"\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}}.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}.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}\n"] }]
|
|
27
|
+
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 }\"\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}}.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}\n"] }]
|
|
28
28
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
29
29
|
type: Input
|
|
30
30
|
}], showAction: [{
|
package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs
CHANGED
|
@@ -218,11 +218,11 @@ export class DatePickerCalendarComponent {
|
|
|
218
218
|
this.dateChange.emit(momentDate.format(DEFAULT_DATE_FORMAT));
|
|
219
219
|
}
|
|
220
220
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}}.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}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
222
222
|
}
|
|
223
223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, decorators: [{
|
|
224
224
|
type: Component,
|
|
225
|
-
args: [{ selector: 'ask-date-picker-calendar', template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}}.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}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"] }]
|
|
225
|
+
args: [{ selector: 'ask-date-picker-calendar', template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"] }]
|
|
226
226
|
}], propDecorators: { isRange: [{
|
|
227
227
|
type: Input
|
|
228
228
|
}], date: [{
|