@clr/angular
Version:
Angular components for Clarity
127 lines • 14 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Component, ContentChildren, Input, Optional } from '@angular/core';
import { ClrAbstractContainer } from '../common/abstract-container';
import { IfControlStateService } from '../common/if-control-state/if-control-state.service';
import { ContainerIdService } from '../common/providers/container-id.service';
import { ControlClassService } from '../common/providers/control-class.service';
import { NgControlService } from '../common/providers/ng-control.service';
import { ClrCheckbox } from './checkbox';
import * as i0 from "@angular/core";
import * as i1 from "../common/providers/layout.service";
import * as i2 from "../common/providers/control-class.service";
import * as i3 from "../common/providers/ng-control.service";
import * as i4 from "../common/if-control-state/if-control-state.service";
import * as i5 from "@angular/common";
import * as i6 from "../../icon/icon";
import * as i7 from "../common/label";
export class ClrCheckboxContainer extends ClrAbstractContainer {
constructor(layoutService, controlClassService, ngControlService, ifControlStateService) {
super(ifControlStateService, layoutService, controlClassService, ngControlService);
this.layoutService = layoutService;
this.controlClassService = controlClassService;
this.ngControlService = ngControlService;
this.ifControlStateService = ifControlStateService;
this.inline = false;
}
/*
* Here we want to support the following cases
* clrInline - true by presence
* clrInline="true|false" - unless it is explicitly false, strings are considered true
* [clrInline]="true|false" - expect a boolean
*/
get clrInline() {
return this.inline;
}
set clrInline(value) {
if (typeof value === 'string') {
this.inline = value === 'false' ? false : true;
}
else {
this.inline = !!value;
}
}
ngAfterContentInit() {
this.setAriaRoles();
}
setAriaRoles() {
this.role = this.checkboxes.length ? 'group' : null;
}
}
ClrCheckboxContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrCheckboxContainer, deps: [{ token: i1.LayoutService, optional: true }, { token: i2.ControlClassService }, { token: i3.NgControlService }, { token: i4.IfControlStateService }], target: i0.ɵɵFactoryTarget.Component });
ClrCheckboxContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: { clrInline: "clrInline" }, host: { properties: { "class.clr-form-control": "true", "class.clr-form-control-disabled": "control?.disabled", "class.clr-row": "addGrid()", "attr.role": "role" } }, providers: [IfControlStateService, NgControlService, ControlClassService, ContainerIdService], queries: [{ propertyName: "checkboxes", predicate: ClrCheckbox, descendants: true }], usesInheritance: true, ngImport: i0, template: `
<ng-content select="label"></ng-content>
<label *ngIf="!label && addGrid()"></label>
<div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
<ng-content select="clr-checkbox-wrapper,clr-toggle-wrapper"></ng-content>
<div class="clr-subtext-wrapper">
<ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
<cds-icon
*ngIf="showInvalid"
class="clr-validate-icon"
shape="exclamation-circle"
status="danger"
aria-hidden="true"
></cds-icon>
<cds-icon
*ngIf="showValid"
class="clr-validate-icon"
shape="check-circle"
status="success"
aria-hidden="true"
></cds-icon>
<ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
<ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i7.ClrLabel, selector: "label", inputs: ["for"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrCheckboxContainer, decorators: [{
type: Component,
args: [{
selector: 'clr-checkbox-container,clr-toggle-container',
template: `
<ng-content select="label"></ng-content>
<label *ngIf="!label && addGrid()"></label>
<div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
<ng-content select="clr-checkbox-wrapper,clr-toggle-wrapper"></ng-content>
<div class="clr-subtext-wrapper">
<ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
<cds-icon
*ngIf="showInvalid"
class="clr-validate-icon"
shape="exclamation-circle"
status="danger"
aria-hidden="true"
></cds-icon>
<cds-icon
*ngIf="showValid"
class="clr-validate-icon"
shape="check-circle"
status="success"
aria-hidden="true"
></cds-icon>
<ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
<ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
</div>
</div>
`,
host: {
'[class.clr-form-control]': 'true',
'[class.clr-form-control-disabled]': 'control?.disabled',
'[class.clr-row]': 'addGrid()',
'[attr.role]': 'role',
},
providers: [IfControlStateService, NgControlService, ControlClassService, ContainerIdService],
}]
}], ctorParameters: function () { return [{ type: i1.LayoutService, decorators: [{
type: Optional
}] }, { type: i2.ControlClassService }, { type: i3.NgControlService }, { type: i4.IfControlStateService }]; }, propDecorators: { checkboxes: [{
type: ContentChildren,
args: [ClrCheckbox, { descendants: true }]
}], clrInline: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3gtY29udGFpbmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvZm9ybXMvY2hlY2tib3gvY2hlY2tib3gtY29udGFpbmVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBQW9CLFNBQVMsRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUV6RyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxxREFBcUQsQ0FBQztBQUM1RixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQztBQUM5RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUVoRixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUMxRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sWUFBWSxDQUFDOzs7Ozs7Ozs7QUFzQ3pDLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxvQkFBb0I7SUFPNUQsWUFDaUMsYUFBNEIsRUFDeEMsbUJBQXdDLEVBQ3hDLGdCQUFrQyxFQUNsQyxxQkFBNEM7UUFFL0QsS0FBSyxDQUFDLHFCQUFxQixFQUFFLGFBQWEsRUFBRSxtQkFBbUIsRUFBRSxnQkFBZ0IsQ0FBQyxDQUFDO1FBTHBELGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBQ3hDLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFDeEMscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUNsQywwQkFBcUIsR0FBckIscUJBQXFCLENBQXVCO1FBTnpELFdBQU0sR0FBRyxLQUFLLENBQUM7SUFTdkIsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0gsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxJQUFJLFNBQVMsQ0FBQyxLQUF1QjtRQUNuQyxJQUFJLE9BQU8sS0FBSyxLQUFLLFFBQVEsRUFBRTtZQUM3QixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssS0FBSyxPQUFPLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1NBQ2hEO2FBQU07WUFDTCxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUM7U0FDdkI7SUFDSCxDQUFDO0lBRVEsa0JBQWtCO1FBQ3pCLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRU8sWUFBWTtRQUNsQixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUN0RCxDQUFDOztpSEF4Q1Usb0JBQW9CO3FHQUFwQixvQkFBb0IsaVJBRnBCLENBQUMscUJBQXFCLEVBQUUsZ0JBQWdCLEVBQUUsbUJBQW1CLEVBQUUsa0JBQWtCLENBQUMscURBSzVFLFdBQVcsdUVBckNsQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXlCVDsyRkFTVSxvQkFBb0I7a0JBcENoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSw2Q0FBNkM7b0JBQ3ZELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXlCVDtvQkFDRCxJQUFJLEVBQUU7d0JBQ0osMEJBQTBCLEVBQUUsTUFBTTt3QkFDbEMsbUNBQW1DLEVBQUUsbUJBQW1CO3dCQUN4RCxpQkFBaUIsRUFBRSxXQUFXO3dCQUM5QixhQUFhLEVBQUUsTUFBTTtxQkFDdEI7b0JBQ0QsU0FBUyxFQUFFLENBQUMscUJBQXFCLEVBQUUsZ0JBQWdCLEVBQUUsbUJBQW1CLEVBQUUsa0JBQWtCLENBQUM7aUJBQzlGOzswQkFTSSxRQUFRO2lKQUwwQyxVQUFVO3NCQUE5RCxlQUFlO3VCQUFDLFdBQVcsRUFBRSxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUU7Z0JBb0IvQyxTQUFTO3NCQURaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LTIwMjMgVk13YXJlLCBJbmMuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBJbnB1dCwgT3B0aW9uYWwsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDbHJBYnN0cmFjdENvbnRhaW5lciB9IGZyb20gJy4uL2NvbW1vbi9hYnN0cmFjdC1jb250YWluZXInO1xuaW1wb3J0IHsgSWZDb250cm9sU3RhdGVTZXJ2aWNlIH0gZnJvbSAnLi4vY29tbW9uL2lmLWNvbnRyb2wtc3RhdGUvaWYtY29udHJvbC1zdGF0ZS5zZXJ2aWNlJztcbmltcG9ydCB7IENvbnRhaW5lcklkU2VydmljZSB9IGZyb20gJy4uL2NvbW1vbi9wcm92aWRlcnMvY29udGFpbmVyLWlkLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ29udHJvbENsYXNzU2VydmljZSB9IGZyb20gJy4uL2NvbW1vbi9wcm92aWRlcnMvY29udHJvbC1jbGFzcy5zZXJ2aWNlJztcbmltcG9ydCB7IExheW91dFNlcnZpY2UgfSBmcm9tICcuLi9jb21tb24vcHJvdmlkZXJzL2xheW91dC5zZXJ2aWNlJztcbmltcG9ydCB7IE5nQ29udHJvbFNlcnZpY2UgfSBmcm9tICcuLi9jb21tb24vcHJvdmlkZXJzL25nLWNvbnRyb2wuc2VydmljZSc7XG5pbXBvcnQgeyBDbHJDaGVja2JveCB9IGZyb20gJy4vY2hlY2tib3gnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjbHItY2hlY2tib3gtY29udGFpbmVyLGNsci10b2dnbGUtY29udGFpbmVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJsYWJlbFwiPjwvbmctY29udGVudD5cbiAgICA8bGFiZWwgKm5nSWY9XCIhbGFiZWwgJiYgYWRkR3JpZCgpXCI+PC9sYWJlbD5cbiAgICA8ZGl2IGNsYXNzPVwiY2xyLWNvbnRyb2wtY29udGFpbmVyXCIgW2NsYXNzLmNsci1jb250cm9sLWlubGluZV09XCJjbHJJbmxpbmVcIiBbbmdDbGFzc109XCJjb250cm9sQ2xhc3MoKVwiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiY2xyLWNoZWNrYm94LXdyYXBwZXIsY2xyLXRvZ2dsZS13cmFwcGVyXCI+PC9uZy1jb250ZW50PlxuICAgICAgPGRpdiBjbGFzcz1cImNsci1zdWJ0ZXh0LXdyYXBwZXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiY2xyLWNvbnRyb2wtaGVscGVyXCIgKm5nSWY9XCJzaG93SGVscGVyXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8Y2RzLWljb25cbiAgICAgICAgICAqbmdJZj1cInNob3dJbnZhbGlkXCJcbiAgICAgICAgICBjbGFzcz1cImNsci12YWxpZGF0ZS1pY29uXCJcbiAgICAgICAgICBzaGFwZT1cImV4Y2xhbWF0aW9uLWNpcmNsZVwiXG4gICAgICAgICAgc3RhdHVzPVwiZGFuZ2VyXCJcbiAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICA+PC9jZHMtaWNvbj5cbiAgICAgICAgPGNkcy1pY29uXG4gICAgICAgICAgKm5nSWY9XCJzaG93VmFsaWRcIlxuICAgICAgICAgIGNsYXNzPVwiY2xyLXZhbGlkYXRlLWljb25cIlxuICAgICAgICAgIHNoYXBlPVwiY2hlY2stY2lyY2xlXCJcbiAgICAgICAgICBzdGF0dXM9XCJzdWNjZXNzXCJcbiAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICA+PC9jZHMtaWNvbj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiY2xyLWNvbnRyb2wtZXJyb3JcIiAqbmdJZj1cInNob3dJbnZhbGlkXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJjbHItY29udHJvbC1zdWNjZXNzXCIgKm5nSWY9XCJzaG93VmFsaWRcIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgaG9zdDoge1xuICAgICdbY2xhc3MuY2xyLWZvcm0tY29udHJvbF0nOiAndHJ1ZScsXG4gICAgJ1tjbGFzcy5jbHItZm9ybS1jb250cm9sLWRpc2FibGVkXSc6ICdjb250cm9sPy5kaXNhYmxlZCcsXG4gICAgJ1tjbGFzcy5jbHItcm93XSc6ICdhZGRHcmlkKCknLFxuICAgICdbYXR0ci5yb2xlXSc6ICdyb2xlJyxcbiAgfSxcbiAgcHJvdmlkZXJzOiBbSWZDb250cm9sU3RhdGVTZXJ2aWNlLCBOZ0NvbnRyb2xTZXJ2aWNlLCBDb250cm9sQ2xhc3NTZXJ2aWNlLCBDb250YWluZXJJZFNlcnZpY2VdLFxufSlcbmV4cG9ydCBjbGFzcyBDbHJDaGVja2JveENvbnRhaW5lciBleHRlbmRzIENsckFic3RyYWN0Q29udGFpbmVyIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIHJvbGU6IHN0cmluZztcblxuICBAQ29udGVudENoaWxkcmVuKENsckNoZWNrYm94LCB7IGRlc2NlbmRhbnRzOiB0cnVlIH0pIGNoZWNrYm94ZXM6IFF1ZXJ5TGlzdDxDbHJDaGVja2JveD47XG5cbiAgcHJpdmF0ZSBpbmxpbmUgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBAT3B0aW9uYWwoKSBwcm90ZWN0ZWQgb3ZlcnJpZGUgbGF5b3V0U2VydmljZTogTGF5b3V0U2VydmljZSxcbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgY29udHJvbENsYXNzU2VydmljZTogQ29udHJvbENsYXNzU2VydmljZSxcbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgbmdDb250cm9sU2VydmljZTogTmdDb250cm9sU2VydmljZSxcbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgaWZDb250cm9sU3RhdGVTZXJ2aWNlOiBJZkNvbnRyb2xTdGF0ZVNlcnZpY2VcbiAgKSB7XG4gICAgc3VwZXIoaWZDb250cm9sU3RhdGVTZXJ2aWNlLCBsYXlvdXRTZXJ2aWNlLCBjb250cm9sQ2xhc3NTZXJ2aWNlLCBuZ0NvbnRyb2xTZXJ2aWNlKTtcbiAgfVxuXG4gIC8qXG4gICAqIEhlcmUgd2Ugd2FudCB0byBzdXBwb3J0IHRoZSBmb2xsb3dpbmcgY2FzZXNcbiAgICogY2xySW5saW5lIC0gdHJ1ZSBieSBwcmVzZW5jZVxuICAgKiBjbHJJbmxpbmU9XCJ0cnVlfGZhbHNlXCIgLSB1bmxlc3MgaXQgaXMgZXhwbGljaXRseSBmYWxzZSwgc3RyaW5ncyBhcmUgY29uc2lkZXJlZCB0cnVlXG4gICAqIFtjbHJJbmxpbmVdPVwidHJ1ZXxmYWxzZVwiIC0gZXhwZWN0IGEgYm9vbGVhblxuICAgKi9cbiAgQElucHV0KClcbiAgZ2V0IGNscklubGluZSgpIHtcbiAgICByZXR1cm4gdGhpcy5pbmxpbmU7XG4gIH1cbiAgc2V0IGNscklubGluZSh2YWx1ZTogYm9vbGVhbiB8IHN0cmluZykge1xuICAgIGlmICh0eXBlb2YgdmFsdWUgPT09ICdzdHJpbmcnKSB7XG4gICAgICB0aGlzLmlubGluZSA9IHZhbHVlID09PSAnZmFsc2UnID8gZmFsc2UgOiB0cnVlO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmlubGluZSA9ICEhdmFsdWU7XG4gICAgfVxuICB9XG5cbiAgb3ZlcnJpZGUgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIHRoaXMuc2V0QXJpYVJvbGVzKCk7XG4gIH1cblxuICBwcml2YXRlIHNldEFyaWFSb2xlcygpIHtcbiAgICB0aGlzLnJvbGUgPSB0aGlzLmNoZWNrYm94ZXMubGVuZ3RoID8gJ2dyb3VwJyA6IG51bGw7XG4gIH1cbn1cbiJdfQ==