wcs-core 2.5.4 → 2.9.0

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.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) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Indicates the spinner display mode.
+     * Accepted values: `border` or `growing`
+     */
+    this.mode = 'border';
+  }
+};
+Spinner.style = spinnerCss;
+
+exports.wcs_spinner = Spinner;

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.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);--wcs-switch-text-color:var(--wcs-text-medium);display:flex}:host([disabled]){--wcs-switch-text-color:var(--wcs-text-disabled)}.wcs-container{position:relative;display:flex;margin-bottom:0}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color);margin-left:6px;font-weight:500;line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{--wcs-switch-text-color:var(--wcs-primary)}.wcs-checkmark::before{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)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-text-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-light)}:host([disabled][checked]) .wcs-checkmark::before{background-color:var(--wcs-white)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-text-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:3rem;height:1.5rem;border-radius:0.75rem;background-color:var(--wcs-switch-background-color-initial)}.wcs-container:not([aria-disabled]){cursor:pointer}.wcs-container:hover:not([aria-disabled]){--wcs-switch-text-color:var(--wcs-primary)}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) {
+    index.registerInstance(this, hostRef);
+    this.wcsChange = index.createEvent(this, "wcsChange", 7);
+    this.switchId = `wcs-switch-${switchIds++}`;
+    this.name = this.switchId;
+    /**
+     * If `true`, the switch is selected.
+     */
+    this.checked = false;
+    /**
+     * Specifie the alignment of the switch with the label content
+     */
+    this.labelAlignment = 'center';
+    /**
+     * Specify wether the switch is disabled or not.
+     */
+    this.disabled = false;
+  }
+  toggleChange(_event) {
+    this.checked = !this.checked;
+    this.wcsChange.emit({
+      checked: this.checked
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", { onChange: (evt) => this.toggleChange(evt), checked: this.checked, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }), index.h("span", { class: "wcs-checkmark" }), index.h("span", { class: "text" }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+};
+let switchIds = 0;
+Switch.style = switchCss;
+
+exports.wcs_switch = Switch;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+let Tab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabLoaded = index.createEvent(this, "tabLoaded", 7);
+  }
+  componentDidLoad() {
+    this.tabLoaded.emit();
+  }
+  render() {
+    return (index.h(index.Host, { slot: "wcs-tab" }, index.h("slot", null)));
+  }
+};
+
+exports.wcs_tab = Tab;

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

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.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) {
+    index.registerInstance(this, hostRef);
+    this.tabChange = index.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 (index.h(index.Host, null, index.h("div", { class: "wcs-tabs-headers" }, this.headers.map((header, idx) => index.h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: idx }, index.h("span", null, header)))), index.h("div", { class: "wcs-tabs" }, index.h("slot", { name: "wcs-tab" }))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "selectedIndex": ["selectedIndexChanged"],
+    "selectedKey": ["selectedTabkeyChanged"]
+  }; }
+};
+Tabs.style = tabsCss;
+
+exports.wcs_tabs = Tabs;

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

@@ -0,0 +1,224 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+const helpers = require('./helpers-6abce594.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([disabled]) textarea{color:var(--wcs-text-disabled)}: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) {
+    index.registerInstance(this, hostRef);
+    this.wcsChange = index.createEvent(this, "wcsChange", 7);
+    this.wcsInput = index.createEvent(this, "wcsInput", 7);
+    this.wcsBlur = index.createEvent(this, "wcsBlur", 7);
+    this.wcsFocus = index.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 = helpers.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 = helpers.inheritAttributes(this.el, ['title']);
+  }
+  componentDidLoad() {
+    helpers.raf(() => this.runAutoGrow());
+  }
+  runAutoGrow() {
+    const nativeInput = this.nativeInput;
+    if (nativeInput && this.autoGrow) {
+      index.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() {
+    helpers.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 = 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("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 index.getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+let textareaIds = 0;
+Textarea.style = textareaCss;
+
+exports.wcs_textarea = Textarea;