@ng-matero/extensions
Version:
Angular Material Extensions
43 lines • 10.2 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, booleanAttribute, } from '@angular/core';
import * as i0 from "@angular/core";
export class MtxProgress {
constructor() {
/** The progress's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
this.type = 'default';
/** The value of the progress. */
this.value = 0;
/** Whether to apply the striped class. */
this.striped = false;
/** Whether to apply the animated class. */
this.animate = false;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: MtxProgress, isStandalone: true, selector: "mtx-progress", inputs: { type: "type", value: "value", height: "height", color: "color", foreground: "foreground", background: "background", striped: ["striped", "striped", booleanAttribute], animate: ["animate", "animate", booleanAttribute] }, host: { properties: { "style.height": "height", "style.backgroundColor": "background" }, classAttribute: "mtx-progress" }, exportAs: ["mtxProgress"], ngImport: i0, template: "<div class=\"mtx-progress-fill\"\n [class]=\"'mtx-progress-fill-' + type\"\n [class.mtx-progress-fill-striped]=\"striped\"\n [class.mtx-progress-fill-animated]=\"animate\"\n [style.width.%]=\"value\"\n [style.background-color]=\"foreground\"\n [style.color]=\"color\"\n role=\"progress-fill\">\n <ng-content></ng-content>\n</div>\n", styles: [".mtx-progress{display:flex;height:16px;margin:8px 0;overflow:hidden;font-size:var(--mtx-progress-text-size, var(--mat-app-label-medium-size));border-radius:var(--mtx-progress-container-shape, var(--mat-app-corner-extra-small));background-color:var(--mtx-progress-track-color, var(--mat-app-surface-container))}.mtx-progress-fill{display:flex;flex-direction:column;justify-content:center;text-align:center;transition:width .6s ease;background-color:var(--mtx-progress-indicator-color, var(--mat-app-outline-variant));color:var(--mtx-progress-text-color, var(--mat-app-on-surface))}.mtx-progress-fill-info{background-color:var(--mtx-progress-info-indicator-color);color:var(--mtx-progress-info-text-color)}.mtx-progress-fill-success{background-color:var(--mtx-progress-success-indicator-color);color:var(--mtx-progress-success-text-color)}.mtx-progress-fill-warning{background-color:var(--mtx-progress-warning-indicator-color);color:var(--mtx-progress-warning-text-color)}.mtx-progress-fill-danger{background-color:var(--mtx-progress-danger-indicator-color);color:var(--mtx-progress-danger-text-color)}.mtx-progress-fill-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:16px 16px}.mtx-progress-fill-animated{animation:mtx-progress-fill-stripes 1s linear infinite}@media (prefers-reduced-motion: reduce){.mtx-progress-fill-animated{animation:none}}@keyframes mtx-progress-fill-stripes{0%{background-position:16px 0}to{background-position:0 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxProgress, decorators: [{
type: Component,
args: [{ selector: 'mtx-progress', exportAs: 'mtxProgress', host: {
'class': 'mtx-progress',
'[style.height]': 'height',
'[style.backgroundColor]': 'background',
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"mtx-progress-fill\"\n [class]=\"'mtx-progress-fill-' + type\"\n [class.mtx-progress-fill-striped]=\"striped\"\n [class.mtx-progress-fill-animated]=\"animate\"\n [style.width.%]=\"value\"\n [style.background-color]=\"foreground\"\n [style.color]=\"color\"\n role=\"progress-fill\">\n <ng-content></ng-content>\n</div>\n", styles: [".mtx-progress{display:flex;height:16px;margin:8px 0;overflow:hidden;font-size:var(--mtx-progress-text-size, var(--mat-app-label-medium-size));border-radius:var(--mtx-progress-container-shape, var(--mat-app-corner-extra-small));background-color:var(--mtx-progress-track-color, var(--mat-app-surface-container))}.mtx-progress-fill{display:flex;flex-direction:column;justify-content:center;text-align:center;transition:width .6s ease;background-color:var(--mtx-progress-indicator-color, var(--mat-app-outline-variant));color:var(--mtx-progress-text-color, var(--mat-app-on-surface))}.mtx-progress-fill-info{background-color:var(--mtx-progress-info-indicator-color);color:var(--mtx-progress-info-text-color)}.mtx-progress-fill-success{background-color:var(--mtx-progress-success-indicator-color);color:var(--mtx-progress-success-text-color)}.mtx-progress-fill-warning{background-color:var(--mtx-progress-warning-indicator-color);color:var(--mtx-progress-warning-text-color)}.mtx-progress-fill-danger{background-color:var(--mtx-progress-danger-indicator-color);color:var(--mtx-progress-danger-text-color)}.mtx-progress-fill-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:16px 16px}.mtx-progress-fill-animated{animation:mtx-progress-fill-stripes 1s linear infinite}@media (prefers-reduced-motion: reduce){.mtx-progress-fill-animated{animation:none}}@keyframes mtx-progress-fill-stripes{0%{background-position:16px 0}to{background-position:0 0}}\n"] }]
}], propDecorators: { type: [{
type: Input
}], value: [{
type: Input
}], height: [{
type: Input
}], color: [{
type: Input
}], foreground: [{
type: Input
}], background: [{
type: Input
}], striped: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], animate: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9leHRlbnNpb25zL3Byb2dyZXNzL3Byb2dyZXNzLnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9wcm9ncmVzcy9wcm9ncmVzcy5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULEtBQUssRUFDTCxpQkFBaUIsRUFDakIsZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDOztBQWtCdkIsTUFBTSxPQUFPLFdBQVc7SUFkeEI7UUFlRSx1RkFBdUY7UUFDOUUsU0FBSSxHQUFvQixTQUFTLENBQUM7UUFFM0MsaUNBQWlDO1FBQ3hCLFVBQUssR0FBRyxDQUFDLENBQUM7UUFjbkIsMENBQTBDO1FBQ0YsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUV4RCwyQ0FBMkM7UUFDSCxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBQ3pEO2lJQXhCWSxXQUFXO3FIQUFYLFdBQVcsOE1Bb0JGLGdCQUFnQixtQ0FHaEIsZ0JBQWdCLG1MQy9DdEMsMFdBVUE7OzJGRGNhLFdBQVc7a0JBZHZCLFNBQVM7K0JBQ0UsY0FBYyxZQUNkLGFBQWEsUUFDakI7d0JBQ0osT0FBTyxFQUFFLGNBQWM7d0JBQ3ZCLGdCQUFnQixFQUFFLFFBQVE7d0JBQzFCLHlCQUF5QixFQUFFLFlBQVk7cUJBQ3hDLGlCQUdjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSTs4QkFJUCxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdHLE1BQU07c0JBQWQsS0FBSztnQkFHRyxLQUFLO3NCQUFiLEtBQUs7Z0JBR0csVUFBVTtzQkFBbEIsS0FBSztnQkFHRyxVQUFVO3NCQUFsQixLQUFLO2dCQUdrQyxPQUFPO3NCQUE5QyxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUdFLE9BQU87c0JBQTlDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgdHlwZSBNdHhQcm9ncmVzc1R5cGUgPSAnZGVmYXVsdCcgfCAnaW5mbycgfCAnc3VjY2VzcycgfCAnd2FybmluZycgfCAnZGFuZ2VyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXR4LXByb2dyZXNzJyxcbiAgZXhwb3J0QXM6ICdtdHhQcm9ncmVzcycsXG4gIGhvc3Q6IHtcbiAgICAnY2xhc3MnOiAnbXR4LXByb2dyZXNzJyxcbiAgICAnW3N0eWxlLmhlaWdodF0nOiAnaGVpZ2h0JyxcbiAgICAnW3N0eWxlLmJhY2tncm91bmRDb2xvcl0nOiAnYmFja2dyb3VuZCcsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3Byb2dyZXNzLnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgTXR4UHJvZ3Jlc3Mge1xuICAvKiogVGhlIHByb2dyZXNzJ3MgdHlwZS4gQ2FuIGJlIGBkZWZhdWx0YCwgYGluZm9gLCBgc3VjY2Vzc2AsIGB3YXJuaW5nYCBvciBgZGFuZ2VyYC4gKi9cbiAgQElucHV0KCkgdHlwZTogTXR4UHJvZ3Jlc3NUeXBlID0gJ2RlZmF1bHQnO1xuXG4gIC8qKiBUaGUgdmFsdWUgb2YgdGhlIHByb2dyZXNzLiAqL1xuICBASW5wdXQoKSB2YWx1ZSA9IDA7XG5cbiAgLyoqIFRoZSBoZWlnaHQgb2YgdGhlIHByb2dyZXNzLiAqL1xuICBASW5wdXQoKSBoZWlnaHQhOiBzdHJpbmc7XG5cbiAgLyoqIFRoZSB0ZXh0IGNvbG9yIG9mIHRoZSBwcm9ncmVzcy4gKi9cbiAgQElucHV0KCkgY29sb3IhOiBzdHJpbmc7XG5cbiAgLyoqIFRoZSBiYXIgY29sb3Igb2YgdGhlIHByb2dyZXNzLiAqL1xuICBASW5wdXQoKSBmb3JlZ3JvdW5kITogc3RyaW5nO1xuXG4gIC8qKiBUaGUgdHJhY2sgY29sb3Igb2YgdGhlIHByb2dyZXNzLiAqL1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kITogc3RyaW5nO1xuXG4gIC8qKiBXaGV0aGVyIHRvIGFwcGx5IHRoZSBzdHJpcGVkIGNsYXNzLiAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgc3RyaXBlZCA9IGZhbHNlO1xuXG4gIC8qKiBXaGV0aGVyIHRvIGFwcGx5IHRoZSBhbmltYXRlZCBjbGFzcy4gKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGFuaW1hdGUgPSBmYWxzZTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJtdHgtcHJvZ3Jlc3MtZmlsbFwiXG4gICAgIFtjbGFzc109XCInbXR4LXByb2dyZXNzLWZpbGwtJyArIHR5cGVcIlxuICAgICBbY2xhc3MubXR4LXByb2dyZXNzLWZpbGwtc3RyaXBlZF09XCJzdHJpcGVkXCJcbiAgICAgW2NsYXNzLm10eC1wcm9ncmVzcy1maWxsLWFuaW1hdGVkXT1cImFuaW1hdGVcIlxuICAgICBbc3R5bGUud2lkdGguJV09XCJ2YWx1ZVwiXG4gICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImZvcmVncm91bmRcIlxuICAgICBbc3R5bGUuY29sb3JdPVwiY29sb3JcIlxuICAgICByb2xlPVwicHJvZ3Jlc3MtZmlsbFwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==