wcs-core 2.5.4 → 2.6.0

package/dist/esm/wcs-spinner.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance } from './index-b982604a.js';
+
+const spinnerCss = "@keyframes wcs-spinner-border{to{transform:rotate(360deg)}}@keyframes wcs-spinner-grow{0%{transform:scale(0)}50%{opacity:1}}:host{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;border-radius:50%}:host([mode=border]){border:0.25em solid var(--wcs-base);border-right-color:transparent;animation:wcs-spinner-border 0.75s linear infinite}:host([mode=growing]){background-color:var(--wcs-base);opacity:0;animation:wcs-spinner-grow 0.75s linear infinite}";
+
+let Spinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Indicates the spinner display mode.
+     * Accepted values: `border` or `growing`
+     */
+    this.mode = 'border';
+  }
+};
+Spinner.style = spinnerCss;
+
+export { Spinner as wcs_spinner };

package/dist/esm/wcs-switch.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const switchCss = ":host{--wcs-switch-background-color-initial:var(--wcs-text-light);--wcs-switch-background-color-final:var(--wcs-primary);--wcs-switch-bullet-color-initial:var(--wcs-switch-background-color-final);--wcs-switch-bullet-color-final:var(--wcs-switch-background-color-initial);display:flex}.wcs-container{position:relative;display:inline-block;width:3rem;height:1.5rem;margin-bottom:0}.wcs-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.wcs-switch,.text{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.wcs-checkmark::before,.wcs-checkmark{position:absolute;transition:all 0.15s ease-out}.wcs-checkmark::before{bottom:0.3125rem;left:0.3125rem;width:0.875rem;height:0.875rem;content:\"\";border-radius:50%;background-color:var(--wcs-switch-bullet-color-initial)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;cursor:pointer;border-radius:0.75rem;background-color:var(--wcs-switch-background-color-initial)}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:hover input:not([disabled])+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-bullet-color-final)}input:checked+.wcs-checkmark::before{transform:translateX(24px)}input:not([disabled]):checked+.wcs-checkmark,.wcs-container:hover input:not([disabled])+.wcs-checkmark,.wcs-container:focus input:not([disabled])+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}";
+
+let Switch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsChange = createEvent(this, "wcsChange", 7);
+    this.switchId = `wcs-switch-${switchIds++}`;
+    this.name = this.switchId;
+    /**
+     * If `true`, the switch is selected.
+     */
+    this.checked = false;
+  }
+  toggleChange(_event) {
+    this.checked = !this.checked;
+    this.wcsChange.emit({
+      checked: this.checked
+    });
+  }
+  render() {
+    return (h(Host, null, h("label", { htmlFor: this.name, class: "wcs-container" }, h("span", { class: "text" }, h("slot", null)), h("input", { onChange: (evt) => this.toggleChange(evt), checked: this.checked, class: "wcs-switch", type: "checkbox", name: this.name, id: this.name }), h("span", { class: "wcs-checkmark" }))));
+  }
+  get el() { return getElement(this); }
+};
+let switchIds = 0;
+Switch.style = switchCss;
+
+export { Switch as wcs_switch };

package/dist/esm/wcs-tab.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-b982604a.js';
+
+let Tab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabLoaded = createEvent(this, "tabLoaded", 7);
+  }
+  componentDidLoad() {
+    this.tabLoaded.emit();
+  }
+  render() {
+    return (h(Host, { slot: "wcs-tab" }, h("slot", null)));
+  }
+};
+
+export { Tab as wcs_tab };

package/dist/esm/wcs-tabs.entry.js

@@ -0,0 +1,155 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const tabsCss = ":host{--wcs-tabs-padding-bottom:16px}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{padding-top:4px;overflow-x:auto;display:flex;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{padding:8px 24px 16px 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none}.wcs-tab-header span{text-align:center;color:var(--wcs-text-disabled);font-size:1rem;font-weight:400}.wcs-tab-header:focus span,.wcs-tab-header:hover span{color:var(--wcs-primary)}.active span{font-weight:500;color:var(--wcs-primary);position:relative}.active span::after{position:absolute;bottom:calc(var(--wcs-tabs-padding-bottom) * -1);left:0;width:100%;height:0.3125rem;content:\"\";background-color:#0088ce;border-radius:3px}";
+
+let Tabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabChange = createEvent(this, "tabChange", 7);
+    /**
+     * Tab headers alignment.
+     */
+    this.align = 'start';
+    /**
+     * Current selected tab index.
+     * Starts at 0.
+     */
+    this.selectedIndex = 0;
+    /**
+     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to
+     * separately render the tab content.
+     */
+    this.headersOnly = false;
+    this.headers = [];
+    this.currentActiveTabIndex = 0;
+  }
+  selectedIndexChanged(newValue) {
+    this.currentActiveTabIndex = newValue;
+  }
+  selectedTabkeyChanged(newValue) {
+    this.updateCurrentActiveIndexByTabKey(newValue);
+  }
+  emitActiveTabChange() {
+    this.tabChange.emit({
+      tabName: this.headers[this.currentActiveTabIndex],
+      tabIndex: this.currentActiveTabIndex,
+      selectedKey: this.tabs[this.currentActiveTabIndex].itemKey
+    });
+  }
+  updateCurrentActiveIndexByTabKey(newValue) {
+    for (let i = 0; i < this.tabs.length; i++) {
+      const tab = this.tabs[i];
+      if (tab.itemKey === newValue) {
+        this.currentActiveTabIndex = i;
+      }
+    }
+  }
+  onTabLoaded() {
+    this.refreshHeaders();
+  }
+  componentDidLoad() {
+    this.putTabsInCorrectDivIfTheyAreNot();
+    this.refreshHeaders();
+    if (this.selectedIndex) {
+      this.currentActiveTabIndex = this.selectedIndex;
+    }
+    if (this.selectedKey) {
+      this.updateCurrentActiveIndexByTabKey(this.selectedKey);
+    }
+  }
+  // XXX: Firefox < 63
+  putTabsInCorrectDivIfTheyAreNot() {
+    const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');
+    if (tabDiv.querySelector('slot') === null) {
+      Array.from(this.el.querySelectorAll('wcs-tab'))
+        .filter(node => node.parentNode !== tabDiv)
+        .forEach(tab => {
+        if (tab.parentElement.isEqualNode(this.el)) {
+          this.el.removeChild(tab);
+          tabDiv.appendChild(tab);
+        }
+      });
+    }
+  }
+  handleKeyDown(ev, tabIndex) {
+    const target = ev.target;
+    switch (ev.key) {
+      case ' ':
+      case 'Enter': {
+        this.currentActiveTabIndex = tabIndex;
+        this.emitActiveTabChange();
+        ev.preventDefault();
+        break;
+      }
+      case 'ArrowLeft': {
+        if (target.previousElementSibling
+          && target.previousElementSibling.classList.contains('wcs-tab-header')) {
+          target.previousElementSibling.focus();
+          ev.preventDefault();
+        }
+        break;
+      }
+      case 'ArrowRight': {
+        if (target.nextElementSibling
+          && target.nextElementSibling.classList.contains('wcs-tab-header')) {
+          target.nextElementSibling.focus();
+          ev.preventDefault();
+        }
+        break;
+      }
+    }
+  }
+  refreshHeaders() {
+    this.headers = [];
+    this.tabs
+      .forEach(x => {
+      this.headers.push(x.getAttribute('header'));
+    });
+  }
+  get tabs() {
+    const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');
+    // FIXME: problem with this selector being too greedy in ff < 63
+    const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');
+    return tabs.length !== 0
+      ? tabs
+      : tabsEl.querySelector('slot')
+        ? tabsEl.querySelector('slot').assignedElements()
+        : [];
+  }
+  selectTabAndEmitChangeEvent(index) {
+    this.currentActiveTabIndex = index;
+    this.emitActiveTabChange();
+  }
+  componentWillUpdate() {
+    if (!this.headersOnly) {
+      this.updateTabVisibility();
+    }
+    else {
+      this.hideAllTabsContent();
+    }
+  }
+  updateTabVisibility() {
+    this.tabs.forEach((el, idx) => {
+      if (idx !== this.currentActiveTabIndex) {
+        el.setAttribute('style', 'display: none;');
+      }
+      else {
+        el.setAttribute('style', 'display: block;');
+      }
+    });
+  }
+  hideAllTabsContent() {
+    this.tabs.forEach((el) => el.setAttribute('style', 'display: none;'));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "wcs-tabs-headers" }, this.headers.map((header, idx) => h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: idx }, h("span", null, header)))), h("div", { class: "wcs-tabs" }, h("slot", { name: "wcs-tab" }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectedIndex": ["selectedIndexChanged"],
+    "selectedKey": ["selectedTabkeyChanged"]
+  }; }
+};
+Tabs.style = tabsCss;
+
+export { Tabs as wcs_tabs };

package/dist/esm/wcs-textarea.entry.js

@@ -0,0 +1,220 @@
+import { r as registerInstance, c as createEvent, a as readTask, h, H as Host, g as getElement } from './index-b982604a.js';
+import { d as debounceEvent, i as inheritAttributes, r as raf, f as findItemLabel } from './helpers-50436c51.js';
+
+const textareaCss = ":host{--wcs-textarea-icon-color:var(--wcs-text-medium);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));display:flex;flex-direction:row;width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-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 textarea{overflow:auto;flex:1;width:100%;box-sizing:border-box;min-height:24px;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 textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:7px;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 Textarea = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsChange = createEvent(this, "wcsChange", 7);
+    this.wcsInput = createEvent(this, "wcsInput", 7);
+    this.wcsBlur = createEvent(this, "wcsBlur", 7);
+    this.wcsFocus = createEvent(this, "wcsFocus", 7);
+    this.inputId = `wcs-textarea-${textareaIds++}`;
+    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.
+     */
+    this.autocapitalize = 'none';
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
+     */
+    this.clearOnEdit = 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 textarea.
+     */
+    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 initial state but you can set it to 'error' state if the data given by the user is not valid.
+     */
+    this.state = 'initial';
+    /**
+     * If `true`, the element height will increase based on the value.
+     */
+    this.autoGrow = false;
+    /**
+     * The value of the textarea.
+     */
+    this.value = '';
+    this.onInput = (ev) => {
+      if (this.nativeInput) {
+        this.value = this.nativeInput.value;
+      }
+      this.wcsInput.emit(ev);
+    };
+    this.onFocus = (ev) => {
+      this.hasFocus = true;
+      this.focusChange();
+      if (this.fireFocusEvents) {
+        this.wcsFocus.emit(ev);
+      }
+    };
+    this.onBlur = (ev) => {
+      this.hasFocus = false;
+      this.focusChange();
+      if (this.fireFocusEvents) {
+        this.wcsBlur.emit(ev);
+      }
+    };
+    this.onKeyDown = () => {
+      this.checkClearOnEdit();
+    };
+  }
+  debounceChanged() {
+    this.wcsChange = debounceEvent(this.wcsChange, this.debounce);
+  }
+  /**
+   * Update the native input element when the value changes
+   */
+  valueChanged() {
+    const nativeInput = this.nativeInput;
+    const value = this.getValue();
+    if (nativeInput && nativeInput.value !== value) {
+      nativeInput.value = value;
+    }
+    this.runAutoGrow();
+    this.wcsChange.emit({ value });
+  }
+  connectedCallback() {
+    this.debounceChanged();
+    {
+      document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {
+        detail: this.el
+      }));
+    }
+  }
+  disconnectedCallback() {
+    {
+      document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {
+        detail: this.el
+      }));
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['title']);
+  }
+  componentDidLoad() {
+    raf(() => this.runAutoGrow());
+  }
+  runAutoGrow() {
+    const nativeInput = this.nativeInput;
+    if (nativeInput && this.autoGrow) {
+      readTask(() => {
+        nativeInput.style.height = 'auto';
+        nativeInput.style.height = nativeInput.scrollHeight + 'px';
+      });
+    }
+  }
+  /**
+   * This method make the textarea automatically adopt the size of the content without a scroll bar
+   */
+  async fitContent() {
+    raf(() => this.runAutoGrow());
+  }
+  /**
+   * Sets focus on the native `textarea` in `wcs-textarea`. Use this method instead of the global
+   * `textarea.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global
+   * `textarea.blur()`.
+   * @internal
+   */
+  async setBlur() {
+    if (this.nativeInput) {
+      this.nativeInput.blur();
+    }
+  }
+  /**
+   * Returns the native `<textarea>` element used under the hood.
+   */
+  getInputElement() {
+    // tslint:disable-next-line:no-non-null-assertion
+    return Promise.resolve(this.nativeInput);
+  }
+  /**
+   * Check if we need to clear the text input if clearOnEdit is enabled
+   */
+  checkClearOnEdit() {
+    if (!this.clearOnEdit) {
+      return;
+    }
+    // Did the input value change after it was blurred and edited?
+    if (this.didBlurAfterEdit && this.hasValue()) {
+      // Clear the input
+      this.value = '';
+    }
+    // Reset the flag
+    this.didBlurAfterEdit = false;
+  }
+  focusChange() {
+    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
+    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
+      this.didBlurAfterEdit = true;
+    }
+  }
+  hasValue() {
+    return this.getValue() !== '';
+  }
+  getValue() {
+    return this.value || '';
+  }
+  render() {
+    const value = this.getValue();
+    const labelId = this.inputId + '-lbl';
+    const label = findItemLabel(this.el);
+    if (label) {
+      label.id = labelId;
+    }
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? labelId : null, ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+let textareaIds = 0;
+Textarea.style = textareaCss;
+
+export { Textarea as wcs_textarea };

package/dist/esm/wcs-tooltip.entry.js

@@ -0,0 +1,125 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
+
+let overlayElement;
+function getOverlay() {
+  if (!overlayElement) {
+    createOverlay();
+  }
+  return overlayElement;
+}
+function createOverlay() {
+  const existent = document.querySelector('.wcs-overlay');
+  overlayElement = existent
+    ? existent
+    : document.createElement('div');
+  overlayElement.classList.add('wcs-overlay');
+  document.body.appendChild(overlayElement);
+}
+
+let Tooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Where the tooltip is going to show relative to the element it's describing.
+     */
+    this.position = 'bottom';
+  }
+  componentWillLoad() {
+    const target = document.getElementById(this.for);
+    if (target === null) {
+      throw new Error(`Cannot find element with corresponding id: ${this.for}`);
+    }
+    this.target = target;
+    this.listen('mouseenter', 'show');
+    this.listen('focus', 'show');
+    this.listen('mouseleave', 'hide');
+    this.listen('blur', 'hide');
+    this.listen('tap', 'hide');
+  }
+  listen(eventName, className) {
+    this.target.addEventListener(eventName, () => {
+      if (className === 'hide') {
+        this.content.classList.replace('show', 'hide');
+      }
+      else {
+        this.content.classList.replace('hide', 'show');
+      }
+      this.updatePosition();
+    });
+  }
+  componentDidRender() {
+    const overlay = getOverlay();
+    this.content = this.el.shadowRoot.querySelector('.wcs-tooltip-content');
+    const nodes = this.el.shadowRoot.querySelector('slot')
+      ? this.el.shadowRoot.querySelector('slot').assignedNodes()
+      : this.content.querySelectorAll('*');
+    nodes.forEach(n => this.content.appendChild(n.cloneNode(true)));
+    this.content.remove();
+    overlay.appendChild(this.content);
+    this.updatePosition();
+  }
+  updatePosition() {
+    // Function taken and adapted from https://github.com/PolymerElements/paper-tooltip/blob/master/paper-tooltip.js
+    // Thanks ! :-)
+    if (!this.target || !this.content.offsetParent) {
+      return;
+    }
+    const parentRect = this.content.offsetParent.getBoundingClientRect();
+    const targetRect = this.target.getBoundingClientRect();
+    const thisRect = this.content.getBoundingClientRect();
+    const borderWidth = 6;
+    const horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
+    const verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
+    const targetLeft = targetRect.left - parentRect.left;
+    const targetTop = targetRect.top - parentRect.top;
+    let tooltipLeft;
+    let tooltipTop;
+    switch (this.position) {
+      case 'top':
+        tooltipLeft = targetLeft + horizontalCenterOffset;
+        tooltipTop = targetTop - thisRect.height - borderWidth;
+        break;
+      case 'bottom':
+        tooltipLeft = targetLeft + horizontalCenterOffset;
+        tooltipTop = targetTop + targetRect.height + borderWidth;
+        break;
+      case 'left':
+        tooltipLeft = targetLeft - thisRect.width - borderWidth;
+        tooltipTop = targetTop + verticalCenterOffset;
+        break;
+      case 'right':
+        tooltipLeft = targetLeft + targetRect.width + borderWidth;
+        tooltipTop = targetTop + verticalCenterOffset;
+        break;
+    }
+    // Clip to the left/right side.
+    if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
+      this.content.style.right = '0px';
+      this.content.style.left = 'auto';
+    }
+    else {
+      this.content.style.left = Math.max(0, tooltipLeft) + 'px';
+      this.content.style.right = 'auto';
+    }
+    // Clip the top/bottom side.
+    if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) {
+      this.content.style.bottom = (parentRect.height - targetTop) + 'px';
+      this.content.style.top = 'auto';
+    }
+    else {
+      this.content.style.top = Math.max(-parentRect.top, tooltipTop) + 'px';
+      this.content.style.bottom = 'auto';
+    }
+  }
+  disconnectedCallback() {
+    // TODO: this gets called only at the component creation in ff < 63
+    // const overlay = getOverlay();
+    // overlay.removeChild(this.content);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "wcs-tooltip-content hide" }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+
+export { Tooltip as wcs_tooltip };

package/dist/esm/wcs.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-c619b1fa.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-b982604a.js';
 
 /*
- Stencil Client Patch Browser v2.6.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-action-bar_47",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]],[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]],[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}],[1,"wcs-dropdown",{"mode":[1],"shape":[1],"disabled":[4],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]],[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]],[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}],[4,"wcs-modal",{"backdrop":[516],"show":[1540],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]],[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}],[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}],[1,"wcs-badge",{"shape":[1],"color":[1]}],[1,"wcs-card",{"mode":[1537]}],[1,"wcs-card-body"],[1,"wcs-com-nav",{"appName":[1,"app-name"]}],[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]],[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"]]],[1,"wcs-divider"],[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]],[1,"wcs-field"],[1,"wcs-field-content"],[1,"wcs-field-label"],[1,"wcs-footer"],[1,"wcs-galactic",{"text":[1],"show":[32]}],[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1537,"sort-order"],"width":[1]}],[1,"wcs-header"],[1,"wcs-hint",{"small":[1540]}],[1,"wcs-label",{"required":[516]}],[1,"wcs-list-item",{"activated":[1028]}],[1,"wcs-list-item-properties"],[1,"wcs-list-item-property"],[1,"wcs-nav"],[4,"wcs-nav-item",{"text":[513],"href":[1537]}],[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}],[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]],[1,"wcs-switch",{"name":[1],"checked":[1028]}],[1,"wcs-tab",{"header":[1537],"itemKey":[8,"item-key"]}],[1,"wcs-tabs",{"align":[1537],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]],[1,"wcs-tooltip",{"for":[513],"position":[513]}],[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"icon":[8],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}],[1,"wcs-progress-bar",{"small":[1028],"showLabel":[1028,"show-label"],"value":[1026]}],[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]],[1,"wcs-spinner",{"mode":[1537]}],[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]],[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"]}],[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
+  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown",[[1,"wcs-dropdown",{"mode":[1],"shape":[1],"disabled":[4],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal",[[4,"wcs-modal",{"backdrop":[516],"show":[1540],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1537,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[1537]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[1028]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[1537],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[1537],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[513],"position":[513]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[1028],"showLabel":[1028,"show-label"],"value":[1026]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"icon":[8],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[1537]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
 });

package/dist/types/components/button/button.d.ts

@@ -1,5 +1,6 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
-import { WcsButtonType, WcsButtonMode, WcsButtonShape } from './button-interface';
+import { MDCRipple } from '@material/ripple';
+import { WcsButtonMode, WcsButtonShape, WcsButtonType } from './button-interface';
 /**
  * Button component, can also be a link when specifying href.
  */
@@ -22,6 +23,7 @@ export declare class Button implements ComponentInterface {
    * Specify wether the button should have a ripple effect or not.
    */
   ripple: boolean;
+  mdcRipple: MDCRipple;
   /**
    * Specify the shape of the button.
    */
@@ -31,7 +33,9 @@ export declare class Button implements ComponentInterface {
    */
   mode: WcsButtonMode;
   onClick(ev: Event): void;
-  render(): any;
   componentDidLoad(): void;
-  private addRippleEffect;
+  private enabledRippleEffect;
+  private disabledRippleEffect;
+  onRippleChange(): void;
+  render(): any;
 }