bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.3

package/dist/collection/components/molecules/alert/alert.css

@@ -0,0 +1,191 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+.size-1 {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.size-2 {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.size-3 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.size-4 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.size-5 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.size-6 {
+  font-size: 30px;
+  line-height: 38px;
+}
+
+.size-7 {
+  font-size: 38px;
+  line-height: 46px;
+}
+
+.size-8 {
+  font-size: 46px;
+  line-height: 54px;
+}
+
+.size-9 {
+  font-size: 56px;
+  line-height: 64px;
+}
+
+.weight-regular {
+  font-weight: 400;
+}
+
+.weight-semibold {
+  font-weight: 500;
+}
+
+/**
+ * Generator
+ */
+.input-size-large {
+  height: 40px;
+}
+
+.input-size-medium {
+  height: 32px;
+}
+
+.input-size-small {
+  height: 24px;
+}
+
+.resize-none textarea {
+  resize: none;
+}
+
+.resize-vertical textarea {
+  resize: vertical;
+}
+
+.resize-auto textarea {
+  height: auto;
+  resize: none;
+}
+
+.textarea-size-large {
+  padding: 4px 0 0 4px;
+  min-height: 40px;
+}
+.textarea-size-large .bcm-input-element {
+  min-height: calc((40px - 8px) + 2px);
+}
+.textarea-size-large .input-clear-button {
+  height: calc( 40px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-medium {
+  padding: 4px 0 0 4px;
+  min-height: 32px;
+}
+.textarea-size-medium .bcm-input-element {
+  min-height: calc((32px - 8px) + 2px);
+}
+.textarea-size-medium .input-clear-button {
+  height: calc( 32px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-small {
+  padding: 0px 0 0 4px;
+  min-height: 24px;
+}
+.textarea-size-small .bcm-input-element {
+  min-height: calc((24px - 8px) + 2px);
+}
+.textarea-size-small .input-clear-button {
+  height: calc( 24px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.bcm-alert {
+  display: block;
+  width: 100%;
+  max-width: 400px;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  position: relative;
+  grid-gap: 8px;
+}
+.bcm-alert.hidden {
+  display: none;
+}
+.bcm-alert.full-width {
+  max-width: 100%;
+}
+.bcm-alert__status-info {
+  border: 1px solid var(--bcm-color-blue-3);
+  background-color: var(--bcm-color-blue-1);
+}
+.bcm-alert__status-error {
+  border: 1px solid var(--bcm-color-red-3);
+  background-color: var(--bcm-color-red-1);
+}
+.bcm-alert__status-warning {
+  border: 1px solid var(--bcm-color-warmyellow-3);
+  background-color: var(--bcm-color-warmyellow-1);
+}
+.bcm-alert__status-success {
+  border: 1px solid var(--bcm-color-green-3);
+  background-color: var(--bcm-color-green-1);
+}
+.bcm-alert__type-banner {
+  border: none;
+}
+.bcm-alert__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+.bcm-alert__header-message {
+  display: flex;
+  align-items: center;
+  grid-gap: 8px;
+  color: var(--bcm-color-grey-8);
+}
+.bcm-alert__header-dismiss {
+  display: flex;
+  position: absolute;
+  top: -1px;
+  right: 0;
+  padding: 16px;
+  color: var(--bcm-color-grey-8);
+}
+.bcm-alert__header-dismiss:hover {
+  cursor: pointer;
+  color: var(--bcm-color-grey-9);
+}
+.bcm-alert__content {
+  color: var(--bcm-color-grey-8);
+}
+.bcm-alert__content p {
+  margin: 0;
+  padding: 0;
+}

package/dist/collection/components/molecules/alert/alert.js

@@ -0,0 +1,298 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Prop, h, Element, Event, Host, Component } from '@stencil/core';
+import { StatusProps, TypeProps } from './types';
+import cs from 'classnames';
+import alertStates from '../states/alert.states';
+import { Generate } from '../../../helper/generate';
+import { StringHelper } from '../../../helper/string-helper';
+import { AttrReflect } from '../../../decorators/property-decorators';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+export class BcmAlert {
+  constructor() {
+    this.hidden = false;
+    this._id = Generate.UID();
+    this.status = StatusProps.info;
+    this.type = TypeProps.basic;
+    this.icon = false;
+    this.bigIcon = false;
+    this.fullWidth = false;
+  }
+  componentWillRender() {
+    if (this.dismissible != undefined) {
+      if (this.dismissible == '') {
+        this.dismissible = true;
+      }
+      else if (typeof this.dismissible === 'string' && this.dismissible == 'false' || this.dismissible == 'true') {
+        this.dismissible = StringHelper.elementBooleanCheck(this.dismissible);
+      }
+      else {
+        return;
+      }
+    }
+    this.setData();
+  }
+  dismiss(e) {
+    this.alertdismissible.emit(e);
+    this.el.remove();
+  }
+  getStateData() {
+    return alertStates.getValue(this._id);
+  }
+  setData() {
+    const { status, type, bigIcon } = this;
+    alertStates.setValue({
+      id: this._id,
+      status,
+      type,
+      bigIcon,
+    });
+  }
+  render() {
+    const { fullWidth, status, type, icon, bigIcon, _title, hidden, dismissible, description } = this;
+    const hostClasses = cs('bcm-alert', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
+      'full-width': fullWidth,
+      hidden,
+    });
+    const headerMessage = cs('bcm-alert__header-message', !!description ? 'size-3' : 'size-2');
+    const state = this.getStateData();
+    return (h(Host, { class: hostClasses },
+      h("span", { hidden: true },
+        h("slot", null)),
+      h("header", { class: "bcm-alert__header" },
+        h("span", { class: headerMessage },
+          (bigIcon || icon) && h("bcm-icon", { icon: state.icon }),
+          _title),
+        dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "fal fa-times" })))),
+      h("main", { class: "bcm-alert__content size-2" },
+        description && h("p", null, description),
+        h("slot", null))));
+  }
+  static get is() { return "bcm-alert"; }
+  static get originalStyleUrls() { return {
+    "$": ["alert.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["alert.css"]
+  }; }
+  static get properties() { return {
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "_id": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "_title": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_title",
+      "reflect": false
+    },
+    "description": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "status": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "StatusProp",
+        "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+        "references": {
+          "StatusProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": false,
+      "defaultValue": "StatusProps.info"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "TypeProp",
+        "resolved": "\"banner\" | \"basic\"",
+        "references": {
+          "TypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "TypeProps.basic"
+    },
+    "dismissible": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dismissible",
+      "reflect": false
+    },
+    "icon": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "bigIcon": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "big-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "alertdismissible",
+      "name": "bcm-alert-dismissible",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmAlert.prototype, "el", void 0);
+__decorate([
+  AttrReflect("title")
+], BcmAlert.prototype, "_title", void 0);

package/dist/collection/components/molecules/alert/types.js

@@ -0,0 +1,23 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+/**
+ * 'status' prop predefined values
+ */
+export var StatusProps;
+(function (StatusProps) {
+  StatusProps["info"] = "info";
+  StatusProps["error"] = "error";
+  StatusProps["warning"] = "warning";
+  StatusProps["success"] = "success";
+  StatusProps["default"] = "default";
+})(StatusProps || (StatusProps = {}));
+/**
+ * 'type' prop predefined values
+ */
+export var TypeProps;
+(function (TypeProps) {
+  TypeProps["banner"] = "banner";
+  TypeProps["basic"] = "basic";
+})(TypeProps || (TypeProps = {}));

package/dist/collection/components/molecules/breadcrumb/breadcrumb.css

@@ -0,0 +1,201 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+.size-1 {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.size-2 {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.size-3 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.size-4 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.size-5 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.size-6 {
+  font-size: 30px;
+  line-height: 38px;
+}
+
+.size-7 {
+  font-size: 38px;
+  line-height: 46px;
+}
+
+.size-8 {
+  font-size: 46px;
+  line-height: 54px;
+}
+
+.size-9 {
+  font-size: 56px;
+  line-height: 64px;
+}
+
+.weight-regular {
+  font-weight: 400;
+}
+
+.weight-semibold {
+  font-weight: 500;
+}
+
+/**
+ * Generator
+ */
+.input-size-large {
+  height: 40px;
+}
+
+.input-size-medium {
+  height: 32px;
+}
+
+.input-size-small {
+  height: 24px;
+}
+
+.resize-none textarea {
+  resize: none;
+}
+
+.resize-vertical textarea {
+  resize: vertical;
+}
+
+.resize-auto textarea {
+  height: auto;
+  resize: none;
+}
+
+.textarea-size-large {
+  padding: 4px 0 0 4px;
+  min-height: 40px;
+}
+.textarea-size-large .bcm-input-element {
+  min-height: calc((40px - 8px) + 2px);
+}
+.textarea-size-large .input-clear-button {
+  height: calc( 40px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-medium {
+  padding: 4px 0 0 4px;
+  min-height: 32px;
+}
+.textarea-size-medium .bcm-input-element {
+  min-height: calc((32px - 8px) + 2px);
+}
+.textarea-size-medium .input-clear-button {
+  height: calc( 32px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-small {
+  padding: 0px 0 0 4px;
+  min-height: 24px;
+}
+.textarea-size-small .bcm-input-element {
+  min-height: calc((24px - 8px) + 2px);
+}
+.textarea-size-small .input-clear-button {
+  height: calc( 24px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.bcm-breadcrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  color: var(--bcm-color-grey-7);
+}
+.bcm-breadcrumb__item {
+  display: flex;
+  align-items: center;
+}
+.bcm-breadcrumb .seperator {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: var(--bcm-color-grey-7);
+}
+.bcm-breadcrumb bcm-link:hover {
+  color: var(--bcm-color-grey-7);
+}
+.bcm-breadcrumb .active {
+  color: var(--bcm-color-grey-8);
+}
+.bcm-breadcrumb .active:hover {
+  color: var(--bcm-color-grey-8);
+}
+.bcm-breadcrumb .is-link:hover {
+  color: var(--bcm-color-prime-blue-6);
+}
+.bcm-breadcrumb .is-link:hover bcm-link,
+.bcm-breadcrumb .is-link:hover bcm-icon {
+  color: var(--bcm-color-prime-blue-6);
+}
+.bcm-breadcrumb__dropdown-item {
+  position: relative;
+  display: inline-flex;
+}
+.bcm-breadcrumb__dropdown-item summary {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.bcm-breadcrumb__dropdown-item summary > span {
+  display: inline-flex;
+  align-items: center;
+}
+.bcm-breadcrumb__dropdown-item summary::-webkit-details-marker {
+  display: none;
+}
+.bcm-breadcrumb__dropdown-item summary:focus {
+  outline: none;
+}
+.bcm-breadcrumb__dropdown-item summary.open bcm-link,
+.bcm-breadcrumb__dropdown-item summary.open bcm-icon {
+  color: var(--bcm-color-prime-blue-6);
+}
+.bcm-breadcrumb__dropdown-item summary .down-icon {
+  margin-left: 4px;
+}
+.bcm-breadcrumb__dropdown-submenu {
+  position: absolute;
+  min-width: 140px;
+  background-color: var(--bcm-color-grey-1);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  margin-top: 4px;
+}
+.bcm-breadcrumb__dropdown-submenu .dropdown-item {
+  display: flex;
+  padding: 4px 8px;
+}
+.bcm-breadcrumb__dropdown-submenu .dropdown-item bcm-link {
+  width: 100%;
+}