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

package/dist/components/input.js

@@ -3,24 +3,25 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate } from './generate.js';
-import { N as NumberHelper } from './number-helper.js';
-import { S as StringHelper } from './string-helper.js';
-import { V as Validators } from './validators.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
-import { I as InputTemplate } from './input-template.js';
-import { c as classnames } from './index2.js';
+import { i as inputStyle } from './input.style.js';
+import './element-dragger.js';
+import { S as StringHelper } from './string-helper.js';
 import { d as delay } from './utils.js';
-import { I as IsLoad } from './is-load-decorator.js';
+import './color-helper.js';
+import { V as Validators } from './popover.style.js';
+import { N as NumberHelper } from './number-helper.js';
+import { d as defaultIcons } from './types.js';
 import { d as defineCustomElement$5 } from './colorful.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './label.js';
 import { d as defineCustomElement$2 } from './linked.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const inputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.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-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
-
 var __decorate = (undefined && undefined.__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")
@@ -43,7 +44,7 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -59,10 +60,8 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -81,7 +80,7 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
     this.inValid = false;
-    this.valueCache = '';
+    this.valueCache = "";
     this.focused = false;
     this.isPasswordVisible = false;
   }
@@ -223,8 +222,8 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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);
@@ -384,56 +383,80 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   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 = classnames('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: classnames(controlsBtn(), controlsBtnUp()) }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", onClick: () => this.stepUpOrDown("down"), class: classnames(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 watchers() { return {
     "value": ["watchValue"]
   }; }
-  static get style() { return inputCss; }
 }, [4, "bcm-input", {
-    "_id": [1537, "id"],
-    "_internal_id": [1025],
+    "_id": [513, "id"],
+    "_internal_id": [1],
     "value": [1032],
-    "size": [1025],
-    "label": [1025],
-    "pattern": [1025],
-    "tooltip": [1025],
-    "placeholder": [1025],
-    "disabled": [1028],
-    "readonly": [1028],
-    "clearable": [1028],
-    "autocomplete": [1028],
-    "name": [1025],
-    "type": [1025],
-    "hidden": [1028],
-    "required": [1028],
-    "fullWidth": [1028, "full-width"],
-    "noDefaultIcon": [1028, "no-default-icon"],
-    "disableWatchValue": [1028, "disable-watch-value"],
-    "passwordToggle": [1028, "password-toggle"],
-    "maxLength": [1026, "max-length"],
-    "minLength": [1026, "min-length"],
-    "unitPrefix": [1025, "unit-prefix"],
-    "unit": [1025],
-    "decimal": [1028],
-    "min": [1026],
-    "max": [1026],
-    "step": [1032],
+    "size": [1],
+    "label": [1],
+    "pattern": [1],
+    "tooltip": [1],
+    "placeholder": [1],
+    "disabled": [4],
+    "readonly": [4],
+    "clearable": [4],
+    "autocomplete": [4],
+    "name": [1],
+    "type": [1],
+    "hidden": [4],
+    "required": [4],
+    "fullWidth": [4, "full-width"],
+    "noDefaultIcon": [4, "no-default-icon"],
+    "disableWatchValue": [4, "disable-watch-value"],
+    "passwordToggle": [4, "password-toggle"],
+    "maxLength": [2, "max-length"],
+    "minLength": [2, "min-length"],
+    "unitPrefix": [1, "unit-prefix"],
+    "unit": [1],
+    "decimal": [4],
+    "min": [2],
+    "max": [2],
+    "step": [8],
     "caption": [1025],
-    "noCaption": [1028, "no-caption"],
+    "noCaption": [4, "no-caption"],
     "captionType": [1025, "caption-type"],
     "captionError": [1025, "caption-error"],
-    "customErrorMessage": [1025, "custom-error-message"],
-    "_prefix": [1025],
-    "_suffix": [1025],
+    "customErrorMessage": [1, "custom-error-message"],
+    "_prefix": [1],
+    "_suffix": [1],
     "captionCache": [32],
     "captionTypeCache": [32],
     "inValid": [32],

package/dist/components/input.style.js

@@ -2,20 +2,21 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const inputStyle = ce({
   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",
@@ -27,19 +28,19 @@ const inputStyle = ce({
   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: {
@@ -76,7 +77,7 @@ const inputStyle = ce({
       },
       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: {
@@ -87,7 +88,7 @@ const inputStyle = ce({
     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/components/label.js

@@ -5,18 +5,19 @@
 import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
+const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip, noMargin }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: classnames("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
+  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: classnames("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-font-medium tw-text-color-label ", {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+      "tw-mb-1": !noMargin,
     }) },
     value,
     " ",
@@ -50,10 +51,11 @@ const BcmLabel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hidden = false;
     this.type = Bcm.Status.default;
     this.tooltip = undefined;
+    this.noMargin = false;
   }
   render() {
-    const { required, value, label, size, form, htmlFor, type, tooltip } = this;
-    return (h(Host, { class: "tw-inline-block tw-leading-none" }, h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
+    const { required, value, label, size, form, htmlFor, type, tooltip, noMargin } = this;
+    return (h(Host, { class: "tw-inline-block tw-leading-none" }, h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip, noMargin: noMargin })));
   }
   get el() { return this; }
 }, [0, "bcm-label", {
@@ -66,7 +68,8 @@ const BcmLabel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "htmlFor": [8, "html-for"],
     "hidden": [4],
     "type": [8],
-    "tooltip": [1]
+    "tooltip": [1],
+    "noMargin": [4, "no-margin"]
   }]);
 __decorate([
   IsLoad()

package/dist/components/link.js

@@ -2,71 +2,115 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { a as Bcm } from './bcm.js';
-import { d as defineCustomElement$1 } from './icon.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
 
-const linkCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.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}*{box-sizing:border-box}.bcm-link{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline;color:#1D4ED8}.bcm-link.hidden{display:none}.bcm-link.disabled{pointer-events:none;cursor:not-allowed}.bcm-link.disabled .bcm-link__anchor{color:#6B7280}.bcm-link__anchor{display:inline-flex;align-items:baseline;font-size:inherit;color:inherit;text-decoration:none}.bcm-link__anchor.prefix .prefix-icon{margin-right:4px}.bcm-link__anchor.suffix .suffix-icon{margin-left:4px}.bcm-link__anchor:hover,.bcm-link__anchor:focus,.bcm-link__anchor:active,.bcm-link__anchor:focus-visible{outline:none}.bcm-link__anchor:hover{text-decoration:underline}.bcm-link__anchor:active{color:var(--bcm-new-ds-color-blue-700)}.bcm-link__anchor:focus-visible{color:var(--bcm-new-ds-color-blue-800)}.bcm-link__anchor:visited{color:#7E22CE}";
+const linkStyle = ce({
+  slots: {
+    base: ["bcm-link__anchor tw-flex tw-items-baseline tw-justify-center tw-gap-2 tw-no-underline", "tw-outline-none"],
+    hostStyle: "bcm-link bcm-ui-element bcm-ui-action tw-inline tw-w-fit",
+  },
+  variants: {
+    size: {
+      small: {
+        base: "tw-text-size-4 tw-font-medium",
+      },
+      medium: {
+        base: "tw-text-size-5 tw-font-medium",
+      },
+      large: {
+        base: "tw-text-size-6 tw-font-medium",
+      },
+      inherit: {
+        base: "",
+      },
+    },
+    disabled: {
+      true: {
+        base: "tw-cursor-not-allowed tw-pointer-events-none tw-text-color-disabled",
+      },
+      false: {
+        base: "tw-cursor-pointer tw-text-color-primary hover:tw-underline visited:tw-text-color-visited focus-visible:tw-ring",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false
+  },
+});
 
 const BcmLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.hidden = false;
+    this.bcmLinkClick = createEvent(this, "bcm-link-click", 7);
+    this.bcmClick = createEvent(this, "bcm-click", 7);
+    this.isLink = () => !!this.href;
+    this.isExternal = (url) => url && !!(url.startsWith("http") || url.startsWith("//"));
     this.href = undefined;
-    this.target = undefined;
+    this.target = Bcm.Target["_blank"];
+    this.rel = "noreferrer noopener";
+    this.download = undefined;
     this.icon = undefined;
     this.disabled = false;
     this.iconPosition = Bcm.IconPosition.prefix;
-  }
-  handleOnClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-  linkIsExternal(url) {
-    return url && !!(url.startsWith('http') || url.startsWith('//'));
+    this.size = Bcm.Size.medium;
   }
   render() {
-    const { href, icon, hidden, target, iconPosition, disabled } = this;
-    const hostClasses = classnames('bcm-link', {
+    const { icon, iconPosition, disabled, size } = this;
+    /* Link Attributes */
+    const { href, target, rel, download } = this;
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
+    };
+    const commonAttributes = Object.assign(Object.assign({ "aria-label": "link" }, (!disabled && {
+      onClick: e => {
+        this.bcmLinkClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    })), (disabled && {
+      "disabled": true,
+      "aria-disabled": true,
+      "tabindex": -1,
+      "onClick": e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+    }));
+    /* Tag */
+    const Tag = this.isLink() ? "a" : "span";
+    const { hostStyle, base } = linkStyle({
+      size,
       disabled,
-      hidden
-    });
-    const classes = classnames('bcm-link__anchor', iconPosition, {
-      'suffix': this.linkIsExternal(href)
     });
-    const ElementTagType = href ? 'a' : 'span';
-    return (h(Host, { disabled: disabled, class: hostClasses }, h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm.IconPosition.prefix && h("bcm-icon", { class: "prefix-icon", icon: icon }), h("slot", null), this.linkIsExternal(href) && h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (h(Host, { class: hostStyle() }, h(Tag, Object.assign({ class: base() }, (this.isLink() ? linkAttributes : {}), commonAttributes), icon && iconPosition === Bcm.IconPosition.prefix && h("i", { class: icon }), h("slot", null), this.isExternal(href) && h("i", { class: "far fa-external-link-alt" }))));
   }
-  get el() { return this; }
-  static get style() { return linkCss; }
 }, [4, "bcm-link", {
-    "hidden": [1028],
-    "href": [1025],
-    "target": [1025],
-    "icon": [1025],
-    "disabled": [1028],
-    "iconPosition": [1025, "icon-position"]
-  }, [[0, "click", "handleOnClick"]]]);
+    "href": [1],
+    "target": [1],
+    "rel": [1],
+    "download": [1],
+    "icon": [1],
+    "disabled": [516],
+    "iconPosition": [1, "icon-position"],
+    "size": [1]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-link", "bcm-icon"];
+  const components = ["bcm-link"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-link":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmLink);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
   } });
 }
 

package/dist/components/linked.js

@@ -4,14 +4,14 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 
 const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {