asksuite-citrus 0.5.3 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/citrus-i18n/en.json +3 -0
- package/assets/citrus-i18n/es.json +3 -0
- package/assets/citrus-i18n/pt.json +3 -0
- package/esm2022/lib/asksuite-citrus.module.mjs +11 -10
- package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +133 -48
- 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 +5 -5
- package/esm2022/lib/components/chips/chips.component.mjs +2 -2
- package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs +2 -2
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +2 -2
- package/esm2022/lib/components/dropdown-container/dropdown-container.component.mjs +2 -2
- package/esm2022/lib/components/input/input.component.mjs +2 -2
- package/esm2022/lib/components/select/select.component.mjs +2 -2
- package/esm2022/lib/directives/badge/badge.directive.mjs +82 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/asksuite-citrus.mjs +245 -82
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/asksuite-citrus.module.d.ts +5 -5
- package/lib/components/autocomplete/autocomplete.component.d.ts +22 -3
- package/lib/directives/badge/badge.directive.d.ts +20 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/styles/animations.scss +83 -0
- package/styles/styles.scss +64 -0
- package/styles/tokens.scss +1 -0
|
@@ -12,11 +12,11 @@ export class BoxComponent {
|
|
|
12
12
|
this.collapse = !this.collapse;
|
|
13
13
|
}
|
|
14
14
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: BoxComponent, selector: "ask-box", inputs: { title: "title", subtitle: "subtitle", canCollapse: "canCollapse", collapse: "collapse" }, ngImport: i0, template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: BoxComponent, selector: "ask-box", inputs: { title: "title", subtitle: "subtitle", canCollapse: "canCollapse", collapse: "collapse" }, ngImport: i0, template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
16
16
|
}
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: BoxComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
|
-
args: [{ selector: 'ask-box', template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"] }]
|
|
19
|
+
args: [{ selector: 'ask-box', template: "<div class=\"box-container\">\n <header *ngIf=\"canCollapse || title || subtitle\">\n <h1 *ngIf=\"title\" class=\"title\">{{ title }}</h1>\n <h2 *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</h2>\n\n <span\n *ngIf=\"canCollapse\"\n class=\"collapse-icon material-icons\"\n [class.collapsed]=\"!collapse\"\n (click)=\"toggleCollapse()\"\n >\n expand_more\n </span>\n </header>\n\n <div *ngIf=\"!collapse\" class=\"content\" [style.padding-top]=\"canCollapse ? '32px' : '0'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.box-container{background:var(--secondary-background);box-shadow:0 0 10px #2a304229;border-radius:8px;padding:16px}header{position:relative;display:flex;flex-direction:column;gap:8px;min-height:20px}header .title{font-size:16px;line-height:24px;font-weight:500;color:#616e7c;margin:0}header .subtitle{font-size:14px;line-height:20px;color:#616e7c;margin:0}header .collapse-icon{position:absolute;color:#7b8794;transition:transform .2s;right:0;top:0;cursor:pointer;-webkit-user-select:none;user-select:none}header .collapse-icon.collapsed{transform:rotate(180deg)}\n"] }]
|
|
20
20
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
21
21
|
type: Input
|
|
22
22
|
}], subtitle: [{
|
|
@@ -23,11 +23,11 @@ export class ButtonComponent {
|
|
|
23
23
|
this.labelClass = `-${this.labelSide}`;
|
|
24
24
|
}
|
|
25
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ButtonComponent, selector: "ask-button", inputs: { label: "label", size: "size", type: "type", rounded: "rounded", disabled: "disabled", labelSide: "labelSide", loading: "loading" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ButtonComponent, selector: "ask-button", inputs: { label: "label", size: "size", type: "type", rounded: "rounded", disabled: "disabled", labelSide: "labelSide", loading: "loading" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
|
-
args: [{ selector: 'ask-button', template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"] }]
|
|
30
|
+
args: [{ selector: 'ask-button', template: "<button\n type=\"button\"\n data-testid=\"button\"\n [ngClass]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <span data-testid=\"spinner\" *ngIf=\"loading\" class=\"spinner\"></span>\n <span data-testid=\"label\" *ngIf=\"label\" class=\"label\" [ngClass]=\"labelClass\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}button{position:relative;display:flex;align-items:center;padding:8px 24px;background:#FF5724;color:#fff;border-radius:6px;border:none;outline:none;line-height:2.286em;cursor:pointer;gap:8px;transition:background-color .1s,box-shadow .1s;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button>.spinner{position:absolute;left:7px;border-radius:9999px;border:2px solid #FFF;border-top-color:transparent;width:12px;height:12px;animation:.8s linear infinite;animation-name:spin}button.small{font-size:.75rem}button.xsmall{font-size:.75rem;line-height:.75rem;padding:8px 16px}button.xsmall>.spinner{left:5px;width:10px;height:10px}button.normal{font-size:.875rem}button.medium{font-size:1rem}button.large{font-size:1.125rem}button.rounded{border-radius:99999px}button>.label{order:1}button>.label.-left{order:0}button:hover:not(:disabled){box-shadow:0 0 6px #ff572466}button:active:not(:disabled){background-color:#f34915}button:disabled{cursor:not-allowed;background-color:#9aa5b1}button.-secondary{background:none;color:#616e7c;box-shadow:0 1px 2px #2a304229}button.-secondary .spinner{border:2px solid #616E7C;border-top-color:transparent}button.-secondary:hover:not(:disabled){box-shadow:0 0 6px #2a304229}button.-secondary:active:not(:disabled){background-color:#e4e7eb}button.-secondary:disabled{cursor:not-allowed;background-color:#9aa5b1;color:#fff}button.-secondary:disabled>.spinner{border:2px solid #FFF;border-top-color:transparent}button.-outline{background:none;color:#ff5724}button.-outline>.spinner{border:2px solid #FF5724;border-top-color:transparent}button.-outline:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:6px;box-shadow:0 0 0 2px inset #ff5724}button.-outline:active:not(:disabled){background-color:#ff572419}button.-outline:disabled{color:#9aa5b1}button.-outline:disabled .spinner{border:2px solid #9AA5B1;border-top-color:transparent}button.-outline:disabled:after{box-shadow:0 0 0 2px inset #9aa5b1}button.-livechat{background-color:#f5f7fa;color:#616e7c;padding:6px 8px;box-shadow:none;font-size:.875rem;line-height:.875rem}button.-livechat>.spinner{border:2px solid #616E7C;border-top-color:transparent}button.-livechat:hover{background-color:#e4e7eb;box-shadow:none}button.-livechat:active{background-color:#cbd2d9}button.-dropdown{background:none;color:#7b8794;box-shadow:none;border-radius:0;font-size:.875rem;line-height:1.25rem}button.-dropdown>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-dropdown:hover{background-color:#f5f7fa;box-shadow:none}button.-dropdown:active{background-color:#e4e7eb}button.-dropdown:disabled{color:#cbd2d9}button.-dropdown:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}button.-icon-only{background:none;color:#7b8794;box-shadow:none;border-radius:0;padding:0;font-size:.875rem;line-height:1.25rem}button.-icon-only>.spinner{border:2px solid #7B8794;border-top-color:transparent}button.-icon-only:hover{background-color:#f5f7fa;box-shadow:none}button.-icon-only:active{background-color:#e4e7eb}button.-icon-only:disabled{color:#cbd2d9}button.-icon-only:disabled>.spinner{border:2px solid #CBD2D9;border-top-color:transparent}\n"] }]
|
|
31
31
|
}], propDecorators: { label: [{
|
|
32
32
|
type: Input
|
|
33
33
|
}], size: [{
|
|
@@ -22,8 +22,9 @@ export class CheckboxComponent {
|
|
|
22
22
|
this.focus.emit(event);
|
|
23
23
|
}
|
|
24
24
|
onModelChange(newValue) {
|
|
25
|
-
this.
|
|
25
|
+
this.value = newValue;
|
|
26
26
|
this.onChange(newValue);
|
|
27
|
+
this.valueChange.emit(newValue);
|
|
27
28
|
}
|
|
28
29
|
handleChange(event) {
|
|
29
30
|
this.change.emit(event);
|
|
@@ -44,14 +45,13 @@ export class CheckboxComponent {
|
|
|
44
45
|
}
|
|
45
46
|
writeValue(value) {
|
|
46
47
|
this.value = value;
|
|
47
|
-
this.valueChange.emit(this.value);
|
|
48
48
|
}
|
|
49
49
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor], ngImport: i0, template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:
|
|
50
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor], ngImport: i0, template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
51
51
|
}
|
|
52
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
53
53
|
type: Component,
|
|
54
|
-
args: [{ selector: 'ask-checkbox', providers: [valueAccessor], template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:
|
|
54
|
+
args: [{ selector: 'ask-checkbox', providers: [valueAccessor], template: "<label class=\"ask-checkbox\">\n <input type=\"checkbox\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (change)=\"handleChange($event)\"\n (touchend)=\"onTouch()\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
55
55
|
}], propDecorators: { value: [{
|
|
56
56
|
type: Input
|
|
57
57
|
}], disabled: [{
|
|
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
65
65
|
}], focus: [{
|
|
66
66
|
type: Output
|
|
67
67
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXNrc3VpdGUtY2l0cnVzL3NyYy9saWIvY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFHTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixLQUFLLEVBQ0wsTUFBTSxFQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBdUIsaUJBQWlCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRXZFLE1BQU0sYUFBYSxHQUFhO0lBQzlCLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsS0FBSyxFQUFFLElBQUk7SUFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGlCQUFpQixDQUFDO0NBQ2pELENBQUE7QUFRRCxNQUFNLE9BQU8saUJBQWlCO0lBTjlCO1FBUVcsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUV6QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDMUMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDbkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFDdkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFakQsY0FBUyxHQUFHLEtBQUssQ0FBQztRQWdDbEIsWUFBTyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztLQVVwQjtJQXhDQyxXQUFXLENBQUMsS0FBaUI7UUFDM0IsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELGFBQWEsQ0FBQyxRQUFpQjtRQUM3QixJQUFJLENBQUMsS0FBSyxHQUFHLFFBQVEsQ0FBQztRQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBWTtRQUN2QixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQ7O0tBRUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxRQUFRLENBQUMsQ0FBTTtJQUNmLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFJRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQzs4R0FqRFUsaUJBQWlCO2tHQUFqQixpQkFBaUIsb0xBRmpCLENBQUMsYUFBYSxDQUFDLDBCQ3RCNUIsK2FBWUE7OzJGRFlhLGlCQUFpQjtrQkFON0IsU0FBUzsrQkFDRSxjQUFjLGFBR2IsQ0FBQyxhQUFhLENBQUM7OEJBR2pCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQUNHLEtBQUs7c0JBQWQsTUFBTTtnQkFDRyxLQUFLO3NCQUFkLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBmb3J3YXJkUmVmLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBQcm92aWRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcblxuY29uc3QgdmFsdWVBY2Nlc3NvcjogUHJvdmlkZXIgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICBtdWx0aTogdHJ1ZSxcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2hlY2tib3hDb21wb25lbnQpLFxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhc2stY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFt2YWx1ZUFjY2Vzc29yXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIHZhbHVlOiBib29sZWFuIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBjbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbiAgQE91dHB1dCgpIGZvY3VzID0gbmV3IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PigpO1xuXG4gIGlzRm9jdXNlZCA9IGZhbHNlO1xuXG4gIGhhbmRsZUZvY3VzKGV2ZW50OiBGb2N1c0V2ZW50KSB7XG4gICAgdGhpcy5pc0ZvY3VzZWQgPSB0cnVlO1xuICAgIHRoaXMuZm9jdXMuZW1pdChldmVudCk7XG4gIH1cblxuICBvbk1vZGVsQ2hhbmdlKG5ld1ZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy52YWx1ZSA9IG5ld1ZhbHVlO1xuICAgIHRoaXMub25DaGFuZ2UobmV3VmFsdWUpO1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdChuZXdWYWx1ZSk7XG4gIH1cblxuICBoYW5kbGVDaGFuZ2UoZXZlbnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdChldmVudCk7XG4gIH1cblxuICAvKlxuICogQ29udHJvbCB2YWx1ZSBhY2Nlc3NvciBtZXRob2RzXG4gKi9cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICBvbkNoYW5nZShfOiBhbnkpOiB2b2lkIHtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2ggPSBmbjtcbiAgfVxuXG4gIG9uVG91Y2ggPSAoKSA9PiB7fTtcblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gIH1cblxufVxuIiwiPGxhYmVsIGNsYXNzPVwiYXNrLWNoZWNrYm94XCI+XG4gIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgKGNsaWNrKT1cImNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAoZm9jdXMpPVwiaGFuZGxlRm9jdXMoJGV2ZW50KVwiXG4gICAgICAgICAoY2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICh0b3VjaGVuZCk9XCJvblRvdWNoKClcIlxuICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgIFtuZ01vZGVsXT1cInZhbHVlXCJcbiAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uTW9kZWxDaGFuZ2UoJGV2ZW50KVwiXG4gIC8+XG4gIDxzcGFuICN0ZXh0IFt0aXRsZV09XCJ0ZXh0LmlubmVyVGV4dFwiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L3NwYW4+XG48L2xhYmVsPlxuIl19
|
|
@@ -20,11 +20,11 @@ export class ChipsComponent {
|
|
|
20
20
|
this.action = new EventEmitter();
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChipsComponent, selector: "ask-chips", inputs: { appearance: "appearance", showAction: "showAction", size: "size" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary\n }\"\n>\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\" *ngIf=\"showAction\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"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}input{font-size:1rem}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding:0 8px;width:-moz-fit-content;width:fit-content;border-radius:50px;color:#fff}.chip-container>.body{color:inherit}.chip-container>.action{width:24px;height:24px;border-radius:50%;color:#fff}.chip-container>.action:hover{cursor:pointer}.chip-container.-small{font-size:.875rem;padding:5px 8px}.chip-container.-action{padding-right:0}.chip-container.-light{background:var(--grey-200);color:var(--font-color-200)}.chip-container.-primary{background:var(--asksuite-orange);color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChipsComponent, selector: "ask-chips", inputs: { appearance: "appearance", showAction: "showAction", size: "size" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary\n }\"\n>\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\" *ngIf=\"showAction\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"action.emit()\">cancel</span>\n </div>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.chip-container>.body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding:0 8px;width:-moz-fit-content;width:fit-content;border-radius:50px;color:#fff}.chip-container>.body{color:inherit}.chip-container>.action{width:24px;height:24px;border-radius:50%;color:#fff}.chip-container>.action:hover{cursor:pointer}.chip-container.-small{font-size:.875rem;padding:5px 8px}.chip-container.-action{padding-right:0}.chip-container.-light{background:var(--grey-200);color:var(--font-color-200)}.chip-container.-primary{background:var(--asksuite-orange);color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'ask-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary\n }\"\n>\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\" *ngIf=\"showAction\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"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}input{font-size:1rem}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding:0 8px;width:-moz-fit-content;width:fit-content;border-radius:50px;color:#fff}.chip-container>.body{color:inherit}.chip-container>.action{width:24px;height:24px;border-radius:50%;color:#fff}.chip-container>.action:hover{cursor:pointer}.chip-container.-small{font-size:.875rem;padding:5px 8px}.chip-container.-action{padding-right:0}.chip-container.-light{background:var(--grey-200);color:var(--font-color-200)}.chip-container.-primary{background:var(--asksuite-orange);color:#fff}\n"] }]
|
|
27
|
+
args: [{ selector: 'ask-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chip-container\"\n [ngClass]=\"{\n '-action': showAction,\n '-small': _isSmall,\n '-light': _isAppearanceLight,\n '-primary': _isAppearancePrimary\n }\"\n>\n <span class=\"body\" #body [title]=\"body.innerText\"><ng-content></ng-content></span>\n <div class=\"action\" *ngIf=\"showAction\">\n <span class=\"material-icons\" data-testid=\"icon\" (click)=\"action.emit()\">cancel</span>\n </div>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.chip-container>.body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.chip-container{max-width:100%;display:flex;flex-direction:row;gap:.5rem;background:#7B8794;align-items:center;padding:0 8px;width:-moz-fit-content;width:fit-content;border-radius:50px;color:#fff}.chip-container>.body{color:inherit}.chip-container>.action{width:24px;height:24px;border-radius:50%;color:#fff}.chip-container>.action:hover{cursor:pointer}.chip-container.-small{font-size:.875rem;padding:5px 8px}.chip-container.-action{padding-right:0}.chip-container.-light{background:var(--grey-200);color:var(--font-color-200)}.chip-container.-primary{background:var(--asksuite-orange);color:#fff}\n"] }]
|
|
28
28
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
29
29
|
type: Input
|
|
30
30
|
}], showAction: [{
|
package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs
CHANGED
|
@@ -218,11 +218,11 @@ export class DatePickerCalendarComponent {
|
|
|
218
218
|
this.dateChange.emit(momentDate.format(DEFAULT_DATE_FORMAT));
|
|
219
219
|
}
|
|
220
220
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
222
222
|
}
|
|
223
223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, decorators: [{
|
|
224
224
|
type: Component,
|
|
225
|
-
args: [{ selector: 'ask-date-picker-calendar', template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"] }]
|
|
225
|
+
args: [{ selector: 'ask-date-picker-calendar', template: "<div class=\"date-picker-calendar-container\">\n <header class=\"month-selector\">\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n <span class=\"material-icons icon\">chevron_left</span>\n </button>\n\n <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n <span class=\"material-icons icon\">chevron_right</span>\n </button>\n </header>\n\n <main class=\"calendar\">\n <div class=\"week-days-header\">\n <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n </div>\n\n <div class=\"days-block\" data-testid=\"days-block\">\n <span\n *ngFor=\"let day of days\"\n (click)=\"selectDate(day.timestamp)\"\n [ngClass]=\"{\n 'day': true,\n 'another-month': monthNumber != day.month,\n 'selected': isDaySelected(day),\n 'first': isFirstSelectedDay(day),\n 'last': isLastSelectedDay(day),\n }\"\n >\n {{ day.day }}\n </span>\n </div>\n </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"] }]
|
|
226
226
|
}], propDecorators: { isRange: [{
|
|
227
227
|
type: Input
|
|
228
228
|
}], date: [{
|
|
@@ -120,11 +120,11 @@ export class DatePickerComponent {
|
|
|
120
120
|
this.onTouch = fn;
|
|
121
121
|
}
|
|
122
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange", periodsFilter: "periodsFilter" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange", periodsFilter: "periodsFilter" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.date-picker-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: i2.ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
|
|
124
124
|
}
|
|
125
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
|
-
args: [{ selector: 'ask-date-picker', providers: [VALUE_ACCESSOR], template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"] }]
|
|
127
|
+
args: [{ selector: 'ask-date-picker', providers: [VALUE_ACCESSOR], template: "<div class=\"date-picker-container\">\n <main class=\"main-content\">\n <div\n class=\"periods-list\"\n *ngIf=\"isRange\"\n [ngClass]=\"{ 'show-divider': isCustomRange }\"\n >\n <button\n *ngFor=\"let period of filteredPeriods\"\n type=\"button\"\n class=\"period\"\n [ngClass]=\"{ 'selected': period.selected }\"\n (click)=\"selectPeriod(period)\"\n >\n {{ period.label.toString() | translate }}\n </button>\n </div>\n\n <ask-date-picker-calendar\n *ngIf=\"!isRange || (isRange && isCustomRange)\"\n [date]=\"date\"\n (dateChange)=\"handleDateChange($event)\"\n [isRange]=\"isRange\"\n ></ask-date-picker-calendar>\n </main>\n\n <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n <div class=\"date-display\">{{ dateDisplay }}</div>\n\n <div class=\"button-tray\">\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'secondary'\"\n (click)=\"handleCancelClick()\"\n >\n {{ 'CANCEL' | translate }}\n </ask-button>\n\n <ask-button\n [size]=\"'xsmall'\"\n [type]=\"'primary'\"\n (click)=\"emitValue()\"\n >\n {{ 'APPLY' | translate }}\n </ask-button>\n </div>\n </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.date-picker-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"] }]
|
|
128
128
|
}], propDecorators: { date: [{
|
|
129
129
|
type: Input
|
|
130
130
|
}], isRange: [{
|
|
@@ -6,11 +6,11 @@ export class DropdownContainerComponent {
|
|
|
6
6
|
ngOnInit() {
|
|
7
7
|
}
|
|
8
8
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
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}input{font-size:1rem}.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"] }] }); }
|
|
9
|
+
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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.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"] }] }); }
|
|
10
10
|
}
|
|
11
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DropdownContainerComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
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}input{font-size:1rem}.dropdown-container{display:flex;flex-direction:column;background:var(--primary-background);box-shadow:0 0 10px #2a304229;border-radius:4px}\n"] }]
|
|
13
|
+
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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.dropdown-container{display:flex;flex-direction:column;background:var(--primary-background);box-shadow:0 0 10px #2a304229;border-radius:4px}\n"] }]
|
|
14
14
|
}], ctorParameters: function () { return []; }, propDecorators: { content: [{
|
|
15
15
|
type: Input
|
|
16
16
|
}] } });
|
|
@@ -66,11 +66,11 @@ export class InputComponent {
|
|
|
66
66
|
this.valueChange.emit(this.value);
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
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", noBorder: "noBorder", iconColor: "iconColor" }, outputs: { valueChange: "valueChange", change: "change", input: "input", click: "click", focus: "focus", blur: "blur", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick" }, providers: [valueAccessor], 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 [style.color]=\"_iconColor\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [class.-no-border]=\"noBorder\"\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 [style.color]=\"_iconColor\"\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{font-size:1rem}.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.-no-border{border:0}.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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
69
|
+
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", noBorder: "noBorder", iconColor: "iconColor" }, outputs: { valueChange: "valueChange", change: "change", input: "input", click: "click", focus: "focus", blur: "blur", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick" }, providers: [valueAccessor], 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 [style.color]=\"_iconColor\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [class.-no-border]=\"noBorder\"\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 [style.color]=\"_iconColor\"\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.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.-no-border{border:0}.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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
|
-
args: [{ selector: 'ask-input', providers: [valueAccessor], 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 [style.color]=\"_iconColor\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [class.-no-border]=\"noBorder\"\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 [style.color]=\"_iconColor\"\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{font-size:1rem}.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.-no-border{border:0}.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"] }]
|
|
73
|
+
args: [{ selector: 'ask-input', providers: [valueAccessor], 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 [style.color]=\"_iconColor\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [class.-no-border]=\"noBorder\"\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 [style.color]=\"_iconColor\"\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.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.-no-border{border:0}.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"] }]
|
|
74
74
|
}], propDecorators: { value: [{
|
|
75
75
|
type: Input
|
|
76
76
|
}], type: [{
|
|
@@ -65,11 +65,11 @@ export class SelectComponent {
|
|
|
65
65
|
this.onTouch = fn;
|
|
66
66
|
}
|
|
67
67
|
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 }); }
|
|
68
|
-
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}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.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"] }] }); }
|
|
68
|
+
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}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.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"] }] }); }
|
|
69
69
|
}
|
|
70
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SelectComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
|
-
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}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.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"] }]
|
|
72
|
+
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}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.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"] }]
|
|
73
73
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
|
|
74
74
|
type: Input
|
|
75
75
|
}], valueChange: [{
|