wcs-core 2.5.4 → 2.6.0

package/dist/cjs/wcs-input.cjs.entry.js

@@ -0,0 +1,228 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+const helpers = require('./helpers-d9aaa8c4.js');
+
+const inputCss = ":host{--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius-left:var(--wcs-input-border-radius-left, var(--wcs-border-radius));--wcs-internal-input-border-radius-right:var(--wcs-input-border-radius-right, var(--wcs-border-radius));display:flex;width:100%;border-radius:var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);background-color:var(--wcs-light);border:1px solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host input{overflow:hidden;box-sizing:border-box;min-height:24px;width:100%;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);font-size:1rem;line-height:1.5}:host input:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:8px;margin-left:8px;margin-right:-8px}:host([state=error]){border-color:var(--wcs-red) !important}:host(:focus-within){border:solid 1px var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";
+
+let Input = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsInput = index.createEvent(this, "wcsInput", 7);
+    this.wcsChange = index.createEvent(this, "wcsChange", 7);
+    this.wcsBlur = index.createEvent(this, "wcsBlur", 7);
+    this.wcsFocus = index.createEvent(this, "wcsFocus", 7);
+    this.inputId = `wcs-input-${inputIds++}`;
+    this.didBlurAfterEdit = false;
+    this.inheritedAttributes = {};
+    /**
+     * This is required for a WebKit bug which requires us to
+     * blur and focus an input to properly focus the input in
+     * an item with delegatesFocus. It will no longer be needed
+     * with iOS 14.
+     *
+     * @internal
+     */
+    this.fireFocusEvents = true;
+    this.hasFocus = false;
+    /**
+     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+     * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+     */
+    this.autocapitalize = 'off';
+    /**
+     * Indicates whether the value of the control can be automatically completed by the browser.
+     */
+    this.autocomplete = 'off';
+    /**
+     * Whether auto correction should be enabled when the user is entering/editing the text value.
+     */
+    this.autocorrect = 'off';
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+     */
+    this.clearInput = false;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    this.debounce = 0;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.inputId;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * If `true`, the element will have its spelling and grammar checked.
+     */
+    this.spellcheck = false;
+    /**
+     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid.
+     */
+    this.state = 'initial';
+    /**
+     * The type of control to display. The default type is text.
+     */
+    this.type = 'text';
+    /**
+     * The value of the input.
+     */
+    this.value = '';
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      this.wcsInput.emit(ev);
+    };
+    this.onBlur = (ev) => {
+      this.hasFocus = false;
+      this.focusChanged();
+      if (this.fireFocusEvents) {
+        this.wcsBlur.emit(ev);
+      }
+    };
+    this.onFocus = (ev) => {
+      this.hasFocus = true;
+      this.focusChanged();
+      if (this.fireFocusEvents) {
+        this.wcsFocus.emit(ev);
+      }
+    };
+    this.onKeydown = (ev) => {
+      if (this.shouldClearOnEdit()) {
+        // Did the input value change after it was blurred and edited?
+        // Do not clear if user is hitting Enter to submit form
+        if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {
+          // Clear the input
+          this.clearTextInput();
+        }
+        // Reset the flag
+        this.didBlurAfterEdit = false;
+      }
+    };
+    this.clearTextInput = (ev) => {
+      if (this.clearInput && !this.readonly && !this.disabled && ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        // Attempt to focus input again after pressing clear button
+        this.setFocus();
+      }
+      this.value = '';
+      /**
+       * This is needed for clearOnEdit
+       * Otherwise the value will not be cleared
+       * if user is inside the input
+       */
+      if (this.nativeInput) {
+        this.nativeInput.value = '';
+      }
+    };
+  }
+  debounceChanged() {
+    this.wcsChange = helpers.debounceEvent(this.wcsChange, this.debounce);
+  }
+  /**
+   * Update the native input element when the value changes
+   */
+  valueChanged() {
+    var _a;
+    this.wcsChange.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+  }
+  connectedCallback() {
+    this.debounceChanged();
+    {
+      document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {
+        detail: this.el
+      }));
+    }
+  }
+  disconnectedCallback() {
+    {
+      document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {
+        detail: this.el
+      }));
+    }
+  }
+  /**
+   * Sets focus on the native `input` in `wcs-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global
+   * `input.blur()`.
+   * @internal
+   */
+  async setBlur() {
+    if (this.nativeInput) {
+      this.nativeInput.blur();
+    }
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  getInputElement() {
+    return Promise.resolve(this.nativeInput);
+  }
+  shouldClearOnEdit() {
+    const { type, clearOnEdit } = this;
+    return (clearOnEdit === undefined)
+      ? type === 'password'
+      : clearOnEdit;
+  }
+  getValue() {
+    return typeof this.value === 'number' ? this.value.toString() :
+      (this.value || '').toString();
+  }
+  focusChanged() {
+    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
+    if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {
+      this.didBlurAfterEdit = true;
+    }
+  }
+  hasValue() {
+    return this.getValue().length > 0;
+  }
+  render() {
+    const value = this.getValue();
+    const labelId = this.inputId + '-lbl';
+    const label = helpers.findItemLabel(this.el);
+    if (label) {
+      label.id = labelId;
+    }
+    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+let inputIds = 0;
+Input.style = inputCss;
+
+exports.wcs_input = Input;

package/dist/cjs/wcs-label.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const labelCss = ":host{font-weight:500;margin-bottom:8px}:host([required])::after{font-weight:500;color:var(--wcs-red);content:\"*\"}";
+
+let Label = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.required = false;
+  }
+  render() {
+    return (index.h(index.Host, { slot: "label" }, index.h("label", null, index.h("slot", null))));
+  }
+};
+Label.style = labelCss;
+
+exports.wcs_label = Label;

package/dist/cjs/wcs-list-item-properties.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const listItemPropertiesCss = ":host{margin-bottom:2px;display:block}::slotted(*:first-of-type){padding-right:1.25rem !important;padding-left:0 !important}::slotted(*:last-of-type){padding-right:0 !important;padding-left:1.25rem !important;border-right:none !important}::slotted(*){padding-right:1.25rem;padding-left:1.25rem;border-right:solid 2px var(--wcs-text-disabled)}";
+
+let ListItemProperties = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { slot: "properties" }, index.h("slot", { name: "property" })));
+  }
+};
+ListItemProperties.style = listItemPropertiesCss;
+
+exports.wcs_list_item_properties = ListItemProperties;

package/dist/cjs/wcs-list-item-property.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const listItemPropertyCss = ":host{font-weight:500 !important;color:var(--wcs-gray-light)}";
+
+let ListItemProperty = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { slot: "property" }, index.h("slot", null)));
+  }
+};
+ListItemProperty.style = listItemPropertyCss;
+
+exports.wcs_list_item_property = ListItemProperty;

package/dist/cjs/wcs-list-item.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const listItemCss = ":host{padding:var(--wcs-padding);border:solid 1px var(--wcs-text-light);display:flex;margin-bottom:-1px;background-color:var(--wcs-white)}:host(:hover){background-color:var(--wcs-light);transition:0.175s}:host([activated]){background-color:var(--wcs-light)}::slotted([slot=title]){color:var(--wcs-gray);font-weight:700;line-height:1.2;font-family:inherit;margin-bottom:0.5rem}::slotted([slot=icon]){color:var(--wcs-gray-light);margin-right:16px}::slotted([slot=actions]){margin-left:8px}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";
+
+let ListItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * True if the item is active. Adds a background color that highlights it.
+     */
+    this.activated = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "icon" }), index.h("div", { class: "content" }, index.h("div", { class: "header" }, index.h("div", null, index.h("slot", { name: "title" }), index.h("slot", { name: "properties" })), index.h("slot", { name: "actions" })), index.h("slot", { name: "description" }))));
+  }
+};
+ListItem.style = listItemCss;
+
+exports.wcs_list_item = ListItem;

package/dist/cjs/wcs-mat-icon.cjs.entry.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const matIconCss = ":host{display:flex}:host .size-s{font-size:18px}:host .size-m{font-size:24px}:host .size-l{font-size:36px}:host .size-xl{font-size:48px}";
+
+let MatIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Size of the icon
+     */
+    this.size = 'm';
+    /**
+     * Family of the icon
+     */
+    this.family = 'filled';
+  }
+  componentWillLoad() {
+    this.onFamilyChange();
+  }
+  componentDidLoad() {
+    this.appendMaterialStylesheet();
+  }
+  appendMaterialStylesheet() {
+    // Add material font to page DOM since font-face doesn't work within Shadow DOM.
+    let element = document.querySelector(`link[href="${this.familyFile}"]`);
+    // Only append the element if it's not yet present
+    if (!element) {
+      element = document.createElement('link');
+      element.setAttribute('rel', 'stylesheet');
+      element.setAttribute('href', this.familyFile);
+      document.head.appendChild(element);
+    }
+  }
+  onFamilyChange() {
+    this.familyFile = 'https://fonts.googleapis.com/icon?family=';
+    switch (this.family) {
+      case 'filled':
+        this.familyFile += 'Material+Icons';
+        this.familyClass = 'material-icons';
+        break;
+      case 'outlined':
+        this.familyFile += 'Material+Icons+Outlined';
+        this.familyClass = 'material-icons-outlined';
+        break;
+      case 'twotone':
+        this.familyFile += 'Material+Icons+Two+Tone';
+        this.familyClass = 'material-icons-two-tone';
+        break;
+      case 'rounded':
+        this.familyFile += 'Material+Icons+Round';
+        this.familyClass = 'material-icons-round';
+        break;
+      case 'sharp':
+        this.familyFile += 'Material+Icons+Sharp';
+        this.familyClass = 'material-icons-sharp';
+        break;
+    }
+    this.appendMaterialStylesheet();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("link", { rel: "stylesheet", type: "text/css", href: this.familyFile }), index.h("i", { class: this.familyClass + ' size-' + this.size }, this.icon)));
+  }
+  static get watchers() { return {
+    "family": ["onFamilyChange"]
+  }; }
+};
+MatIcon.style = matIconCss;
+
+exports.wcs_mat_icon = MatIcon;

package/dist/cjs/wcs-modal.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const modalCss = "wcs-modal{--saas-fix-modal:rgba(var(--wcs-black), 0.5);z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none}wcs-modal[show]{display:block;width:100%;height:100%;opacity:1;display:block}wcs-modal[backdrop] .wcs-modal-backdrop{display:block;position:fixed;top:0;left:0;bottom:0;right:0;opacity:0.4;background-color:var(--wcs-black)}.wcs-modal-backdrop{display:none}.wcs-modal-container{position:fixed;top:50%;left:50%;min-width:400px;max-width:480px;transform:translate(-50%, -50%);pointer-events:auto;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;outline:0;z-index:20000;display:block;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px}.wcs-modal-actions{margin-top:20px;float:right}";
+
+let Modal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsDialogClosed = index.createEvent(this, "wcsDialogClosed", 7);
+    /**
+     * Specifies whether the component should display a backdrop on the entire page
+     */
+    this.backdrop = true;
+    /**
+     * Displays the modal
+     */
+    this.show = false;
+    /**
+     * Specifies whether the component should display a close button.
+     * if false, it won't close the modal when the escape key is pressed.
+     */
+    this.showCloseButton = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "wcs-modal-backdrop" }), index.h("div", { class: "wcs-modal-container" }, index.h("div", { class: "wcs-modal-header" }, index.h("h5", null, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "stroked", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("i", { class: "material-icons" }, "close")))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", null)), index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" })))));
+  }
+  onKeyDown(event) {
+    if (this.showCloseButton && event.key === 'Escape') {
+      this.close();
+    }
+  }
+  onCloseButtonClick(_) {
+    this.close();
+  }
+  close() {
+    this.show = false;
+    this.wcsDialogClosed.emit();
+  }
+};
+Modal.style = modalCss;
+
+exports.wcs_modal = Modal;

package/dist/cjs/wcs-nav-item.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const navItemCss = "wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";
+
+let NavItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * This attribute specify the text of the item.
+     */
+    this.text = '';
+  }
+  render() {
+    return (index.h("a", { href: this.href, class: "wcs-nav-item-container" }, index.h("slot", null), index.h("span", { class: "wcs-nav-item-text" }, this.text)));
+  }
+};
+NavItem.style = navItemCss;
+
+exports.wcs_nav_item = NavItem;

package/dist/cjs/wcs-nav.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const navCss = "nav{background-image:linear-gradient(0deg, var(--wcs-primary), var(--wcs-primary));display:flex;z-index:1055;flex-direction:column;width:6.25rem;height:100%}@media (max-width: 1199px){nav{flex-direction:row;background-image:linear-gradient(0deg, var(--wcs-light), var(--wcs-light));border-top:1px solid #d8d8d8;bottom:0;width:100%;height:3.25rem}}@media (max-width: 1199px){::slotted(wcs-nav-item){flex:1}}@media (min-width: 1200px){slot[name=bottom],wcs-nav-item:not([slot=bottom])+wcs-nav-item[slot=bottom]{display:block;margin-top:auto}}";
+
+let Nav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("nav", { class: "wcs-nav-container" }, index.h("slot", null), index.h("slot", { name: "bottom" })));
+  }
+};
+Nav.style = navCss;
+
+exports.wcs_nav = Nav;

package/dist/cjs/wcs-progress-bar.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const progressBarCss = ":host{--wcs-internal-progress-bar-border-radius:var(--wcs-progress-bar-border-radius,0.3125rem);--wcs-internal-progress-bar-border-radius-small:var(--wcs-progress-bar-border-radius-small,0.15625rem);--wcs-internal-progress-bar-animation-duration:var(--wcs-progress-bar-animation-duration,0.375s)}.progress{display:flex;height:0.625rem;font-size:0.75rem;color:#4d4f53;background-color:#fff;background-image:linear-gradient(90deg, #e1ded9 50%, transparent 50%);background-size:0.25rem 0.625rem;border-radius:var(--wcs-internal-progress-bar-border-radius)}.progress.has-label{margin-top:2.375rem}.progress.small{height:0.3125rem;overflow:hidden;background-color:#fff;background-image:none;background-size:auto;border-radius:var(--wcs-internal-progress-bar-border-radius-small)}.progress.value-zero>.progress-bar>.progress-label{right:unset}.progress-bar{position:relative;display:flex;flex-direction:column;justify-content:center;color:#4d4f53;text-align:center;background-color:var(--wcs-primary);border-radius:var(--wcs-internal-progress-bar-border-radius);transition:width var(--wcs-internal-progress-bar-animation-duration) ease-out}.progress-label{position:absolute;right:0;bottom:calc(100% + 0.5rem);font-size:1.5rem;font-weight:500}.progress-label sup{font-size:0.875rem;top:-0.5em;position:relative;line-height:0;vertical-align:baseline}";
+
+let ProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Whether the component display the small version
+     */
+    this.small = false;
+    /**
+     * Whether it displays a label indicating the percentage of progress above the bar.
+     */
+    this.showLabel = false;
+    /**
+     * The actual value of the progress.
+     * Ranging from 0 to 100.
+     */
+    this.value = 0;
+  }
+  render() {
+    const style = {
+      width: this.value + '%'
+    };
+    return (index.h("div", { class: this.rootClasses() }, index.h("div", { class: "progress-bar", style: style }, this.showLabel &&
+      index.h("span", { class: "progress-label" }, this.value, index.h("sup", null, "%")))));
+  }
+  rootClasses() {
+    let classes = 'progress';
+    if (this.small)
+      classes += ' small';
+    if (this.showLabel)
+      classes += ' has-label';
+    // FIXME: Temporary fix so the label doesn't appear before the bar.
+    if (this.value === 0)
+      classes += ' value-zero';
+    return classes;
+  }
+};
+ProgressBar.style = progressBarCss;
+
+exports.wcs_progress_bar = ProgressBar;

package/dist/cjs/wcs-progress-radial.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const progressRadialCss = ".progress-circle{position:relative;display:inline-block;width:7.5rem;height:7.5rem;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 120' style='enable-background:new 0 0 120 120;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23D7D7D7;%7d %3c/style%3e%3cg%3e%3crect x='59' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='55.2' y='0.1' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -0.2907 3.9376)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='51.5' y='0.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -0.3974 7.368)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='47.8' y='1.2' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -0.427 10.2973)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='44.1' y='2.1' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -0.4827 12.749)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='40.5' y='3.3' transform='matrix(0.9397 -0.342 0.342 0.9397 -0.6613 14.7626)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='37' y='4.7' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -1.0509 16.3931)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='33.6' y='6.3' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -1.7286 17.7087)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='30.4' y='8.2' transform='matrix(0.848 -0.5299 0.5299 0.848 -2.7588 18.7897)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='27.3' y='10.3' transform='matrix(0.809 -0.5878 0.5878 0.809 -4.1915 19.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='24.3' y='12.6' transform='matrix(0.766 -0.6428 0.6428 0.766 -6.0608 20.6152)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='21.5' y='15.2' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -8.3843 21.5593)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='18.9' y='17.9' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -11.1622 22.6633)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='16.4' y='20.8' transform='matrix(0.6157 -0.788 0.788 0.6157 -14.3769 24.0315)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='14.2' y='23.8' transform='matrix(0.5592 -0.829 0.829 0.5592 -17.9939 25.7655)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='12.2' y='27' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 27.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='10.5' y='30.3' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -26.2122 30.7076)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='8.9' y='33.8' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -30.6638 34.0815)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='7.6' y='37.3' transform='matrix(0.309 -0.9511 0.9511 0.309 -35.2211 38.1485)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='6.6' y='40.9' transform='matrix(0.2419 -0.9703 0.9703 0.2419 -39.7776 42.9595)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.8' y='44.6' transform='matrix(0.1736 -0.9848 0.9848 0.1736 -44.2179 48.5492)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.3' y='48.4' transform='matrix(0.1045 -0.9945 0.9945 0.1045 -48.42 54.9351)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5' y='52.1' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 -52.2577 62.1164)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='0' y='60.9' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -2.1561 0.2482)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.3' y='64.6' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -6.8272 1.0177)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.8' y='68.4' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -11.9436 2.2383)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='1.6' y='72.1' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -17.4499 4.0099)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='2.6' y='75.7' transform='matrix(0.9511 -0.309 0.309 0.9511 -23.2745 6.4241)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='3.9' y='79.2' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -29.331 9.5626)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='5.5' y='82.7' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -35.5191 13.4941)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='7.2' y='86' transform='matrix(0.866 -0.5 0.5 0.866 -41.7269 18.2731)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='9.2' y='89.2' transform='matrix(0.829 -0.5592 0.5592 0.829 -47.8331 23.9378)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='11.4' y='92.2' transform='matrix(0.788 -0.6157 0.6157 0.788 -53.7091 30.5088)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='13.9' y='95.1' transform='matrix(0.7431 -0.6691 0.6691 0.7431 -59.2218 37.988)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='16.5' y='97.8' transform='matrix(0.6947 -0.7193 0.7193 0.6947 -64.236 46.3581)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='19.3' y='100.4' transform='matrix(0.6428 -0.766 0.766 0.6428 -68.6175 55.5822)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='22.3' y='102.7' transform='matrix(0.5878 -0.809 0.809 0.5878 -72.2355 65.6038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='25.4' y='104.8' transform='matrix(0.5299 -0.848 0.848 0.5299 -74.9657 76.3475)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='28.6' y='106.7' transform='matrix(0.4695 -0.8829 0.8829 0.4695 -76.693 87.7197)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='32' y='108.3' transform='matrix(0.4067 -0.9135 0.9135 0.4067 -77.3138 99.6102)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='35.5' y='109.7' transform='matrix(0.342 -0.9397 0.9397 0.342 -76.7383 111.8932)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='39.1' y='110.9' transform='matrix(0.2756 -0.9613 0.9613 0.2756 -74.893 124.43)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='42.8' y='111.8' transform='matrix(0.2079 -0.9781 0.9781 0.2079 -71.7222 137.0703)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='46.5' y='112.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 -67.1899 149.6558)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='50.2' y='112.9' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 -61.2806 162.0216)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='59' y='108' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='62.8' y='107.9' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -7.7877 4.7255)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='66.5' y='107.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -15.1355 10.5006)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='70.2' y='106.8' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -21.9001 17.2744)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='73.9' y='105.9' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -27.9452 24.9761)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='77.5' y='104.7' transform='matrix(0.9397 -0.342 0.342 0.9397 -33.1442 33.5167)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='81' y='103.3' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -37.383 42.7899)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='84.4' y='101.7' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -40.5617 52.6742)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='87.6' y='99.8' transform='matrix(0.848 -0.5299 0.5299 0.848 -42.5973 63.0348)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='90.7' y='97.7' transform='matrix(0.809 -0.5878 0.5878 0.809 -43.4248 73.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='93.7' y='95.4' transform='matrix(0.766 -0.6428 0.6428 0.766 -42.999 84.594)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='96.5' y='92.8' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -41.2954 95.4789)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='99.1' y='90.1' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -38.3109 106.2184)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='101.6' y='87.2' transform='matrix(0.6157 -0.788 0.788 0.6157 -34.0637 116.6505)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='103.8' y='84.2' transform='matrix(0.5592 -0.829 0.829 0.5592 -28.5937 126.6159)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='105.8' y='81' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 135.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='107.5' y='77.7' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -14.2476 144.5431)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='109.1' y='74.2' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -5.5511 152.2277)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='110.4' y='70.7' transform='matrix(0.309 -0.9511 0.9511 0.309 4.0122 158.8962)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='111.4' y='67.1' transform='matrix(0.2419 -0.9703 0.9703 0.2419 14.3114 164.4454)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.2' y='63.4' transform='matrix(0.1736 -0.9848 0.9848 0.1736 25.2032 168.79)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.7' y='59.6' transform='matrix(0.1045 -0.9945 0.9945 0.1045 36.5339 171.8641)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='113' y='55.9' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 48.1428 173.6225)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='108' y='57.1' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -1.9588 4.0128)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.7' y='53.4' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -5.0588 12.1831)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.2' y='49.6' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -7.0711 20.4225)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='106.4' y='45.9' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -8.0163 28.5853)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='105.4' y='42.3' transform='matrix(0.9511 -0.309 0.309 0.9511 -7.9343 36.5311)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='104.1' y='38.8' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -6.8838 44.1282)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='102.5' y='35.3' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -4.9408 51.2552)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='100.8' y='32' transform='matrix(0.866 -0.5 0.5 0.866 -2.1962 57.8038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='98.8' y='28.8' transform='matrix(0.829 -0.5592 0.5592 0.829 1.2454 63.6808)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='96.6' y='25.8' transform='matrix(0.788 -0.6157 0.6157 0.788 5.2685 68.8093)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='94.1' y='22.9' transform='matrix(0.7431 -0.6691 0.6691 0.7431 9.7488 73.1303)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='91.5' y='20.2' transform='matrix(0.6947 -0.7193 0.7193 0.6947 14.5562 76.6036)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='88.7' y='17.6' transform='matrix(0.6428 -0.766 0.766 0.6428 19.5576 79.2086)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='85.7' y='15.3' transform='matrix(0.5878 -0.809 0.809 0.5878 24.6192 80.944)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='82.6' y='13.2' transform='matrix(0.5299 -0.848 0.848 0.5299 29.6096 81.828)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='79.4' y='11.3' transform='matrix(0.4695 -0.8829 0.8829 0.4695 34.4027 81.8974)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='76' y='9.7' transform='matrix(0.4067 -0.9135 0.9135 0.4067 38.8799 81.2069)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='72.5' y='8.3' transform='matrix(0.342 -0.9397 0.9397 0.342 42.9327 79.8275)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='68.9' y='7.1' transform='matrix(0.2756 -0.9613 0.9613 0.2756 46.4651 77.845)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='65.2' y='6.2' transform='matrix(0.2079 -0.9781 0.9781 0.2079 49.3951 75.358)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='61.5' y='5.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 51.657 72.4756)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='57.8' y='5.1' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 53.2021 69.3153)' class='st0' width='12' height='2'/%3e%3c/g%3e%3c/svg%3e\")}.progress-circle-figure{transform:rotate(-90deg);transition:stroke-dashoffset 0.375s ease-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);border:0}.progress-circle-label{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.5rem;font-weight:500}.progress-circle-label sup{font-size:0.875rem;top:-0.5em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-meter{stroke:var(--wcs-white)}.progress-circle-value{stroke:var(--wcs-primary);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";
+
+let ProgressRadial = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 120;
+    this.showLabel = false;
+    this.value = 0;
+  }
+  render() {
+    const { size, halfSize } = { size: this.size, halfSize: this.size / 2 };
+    return (index.h("div", { class: "progress-circle", "data-component": "radial-progress" }, index.h("svg", { class: "progress-circle-figure", "data-role": "figure", width: this.size, height: this.size, viewBox: `0 0 ${size} ${size}`, style: this.getSvgStyle() }, index.h("circle", { class: "progress-circle-meter", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" }), index.h("circle", { class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+      index.h("div", { class: "progress-circle-label", "data-role": "label" }, index.h("span", null, index.h("span", { "data-role": "labelvalue" }, this.value), index.h("sup", null, "%"))), index.h("input", { "data-role": "control", class: "sr-only", type: "range", value: this.value })));
+  }
+  getSvgStyle() {
+    return {
+      'stroke-dasharray': '339.292',
+      'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`
+    };
+  }
+};
+ProgressRadial.style = progressRadialCss;
+
+exports.wcs_progress_radial = ProgressRadial;