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

Claromentis Design System Component Library

import { h } from '@stencil/core';
import { lightOrDark } from '../../utils/utils';
export class ClaStatus {
  constructor() {
    this.color = "#000";
    this.shape = "circle";
    this.size = "default";
    this.statusletter = undefined;
    this.badgestyle = undefined;
    this.inverted = undefined;
    this.rtl = undefined;
  }
  /**
  * Get the map of CSS classes for the status.
  *
  * @return CssClassMap
  */
  getClassMap() {
    const shape = this.shape;
    const size = this.size;
    const badgestyle = this.badgestyle;
    const inverted = this.inverted;
    const rtl = this.rtl;
    return {
      'status-indicator-wrapper': true,
      [`cla-status-indicator-square`]: shape === 'square',
      [`cla-status-indicator-xs`]: size === 'x-small',
      [`cla-status-indicator-sm`]: size === 'small',
      [`cla-status-indicator-lg`]: size === 'large',
      [`cla-status-indicator-badge-style`]: badgestyle,
      [`cla-status-indicator-inverted`]: inverted,
      [`cla-status-indicator-rtl-mode`]: rtl
    };
  }
  render() {
    return (h("div", { role: "status", class: this.getClassMap() }, h("span", { style: { background: `${this.color}` }, class: this.statusletter ? "status-indicator has-status-letter" : "status-indicator" }, h("span", { role: "none", class: `status-letter ` + lightOrDark(this.color) }, this.statusletter ? `${this.statusletter}` : "")), h("slot", null)));
  }
  static get is() { return "cla-status-indicator"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["cla-status-indicator.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["cla-status-indicator.css"]
    };
  }
  static get properties() {
    return {
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The color of the status indicator - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed"
        },
        "attribute": "color",
        "reflect": false,
        "defaultValue": "\"#000\""
      },
      "shape": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The shape of the status indicator - can be square or circle"
        },
        "attribute": "shape",
        "reflect": false,
        "defaultValue": "\"circle\""
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The size of the status indicator - can be x-small, small, defaut or large"
        },
        "attribute": "size",
        "reflect": false,
        "defaultValue": "\"default\""
      },
      "statusletter": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "This allows a singlur letter to be put inside the status indicator"
        },
        "attribute": "statusletter",
        "reflect": false
      },
      "badgestyle": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "false",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether to use the badgestyle variant of the indicator - puts padding and a border around the indicator."
        },
        "attribute": "badgestyle",
        "reflect": false
      },
      "inverted": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "false",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether to use the inverted variant of the status indicator."
        },
        "attribute": "inverted",
        "reflect": false
      },
      "rtl": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "false",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether to use the left to right or right to left mode in text status indicators"
        },
        "attribute": "rtl",
        "reflect": false
      }
    };
  }
}