bromcom-ui 2.9.0-rc.14 → 2.9.0-rc.16

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

@@ -1,7 +1,13 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Bcm } from "@bcm/model";
 import moment from "moment";
 import Picker from "rc-picker";
 import momentGenerateConfig from "rc-picker/lib/generate/moment";
 import enUS from "rc-picker/lib/locale/en_US";
+import cs from "classnames";
 import React from "react";
 import ReactDOM from "react-dom";
 export class BcmRcPicker {
@@ -10,9 +16,16 @@ export class BcmRcPicker {
     this.type = "date";
     this.format = undefined;
     this.placeholder = undefined;
+    this.size = Bcm.Size.medium;
     this.showTime = undefined;
     this.showToday = undefined;
     this.showNow = undefined;
+    this.showHour = undefined;
+    this.showMinute = undefined;
+    this.showSecond = undefined;
+    this.use12Hours = undefined;
+    this.error = undefined;
+    this.disabled = undefined;
     this.clearable = false;
     this.defaultValue = undefined;
     this.newValue = undefined;
@@ -24,57 +37,79 @@ export class BcmRcPicker {
     this.setValue(newValue);
     this.bcmRCPickerChange.emit(newValue ? moment(newValue) : null);
   }
-  watchValue(val) {
-    if (typeof val === "string") {
-      this.newValue = moment(val).format(this.format);
+  async set(value) {
+    if (value && value != "invalid date") {
+      this.newValue = moment(value);
+      this.handleChange(moment(value));
     }
   }
   componentDidRender() {
     // const onSelect = (newValue: Moment) => {
     //     // console.log("Select:", newValue);
     // };
-    const props = Object.assign(Object.assign(Object.assign({}, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder }));
+    const props = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (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 }));
     const options = {
       time: {
-        showHour: true,
-        showMinute: true,
-        showSecond: false,
-        use12Hours: false,
-        format: "HH:mm",
-        showNow: false,
+        // showTime: this.showTime,
+        // showToday: this.showToday,
+        showNow: this.showNow,
+        showHour: this.showHour,
+        showMinute: this.showMinute,
+        showSecond: this.showSecond,
+        use12Hours: this.use12Hours,
+        format: this.format,
         hourStep: 1,
-        minuteStep: 30,
+        minuteStep: 1,
         secondStep: 1,
         hideDisabledOptions: false,
-        defaultValue: moment("08:00", "HH:mm"),
+        // defaultValue: moment("08:00", "HH:mm"),
         disabledTime: () => ({
-          disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 13, 18, 19, 20, 21, 22, 23],
-          // disabledMinutes: () => [1, 2, 3],
-          // disabledSeconds: () => [1, 2, 3],
+        // disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 13, 18, 19, 20, 21, 22, 23],
+        // disabledMinutes: () => [1, 2, 3],
+        // disabledSeconds: () => [1, 2, 3],
         }),
         active: true,
       },
       date: {
-        format: "DD/MM/YYYY",
+        format: this.format,
+        showToday: this.showToday,
       },
       datetime: {
         showTime: true,
-        showHour: true,
-        showMinute: true,
-        showSecond: false,
-        use12Hours: false,
-        format: "DD/MM/YYYY HH:mm",
+        showNow: this.showNow,
+        showHour: this.showHour,
+        showMinute: this.showMinute,
+        showSecond: this.showSecond,
+        use12Hours: this.use12Hours,
+        format: this.format,
+        showToday: this.showToday,
       },
     };
     const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue,
-      // onSelect,
-      onChange: (newValue) => this.handleChange(newValue) }, props), { picker: this.type }), options[this.type]), { autofocus: true });
-    ReactDOM.render(React.createElement(Picker, Object.assign(Object.assign({}, sharedProps), { locale: enUS })), this.el);
+      // onSelect: (newValue: Moment) => this.handleChange(newValue),
+      onChange: (newValue) => this.handleChange(newValue) }, props), { picker: this.type,
+      // presets: [
+      //     {
+      //         label: "Hello World!",
+      //         value: moment(),
+      //     },
+      //     {
+      //         label: "Now",
+      //         value: () => moment(),
+      //     },
+      // ]
+      // showTime: true,
+      // showSecond: false,
+      prefixCls: "bcm-date", suffixIcon: " " }), options[this.type]), { autofocus: true });
+    ReactDOM.render(React.createElement(Picker, Object.assign(Object.assign({}, sharedProps), { locale: enUS, className: cs("bcm-date--" + this.type, {
+        [`bcm-date--${this.size}`]: this.size,
+        [`bcm-date--error`]: this.error,
+      }) })), this.el);
   }
   static get is() { return "bcm-rc-picker"; }
   static get originalStyleUrls() {
     return {
-      "$": ["rc-picker.css"]
+      "$": ["rc-picker.scss"]
     };
   }
   static get styleUrls() {
@@ -105,8 +140,8 @@ export class BcmRcPicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"time\" | \"date\" | \"week\" | \"month\" | \"year\"",
-          "resolved": "\"date\" | \"month\" | \"time\" | \"week\" | \"year\"",
+          "original": "\"time\" | \"date\" | \"week\" | \"month\" | \"year\" | \"datetime\"",
+          "resolved": "\"date\" | \"datetime\" | \"month\" | \"time\" | \"week\" | \"year\"",
           "references": {}
         },
         "required": false,
@@ -153,6 +188,29 @@ export class BcmRcPicker {
         "attribute": "placeholder",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "Bcm.Size.medium"
+      },
       "showTime": {
         "type": "any",
         "mutable": false,
@@ -204,6 +262,108 @@ export class BcmRcPicker {
         "attribute": "show-now",
         "reflect": false
       },
+      "showHour": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-hour",
+        "reflect": false
+      },
+      "showMinute": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-minute",
+        "reflect": false
+      },
+      "showSecond": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-second",
+        "reflect": false
+      },
+      "use12Hours": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-1-2-hours",
+        "reflect": false
+      },
+      "error": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
       "clearable": {
         "type": "boolean",
         "mutable": false,
@@ -248,11 +408,28 @@ export class BcmRcPicker {
         }
       }];
   }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "val",
-        "methodName": "watchValue"
-      }];
+  static get methods() {
+    return {
+      "set": {
+        "complexType": {
+          "signature": "(value: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/decorators/is-load-decorator.js

@@ -8,8 +8,9 @@ export function IsLoad() {
     const { componentDidLoad } = proto;
     proto.componentDidLoad = function () {
       const host = getElement(this);
+      const { openIntersecting } = host;
       initProps(host);
-      registerAttrReflect(host);
+      openIntersecting && registerAttrReflect(host);
       return componentDidLoad && componentDidLoad.call(this);
     };
   };

package/dist/collection/models/bcm.js

@@ -81,6 +81,7 @@ export var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
+    Kind["ghost-link"] = "ghost-link";
   })(Kind = Bcm.Kind || (Bcm.Kind = {}));
   let ButtonType;
   (function (ButtonType) {
@@ -395,33 +396,33 @@ export var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(KeyCode = Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'Please use a valid format',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "This field must be at least {0} characters long",
+    "maxlength": "This field must be at most {0} characters long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   let IndeterminateType;
   (function (IndeterminateType) {

package/dist/components/bcm-date.js

@@ -37,21 +37,44 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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 (value && hooks(value).isValid()) {
-        return {
-          isValid: hooks(value).isValid(),
-          date: hooks(value).toDate(),
-          timestamp: hooks(value).valueOf(),
-          dateObject: {
+        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(),
           },
-          value: hooks(value).format(this.format),
-        };
+        });
       }
       else {
         return null;
@@ -66,15 +89,21 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.fullWidth = false;
     this.required = false;
     this.clearable = false;
+    this.noMargin = false;
     this.caption = undefined;
     this.noCaption = false;
     this.captionType = Bcm.Status.default;
     this.captionError = undefined;
-    this.type = undefined;
-    this.format = "DD/MM/YYYY";
+    this.type = "date";
+    this.format = undefined;
     this.showTime = false;
     this.showToday = true;
     this.showNow = true;
+    this.showHour = true;
+    this.showMinute = true;
+    this.showSecond = false;
+    this.use12Hours = false;
+    this.disabled = false;
   }
   async getValue() {
     var _a;
@@ -85,7 +114,8 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
   }
   async set(value) {
-    this.value = value;
+    // this.value = value;
+    this.getPickerElement().set(value);
   }
   async setClear() {
     this.value = null;
@@ -101,9 +131,15 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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-action", "tw-inline-flex tw-flex-col") }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { onBcmRCPickerChange: e => this.onChange(e), type: this.type, format: this.format, "show-time": this.showTime, clearable: this.clearable, val: this.value }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+    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", onBcmRCPickerChange: e => this.onChange(e), type: this.type, format: this.getFormat(), clearable: this.clearable, val: this.value, class: classnames("w-full tw-flex"), size: size, placeholder: this.placeholder, showTime: this.showTime, showToday: this.showToday, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, error: this.captionType === "error", disabled: this.disabled }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   get el() { return this; }
 }, [0, "bcm-date", {
@@ -116,15 +152,21 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "fullWidth": [4, "full-width"],
     "required": [4],
     "clearable": [4],
+    "noMargin": [4, "no-margin"],
     "caption": [1],
     "noCaption": [4, "no-caption"],
     "captionType": [1025, "caption-type"],
     "captionError": [1025, "caption-error"],
     "type": [1],
-    "format": [1],
+    "format": [8],
     "showTime": [4, "show-time"],
     "showToday": [4, "show-today"],
     "showNow": [4, "show-now"],
+    "showHour": [4, "show-hour"],
+    "showMinute": [4, "show-minute"],
+    "showSecond": [4, "show-second"],
+    "use12Hours": [4, "use-1-2-hours"],
+    "disabled": [4],
     "getValue": [64],
     "get": [64],
     "set": [64],

package/dist/components/bcm.js

@@ -73,6 +73,7 @@ var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
+    Kind["ghost-link"] = "ghost-link";
   })(Bcm.Kind || (Bcm.Kind = {}));
   (function (ButtonType) {
     ButtonType["button"] = "button";
@@ -378,33 +379,33 @@ var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'Please use a valid format',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "This field must be at least {0} characters long",
+    "maxlength": "This field must be at most {0} characters long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   (function (IndeterminateType) {
     IndeterminateType["uncheck"] = "uncheck";