carbon-components-angular
Version:
Next generation components
82 lines • 6.09 kB
JavaScript
import { Component, Input, HostBinding } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "@angular/common";
/**
* Get started with importing the module:
*
* ```typescript
* import { LoadingModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-loading--basic)
*/
export class Loading {
constructor(i18n) {
this.i18n = i18n;
/**
* Accessible title for the loading circle.
* Defaults to the `LOADING.TITLE` value from the i18n service.
*/
this.title = this.i18n.get().LOADING.TITLE;
/**
* set to `false` to stop the loading animation
*/
this.isActive = true;
/**
* Specify the size of the button
*/
this.size = "normal";
/**
* Set to `true` to make loader with an overlay.
*/
this.overlay = false;
}
}
Loading.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Loading, deps: [{ token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
Loading.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Loading, selector: "cds-loading, ibm-loading", inputs: { title: "title", isActive: "isActive", size: "size", overlay: "overlay" }, host: { properties: { "class.cds--loading-overlay": "this.overlay" } }, ngImport: i0, template: `
<div
[ngClass]="{
'cds--loading--small': size === 'sm',
'cds--loading--stop': !isActive && !overlay,
'cds--loading-overlay--stop': !isActive && overlay
}"
class="cds--loading">
<svg class="cds--loading__svg" viewBox="0 0 100 100">
<title>{{title}}</title>
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />
</svg>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Loading, decorators: [{
type: Component,
args: [{
selector: "cds-loading, ibm-loading",
template: `
<div
[ngClass]="{
'cds--loading--small': size === 'sm',
'cds--loading--stop': !isActive && !overlay,
'cds--loading-overlay--stop': !isActive && overlay
}"
class="cds--loading">
<svg class="cds--loading__svg" viewBox="0 0 100 100">
<title>{{title}}</title>
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />
</svg>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }]; }, propDecorators: { title: [{
type: Input
}], isActive: [{
type: Input
}], size: [{
type: Input
}], overlay: [{
type: Input
}, {
type: HostBinding,
args: ["class.cds--loading-overlay"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbG9hZGluZy9sb2FkaW5nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFHOUQ7Ozs7Ozs7O0dBUUc7QUFrQkgsTUFBTSxPQUFPLE9BQU87SUFzQm5CLFlBQXNCLElBQVU7UUFBVixTQUFJLEdBQUosSUFBSSxDQUFNO1FBckJoQzs7O1dBR0c7UUFDTSxVQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDO1FBRS9DOztXQUVHO1FBQ00sYUFBUSxHQUFHLElBQUksQ0FBQztRQUV6Qjs7V0FFRztRQUNNLFNBQUksR0FBb0IsUUFBUSxDQUFDO1FBRTFDOztXQUVHO1FBQ2lELFlBQU8sR0FBRyxLQUFLLENBQUM7SUFFakMsQ0FBQzs7b0dBdEJ4QixPQUFPO3dGQUFQLE9BQU8sNE5BZlQ7Ozs7Ozs7Ozs7Ozs7RUFhVDsyRkFFVyxPQUFPO2tCQWpCbkIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsMEJBQTBCO29CQUNwQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7RUFhVDtpQkFDRDsyRkFNUyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSzhDLE9BQU87c0JBQTFELEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsNEJBQTRCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdEJpbmRpbmcgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgSTE4biB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2kxOG5cIjtcblxuLyoqXG4gKiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IExvYWRpbmdNb2R1bGUgfSBmcm9tICdjYXJib24tY29tcG9uZW50cy1hbmd1bGFyJztcbiAqIGBgYFxuICpcbiAqIFtTZWUgZGVtb10oLi4vLi4vP3BhdGg9L3N0b3J5L2NvbXBvbmVudHMtbG9hZGluZy0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtbG9hZGluZywgaWJtLWxvYWRpbmdcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8ZGl2XG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdCdjZHMtLWxvYWRpbmctLXNtYWxsJzogc2l6ZSA9PT0gJ3NtJyxcblx0XHRcdFx0J2Nkcy0tbG9hZGluZy0tc3RvcCc6ICFpc0FjdGl2ZSAmJiAhb3ZlcmxheSxcblx0XHRcdFx0J2Nkcy0tbG9hZGluZy1vdmVybGF5LS1zdG9wJzogIWlzQWN0aXZlICYmIG92ZXJsYXlcblx0XHRcdH1cIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLWxvYWRpbmdcIj5cblx0XHRcdDxzdmcgY2xhc3M9XCJjZHMtLWxvYWRpbmdfX3N2Z1wiIHZpZXdCb3g9XCIwIDAgMTAwIDEwMFwiPlxuXHRcdFx0XHQ8dGl0bGU+e3t0aXRsZX19PC90aXRsZT5cblx0XHRcdFx0PGNpcmNsZSBjbGFzcz1cImNkcy0tbG9hZGluZ19fc3Ryb2tlXCIgY3g9XCI1MCVcIiBjeT1cIjUwJVwiIHI9XCI0NFwiIC8+XG5cdFx0XHQ8L3N2Zz5cblx0XHQ8L2Rpdj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBMb2FkaW5nIHtcblx0LyoqXG5cdCAqIEFjY2Vzc2libGUgdGl0bGUgZm9yIHRoZSBsb2FkaW5nIGNpcmNsZS5cblx0ICogRGVmYXVsdHMgdG8gdGhlIGBMT0FESU5HLlRJVExFYCB2YWx1ZSBmcm9tIHRoZSBpMThuIHNlcnZpY2UuXG5cdCAqL1xuXHRASW5wdXQoKSB0aXRsZSA9IHRoaXMuaTE4bi5nZXQoKS5MT0FESU5HLlRJVExFO1xuXG5cdC8qKlxuXHQgKiBzZXQgdG8gYGZhbHNlYCB0byBzdG9wIHRoZSBsb2FkaW5nIGFuaW1hdGlvblxuXHQgKi9cblx0QElucHV0KCkgaXNBY3RpdmUgPSB0cnVlO1xuXG5cdC8qKlxuXHQgKiBTcGVjaWZ5IHRoZSBzaXplIG9mIHRoZSBidXR0b25cblx0ICovXG5cdEBJbnB1dCgpIHNpemU6IFwibm9ybWFsXCIgfCBcInNtXCIgPSBcIm5vcm1hbFwiO1xuXG5cdC8qKlxuXHQgKiBTZXQgdG8gYHRydWVgIHRvIG1ha2UgbG9hZGVyIHdpdGggYW4gb3ZlcmxheS5cblx0ICovXG5cdEBJbnB1dCgpIEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbG9hZGluZy1vdmVybGF5XCIpIG92ZXJsYXkgPSBmYWxzZTtcblxuXHRjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgaTE4bjogSTE4bikge31cbn1cbiJdfQ==