bromcom-ui 2.9.1-rc.0 → 2.9.1-rc.1

package/dist/esm/bcm-colorpicker.entry.js

@@ -2,11 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-0615c2b8.js';
-import { E as ElementDragger, D as DragDirections } from './element-dragger-89bb52fd.js';
-import { c as classnames } from './index-00c8a8f7.js';
-import './utils-57652744.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, c as createEvent, h, d as getAssetPath, H as Host, g as getElement } from './index-4614b7f0.js';
+import { E as ElementDragger, D as DragDirections } from './element-dragger-7ea06c76.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import './utils-b3338faf.js';
+import './_commonjsHelpers-be0d4ec8.js';
 
 const colorpickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.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}:host{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";
 

package/dist/esm/bcm-content.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 
 const BcmContent = class {
   constructor(hostRef) {

package/dist/esm/bcm-d45dc47d.js

@@ -446,4 +446,4 @@ var Bcm;
 })(Bcm || (Bcm = {}));
 const Bcm$1 = Bcm;
 
-export { Bcm$1 as B, Bcm as a };
+export { Bcm as B, Bcm$1 as a };

package/dist/esm/bcm-date-picker.entry.js

@@ -0,0 +1,178 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
+import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-40dfe3b0.js';
+import { a as Bcm } from './bcm-d45dc47d.js';
+import { d as delay } from './utils-b3338faf.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-1618c1e9.js';
+import './colors-e1c31f79.js';
+
+const datePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.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}:host{display:inline-flex;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
+
+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")
+    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;
+};
+const BcmDatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.date = new Date();
+    this.value = undefined;
+    this.endDate = null;
+    this.range = false;
+    this.hidden = false;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.required = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.disabledDates = '';
+    this.disabled = false;
+    this.noMargin = false;
+    this.noCaption = false;
+    this.caption = '';
+    this.captionError = undefined;
+    this.captionType = 'default';
+    this.alignment = undefined;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.placement = Bcm.Placement['bottom-start'];
+    this.linkedComponent = undefined;
+    this.clearable = false;
+    this.stateStartDate = null;
+    this.stateEndDate = null;
+  }
+  handleStartDateChange() {
+    this.handleDate();
+  }
+  handleEndDateChange() {
+    this.handleDate();
+  }
+  /**
+   * @desc
+   */
+  handlePickerLoad() {
+    this.value = this.picker.value;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handlePickerChange(event) {
+    this.value = event.detail;
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  async set(value) {
+    return this.picker.set(value);
+  }
+  async get() {
+    var _a;
+    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
+  }
+  /**
+   * @desc
+   * @param disabled
+   */
+  async setDisabled(disabled) {
+    this.disabled = disabled;
+  }
+  async setClear() {
+    await this.picker.setClear();
+    await delay(10);
+    return Promise.resolve();
+  }
+  async setStartDate(dateOrTime) {
+    if (dateOrTime) {
+      dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime());
+      this.stateStartDate = dateOrTime;
+    }
+    else {
+      this.setClear();
+    }
+  }
+  async setEndDate(dateOrTime) {
+    if (dateOrTime) {
+      dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime());
+      this.stateEndDate = dateOrTime;
+    }
+    else {
+      this.setClear();
+    }
+  }
+  /* mp --- */
+  handleDate() {
+    if (this.range) {
+      if (this.stateStartDate && this.stateEndDate) {
+        this.set(this.stateStartDate + '-' + this.stateEndDate);
+      }
+    }
+    else {
+      this.set(this.stateStartDate);
+    }
+  }
+  /**
+   * @desc
+   */
+  async getInput() {
+    return await this.picker.getInput();
+  }
+  /**
+   * @desc
+   */
+  async open() {
+    return await this.picker.open();
+  }
+  /**
+   * @desc
+   */
+  async getValue() {
+    return this.value;
+  }
+  /**
+   * @desc
+   */
+  async isValid() {
+    return await this.picker.isValid();
+  }
+  async resetCaption() {
+    await delay(10);
+    await this.picker.resetCaption();
+    this.captionType = 'default';
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'full-width': this.fullWidth,
+      'linked-component': this.linkedComponent,
+    });
+    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "stateStartDate": ["handleStartDateChange"],
+    "stateEndDate": ["handleEndDateChange"]
+  }; }
+};
+__decorate([
+  IsLoad()
+], BcmDatePicker.prototype, "el", void 0);
+BcmDatePicker.style = datePickerCss;
+
+export { BcmDatePicker as bcm_date_picker };

package/dist/esm/bcm-date.entry.js

@@ -0,0 +1,178 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
+import './color-helper-c4fa9ebc.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-40dfe3b0.js';
+import './number-helper-352d1d80.js';
+import './string-helper-5bd646f2.js';
+import './validators-68717171.js';
+import './element-dragger-7ea06c76.js';
+import { B as Bcm } from './bcm-d45dc47d.js';
+import { C as CaptionTemplate } from './caption-template-a1a968fd.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import './types-6f06fa1a.js';
+import { L as LabelTemplate } from './label-template-54c28821.js';
+import './types-9493a7ed.js';
+import { h as hooks } from './moment-15cd9198.js';
+import './colors-1d7854ea.js';
+import './utils-b3338faf.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-1618c1e9.js';
+import './slot-template-4b683d1f.js';
+
+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")
+    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;
+};
+const BcmDate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.onChange = (e) => {
+      this.value = this.getValueObject(e.detail);
+      this.change.emit(this.value);
+    };
+    // type a göre format belirleme işlemi
+    this.getFormat = () => {
+      if (!this.format) {
+        switch (this.type) {
+          case "time":
+            return this.showSecond ? "HH:mm:ss" : this.showMinute ? "HH:mm" : "HH";
+          case "date":
+            return "DD/MM/YYYY";
+          case "datetime":
+            return this.showSecond ? "DD/MM/YYYY HH:mm:ss" : this.showMinute ? "DD/MM/YYYY HH:mm" : "DD/MM/YYYY HH";
+          case "week":
+            return "YYYY-wo";
+          case "month":
+            return "MM/YYYY";
+          case "year":
+            return "YYYY";
+          default:
+            return "DD/MM/YYYY";
+        }
+      }
+      return this.format;
+    };
+    this.getValueObject = (value) => {
+      if (this.range) {
+        return this.getRangeValueObject(value);
+      }
+      else {
+        return this.createValueObject(value);
+      }
+    };
+    this.getRangeValueObject = (value) => {
+      const [start, end] = value._i || [];
+      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" && {
+        time: `${startObject.time} - ${endObject.time}`,
+      }));
+    };
+    this.createValueObject = (value) => {
+      if (value && hooks(value).isValid()) {
+        return Object.assign({ isValid: hooks(value).isValid(), date: hooks(value).toDate(), timestamp: hooks(value).valueOf(), dateObject: {
+            year: hooks(value).year(),
+            day: hooks(value).date(),
+            month: hooks(value).month(),
+            dayOfWeek: hooks(value).day(),
+            monthFirstDay: hooks(value).startOf("month").day(),
+          }, value: hooks(value).format(this.getFormat()) }, (this.type === "time" && {
+          time: hooks(value).format(this.getFormat()),
+          timeObject: {
+            hour: hooks(value).hour(),
+            minute: hooks(value).minute(),
+            second: hooks(value).second(),
+          },
+        }));
+      }
+      else {
+        return null;
+      }
+    };
+    this._id = Generate.UID();
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.size = Bcm.Size.medium;
+    this.fullWidth = false;
+    this.required = false;
+    this.clearable = false;
+    this.disabled = false;
+    this.noMargin = false;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.name = undefined;
+    this.value = undefined;
+    this.type = "date";
+    this.format = undefined;
+    this.range = false;
+    this.showTime = false;
+    this.showNow = true;
+    this.showHour = true;
+    this.showMinute = true;
+    this.showSecond = false;
+    this.use12Hours = false;
+    this.hourStep = 1;
+    this.minuteStep = 1;
+    this.secondStep = 1;
+    this.hideDisabledOptions = false;
+    this.disabledTime = undefined;
+    this.showToday = true;
+    this.disabledDates = undefined;
+  }
+  async getValue() {
+    return this.value;
+  }
+  async get() {
+    var _a;
+    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
+  }
+  async set(value) {
+    // this.value = value;
+    this.getPickerElement().set(value);
+  }
+  async setClear() {
+    this.getPickerElement().set(null);
+  }
+  async resetCaption() {
+    this.captionType = "default";
+    this.captionError = null;
+  }
+  async getInput() {
+    return this.el.querySelector("input");
+  }
+  async isValid() {
+    var _a;
+    return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.isValid) || false;
+  }
+  getPickerElement() {
+    return this.el.querySelector("bcm-rc-picker");
+  }
+  render() {
+    const { label, size, captionType, required, _id } = this;
+    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-input", "tw-relative tw-m-0 tw-inline-flex tw-w-full tw-flex-col", {
+        "tw-max-w-[256px]": !this.fullWidth,
+        "tw-mb-2": !this.noMargin,
+      }) }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", class: classnames("w-full tw-flex"), onBcmRCPickerChange: e => this.onChange(e), disabled: this.disabled, clearable: this.clearable, size: size, placeholder: this.placeholder, error: this.captionType === "error", type: this.type, format: this.getFormat(), range: this.range, showToday: this.showToday, disabledDates: this.disabledDates, showTime: this.showTime, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, hourStep: this.hourStep, minuteStep: this.minuteStep, secondStep: this.secondStep, hideDisabledOptions: this.hideDisabledOptions, disabledTime: this.disabledTime }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+  }
+  get el() { return getElement(this); }
+};
+__decorate([
+  IsLoad()
+], BcmDate.prototype, "el", void 0);
+
+export { BcmDate as bcm_date };