@ascentgl/ads-ui 0.0.17 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/buttons/button/button.component.mjs +3 -5
- package/esm2022/lib/components/card/card.component.mjs +17 -7
- package/esm2022/lib/components/divider/divider.component.mjs +4 -9
- package/esm2022/lib/components/error-page/error-page.component.mjs +1 -1
- package/esm2022/lib/components/expansion-panel/expansion-panel.component.mjs +2 -2
- package/esm2022/lib/components/form-fields/common/input.tooltip.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/datepickers/date-picker/datepicker.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/datepickers/datetime-picker/datetimepicker.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/datepickers/time-picker/timepicker.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/dropdowns/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/dropdowns/input-dropdown/input-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/dropdowns/multi-select-dropdown/multi-select-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/search-fields/search-dropdown/search-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/search-fields/search-input/search-input.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/selection-fields/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/selection-fields/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/form-fields/selection-fields/slide-toggle/slide-toggle.component.mjs +3 -3
- package/esm2022/lib/components/modal/modal.component.mjs +1 -1
- package/esm2022/lib/components/nav-bar/scms-side-nav-bar/scms-side-nav-bar.component.mjs +3 -3
- package/esm2022/lib/components/nav-bar/side-nav-bar/side-nav-bar.component.mjs +3 -3
- package/esm2022/lib/components/snackbars/snackbar/snackbar.component.mjs +1 -1
- package/esm2022/lib/components/tags/create-tag/create-tag.component.mjs +1 -1
- package/fesm2022/ascentgl-ads-ui.mjs +53 -51
- package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
- package/lib/components/buttons/button/button.component.d.ts +1 -3
- package/lib/components/card/card.component.d.ts +7 -3
- package/lib/components/divider/divider.component.d.ts +2 -3
- package/package.json +7 -13
- package/esm2022/src/lib/components/divider/ascentgl-ads-ui-src-lib-components-divider.mjs +0 -5
- package/esm2022/src/lib/components/divider/divider.component.mjs +0 -43
- package/esm2022/src/lib/components/divider/divider.module.mjs +0 -18
- package/esm2022/src/lib/components/divider/public-api.mjs +0 -3
- package/fesm2022/ascentgl-ads-ui-src-lib-components-divider.mjs +0 -65
- package/fesm2022/ascentgl-ads-ui-src-lib-components-divider.mjs.map +0 -1
- package/src/lib/components/divider/divider.component.d.ts +0 -26
- package/src/lib/components/divider/divider.module.d.ts +0 -8
- package/src/lib/components/divider/index.d.ts +0 -5
- package/src/lib/components/divider/public-api.d.ts +0 -2
package/esm2022/lib/components/form-fields/search-fields/search-input/search-input.component.mjs
CHANGED
|
@@ -30,14 +30,14 @@ export class AdsSearchInputComponent extends AdsInputComponent {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSearchInputComponent, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i9.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i10.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSearchInputComponent, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i9.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i10.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSearchInputComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
args: [{ selector: 'ads-search-input', template: "<div [ngStyle]=\"{ minWidth: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n"] }]
|
|
37
|
+
args: [{ selector: 'ads-search-input', template: "<div [ngStyle]=\"{ minWidth: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:22.4px}\n"] }]
|
|
38
38
|
}], ctorParameters: () => [], propDecorators: { searchCallback: [{
|
|
39
39
|
type: Input
|
|
40
40
|
}], isIconClickable: [{
|
|
41
41
|
type: Input
|
|
42
42
|
}] } });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9mb3JtLWZpZWxkcy9zZWFyY2gtZmllbGRzL3NlYXJjaC1pbnB1dC9zZWFyY2gtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3NlYXJjaC1maWVsZHMvc2VhcmNoLWlucHV0L3NlYXJjaC1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDaEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7Ozs7Ozs7Ozs7QUFPMUQsTUFBTSxPQUFPLHVCQUF3QixTQUFRLGlCQUFpQjtJQU81RDtRQUNFLEtBQUssRUFBRSxDQUFDO1FBSlYsNkVBQTZFO1FBQ3BFLG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBSS9CLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxhQUFhO0lBQ2IsSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsZUFBZSxJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDO0lBQ3pELENBQUM7SUFFRCxhQUFhO0lBQ2IsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ25ELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQyxDQUFDO0lBQ0gsQ0FBQzs4R0F0QlUsdUJBQXVCO2tHQUF2Qix1QkFBdUIsaUtDVHBDLDJ5REEyREE7OzJGRGxEYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usa0JBQWtCO3dEQU1uQixjQUFjO3NCQUF0QixLQUFLO2dCQUdHLGVBQWU7c0JBQXZCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBZHNJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2lucHV0JztcbmltcG9ydCB7IGFkc0ljb25TZWFyY2ggfSBmcm9tICdAYXNjZW50Z2wvYWRzLWljb25zL2ljb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYWRzLXNlYXJjaC1pbnB1dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWFyY2gtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi4vLi4vaW5wdXQvaW5wdXQuY29tcG9uZW50LnNjc3MnLCAnLi4vLi4vY29tbW9uL2NvbW1vbi5pbnB1dC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBBZHNTZWFyY2hJbnB1dENvbXBvbmVudCBleHRlbmRzIEFkc0lucHV0Q29tcG9uZW50IHtcbiAgLyoqIGEgY2FsbGJhY2sgZnVuY3Rpb24gdGhhdCB3aWxsIGJlIGNhbGxlZCBldmVyeSB0aW1lIHdoZW4gZW50ZXIgYnV0dG9uIG9yIHNlYXJjaCBpY29ucyBhcmUgY2xpY2tlZCAqL1xuICBASW5wdXQoKSBzZWFyY2hDYWxsYmFjaz86ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuXG4gIC8qKiBzZXQgdG8gdHJ1ZSBpZiB5b3Ugd2FudCB0byBleGVjdXRlIHNlYXJjaENhbGxiYWNrIHdoZW4gaWNvbiBpcyBjbGlja2VkICovXG4gIEBJbnB1dCgpIGlzSWNvbkNsaWNrYWJsZSA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5yZWdpc3RyeS5yZWdpc3RlcihhZHNJY29uU2VhcmNoKTtcbiAgfVxuXG4gIC8qKiBpZ25vcmUgKi9cbiAgZ2V0IGNhbkNsaWNrKCkge1xuICAgIHJldHVybiB0aGlzLmlzSWNvbkNsaWNrYWJsZSAmJiB0aGlzLnZhbHVlQ29udHJvbC52YWx1ZTtcbiAgfVxuXG4gIC8qKiBpZ25vcmUgKi9cbiAgb25TZWFyY2goKSB7XG4gICAgaWYgKHRoaXMudmFsdWVDb250cm9sLnZhbHVlICYmIHRoaXMuc2VhcmNoQ2FsbGJhY2spIHtcbiAgICAgIHRoaXMuc2VhcmNoQ2FsbGJhY2sodGhpcy52YWx1ZUNvbnRyb2wudmFsdWUpO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBbbmdTdHlsZV09XCJ7IG1pbldpZHRoOiB3aWR0aCB9XCI+XG4gIDxtYXQtZm9ybS1maWVsZFxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICdpbW1lZGlhdGUtdmFsaWRhdGlvbic6IGltbWVkaWF0ZVZhbGlkYXRpb24sXG4gICAgICAnc3VjY2Vzcy1sYWJlbCc6IGNhblNob3dTdWNjZXNzKCksXG4gICAgICAnZXJyb3ItbGFiZWwnOiBjYW5TaG93RXJyb3IoKSxcbiAgICAgICd4LXNtYWxsJzogc21hbGxTaXplLFxuICAgIH1cIlxuICAgIFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIlxuICA+XG4gICAgQGlmICgobGFiZWwgfHwgcmVxdWlyZWQpICYmICFzbWFsbFNpemUpIHtcbiAgICAgIDxtYXQtbGFiZWw+e3sgbGFiZWwgfX08L21hdC1sYWJlbD5cbiAgICB9XG4gICAgPGlucHV0XG4gICAgICBtYXRJbnB1dFxuICAgICAgKGtleWRvd24uZW50ZXIpPVwib25TZWFyY2goKVwiXG4gICAgICBbbWF4bGVuZ3RoXT1cIm1heGxlbmd0aFwiXG4gICAgICBbcGF0dGVybl09XCJwYXR0ZXJuXCJcbiAgICAgIFtpZF09XCJpZFwiXG4gICAgICBbdHlwZV09XCJ0eXBlXCJcbiAgICAgIFtmb3JtQ29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIlxuICAgICAgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcbiAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG4gICAgLz5cblxuICAgIEBpZiAoY2FuQ2xlYXIpIHtcbiAgICAgIDxidXR0b24gbWF0VGV4dFN1ZmZpeCB0eXBlPVwiYnV0dG9uXCIgbWF0LWljb24tYnV0dG9uIChjbGljayk9XCJjbGVhcigkZXZlbnQpXCIgY2xhc3M9XCJhY3Rpb24taWNvblwiPlxuICAgICAgICA8YWRzLWljb24gbmFtZT1cImNyb3NzXCIgW3NpemVdPVwic21hbGxTaXplID8gJ3h4cycgOiAneHMnXCIgW3RoZW1lXT1cIidpY29uUHJpbWFyeSdcIiBjbGFzcz1cImNyb3NzLWljb25cIiAvPlxuICAgICAgPC9idXR0b24+XG4gICAgfVxuXG4gICAgPGJ1dHRvblxuICAgICAgbWF0VGV4dFN1ZmZpeFxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBtYXQtaWNvbi1idXR0b25cbiAgICAgIFtkaXNhYmxlZF09XCIhY2FuQ2xpY2tcIlxuICAgICAgKGNsaWNrKT1cImNhbkNsaWNrID8gb25TZWFyY2goKSA6IG51bGxcIlxuICAgICAgY2xhc3M9XCJhY3Rpb24taWNvblwiXG4gICAgPlxuICAgICAgPGFkcy1pY29uIG5hbWU9XCJzZWFyY2hcIiBzaXplPVwieHNcIiBbdGhlbWVdPVwiJ2ljb25QcmltYXJ5J1wiIGNsYXNzPVwic2VhcmNoLWljb25cIiAvPlxuICAgIDwvYnV0dG9uPlxuICA8L21hdC1mb3JtLWZpZWxkPlxuXG4gIEBpZiAoc2hvd0Zvb3Rlcikge1xuICAgIDxkaXYgY2xhc3M9XCJmb290ZXItY29udGFpbmVyXCI+XG4gICAgICBAaWYgKGNhblNob3dFcnJvcigpKSB7XG4gICAgICAgIDxhZHMtZXJyb3IgW2Vycm9yXT1cImRpc3BsYXlGaXJzdEVycm9yKClcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICAgIH0gQGVsc2UgaWYgKGNhblNob3dTdWNjZXNzKCkpIHtcbiAgICAgICAgPGFkcy1zdWNjZXNzIFtzdWNjZXNzXT1cInN1Y2Nlc3NNZXNzYWdlIVwiIFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIiAvPlxuICAgICAgfSBAZWxzZSBpZiAoaGludCkge1xuICAgICAgICA8YWRzLWhpbnQgW2hpbnRdPVwiaGludFwiIFtjb250cm9sXT1cInZhbHVlQ29udHJvbFwiIFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIiAvPlxuICAgICAgfVxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cblxuQGlmICh0b29sdGlwKSB7XG4gIDxhZHMtaW5wdXQtdG9vbHRpcCBbdG9vbHRpcF09XCJ0b29sdGlwXCIgW3NtYWxsU2l6ZV09XCJzbWFsbFNpemVcIiAvPlxufVxuIl19
|
|
@@ -34,14 +34,14 @@ export class AdsCheckboxComponent extends AbstractBaseComponent {
|
|
|
34
34
|
this.valueControl.setValue(!this.valueControl.value);
|
|
35
35
|
}
|
|
36
36
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
37
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: { indeterminate: "indeterminate", width: "width" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ width: width }\">\n <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n <div class=\"checkbox-ripple\">\n <div class=\"checkbox-container\">\n @if (valueControl.value && !indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"12\"\n viewBox=\"0 0 14 12\"\n fill=\"none\"\n class=\"check-icon\"\n >\n <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n\n @if (indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"4\"\n viewBox=\"0 0 12 4\"\n fill=\"none\"\n class=\"indeterminate-icon\"\n >\n <path\n d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n />\n </svg>\n }\n </div>\n </div>\n @if (label) {\n <span class=\"checkbox-label\">{{ label }}</span>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i3.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: { indeterminate: "indeterminate", width: "width" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ width: width }\">\n <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n <div class=\"checkbox-ripple\">\n <div class=\"checkbox-container\">\n @if (valueControl.value && !indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"12\"\n viewBox=\"0 0 14 12\"\n fill=\"none\"\n class=\"check-icon\"\n >\n <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n\n @if (indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"4\"\n viewBox=\"0 0 12 4\"\n fill=\"none\"\n class=\"indeterminate-icon\"\n >\n <path\n d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n />\n </svg>\n }\n </div>\n </div>\n @if (label) {\n <span class=\"checkbox-label\">{{ label }}</span>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i3.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
38
38
|
}
|
|
39
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsCheckboxComponent, decorators: [{
|
|
40
40
|
type: Component,
|
|
41
|
-
args: [{ selector: 'ads-checkbox', template: "<div [ngStyle]=\"{ width: width }\">\n <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n <div class=\"checkbox-ripple\">\n <div class=\"checkbox-container\">\n @if (valueControl.value && !indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"12\"\n viewBox=\"0 0 14 12\"\n fill=\"none\"\n class=\"check-icon\"\n >\n <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n\n @if (indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"4\"\n viewBox=\"0 0 12 4\"\n fill=\"none\"\n class=\"indeterminate-icon\"\n >\n <path\n d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n />\n </svg>\n }\n </div>\n </div>\n @if (label) {\n <span class=\"checkbox-label\">{{ label }}</span>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n"] }]
|
|
41
|
+
args: [{ selector: 'ads-checkbox', template: "<div [ngStyle]=\"{ width: width }\">\n <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n <div class=\"checkbox-ripple\">\n <div class=\"checkbox-container\">\n @if (valueControl.value && !indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"12\"\n viewBox=\"0 0 14 12\"\n fill=\"none\"\n class=\"check-icon\"\n >\n <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n\n @if (indeterminate) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"4\"\n viewBox=\"0 0 12 4\"\n fill=\"none\"\n class=\"indeterminate-icon\"\n >\n <path\n d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n />\n </svg>\n }\n </div>\n </div>\n @if (label) {\n <span class=\"checkbox-label\">{{ label }}</span>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:22.4px}\n"] }]
|
|
42
42
|
}], propDecorators: { indeterminate: [{
|
|
43
43
|
type: Input
|
|
44
44
|
}], width: [{
|
|
45
45
|
type: Input
|
|
46
46
|
}] } });
|
|
47
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3NlbGVjdGlvbi1maWVsZHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3NlbGVjdGlvbi1maWVsZHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQTJCLE1BQU0sZUFBZSxDQUFDO0FBQzFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM1QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQzs7Ozs7O0FBT2hGLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxxQkFBcUI7SUFML0Q7O1FBTUUsdURBQXVEO1FBQzlDLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBRXRCLFVBQUssR0FBRyxhQUFhLENBQUM7S0FzQmhDO0lBcEJDLGNBQWM7SUFDZCxXQUFXLENBQUMsT0FBc0U7UUFDaEYsSUFBSSxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDckIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7Z0JBQ2xCLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUN2RCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFlBQVksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDMUQsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsY0FBYztJQUNkLFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUTtZQUFFLE9BQU87UUFFdkMsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDN0IsQ0FBQztRQUNELElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2RCxDQUFDOzhHQXpCVSxvQkFBb0I7a0dBQXBCLG9CQUFvQiw0SkNUakMsd3REQWtEQTs7MkZEekNhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxjQUFjOzhCQU1mLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2UgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFZhbGlkYXRvcnMgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBBYnN0cmFjdEJhc2VDb21wb25lbnQgfSBmcm9tICcuLi8uLi9hYnN0cmFjdHMvYWJzdHJhY3QuYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuc2NzcycsICcuLi8uLi9jb21tb24vY29tbW9uLmlucHV0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEFkc0NoZWNrYm94Q29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RCYXNlQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgLyoqIFNldCB0byBcInRydWVcIiB0byBtYWtlIHRoZSBjaGVja2JveCBpbmRldGVybWluYXRlICovXG4gIEBJbnB1dCgpIGluZGV0ZXJtaW5hdGUgPSBmYWxzZTtcblxuICBASW5wdXQoKSB3aWR0aCA9ICdmaXQtY29udGVudCc7XG5cbiAgLyoqIEBpZ25vcmUgKi9cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogeyByZXF1aXJlZDogU2ltcGxlQ2hhbmdlOyBpbW1lZGlhdGVWYWxpZGF0aW9uOiBTaW1wbGVDaGFuZ2UgfSk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLnJlcXVpcmVkKSB7XG4gICAgICBpZiAodGhpcy5yZXF1aXJlZCkge1xuICAgICAgICB0aGlzLnZhbHVlQ29udHJvbC5hZGRWYWxpZGF0b3JzKFZhbGlkYXRvcnMucmVxdWlyZWQpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy52YWx1ZUNvbnRyb2wucmVtb3ZlVmFsaWRhdG9ycyhWYWxpZGF0b3JzLnJlcXVpcmVkKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAvKiogQGlnbm9yZSAqL1xuICB0b2dnbGVDaGVjaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy52YWx1ZUNvbnRyb2wuZGlzYWJsZWQpIHJldHVybjtcblxuICAgIGlmICh0aGlzLmluZGV0ZXJtaW5hdGUpIHtcbiAgICAgIHRoaXMuaW5kZXRlcm1pbmF0ZSA9IGZhbHNlO1xuICAgIH1cbiAgICB0aGlzLnZhbHVlQ29udHJvbC5zZXRWYWx1ZSghdGhpcy52YWx1ZUNvbnRyb2wudmFsdWUpO1xuICB9XG59XG4iLCI8ZGl2IFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIj5cbiAgPGRpdiBjbGFzcz1cImFkcy1jaGVja2JveFwiIChjbGljayk9XCJ0b2dnbGVDaGVjaygpXCIgW25nQ2xhc3NdPVwieyBkaXNhYmxlZDogdmFsdWVDb250cm9sLmRpc2FibGVkIH1cIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2hlY2tib3gtcmlwcGxlXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2hlY2tib3gtY29udGFpbmVyXCI+XG4gICAgICAgIEBpZiAodmFsdWVDb250cm9sLnZhbHVlICYmICFpbmRldGVybWluYXRlKSB7XG4gICAgICAgICAgPHN2Z1xuICAgICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgICAgICAgICB3aWR0aD1cIjE0XCJcbiAgICAgICAgICAgIGhlaWdodD1cIjEyXCJcbiAgICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMTQgMTJcIlxuICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgY2xhc3M9XCJjaGVjay1pY29uXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8cGF0aCBkPVwiTTIgNkw1Ljc1IDEwLjVMMTIgMS41XCIgc3Ryb2tlLXdpZHRoPVwiM1wiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiIC8+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICAgIH1cblxuICAgICAgICBAaWYgKGluZGV0ZXJtaW5hdGUpIHtcbiAgICAgICAgICA8c3ZnXG4gICAgICAgICAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgICAgICAgICAgIHdpZHRoPVwiMTJcIlxuICAgICAgICAgICAgaGVpZ2h0PVwiNFwiXG4gICAgICAgICAgICB2aWV3Qm94PVwiMCAwIDEyIDRcIlxuICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgY2xhc3M9XCJpbmRldGVybWluYXRlLWljb25cIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgIGQ9XCJNMTEuNTM4NSAwLjVIMC40NjE1MzhDMC4yMDY2MzggMC41IDAgMC43MjM4NTggMCAxVjNDMCAzLjI3NjE0IDAuMjA2NjM4IDMuNSAwLjQ2MTUzOCAzLjVIMTEuNTM4NUMxMS43OTM0IDMuNSAxMiAzLjI3NjE0IDEyIDNWMUMxMiAwLjcyMzg1OCAxMS43OTM0IDAuNSAxMS41Mzg1IDAuNVpcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgQGlmIChsYWJlbCkge1xuICAgICAgPHNwYW4gY2xhc3M9XCJjaGVja2JveC1sYWJlbFwiPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIH1cbiAgPC9kaXY+XG5cbiAgQGlmIChzaG93Rm9vdGVyKSB7XG4gICAgPGRpdiBjbGFzcz1cImZvb3Rlci1jb250YWluZXJcIj5cbiAgICAgIEBpZiAoY2FuU2hvd0Vycm9yKCkpIHtcbiAgICAgICAgPGFkcy1lcnJvciBbZXJyb3JdPVwiZGlzcGxheUZpcnN0RXJyb3IoKVwiIFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIiAvPlxuICAgICAgfSBAZWxzZSBpZiAoY2FuU2hvd1N1Y2Nlc3MoKSkge1xuICAgICAgICA8YWRzLXN1Y2Nlc3MgW3N1Y2Nlc3NdPVwic3VjY2Vzc01lc3NhZ2UhXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgICB9IEBlbHNlIGlmIChoaW50KSB7XG4gICAgICAgIDxhZHMtaGludCBbaGludF09XCJoaW50XCIgW2NvbnRyb2xdPVwidmFsdWVDb250cm9sXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gIH1cbjwvZGl2PlxuIl19
|
package/esm2022/lib/components/form-fields/selection-fields/radio-button/radio-button.component.mjs
CHANGED
|
@@ -38,11 +38,11 @@ export class AdsRadioButtonComponent extends AdsDropdownComponent {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsRadioButtonComponent, selector: "ads-radio-button", inputs: { vertical: "vertical", sortOptions: "sortOptions", useOptionTemplate: "useOptionTemplate" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n <mat-radio-group\n [id]=\"id\"\n [ngClass]=\"{\n vertical: vertical,\n 'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n }\"\n [formControl]=\"valueControl\"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-radio-button [value]=\"option.key\">\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n }\n </mat-radio-button>\n }\n </mat-radio-group>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i5.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i6.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i7.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsRadioButtonComponent, selector: "ads-radio-button", inputs: { vertical: "vertical", sortOptions: "sortOptions", useOptionTemplate: "useOptionTemplate" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n <mat-radio-group\n [id]=\"id\"\n [ngClass]=\"{\n vertical: vertical,\n 'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n }\"\n [formControl]=\"valueControl\"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-radio-button [value]=\"option.key\">\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n }\n </mat-radio-button>\n }\n </mat-radio-group>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i5.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i6.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i7.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
|
|
42
42
|
}
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsRadioButtonComponent, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
|
-
args: [{ selector: 'ads-radio-button', template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n <mat-radio-group\n [id]=\"id\"\n [ngClass]=\"{\n vertical: vertical,\n 'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n }\"\n [formControl]=\"valueControl\"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-radio-button [value]=\"option.key\">\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n }\n </mat-radio-button>\n }\n </mat-radio-group>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n"] }]
|
|
45
|
+
args: [{ selector: 'ads-radio-button', template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n <mat-radio-group\n [id]=\"id\"\n [ngClass]=\"{\n vertical: vertical,\n 'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n }\"\n [formControl]=\"valueControl\"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-radio-button [value]=\"option.key\">\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n }\n </mat-radio-button>\n }\n </mat-radio-group>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n", ".footer-container{min-height:22.4px}\n"] }]
|
|
46
46
|
}], propDecorators: { vertical: [{
|
|
47
47
|
type: Input
|
|
48
48
|
}], sortOptions: [{
|
|
@@ -50,4 +50,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
|
|
|
50
50
|
}], useOptionTemplate: [{
|
|
51
51
|
type: Input
|
|
52
52
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9mb3JtLWZpZWxkcy9zZWxlY3Rpb24tZmllbGRzL3JhZGlvLWJ1dHRvbi9yYWRpby1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3NlbGVjdGlvbi1maWVsZHMvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQTJCLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNyRyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDNUMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7OztBQVFoRSxNQUFNLE9BQU8sdUJBQXdCLFNBQVEsb0JBQW9CO0lBTGpFOztRQU1FLGNBQWM7UUFDZCxjQUFTLEdBQUcsWUFBWSxDQUFDLFFBQVEsQ0FBNkIsQ0FBQSxXQUEwQixDQUFBLENBQUMsQ0FBQztRQUUxRix1REFBdUQ7UUFDOUMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUUxQixxQ0FBcUM7UUFDNUIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFFN0IsNEZBQTRGO1FBQ25GLHNCQUFpQixHQUFHLEtBQUssQ0FBQztRQUVuQyxjQUFjO1FBQ2QsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUVuQixjQUFjO1FBQ2QsZ0JBQVcsR0FBRyxFQUFFLENBQUM7S0FpQmxCO0lBWkMsY0FBYztJQUNkLFdBQVcsQ0FBQyxPQUE2RjtRQUN2RyxLQUFLLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBRTNCLElBQUksT0FBTyxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ3JCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO2dCQUNsQixJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDdkQsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLElBQUksQ0FBQyxZQUFZLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQzFELENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzs4R0FqQ1UsdUJBQXVCO2tHQUF2Qix1QkFBdUIscU1BRTRCLENBQUEsV0FBMEIsQ0FBQSw0R0NaMUYsdzBDQXFDQTs7MkZEM0JhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxrQkFBa0I7OEJBU25CLFFBQVE7c0JBQWhCLEtBQUs7Z0JBR0csV0FBVztzQkFBbkIsS0FBSztnQkFHRyxpQkFBaUI7c0JBQXpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGNvbnRlbnRDaGlsZCwgSW5wdXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlLCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEFkc0Ryb3Bkb3duQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZHJvcGRvd25zL2Ryb3Bkb3duJztcbmltcG9ydCB7IFRFTVBMQVRFX1RZUEUgfSBmcm9tICcuLi8uLi9jb21tb24vZHJvcGRvd24tb3B0aW9uLXRlbXBsYXRlLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Fkcy1yYWRpby1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5zY3NzJywgJy4uLy4uL2NvbW1vbi9jb21tb24uaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQWRzUmFkaW9CdXR0b25Db21wb25lbnQgZXh0ZW5kcyBBZHNEcm9wZG93bkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKiBAaWdub3JlICovXG4gIG9wdGlvblJlZiA9IGNvbnRlbnRDaGlsZC5yZXF1aXJlZDxUZW1wbGF0ZVJlZjxURU1QTEFURV9UWVBFPj4oVGVtcGxhdGVSZWY8VEVNUExBVEVfVFlQRT4pO1xuXG4gIC8qKiBTZXQgdG8gXCJ0cnVlXCIgdG8gbWFrZSB0aGUgY2hlY2tib3ggaW5kZXRlcm1pbmF0ZSAqL1xuICBASW5wdXQoKSB2ZXJ0aWNhbCA9IGZhbHNlO1xuXG4gIC8qKiBFbmFibGUvZGlzYWJsZSBvcHRpb25zIHNvcnRpbmcgKi9cbiAgQElucHV0KCkgc29ydE9wdGlvbnMgPSBmYWxzZTtcblxuICAvKiogSWYgXCJ0cnVlXCIsIHdpbGwgcmVhZCBvcHRpb24gdGVtcGxhdGUgcHJvdmlkZWQgdmlhIFwibmctdGVtcGxhdGUgcmFkaW8tb3B0aW9uXCIgc2VsZWN0b3IgKi9cbiAgQElucHV0KCkgdXNlT3B0aW9uVGVtcGxhdGUgPSBmYWxzZTtcblxuICAvKiogQGlnbm9yZSAqL1xuICBmaXRDb250ZW50ID0gZmFsc2U7XG5cbiAgLyoqIEBpZ25vcmUgKi9cbiAgcGxhY2Vob2xkZXIgPSAnJztcblxuICAvKiogQGlnbm9yZSAqL1xuICBkZWNsYXJlIGxhYmVsPzogc3RyaW5nO1xuXG4gIC8qKiBAaWdub3JlICovXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IHsgcmVxdWlyZWQ6IFNpbXBsZUNoYW5nZTsgb3B0aW9uczogU2ltcGxlQ2hhbmdlOyBpbW1lZGlhdGVWYWxpZGF0aW9uOiBTaW1wbGVDaGFuZ2UgfSk6IHZvaWQge1xuICAgIHN1cGVyLm5nT25DaGFuZ2VzKGNoYW5nZXMpO1xuXG4gICAgaWYgKGNoYW5nZXMucmVxdWlyZWQpIHtcbiAgICAgIGlmICh0aGlzLnJlcXVpcmVkKSB7XG4gICAgICAgIHRoaXMudmFsdWVDb250cm9sLmFkZFZhbGlkYXRvcnMoVmFsaWRhdG9ycy5yZXF1aXJlZCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnZhbHVlQ29udHJvbC5yZW1vdmVWYWxpZGF0b3JzKFZhbGlkYXRvcnMucmVxdWlyZWQpO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImZvcm0tY29udHJvbC1yb3dcIiBbbmdTdHlsZV09XCJ7IG1pbldpZHRoOiB3aWR0aCB9XCI+XG4gIDxtYXQtcmFkaW8tZ3JvdXBcbiAgICBbaWRdPVwiaWRcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgIHZlcnRpY2FsOiB2ZXJ0aWNhbCxcbiAgICAgICdyYWRpby1pbnZhbGlkJzogdmFsdWVDb250cm9sLmludmFsaWQgJiYgKHZhbHVlQ29udHJvbC50b3VjaGVkIHx8IGltbWVkaWF0ZVZhbGlkYXRpb24pLFxuICAgIH1cIlxuICAgIFtmb3JtQ29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIlxuICA+XG4gICAgQGZvciAob3B0aW9uIG9mIGRpc3BsYXllZE9wdGlvbnMgfCBrZXl2YWx1ZTogYXBwbHlTb3J0aW5nOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgIDxtYXQtcmFkaW8tYnV0dG9uIFt2YWx1ZV09XCJvcHRpb24ua2V5XCI+XG4gICAgICAgIEBpZiAodXNlT3B0aW9uVGVtcGxhdGUpIHtcbiAgICAgICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm9wdGlvblJlZigpXCJcbiAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogb3B0aW9uLmtleSwgdmFsdWU6IG9wdGlvbi52YWx1ZSB9XCJcbiAgICAgICAgICA+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAge3sgZGlzcGxheVZhbHVlRm9ybWF0dGVyID8gZGlzcGxheVZhbHVlRm9ybWF0dGVyKG9wdGlvbi5rZXkpIDogb3B0aW9uLnZhbHVlIH19XG4gICAgICAgIH1cbiAgICAgIDwvbWF0LXJhZGlvLWJ1dHRvbj5cbiAgICB9XG4gIDwvbWF0LXJhZGlvLWdyb3VwPlxuICBAaWYgKHNob3dGb290ZXIpIHtcbiAgICA8ZGl2IGNsYXNzPVwiZm9vdGVyLWNvbnRhaW5lclwiPlxuICAgICAgQGlmIChjYW5TaG93RXJyb3IoKSkge1xuICAgICAgICA8YWRzLWVycm9yIFtlcnJvcl09XCJkaXNwbGF5Rmlyc3RFcnJvcigpXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgICB9IEBlbHNlIGlmIChjYW5TaG93U3VjY2VzcygpKSB7XG4gICAgICAgIDxhZHMtc3VjY2VzcyBbc3VjY2Vzc109XCJzdWNjZXNzTWVzc2FnZSFcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICAgIH0gQGVsc2UgaWYgKGhpbnQpIHtcbiAgICAgICAgPGFkcy1oaW50IFtoaW50XT1cImhpbnRcIiBbY29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG5AaWYgKHRvb2x0aXApIHtcbiAgPGFkcy1pbnB1dC10b29sdGlwIFt0b29sdGlwXT1cInRvb2x0aXBcIiAvPlxufVxuIl19
|
package/esm2022/lib/components/form-fields/selection-fields/slide-toggle/slide-toggle.component.mjs
CHANGED
|
@@ -39,11 +39,11 @@ export class AdsSlideToggleComponent extends AbstractBaseComponent {
|
|
|
39
39
|
this.valueControl.setValue(!this.valueControl.value);
|
|
40
40
|
}
|
|
41
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: { control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\"
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: { control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\">{{ valueControl.value ? 'On' : 'Off' }}</span>\n </div>\n <div class=\"toggle-handle\"></div>\n </div>\n\n @if (label) {\n <span class=\"label\"> {{ label }} </span>\n }\n</div>\n@if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n}\n", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i3.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
43
43
|
}
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSlideToggleComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
args: [{ selector: 'ads-slide-toggle', template: "<div class=\"ads-toggle\"
|
|
46
|
+
args: [{ selector: 'ads-slide-toggle', template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\">{{ valueControl.value ? 'On' : 'Off' }}</span>\n </div>\n <div class=\"toggle-handle\"></div>\n </div>\n\n @if (label) {\n <span class=\"label\"> {{ label }} </span>\n }\n</div>\n@if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n}\n", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:22.4px}\n"] }]
|
|
47
47
|
}], propDecorators: { control: [{
|
|
48
48
|
type: Input
|
|
49
49
|
}], label: [{
|
|
@@ -53,4 +53,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
|
|
|
53
53
|
}], width: [{
|
|
54
54
|
type: Input
|
|
55
55
|
}] } });
|
|
56
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtdG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9mb3JtLWZpZWxkcy9zZWxlY3Rpb24tZmllbGRzL3NsaWRlLXRvZ2dsZS9zbGlkZS10b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3NlbGVjdGlvbi1maWVsZHMvc2xpZGUtdG9nZ2xlL3NsaWRlLXRvZ2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQW1CLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzlELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDOzs7Ozs7QUFPaEYsTUFBTSxPQUFPLHVCQUF3QixTQUFRLHFCQUFxQjtJQUxsRTs7UUFNRSxjQUFjO1FBQ2QsaUJBQVksR0FBZ0IsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQWdCOUMsd0RBQXdEO1FBQy9DLFVBQUssR0FBRyxFQUFFLENBQUM7UUFFcEIscURBQXFEO1FBQzVDLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFakIsMkVBQTJFO1FBQ2xFLFVBQUssR0FBRyxhQUFhLENBQUM7S0FRaEM7SUE3QkMsZ0RBQWdEO0lBQ2hELElBQWEsT0FBTyxDQUFDLE9BQStCO1FBQ2xEOzs7O1dBSUc7UUFDSCxJQUFJLE9BQU8sWUFBWSxXQUFXLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsWUFBWSxHQUFHLE9BQU8sQ0FBQztRQUM5QixDQUFDO2FBQU0sQ0FBQztZQUNOLE1BQU0sS0FBSyxDQUFDLDBDQUEwQyxDQUFDLENBQUM7UUFDMUQsQ0FBQztJQUNILENBQUM7SUFXRCxjQUFjO0lBQ2QsTUFBTTtRQUNKLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRO1lBQUUsT0FBTztRQUV2QyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdkQsQ0FBQzs4R0FoQ1UsdUJBQXVCO2tHQUF2Qix1QkFBdUIseUpDVHBDLHczQkF1QkE7OzJGRGRhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxrQkFBa0I7OEJBU2YsT0FBTztzQkFBbkIsS0FBSztnQkFjRyxLQUFLO3NCQUFiLEtBQUs7Z0JBR0csRUFBRTtzQkFBVixLQUFLO2dCQUdHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBBYnN0cmFjdEJhc2VDb21wb25lbnQgfSBmcm9tICcuLi8uLi9hYnN0cmFjdHMvYWJzdHJhY3QuYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtc2xpZGUtdG9nZ2xlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlLXRvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NsaWRlLXRvZ2dsZS5jb21wb25lbnQuc2NzcycsICcuLi8uLi9jb21tb24vY29tbW9uLmlucHV0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEFkc1NsaWRlVG9nZ2xlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RCYXNlQ29tcG9uZW50IHtcbiAgLyoqIEBpZ25vcmUgKi9cbiAgdmFsdWVDb250cm9sOiBGb3JtQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuXG4gIC8qKiBGb3JtIGNvbnRyb2wsIGFzc29jaWF0ZWQgd2l0aCBpbnB1dCBmaWVsZCAqL1xuICBASW5wdXQoKSBzZXQgY29udHJvbChjb250cm9sOiBBYnN0cmFjdENvbnRyb2wgfCBudWxsKSB7XG4gICAgLyoqXG4gICAgICogTk9URTogd2UgdXNlIHNldHRlciBhbmQgaW50ZXJuYWwgXCJ2YWx1ZUNvbnRyb2xcIiBoZXJlXG4gICAgICogdG8gYWxsb3cgcGFzcyBjaGlsZHJlbiBvZiBGb3JtR3JvdXAgKHdoaWNoIGFyZSBhbGwgdHlwZWQgYXMgQWJzdHJhY3RDb250cm9sIGluc3RhbmNlcylcbiAgICAgKlxuICAgICAqL1xuICAgIGlmIChjb250cm9sIGluc3RhbmNlb2YgRm9ybUNvbnRyb2wpIHtcbiAgICAgIHRoaXMudmFsdWVDb250cm9sID0gY29udHJvbDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhyb3cgRXJyb3IoJ0NvbnRyb2wgbXVzdCBiZSBhIFwiRm9ybUNvbnRyb2xcIiBpbnN0YW5jZScpO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBPcHRpb25hbCBcImxhYmVsXCIgYXR0cmlidXRlIGZvciBzbGlkZSB0b2dnbGUgZmllbGQgKi9cbiAgQElucHV0KCkgbGFiZWwgPSAnJztcblxuICAvKiogT3B0aW9uYWwgXCJpZFwiIGF0dHJpYnV0ZSBmb3Igc2xpZGUgdG9nZ2xlIGZpZWxkICovXG4gIEBJbnB1dCgpIGlkID0gJyc7XG5cbiAgLyoqIENvbXBvbmVudCB3aWR0aC4gTXVzdCBpbmNsdWRlIHVuaXRzIG9mIG1lYXN1cmU6IHB4LCAlLCBlbSwgcmVtLCBldGMuICovXG4gIEBJbnB1dCgpIHdpZHRoID0gJ2ZpdC1jb250ZW50JztcblxuICAvKiogQGlnbm9yZSAqL1xuICB0b2dnbGUoKSB7XG4gICAgaWYgKHRoaXMudmFsdWVDb250cm9sLmRpc2FibGVkKSByZXR1cm47XG5cbiAgICB0aGlzLnZhbHVlQ29udHJvbC5zZXRWYWx1ZSghdGhpcy52YWx1ZUNvbnRyb2wudmFsdWUpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYWRzLXRvZ2dsZVwiIFtjbGFzcy5kaXNhYmxlZF09XCJ2YWx1ZUNvbnRyb2wuZGlzYWJsZWRcIiAoY2xpY2spPVwidG9nZ2xlKClcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCI+XG4gIDxkaXYgY2xhc3M9XCJ0b2dnbGUtY29udGFpbmVyXCIgW2NsYXNzLmNoZWNrZWRdPVwidmFsdWVDb250cm9sLnZhbHVlXCI+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZS10cmFja1wiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJ0b2dnbGUtbGFiZWxcIj57eyB2YWx1ZUNvbnRyb2wudmFsdWUgPyAnT24nIDogJ09mZicgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZS1oYW5kbGVcIj48L2Rpdj5cbiAgPC9kaXY+XG5cbiAgQGlmIChsYWJlbCkge1xuICAgIDxzcGFuIGNsYXNzPVwibGFiZWxcIj4ge3sgbGFiZWwgfX0gPC9zcGFuPlxuICB9XG48L2Rpdj5cbkBpZiAoc2hvd0Zvb3Rlcikge1xuICA8ZGl2IGNsYXNzPVwiZm9vdGVyLWNvbnRhaW5lclwiPlxuICAgIEBpZiAoY2FuU2hvd0Vycm9yKCkpIHtcbiAgICAgIDxhZHMtZXJyb3IgW2Vycm9yXT1cImRpc3BsYXlGaXJzdEVycm9yKClcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICB9IEBlbHNlIGlmIChjYW5TaG93U3VjY2VzcygpKSB7XG4gICAgICA8YWRzLXN1Y2Nlc3MgW3N1Y2Nlc3NdPVwic3VjY2Vzc01lc3NhZ2UhXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgfSBAZWxzZSBpZiAoaGludCkge1xuICAgICAgPGFkcy1oaW50IFtoaW50XT1cImhpbnRcIiBbY29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICB9XG4gIDwvZGl2PlxufVxuIl19
|
|
@@ -29,7 +29,7 @@ export class AdsModalComponent {
|
|
|
29
29
|
this.dialogRef.close();
|
|
30
30
|
}
|
|
31
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsModalComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.AdsIconRegistry }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsModalComponent, selector: "ads-modal", ngImport: i0, template: "<div mat-dialog-title>\n {{ data.title }}\n <div class=\"cross-icon-container\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onClose()\" />\n </div>\n</div>\n\n<div mat-dialog-content>\n @if (data.contentTemplate) {\n <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: data }\" />\n }\n {{ data.content }}\n</div>\n\n<div mat-dialog-actions>\n @if (data.actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"data.actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit: data }\" />\n } @else {\n @if (!data.hideCancel) {\n <ads-button variant=\"secondary\" (click)=\"onCancel()\">\n @if (data.cancelButtonText) {\n {{ data.cancelButtonText | transloco }}\n } @else {\n {{ 'Cancel' | transloco }}\n }\n </ads-button>\n }\n <ads-button variant=\"primary\" (click)=\"onSubmit()\">\n @if (data.confirmButtonText) {\n {{ data.confirmButtonText | transloco }}\n } @else {\n {{ 'Save' | transloco }}\n }\n </ads-button>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mdc-dialog-container-shape: 10px;--mdc-dialog-container-color: var(--color-white)}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{--mat-dialog-headline-padding: 24px 16px 16px 24px;display:flex;justify-content:space-between;--mdc-dialog-subhead-color: var(--color-dark);--mdc-dialog-subhead-line-height: 26px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{cursor:pointer}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mat-dialog-with-actions-content-padding: 0 24px 24px 24px;--mdc-dialog-supporting-text-color: var(--color-medium);--mdc-dialog-supporting-text-line-height: 21px;--mdc-dialog-supporting-text-size: 16px;--mdc-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);--mat-dialog-actions-padding: 24px;--mat-dialog-actions-alignment: end;gap:16px}\n"], dependencies: [{ kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsModalComponent, selector: "ads-modal", ngImport: i0, template: "<div mat-dialog-title>\n {{ data.title }}\n <div class=\"cross-icon-container\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onClose()\" />\n </div>\n</div>\n\n<div mat-dialog-content>\n @if (data.contentTemplate) {\n <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: data }\" />\n }\n {{ data.content }}\n</div>\n\n<div mat-dialog-actions>\n @if (data.actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"data.actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit: data }\" />\n } @else {\n @if (!data.hideCancel) {\n <ads-button variant=\"secondary\" (click)=\"onCancel()\">\n @if (data.cancelButtonText) {\n {{ data.cancelButtonText | transloco }}\n } @else {\n {{ 'Cancel' | transloco }}\n }\n </ads-button>\n }\n <ads-button variant=\"primary\" (click)=\"onSubmit()\">\n @if (data.confirmButtonText) {\n {{ data.confirmButtonText | transloco }}\n } @else {\n {{ 'Save' | transloco }}\n }\n </ads-button>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mdc-dialog-container-shape: 10px;--mdc-dialog-container-color: var(--color-white)}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{--mat-dialog-headline-padding: 24px 16px 16px 24px;display:flex;justify-content:space-between;--mdc-dialog-subhead-color: var(--color-dark);--mdc-dialog-subhead-line-height: 26px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{cursor:pointer}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mat-dialog-with-actions-content-padding: 0 24px 24px 24px;--mdc-dialog-supporting-text-color: var(--color-medium);--mdc-dialog-supporting-text-line-height: 21px;--mdc-dialog-supporting-text-size: 16px;--mdc-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);--mat-dialog-actions-padding: 24px;--mat-dialog-actions-alignment: end;gap:16px}\n"], dependencies: [{ kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: i2.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }] }); }
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsModalComponent, decorators: [{
|
|
35
35
|
type: Component,
|