carbon-components-angular
Version:
Next generation components
311 lines (306 loc) • 10.6 kB
JavaScript
import { Checkbox } from 'carbon-components-angular/checkbox';
import * as i0 from '@angular/core';
import { TemplateRef, Component, Input, HostBinding, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from 'carbon-components-angular/i18n';
import { I18nModule } from 'carbon-components-angular/i18n';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
/**
* @deprecated since v5 - Use boolean
* Defines the set of states for a toggle component.
*/
var ToggleState;
(function (ToggleState) {
ToggleState[ToggleState["Init"] = 0] = "Init";
ToggleState[ToggleState["Checked"] = 1] = "Checked";
ToggleState[ToggleState["Unchecked"] = 2] = "Unchecked";
})(ToggleState || (ToggleState = {}));
/**
* @todo - Toggle component will no longer extend `Checkbox` component as of v6
* Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox
* component attributes.
*/
/**
* Get started with importing the module:
*
* ```typescript
* import { ToggleModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-toggle [(ngModel)]="toggleState">Toggle</cds-toggle>
* ```
*
* [See demo](../../?path=/story/components-toggle--basic)
*/
class Toggle extends Checkbox {
/**
* Creates an instance of Toggle.
*/
constructor(changeDetectorRef, i18n) {
super(changeDetectorRef);
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
/**
* Size of the toggle component.
*/
this.size = "md";
/**
* Set to `true` to hide the toggle label & set toggle on/off text to label.
*/
this.hideLabel = false;
this.skeleton = false;
this.toggleClass = true;
/**
* The unique id allocated to the `Toggle`.
*/
this.id = "toggle-" + Toggle.toggleCount;
this._offValues = this.i18n.getOverridable("TOGGLE.OFF");
this._onValues = this.i18n.getOverridable("TOGGLE.ON");
Toggle.toggleCount++;
}
/**
* Text that is set on the left side of the toggle.
*/
set offText(value) {
this._offValues.override(value);
}
get offText() {
return this._offValues.value;
}
/**
* Text that is set on the right side of the toggle.
*/
set onText(value) {
this._onValues.override(value);
}
get onText() {
return this._onValues.value;
}
get disabledClass() {
return this.disabled;
}
get formItem() {
return !this.skeleton;
}
/**
* `ControlValueAccessor` method to programmatically disable the toggle input.
*
* ex: `this.formGroup.get("myToggle").disable();`
*
* @param isDisabled `true` to disable the input
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
getOffText() {
return this._offValues.subject;
}
getOnText() {
return this._onValues.subject;
}
getCheckedText() {
if (this.checked) {
return this._onValues.subject;
}
return this._offValues.subject;
}
/**
* Creates instance of `ToggleChange` used to propagate the change event.
*/
emitChangeEvent() {
this.checkedChange.emit(this.checked);
this.propagateChange(this.checked);
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
/**
* Variable used for creating unique ids for toggle components.
*/
Toggle.toggleCount = 0;
Toggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
Toggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Toggle, selector: "cds-toggle, ibm-toggle", inputs: { offText: "offText", onText: "onText", label: "label", size: "size", hideLabel: "hideLabel", ariaLabel: "ariaLabel", skeleton: "skeleton" }, host: { properties: { "class.cds--toggle--skeleton": "this.skeleton", "class.cds--toggle": "this.toggleClass", "class.cds--toggle--disabled": "this.disabledClass", "class.cds--form-item": "this.formItem" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Toggle,
multi: true
}
], usesInheritance: true, ngImport: i0, template: `
<ng-container *ngIf="!skeleton; else skeletonTemplate;">
<button
class="cds--toggle__button"
[disabled]="disabled"
[id]="id"
role="switch"
type="button"
[attr.aria-checked]="checked"
(click)="onClick($event)"
[attr.aria-label]="ariaLabel">
</button>
<label
class="cds--toggle__label"
[for]="id">
<span
class="cds--toggle__label-text"
[ngClass]="{
'cds--visually-hidden': hideLabel
}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</span>
<div
class="cds--toggle__appearance"
[ngClass]="{
'cds--toggle__appearance--sm': size === 'sm'
}">
<div
class="cds--toggle__switch"
[ngClass]="{
'cds--toggle__switch--checked': checked
}">
<svg
*ngIf="size === 'sm'"
class='cds--toggle__check'
width="6px"
height="5px"
viewBox="0 0 6 5">
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
</svg>
</div>
<span class="cds--toggle__text">
{{(hideLabel ? label : (getCheckedText() | async))}}
</span>
</div>
</label>
</ng-container>
<ng-template #skeletonTemplate>
<div class="cds--toggle__skeleton-circle"></div>
<div class="cds--toggle__skeleton-rectangle"></div>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggle, decorators: [{
type: Component,
args: [{
selector: "cds-toggle, ibm-toggle",
template: `
<ng-container *ngIf="!skeleton; else skeletonTemplate;">
<button
class="cds--toggle__button"
[disabled]="disabled"
[id]="id"
role="switch"
type="button"
[attr.aria-checked]="checked"
(click)="onClick($event)"
[attr.aria-label]="ariaLabel">
</button>
<label
class="cds--toggle__label"
[for]="id">
<span
class="cds--toggle__label-text"
[ngClass]="{
'cds--visually-hidden': hideLabel
}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</span>
<div
class="cds--toggle__appearance"
[ngClass]="{
'cds--toggle__appearance--sm': size === 'sm'
}">
<div
class="cds--toggle__switch"
[ngClass]="{
'cds--toggle__switch--checked': checked
}">
<svg
*ngIf="size === 'sm'"
class='cds--toggle__check'
width="6px"
height="5px"
viewBox="0 0 6 5">
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
</svg>
</div>
<span class="cds--toggle__text">
{{(hideLabel ? label : (getCheckedText() | async))}}
</span>
</div>
</label>
</ng-container>
<ng-template #skeletonTemplate>
<div class="cds--toggle__skeleton-circle"></div>
<div class="cds--toggle__skeleton-rectangle"></div>
</ng-template>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Toggle,
multi: true
}
]
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.I18n }]; }, propDecorators: { offText: [{
type: Input
}], onText: [{
type: Input
}], label: [{
type: Input
}], size: [{
type: Input
}], hideLabel: [{
type: Input
}], ariaLabel: [{
type: Input
}], skeleton: [{
type: HostBinding,
args: ["class.cds--toggle--skeleton"]
}, {
type: Input
}], toggleClass: [{
type: HostBinding,
args: ["class.cds--toggle"]
}], disabledClass: [{
type: HostBinding,
args: ["class.cds--toggle--disabled"]
}], formItem: [{
type: HostBinding,
args: ["class.cds--form-item"]
}] } });
// modules
class ToggleModule {
}
ToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ToggleModule, declarations: [Toggle], imports: [CommonModule,
FormsModule,
I18nModule], exports: [Toggle] });
ToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleModule, imports: [CommonModule,
FormsModule,
I18nModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Toggle
],
exports: [
Toggle
],
imports: [
CommonModule,
FormsModule,
I18nModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Toggle, ToggleModule, ToggleState };
//# sourceMappingURL=carbon-components-angular-toggle.mjs.map