bromcom-ui 2.7.23-0 → 2.7.23-1

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

@@ -1,415 +0,0 @@
-/*!
- * 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-64896f16.js';
-import { E as ElementDragger, D as DragDirections } from './element-dragger-89bb52fd.js';
-import { c as classnames } from './index-e193c9fe.js';
-import './utils-57652744.js';
-import './_commonjsHelpers-f805a026.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}";
-
-const BcmColorPicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.initialized = false;
-    this.setColorBeforeInitialized = false;
-    /**
-     * Component Properties
-     */
-    this._color = '#4293CF'; // default color
-    this.open = false;
-    this.value = null;
-    this.size = "medium";
-    this.noCaption = false;
-    this.captionType = 'default';
-    this.fullWidth = false;
-    this.disabled = false;
-    this.hidden = false;
-    this.required = false;
-    /**
-     * Component States
-     */
-    this.h = -1;
-    this.s = 1;
-    this.v = 1;
-    this.a = 1;
-    this.selectedH = -1;
-    this.selectedS = 1;
-    this.selectedV = 1;
-    this.selectedA = 1;
-    this.color = { rgba: '', hex: '' };
-    this.inputValue = '';
-    this.mouseState = 'up';
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentWillLoad() {
-    const initialColor = this.hextohsv(this._color);
-    this.s = initialColor.s;
-    this.v = initialColor.v;
-    this.h = initialColor.h;
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentDidRender() {
-    if (this.initialized)
-      return;
-    Promise.all([
-      this.initColorDragger(),
-      this.initColorsDragger(),
-      this.initTransparencyDragger()
-    ]).then(() => {
-      !this.setColorBeforeInitialized && this._setColor(this._color);
-      this.updateValue();
-      this.initialized = true;
-    });
-  }
-  /**
-   * @desc
-   */
-  initColorDragger() {
-    if (this.colorDragger)
-      return;
-    const limit = {
-      x: {
-        min: 0,
-        max: this.colorElement.offsetWidth
-      },
-      y: {
-        min: 0,
-        max: this.colorElement.offsetHeight
-      }
-    };
-    this.colorDragger = new ElementDragger({
-      target: this.colorIndicatorElement,
-      trigger: this.colorElement,
-      direction: DragDirections.both,
-      limit,
-      snapOnMouseDown: true,
-      center: {
-        x: this.colorIndicatorElement.offsetWidth / 2,
-        y: this.colorIndicatorElement.offsetHeight / 2
-      }
-    });
-    /**
-     * [ ElementDragger Event: drag ]
-     */
-    this.colorDragger.on('drag', (pos) => this.colorDrag(pos));
-    return Promise.resolve();
-  }
-  /**
-   * @desc
-   */
-  initColorsDragger() {
-    if (this.colorsDragger)
-      return;
-    const limit = {
-      x: {
-        min: 0,
-        max: this.colorsElement.offsetWidth
-      }
-    };
-    this.colorsDragger = new ElementDragger({
-      target: this.colorsIndicatorElement,
-      trigger: this.colorsElement,
-      direction: DragDirections.x,
-      limit,
-      snapOnMouseDown: true,
-      center: {
-        x: this.colorsIndicatorElement.offsetWidth / 2
-      }
-    });
-    /**
-     * [ ElementDragger Event: drag ]
-     */
-    this.colorsDragger.on('drag', (pos) => this.colorsDrag(pos));
-    return Promise.resolve();
-  }
-  /**
-   * @desc
-   */
-  initTransparencyDragger() {
-    return;
-    /* this.transparencyDragger = new ElementDragger({
-        target: this.transparencyIndicatorElement,
-        trigger: this.transparencyIndicatorElement,
-        direction: DragDirections.x,
-        limit: {
-            x: {
-                    min: 0,
-                    max: this.transparencyElement.offsetWidth - this.transparencyIndicatorElement.offsetWidth
-            }
-        }
-    })
-
-    // Set initial position
-    // #
-    this.transparencyDragger.setPosition({
-        x: this.transparencyElement.offsetWidth - indicatorSize
-    })
-
-    
-    this.transparencyDragger.on('drag', (pos: any) => this.transparencyDrag(pos))
-    this.setTransparencyElementColor() */
-  }
-  /**
-   * @desc
-   * @param hsv
-   */
-  hsvtorgb(hsv) {
-    let R;
-    let G;
-    let B;
-    let X;
-    let C;
-    let h = (hsv.h % 360) / 60;
-    C = hsv.v * hsv.s;
-    X = C * (1 - Math.abs(h % 2 - 1));
-    R = G = B = hsv.v - C;
-    h = ~~h;
-    R += [C, X, 0, 0, X, C][h];
-    G += [X, C, C, X, 0, 0][h];
-    B += [0, 0, X, C, C, X][h];
-    const rgb = {
-      r: Math.round(R * 255),
-      g: Math.round(G * 255),
-      b: Math.round(B * 255)
-    };
-    return Object.assign(Object.assign({}, rgb), { hex: "#" + (16777216 | rgb.b | (rgb.g << 8) | (rgb.r << 16)).toString(16).slice(1) });
-  }
-  /**
-   * @desc
-   * @param rgb
-   */
-  rgbtohsv(rgb) {
-    let H;
-    let S;
-    let V;
-    let C;
-    let r = rgb.r;
-    let g = rgb.g;
-    let b = rgb.b;
-    if (rgb.r > 1 || rgb.g > 1 || rgb.b > 1) {
-      r /= 255;
-      g /= 255;
-      b /= 255;
-    }
-    V = Math.max(r, g, b);
-    C = V - Math.min(r, g, b);
-    H = (C == 0 ? null :
-      V == r ? (g - b) / C + (g < b ? 6 : 0) :
-        V == g ? (b - r) / C + 2 :
-          (r - g) / C + 4);
-    H = (H % 6) * 60;
-    S = C == 0 ? 0 : C / V;
-    return {
-      h: H,
-      s: S,
-      v: V
-    };
-  }
-  /**
-   * @desc
-   * @param hex
-   */
-  hextohsv(hex) {
-    return this.rgbtohsv(this.hextorgb(hex));
-  }
-  /**
-   * @desc
-   * @param hex
-   */
-  hextorgb(hex) {
-    return {
-      r: parseInt(hex.substr(1, 2), 16),
-      g: parseInt(hex.substr(3, 2), 16),
-      b: parseInt(hex.substr(5, 2), 16)
-    };
-  }
-  /**
-   * @desc
-   * @param pos
-   */
-  colorDrag(pos) {
-    const width = this.colorElement.offsetWidth;
-    const height = this.colorElement.offsetHeight;
-    this.selectedS = (pos.x) / width;
-    this.selectedV = (height - (pos.y)) / height;
-    this.updateValue();
-  }
-  /**
-   * @desc
-   * @param pos
-   */
-  colorsDrag(pos) {
-    const width = this.colorsElement.offsetWidth;
-    this.h = (pos.x) / width * 360;
-    this.s = 1;
-    this.v = 1;
-    this.selectedH = this.h;
-    this.updateValue();
-  }
-  /**
-   * @desc
-   * @param pos
-   */
-  /* transparencyDrag(pos: any) {
-      const sliderWidth: number = this.transparencyElement.offsetWidth
-      const actualX: number = pos.x + indicatorSize / 2
-      const result: number = actualX / sliderWidth
-      let opacity: string | number = result.toFixed(1)
-
-      opacity === '1.0' && (opacity = '1')
-      opacity === '0.0' && (opacity = '0')
-      opacity = parseFloat(opacity)
-
-      this.a = opacity
-  } */
-  /**
-   * @desc
-   */
-  setHsvColor() {
-    const rgb = this.hsvtorgb({
-      h: this.selectedH,
-      s: this.selectedS,
-      v: this.selectedV
-    });
-    this.color = {
-      rgba: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.a})`,
-      hex: rgb.hex
-    };
-    return this.color;
-  }
-  /**
-   * @desc
-   * @param hexColor
-   */
-  _setColor(color, preventInputUpdate = false) {
-    const regHex = /^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
-    const regHexCheck = regHex.test(color);
-    if (regHexCheck) {
-      if (color.length === 4) {
-        color = color.split('').map(c => c !== '#' ? c + c : c).join('');
-      }
-      const hsvColor = this.hextohsv(color);
-      this.h = hsvColor.h;
-      this.s = 1;
-      this.v = 1;
-      this.selectedH = hsvColor.h;
-      this.selectedS = hsvColor.s;
-      this.selectedV = hsvColor.v;
-      this.updateIndicators();
-      this.updateValue(preventInputUpdate);
-    }
-  }
-  /**
-   * @desc
-   */
-  updateIndicators() {
-    const { colorsElement: colors, colorElement: color, colorsIndicatorElement: colorsIndicator } = this;
-    this.colorDragger.setPosition({
-      x: this.selectedS * color.offsetWidth,
-      y: color.offsetHeight - this.selectedV * color.offsetHeight
-    });
-    this.colorsDragger.setPosition({
-      x: (this.selectedH * (colors.offsetWidth - colorsIndicator.offsetWidth * 2)) / 360
-    });
-  }
-  /**
-   * @desc
-   * @param preventInputUpdate
-   */
-  updateValue(preventInputUpdate = false) {
-    const { selectedH: h, selectedS: s, selectedV: v } = this;
-    const hex = this.hsvtorgb({ h, s, v }).hex;
-    this.value = hex;
-    if (!preventInputUpdate) {
-      this.updateInputValue(hex);
-    }
-  }
-  /**
-   * @desc
-   * @param value
-   */
-  updateInputValue(value) {
-    if (!this.inputElement)
-      return;
-    this.inputElement.value = value;
-  }
-  /**
-   * @desc
-   */
-  /* setTransparencyElementColor() {
-      this.transparencyImageElement1.setAttribute('stop-color', this.color.hex)
-      this.transparencyImageElement2.setAttribute('stop-color', this.color.hex)
-  } */
-  /**
-   * @desc
-   */
-  handleClick() {
-    this.open = true;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleColorInputKeyUp(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const val = path[0].value;
-    this._setColor(val, true);
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleWindowClick(event) {
-    const target = event.target;
-    const classes = target.classList;
-    const tagName = target.tagName.toLowerCase();
-    const isNotbyClass = !classes.contains('sc-bcm-colorpicker');
-    const isNotbyTagName = tagName !== 'bcm-colorpicker';
-    if ((isNotbyClass && isNotbyTagName && this.mouseState === 'up')) {
-      this.open = false;
-      this.updateInputValue(this.value);
-    }
-    this.mouseState = 'up';
-  }
-  /**
-   * @desc
-   */
-  valueChange() {
-    if (!this.initialized)
-      return;
-    this.change.emit(this.value);
-  }
-  async getValue() {
-    return this.value;
-  }
-  async setColor(color) {
-    this.setColorBeforeInitialized = true;
-    this._setColor(color);
-  }
-  render() {
-    const { label, required, noCaption, caption, captionError, captionType } = this;
-    const classes = classnames('color-picker', {
-      open: this.open
-    });
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "far fa-eye-dropper" }))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " "))), h("div", { class: "picker" }, h("div", { class: "input" }, h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), h("div", { class: "color", onMouseDown: () => this.mouseState = 'down', style: { backgroundColor: this.hsvtorgb({ h: this.h, s: this.s, v: this.v }).hex }, ref: el => (this.colorElement = el) }, h("img", { src: getAssetPath('./static/color.svg') }), h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), h("div", { class: "colors-transparency" }, h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, h("div", { class: "colors-holder" }, h("img", { src: getAssetPath('./static/colors.svg') })), h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
-  }
-  static get assetsDirs() { return ["static"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChange"]
-  }; }
-};
-BcmColorPicker.style = colorpickerCss;
-
-export { BcmColorPicker as bcm_colorpicker };

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

@@ -1,151 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, h, H as Host } from './index-64896f16.js';
-import { c as classnames } from './index-e193c9fe.js';
-import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-c173d211.js';
-import { B as Bcm } from './bcm-e046ec7a.js';
-import { d as delay } from './utils-57652744.js';
-import './_commonjsHelpers-f805a026.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-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
-
-const BcmDatePicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._id = Generate.UID();
-    this.date = new Date();
-    this.endDate = null;
-    this.range = false;
-    this.hidden = false;
-    this.fullWidth = false;
-    this.required = false;
-    this.disabledDates = '';
-    this.disabled = false;
-    this.noCaption = false;
-    this.caption = '';
-    this.captionType = 'default';
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.placement = Bcm.Placement['bottom-start'];
-    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.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, 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 })));
-  }
-  static get watchers() { return {
-    "stateStartDate": ["handleStartDateChange"],
-    "stateEndDate": ["handleEndDateChange"]
-  }; }
-};
-BcmDatePicker.style = datePickerCss;
-
-export { BcmDatePicker as bcm_date_picker };