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

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

@@ -12,23 +12,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         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 { h, Host } from '@stencil/core';
-import { Generate } from '../../../helper/generate';
-import { NumberHelper } from '../../../helper/number-helper';
-import { StringHelper } from '../../../helper/string-helper';
-import { Validators } from '../../../helper/validators';
-import Bcm from '../../../models/bcm';
-import { CaptionTemplate } from '../../../templates/caption-template';
-import { InputTemplate } from "../../../templates/input-template";
-import cs from 'classnames';
-import { delay } from '../../../utils/utils';
-import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Host, h } 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 { inputStyle } from "./input.style";
+import { delay } from "@bcm/utils";
+import { NumberHelper, StringHelper, Validators } from "@bcm/helpers";
+import { defaultIcons } from "./types";
 export class BcmInput {
   constructor() {
     this.isBlur = false;
     this._id = Generate.UID();
     this._internal_id = Generate.UID();
-    this.value = '';
+    this.value = "";
     this.size = Bcm.Size.medium;
     this.label = undefined;
     this.pattern = undefined;
@@ -44,10 +43,8 @@ export class BcmInput {
     this.required = false;
     this.fullWidth = false;
     this.noDefaultIcon = undefined;
-    this.disableWatchValue = false // datetimepicker
-    ;
-    this.passwordToggle = false // type password
-    ;
+    this.disableWatchValue = false;
+    this.passwordToggle = false;
     this.maxLength = null;
     this.minLength = null;
     this.unitPrefix = null;
@@ -66,7 +63,7 @@ export class BcmInput {
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
     this.inValid = false;
-    this.valueCache = '';
+    this.valueCache = "";
     this.focused = false;
     this.isPasswordVisible = false;
   }
@@ -208,8 +205,8 @@ export class BcmInput {
     return false;
   }
   handleClear(e) {
-    this.inputElement.value = '';
-    this.value = '';
+    this.inputElement.value = "";
+    this.value = "";
     this.inputElement.focus();
     this.clear.emit(e);
     this.change.emit(this.value);
@@ -369,32 +366,47 @@ export class BcmInput {
     }
   }
   render() {
-    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, 
+    // unitPrefix,
+    noCaption, required, hidden, _id, autocomplete, _prefix, _suffix, } = this;
     const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
-    const hostClasses = cs('bcm-input', `bcm-input__container--${size}`, {
+    const { host, inputContainer, input, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider } = inputStyle({
+      size,
+      fullWidth,
+      // şüpheli kısımlar
+      focused: focused,
+      clearable: isActiveClearable,
+      disabled,
+      readonly,
+      invalid: inValid,
+      unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+      // 'empty': value?.length < 1,
+      error: captionType === "error",
       hidden,
-      // 'no-margin': noMargin,
-      'full-width': fullWidth
     });
-    return (h(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id, id: _id + "-label" }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
+    let _type = type;
+    switch (type) {
+      case "password":
+        _type = isPasswordVisible ? "text" : "password";
+        break;
+      case "color":
+        _type = "text";
+        break;
+      case "number":
+        _type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? "text" : type;
+        break;
+    }
+    return (h(Host, { class: host(), onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: inputContainer(), id: _id + "-container" }, type === "color" && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
+        backgroundColor: value,
+      } })), h("div", { class: slotClass() }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix })), h("input", { class: input(), id: _id + "-input", type: _type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, onInput: _event => this.handleInput(), onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), autoComplete: autocomplete ? "on" : "off", required: required, ref: el => (this.inputElement = el) }), h("div", { class: slotClass() }, isActiveClearable && (h("button", { type: "button", class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }), (type === "password" || type === "text") && passwordToggle && (h("button", { type: "button", class: clearButton(), onClick: () => this.changePasswordVisibility() }, h("i", { class: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("i", { class: defaultIcons[type] })), type === "number" && (h("div", { class: controls() }, h("button", { type: "button", onClick: () => this.stepUpOrDown("up"), class: cs(controlsBtn(), controlsBtnUp()) }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", onClick: () => this.stepUpOrDown("down"), class: cs(controlsBtn(), controlsBtnDown()) }, h("i", { class: "fas fa-caret-down" })))), type === "color" && this.isEyeDropperSupported() && (h("button", { type: "button", class: clearButton(), onClick: () => this.eyeDropper() }, h("i", { class: "far fa-eye-dropper" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
       h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
   }
   static get is() { return "bcm-input"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["input.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -412,7 +424,7 @@ export class BcmInput {
       },
       "_internal_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -444,11 +456,11 @@ export class BcmInput {
         },
         "attribute": "value",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
@@ -471,7 +483,7 @@ export class BcmInput {
       },
       "label": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -488,7 +500,7 @@ export class BcmInput {
       },
       "pattern": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -505,7 +517,7 @@ export class BcmInput {
       },
       "tooltip": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -522,7 +534,7 @@ export class BcmInput {
       },
       "placeholder": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -539,7 +551,7 @@ export class BcmInput {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -557,7 +569,7 @@ export class BcmInput {
       },
       "readonly": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -575,7 +587,7 @@ export class BcmInput {
       },
       "clearable": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -593,7 +605,7 @@ export class BcmInput {
       },
       "autocomplete": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -611,7 +623,7 @@ export class BcmInput {
       },
       "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -628,7 +640,7 @@ export class BcmInput {
       },
       "type": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "InputTypes",
           "resolved": "\"color\" | \"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
@@ -651,7 +663,7 @@ export class BcmInput {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -669,7 +681,7 @@ export class BcmInput {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -687,7 +699,7 @@ export class BcmInput {
       },
       "fullWidth": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -705,7 +717,7 @@ export class BcmInput {
       },
       "noDefaultIcon": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -722,7 +734,7 @@ export class BcmInput {
       },
       "disableWatchValue": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -740,7 +752,7 @@ export class BcmInput {
       },
       "passwordToggle": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -758,7 +770,7 @@ export class BcmInput {
       },
       "maxLength": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -776,7 +788,7 @@ export class BcmInput {
       },
       "minLength": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -794,7 +806,7 @@ export class BcmInput {
       },
       "unitPrefix": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -812,7 +824,7 @@ export class BcmInput {
       },
       "unit": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -829,7 +841,7 @@ export class BcmInput {
       },
       "decimal": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -847,7 +859,7 @@ export class BcmInput {
       },
       "min": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -864,7 +876,7 @@ export class BcmInput {
       },
       "max": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -881,7 +893,7 @@ export class BcmInput {
       },
       "step": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -915,7 +927,7 @@ export class BcmInput {
       },
       "noCaption": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -973,7 +985,7 @@ export class BcmInput {
       },
       "customErrorMessage": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -990,7 +1002,7 @@ export class BcmInput {
       },
       "_prefix": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -1007,7 +1019,7 @@ export class BcmInput {
       },
       "_suffix": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",

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

@@ -5,16 +5,17 @@
 import { tv } from "tailwind-variants";
 export const inputStyle = tv({
   slots: {
-    host: "bcm-input2 bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
+    host: "bcm-input bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
     base: "",
-    inputContainer: ["bcm-input2__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-px-3"],
+    inputContainer: ["bcm-input__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-px-3"],
     input: [
-      "bcm-input2-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none tw-text-ellipsis",
-      "tw-text-color-default placeholder:tw-text-color-placeholder",
-      "[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+      "bcm-input-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none tw-text-ellipsis",
+      "tw-text-color placeholder:tw-text-color-placeholder placeholder:tw-font-normal",
+      "tw-font-sans tw-antialiased tw-font-medium",
+      "[appearance:textfield][&::-webkit-search-decoration]:tw-appearance-none [&::-webkit-search-cancel-button]:tw-appearance-none [&::-webkit-search-results-button]:tw-appearance-none [&::-webkit-search-results-decoration]:tw-appearance-none [&::-webkit-calendar-picker-indicator]:tw-appearance-none [&::-webkit-inner-spin-button]:tw-appearance-none [&::-webkit-outer-spin-button]:tw-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", "hover:tw-text-color"],
+    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"],
     controls: "number-controls -tw-mr-3 tw-flex tw-h-full tw-w-fit tw-flex-col tw-items-center tw-justify-between",
     controlsBtn: [
       "number-control-button tw-w-7 tw-flex-1 tw-cursor-pointer tw-appearance-none tw-border-0 tw-border-l tw-border-solid tw-border-color tw-bg-transparent tw-p-0 tw-text-2 tw-leading-none  tw-text-color-placeholder",
@@ -26,19 +27,19 @@ export const inputStyle = tv({
   variants: {
     size: {
       small: {
-        host: "bcm-input2__container--small",
+        host: "bcm-input__container--small",
         inputContainer: "input2-size-small tw-h-6",
-        input: "tw-text-2",
+        input: "tw-text-size-4",
       },
       medium: {
-        host: "bcm-input2__container--medium",
+        host: "bcm-input__container--medium",
         inputContainer: "input2-size-medium tw-h-8",
-        input: "tw-text-3",
+        input: "tw-text-size-5",
       },
       large: {
-        host: "bcm-input2__container--large",
+        host: "bcm-input__container--large",
         inputContainer: "input2-size-large tw-h-10",
-        input: "tw-text-4",
+        input: "tw-text-size-6",
       },
     },
     fullWidth: {
@@ -75,7 +76,7 @@ export const inputStyle = tv({
       },
       false: {
         controlsBtn: "hover:tw-bg-color-base-hover hover:tw-text-color",
-        inputContainer: ["has-[:not([disabled]):focus]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+        inputContainer: ["has-[:not([disabled]):focus-visible]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
       },
     },
     readonly: {
@@ -86,7 +87,7 @@ export const inputStyle = tv({
     invalid: {
       true: {
         host: "invalid",
-        inputContainer: "tw-border-color-error has-[:not([disabled]):focus]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
+        inputContainer: "tw-border-color-error has-[:not([disabled]):focus-visible]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
       },
     },
     unit: {

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

@@ -2,9 +2,20 @@
  * 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 { forceUpdate, h, Host } from '@stencil/core';
 import cs from 'classnames';
 import { Generate, Tooltip } from '@bcm/helpers';
+import { IsLoad } from '@bcm/decorator';
 export class BcmMenu {
   constructor() {
     this._id = Generate.UID();
@@ -515,3 +526,6 @@ export class BcmMenu {
       }];
   }
 }
+__decorate([
+  IsLoad()
+], BcmMenu.prototype, "el", void 0);

package/dist/collection/components/molecules/modal/modal-footer.js

@@ -0,0 +1,41 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import { modalStyle } from "./modal.style";
+export class BcmModalFooter {
+  constructor() {
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    const { footerContent } = modalStyle();
+    return (h(Host, { class: footerContent() }, h("slot", null)));
+  }
+  static get is() { return "bcm-modal-footer"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/modal/modal-header.js

@@ -0,0 +1,39 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+export class BcmModalHeader {
+  constructor() {
+    this._id = Generate.UID();
+    this.el.slot = "header";
+  }
+  render() {
+    return (h(Host, { class: "tw-inline" }, h("slot", null)));
+  }
+  static get is() { return "bcm-modal-header"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}