bromcom-ui 2.12.1-test.1 → 3.0.0-preview.0

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

@@ -13,14 +13,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, Host } from '@stencil/core';
-import cs from 'classnames';
 import { IsLoad } from '../../../decorators/is-load-decorator';
 import { Generate } from '../../../helper/generate';
 import Bcm from '../../../models/bcm';
 import { CaptionTemplate } from '../../../templates/caption-template';
-import { InputTemplate } from '../../../templates/input-template';
 import { delay } from '../../../utils/utils';
-import { ResizeType } from './types';
+import { textareaStyle } from './textarea.style';
 export class BcmTextarea {
   constructor() {
     this._id = Generate.UID();
@@ -29,6 +27,7 @@ export class BcmTextarea {
     this.value = undefined;
     this.placeholder = undefined;
     this.label = undefined;
+    this.tooltip = undefined;
     this.name = undefined;
     this.required = false;
     this.caption = undefined;
@@ -40,7 +39,7 @@ export class BcmTextarea {
     this.disabled = undefined;
     this.readonly = false;
     this.clearable = undefined;
-    this.resize = ResizeType.vertical;
+    this.resize = "vertical";
     this.fullWidth = false;
     this.maxLength = undefined;
     this.focused = false;
@@ -117,29 +116,29 @@ export class BcmTextarea {
     e.stopPropagation();
   }
   render() {
-    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required } = this;
-    const hostClasses = cs('bcm-input', {
+    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required, tooltip } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
+    const { host, inputContainer, input, slotClass, clearButton } = textareaStyle({
+      size,
+      fullWidth,
+      // şüpheli kısımlar
+      focused: focused,
+      clearable: isActiveClearable,
+      disabled,
+      readonly,
+      // 'empty': value?.length < 1,
+      error: captionType === "error",
       hidden,
-      'full-width': fullWidth,
+      resize,
     });
-    return (h(Host, { class: hostClasses }, label && h("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { elementType: Bcm.HtmlElementType.textarea, id: _id, value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, clearable: clearable, resize: resize, readonly: readonly, size: size, focused: focused, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), handleClear: (e) => this.handleClear(e), ref: (el) => this.textarea = el, captionType: captionType }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
+    return (h(Host, { class: host(), onClick: () => this.onBcmFocus() }, label && h("bcm-label", { tooltip: tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: inputContainer(), id: _id + "-container" }, h("div", { class: slotClass() }, h("slot", { name: "prefix" })), h("textarea", { id: _id + "-input", value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, class: input(), readonly: readonly, onInput: _event => this.handleInput(), onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), ref: (el) => this.textarea = el }), isActiveClearable && (h("button", { type: "button", class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("div", { class: slotClass() }, h("slot", { name: "suffix" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
   }
   static get is() { return "bcm-textarea"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["textarea.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["textarea.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -157,7 +156,7 @@ export class BcmTextarea {
       },
       "_internal_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -175,7 +174,7 @@ export class BcmTextarea {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -210,7 +209,7 @@ export class BcmTextarea {
       },
       "placeholder": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -227,7 +226,7 @@ export class BcmTextarea {
       },
       "label": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -242,9 +241,26 @@ export class BcmTextarea {
         "attribute": "label",
         "reflect": false
       },
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
+      },
       "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -261,7 +277,7 @@ export class BcmTextarea {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -296,7 +312,7 @@ export class BcmTextarea {
       },
       "noCaption": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -354,7 +370,7 @@ export class BcmTextarea {
       },
       "rows": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -372,7 +388,7 @@ export class BcmTextarea {
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
@@ -395,7 +411,7 @@ export class BcmTextarea {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -412,7 +428,7 @@ export class BcmTextarea {
       },
       "readonly": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -430,7 +446,7 @@ export class BcmTextarea {
       },
       "clearable": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -446,17 +462,12 @@ export class BcmTextarea {
         "reflect": false
       },
       "resize": {
-        "type": "any",
-        "mutable": true,
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "ResizeTypes | any",
-          "resolved": "any",
-          "references": {
-            "ResizeTypes": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
+          "original": "\"vertical\" | \"horizontal\" | \"both\" | \"none\"",
+          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -466,11 +477,11 @@ export class BcmTextarea {
         },
         "attribute": "resize",
         "reflect": false,
-        "defaultValue": "ResizeType.vertical"
+        "defaultValue": "\"vertical\""
       },
       "fullWidth": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -488,7 +499,7 @@ export class BcmTextarea {
       },
       "maxLength": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",

package/dist/collection/components/molecules/textarea/textarea.style.js

@@ -0,0 +1,122 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const textareaStyle = tv({
+  slots: {
+    host: "bcm-textarea bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
+    base: "",
+    inputContainer: ["bcm-textarea__container", "tw-bg-color-base tw-border tw-border-solid tw-border-color tw-rounded", "tw-flex tw-items-center tw-justify-between tw-gap-2", "tw-pl-3", "tw-relative"],
+    input: [
+      "bcm-textarea-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none",
+      "tw-text-color placeholder:tw-text-color-placeholder placeholder:tw-font-normal",
+      "tw-font-sans tw-antialiased tw-font-medium",
+      "[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+    ],
+    slotClass: "tw-flex tw-items-center tw-justify-between tw-gap-2 empty:tw-hidden tw-text-color-placeholder",
+    clearButton: [
+      "clear-button tw-cursor-pointer tw-appearance-none tw-border-0 tw-text-color-placeholder tw-text-size-inherit tw-bg-transparent tw-py-1 tw-px-2 -tw-mx-2 tw-w-8 tw-flex tw-items-center tw-justify-center",
+      "hover:tw-text-color",
+      "tw-absolute tw-right-1 tw-top-0.5 "
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-textarea__container--small",
+        inputContainer: "input2-size-small tw-min-h-6",
+        input: "tw-text-size-4 tw-min-h-6",
+      },
+      medium: {
+        host: "bcm-textarea__container--medium",
+        inputContainer: "input2-size-medium tw-min-h-8",
+        input: "tw-text-size-5 tw-min-h-8",
+      },
+      large: {
+        host: "bcm-textarea__container--large",
+        inputContainer: "input2-size-large tw-min-h-10",
+        input: "tw-text-size-6 tw-min-h-10",
+      },
+    },
+    fullWidth: {
+      true: {
+        host: "full-width tw-max-w-full",
+      },
+    },
+    noMargin: {
+      true: {
+        host: "no-margin tw-mb-0",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden tw-hidden",
+      },
+    },
+    focused: {
+      true: {
+        host: "focused",
+      },
+    },
+    clearable: {
+      true: {
+        host: "clearable",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled",
+        input: "",
+        inputContainer: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled tw-cursor-not-allowed",
+      },
+      false: {
+        inputContainer: ["has-[:not([disabled]):focus-visible]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    invalid: {
+      true: {
+        host: "invalid",
+        inputContainer: "tw-border-color-error has-[:not([disabled]):focus-visible]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+        inputContainer: "tw-border-color-error",
+      },
+    },
+    resize: {
+      vertical: {
+        input: "tw-resize-y",
+      },
+      horizontal: {
+        input: "tw-resize-x",
+      },
+      both: {
+        input: "tw-resize",
+      },
+      none: {
+        input: "tw-resize-none",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    noMargin: false,
+    fullWidth: false,
+    hidden: false,
+    focused: false,
+    clearable: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    error: false,
+    resize: "vertical",
+  },
+});

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

@@ -5,6 +5,7 @@
 import { Generate, Tooltip } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 import { Host, h } from "@stencil/core";
+import { tooltipStyle } from "./tooltip.style";
 export class BcmTooltip {
   constructor() {
     this._id = Generate.UID();
@@ -12,7 +13,7 @@ export class BcmTooltip {
     this.placement = Bcm.Placement.top;
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
-    this.color = "slate";
+    this.color = "gray";
     this.size = Bcm.Size.medium;
     this.openDelay = 0;
     this.closeDelay = 0;
@@ -68,7 +69,8 @@ export class BcmTooltip {
     this.tooltip.toggle();
   }
   render() {
-    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, h("slot", null)));
+    const { host } = tooltipStyle();
+    return (h(Host, { class: host(), role: "tooltip" }, h("slot", null)));
   }
   static get is() { return "bcm-tooltip"; }
   static get properties() {
@@ -189,7 +191,7 @@ export class BcmTooltip {
         },
         "attribute": "color",
         "reflect": false,
-        "defaultValue": "\"slate\""
+        "defaultValue": "\"gray\""
       },
       "size": {
         "type": "string",

package/dist/collection/components/molecules/tooltip/tooltip.style.js

@@ -0,0 +1,38 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const tooltipStyle = tv({
+  slots: {
+    host: [
+      "bcm-tooltip tw-inline-flex tw-h-fit tw-w-fit",
+    ],
+    tooltip: [
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-whitespace-normal tw-break-words tw-font-semibold",
+      "tw-absolute tw-top-0 tw-left-0 tw-z-tooltip",
+      "tw-opacity-0 tw-transition-opacity tw-duration-300",
+      "tw-max-w-xs tw-py-1 tw-px-3",
+      "tw-pointer-events-none",
+      "tw-block tw-rounded-md",
+      "tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text]"
+    ]
+  },
+  variants: {
+    size: {
+      small: {
+        tooltip: "tw-text-size-3",
+      },
+      medium: {
+        tooltip: "tw-text-size-4",
+      },
+      large: {
+        tooltip: "tw-text-size-5",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});

package/dist/collection/components/organism/datetime-picker/datetime-picker.css

@@ -600,23 +600,23 @@
   -moz-osx-font-smoothing: grayscale;
   margin-bottom: 4px;
   font-weight: 500;
-  color: #475569;
+  color: var(--bcm-ui-color-text-label);
 }
-.bcm-label.tw-text-1 {
-  font-size: 10px;
-  line-height: 18px;
+.bcm-label.tw-text-size-3 {
+  font-size: var(--bcm-ui-font-size-3);
+  line-height: var(--bcm-ui-line-height-3);
 }
-.bcm-label.tw-text-2 {
-  font-size: 12px;
-  line-height: 20px;
+.bcm-label.tw-text-size-4 {
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
-.bcm-label.tw-text-3 {
-  font-size: 14px;
-  line-height: 22px;
+.bcm-label.tw-text-size-5 {
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 
 .bcm-caption-area {
-  color: #dc2626;
+  color: var(--bcm-ui-color-text-caption);
   font-weight: 400;
   justify-content: space-between;
   align-items: flex-start;
@@ -628,17 +628,17 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.bcm-caption-area.tw-text-1 {
-  font-size: 10px;
-  line-height: 18px;
+.bcm-caption-area.tw-text-size-3 {
+  font-size: var(--bcm-ui-font-size-3);
+  line-height: var(--bcm-ui-line-height-3);
 }
-.bcm-caption-area.tw-text-2 {
-  font-size: 12px;
-  line-height: 20px;
+.bcm-caption-area.tw-text-size-4 {
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
-.bcm-caption-area.tw-text-3 {
-  font-size: 14px;
-  line-height: 22px;
+.bcm-caption-area.tw-text-size-5 {
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 
 .picker-input-container {