v4web-components/dist/components/lab-ds-progress-bar.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const labDsProgressBarCss = ".v4-progress-bar{width:100%;height:var(--lab-ds-semantic-selectable-size-xxs);border-style:solid;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-border-default);border-radius:1rem}.progress-bar-completed{height:100%;max-width:100%;border-radius:1rem;background-color:var(--lab-ds-semantic-selectable-color-primary-default)}";

const LabDsProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class LabDsProgressBar extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.progress = undefined;
  }
  render() {
    return (h("div", { class: `v4-progress-bar` }, h("div", { style: { width: `${this.progress}%` }, class: "progress-bar-completed" })));
  }
  static get style() { return labDsProgressBarCss; }
}, [1, "lab-ds-progress-bar", {
    "progress": [2]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-progress-bar"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-progress-bar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsProgressBar$1);
      }
      break;
  } });
}

const LabDsProgressBar = LabDsProgressBar$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsProgressBar, defineCustomElement };

//# sourceMappingURL=lab-ds-progress-bar.js.map