asksuite-citrus 0.0.11 → 0.0.12-beta1
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/asksuite-citrus.module.mjs +31 -5
- package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +192 -0
- 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 +68 -0
- package/esm2022/lib/components/chips/chips.component.mjs +19 -0
- package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs +6 -4
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +22 -27
- 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/public-api.mjs +4 -1
- package/fesm2022/asksuite-citrus.mjs +376 -95
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/asksuite-citrus.module.d.ts +9 -5
- package/lib/components/autocomplete/autocomplete.component.d.ts +54 -0
- package/lib/components/checkbox/checkbox.component.d.ts +23 -0
- package/lib/components/chips/chips.component.d.ts +8 -0
- package/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.d.ts +1 -0
- package/lib/components/date-picker/date-picker.component.d.ts +3 -2
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
- package/styles/helpers.scss +5 -0
- package/styles/tokens.scss +1 -0
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output, forwardRef, ViewChild, HostListener, Directive, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, forwardRef, ViewChild, HostListener, Directive, inject, DestroyRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
6
|
-
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
7
|
-
import { ComponentPortal } from '@angular/cdk/portal';
|
|
8
|
-
import * as i1$
|
|
9
|
-
import {
|
|
5
|
+
import * as i1$1 from '@angular/forms';
|
|
6
|
+
import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
8
|
+
import * as i1$2 from '@angular/cdk/overlay';
|
|
9
|
+
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
10
|
+
import { startWith, tap, map, debounceTime } from 'rxjs';
|
|
11
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
10
12
|
import moment from 'moment';
|
|
11
13
|
|
|
12
14
|
class ButtonComponent {
|
|
@@ -27,11 +29,11 @@ class ButtonComponent {
|
|
|
27
29
|
return `${this.type} ${this.size}`;
|
|
28
30
|
}
|
|
29
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
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", disabled: "disabled" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n {{ label }}\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}.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}button{position:relative;display:flex;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;transition:background-color .1s,box-shadow .1s}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}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:#9aa5b1;box-shadow:0 1px 2px #2a304229}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.outline{background:none;color:#ff5724}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:after{box-shadow:0 0 0 2px inset #9aa5b1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
32
|
+
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", disabled: "disabled" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n {{ label }}\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}.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}button{position:relative;display:flex;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;transition:background-color .1s,box-shadow .1s}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}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:#9aa5b1;box-shadow:0 1px 2px #2a304229}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.outline{background:none;color:#ff5724}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:after{box-shadow:0 0 0 2px inset #9aa5b1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
31
33
|
}
|
|
32
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
33
35
|
type: Component,
|
|
34
|
-
args: [{ selector: 'ask-button', template: "<button\n type=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n {{ label }}\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}.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}button{position:relative;display:flex;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;transition:background-color .1s,box-shadow .1s}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}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:#9aa5b1;box-shadow:0 1px 2px #2a304229}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.outline{background:none;color:#ff5724}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:after{box-shadow:0 0 0 2px inset #9aa5b1}\n"] }]
|
|
36
|
+
args: [{ selector: 'ask-button', template: "<button\n type=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n {{ label }}\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}.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}button{position:relative;display:flex;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;transition:background-color .1s,box-shadow .1s}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}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:#9aa5b1;box-shadow:0 1px 2px #2a304229}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.outline{background:none;color:#ff5724}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:after{box-shadow:0 0 0 2px inset #9aa5b1}\n"] }]
|
|
35
37
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
36
38
|
type: Input
|
|
37
39
|
}], size: [{
|
|
@@ -48,7 +50,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
48
50
|
type: Output
|
|
49
51
|
}] } });
|
|
50
52
|
|
|
51
|
-
const valueAccessor$
|
|
53
|
+
const valueAccessor$3 = {
|
|
52
54
|
provide: NG_VALUE_ACCESSOR,
|
|
53
55
|
multi: true,
|
|
54
56
|
useExisting: forwardRef(() => InputComponent),
|
|
@@ -106,11 +108,11 @@ class InputComponent {
|
|
|
106
108
|
this.valueChange.emit(this.value);
|
|
107
109
|
}
|
|
108
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: InputComponent, selector: "ask-input", inputs: { value: "value", type: "type", placeholder: "placeholder", leftIcon: "leftIcon", rightIcon: "rightIcon", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", input: "input", click: "click", focus: "focus", blur: "blur", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick" }, providers: [valueAccessor$
|
|
111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: InputComponent, selector: "ask-input", inputs: { value: "value", type: "type", placeholder: "placeholder", leftIcon: "leftIcon", rightIcon: "rightIcon", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", input: "input", click: "click", focus: "focus", blur: "blur", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick" }, providers: [valueAccessor$3], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"input-container\"\n [ngClass]=\"{ 'focus': isFocused, 'disabled': disabled, 'left-icon': leftIcon, 'right-icon': rightIcon }\"\n (click)=\"inputElement.focus()\"\n>\n <span\n *ngIf=\"leftIcon\"\n class=\"material-icons icon-left\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [type]=\"type\"\n [placeholder]=\"placeholder || ''\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (change)=\"handleChange($event)\"\n (input)=\"handleInput($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n\n <span\n *ngIf=\"rightIcon\"\n class=\"material-icons icon-right\"\n\n (click)=\"rightIconClick.emit($event)\"\n >\n {{ rightIcon }}\n </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}.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-container{position:relative;display:flex;align-items:center;justify-content:start;width:100%}.input-container .ask-input{position:relative;display:flex;align-items:center;border-radius:4px;border:1px solid #CBD2D9;padding:16px;outline:none;gap:8px;line-height:14px;color:#3e4c59;height:48px;font-size:.875rem;font-weight:400;transition:border .2s;flex:1}.input-container .ask-input:focus{border-color:#ff5724}.input-container .ask-input .material-icons{display:flex;align-items:center;justify-content:center;height:14px}.input-container .ask-input::placeholder{color:#9aa5b1}.input-container.left-icon .ask-input{padding-left:48px}.input-container.right-icon .ask-input{padding-right:48px}.input-container .icon-left,.input-container .icon-right{position:absolute;display:flex;align-items:center;justify-content:center;height:100%;width:48px;font-size:21px;color:#7b8794;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s;z-index:1}.input-container .icon-left:hover,.input-container .icon-right:hover{color:#52606d}.input-container .icon-left:active,.input-container .icon-right:active{color:#1f2933}.input-container .icon-right{right:0}.input-container.disabled,.input-container.disabled .ask-input{background:#F5F7FA;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
110
112
|
}
|
|
111
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
112
114
|
type: Component,
|
|
113
|
-
args: [{ selector: 'ask-input', providers: [valueAccessor$
|
|
115
|
+
args: [{ selector: 'ask-input', providers: [valueAccessor$3], template: "<div\n class=\"input-container\"\n [ngClass]=\"{ 'focus': isFocused, 'disabled': disabled, 'left-icon': leftIcon, 'right-icon': rightIcon }\"\n (click)=\"inputElement.focus()\"\n>\n <span\n *ngIf=\"leftIcon\"\n class=\"material-icons icon-left\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [type]=\"type\"\n [placeholder]=\"placeholder || ''\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (change)=\"handleChange($event)\"\n (input)=\"handleInput($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n\n <span\n *ngIf=\"rightIcon\"\n class=\"material-icons icon-right\"\n\n (click)=\"rightIconClick.emit($event)\"\n >\n {{ rightIcon }}\n </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}.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-container{position:relative;display:flex;align-items:center;justify-content:start;width:100%}.input-container .ask-input{position:relative;display:flex;align-items:center;border-radius:4px;border:1px solid #CBD2D9;padding:16px;outline:none;gap:8px;line-height:14px;color:#3e4c59;height:48px;font-size:.875rem;font-weight:400;transition:border .2s;flex:1}.input-container .ask-input:focus{border-color:#ff5724}.input-container .ask-input .material-icons{display:flex;align-items:center;justify-content:center;height:14px}.input-container .ask-input::placeholder{color:#9aa5b1}.input-container.left-icon .ask-input{padding-left:48px}.input-container.right-icon .ask-input{padding-right:48px}.input-container .icon-left,.input-container .icon-right{position:absolute;display:flex;align-items:center;justify-content:center;height:100%;width:48px;font-size:21px;color:#7b8794;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s;z-index:1}.input-container .icon-left:hover,.input-container .icon-right:hover{color:#52606d}.input-container .icon-left:active,.input-container .icon-right:active{color:#1f2933}.input-container .icon-right{right:0}.input-container.disabled,.input-container.disabled .ask-input{background:#F5F7FA;cursor:not-allowed}\n"] }]
|
|
114
116
|
}], ctorParameters: function () { return []; }, propDecorators: { value: [{
|
|
115
117
|
type: Input
|
|
116
118
|
}], type: [{
|
|
@@ -144,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
144
146
|
args: ['inputElement', { static: true }]
|
|
145
147
|
}] } });
|
|
146
148
|
|
|
147
|
-
const valueAccessor = {
|
|
149
|
+
const valueAccessor$2 = {
|
|
148
150
|
provide: NG_VALUE_ACCESSOR,
|
|
149
151
|
multi: true,
|
|
150
152
|
useExisting: forwardRef(() => SelectComponent),
|
|
@@ -205,11 +207,11 @@ class SelectComponent {
|
|
|
205
207
|
this.onTouch = fn;
|
|
206
208
|
}
|
|
207
209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: SelectComponent, selector: "ask-select", inputs: { value: "value", options: "options", maxItems: "maxItems", showNoneOption: "showNoneOption", selectAnOptionLabel: "selectAnOptionLabel", noOptionLabel: "noOptionLabel", noneLabel: "noneLabel" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "clickOut($event)" } }, providers: [valueAccessor], ngImport: i0, template: "<div\n class=\"select-container\"\n (click)=\"handleSelectClick()\"\n>\n <select [hidden]=\"true\"></select>\n\n <span class=\"label\">{{ selectedOption?.label || selectAnOptionLabel }}</span>\n <span class=\"material-icons arrow\">arrow_drop_down</span>\n\n <div\n *ngIf=\"showList\"\n class=\"options-list\"\n [style.max-height]=\"listMaxHeight + 'px'\"\n >\n <!-- No options available -->\n <div\n *ngIf=\"!options?.length\"\n class=\"option\"\n >\n {{ noOptionLabel }}\n </div>\n\n <div\n *ngIf=\"showNoneOption && options?.length\"\n class=\"option\"\n (click)=\"handleOptionClick(undefined)\"\n >\n {{ noneLabel }}\n </div>\n\n <div\n *ngFor=\"let option of options\"\n class=\"option\"\n (click)=\"handleOptionClick(option)\"\n >\n {{ option.label }}\n </div>\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}.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}.select-container{position:relative;display:flex;align-items:center;border-radius:4px;border:1px solid #CBD2D9;padding:16px;outline:none;gap:8px;line-height:14px;color:#3e4c59;height:48px;font-size:.875rem;font-weight:400;transition:border .2s;cursor:pointer}.select-container:focus{border-color:#ff5724}.select-container .material-icons{display:flex;align-items:center;justify-content:center;height:14px}.select-container .label{font-size:.875rem;font-weight:400;color:#3e4c59;pointer-events:none;-webkit-user-select:none;user-select:none;flex:1}.select-container .arrow{pointer-events:none;-webkit-user-select:none;user-select:none}.select-container .options-list{position:absolute;display:flex;flex-direction:column;top:calc(100% - 2px);left:-1px;width:calc(100% + 2px);padding-top:1px;border:1px solid #CBD2D9;border-top:0;border-radius:0 0 6px 6px;gap:1px;overflow-y:auto;background:#F5F7FA}.select-container .options-list .option{display:flex;align-items:center;justify-content:start;padding:16px;background:#FFF;font-size:.875rem;cursor:pointer;transition:font-weight .2s,background-color .2s}.select-container .options-list .option:hover{background-color:#f5f7fa}.select-container .options-list .option:active{background-color:#e4e7eb}.select-container .options-list .option.selected{background-color:#f5f7fa;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: SelectComponent, selector: "ask-select", inputs: { value: "value", options: "options", maxItems: "maxItems", showNoneOption: "showNoneOption", selectAnOptionLabel: "selectAnOptionLabel", noOptionLabel: "noOptionLabel", noneLabel: "noneLabel" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "clickOut($event)" } }, providers: [valueAccessor$2], ngImport: i0, template: "<div\n class=\"select-container\"\n (click)=\"handleSelectClick()\"\n>\n <select [hidden]=\"true\"></select>\n\n <span class=\"label\">{{ selectedOption?.label || selectAnOptionLabel }}</span>\n <span class=\"material-icons arrow\">arrow_drop_down</span>\n\n <div\n *ngIf=\"showList\"\n class=\"options-list\"\n [style.max-height]=\"listMaxHeight + 'px'\"\n >\n <!-- No options available -->\n <div\n *ngIf=\"!options?.length\"\n class=\"option\"\n >\n {{ noOptionLabel }}\n </div>\n\n <div\n *ngIf=\"showNoneOption && options?.length\"\n class=\"option\"\n (click)=\"handleOptionClick(undefined)\"\n >\n {{ noneLabel }}\n </div>\n\n <div\n *ngFor=\"let option of options\"\n class=\"option\"\n (click)=\"handleOptionClick(option)\"\n >\n {{ option.label }}\n </div>\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}.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}.select-container{position:relative;display:flex;align-items:center;border-radius:4px;border:1px solid #CBD2D9;padding:16px;outline:none;gap:8px;line-height:14px;color:#3e4c59;height:48px;font-size:.875rem;font-weight:400;transition:border .2s;cursor:pointer}.select-container:focus{border-color:#ff5724}.select-container .material-icons{display:flex;align-items:center;justify-content:center;height:14px}.select-container .label{font-size:.875rem;font-weight:400;color:#3e4c59;pointer-events:none;-webkit-user-select:none;user-select:none;flex:1}.select-container .arrow{pointer-events:none;-webkit-user-select:none;user-select:none}.select-container .options-list{position:absolute;display:flex;flex-direction:column;top:calc(100% - 2px);left:-1px;width:calc(100% + 2px);padding-top:1px;border:1px solid #CBD2D9;border-top:0;border-radius:0 0 6px 6px;gap:1px;overflow-y:auto;background:#F5F7FA}.select-container .options-list .option{display:flex;align-items:center;justify-content:start;padding:16px;background:#FFF;font-size:.875rem;cursor:pointer;transition:font-weight .2s,background-color .2s}.select-container .options-list .option:hover{background-color:#f5f7fa}.select-container .options-list .option:active{background-color:#e4e7eb}.select-container .options-list .option.selected{background-color:#f5f7fa;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
209
211
|
}
|
|
210
212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SelectComponent, decorators: [{
|
|
211
213
|
type: Component,
|
|
212
|
-
args: [{ selector: 'ask-select', providers: [valueAccessor], template: "<div\n class=\"select-container\"\n (click)=\"handleSelectClick()\"\n>\n <select [hidden]=\"true\"></select>\n\n <span class=\"label\">{{ selectedOption?.label || selectAnOptionLabel }}</span>\n <span class=\"material-icons arrow\">arrow_drop_down</span>\n\n <div\n *ngIf=\"showList\"\n class=\"options-list\"\n [style.max-height]=\"listMaxHeight + 'px'\"\n >\n <!-- No options available -->\n <div\n *ngIf=\"!options?.length\"\n class=\"option\"\n >\n {{ noOptionLabel }}\n </div>\n\n <div\n *ngIf=\"showNoneOption && options?.length\"\n class=\"option\"\n (click)=\"handleOptionClick(undefined)\"\n >\n {{ noneLabel }}\n </div>\n\n <div\n *ngFor=\"let option of options\"\n class=\"option\"\n (click)=\"handleOptionClick(option)\"\n >\n {{ option.label }}\n </div>\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}.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}.select-container{position:relative;display:flex;align-items:center;border-radius:4px;border:1px solid #CBD2D9;padding:16px;outline:none;gap:8px;line-height:14px;color:#3e4c59;height:48px;font-size:.875rem;font-weight:400;transition:border .2s;cursor:pointer}.select-container:focus{border-color:#ff5724}.select-container .material-icons{display:flex;align-items:center;justify-content:center;height:14px}.select-container .label{font-size:.875rem;font-weight:400;color:#3e4c59;pointer-events:none;-webkit-user-select:none;user-select:none;flex:1}.select-container .arrow{pointer-events:none;-webkit-user-select:none;user-select:none}.select-container .options-list{position:absolute;display:flex;flex-direction:column;top:calc(100% - 2px);left:-1px;width:calc(100% + 2px);padding-top:1px;border:1px solid #CBD2D9;border-top:0;border-radius:0 0 6px 6px;gap:1px;overflow-y:auto;background:#F5F7FA}.select-container .options-list .option{display:flex;align-items:center;justify-content:start;padding:16px;background:#FFF;font-size:.875rem;cursor:pointer;transition:font-weight .2s,background-color .2s}.select-container .options-list .option:hover{background-color:#f5f7fa}.select-container .options-list .option:active{background-color:#e4e7eb}.select-container .options-list .option.selected{background-color:#f5f7fa;font-weight:500}\n"] }]
|
|
214
|
+
args: [{ selector: 'ask-select', providers: [valueAccessor$2], template: "<div\n class=\"select-container\"\n (click)=\"handleSelectClick()\"\n>\n <select [hidden]=\"true\"></select>\n\n <span class=\"label\">{{ selectedOption?.label || selectAnOptionLabel }}</span>\n <span class=\"material-icons arrow\">arrow_drop_down</span>\n\n <div\n *ngIf=\"showList\"\n class=\"options-list\"\n [style.max-height]=\"listMaxHeight + 'px'\"\n >\n <!-- No options available -->\n <div\n *ngIf=\"!options?.length\"\n class=\"option\"\n >\n {{ noOptionLabel }}\n </div>\n\n <div\n *ngIf=\"showNoneOption && options?.length\"\n class=\"option\"\n (click)=\"handleOptionClick(undefined)\"\n >\n {{ noneLabel }}\n </div>\n\n <div\n *ngFor=\"let option of options\"\n class=\"option\"\n (click)=\"handleOptionClick(option)\"\n >\n {{ option.label }}\n </div>\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}.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}.select-container{position:relative;display:flex;align-items:center;border-radius:4px;border:1px solid #CBD2D9;padding:16px;outline:none;gap:8px;line-height:14px;color:#3e4c59;height:48px;font-size:.875rem;font-weight:400;transition:border .2s;cursor:pointer}.select-container:focus{border-color:#ff5724}.select-container .material-icons{display:flex;align-items:center;justify-content:center;height:14px}.select-container .label{font-size:.875rem;font-weight:400;color:#3e4c59;pointer-events:none;-webkit-user-select:none;user-select:none;flex:1}.select-container .arrow{pointer-events:none;-webkit-user-select:none;user-select:none}.select-container .options-list{position:absolute;display:flex;flex-direction:column;top:calc(100% - 2px);left:-1px;width:calc(100% + 2px);padding-top:1px;border:1px solid #CBD2D9;border-top:0;border-radius:0 0 6px 6px;gap:1px;overflow-y:auto;background:#F5F7FA}.select-container .options-list .option{display:flex;align-items:center;justify-content:start;padding:16px;background:#FFF;font-size:.875rem;cursor:pointer;transition:font-weight .2s,background-color .2s}.select-container .options-list .option:hover{background-color:#f5f7fa}.select-container .options-list .option:active{background-color:#e4e7eb}.select-container .options-list .option.selected{background-color:#f5f7fa;font-weight:500}\n"] }]
|
|
213
215
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
|
|
214
216
|
type: Input
|
|
215
217
|
}], valueChange: [{
|
|
@@ -242,11 +244,11 @@ class BoxComponent {
|
|
|
242
244
|
this.collapse = !this.collapse;
|
|
243
245
|
}
|
|
244
246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
245
|
-
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}.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}.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"] }] }); }
|
|
247
|
+
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}.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}.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"] }] }); }
|
|
246
248
|
}
|
|
247
249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: BoxComponent, decorators: [{
|
|
248
250
|
type: Component,
|
|
249
|
-
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}.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}.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"] }]
|
|
251
|
+
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}.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}.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"] }]
|
|
250
252
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
251
253
|
type: Input
|
|
252
254
|
}], subtitle: [{
|
|
@@ -274,11 +276,11 @@ class AvatarComponent {
|
|
|
274
276
|
return this.src || AvatarComponent.BOT_ICON;
|
|
275
277
|
}
|
|
276
278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AvatarComponent, selector: "ask-avatar", inputs: { src: "src", status: "status" }, ngImport: i0, template: "<div class=\"avatar-container\">\n <img [src]=\"image\" alt=\"avatar\" />\n\n <span [class]=\"'status ' + status\"></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}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:#cbd2d9;width:32px;height:32px;border-radius:9999px}.avatar-container img{height:100%;border-radius:9999px}.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{display:block}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}\n"] }); }
|
|
279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AvatarComponent, selector: "ask-avatar", inputs: { src: "src", status: "status" }, ngImport: i0, template: "<div class=\"avatar-container\">\n <img [src]=\"image\" alt=\"avatar\" />\n\n <span [class]=\"'status ' + status\"></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}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:#cbd2d9;width:32px;height:32px;border-radius:9999px}.avatar-container img{height:100%;border-radius:9999px}.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{display:block}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}\n"] }); }
|
|
278
280
|
}
|
|
279
281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
280
282
|
type: Component,
|
|
281
|
-
args: [{ selector: 'ask-avatar', template: "<div class=\"avatar-container\">\n <img [src]=\"image\" alt=\"avatar\" />\n\n <span [class]=\"'status ' + status\"></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}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:#cbd2d9;width:32px;height:32px;border-radius:9999px}.avatar-container img{height:100%;border-radius:9999px}.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{display:block}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}\n"] }]
|
|
283
|
+
args: [{ selector: 'ask-avatar', template: "<div class=\"avatar-container\">\n <img [src]=\"image\" alt=\"avatar\" />\n\n <span [class]=\"'status ' + status\"></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}.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}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;background-color:#cbd2d9;width:32px;height:32px;border-radius:9999px}.avatar-container img{height:100%;border-radius:9999px}.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{display:block}.avatar-container .status.online{background-color:#4baf50}.avatar-container .status.busy{background-color:#e8453e}.avatar-container .status.absent{background-color:#ffc107}\n"] }]
|
|
282
284
|
}], propDecorators: { src: [{
|
|
283
285
|
type: Input
|
|
284
286
|
}], status: [{
|
|
@@ -290,11 +292,11 @@ class DropdownContainerComponent {
|
|
|
290
292
|
ngOnInit() {
|
|
291
293
|
}
|
|
292
294
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
293
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DropdownContainerComponent, selector: "ask-dropdown-container", inputs: { content: "content" }, ngImport: i0, template: "<div class=\"dropdown-container\">\n <ng-container>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\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}.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}.dropdown-container{display:flex;flex-direction:column;background:var(--primary-background);box-shadow:0 0 10px #2a304229;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
295
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DropdownContainerComponent, selector: "ask-dropdown-container", inputs: { content: "content" }, ngImport: i0, template: "<div class=\"dropdown-container\">\n <ng-container>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.dropdown-container{display:flex;flex-direction:column;background:var(--primary-background);box-shadow:0 0 10px #2a304229;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
294
296
|
}
|
|
295
297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DropdownContainerComponent, decorators: [{
|
|
296
298
|
type: Component,
|
|
297
|
-
args: [{ selector: 'ask-dropdown-container', template: "<div class=\"dropdown-container\">\n <ng-container>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\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}.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}.dropdown-container{display:flex;flex-direction:column;background:var(--primary-background);box-shadow:0 0 10px #2a304229;border-radius:4px}\n"] }]
|
|
299
|
+
args: [{ selector: 'ask-dropdown-container', template: "<div class=\"dropdown-container\">\n <ng-container>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </ng-container>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.dropdown-container{display:flex;flex-direction:column;background:var(--primary-background);box-shadow:0 0 10px #2a304229;border-radius:4px}\n"] }]
|
|
298
300
|
}], ctorParameters: function () { return []; }, propDecorators: { content: [{
|
|
299
301
|
type: Input
|
|
300
302
|
}] } });
|
|
@@ -354,7 +356,7 @@ class AskDropdownDirective {
|
|
|
354
356
|
get isRendered() {
|
|
355
357
|
return this._isRendered;
|
|
356
358
|
}
|
|
357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AskDropdownDirective, deps: [{ token: i1$
|
|
359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AskDropdownDirective, deps: [{ token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
358
360
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: AskDropdownDirective, selector: "[askDropdown]", inputs: { askDropdown: "askDropdown" }, host: { listeners: { "click": "show()" } }, ngImport: i0 }); }
|
|
359
361
|
}
|
|
360
362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AskDropdownDirective, decorators: [{
|
|
@@ -362,95 +364,278 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
362
364
|
args: [{
|
|
363
365
|
selector: '[askDropdown]'
|
|
364
366
|
}]
|
|
365
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
367
|
+
}], ctorParameters: function () { return [{ type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }]; }, propDecorators: { askDropdown: [{
|
|
366
368
|
type: Input
|
|
367
369
|
}], show: [{
|
|
368
370
|
type: HostListener,
|
|
369
371
|
args: ['click']
|
|
370
372
|
}] } });
|
|
371
373
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
+
class ChipsComponent {
|
|
375
|
+
constructor() {
|
|
376
|
+
this.color = '';
|
|
377
|
+
this.action = new EventEmitter();
|
|
378
|
+
}
|
|
379
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChipsComponent, selector: "ask-chips", inputs: { color: "color" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"chip-container\" [style.background]=\"color\">\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"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}.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}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding-left:.5rem;width:-moz-fit-content;width:fit-content;border-radius:12px;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}\n"] }); }
|
|
381
|
+
}
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
383
|
+
type: Component,
|
|
384
|
+
args: [{ selector: 'ask-chips', template: "<div class=\"chip-container\" [style.background]=\"color\">\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"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}.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}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding-left:.5rem;width:-moz-fit-content;width:fit-content;border-radius:12px;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}\n"] }]
|
|
385
|
+
}], propDecorators: { color: [{
|
|
386
|
+
type: Input
|
|
387
|
+
}], action: [{
|
|
388
|
+
type: Output
|
|
389
|
+
}] } });
|
|
390
|
+
|
|
391
|
+
const valueAccessor$1 = {
|
|
392
|
+
provide: NG_VALUE_ACCESSOR,
|
|
393
|
+
multi: true,
|
|
394
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
374
395
|
};
|
|
375
|
-
|
|
396
|
+
class CheckboxComponent {
|
|
376
397
|
constructor() {
|
|
377
|
-
this.
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
{ label: 'Período customizado', getRange: () => ({}), isCustomRange: true, selected: false },
|
|
385
|
-
];
|
|
386
|
-
this.date = new Date();
|
|
387
|
-
this.isRange = false;
|
|
388
|
-
this.dateChange = new EventEmitter();
|
|
389
|
-
this.cancel = new EventEmitter();
|
|
390
|
-
this.isCustomRange = false;
|
|
398
|
+
this.disabled = false;
|
|
399
|
+
this.valueChange = new EventEmitter();
|
|
400
|
+
this.change = new EventEmitter();
|
|
401
|
+
this.click = new EventEmitter();
|
|
402
|
+
this.focus = new EventEmitter();
|
|
403
|
+
this.isFocused = false;
|
|
404
|
+
this.onTouch = () => { };
|
|
391
405
|
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
}
|
|
396
|
-
return this.date.from;
|
|
406
|
+
handleFocus(event) {
|
|
407
|
+
this.isFocused = true;
|
|
408
|
+
this.focus.emit(event);
|
|
397
409
|
}
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
410
|
+
onModelChange(newValue) {
|
|
411
|
+
this.writeValue(newValue);
|
|
412
|
+
this.onChange(newValue);
|
|
413
|
+
}
|
|
414
|
+
handleChange(event) {
|
|
415
|
+
this.change.emit(event);
|
|
416
|
+
}
|
|
417
|
+
/*
|
|
418
|
+
* Control value accessor methods
|
|
419
|
+
*/
|
|
420
|
+
registerOnChange(fn) {
|
|
421
|
+
this.onChange = fn;
|
|
422
|
+
}
|
|
423
|
+
onChange(_) {
|
|
424
|
+
}
|
|
425
|
+
registerOnTouched(fn) {
|
|
426
|
+
this.onTouch = fn;
|
|
427
|
+
}
|
|
428
|
+
setDisabledState(isDisabled) {
|
|
429
|
+
this.disabled = isDisabled;
|
|
430
|
+
}
|
|
431
|
+
writeValue(value) {
|
|
432
|
+
this.value = value;
|
|
433
|
+
this.valueChange.emit(this.value);
|
|
434
|
+
}
|
|
435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor$1], ngImport: i0, template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}:host{max-width:100%}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
437
|
+
}
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
439
|
+
type: Component,
|
|
440
|
+
args: [{ selector: 'ask-checkbox', providers: [valueAccessor$1], template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}:host{max-width:100%}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width: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"] }]
|
|
441
|
+
}], propDecorators: { value: [{
|
|
442
|
+
type: Input
|
|
443
|
+
}], disabled: [{
|
|
444
|
+
type: Input
|
|
445
|
+
}], valueChange: [{
|
|
446
|
+
type: Output
|
|
447
|
+
}], change: [{
|
|
448
|
+
type: Output
|
|
449
|
+
}], click: [{
|
|
450
|
+
type: Output
|
|
451
|
+
}], focus: [{
|
|
452
|
+
type: Output
|
|
453
|
+
}] } });
|
|
454
|
+
|
|
455
|
+
const valueAccessor = {
|
|
456
|
+
provide: NG_VALUE_ACCESSOR,
|
|
457
|
+
multi: true,
|
|
458
|
+
useExisting: forwardRef(() => AutocompleteComponent),
|
|
459
|
+
};
|
|
460
|
+
class AutocompleteComponent {
|
|
461
|
+
constructor(formBuilder, overlay, viewContainerRef) {
|
|
462
|
+
this.formBuilder = formBuilder;
|
|
463
|
+
this.overlay = overlay;
|
|
464
|
+
this.viewContainerRef = viewContainerRef;
|
|
465
|
+
this.inputControl = new FormControl("");
|
|
466
|
+
this.filteredOptions = [];
|
|
467
|
+
this.closed = true;
|
|
468
|
+
this.chipsCollapsed = true;
|
|
469
|
+
this.checkAllValue = false;
|
|
470
|
+
this.disabled = false;
|
|
471
|
+
this._destroy = inject(DestroyRef);
|
|
472
|
+
this.multiple = false;
|
|
473
|
+
this.valueProp = '';
|
|
474
|
+
this.options = [];
|
|
475
|
+
this.placeholder = '';
|
|
476
|
+
this.emptyMessage = 'Nenhuma opção';
|
|
477
|
+
this.onChange = (_) => { };
|
|
478
|
+
this.onTouched = () => { };
|
|
479
|
+
this.selectionForm = formBuilder.group({});
|
|
480
|
+
}
|
|
481
|
+
ngAfterViewInit() {
|
|
482
|
+
this.handleInputChange();
|
|
483
|
+
this.handleSelectionChange();
|
|
484
|
+
}
|
|
485
|
+
handleInputChange() {
|
|
486
|
+
this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), startWith(''), tap(() => {
|
|
487
|
+
this.selectedOption = null;
|
|
488
|
+
}), map(value => this.filterFn ? this.filterFn(value || '') : [])).subscribe(items => {
|
|
489
|
+
this.filteredOptions = items;
|
|
490
|
+
});
|
|
491
|
+
}
|
|
492
|
+
handleSelectionChange() {
|
|
493
|
+
this.selectionForm
|
|
494
|
+
.valueChanges
|
|
495
|
+
.pipe(takeUntilDestroyed(this._destroy), debounceTime(100))
|
|
496
|
+
.subscribe((values) => {
|
|
497
|
+
this.checkAllValue = Object.keys(values).every(value => values[value]);
|
|
498
|
+
this.onChange(this.options.filter(option => values[option[this.valueProp]]));
|
|
499
|
+
this.onTouched();
|
|
500
|
+
});
|
|
501
|
+
}
|
|
502
|
+
ngOnChanges(changes) {
|
|
503
|
+
if (this.options?.length && this.valueProp) {
|
|
504
|
+
this.options.forEach(item => {
|
|
505
|
+
this.selectionForm.addControl(item[this.valueProp], this.formBuilder.control(false));
|
|
506
|
+
});
|
|
401
507
|
}
|
|
402
|
-
return this.date.to;
|
|
403
508
|
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
509
|
+
handleOptionSelected(item) {
|
|
510
|
+
this.selectedOption = item;
|
|
511
|
+
this.onChange(this.selectedOption);
|
|
512
|
+
this.hideOptions();
|
|
513
|
+
}
|
|
514
|
+
handleAutocompleteClick() {
|
|
515
|
+
this.closed
|
|
516
|
+
? this.showOptions()
|
|
517
|
+
: this.hideOptions();
|
|
518
|
+
}
|
|
519
|
+
showOptions() {
|
|
520
|
+
this.closed = false;
|
|
521
|
+
if (!this._overlayRef && this.wrapper) {
|
|
522
|
+
this._overlayRef = this.getOverlayConfig(this.wrapper);
|
|
523
|
+
this._portal = new TemplatePortal(this.overlayContent, this.viewContainerRef);
|
|
524
|
+
}
|
|
525
|
+
this._overlayRef?.attach(this._portal);
|
|
526
|
+
}
|
|
527
|
+
getOverlayConfig(wrapper) {
|
|
528
|
+
return this.overlay.create({
|
|
529
|
+
hasBackdrop: false,
|
|
530
|
+
width: wrapper.nativeElement.offsetWidth,
|
|
531
|
+
positionStrategy: this.overlay.position()
|
|
532
|
+
.flexibleConnectedTo(wrapper.nativeElement)
|
|
533
|
+
.withPositions([{
|
|
534
|
+
originX: "start",
|
|
535
|
+
originY: "bottom",
|
|
536
|
+
overlayX: "start",
|
|
537
|
+
overlayY: "top"
|
|
538
|
+
}])
|
|
539
|
+
});
|
|
408
540
|
}
|
|
409
|
-
|
|
410
|
-
|
|
541
|
+
hideOptions() {
|
|
542
|
+
this.chipsCollapsed = true;
|
|
543
|
+
this._overlayRef?.detach();
|
|
544
|
+
this.closed = true;
|
|
411
545
|
}
|
|
412
|
-
|
|
413
|
-
this.
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
if (!this.isCustomRange) {
|
|
418
|
-
this.writeValue();
|
|
546
|
+
handleClick(event) {
|
|
547
|
+
if (!this.closed
|
|
548
|
+
&& !this.input?.nativeElement.contains(event.target)
|
|
549
|
+
&& !this.list?.nativeElement.contains(event.target)) {
|
|
550
|
+
this.hideOptions();
|
|
419
551
|
}
|
|
420
552
|
}
|
|
421
|
-
|
|
422
|
-
this.
|
|
423
|
-
|
|
424
|
-
|
|
553
|
+
get selectedOptions() {
|
|
554
|
+
if (!this.multiple)
|
|
555
|
+
return this.selectedOption ? [this.selectedOption] : [];
|
|
556
|
+
const selected = this.options
|
|
557
|
+
.filter(item => this.selectionForm.value[item[this.valueProp]]);
|
|
558
|
+
return this.chipsCollapsed
|
|
559
|
+
? selected.slice(0, 1)
|
|
560
|
+
: selected;
|
|
561
|
+
}
|
|
562
|
+
handleSelectAll(event) {
|
|
563
|
+
const checked = event.target.checked;
|
|
564
|
+
const newValues = Object.keys(this.selectionForm.controls)
|
|
565
|
+
.reduce((acc, curr) => {
|
|
566
|
+
acc[curr] = checked;
|
|
567
|
+
return acc;
|
|
568
|
+
}, {});
|
|
569
|
+
this.selectionForm.patchValue(newValues);
|
|
570
|
+
}
|
|
571
|
+
handleChipAction(option) {
|
|
572
|
+
this.selectionForm.get(option[this.valueProp])?.setValue(false);
|
|
573
|
+
}
|
|
574
|
+
display(option) {
|
|
575
|
+
return this.displayFn && this.displayFn(option);
|
|
576
|
+
}
|
|
577
|
+
// Control Value Accessor
|
|
578
|
+
writeValue(obj) {
|
|
579
|
+
if (this.multiple) {
|
|
580
|
+
const newValue = obj.reduce((acc, curr) => {
|
|
581
|
+
acc[curr[this.valueProp]] = true;
|
|
582
|
+
return acc;
|
|
583
|
+
}, {});
|
|
584
|
+
this.selectionForm.patchValue(newValue);
|
|
585
|
+
}
|
|
586
|
+
else {
|
|
587
|
+
this.selectedOption = obj;
|
|
425
588
|
}
|
|
426
589
|
}
|
|
427
|
-
|
|
428
|
-
this.
|
|
590
|
+
registerOnChange(fn) {
|
|
591
|
+
this.onChange = fn;
|
|
429
592
|
}
|
|
430
|
-
|
|
431
|
-
this.
|
|
593
|
+
registerOnTouched(fn) {
|
|
594
|
+
this.onTouched = fn;
|
|
432
595
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
],
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
],
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
596
|
+
setDisabledState(isDisabled) {
|
|
597
|
+
this.disabled = isDisabled;
|
|
598
|
+
}
|
|
599
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
600
|
+
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" }, 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>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n [formControl]=\"inputControl\"\n [placeholder]=\"placeholder\"/>\n <ng-template #selectionOrPlaceholder>\n <ng-container *ngIf=\"selectedOptions.length && closed\">\n <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\">\n <ask-chips [style.max-width]=\"chipsCollapsed ? '75%' : '100%'\"\n *ngFor=\"let option of selectedOptions\"\n (action)=\"handleChipAction(option)\">\n {{display(option)}}\n </ask-chips>\n <span class=\"expand\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n </span>\n </div>\n </ng-container>\n <span *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n [class.-disabled]=\"disabled\"\n (click)=\"!disabled && handleAutocompleteClick()\">{{closed ? \"expand_more\" : \"expand_less\"}}</span>\n </div>\n</div>\n\n<ng-template #overlayContent>\n <div #list class=\"menu-container\">\n <ng-container *ngIf=\"!multiple; else multipleSelection\">\n <div class=\"list\">\n <div class=\"option-item\"\n *ngFor=\"let option of filteredOptions\"\n [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n (click)=\"handleOptionSelected(option)\">\n <p class=\"text\">{{display(option)}}</p>\n </div>\n </div>\n </ng-container>\n <ng-template #multipleSelection>\n <div class=\"option-item\" *ngIf=\"filteredOptions.length\">\n <ask-checkbox (change)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n </div>\n <form class=\"list\" *ngIf=\"selectionForm.controls\"\n [formGroup]=\"selectionForm\">\n <div class=\"option-item\" *ngFor=\"let option of filteredOptions\">\n <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n </div>\n </form>\n </ng-template>\n <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage}}</span>\n </div>\n</ng-template>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.option-item>.text,.option-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:end;justify-content:space-between}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.chip-list{overflow:hidden;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem}.chip-list.-collapsed{height:26px}.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:12px}.chip-list>.expand:hover{cursor:pointer}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.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%}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:16px;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsComponent, selector: "ask-chips", inputs: ["color"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }] }); }
|
|
601
|
+
}
|
|
602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
603
|
+
type: Component,
|
|
604
|
+
args: [{ selector: 'ask-autocomplete', providers: [valueAccessor], template: "<div class=\"autocomplete-wrapper\"\n [class.-closed]=\"closed\"\n [class.-opened]=\"!closed\"\n #wrapper\n>\n <div class=\"autocomplete\" #autocomplete>\n <input class=\"search-field\"\n *ngIf=\"!closed; else selectionOrPlaceholder\"\n [formControl]=\"inputControl\"\n [placeholder]=\"placeholder\"/>\n <ng-template #selectionOrPlaceholder>\n <ng-container *ngIf=\"selectedOptions.length && closed\">\n <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\">\n <ask-chips [style.max-width]=\"chipsCollapsed ? '75%' : '100%'\"\n *ngFor=\"let option of selectedOptions\"\n (action)=\"handleChipAction(option)\">\n {{display(option)}}\n </ask-chips>\n <span class=\"expand\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n </span>\n </div>\n </ng-container>\n <span *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n </ng-template>\n <span class=\"btn-expand material-icons\"\n [class.-disabled]=\"disabled\"\n (click)=\"!disabled && handleAutocompleteClick()\">{{closed ? \"expand_more\" : \"expand_less\"}}</span>\n </div>\n</div>\n\n<ng-template #overlayContent>\n <div #list class=\"menu-container\">\n <ng-container *ngIf=\"!multiple; else multipleSelection\">\n <div class=\"list\">\n <div class=\"option-item\"\n *ngFor=\"let option of filteredOptions\"\n [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n (click)=\"handleOptionSelected(option)\">\n <p class=\"text\">{{display(option)}}</p>\n </div>\n </div>\n </ng-container>\n <ng-template #multipleSelection>\n <div class=\"option-item\" *ngIf=\"filteredOptions.length\">\n <ask-checkbox (change)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n </div>\n <form class=\"list\" *ngIf=\"selectionForm.controls\"\n [formGroup]=\"selectionForm\">\n <div class=\"option-item\" *ngFor=\"let option of filteredOptions\">\n <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n </div>\n </form>\n </ng-template>\n <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage}}</span>\n </div>\n</ng-template>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.option-item>.text,.option-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:end;justify-content:space-between}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.chip-list{overflow:hidden;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem}.chip-list.-collapsed{height:26px}.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:12px}.chip-list>.expand:hover{cursor:pointer}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.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%}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:16px;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}\n"] }]
|
|
605
|
+
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { input: [{
|
|
606
|
+
type: ViewChild,
|
|
607
|
+
args: ["autocomplete"]
|
|
608
|
+
}], list: [{
|
|
609
|
+
type: ViewChild,
|
|
610
|
+
args: ["list"]
|
|
611
|
+
}], wrapper: [{
|
|
612
|
+
type: ViewChild,
|
|
613
|
+
args: ["wrapper"]
|
|
614
|
+
}], overlayContent: [{
|
|
615
|
+
type: ViewChild,
|
|
616
|
+
args: ['overlayContent']
|
|
617
|
+
}], filterFn: [{
|
|
618
|
+
type: Input
|
|
619
|
+
}], displayFn: [{
|
|
620
|
+
type: Input
|
|
621
|
+
}], multiple: [{
|
|
622
|
+
type: Input
|
|
623
|
+
}], valueProp: [{
|
|
624
|
+
type: Input
|
|
625
|
+
}], options: [{
|
|
626
|
+
type: Input
|
|
627
|
+
}], placeholder: [{
|
|
628
|
+
type: Input
|
|
629
|
+
}], emptyMessage: [{
|
|
630
|
+
type: Input
|
|
631
|
+
}], handleClick: [{
|
|
632
|
+
type: HostListener,
|
|
633
|
+
args: ["window:mousedown", ['$event']]
|
|
634
|
+
}] } });
|
|
453
635
|
|
|
636
|
+
const asDate = (inMoment) => {
|
|
637
|
+
return inMoment.utc(true).toDate();
|
|
638
|
+
};
|
|
454
639
|
class DatePickerCalendarComponent {
|
|
455
640
|
constructor() {
|
|
456
641
|
this.isRange = false;
|
|
@@ -649,11 +834,11 @@ class DatePickerCalendarComponent {
|
|
|
649
834
|
this.dateChange.emit(asDate(momentDate));
|
|
650
835
|
}
|
|
651
836
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
652
|
-
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}.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}.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"] }] }); }
|
|
837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.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"] }] }); }
|
|
653
838
|
}
|
|
654
839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, decorators: [{
|
|
655
840
|
type: Component,
|
|
656
|
-
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}.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}.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"] }]
|
|
841
|
+
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}.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}.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"] }]
|
|
657
842
|
}], propDecorators: { isRange: [{
|
|
658
843
|
type: Input
|
|
659
844
|
}], date: [{
|
|
@@ -662,6 +847,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
662
847
|
type: Output
|
|
663
848
|
}] } });
|
|
664
849
|
|
|
850
|
+
class DatePickerComponent {
|
|
851
|
+
constructor() {
|
|
852
|
+
this.periods = [
|
|
853
|
+
{ label: 'Hoje', getRange: () => ({ from: asDate(moment().startOf('day')), to: asDate(moment().endOf('day')) }), selected: false },
|
|
854
|
+
{ label: 'Ontem', getRange: () => ({ from: asDate(moment().subtract(1, 'day').startOf('day')), to: asDate(moment().subtract(1, 'day').endOf('day')) }), selected: false },
|
|
855
|
+
{ label: 'Últimos 7 dias', getRange: () => ({ from: asDate(moment().subtract(1, 'week').startOf('day')), to: asDate(moment().endOf('day')) }), selected: false },
|
|
856
|
+
{ label: 'Últimos 30 dias', getRange: () => ({ from: asDate(moment().subtract(30, 'days').startOf('day')), to: asDate(moment().endOf('day')) }), selected: false },
|
|
857
|
+
{ label: 'Este mês', getRange: () => ({ from: asDate(moment().startOf('month')), to: asDate(moment().endOf('month')) }), selected: false },
|
|
858
|
+
{ label: 'Último trimestre', getRange: () => ({ from: asDate(moment().subtract(3, 'months').startOf('day')), to: asDate(moment().endOf('month')) }), selected: false },
|
|
859
|
+
{ label: 'Período customizado', getRange: () => ({}), isCustomRange: true, selected: false },
|
|
860
|
+
];
|
|
861
|
+
this.date = new Date();
|
|
862
|
+
this.isRange = false;
|
|
863
|
+
this.dateChange = new EventEmitter();
|
|
864
|
+
this.cancel = new EventEmitter();
|
|
865
|
+
this.isCustomRange = false;
|
|
866
|
+
}
|
|
867
|
+
get from() {
|
|
868
|
+
if (this.date instanceof Date) {
|
|
869
|
+
return;
|
|
870
|
+
}
|
|
871
|
+
return this.date.from;
|
|
872
|
+
}
|
|
873
|
+
get to() {
|
|
874
|
+
if (this.date instanceof Date) {
|
|
875
|
+
return;
|
|
876
|
+
}
|
|
877
|
+
return this.date.to;
|
|
878
|
+
}
|
|
879
|
+
get dateDisplay() {
|
|
880
|
+
const from = this.from ? moment(this.from).utc(false).format('L') : '';
|
|
881
|
+
const to = this.to ? moment(this.to).utc(false).format('L') : '';
|
|
882
|
+
return `${from} ${to ? '- ' + to : ''}`;
|
|
883
|
+
}
|
|
884
|
+
ngOnInit() {
|
|
885
|
+
moment.locale((navigator.language || 'en-US').split('-')[0]); // TODO: put this on i18n service initialization
|
|
886
|
+
}
|
|
887
|
+
selectPeriod(period) {
|
|
888
|
+
this.periods.forEach(period => period.selected = false);
|
|
889
|
+
this.date = period.getRange();
|
|
890
|
+
this.isCustomRange = period.isCustomRange || false;
|
|
891
|
+
period.selected = true;
|
|
892
|
+
if (!this.isCustomRange) {
|
|
893
|
+
this.writeValue();
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
handleDateChange(value) {
|
|
897
|
+
this.date = value;
|
|
898
|
+
if (!this.isRange) {
|
|
899
|
+
this.writeValue();
|
|
900
|
+
}
|
|
901
|
+
}
|
|
902
|
+
writeValue() {
|
|
903
|
+
this.dateChange.emit(this.date);
|
|
904
|
+
}
|
|
905
|
+
handleCancelClick() {
|
|
906
|
+
this.cancel.emit();
|
|
907
|
+
}
|
|
908
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
909
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange" }, outputs: { dateChange: "dateChange", cancel: "cancel" }, ngImport: i0, template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of periods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n Cancelar\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"writeValue()\"\n >\n Aplicar\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "disabled"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }] }); }
|
|
910
|
+
}
|
|
911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
912
|
+
type: Component,
|
|
913
|
+
args: [{ selector: 'ask-date-picker', template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of periods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n Cancelar\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"writeValue()\"\n >\n Aplicar\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"] }]
|
|
914
|
+
}], propDecorators: { date: [{
|
|
915
|
+
type: Input
|
|
916
|
+
}], isRange: [{
|
|
917
|
+
type: Input
|
|
918
|
+
}], dateChange: [{
|
|
919
|
+
type: Output
|
|
920
|
+
}], cancel: [{
|
|
921
|
+
type: Output
|
|
922
|
+
}] } });
|
|
923
|
+
|
|
665
924
|
class AsksuiteCitrusModule {
|
|
666
925
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
667
926
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, declarations: [ButtonComponent,
|
|
@@ -671,19 +930,31 @@ class AsksuiteCitrusModule {
|
|
|
671
930
|
AvatarComponent,
|
|
672
931
|
DropdownContainerComponent,
|
|
673
932
|
AskDropdownDirective,
|
|
933
|
+
AutocompleteComponent,
|
|
934
|
+
ChipsComponent,
|
|
935
|
+
CheckboxComponent,
|
|
674
936
|
DatePickerComponent,
|
|
675
937
|
DatePickerCalendarComponent], imports: [CommonModule,
|
|
676
|
-
FormsModule
|
|
938
|
+
FormsModule,
|
|
939
|
+
ReactiveFormsModule,
|
|
940
|
+
CdkOverlayOrigin,
|
|
941
|
+
CdkConnectedOverlay,
|
|
942
|
+
OverlayModule], exports: [ButtonComponent,
|
|
677
943
|
InputComponent,
|
|
678
944
|
SelectComponent,
|
|
679
945
|
BoxComponent,
|
|
680
946
|
AvatarComponent,
|
|
681
947
|
DropdownContainerComponent,
|
|
682
948
|
AskDropdownDirective,
|
|
949
|
+
AutocompleteComponent,
|
|
950
|
+
ChipsComponent,
|
|
951
|
+
CheckboxComponent,
|
|
683
952
|
DatePickerComponent,
|
|
684
953
|
DatePickerCalendarComponent] }); }
|
|
685
954
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, imports: [CommonModule,
|
|
686
|
-
FormsModule
|
|
955
|
+
FormsModule,
|
|
956
|
+
ReactiveFormsModule,
|
|
957
|
+
OverlayModule] }); }
|
|
687
958
|
}
|
|
688
959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, decorators: [{
|
|
689
960
|
type: NgModule,
|
|
@@ -696,12 +967,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
696
967
|
AvatarComponent,
|
|
697
968
|
DropdownContainerComponent,
|
|
698
969
|
AskDropdownDirective,
|
|
970
|
+
AutocompleteComponent,
|
|
971
|
+
ChipsComponent,
|
|
972
|
+
CheckboxComponent,
|
|
699
973
|
DatePickerComponent,
|
|
700
974
|
DatePickerCalendarComponent,
|
|
701
975
|
],
|
|
702
976
|
imports: [
|
|
703
977
|
CommonModule,
|
|
704
|
-
FormsModule
|
|
978
|
+
FormsModule,
|
|
979
|
+
ReactiveFormsModule,
|
|
980
|
+
CdkOverlayOrigin,
|
|
981
|
+
CdkConnectedOverlay,
|
|
982
|
+
OverlayModule
|
|
705
983
|
],
|
|
706
984
|
exports: [
|
|
707
985
|
ButtonComponent,
|
|
@@ -711,6 +989,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
711
989
|
AvatarComponent,
|
|
712
990
|
DropdownContainerComponent,
|
|
713
991
|
AskDropdownDirective,
|
|
992
|
+
AutocompleteComponent,
|
|
993
|
+
ChipsComponent,
|
|
994
|
+
CheckboxComponent,
|
|
714
995
|
DatePickerComponent,
|
|
715
996
|
DatePickerCalendarComponent
|
|
716
997
|
]
|
|
@@ -725,5 +1006,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
725
1006
|
* Generated bundle index. Do not edit.
|
|
726
1007
|
*/
|
|
727
1008
|
|
|
728
|
-
export { AskDropdownDirective, AsksuiteCitrusModule, AvatarComponent, AvatarStatus, BoxComponent, ButtonComponent, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, SelectComponent, asDate };
|
|
1009
|
+
export { AskDropdownDirective, AsksuiteCitrusModule, AutocompleteComponent, AvatarComponent, AvatarStatus, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, SelectComponent, asDate };
|
|
729
1010
|
//# sourceMappingURL=asksuite-citrus.mjs.map
|