@claromentis/design-system/dist/collection/components/cla-picker/cla-picker.js

Claromentis Design System Component Library

import { h } from '@stencil/core';
import { findItemLabel, pickerGroupMultiselect, propagateFocusEvent } from '../../utils/utils';
/**
 *  @slot - Slot for icon if not using the `<cla-icon>`
 */
export class ClaPicker {
  constructor() {
    this.pickerId = `cla-p-${pickerIds++}`;
    this.pickerLabelId = `${this.pickerId}-lbl`;
    /**
     * Propagate a focus event.
     *
     * Used to propagate `<input>` focus events through the Shadow DOM boundary
     * in the case that they aren't by the browser.
     *
     * @param {FocusEvent} event
     */
    this.onFocus = (event) => {
      propagateFocusEvent(this.el, event);
      this.el.querySelector('.cla-picker-item').classList.add("cla-picker-focus");
    };
    this.onBlur = () => {
      this.claPickerBlur.emit();
      this.el.querySelector('.cla-picker-item').classList.remove("cla-picker-focus");
    };
    this.name = undefined;
    this.value = undefined;
    this.displayinput = false;
    this.block = false;
    this.image = undefined;
    this.iconid = undefined;
    this.pickerLabelText = undefined;
    this.showlabeltext = true;
    this.checked = false;
    this.disabled = false;
  }
  componentDidLoad() {
    this.claPickerDidLoad.emit();
  }
  componentWillLoad() {
    let label = findItemLabel(this.el);
    this.showlabeltext ? this.pickerLabelText = label.innerText : false;
    this.isMultiselectable = pickerGroupMultiselect(this.el);
    this.inputType = this.isMultiselectable ? "checkbox" : "radio";
  }
  onClick() {
    if (this.checked) {
      this.claPickerDeselect.emit();
    }
    else {
      this.claPickerSelect.emit({
        value: this.value
      });
    }
  }
  hostData() {
    const { el, checked, disabled, block } = this;
    const label = findItemLabel(el);
    if (label) {
      label.id = this.pickerLabelId;
    }
    return {
      "tab-index": "0",
      class: {
        "cla-picker": true,
        "cla-picker-checked": checked,
        "cla-picker-disabled": disabled,
        "cla-picker-block": block,
      }
    };
  }
  /**
   * Get the map of CSS classes for the button.
   *
   * @return CssClassMap
   */
  getItemClassMap() {
    return {
      'cla-picker-item': true,
      'media': true,
      'cla-picker-show-text': this.showlabeltext
    };
  }
  render() {
    return ([
      h("span", { class: "cla-picker-wrapper" }, h("div", { class: this.getItemClassMap() }, this.iconid ?
        h("cla-icon", { status: `cla-icon${this.checked ? "-checked" : "-unchecked"} sc-cla-icon`, class: `${this.checked ? "icon-checked" : ""}`, iconid: this.iconid })
        :
          h("span", { class: `${this.checked ? "icon-checked" : ""} align-self-center d-flex` }, h("slot", null)), this.displayinput ? h("span", { class: `cla-${this.inputType}-lg align-self-center` }, h("span", { class: `cla-${this.inputType}-input align-self-center` })) : null, h("div", { class: "align-self-center media-body cla-picker-label" }, this.pickerLabelText))),
      h("input", { "aria-checked": this.checked, "aria-labelledby": this.pickerLabelId, class: "cla-picker-input", checked: this.checked, disabled: this.disabled, name: this.name, onFocus: this.onFocus, onBlur: this.onBlur, role: this.inputType, type: `${this.isMultiselectable ? "checkbox" : "radio"}`, value: this.value })
    ]);
  }
  static get is() { return "cla-picker"; }
  static get originalStyleUrls() {
    return {
      "$": ["cla-picker.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["cla-picker.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The element name submitted to the form"
        },
        "attribute": "name",
        "reflect": false
      },
      "value": {
        "type": "any",
        "mutable": true,
        "complexType": {
          "original": "any | null",
          "resolved": "any",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Select input value"
        },
        "attribute": "value",
        "reflect": false
      },
      "displayinput": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If 'true', the picker will show the input (checkbox if multiselectable, radio if not)"
        },
        "attribute": "displayinput",
        "reflect": false,
        "defaultValue": "false"
      },
      "block": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "if 'block=\"true\"', 'block' or 'block=\"block\"' (i.e. true) the picker will display as a block (`<cla-item>` orientate property must be set to 'vertical')"
        },
        "attribute": "block",
        "reflect": false,
        "defaultValue": "false"
      },
      "image": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "SVG image code"
        },
        "attribute": "image",
        "reflect": false
      },
      "iconid": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "cla-icon id e.g. glyphicons-basic-158-thumbnails-small"
        },
        "attribute": "iconid",
        "reflect": false
      },
      "pickerLabelText": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The picker item text."
        },
        "attribute": "picker-label-text",
        "reflect": false
      },
      "showlabeltext": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If 'true', the picker label text will be shown"
        },
        "attribute": "showlabeltext",
        "reflect": false,
        "defaultValue": "true"
      },
      "checked": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If `true`, the picker is selected."
        },
        "attribute": "checked",
        "reflect": false,
        "defaultValue": "false"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If `true`, the user cannot interact with the picker."
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "claPickerDidLoad",
        "name": "claPickerDidLoad",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the picker loads."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "claPickerSelect",
        "name": "claPickerSelect",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the picker is clicked."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "claPickerDeselect",
        "name": "claPickerDeselect",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the selected picker is clicked."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "claPickerFocus",
        "name": "claPickerFocus",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the picker has focus."
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }, {
        "method": "claPickerBlur",
        "name": "claPickerBlur",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the picker loses focus."
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "click",
        "method": "onClick",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
let pickerIds = 0;