carbon-components-angular
Version:
Next generation components
187 lines (182 loc) • 8.17 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
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)
*/
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"]
}] } });
class InlineLoadingModule {
}
InlineLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InlineLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
InlineLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: InlineLoadingModule, declarations: [InlineLoading], imports: [CommonModule, IconModule], exports: [InlineLoading] });
InlineLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InlineLoadingModule, imports: [CommonModule, IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InlineLoadingModule, decorators: [{
type: NgModule,
args: [{
declarations: [InlineLoading],
exports: [InlineLoading],
imports: [CommonModule, IconModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { InlineLoading, InlineLoadingModule, InlineLoadingState };
//# sourceMappingURL=carbon-components-angular-inline-loading.mjs.map