bromcom-ui 2.11.1-rc.9-3 → 2.11.1-rc.9-4

package/dist/collection/components/molecules/number-input/react-input.js

@@ -0,0 +1,96 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import React from "react";
+import ReactDOM from "react-dom";
+import { NumericFormat } from "react-number-format";
+export class BcmReactNumber {
+  constructor() {
+    this.isRange = (value, min, max) => {
+      if (value === undefined) {
+        return true;
+      }
+      const minValid = min === undefined || value >= min;
+      const maxValid = max === undefined || value <= max;
+      return minValid && maxValid;
+    };
+    this.disabled = false;
+    this.options = undefined;
+  }
+  componentWillRender() {
+    this.init();
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  init() {
+    const _a = this.options, { min, max, mode } = _a, rest = __rest(_a, ["min", "max", "mode"]);
+    const render = React.createElement(NumericFormat, Object.assign(Object.assign({}, rest), { isAllowed: (values) => {
+        if (mode === "strict") {
+          return this.isRange(values.floatValue, +min, +max);
+        }
+        return true;
+      }, onValueChange: e => {
+        if (this.options.onValueChange) {
+          this.options.onValueChange(e);
+        }
+      } }));
+    ReactDOM.render(render, this.el);
+  }
+  static get is() { return "bcm-react-number"; }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ExtendedNumericPropsType",
+          "resolved": "InternalNumberFormatBase & { thousandSeparator?: string | boolean; decimalSeparator?: string; allowedDecimalSeparators?: string[]; thousandsGroupStyle?: \"none\" | \"thousand\" | \"lakh\" | \"wan\"; decimalScale?: number; fixedDecimalScale?: boolean; allowNegative?: boolean; allowLeadingZeros?: boolean; suffix?: string; prefix?: string; } & Omit<InputAttributes, \"prefix\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"pattern\" | \"color\" | \"dir\" | \"width\" | \"height\" | \"name\" | \"id\" | \"hidden\" | \"size\" | \"className\" | \"type\" | \"disabled\" | \"autoFocus\" | \"formAction\" | \"formEncType\" | \"formMethod\" | \"formNoValidate\" | \"formTarget\" | \"aria-label\" | \"maxLength\" | \"onClick\" | \"checked\" | \"required\" | \"multiple\" | \"placeholder\" | \"accept\" | \"alt\" | \"aria-labelledby\" | \"aria-hidden\" | \"onSelect\" | \"accessKey\" | \"role\" | \"aria-live\" | \"readOnly\" | \"onFocus\" | \"onBlur\" | \"minLength\" | \"min\" | \"max\" | \"step\" | \"autoComplete\" | \"capture\" | \"crossOrigin\" | \"enterKeyHint\" | \"list\" | \"src\" | \"onChange\" | \"defaultChecked\" | \"suppressContentEditableWarning\" | \"suppressHydrationWarning\" | \"contentEditable\" | \"contextMenu\" | \"draggable\" | \"lang\" | \"nonce\" | \"spellCheck\" | \"tabIndex\" | \"translate\" | \"radioGroup\" | \"about\" | \"datatype\" | \"inlist\" | \"property\" | \"resource\" | \"typeof\" | \"vocab\" | \"autoCapitalize\" | \"autoCorrect\" | \"autoSave\" | \"itemProp\" | \"itemScope\" | \"itemType\" | \"itemID\" | \"itemRef\" | \"results\" | \"security\" | \"unselectable\" | \"inputMode\" | \"is\" | \"aria-activedescendant\" | \"aria-atomic\" | \"aria-autocomplete\" | \"aria-busy\" | \"aria-checked\" | \"aria-colcount\" | \"aria-colindex\" | \"aria-colspan\" | \"aria-controls\" | \"aria-current\" | \"aria-describedby\" | \"aria-details\" | \"aria-disabled\" | \"aria-dropeffect\" | \"aria-errormessage\" | \"aria-expanded\" | \"aria-flowto\" | \"aria-grabbed\" | \"aria-haspopup\" | \"aria-invalid\" | \"aria-keyshortcuts\" | \"aria-level\" | \"aria-modal\" | \"aria-multiline\" | \"aria-multiselectable\" | \"aria-orientation\" | \"aria-owns\" | \"aria-placeholder\" | \"aria-posinset\" | \"aria-pressed\" | \"aria-readonly\" | \"aria-relevant\" | \"aria-required\" | \"aria-roledescription\" | \"aria-rowcount\" | \"aria-rowindex\" | \"aria-rowspan\" | \"aria-selected\" | \"aria-setsize\" | \"aria-sort\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"aria-valuetext\" | \"dangerouslySetInnerHTML\" | \"onCopy\" | \"onCopyCapture\" | \"onCut\" | \"onCutCapture\" | \"onPaste\" | \"onPasteCapture\" | \"onCompositionEnd\" | \"onCompositionEndCapture\" | \"onCompositionStart\" | \"onCompositionStartCapture\" | \"onCompositionUpdate\" | \"onCompositionUpdateCapture\" | \"onFocusCapture\" | \"onBlurCapture\" | \"onChangeCapture\" | \"onBeforeInput\" | \"onBeforeInputCapture\" | \"onInput\" | \"onInputCapture\" | \"onReset\" | \"onResetCapture\" | \"onSubmit\" | \"onSubmitCapture\" | \"onInvalid\" | \"onInvalidCapture\" | \"onLoad\" | \"onLoadCapture\" | \"onError\" | \"onErrorCapture\" | \"onKeyDown\" | \"onKeyDownCapture\" | \"onKeyPress\" | \"onKeyPressCapture\" | \"onKeyUp\" | \"onKeyUpCapture\" | \"onAbort\" | \"onAbortCapture\" | \"onCanPlay\" | \"onCanPlayCapture\" | \"onCanPlayThrough\" | \"onCanPlayThroughCapture\" | \"onDurationChange\" | \"onDurationChangeCapture\" | \"onEmptied\" | \"onEmptiedCapture\" | \"onEncrypted\" | \"onEncryptedCapture\" | \"onEnded\" | \"onEndedCapture\" | \"onLoadedData\" | \"onLoadedDataCapture\" | \"onLoadedMetadata\" | \"onLoadedMetadataCapture\" | \"onLoadStart\" | \"onLoadStartCapture\" | \"onPause\" | \"onPauseCapture\" | \"onPlay\" | \"onPlayCapture\" | \"onPlaying\" | \"onPlayingCapture\" | \"onProgress\" | \"onProgressCapture\" | \"onRateChange\" | \"onRateChangeCapture\" | \"onResize\" | \"onResizeCapture\" | \"onSeeked\" | \"onSeekedCapture\" | \"onSeeking\" | \"onSeekingCapture\" | \"onStalled\" | \"onStalledCapture\" | \"onSuspend\" | \"onSuspendCapture\" | \"onTimeUpdate\" | \"onTimeUpdateCapture\" | \"onVolumeChange\" | \"onVolumeChangeCapture\" | \"onWaiting\" | \"onWaitingCapture\" | \"onAuxClick\" | \"onAuxClickCapture\" | \"onClickCapture\" | \"onContextMenu\" | \"onContextMenuCapture\" | \"onDoubleClick\" | \"onDoubleClickCapture\" | \"onDrag\" | \"onDragCapture\" | \"onDragEnd\" | \"onDragEndCapture\" | \"onDragEnter\" | \"onDragEnterCapture\" | \"onDragExit\" | \"onDragExitCapture\" | \"onDragLeave\" | \"onDragLeaveCapture\" | \"onDragOver\" | \"onDragOverCapture\" | \"onDragStart\" | \"onDragStartCapture\" | \"onDrop\" | \"onDropCapture\" | \"onMouseDown\" | \"onMouseDownCapture\" | \"onMouseEnter\" | \"onMouseLeave\" | \"onMouseMove\" | \"onMouseMoveCapture\" | \"onMouseOut\" | \"onMouseOutCapture\" | \"onMouseOver\" | \"onMouseOverCapture\" | \"onMouseUp\" | \"onMouseUpCapture\" | \"onSelectCapture\" | \"onTouchCancel\" | \"onTouchCancelCapture\" | \"onTouchEnd\" | \"onTouchEndCapture\" | \"onTouchMove\" | \"onTouchMoveCapture\" | \"onTouchStart\" | \"onTouchStartCapture\" | \"onPointerDown\" | \"onPointerDownCapture\" | \"onPointerMove\" | \"onPointerMoveCapture\" | \"onPointerUp\" | \"onPointerUpCapture\" | \"onPointerCancel\" | \"onPointerCancelCapture\" | \"onPointerEnter\" | \"onPointerEnterCapture\" | \"onPointerLeave\" | \"onPointerLeaveCapture\" | \"onPointerOver\" | \"onPointerOverCapture\" | \"onPointerOut\" | \"onPointerOutCapture\" | \"onGotPointerCapture\" | \"onGotPointerCaptureCapture\" | \"onLostPointerCapture\" | \"onLostPointerCaptureCapture\" | \"onScroll\" | \"onScrollCapture\" | \"onWheel\" | \"onWheelCapture\" | \"onAnimationStart\" | \"onAnimationStartCapture\" | \"onAnimationEnd\" | \"onAnimationEndCapture\" | \"onAnimationIteration\" | \"onAnimationIterationCapture\" | \"onTransitionEnd\" | \"onTransitionEndCapture\"> & Omit<InputAttributes, \"prefix\" | \"suffix\" | \"ref\" | \"value\" | \"type\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"thousandSeparator\" | \"decimalSeparator\" | \"decimalScale\" | \"fixedDecimalScale\" | \"allowNegative\" | \"allowLeadingZeros\" | \"onChange\" | \"inputMode\" | \"onKeyDown\" | \"onMouseUp\" | \"displayType\" | \"renderText\" | \"getInputRef\" | \"valueIsNumericString\" | \"onValueChange\" | \"isAllowed\" | \"isCharacterSame\" | \"allowedDecimalSeparators\" | \"thousandsGroupStyle\"> & { customInput?: ComponentType<InputAttributes>; } & { mode: \"strict\" | \"none\"; onValueChange?: (e: NumberFormatValues) => void; }",
+          "references": {
+            "ExtendedNumericPropsType": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -23,7 +23,7 @@ export class BcmRadio {
         "tw-text-1": size === Bcm.Size.small,
         "tw-text-2.5": size === Bcm.Size.medium,
         "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
+      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
         "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
         "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
         "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,

package/dist/collection/components/organism/form/form.js

@@ -54,7 +54,8 @@ export class BcmForm {
         DATETIME_PICKER: 'datetime-picker',
         // silinecek komponentler
         SELECT: 'select',
-        LISTBOX: 'listbox'
+        LISTBOX: 'listbox',
+        NUMBER_INPUT: 'number-input',
       },
       helpers: {
         randomId: function () {
@@ -107,7 +108,6 @@ export class BcmForm {
     var _a;
     const validate = this.validation;
     this.validation = false;
-    // debugger
     this.selector = this.el;
     await this.getInputs();
     if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {

package/dist/collection/components/organism/form-2/bcm-form-components.js

@@ -21,7 +21,8 @@ export const BcmFormComponents = [
   'BCM-SELECT',
   'BCM-LISTBOX',
   'BCM-CHIP-GROUP',
-  'BCM-INPUT-DROPDOWN'
+  'BCM-INPUT-DROPDOWN',
+  'BCM-NUMBER-INPUT',
   //... to be added to v3
 ];
 export const BcmFormGroupComponents = [

package/dist/collection/components/organism/list/list.css

@@ -534,7 +534,6 @@
   gap: 4px;
 }
 .bcm-list__container main {
-  scroll-behavior: smooth;
   padding: 0 8px;
   flex: 1;
   overflow: auto;

package/dist/collection/components/third-parts/rc-picker/date.js

@@ -58,7 +58,7 @@ export class BcmDate {
       }
     };
     this.getRangeValueObject = (value) => {
-      const [start, end] = value._i || [];
+      const [start, end] = value || [null, null];
       const startObject = this.createValueObject(start);
       const endObject = this.createValueObject(end);
       return Object.assign({ isValid: startObject.isValid && endObject.isValid, start: startObject, end: endObject, date: [startObject.date, endObject.date], timestamp: [startObject.timestamp, endObject.timestamp], value: `${startObject.value} - ${endObject.value}` }, (this.type === "time" && {

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -157,8 +157,17 @@
 .bcm-date:hover {
   /* bcm */
   border: 1px solid #4293cf;
+}
+.bcm-date:hover.bcm-date--existed {
   /* bcm */
 }
+.bcm-date:hover.bcm-date--existed .bcm-date-clear {
+  visibility: visible;
+  opacity: 1;
+}
+.bcm-date:hover.bcm-date--existed .bcm-date-suffix {
+  opacity: 0;
+}
 .bcm-date-focused {
   background-color: #f8fafc;
 }
@@ -169,7 +178,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  order: 2;
 }
 .bcm-date-suffix::before {
   -moz-osx-font-smoothing: grayscale;
@@ -247,9 +255,14 @@
   font-size: 20px;
   padding-bottom: 3px;
   line-height: 1;
-  order: 1;
   cursor: pointer;
   font-weight: 400;
+  visibility: hidden;
+  position: absolute;
+  right: 4px;
+  padding: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
 }
 .bcm-date-clear-btn::after {
   content: "×";
@@ -280,11 +293,30 @@
 .bcm-date--error:hover {
   border: 1px solid #e53e3e;
 }
+.bcm-date-range {
+  padding: 0 4px;
+}
+.bcm-date-range .bcm-date-clear {
+  flex: none;
+}
+.bcm-date-range-separator {
+  color: #94a3b8;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bcm-date-focused .bcm-date-active-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: #4293cf;
+  transition: all 0.3s;
+}
 .bcm-date-dropdown {
   position: absolute;
   z-index: 10800;
-  box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
   top: -9999;
   left: -9999;
   border-radius: 4px;
@@ -305,16 +337,19 @@
   font-size: 14px;
   line-height: 22px;
   font-weight: 400;
+  box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
 }
 .bcm-date-dropdown .bcm-date-panels {
   display: inline-flex;
 }
-.bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel, .bcm-date-dropdown .bcm-date-time-panel {
+.bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel {
   width: 256px;
 }
 .bcm-date-dropdown .bcm-date-time-panel {
   width: auto;
   padding-top: 4px;
+  min-width: auto;
 }
 .bcm-date-dropdown .bcm-date-time-panel .bcm-date-content {
   width: 100%;

package/dist/collection/components/third-parts/rc-picker/rc-picker.js

@@ -57,7 +57,12 @@ export class BcmRcPicker {
     this.newValue = null;
   }
   async set(value) {
-    this.newValue = value ? moment(value) : null;
+    if (!value) {
+      this.newValue = null;
+      this.bcmRCPickerChange.emit(null);
+      return;
+    }
+    this.newValue = this.range ? [moment(value[0]), moment(value[1])] : moment(value);
     this.bcmRCPickerChange.emit(this.newValue);
   }
   componentDidRender() {
@@ -82,9 +87,13 @@ export class BcmRcPicker {
       date: Object.assign({}, dateOptions),
       datetime: Object.assign(Object.assign(Object.assign({}, dateOptions), timeOptions), { showTime: Object.assign({ showSecond: this.showSecond }, timeOptions) }),
     };
-    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), { picker: this.type }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, className: cs(`bcm-date--${this.type}`, {
+    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), {
+      // picker: this.type,
+      picker: this.type === "datetime" ? "date" : this.type
+    }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, separator: " - ", changeOnBlur: true, className: cs(`bcm-date--${this.type}`, {
         [`bcm-date--${this.size}`]: this.size,
         "bcm-date--error": this.error,
+        "bcm-date--existed": this.newValue,
       }) });
     if (this.range) {
       ReactDOM.render(React.createElement(RangePicker, Object.assign({}, sharedProps)), this.el);