@aqua-ds/web-components
Version:
AquaDS Web Components
186 lines (179 loc) • 13.8 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
import { L as Label } from './label.js';
import { S as StateStyle } from './StateStyle.js';
import { d as defineCustomElement$5 } from './aq-divider2.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$3 } from './aq-label2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
var DisplayFormat;
(function (DisplayFormat) {
DisplayFormat["NONE"] = "is-none";
DisplayFormat["NUMBERED"] = "is-number";
DisplayFormat["TEXT"] = "is-text";
})(DisplayFormat || (DisplayFormat = {}));
var LabelStatus;
(function (LabelStatus) {
LabelStatus["SUCCESS"] = "Completed";
LabelStatus["ERROR"] = "Fallido";
LabelStatus["PAUSED"] = "Pausado";
})(LabelStatus || (LabelStatus = {}));
const aqProgressBarCss = ":root{--aq-progress-bar-text-color:var(--color-ink-base);--aq-progress-bar-color:var(--color-paper-base)}.aq-progress-bar{font-family:var(--font-family-basic);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}.aq-progress-bar__content{width:100%;padding:var(--spacing-size-minor) var(--spacing-size-minor)var(--spacing-size-small);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}.aq-progress-bar__content__header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;padding:0px;font-size:var(--font-size-xs);line-height:var(--font-line-height-8);color:var(--color-ink-dark)}.aq-progress-bar__content__status{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.aq-progress-bar__content__status em{font-size:var(--font-size-m);margin-right:var(--spacing-size-small)}.aq-progress-bar__content__status--success,.aq-progress-bar__content__status--success em[class^=aq-icon-]::before{color:var(--color-success-base)}.aq-progress-bar__content__status--error,.aq-progress-bar__content__status--error em[class^=aq-icon-]::before{color:var(--color-danger-base)}.aq-progress-bar__content__progress{--custom-progress-color:var(--color-primary-base);height:var(--spacing-size-minor);border-radius:var(--spacing-size-minor);margin-top:var(--spacing-size-minor);width:100%}.aq-progress-bar__content__progress::-moz-progress-bar{background-color:var(--color-primary-base)}.aq-progress-bar__content__progress::-webkit-progress-value{background-color:var(--color-primary-base);border-radius:var(--spacing-size-minor)}.aq-progress-bar__content__progress::-webkit-progress-bar{background:var(--color-paper-light);border-radius:var(--spacing-size-minor)}.aq-progress-bar__content__progress--success{--custom-progress-color:var(--color-success-base)}.aq-progress-bar__content__progress--success::-moz-progress-bar{background-color:var(--color-success-base)}.aq-progress-bar__content__progress--success::-webkit-progress-value{background-color:var(--color-success-base)}.aq-progress-bar__content__progress--error{--custom-progress-color:var(--color-danger-base)}.aq-progress-bar__content__progress--error::-moz-progress-bar{background-color:var(--color-danger-base)}.aq-progress-bar__content__progress--error::-webkit-progress-value{background-color:var(--color-danger-base)}.aq-progress-bar__content__progress--custom{--custom-progress-color:var(--custom-progress-color)}.aq-progress-bar__content__progress--custom::-moz-progress-bar{background-color:var(--custom-progress-color)}.aq-progress-bar__content__progress--custom::-webkit-progress-value{background-color:var(--custom-progress-color)}.aq-progress-bar__content__progress--paused{--custom-progress-color:var(--color-ink-dark)}.aq-progress-bar__content__progress--paused::-moz-progress-bar{background-color:var(--color-ink-dark)}.aq-progress-bar__content__progress--paused::-webkit-progress-value{background-color:var(--color-ink-dark)}.aq-progress-bar__content__label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-size-small)}.aq-progress-bar__content__label__name{color:var(--color-ink-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semi-bold)}.aq-progress-bar__content__label__size{margin-top:var(--spacing-size-small);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:var(--font-size-xs)}.aq-progress-bar__content__label__size__divider{margin:0 var(--spacing-size-minor)}.aq-progress-bar__content__label__size__text{color:var(--color-paper-darker);font-weight:var(--font-weight-semi-bold)}.aq-progress-bar__content__label__size__info{color:var(--color-paper-darker);font-weight:var(--font-weight-regular)}.aq-progress-bar__content__label__rows-info{margin-top:var(--spacing-size-small);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:var(--font-size-xs);color:var(--color-paper-darker)}.aq-progress-bar__content__label__rows-info__divider{margin:0 var(--spacing-size-short)}.aq-progress-bar__content__label__rows-info__title{font-weight:var(--font-weight-semi-bold)}.aq-progress-bar__content__label__rows-info__value{font-weight:var(--font-weight-regular);margin-left:var(--spacing-size-minor)}.aq-progress-bar__icon{padding:var(--spacing-size-minor) 0;color:var(--color-ink-base);font-size:var(--font-size-l)}.aq-progress-bar__helper-text{margin-top:calc(var(--spacing-size-minor) * -1)}";
const AqProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class AqProgressBar extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.progress = DisplayFormat.NUMBERED;
this.state = StateStyle.ACTIVE;
this.value = 0;
this.max = 100;
this.size = '';
this.sizeInfo = '';
this.rows = '';
this.records = '';
this.color = '';
this.helperText = '';
this.label = '';
this.info = '';
this.tooltipWidth = '';
this.isFile = false;
this.isDisabled = false;
this.isRequired = false;
this.status = {
['is-success']: LabelStatus.SUCCESS,
['is-error']: LabelStatus.ERROR,
['is-paused']: LabelStatus.PAUSED,
};
this.labelHelper = Label(this);
}
get getState() {
return this.state || StateStyle.ACTIVE;
}
get getProgressValue() {
const percentage = Math.round((this.value / this.max) * 100);
return this.progress === DisplayFormat.TEXT ? this.status[this.getState] : `${percentage}%`;
}
get getIsColor() {
return !!this.color && (this.color.startsWith('#') || this.color.startsWith('rgb'));
}
get customStyle() {
return this.getIsColor ? { '--custom-progress-color': this.color } : {};
}
getStateClass(className) {
return {
[`${className}--success`]: this.getState === StateStyle.SUCCESS,
[`${className}--error`]: this.getState === StateStyle.ERROR,
[`${className}--paused`]: this.getState === StateStyle.PAUSED,
};
}
get getIsHelperTextVisible() {
return !!this.helperText;
}
get getProgress() {
return !this.progress ? DisplayFormat.NUMBERED : this.progress.toLowerCase();
}
get getIsProgress() {
let isProgress = false;
if ((this.getProgress === DisplayFormat.TEXT && Object.keys(this.status).includes(this.getState)) || this.getProgress === DisplayFormat.NUMBERED) {
isProgress = true;
}
return isProgress;
}
get getIsLabelVisible() {
return this.label?.length > 0;
}
get getIsText() {
return this.getIsLabelVisible;
}
get getValueText() {
return this.label;
}
get getIsSizeInfo() {
return !!this.sizeInfo;
}
get getIsSize() {
return !!this.size;
}
get getIsRows() {
return !!this.records;
}
getStatusClass() {
return {
'aq-progress-bar__content__status': true,
...this.getStateClass('aq-progress-bar__content__status'),
};
}
getProgressBarClass() {
let classes = {
'aq-progress-bar__content__progress': true,
'aq-progress-bar__content__progress--custom': this.getIsColor,
'aq-progress-bar__content__progress__helper-text': this.getIsHelperTextVisible,
};
if (!this.getIsColor)
classes = { ...classes, ...this.getStateClass('aq-progress-bar__content__progress') };
return {
...classes,
};
}
render() {
const statusCss = this.getStatusClass();
const progressBarCss = this.getProgressBarClass();
return (h(Host, { key: '7752826a64383009d6df47163e72a81109dcd975', class: "aq-progress-bar" }, this.isFile && h("em", { key: '709cb6b7470ee97d260c0227d673ee4ccf418221', class: "aq-progress-bar__icon aq-icon-file" }), h("div", { key: '5fdc591c9fb7e4ec343dcca68301380f2b871c9d', class: "aq-progress-bar__content" }, h("div", { key: 'ecddb0ed11744c6dc421b55ee79b07f9855ed79b', class: "aq-progress-bar__content__header" }, h("div", { key: 'ba618382acf4b4b426af04a92b03941dddede096', class: "aq-progress-bar__content__label" }, this.getIsText && h("aq-label", { key: '2baa3e52f7ee22058216ab2d98808c8268b43355', ...this.labelHelper.bindsLabel }, h("span", { key: 'c7aba85d3e255b625136d185242e2beb4965bb35', slot: "text" }, this.getValueText)), this.isFile && (h(Fragment, { key: '7a9bc58402b79a97a15710f120a5555542fe71ce' }, h("div", { key: 'c99ca8bb9cf357ed25c020ac5cbd17c03636f15c', class: "aq-progress-bar__content__label__size" }, h("span", { key: '5aac22a33be7bf8e312ac9be419fd9ffd5317c87', class: "aq-progress-bar__content__label__size__text" }, this.size), this.getIsSizeInfo && this.getIsSize && h("aq-divider", { key: 'b63d8f6c3e193e22e8173a89417b8a8de386959a', class: "aq-progress-bar__content__label__size__divider", orientation: "vertical" }), h("span", { key: '90aeecf2557c2ec466a329de8edd85dbc67da45b', class: "aq-progress-bar__content__label__size__info" }, this.sizeInfo)), h("div", { key: 'd23aa1305147894eb37cab70ef3abcf1cda47bf4', class: "aq-progress-bar__content__label__rows-info" }, this.getIsRows && h("span", { key: 'bf0c08569010457a544d2cf945a343dab7fcd5b5', class: "aq-progress-bar__content__label__rows-info__title" }, "Rows "), h("span", { key: 'd832b0a548b9b5fa157435dd0f547bede9474a03', class: "aq-progress-bar__content__label__rows-info__value" }, this.rows), this.getIsRows && h("aq-divider", { key: '4522a5385c1a09eede32c907e34fa7195a56c67d', class: "aq-progress-bar__content__label__rows-info__divider", "v-if": "", orientation: "vertical" }), this.getIsRows && h("span", { key: '89d86e31481a89552806bc92e454aa295de4c4a2', class: "aq-progress-bar__content__label__rows-info__title" }, "Records "), h("span", { key: 'b4118120059344192db333191f716248cc473762', class: "aq-progress-bar__content__label__rows-info__value" }, this.records))))), h("div", { key: 'c067a0c1e2f0b52e43b13e0cf13d5f77a67ac5ed', class: statusCss }, this.getState === StateStyle.SUCCESS && h("em", { key: 'cd450ed9747943ab328d3924dd76c577075b3eb2', class: "aq-icon-check-circle-fill" }), this.getState === StateStyle.ERROR && h("em", { key: '1f63e553590ea858f397c9b95e927faaab0ff234', class: "aq-icon-alert-circle-fill" }), this.getIsProgress && h("span", { key: '269cfbbbb2ef5ca413e9eb34f9255bbfd9d68a24' }, this.getProgressValue))), h("progress", { key: '62f1d0e28f9f4ee27a37f3afd372bd11a19ae06c', class: progressBarCss, style: this.customStyle, value: this.value, max: this.max }), this.getIsHelperTextVisible && (h("div", { key: '7f128e78e69200de9a276e5d0b140cd3f8f3f9ba', class: "aq-text-field__helper-text" }, h("aq-helper-text", { key: '4778ea499483013a48d1306a704509eb437132fb' }, h("span", { key: '3dd9d339c86db729a88f48f2a0f51a51993928b5', slot: "text" }, this.helperText)))))));
}
static get style() { return aqProgressBarCss; }
}, [256, "aq-progress-bar", {
"progress": [1],
"state": [1],
"value": [2],
"max": [2],
"size": [1],
"sizeInfo": [1, "size-info"],
"rows": [1],
"records": [1],
"color": [1],
"helperText": [1, "helper-text"],
"label": [1],
"info": [1],
"tooltipWidth": [1, "tooltip-width"],
"isFile": [4, "is-file"],
"isDisabled": [4, "is-disabled"],
"isRequired": [4, "is-required"],
"status": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-progress-bar", "aq-divider", "aq-helper-text", "aq-label", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-progress-bar":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqProgressBar$1);
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqProgressBar = AqProgressBar$1;
const defineCustomElement = defineCustomElement$1;
export { AqProgressBar, defineCustomElement };