@seniorsistemas/tecnologia-webcomponents/dist/collection/components/product-header/product-header.js

A webcomponents library for Senior Sistemas - Suite BPM products.

import { Component, Host, h, Prop, Event } from '@stencil/core';
import { defaultTheme } from '../../defaultTheme';
export class ProductHeader {
  constructor() {
    this.theme = defaultTheme;
    /**
     * Set `false` to remove `cursor: pointer` from title
     * @summary when `false` this property disable `titleClicked` event.
     * @default true
     */
    this.titleCursorPointer = true;
    /**
     * Use to make a bar fixed on top
     * @default true
     */
    this.sticky = true;
    this.handleClick = () => {
      if (this.titleCursorPointer)
        this.titleClicked.emit();
    };
  }
  render() {
    return (h(Host, null,
      h("header", { class: `text-title ${this.sticky && 'sticky'}` },
        h("div", { class: "before-title" },
          h("slot", { name: "before-title" })),
        h("div", { class: "title", style: { cursor: this.titleCursorPointer && 'pointer' }, onClick: this.handleClick }, this.titleProduct),
        h("div", { class: "content" },
          h("slot", { name: "content" })))));
  }
  static get is() { return "tec-product-header"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["product-header.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["product-header.css"]
  }; }
  static get properties() { return {
    "theme": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "TecnologiaTheme",
        "resolved": "TecnologiaTheme.dark | TecnologiaTheme.light",
        "references": {
          "TecnologiaTheme": {
            "location": "import",
            "path": "../interfaces"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "theme",
      "reflect": true,
      "defaultValue": "defaultTheme"
    },
    "titleProduct": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The product name"
      },
      "attribute": "title-product",
      "reflect": false
    },
    "titleCursorPointer": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "when `false` this property disable `titleClicked` event.",
            "name": "summary"
          }, {
            "text": "true",
            "name": "default"
          }],
        "text": "Set `false` to remove `cursor: pointer` from title"
      },
      "attribute": "title-cursor-pointer",
      "reflect": false,
      "defaultValue": "true"
    },
    "sticky": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "true",
            "name": "default"
          }],
        "text": "Use to make a bar fixed on top"
      },
      "attribute": "sticky",
      "reflect": true,
      "defaultValue": "true"
    }
  }; }
  static get events() { return [{
      "method": "titleClicked",
      "name": "title-clicked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "text": "void",
            "name": "returns"
          }],
        "text": "Emitted when the title was clicked"
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
}