carbon-components-angular
Version:
Next generation components
121 lines (118 loc) • 4.63 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | toggle.component.js
*
* Copyright 2014, 2018 IBM
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { Checkbox } from "../checkbox/checkbox.component";
import { ChangeDetectorRef, Component, Input } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
/**
* Defines the set of states for a toggle component.
* @export
* @enum {number}
*/
export var ToggleState;
(function (ToggleState) {
ToggleState[ToggleState["Init"] = 0] = "Init";
ToggleState[ToggleState["Indeterminate"] = 1] = "Indeterminate";
ToggleState[ToggleState["Checked"] = 2] = "Checked";
ToggleState[ToggleState["Unchecked"] = 3] = "Unchecked";
})(ToggleState || (ToggleState = {}));
/**
* Used to emit changes performed on toggle components.
* @export
* @class ToggleChange
*/
var ToggleChange = /** @class */ (function () {
function ToggleChange() {
}
return ToggleChange;
}());
export { ToggleChange };
/**
* ```html
* <ibm-toggle [(ngModel)]="toggleState">Toggle</ibm-toggle>
* ```
* @export
* @class Toggle
* @extends {Checkbox}
* @implements {OnInit}
*/
var Toggle = /** @class */ (function (_super) {
__extends(Toggle, _super);
/**
* Creates an instance of Toggle.
* @param {ChangeDetectorRef} changeDetectorRef
* @memberof Toggle
*/
function Toggle(changeDetectorRef) {
var _this = _super.call(this, changeDetectorRef) || this;
_this.changeDetectorRef = changeDetectorRef;
/**
* Size of the toggle component.
* @type {("sm" | "md" | "default")}
* @memberof Toggle
*/
_this.size = "md";
/**
* The unique id allocated to the `Toggle`.
* @type {string}
* @memberof Toggle
*/
_this.id = "toggle-" + Toggle.toggleCount;
Toggle.toggleCount++;
return _this;
}
/**
* Variable used for creating unique ids for toggle components.
* @type {number}
* @static
* @memberof Toggle
*/
Toggle.toggleCount = 0;
Toggle.decorators = [
{ type: Component, args: [{
selector: "ibm-toggle",
template: "\n\t\t<input\n\t\t\tclass=\"bx--toggle\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--toggle--small': size === 'sm'\n\t\t\t}\"\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"checkbox\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.aria-checked]=\"checked\">\n\t\t<label *ngIf=\"size === 'md'\" class=\"bx--toggle__label\" [for]=\"id\">\n\t\t\t<span class=\"bx--toggle__text--left\">Off</span>\n\t\t\t<span class=\"bx--toggle__appearance\"></span>\n\t\t\t<span class=\"bx--toggle__text--right\">On</span>\n\t\t</label>\n\t\t<label *ngIf=\"size === 'sm'\" class=\"bx--toggle__label\" [for]=\"id\">\n\t\t\t<span class=\"bx--toggle__appearance\">\n\t\t\t\t<svg class=\"bx--toggle__check\" width=\"6px\" height=\"5px\" viewBox=\"0 0 6 5\">\n\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\"/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</label>\n\t",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Toggle,
multi: true
}
]
},] },
];
/** @nocollapse */
Toggle.ctorParameters = function () { return [
{ type: ChangeDetectorRef }
]; };
Toggle.propDecorators = {
size: [{ type: Input }]
};
return Toggle;
}(Checkbox));
export { Toggle };
//# sourceMappingURL=toggle.component.js.map