@ascentgl/ads-ui 20.0.8 → 20.0.9
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.
|
@@ -2735,11 +2735,11 @@ class AdsCheckboxComponent extends AbstractBaseComponent {
|
|
|
2735
2735
|
this.valueControl.setValue(!this.valueControl.value);
|
|
2736
2736
|
}
|
|
2737
2737
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AdsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AdsCheckboxComponent, isStandalone: false, 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-
|
|
2738
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AdsCheckboxComponent, isStandalone: false, 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.disabled .checkbox-label{color:var(--color-medium-30)}.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)!important;outline:1px solid var(--color-medium-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-medium-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-medium-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:20px}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
2739
2739
|
}
|
|
2740
2740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AdsCheckboxComponent, decorators: [{
|
|
2741
2741
|
type: Component,
|
|
2742
|
-
args: [{ selector: 'ads-checkbox', standalone: false, 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-
|
|
2742
|
+
args: [{ selector: 'ads-checkbox', standalone: false, 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.disabled .checkbox-label{color:var(--color-medium-30)}.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)!important;outline:1px solid var(--color-medium-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-medium-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-medium-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:20px}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
2743
2743
|
}], propDecorators: { indeterminate: [{
|
|
2744
2744
|
type: Input
|
|
2745
2745
|
}], width: [{
|