asksuite-citrus 0.4.2 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/asksuite-citrus.module.mjs +11 -3
- package/esm2022/lib/components/button/button.component.mjs +8 -8
- package/esm2022/lib/components/input/input.component.mjs +19 -10
- package/esm2022/lib/directives/spinner/spinner.component.mjs +11 -0
- package/esm2022/lib/directives/spinner/spinner.directive.mjs +55 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/asksuite-citrus.mjs +94 -18
- package/fesm2022/asksuite-citrus.mjs.map +1 -1
- package/lib/asksuite-citrus.module.d.ts +9 -7
- package/lib/components/button/button.component.d.ts +4 -3
- package/lib/components/input/input.component.d.ts +9 -8
- package/lib/directives/spinner/spinner.component.d.ts +5 -0
- package/lib/directives/spinner/spinner.directive.d.ts +18 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -18,6 +18,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
|
18
18
|
import { TranslateModule } from '@ngx-translate/core';
|
|
19
19
|
import { SkeletonComponent } from './components/skeleton/skeleton.component';
|
|
20
20
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
21
|
+
import { SpinnerDirective } from './directives/spinner/spinner.directive';
|
|
22
|
+
import { SpinnerComponent } from './directives/spinner/spinner.component';
|
|
21
23
|
import * as i0 from "@angular/core";
|
|
22
24
|
import * as i1 from "@ngx-translate/core";
|
|
23
25
|
export class AsksuiteCitrusModule {
|
|
@@ -34,7 +36,9 @@ export class AsksuiteCitrusModule {
|
|
|
34
36
|
CheckboxComponent,
|
|
35
37
|
DatePickerComponent,
|
|
36
38
|
DatePickerCalendarComponent,
|
|
37
|
-
SkeletonComponent
|
|
39
|
+
SkeletonComponent,
|
|
40
|
+
SpinnerComponent,
|
|
41
|
+
SpinnerDirective], imports: [CommonModule,
|
|
38
42
|
FormsModule,
|
|
39
43
|
ReactiveFormsModule,
|
|
40
44
|
CdkOverlayOrigin,
|
|
@@ -52,7 +56,8 @@ export class AsksuiteCitrusModule {
|
|
|
52
56
|
CheckboxComponent,
|
|
53
57
|
DatePickerComponent,
|
|
54
58
|
DatePickerCalendarComponent,
|
|
55
|
-
SkeletonComponent
|
|
59
|
+
SkeletonComponent,
|
|
60
|
+
SpinnerDirective] }); }
|
|
56
61
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, imports: [CommonModule,
|
|
57
62
|
FormsModule,
|
|
58
63
|
ReactiveFormsModule,
|
|
@@ -78,6 +83,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
78
83
|
DatePickerComponent,
|
|
79
84
|
DatePickerCalendarComponent,
|
|
80
85
|
SkeletonComponent,
|
|
86
|
+
SpinnerComponent,
|
|
87
|
+
SpinnerDirective
|
|
81
88
|
],
|
|
82
89
|
imports: [
|
|
83
90
|
CommonModule,
|
|
@@ -104,7 +111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
104
111
|
DatePickerComponent,
|
|
105
112
|
DatePickerCalendarComponent,
|
|
106
113
|
SkeletonComponent,
|
|
114
|
+
SpinnerDirective
|
|
107
115
|
],
|
|
108
116
|
}]
|
|
109
117
|
}] });
|
|
110
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
118
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNrc3VpdGUtY2l0cnVzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2Fza3N1aXRlLWNpdHJ1cy9zcmMvbGliL2Fza3N1aXRlLWNpdHJ1cy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzlELE9BQU8sRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sOERBQThELENBQUM7QUFDMUcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDM0UsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sa0RBQWtELENBQUM7QUFDekYsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixnQkFBZ0IsRUFDaEIsYUFBYSxHQUNkLE1BQU0sc0JBQXNCLENBQUM7QUFDOUIsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQzdFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBQ3JGLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDhFQUE4RSxDQUFDO0FBQzNILE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDN0UsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDMUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7OztBQWdEMUUsTUFBTSxPQUFPLG9CQUFvQjs4R0FBcEIsb0JBQW9COytHQUFwQixvQkFBb0IsaUJBNUM3QixlQUFlO1lBQ2YsY0FBYztZQUNkLGVBQWU7WUFDZixZQUFZO1lBQ1osZUFBZTtZQUNmLDBCQUEwQjtZQUMxQixvQkFBb0I7WUFDcEIscUJBQXFCO1lBQ3JCLGNBQWM7WUFDZCxpQkFBaUI7WUFDakIsbUJBQW1CO1lBQ25CLDJCQUEyQjtZQUMzQixpQkFBaUI7WUFDakIsZ0JBQWdCO1lBQ2hCLGdCQUFnQixhQUdoQixZQUFZO1lBQ1osV0FBVztZQUNYLG1CQUFtQjtZQUNuQixnQkFBZ0I7WUFDaEIsbUJBQW1CO1lBQ25CLGFBQWE7WUFDYixlQUFlLHNCQUVmLHVCQUF1QixhQUd2QixlQUFlO1lBQ2YsY0FBYztZQUNkLGVBQWU7WUFDZixZQUFZO1lBQ1osZUFBZTtZQUNmLDBCQUEwQjtZQUMxQixvQkFBb0I7WUFDcEIscUJBQXFCO1lBQ3JCLGNBQWM7WUFDZCxpQkFBaUI7WUFDakIsbUJBQW1CO1lBQ25CLDJCQUEyQjtZQUMzQixpQkFBaUI7WUFDakIsZ0JBQWdCOytHQUdQLG9CQUFvQixZQTNCN0IsWUFBWTtZQUNaLFdBQVc7WUFDWCxtQkFBbUI7WUFHbkIsYUFBYTtZQUNiLGVBQWU7WUFDZixlQUFlLENBQUMsUUFBUSxFQUFFO1lBQzFCLHVCQUF1Qjs7MkZBbUJkLG9CQUFvQjtrQkE5Q2hDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLGVBQWU7d0JBQ2YsY0FBYzt3QkFDZCxlQUFlO3dCQUNmLFlBQVk7d0JBQ1osZUFBZTt3QkFDZiwwQkFBMEI7d0JBQzFCLG9CQUFvQjt3QkFDcEIscUJBQXFCO3dCQUNyQixjQUFjO3dCQUNkLGlCQUFpQjt3QkFDakIsbUJBQW1CO3dCQUNuQiwyQkFBMkI7d0JBQzNCLGlCQUFpQjt3QkFDakIsZ0JBQWdCO3dCQUNoQixnQkFBZ0I7cUJBQ2pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsbUJBQW1CO3dCQUNuQixnQkFBZ0I7d0JBQ2hCLG1CQUFtQjt3QkFDbkIsYUFBYTt3QkFDYixlQUFlO3dCQUNmLGVBQWUsQ0FBQyxRQUFRLEVBQUU7d0JBQzFCLHVCQUF1QjtxQkFDeEI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLGVBQWU7d0JBQ2YsY0FBYzt3QkFDZCxlQUFlO3dCQUNmLFlBQVk7d0JBQ1osZUFBZTt3QkFDZiwwQkFBMEI7d0JBQzFCLG9CQUFvQjt3QkFDcEIscUJBQXFCO3dCQUNyQixjQUFjO3dCQUNkLGlCQUFpQjt3QkFDakIsbUJBQW1CO3dCQUNuQiwyQkFBMkI7d0JBQzNCLGlCQUFpQjt3QkFDakIsZ0JBQWdCO3FCQUNqQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IElucHV0Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2lucHV0L2lucHV0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTZWxlY3RDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvc2VsZWN0L3NlbGVjdC5jb21wb25lbnQnO1xuaW1wb3J0IHsgQm94Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2JveC9ib3guY29tcG9uZW50JztcbmltcG9ydCB7IEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2F2YXRhci9hdmF0YXIuY29tcG9uZW50JztcbmltcG9ydCB7IERyb3Bkb3duQ29udGFpbmVyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2Ryb3Bkb3duLWNvbnRhaW5lci9kcm9wZG93bi1jb250YWluZXIuY29tcG9uZW50JztcbmltcG9ydCB7IEFza0Ryb3Bkb3duRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL2Fzay1kcm9wZG93bi5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQXV0b2NvbXBsZXRlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2F1dG9jb21wbGV0ZS9hdXRvY29tcGxldGUuY29tcG9uZW50JztcbmltcG9ydCB7XG4gIENka0Nvbm5lY3RlZE92ZXJsYXksXG4gIENka092ZXJsYXlPcmlnaW4sXG4gIE92ZXJsYXlNb2R1bGUsXG59IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcbmltcG9ydCB7IENoaXBzQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoaXBzL2NoaXBzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDaGVja2JveENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGF0ZVBpY2tlckNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGF0ZVBpY2tlckNhbGVuZGFyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RhdGUtcGlja2VyL2RhdGUtcGlja2VyLWNhbGVuZGFyL2RhdGUtcGlja2VyLWNhbGVuZGFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTY3JvbGxpbmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvc2Nyb2xsaW5nJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgU2tlbGV0b25Db21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvc2tlbGV0b24vc2tlbGV0b24uY29tcG9uZW50JztcbmltcG9ydCB7IE5neFNrZWxldG9uTG9hZGVyTW9kdWxlIH0gZnJvbSAnbmd4LXNrZWxldG9uLWxvYWRlcic7XG5pbXBvcnQgeyBTcGlubmVyRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL3NwaW5uZXIvc3Bpbm5lci5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgU3Bpbm5lckNvbXBvbmVudCB9IGZyb20gJy4vZGlyZWN0aXZlcy9zcGlubmVyL3NwaW5uZXIuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQnV0dG9uQ29tcG9uZW50LFxuICAgIElucHV0Q29tcG9uZW50LFxuICAgIFNlbGVjdENvbXBvbmVudCxcbiAgICBCb3hDb21wb25lbnQsXG4gICAgQXZhdGFyQ29tcG9uZW50LFxuICAgIERyb3Bkb3duQ29udGFpbmVyQ29tcG9uZW50LFxuICAgIEFza0Ryb3Bkb3duRGlyZWN0aXZlLFxuICAgIEF1dG9jb21wbGV0ZUNvbXBvbmVudCxcbiAgICBDaGlwc0NvbXBvbmVudCxcbiAgICBDaGVja2JveENvbXBvbmVudCxcbiAgICBEYXRlUGlja2VyQ29tcG9uZW50LFxuICAgIERhdGVQaWNrZXJDYWxlbmRhckNvbXBvbmVudCxcbiAgICBTa2VsZXRvbkNvbXBvbmVudCxcbiAgICBTcGlubmVyQ29tcG9uZW50LFxuICAgIFNwaW5uZXJEaXJlY3RpdmVcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBGb3Jtc01vZHVsZSxcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxuICAgIENka092ZXJsYXlPcmlnaW4sXG4gICAgQ2RrQ29ubmVjdGVkT3ZlcmxheSxcbiAgICBPdmVybGF5TW9kdWxlLFxuICAgIFNjcm9sbGluZ01vZHVsZSxcbiAgICBUcmFuc2xhdGVNb2R1bGUuZm9yQ2hpbGQoKSxcbiAgICBOZ3hTa2VsZXRvbkxvYWRlck1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIEJ1dHRvbkNvbXBvbmVudCxcbiAgICBJbnB1dENvbXBvbmVudCxcbiAgICBTZWxlY3RDb21wb25lbnQsXG4gICAgQm94Q29tcG9uZW50LFxuICAgIEF2YXRhckNvbXBvbmVudCxcbiAgICBEcm9wZG93bkNvbnRhaW5lckNvbXBvbmVudCxcbiAgICBBc2tEcm9wZG93bkRpcmVjdGl2ZSxcbiAgICBBdXRvY29tcGxldGVDb21wb25lbnQsXG4gICAgQ2hpcHNDb21wb25lbnQsXG4gICAgQ2hlY2tib3hDb21wb25lbnQsXG4gICAgRGF0ZVBpY2tlckNvbXBvbmVudCxcbiAgICBEYXRlUGlja2VyQ2FsZW5kYXJDb21wb25lbnQsXG4gICAgU2tlbGV0b25Db21wb25lbnQsXG4gICAgU3Bpbm5lckRpcmVjdGl2ZVxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBBc2tzdWl0ZUNpdHJ1c01vZHVsZSB7fVxuIl19
|
|
@@ -15,19 +15,19 @@ export class ButtonComponent {
|
|
|
15
15
|
this.onClick = new EventEmitter();
|
|
16
16
|
this.onFocus = new EventEmitter();
|
|
17
17
|
this.onBlur = new EventEmitter();
|
|
18
|
+
this.buttonClasses = '';
|
|
19
|
+
this.labelClass = '';
|
|
18
20
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
get labelClass() {
|
|
23
|
-
return `-${this.labelSide}`;
|
|
21
|
+
ngOnChanges() {
|
|
22
|
+
this.buttonClasses = `-${this.type} ${this.size} ${this.rounded ? 'rounded' : ''}`;
|
|
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" }, 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
|
|
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"] }] }); }
|
|
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
|
|
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"] }]
|
|
31
31
|
}], propDecorators: { label: [{
|
|
32
32
|
type: Input
|
|
33
33
|
}], size: [{
|
|
@@ -49,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
49
49
|
}], onBlur: [{
|
|
50
50
|
type: Output
|
|
51
51
|
}] } });
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fza3N1aXRlLWNpdHJ1cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTy9FLE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBTUUsYUFBYTtRQUNKLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxTQUFJLEdBQXVELFFBQVEsQ0FBQztRQUNwRSxTQUFJLEdBQWdGLFNBQVMsQ0FBQztRQUM5RixZQUFPLEdBQVksS0FBSyxDQUFDO1FBQ3pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsY0FBUyxHQUFxQixNQUFNLENBQUM7UUFDckMsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUVsQyxpQkFBaUI7UUFDUCxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztRQUN6QyxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztRQUN6QyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztRQUVsRCxrQkFBYSxHQUFXLEVBQUUsQ0FBQztRQUMzQixlQUFVLEdBQVcsRUFBRSxDQUFDO0tBT3pCO0lBSkMsV0FBVztRQUNULElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUNuRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFBO0lBQ3hDLENBQUM7OEdBdEJVLGVBQWU7a0dBQWYsZUFBZSw0UkNQNUIsK2JBYUE7OzJGRE5hLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTs4QkFNYixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFHSSxPQUFPO3NCQUFoQixNQUFNO2dCQUNHLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhc2stYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xuICAvLyBQcm9wZXJ0aWVzXG4gIEBJbnB1dCgpIGxhYmVsID0gJyc7XG4gIEBJbnB1dCgpIHNpemU6ICd4c21hbGwnIHwgJ3NtYWxsJyB8ICdub3JtYWwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ25vcm1hbCc7XG4gIEBJbnB1dCgpIHR5cGU6ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknIHwgJ291dGxpbmUnIHwgJ2xpdmVjaGF0JyB8ICdkcm9wZG93bicgfCAnaWNvbi1vbmx5JyA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgcm91bmRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBsYWJlbFNpZGU6ICdsZWZ0JyB8ICdyaWdodCcgPSAnbGVmdCc7XG4gIEBJbnB1dCgpIGxvYWRpbmc6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvLyBFdmVudCBoYW5kbGVyc1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbiAgQE91dHB1dCgpIG9uRm9jdXMgPSBuZXcgRXZlbnRFbWl0dGVyPEZvY3VzRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBvbkJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPEZvY3VzRXZlbnQ+KCk7XG5cbiAgYnV0dG9uQ2xhc3Nlczogc3RyaW5nID0gJyc7XG4gIGxhYmVsQ2xhc3M6IHN0cmluZyA9ICcnO1xuXG5cbiAgbmdPbkNoYW5nZXMoKXtcbiAgICB0aGlzLmJ1dHRvbkNsYXNzZXMgPSBgLSR7dGhpcy50eXBlfSAke3RoaXMuc2l6ZX0gJHt0aGlzLnJvdW5kZWQgPyAncm91bmRlZCcgOiAnJ31gO1xuICAgIHRoaXMubGFiZWxDbGFzcyA9IGAtJHt0aGlzLmxhYmVsU2lkZX1gXG4gIH0gIFxufVxuIiwiPGJ1dHRvblxuICB0eXBlPVwiYnV0dG9uXCJcbiAgZGF0YS10ZXN0aWQ9XCJidXR0b25cIlxuICBbbmdDbGFzc109XCJidXR0b25DbGFzc2VzXCJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgKGNsaWNrKT1cIm9uQ2xpY2suZW1pdCgkZXZlbnQpXCJcbiAgKGZvY3VzKT1cIm9uRm9jdXMuZW1pdCgkZXZlbnQpXCJcbiAgKGJsdXIpPVwib25CbHVyLmVtaXQoJGV2ZW50KVwiXG4+XG4gIDxzcGFuIGRhdGEtdGVzdGlkPVwic3Bpbm5lclwiICpuZ0lmPVwibG9hZGluZ1wiIGNsYXNzPVwic3Bpbm5lclwiPjwvc3Bhbj5cbiAgPHNwYW4gZGF0YS10ZXN0aWQ9XCJsYWJlbFwiICpuZ0lmPVwibGFiZWxcIiBjbGFzcz1cImxhYmVsXCIgW25nQ2xhc3NdPVwibGFiZWxDbGFzc1wiPnt7IGxhYmVsIH19PC9zcGFuPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2J1dHRvbj5cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Component, EventEmitter, forwardRef, Input, Output, ViewChild } from '@angular/core';
|
|
2
|
-
import { NG_VALUE_ACCESSOR } from
|
|
1
|
+
import { Component, EventEmitter, forwardRef, Input, Output, ViewChild, } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
5
5
|
import * as i2 from "@angular/forms";
|
|
@@ -10,9 +10,11 @@ const valueAccessor = {
|
|
|
10
10
|
};
|
|
11
11
|
export class InputComponent {
|
|
12
12
|
constructor() {
|
|
13
|
+
this._iconColor = '';
|
|
13
14
|
this.value = '';
|
|
14
15
|
this.type = 'text';
|
|
15
16
|
this.disabled = false;
|
|
17
|
+
this.noBorder = false;
|
|
16
18
|
this.valueChange = new EventEmitter();
|
|
17
19
|
this.change = new EventEmitter();
|
|
18
20
|
this.input = new EventEmitter();
|
|
@@ -22,13 +24,16 @@ export class InputComponent {
|
|
|
22
24
|
this.leftIconClick = new EventEmitter();
|
|
23
25
|
this.rightIconClick = new EventEmitter();
|
|
24
26
|
this.isFocused = false;
|
|
25
|
-
this.onChange = () => { };
|
|
26
|
-
this.onTouch = () => { };
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
set iconColor(color) {
|
|
29
|
+
this._iconColor = `var(--${color})`;
|
|
29
30
|
}
|
|
30
31
|
onModelChange(newValue) {
|
|
31
|
-
this.
|
|
32
|
+
if (this.value !== newValue) {
|
|
33
|
+
this.writeValue(newValue);
|
|
34
|
+
this.onChange(newValue);
|
|
35
|
+
}
|
|
36
|
+
this.onTouch();
|
|
32
37
|
}
|
|
33
38
|
handleChange(event) {
|
|
34
39
|
this.change.emit(event);
|
|
@@ -61,12 +66,12 @@ export class InputComponent {
|
|
|
61
66
|
this.valueChange.emit(this.value);
|
|
62
67
|
}
|
|
63
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: InputComponent, selector: "ask-input", inputs: { value: "value", type: "type", placeholder: "placeholder", leftIcon: "leftIcon", rightIcon: "rightIcon", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", input: "input", click: "click", focus: "focus", blur: "blur", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick" }, providers: [valueAccessor], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"input-container\"\n [ngClass]=\"{ 'focus': isFocused, 'disabled': disabled, 'left-icon': leftIcon, 'right-icon': rightIcon }\"\n (click)=\"inputElement.focus()\"\n>\n <span\n *ngIf=\"leftIcon\"\n class=\"material-icons icon-left\"\n (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [type]=\"type\"\n [placeholder]=\"placeholder || ''\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (change)=\"handleChange($event)\"\n (input)=\"handleInput($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n\n <span\n *ngIf=\"rightIcon\"\n class=\"material-icons icon-right\"\n\n (click)=\"rightIconClick.emit($event)\"\n >\n {{ rightIcon }}\n </span>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{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::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}.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"] }] }); }
|
|
65
70
|
}
|
|
66
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
67
72
|
type: Component,
|
|
68
|
-
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 (click)=\"leftIconClick.emit($event)\"\n >\n {{ leftIcon }}\n </span>\n\n <input\n #inputElement\n class=\"ask-input\"\n [type]=\"type\"\n [placeholder]=\"placeholder || ''\"\n (click)=\"click.emit($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (change)=\"handleChange($event)\"\n (input)=\"handleInput($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n\n <span\n *ngIf=\"rightIcon\"\n class=\"material-icons icon-right\"\n\n (click)=\"rightIconClick.emit($event)\"\n >\n {{ rightIcon }}\n </span>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{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::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"] }]
|
|
69
|
-
}],
|
|
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"] }]
|
|
74
|
+
}], propDecorators: { value: [{
|
|
70
75
|
type: Input
|
|
71
76
|
}], type: [{
|
|
72
77
|
type: Input
|
|
@@ -78,6 +83,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
78
83
|
type: Input
|
|
79
84
|
}], disabled: [{
|
|
80
85
|
type: Input
|
|
86
|
+
}], noBorder: [{
|
|
87
|
+
type: Input
|
|
88
|
+
}], iconColor: [{
|
|
89
|
+
type: Input
|
|
81
90
|
}], valueChange: [{
|
|
82
91
|
type: Output
|
|
83
92
|
}], change: [{
|
|
@@ -98,4 +107,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
|
|
|
98
107
|
type: ViewChild,
|
|
99
108
|
args: ['inputElement', { static: true }]
|
|
100
109
|
}] } });
|
|
101
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
110
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXNrc3VpdGUtY2l0cnVzL3NyYy9saWIvY29tcG9uZW50cy9pbnB1dC9pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL2lucHV0L2lucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsWUFBWSxFQUNaLFVBQVUsRUFDVixLQUFLLEVBRUwsTUFBTSxFQUVOLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFFekUsTUFBTSxhQUFhLEdBQWE7SUFDOUIsT0FBTyxFQUFFLGlCQUFpQjtJQUMxQixLQUFLLEVBQUUsSUFBSTtJQUNYLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDO0NBQzlDLENBQUM7QUFRRixNQUFNLE9BQU8sY0FBYztJQU4zQjtRQU9FLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFFUCxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLFNBQUksR0FBa0MsTUFBTSxDQUFDO1FBSTdDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFDMUIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQU96QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDekMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDbkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDbEMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFDdkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFDdkMsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFDdEMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBQy9DLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztRQUsxRCxjQUFTLEdBQUcsS0FBSyxDQUFDO0tBbURuQjtJQW5FQyxJQUFhLFNBQVMsQ0FBQyxLQUFhO1FBQ2xDLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxLQUFLLEdBQUcsQ0FBQztJQUN0QyxDQUFDO0lBbUJELGFBQWEsQ0FBQyxRQUFnQjtRQUM1QixJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssUUFBUSxFQUFFO1lBQzNCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUN6QjtRQUNELElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVk7UUFDdkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFZO1FBQ3RCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBaUI7UUFDM0IsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFpQjtRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztRQUN2QixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRUQ7O09BRUc7SUFFSCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7OEdBOUVVLGNBQWM7a0dBQWQsY0FBYyx1WkFGZCxDQUFDLGFBQWEsQ0FBQyxzSkN2QjVCLDQvQkF1Q0E7OzJGRGRhLGNBQWM7a0JBTjFCLFNBQVM7K0JBQ0UsV0FBVyxhQUdWLENBQUMsYUFBYSxDQUFDOzhCQUtqQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFHTyxTQUFTO3NCQUFyQixLQUFLO2dCQUlJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQUNHLEtBQUs7c0JBQWQsTUFBTTtnQkFDRyxLQUFLO3NCQUFkLE1BQU07Z0JBQ0csS0FBSztzQkFBZCxNQUFNO2dCQUNHLElBQUk7c0JBQWIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLGNBQWM7c0JBQXZCLE1BQU07Z0JBT3NDLFlBQVk7c0JBQXhELFNBQVM7dUJBQUMsY0FBYyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBmb3J3YXJkUmVmLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFByb3ZpZGVyLFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5jb25zdCB2YWx1ZUFjY2Vzc29yOiBQcm92aWRlciA9IHtcbiAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gIG11bHRpOiB0cnVlLFxuICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBJbnB1dENvbXBvbmVudCksXG59O1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhc2staW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pbnB1dC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFt2YWx1ZUFjY2Vzc29yXSxcbn0pXG5leHBvcnQgY2xhc3MgSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIF9pY29uQ29sb3IgPSAnJztcblxuICBASW5wdXQoKSB2YWx1ZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHR5cGU6ICd0ZXh0JyB8ICdlbWFpbCcgfCAncGFzc3dvcmQnID0gJ3RleHQnO1xuICBASW5wdXQoKSBwbGFjZWhvbGRlciE6IHN0cmluZztcbiAgQElucHV0KCkgbGVmdEljb24/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHJpZ2h0SWNvbj86IHN0cmluZztcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgbm9Cb3JkZXI6IGJvb2xlYW4gPSBmYWxzZTtcblxuXG4gIEBJbnB1dCgpIHNldCBpY29uQ29sb3IoY29sb3I6IHN0cmluZykge1xuICAgIHRoaXMuX2ljb25Db2xvciA9IGB2YXIoLS0ke2NvbG9yfSlgO1xuICB9XG5cbiAgQE91dHB1dCgpIHZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgaW5wdXQgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgY2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBmb2N1cyA9IG5ldyBFdmVudEVtaXR0ZXI8Rm9jdXNFdmVudD4oKTtcbiAgQE91dHB1dCgpIGJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPEZvY3VzRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBsZWZ0SWNvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuICBAT3V0cHV0KCkgcmlnaHRJY29uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG5cbiAgb25DaGFuZ2UhOiAodmFsdWU/OiBhbnkpID0+IHZvaWQ7XG4gIG9uVG91Y2ghOiAoKSA9PiB2b2lkO1xuXG4gIGlzRm9jdXNlZCA9IGZhbHNlO1xuXG4gIEBWaWV3Q2hpbGQoJ2lucHV0RWxlbWVudCcsIHsgc3RhdGljOiB0cnVlIH0pIGlucHV0RWxlbWVudCE6IEVsZW1lbnRSZWY7XG5cblxuICBvbk1vZGVsQ2hhbmdlKG5ld1ZhbHVlOiBzdHJpbmcpIHtcbiAgICBpZiAodGhpcy52YWx1ZSAhPT0gbmV3VmFsdWUpIHtcbiAgICAgIHRoaXMud3JpdGVWYWx1ZShuZXdWYWx1ZSk7XG4gICAgICB0aGlzLm9uQ2hhbmdlKG5ld1ZhbHVlKTtcbiAgICB9XG4gICAgdGhpcy5vblRvdWNoKCk7XG4gIH1cblxuICBoYW5kbGVDaGFuZ2UoZXZlbnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdChldmVudCk7XG4gIH1cblxuICBoYW5kbGVJbnB1dChldmVudDogRXZlbnQpIHtcbiAgICB0aGlzLmlucHV0LmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgaGFuZGxlRm9jdXMoZXZlbnQ6IEZvY3VzRXZlbnQpIHtcbiAgICB0aGlzLmlzRm9jdXNlZCA9IHRydWU7XG4gICAgdGhpcy5mb2N1cy5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIGhhbmRsZUJsdXIoZXZlbnQ6IEZvY3VzRXZlbnQpIHtcbiAgICB0aGlzLmlzRm9jdXNlZCA9IGZhbHNlO1xuICAgIHRoaXMuYmx1ci5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIC8qXG4gICAqIENvbnRyb2wgdmFsdWUgYWNjZXNzb3IgbWV0aG9kc1xuICAgKi9cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJpbnB1dC1jb250YWluZXJcIlxuICBbbmdDbGFzc109XCJ7ICdmb2N1cyc6IGlzRm9jdXNlZCwgJ2Rpc2FibGVkJzogZGlzYWJsZWQsICdsZWZ0LWljb24nOiBsZWZ0SWNvbiwgJ3JpZ2h0LWljb24nOiByaWdodEljb24gfVwiXG4gIChjbGljayk9XCJpbnB1dEVsZW1lbnQuZm9jdXMoKVwiXG4+XG4gIDxzcGFuXG4gICAgKm5nSWY9XCJsZWZ0SWNvblwiXG4gICAgY2xhc3M9XCJtYXRlcmlhbC1pY29ucyBpY29uLWxlZnRcIlxuICAgIFtzdHlsZS5jb2xvcl09XCJfaWNvbkNvbG9yXCJcbiAgICAoY2xpY2spPVwibGVmdEljb25DbGljay5lbWl0KCRldmVudClcIlxuICA+XG4gICAge3sgbGVmdEljb24gfX1cbiAgPC9zcGFuPlxuXG4gIDxpbnB1dFxuICAgICNpbnB1dEVsZW1lbnRcbiAgICBjbGFzcz1cImFzay1pbnB1dFwiXG4gICAgW2NsYXNzLi1uby1ib3JkZXJdPVwibm9Cb3JkZXJcIlxuICAgIFt0eXBlXT1cInR5cGVcIlxuICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlciB8fCAnJ1wiXG4gICAgKGNsaWNrKT1cImNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgKGZvY3VzKT1cImhhbmRsZUZvY3VzKCRldmVudClcIlxuICAgIChibHVyKT1cImhhbmRsZUJsdXIoJGV2ZW50KVwiXG4gICAgKGNoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgKGlucHV0KT1cImhhbmRsZUlucHV0KCRldmVudClcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgW25nTW9kZWxdPVwidmFsdWVcIlxuICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uTW9kZWxDaGFuZ2UoJGV2ZW50KVwiXG4gIC8+XG5cbiAgPHNwYW5cbiAgICAqbmdJZj1cInJpZ2h0SWNvblwiXG4gICAgY2xhc3M9XCJtYXRlcmlhbC1pY29ucyBpY29uLXJpZ2h0XCJcbiAgICBbc3R5bGUuY29sb3JdPVwiX2ljb25Db2xvclwiXG4gICAgKGNsaWNrKT1cInJpZ2h0SWNvbkNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gID5cbiAgICB7eyByaWdodEljb24gfX1cbiAgPC9zcGFuPlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class SpinnerComponent {
|
|
4
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: SpinnerComponent, selector: "app-spinner", ngImport: i0, template: '<span class="spin-circle"></span>', isInline: true, styles: [":host{position:absolute;border-radius:inherit;inset:0;overflow:hidden;z-index:9999;display:flex;justify-content:center;align-items:center;visibility:visible;transition:background-color .1s,box-shadow .1s}:host:before{content:\"\";position:absolute;inset:0;background-color:var(--grey-200);opacity:.2;z-index:-1}:host .spin-circle{opacity:1;animation:spin .8s infinite linear;border-radius:50%;border-style:solid;border-width:.125em;border:2px solid black;border-top-color:transparent;width:1em;height:1em}@keyframes spin{0%{transform:rotate(0)}40%{transform:rotate(230deg)}to{transform:rotate(360deg)}}\n"] }); }
|
|
6
|
+
}
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
8
|
+
type: Component,
|
|
9
|
+
args: [{ selector: 'app-spinner', template: '<span class="spin-circle"></span>', styles: [":host{position:absolute;border-radius:inherit;inset:0;overflow:hidden;z-index:9999;display:flex;justify-content:center;align-items:center;visibility:visible;transition:background-color .1s,box-shadow .1s}:host:before{content:\"\";position:absolute;inset:0;background-color:var(--grey-200);opacity:.2;z-index:-1}:host .spin-circle{opacity:1;animation:spin .8s infinite linear;border-radius:50%;border-style:solid;border-width:.125em;border:2px solid black;border-top-color:transparent;width:1em;height:1em}@keyframes spin{0%{transform:rotate(0)}40%{transform:rotate(230deg)}to{transform:rotate(360deg)}}\n"] }]
|
|
10
|
+
}] });
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9kaXJlY3RpdmVzL3NwaW5uZXIvc3Bpbm5lci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFPMUMsTUFBTSxPQUFPLGdCQUFnQjs4R0FBaEIsZ0JBQWdCO2tHQUFoQixnQkFBZ0IsbURBSGpCLG1DQUFtQzs7MkZBR2xDLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDRSxhQUFhLFlBQ2IsbUNBQW1DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1zcGlubmVyJyxcbiAgdGVtcGxhdGU6ICc8c3BhbiBjbGFzcz1cInNwaW4tY2lyY2xlXCI+PC9zcGFuPicsXG4gIHN0eWxlVXJsczogWycuL3NwaW5uZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTcGlubmVyQ29tcG9uZW50IHtcblxufVxuIl19
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Directive, HostBinding, Input, } from '@angular/core';
|
|
2
|
+
import { SpinnerComponent } from './spinner.component';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class SpinnerDirective {
|
|
5
|
+
set nbSpinner(val) {
|
|
6
|
+
if (val) {
|
|
7
|
+
this.show();
|
|
8
|
+
}
|
|
9
|
+
else {
|
|
10
|
+
this.hide();
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
constructor(directiveView, renderer, directiveElement) {
|
|
14
|
+
this.directiveView = directiveView;
|
|
15
|
+
this.renderer = renderer;
|
|
16
|
+
this.directiveElement = directiveElement;
|
|
17
|
+
this.shouldShow = false;
|
|
18
|
+
this.isSpinnerExist = false;
|
|
19
|
+
}
|
|
20
|
+
ngOnInit() {
|
|
21
|
+
if (this.shouldShow) {
|
|
22
|
+
this.show();
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
hide() {
|
|
26
|
+
if (this.isSpinnerExist) {
|
|
27
|
+
this.directiveView.remove();
|
|
28
|
+
this.isSpinnerExist = false;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
show() {
|
|
32
|
+
if (!this.isSpinnerExist) {
|
|
33
|
+
this.spinner = this.directiveView.createComponent(SpinnerComponent);
|
|
34
|
+
this.spinner.changeDetectorRef.detectChanges();
|
|
35
|
+
this.renderer.setStyle(this.directiveElement.nativeElement, 'position', 'relative');
|
|
36
|
+
this.renderer.appendChild(this.directiveElement.nativeElement, this.spinner.location.nativeElement);
|
|
37
|
+
this.isSpinnerExist = true;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SpinnerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
41
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: SpinnerDirective, selector: "[askSpinner]", inputs: { nbSpinner: ["askSpinner", "nbSpinner"] }, host: { properties: { "class.nb-spinner-container": "this.isSpinnerExist" } }, ngImport: i0 }); }
|
|
42
|
+
}
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SpinnerDirective, decorators: [{
|
|
44
|
+
type: Directive,
|
|
45
|
+
args: [{
|
|
46
|
+
selector: '[askSpinner]',
|
|
47
|
+
}]
|
|
48
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { nbSpinner: [{
|
|
49
|
+
type: Input,
|
|
50
|
+
args: ['askSpinner']
|
|
51
|
+
}], isSpinnerExist: [{
|
|
52
|
+
type: HostBinding,
|
|
53
|
+
args: ['class.nb-spinner-container']
|
|
54
|
+
}] } });
|
|
55
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5lci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9kaXJlY3RpdmVzL3NwaW5uZXIvc3Bpbm5lci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFFVCxXQUFXLEVBQ1gsS0FBSyxHQUdOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDOztBQUt2RCxNQUFNLE9BQU8sZ0JBQWdCO0lBSTNCLElBQ0ksU0FBUyxDQUFDLEdBQVk7UUFDeEIsSUFBSSxHQUFHLEVBQUU7WUFDUCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjthQUFNO1lBQ0wsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2I7SUFDSCxDQUFDO0lBSUQsWUFDVSxhQUErQixFQUMvQixRQUFtQixFQUNuQixnQkFBNEI7UUFGNUIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBQy9CLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDbkIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFZO1FBakI5QixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBWWdCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO0lBTS9ELENBQUM7SUFFSixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNiO0lBQ0gsQ0FBQztJQUVELElBQUk7UUFDRixJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUM1QixJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztTQUM3QjtJQUNILENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDeEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1lBQ3BFLElBQUksQ0FBQyxPQUFPLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDL0MsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7WUFDcEYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQ3ZCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxhQUFhLEVBQ25DLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FDcEMsQ0FBQztZQUNGLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDO1NBQzVCO0lBQ0gsQ0FBQzs4R0E3Q1UsZ0JBQWdCO2tHQUFoQixnQkFBZ0I7OzJGQUFoQixnQkFBZ0I7a0JBSDVCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7aUJBQ3pCO3dKQU1LLFNBQVM7c0JBRFosS0FBSzt1QkFBQyxZQUFZO2dCQVN3QixjQUFjO3NCQUF4RCxXQUFXO3VCQUFDLDRCQUE0QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudFJlZixcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIFJlbmRlcmVyMixcbiAgVmlld0NvbnRhaW5lclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTcGlubmVyQ29tcG9uZW50IH0gZnJvbSAnLi9zcGlubmVyLmNvbXBvbmVudCc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1thc2tTcGlubmVyXScsXG59KVxuZXhwb3J0IGNsYXNzIFNwaW5uZXJEaXJlY3RpdmUge1xuICBwcml2YXRlIHNob3VsZFNob3cgPSBmYWxzZTtcbiAgc3Bpbm5lcjogQ29tcG9uZW50UmVmPFNwaW5uZXJDb21wb25lbnQ+IHwgdW5kZWZpbmVkO1xuXG4gIEBJbnB1dCgnYXNrU3Bpbm5lcicpXG4gIHNldCBuYlNwaW5uZXIodmFsOiBib29sZWFuKSB7XG4gICAgaWYgKHZhbCkge1xuICAgICAgdGhpcy5zaG93KCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuaGlkZSgpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MubmItc3Bpbm5lci1jb250YWluZXInKSBpc1NwaW5uZXJFeGlzdCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZGlyZWN0aXZlVmlldzogVmlld0NvbnRhaW5lclJlZixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBkaXJlY3RpdmVFbGVtZW50OiBFbGVtZW50UmVmXG4gICkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5zaG91bGRTaG93KSB7XG4gICAgICB0aGlzLnNob3coKTtcbiAgICB9XG4gIH1cblxuICBoaWRlKCkge1xuICAgIGlmICh0aGlzLmlzU3Bpbm5lckV4aXN0KSB7XG4gICAgICB0aGlzLmRpcmVjdGl2ZVZpZXcucmVtb3ZlKCk7XG4gICAgICB0aGlzLmlzU3Bpbm5lckV4aXN0ID0gZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgc2hvdygpIHtcbiAgICBpZiAoIXRoaXMuaXNTcGlubmVyRXhpc3QpIHtcbiAgICAgIHRoaXMuc3Bpbm5lciA9IHRoaXMuZGlyZWN0aXZlVmlldy5jcmVhdGVDb21wb25lbnQoU3Bpbm5lckNvbXBvbmVudCk7XG4gICAgICB0aGlzLnNwaW5uZXIuY2hhbmdlRGV0ZWN0b3JSZWYuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmRpcmVjdGl2ZUVsZW1lbnQubmF0aXZlRWxlbWVudCwgJ3Bvc2l0aW9uJywgJ3JlbGF0aXZlJyk7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKFxuICAgICAgICB0aGlzLmRpcmVjdGl2ZUVsZW1lbnQubmF0aXZlRWxlbWVudCxcbiAgICAgICAgdGhpcy5zcGlubmVyLmxvY2F0aW9uLm5hdGl2ZUVsZW1lbnRcbiAgICAgICk7XG4gICAgICB0aGlzLmlzU3Bpbm5lckV4aXN0ID0gdHJ1ZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
|
package/esm2022/public-api.mjs
CHANGED
|
@@ -17,4 +17,5 @@ export * from './lib/components/date-picker/date-picker-calendar/date-picker-cal
|
|
|
17
17
|
export * from './lib/components/skeleton/skeleton.component';
|
|
18
18
|
// Directives
|
|
19
19
|
export * from './lib/directives/ask-dropdown.directive';
|
|
20
|
-
|
|
20
|
+
export * from './lib/directives/spinner/spinner.directive';
|
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Fza3N1aXRlLWNpdHJ1cy9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsOEJBQThCLENBQUM7QUFFN0MsYUFBYTtBQUNiLGNBQWMsMENBQTBDLENBQUE7QUFDeEQsY0FBYyx3Q0FBd0MsQ0FBQTtBQUN0RCxjQUFjLDBDQUEwQyxDQUFBO0FBQ3hELGNBQWMsb0NBQW9DLENBQUE7QUFDbEQsY0FBYywwQ0FBMEMsQ0FBQTtBQUN4RCxjQUFjLGtFQUFrRSxDQUFBO0FBQ2hGLGNBQWMsc0RBQXNELENBQUE7QUFDcEUsY0FBYyw4Q0FBOEMsQ0FBQTtBQUM1RCxjQUFjLHdDQUF3QyxDQUFBO0FBQ3RELGNBQWMsb0RBQW9ELENBQUE7QUFDbEUsY0FBYyxrRkFBa0YsQ0FBQTtBQUNoRyxjQUFjLDhDQUE4QyxDQUFBO0FBRTVELGFBQWE7QUFDYixjQUFjLHlDQUF5QyxDQUFBO0FBQ3ZELGNBQWMsNENBQTRDLENBQUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIGFza3N1aXRlLWNpdHJ1c1xuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2Fza3N1aXRlLWNpdHJ1cy5tb2R1bGUnO1xuXG4vLyBDb21wb25lbnRzXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9pbnB1dC9pbnB1dC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9ib3gvYm94LmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Ryb3Bkb3duLWNvbnRhaW5lci9kcm9wZG93bi1jb250YWluZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jaGlwcy9jaGlwcy5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2RhdGUtcGlja2VyL2RhdGUtcGlja2VyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZGF0ZS1waWNrZXIvZGF0ZS1waWNrZXItY2FsZW5kYXIvZGF0ZS1waWNrZXItY2FsZW5kYXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQnXG5cbi8vIERpcmVjdGl2ZXNcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvYXNrLWRyb3Bkb3duLmRpcmVjdGl2ZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvc3Bpbm5lci9zcGlubmVyLmRpcmVjdGl2ZSdcbiJdfQ==
|