carbon-components-angular
Version:
Next generation components
163 lines • 14.6 kB
JavaScript
import { Component, Input, Output, EventEmitter, HostBinding } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "carbon-components-angular/icon";
export var InlineLoadingState;
(function (InlineLoadingState) {
/** It hides the whole component. */
InlineLoadingState["Hidden"] = "hidden";
/** It shows the `loadingText` but no loading animation. */
InlineLoadingState["Inactive"] = "inactive";
/** It shows the `loadingText` with loading animation. */
InlineLoadingState["Active"] = "active";
/** It shows the `successText` with a success state. */
InlineLoadingState["Finished"] = "finished";
/** It shows the `errorText` with an error state. */
InlineLoadingState["Error"] = "error";
})(InlineLoadingState || (InlineLoadingState = {}));
/**
* Get started with importing the module:
*
* ```typescript
* import { InlineLoadingModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-inline-loading--basic)
*/
export class InlineLoading {
constructor() {
this.InlineLoadingState = InlineLoadingState;
/**
* Specify the text description for the loading state.
*/
this.state = InlineLoadingState.Active;
/**
* Provide a delay for the `setTimeout` for success.
*/
this.successDelay = 1500;
/**
* Emits event after the success state is active
*/
this.onSuccess = new EventEmitter();
this.loadingClass = true;
}
/**
* set to `false` to stop the loading animation
*/
get isActive() {
return this.state === InlineLoadingState.Active;
}
set isActive(active) {
this.state = active ? InlineLoadingState.Active : InlineLoadingState.Inactive;
}
/**
* Returns value `true` if the component is in the success state.
*/
get success() {
return this.state === InlineLoadingState.Finished;
}
/**
* Set the component's state to match the parameter and emits onSuccess if it exits.
*/
set success(success) {
this.state = success ? InlineLoadingState.Finished : InlineLoadingState.Error;
if (this.state === InlineLoadingState.Finished) {
setTimeout(() => {
this.onSuccess.emit();
}, this.successDelay);
}
}
}
InlineLoading.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InlineLoading, deps: [], target: i0.ɵɵFactoryTarget.Component });
InlineLoading.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InlineLoading, selector: "cds-inline-loading, ibm-inline-loading", inputs: { state: "state", loadingText: "loadingText", successText: "successText", successDelay: "successDelay", errorText: "errorText", isActive: "isActive", success: "success" }, outputs: { onSuccess: "onSuccess" }, host: { properties: { "class.cds--inline-loading": "this.loadingClass" } }, ngImport: i0, template: `
<div *ngIf="state !== InlineLoadingState.Hidden"
class="cds--inline-loading__animation">
<div
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--loading cds--loading--small"
[ngClass]="{
'cds--loading--stop': state === InlineLoadingState.Inactive
}">
<svg class="cds--loading__svg" viewBox="0 0 100 100">
<circle class="cds--loading__background" cx="50%" cy="50%" r="44" />
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />
</svg>
</div>
<svg
*ngIf="state === InlineLoadingState.Finished"
cdsIcon="checkmark--filled"
size="16"
class="cds--inline-loading__checkmark-container">
</svg>
<svg
*ngIf="state === InlineLoadingState.Error"
cdsIcon="error--filled"
size="16"
class="cds--inline-loading--error">
</svg>
</div>
<p
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--inline-loading__text">{{loadingText}}</p>
<p *ngIf="state === InlineLoadingState.Finished" class="cds--inline-loading__text">{{successText}}</p>
<p *ngIf="state === InlineLoadingState.Error" class="cds--inline-loading__text">{{errorText}}</p>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InlineLoading, decorators: [{
type: Component,
args: [{
selector: "cds-inline-loading, ibm-inline-loading",
template: `
<div *ngIf="state !== InlineLoadingState.Hidden"
class="cds--inline-loading__animation">
<div
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--loading cds--loading--small"
[ngClass]="{
'cds--loading--stop': state === InlineLoadingState.Inactive
}">
<svg class="cds--loading__svg" viewBox="0 0 100 100">
<circle class="cds--loading__background" cx="50%" cy="50%" r="44" />
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />
</svg>
</div>
<svg
*ngIf="state === InlineLoadingState.Finished"
cdsIcon="checkmark--filled"
size="16"
class="cds--inline-loading__checkmark-container">
</svg>
<svg
*ngIf="state === InlineLoadingState.Error"
cdsIcon="error--filled"
size="16"
class="cds--inline-loading--error">
</svg>
</div>
<p
*ngIf="state === InlineLoadingState.Inactive || state === InlineLoadingState.Active"
class="cds--inline-loading__text">{{loadingText}}</p>
<p *ngIf="state === InlineLoadingState.Finished" class="cds--inline-loading__text">{{successText}}</p>
<p *ngIf="state === InlineLoadingState.Error" class="cds--inline-loading__text">{{errorText}}</p>
`
}]
}], propDecorators: { state: [{
type: Input
}], loadingText: [{
type: Input
}], successText: [{
type: Input
}], successDelay: [{
type: Input
}], errorText: [{
type: Input
}], isActive: [{
type: Input
}], success: [{
type: Input
}], onSuccess: [{
type: Output
}], loadingClass: [{
type: HostBinding,
args: ["class.cds--inline-loading"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lLWxvYWRpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2lubGluZS1sb2FkaW5nL2lubGluZS1sb2FkaW5nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFdBQVcsRUFDWCxNQUFNLGVBQWUsQ0FBQzs7OztBQUV2QixNQUFNLENBQU4sSUFBWSxrQkFXWDtBQVhELFdBQVksa0JBQWtCO0lBQzdCLG9DQUFvQztJQUNwQyx1Q0FBaUIsQ0FBQTtJQUNqQiwyREFBMkQ7SUFDM0QsMkNBQXFCLENBQUE7SUFDckIseURBQXlEO0lBQ3pELHVDQUFpQixDQUFBO0lBQ2pCLHVEQUF1RDtJQUN2RCwyQ0FBcUIsQ0FBQTtJQUNyQixvREFBb0Q7SUFDcEQscUNBQWUsQ0FBQTtBQUNoQixDQUFDLEVBWFcsa0JBQWtCLEtBQWxCLGtCQUFrQixRQVc3QjtBQUVEOzs7Ozs7OztHQVFHO0FBcUNILE1BQU0sT0FBTyxhQUFhO0lBcEMxQjtRQXFDQyx1QkFBa0IsR0FBRyxrQkFBa0IsQ0FBQztRQUV4Qzs7V0FFRztRQUNNLFVBQUssR0FBZ0Msa0JBQWtCLENBQUMsTUFBTSxDQUFDO1FBU3hFOztXQUVHO1FBQ00saUJBQVksR0FBRyxJQUFJLENBQUM7UUFpQzdCOztXQUVHO1FBQ08sY0FBUyxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRWxCLGlCQUFZLEdBQUcsSUFBSSxDQUFDO0tBQzlEO0lBbENBOztPQUVHO0lBQ0gsSUFBYSxRQUFRO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxrQkFBa0IsQ0FBQyxNQUFNLENBQUM7SUFDakQsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLE1BQWU7UUFDM0IsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsa0JBQWtCLENBQUMsUUFBUSxDQUFDO0lBQy9FLENBQUM7SUFFRDs7T0FFRztJQUNILElBQWEsT0FBTztRQUNuQixPQUFPLElBQUksQ0FBQyxLQUFLLEtBQUssa0JBQWtCLENBQUMsUUFBUSxDQUFDO0lBQ25ELENBQUM7SUFDRDs7T0FFRztJQUNILElBQUksT0FBTyxDQUFDLE9BQWdCO1FBQzNCLElBQUksQ0FBQyxLQUFLLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxrQkFBa0IsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLGtCQUFrQixDQUFDLEtBQUssQ0FBQztRQUM5RSxJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssa0JBQWtCLENBQUMsUUFBUSxFQUFFO1lBQy9DLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2YsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUN2QixDQUFDLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ3RCO0lBQ0YsQ0FBQzs7MEdBakRXLGFBQWE7OEZBQWIsYUFBYSxtWEFsQ2Y7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBZ0NUOzJGQUVXLGFBQWE7a0JBcEN6QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSx3Q0FBd0M7b0JBQ2xELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFnQ1Q7aUJBQ0Q7OEJBT1MsS0FBSztzQkFBYixLQUFLO2dCQUlHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBSUcsV0FBVztzQkFBbkIsS0FBSztnQkFJRyxZQUFZO3NCQUFwQixLQUFLO2dCQUlHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBSU8sUUFBUTtzQkFBcEIsS0FBSztnQkFVTyxPQUFPO3NCQUFuQixLQUFLO2dCQWtCSSxTQUFTO3NCQUFsQixNQUFNO2dCQUVtQyxZQUFZO3NCQUFyRCxXQUFXO3VCQUFDLDJCQUEyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SW5wdXQsXG5cdE91dHB1dCxcblx0RXZlbnRFbWl0dGVyLFxuXHRIb3N0QmluZGluZ1xufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5leHBvcnQgZW51bSBJbmxpbmVMb2FkaW5nU3RhdGUge1xuXHQvKiogSXQgaGlkZXMgdGhlIHdob2xlIGNvbXBvbmVudC4gKi9cblx0SGlkZGVuID0gXCJoaWRkZW5cIixcblx0LyoqIEl0IHNob3dzIHRoZSBgbG9hZGluZ1RleHRgIGJ1dCBubyBsb2FkaW5nIGFuaW1hdGlvbi4gKi9cblx0SW5hY3RpdmUgPSBcImluYWN0aXZlXCIsXG5cdC8qKiBJdCBzaG93cyB0aGUgYGxvYWRpbmdUZXh0YCB3aXRoIGxvYWRpbmcgYW5pbWF0aW9uLiAqL1xuXHRBY3RpdmUgPSBcImFjdGl2ZVwiLFxuXHQvKiogSXQgc2hvd3MgdGhlIGBzdWNjZXNzVGV4dGAgd2l0aCBhIHN1Y2Nlc3Mgc3RhdGUuICovXG5cdEZpbmlzaGVkID0gXCJmaW5pc2hlZFwiLFxuXHQvKiogSXQgc2hvd3MgdGhlIGBlcnJvclRleHRgIHdpdGggYW4gZXJyb3Igc3RhdGUuICovXG5cdEVycm9yID0gXCJlcnJvclwiXG59XG5cbi8qKlxuICogR2V0IHN0YXJ0ZWQgd2l0aCBpbXBvcnRpbmcgdGhlIG1vZHVsZTpcbiAqXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiBpbXBvcnQgeyBJbmxpbmVMb2FkaW5nTW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLWlubGluZS1sb2FkaW5nLS1iYXNpYylcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1pbmxpbmUtbG9hZGluZywgaWJtLWlubGluZS1sb2FkaW5nXCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGRpdiAqbmdJZj1cInN0YXRlICE9PSBJbmxpbmVMb2FkaW5nU3RhdGUuSGlkZGVuXCJcblx0XHRcdGNsYXNzPVwiY2RzLS1pbmxpbmUtbG9hZGluZ19fYW5pbWF0aW9uXCI+XG5cdFx0XHQ8ZGl2XG5cdFx0XHRcdCpuZ0lmPVwic3RhdGUgPT09IElubGluZUxvYWRpbmdTdGF0ZS5JbmFjdGl2ZSB8fCBzdGF0ZSA9PT0gSW5saW5lTG9hZGluZ1N0YXRlLkFjdGl2ZVwiXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1sb2FkaW5nIGNkcy0tbG9hZGluZy0tc21hbGxcIlxuXHRcdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdFx0J2Nkcy0tbG9hZGluZy0tc3RvcCc6IHN0YXRlID09PSBJbmxpbmVMb2FkaW5nU3RhdGUuSW5hY3RpdmVcblx0XHRcdFx0fVwiPlxuXHRcdFx0XHQ8c3ZnIGNsYXNzPVwiY2RzLS1sb2FkaW5nX19zdmdcIiB2aWV3Qm94PVwiMCAwIDEwMCAxMDBcIj5cblx0XHRcdFx0XHQ8Y2lyY2xlIGNsYXNzPVwiY2RzLS1sb2FkaW5nX19iYWNrZ3JvdW5kXCIgY3g9XCI1MCVcIiBjeT1cIjUwJVwiIHI9XCI0NFwiIC8+XG5cdFx0XHRcdFx0PGNpcmNsZSBjbGFzcz1cImNkcy0tbG9hZGluZ19fc3Ryb2tlXCIgY3g9XCI1MCVcIiBjeT1cIjUwJVwiIHI9XCI0NFwiIC8+XG5cdFx0XHRcdDwvc3ZnPlxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8c3ZnXG5cdFx0XHRcdCpuZ0lmPVwic3RhdGUgPT09IElubGluZUxvYWRpbmdTdGF0ZS5GaW5pc2hlZFwiXG5cdFx0XHRcdGNkc0ljb249XCJjaGVja21hcmstLWZpbGxlZFwiXG5cdFx0XHRcdHNpemU9XCIxNlwiXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1pbmxpbmUtbG9hZGluZ19fY2hlY2ttYXJrLWNvbnRhaW5lclwiPlxuXHRcdFx0PC9zdmc+XG5cdFx0XHQ8c3ZnXG5cdFx0XHRcdCpuZ0lmPVwic3RhdGUgPT09IElubGluZUxvYWRpbmdTdGF0ZS5FcnJvclwiXG5cdFx0XHRcdGNkc0ljb249XCJlcnJvci0tZmlsbGVkXCJcblx0XHRcdFx0c2l6ZT1cIjE2XCJcblx0XHRcdFx0Y2xhc3M9XCJjZHMtLWlubGluZS1sb2FkaW5nLS1lcnJvclwiPlxuXHRcdFx0PC9zdmc+XG5cdFx0PC9kaXY+XG5cdFx0PHBcblx0XHRcdCpuZ0lmPVwic3RhdGUgPT09IElubGluZUxvYWRpbmdTdGF0ZS5JbmFjdGl2ZSB8fCBzdGF0ZSA9PT0gSW5saW5lTG9hZGluZ1N0YXRlLkFjdGl2ZVwiXG5cdFx0XHRjbGFzcz1cImNkcy0taW5saW5lLWxvYWRpbmdfX3RleHRcIj57e2xvYWRpbmdUZXh0fX08L3A+XG5cdFx0PHAgKm5nSWY9XCJzdGF0ZSA9PT0gSW5saW5lTG9hZGluZ1N0YXRlLkZpbmlzaGVkXCIgY2xhc3M9XCJjZHMtLWlubGluZS1sb2FkaW5nX190ZXh0XCI+e3tzdWNjZXNzVGV4dH19PC9wPlxuXHRcdDxwICpuZ0lmPVwic3RhdGUgPT09IElubGluZUxvYWRpbmdTdGF0ZS5FcnJvclwiIGNsYXNzPVwiY2RzLS1pbmxpbmUtbG9hZGluZ19fdGV4dFwiPnt7ZXJyb3JUZXh0fX08L3A+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgSW5saW5lTG9hZGluZyB7XG5cdElubGluZUxvYWRpbmdTdGF0ZSA9IElubGluZUxvYWRpbmdTdGF0ZTtcblxuXHQvKipcblx0ICogU3BlY2lmeSB0aGUgdGV4dCBkZXNjcmlwdGlvbiBmb3IgdGhlIGxvYWRpbmcgc3RhdGUuXG5cdCAqL1xuXHRASW5wdXQoKSBzdGF0ZTogSW5saW5lTG9hZGluZ1N0YXRlIHwgc3RyaW5nID0gSW5saW5lTG9hZGluZ1N0YXRlLkFjdGl2ZTtcblx0LyoqXG5cdCAqIFNwZWNpZnkgdGhlIHRleHQgZGVzY3JpcHRpb24gZm9yIHRoZSBsb2FkaW5nIHN0YXRlLlxuXHQgKi9cblx0QElucHV0KCkgbG9hZGluZ1RleHQ6IHN0cmluZztcblx0LyoqXG5cdCAqIFNwZWNpZnkgdGhlIHRleHQgZGVzY3JpcHRpb24gZm9yIHRoZSBzdWNjZXNzIHN0YXRlLlxuXHQgKi9cblx0QElucHV0KCkgc3VjY2Vzc1RleHQ6IHN0cmluZztcblx0LyoqXG5cdCAqIFByb3ZpZGUgYSBkZWxheSBmb3IgdGhlIGBzZXRUaW1lb3V0YCBmb3Igc3VjY2Vzcy5cblx0ICovXG5cdEBJbnB1dCgpIHN1Y2Nlc3NEZWxheSA9IDE1MDA7XG5cdC8qKlxuXHQgKiBTcGVjaWZ5IHRoZSB0ZXh0IGRlc2NyaXB0aW9uIGZvciB0aGUgZXJyb3Igc3RhdGUuXG5cdCAqL1xuXHRASW5wdXQoKSBlcnJvclRleHQ6IHN0cmluZztcblx0LyoqXG5cdCAqIHNldCB0byBgZmFsc2VgIHRvIHN0b3AgdGhlIGxvYWRpbmcgYW5pbWF0aW9uXG5cdCAqL1xuXHRASW5wdXQoKSBnZXQgaXNBY3RpdmUoKSB7XG5cdFx0cmV0dXJuIHRoaXMuc3RhdGUgPT09IElubGluZUxvYWRpbmdTdGF0ZS5BY3RpdmU7XG5cdH1cblx0c2V0IGlzQWN0aXZlKGFjdGl2ZTogYm9vbGVhbikge1xuXHRcdHRoaXMuc3RhdGUgPSBhY3RpdmUgPyBJbmxpbmVMb2FkaW5nU3RhdGUuQWN0aXZlIDogSW5saW5lTG9hZGluZ1N0YXRlLkluYWN0aXZlO1xuXHR9XG5cblx0LyoqXG5cdCAqIFJldHVybnMgdmFsdWUgYHRydWVgIGlmIHRoZSBjb21wb25lbnQgaXMgaW4gdGhlIHN1Y2Nlc3Mgc3RhdGUuXG5cdCAqL1xuXHRASW5wdXQoKSBnZXQgc3VjY2VzcygpIHtcblx0XHRyZXR1cm4gdGhpcy5zdGF0ZSA9PT0gSW5saW5lTG9hZGluZ1N0YXRlLkZpbmlzaGVkO1xuXHR9XG5cdC8qKlxuXHQgKiBTZXQgdGhlIGNvbXBvbmVudCdzIHN0YXRlIHRvIG1hdGNoIHRoZSBwYXJhbWV0ZXIgYW5kIGVtaXRzIG9uU3VjY2VzcyBpZiBpdCBleGl0cy5cblx0ICovXG5cdHNldCBzdWNjZXNzKHN1Y2Nlc3M6IGJvb2xlYW4pIHtcblx0XHR0aGlzLnN0YXRlID0gc3VjY2VzcyA/IElubGluZUxvYWRpbmdTdGF0ZS5GaW5pc2hlZCA6IElubGluZUxvYWRpbmdTdGF0ZS5FcnJvcjtcblx0XHRpZiAodGhpcy5zdGF0ZSA9PT0gSW5saW5lTG9hZGluZ1N0YXRlLkZpbmlzaGVkKSB7XG5cdFx0XHRzZXRUaW1lb3V0KCgpID0+IHtcblx0XHRcdFx0dGhpcy5vblN1Y2Nlc3MuZW1pdCgpO1xuXHRcdFx0fSwgdGhpcy5zdWNjZXNzRGVsYXkpO1xuXHRcdH1cblx0fVxuXG5cdC8qKlxuXHQgKiBFbWl0cyBldmVudCBhZnRlciB0aGUgc3VjY2VzcyBzdGF0ZSBpcyBhY3RpdmVcblx0ICovXG5cdEBPdXRwdXQoKSBvblN1Y2Nlc3M6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0taW5saW5lLWxvYWRpbmdcIikgbG9hZGluZ0NsYXNzID0gdHJ1ZTtcbn1cbiJdfQ==