bromcom-ui 2.10.1-rc.0 → 2.10.1-rc.2

package/dist/collection/components/third-parts/colorful/colorful.css

@@ -1,7 +1,5 @@
 @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");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
 .size-1 {
   font-size: 12px;
   line-height: 20px;
@@ -125,93 +123,6 @@
   margin-right: 8px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-.bcm-caption-area {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  font-size: 12px;
-  line-height: calc(12px + 8px);
-  color: var(--bcm-new-ds-color-slate-400);
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  margin-top: 2px;
-}
-.bcm-caption-area__text {
-  color: var(--bcm-new-ds-color-slate-400);
-}
-.bcm-caption-area__text.default {
-  color: var(--bcm-new-ds-color-slate-400);
-}
-.bcm-caption-area__text.info {
-  color: var(--bcm-new-ds-color-blue-500);
-}
-.bcm-caption-area__text.success {
-  color: var(--bcm-new-ds-color-emerald-500);
-}
-.bcm-caption-area__text.warning {
-  color: var(--bcm-new-ds-color-amber-500);
-}
-.bcm-caption-area__text.error {
-  color: var(--bcm-new-ds-color-red-500);
-}
-.bcm-caption-area__size-small {
-  font-size: 10px;
-  line-height: calc(10px + 8px);
-  min-height: calc(10px + 8px);
-}
-.bcm-caption-area__size-medium {
-  font-size: 12px;
-  line-height: calc(12px + 8px);
-  min-height: calc(12px + 8px);
-}
-.bcm-caption-area__size-large {
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  min-height: calc(14px + 8px);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.bcm-label {
-  display: inline-flex;
-  align-items: flex-start;
-  grid-gap: 2px;
-}
-.bcm-label__text {
-  margin-bottom: 2px;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  display: inline-block;
-  color: var(--bcm-new-ds-color-slate-600);
-}
-.bcm-label__size-small {
-  font-size: 10px;
-  line-height: calc(10px + 8px);
-  min-height: calc(10px + 8px);
-}
-.bcm-label__size-medium {
-  font-size: 12px;
-  line-height: calc(12px + 8px);
-  min-height: calc(12px + 8px);
-}
-.bcm-label__size-large {
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  min-height: calc(14px + 8px);
-}
-
 .bcm-input[no-margin] {
   margin: 0;
 }

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

@@ -15,7 +15,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { IsLoad } from "@bcm/decorator";
 import { Generate } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
-import { CaptionTemplate, LabelTemplate } from "@bcm/template";
+import { CaptionTemplate } from "@bcm/template";
 import { Host, h } from "@stencil/core";
 import cs from "classnames";
 import moment from "moment";
@@ -28,13 +28,15 @@ export class BcmDate {
     // type a göre format belirleme işlemi
     this.getFormat = () => {
       if (!this.format) {
+        const hourFormat = this.use12Hours ? "hh" : "HH";
+        const timeFormat = `${this.showSecond ? `${hourFormat}:mm:ss` : this.showMinute ? `${hourFormat}:mm` : `${hourFormat}`}${this.use12Hours ? " a" : ""}`;
         switch (this.type) {
           case "time":
-            return this.showSecond ? "HH:mm:ss" : this.showMinute ? "HH:mm" : "HH";
+            return `${timeFormat}`;
           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";
+            return `DD/MM/YYYY ${timeFormat}`;
           case "week":
             return "YYYY-wo";
           case "month":
@@ -149,7 +151,7 @@ export class BcmDate {
     return (h(Host, { class: cs("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: cs("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 })));
+      }) }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", class: cs("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 })));
   }
   static get is() { return "bcm-date"; }
   static get properties() {
@@ -585,7 +587,7 @@ export class BcmDate {
           "tags": [],
           "text": ""
         },
-        "attribute": "use-1-2-hours",
+        "attribute": "use-12-hours",
         "reflect": false,
         "defaultValue": "false"
       },

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

@@ -123,382 +123,6 @@
   margin-right: 8px;
 }
 
-.rc-picker-rtl {
-  direction: rtl;
-}
-
-.rc-picker-panel-focused {
-  border-color: #4293cf;
-}
-
-.rc-picker-panel-rtl {
-  direction: rtl;
-}
-
-.rc-picker-decade-panel,
-.rc-picker-year-panel,
-.rc-picker-month-panel,
-.rc-picker-week-panel,
-.rc-picker-date-panel,
-.rc-picker-time-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-.rc-picker-decade-panel table,
-.rc-picker-year-panel table,
-.rc-picker-month-panel table,
-.rc-picker-week-panel table,
-.rc-picker-date-panel table,
-.rc-picker-time-panel table {
-  text-align: center;
-  border-collapse: collapse;
-}
-
-.rc-picker-cell {
-  color: #aaa;
-}
-
-.rc-picker-cell-disabled {
-  opacity: 0.2;
-}
-
-.rc-picker-cell-inner {
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  font-size: 12px;
-  line-height: 20px;
-  background: transparent;
-  border: 0;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  transition: background 0.3s, border 0.3s;
-}
-
-.rc-picker-cell-inner:hover {
-  background: rgba(0, 0, 255, 0.3);
-}
-
-.rc-picker-cell-in-view {
-  color: #333;
-}
-
-.rc-picker-cell-in-range > .rc-picker-cell-inner {
-  background: rgba(0, 0, 255, 0.05);
-}
-
-.rc-picker-cell-range-hover-start,
-.rc-picker-cell-range-hover-end,
-.rc-picker-cell-range-hover {
-  position: relative;
-}
-
-.rc-picker-cell-range-hover-start::after,
-.rc-picker-cell-range-hover-end::after,
-.rc-picker-cell-range-hover::after {
-  position: absolute;
-  top: 3px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border: 1px solid green;
-  border-right: 0;
-  border-left: 0;
-  content: "";
-  pointer-events: none;
-}
-
-.rc-picker-cell-range-hover-start::after {
-  border-left: 1px solid green !important;
-}
-
-.rc-picker-cell-range-hover-end::after {
-  border-right: 1px solid green !important;
-}
-
-.rc-picker-cell-today > .rc-picker-cell-inner {
-  border: 1px solid blue;
-}
-
-.rc-picker-cell-range-start > .rc-picker-cell-inner,
-.rc-picker-cell-range-end > .rc-picker-cell-inner,
-.rc-picker-cell-selected > .rc-picker-cell-inner {
-  background: rgba(0, 0, 255, 0.2);
-}
-
-.rc-picker-presets {
-  background: #ccccff;
-}
-
-.rc-picker-presets ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rc-picker-footer,
-.rc-picker-picker-footer {
-  background: green;
-}
-
-.rc-picker-ranges {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  list-style: none;
-}
-
-.rc-picker-ranges > li {
-  display: inline-block;
-}
-
-.rc-picker-ok {
-  float: right;
-}
-
-.rc-picker-year-panel .rc-picker-cell-inner,
-.rc-picker-month-panel .rc-picker-cell-inner {
-  width: 80px;
-}
-
-.rc-picker-week-panel-row:hover .rc-picker-cell {
-  background: red;
-}
-
-.rc-picker-week-panel-row-selected .rc-picker-cell {
-  background: rgba(0, 0, 255, 0.3);
-}
-
-.rc-picker-week-panel-row-range-hover .rc-picker-cell {
-  background: rgba(0, 255, 0, 0.1);
-}
-
-.rc-picker-week-panel-row-range-start .rc-picker-cell,
-.rc-picker-week-panel-row-range-end .rc-picker-cell {
-  background: rgba(0, 255, 0, 0.3);
-}
-
-.rc-picker-week-panel .rc-picker-cell,
-.rc-picker-week-panel .rc-picker-cell-inner {
-  width: 20px;
-}
-
-.rc-picker-week-panel .rc-picker-cell-week {
-  color: #999;
-  font-weight: bold;
-  font-size: 12px;
-}
-
-.rc-picker-week-panel .rc-picker-cell:hover > .rc-picker-cell-inner,
-.rc-picker-week-panel .rc-picker-cell-selected > .rc-picker-cell-inner {
-  background: transparent;
-}
-
-.rc-picker-date-panel .rc-picker-cell-inner {
-  width: 20px;
-}
-
-.rc-picker-time-panel {
-  width: auto;
-}
-
-.rc-picker-time-panel .rc-picker-content {
-  display: flex;
-  max-height: 200px;
-}
-
-.rc-picker-time-panel-column {
-  flex: none;
-  width: 50px;
-  margin: 0;
-  padding: 0 0 180px 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  font-size: 12px;
-  text-align: left;
-  list-style: none;
-  transition: background 0.3s;
-}
-
-.rc-picker-time-panel-column-active {
-  background: rgba(0, 0, 255, 0.1);
-}
-
-.rc-picker-time-panel-column:hover {
-  overflow-y: auto;
-}
-
-.rc-picker-time-panel-column > li {
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled {
-  opacity: 0.5;
-}
-
-.rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
-  display: block;
-  width: 100%;
-  height: 20px;
-  margin: 0;
-  padding: 0 0 0 12px;
-  color: #333;
-  line-height: 20px;
-  text-align: left;
-}
-
-.rc-picker-panel-rtl .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
-  padding: 0 12px 0 0;
-  text-align: right;
-}
-
-.rc-picker-datetime-panel {
-  display: flex;
-}
-
-.rc-picker-datetime-panel .rc-picker-time-panel {
-  border-left: 1px solid #999;
-}
-
-.rc-picker-datetime-panel .rc-picker-date-panel,
-.rc-picker-datetime-panel .rc-picker-time-panel {
-  transition: opacity 0.3s;
-}
-
-.rc-picker-datetime-panel-active .rc-picker-date-panel,
-.rc-picker-datetime-panel-active .rc-picker-time-panel {
-  opacity: 0.3;
-}
-
-.rc-picker-datetime-panel-active .rc-picker-date-panel-active,
-.rc-picker-datetime-panel-active .rc-picker-time-panel-active {
-  opacity: 1;
-}
-
-.rc-picker-rtl .rc-picker-input {
-  text-align: right;
-}
-
-.rc-picker-rtl .rc-picker-clear {
-  right: auto;
-  left: 4px;
-}
-
-.rc-picker-dropdown {
-  position: absolute;
-  box-shadow: 0 0 1px red;
-}
-
-.rc-picker-dropdown-range {
-  padding: 10px 0;
-}
-
-.rc-picker-dropdown-hidden {
-  display: none;
-}
-
-.rc-picker-dropdown-placement-topLeft .rc-picker-range-arrow,
-.rc-picker-dropdown-placement-topRight .rc-picker-range-arrow {
-  bottom: 6px;
-  transform: rotate(135deg);
-}
-
-.rc-picker-dropdown-placement-bottomLeft .rc-picker-range-arrow,
-.rc-picker-dropdown-placement-bottomright .rc-picker-range-arrow {
-  top: 6px;
-  transform: rotate(-45deg);
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow {
-  position: absolute;
-  left: 10px;
-  z-index: 1;
-  width: 10px;
-  height: 10px;
-  margin-left: 10px;
-  transition: all 0.3s;
-}
-
-.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow {
-  right: 10px;
-  left: auto;
-  margin-right: 10px;
-  margin-left: 0;
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow::before,
-.rc-picker-dropdown .rc-picker-range-arrow::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  box-sizing: border-box;
-  transform: translate(-50%, -50%);
-  content: "";
-}
-
-.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::before,
-.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::after {
-  right: 50%;
-  left: auto;
-  transform: translate(50%, -50%);
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow::before {
-  width: 10px;
-  height: 10px;
-  border: 5px solid blue;
-  border-color: blue blue transparent transparent;
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow::after {
-  width: 8px;
-  height: 8px;
-  border: 4px solid blue;
-  border-color: #fff0ff #fff0ff transparent transparent;
-}
-
-.rc-picker-range {
-  position: relative;
-  display: inline-flex;
-}
-
-.rc-picker-range-wrapper {
-  display: flex;
-}
-
-.rc-picker-range .rc-picker-active-bar {
-  bottom: 0;
-  height: 3px;
-  background: green;
-  opacity: 0;
-  transition: all 0.3s;
-  pointer-events: none;
-}
-
-.rc-picker-range.rc-picker-focused .rc-picker-active-bar {
-  opacity: 1;
-}
-
-.rc-picker-panel-container {
-  display: inline-block;
-  vertical-align: top;
-  transition: margin 0.3s;
-}
-
-.rc-picker-panel-layout {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: stretch;
-}
-
-/* custom */
 .bcm-date {
   font-family: "Inter", sans-serif;
   font-size: 14px;
@@ -658,6 +282,7 @@
 }
 .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;

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

@@ -28,7 +28,7 @@ export class BcmRcPicker {
     };
     this.manageDisabledTime = () => {
       const { disabledHours, disabledMinutes, disabledSeconds } = this.disabledTime || {};
-      return Object.assign(Object.assign(Object.assign({}, (disabledHours && { disabledHours: () => disabledHours })), (disabledMinutes && { disabledMinutes: () => disabledMinutes })), (disabledSeconds && { disabledSeconds: () => disabledSeconds }));
+      return Object.assign(Object.assign(Object.assign({}, ((disabledHours && this.showHour) && { disabledHours: () => disabledHours })), ((disabledMinutes && this.showMinute) && { disabledMinutes: () => disabledMinutes })), ((disabledSeconds && this.showSecond) && { disabledSeconds: () => disabledSeconds }));
     };
     this.convertDateToMoment = (date) => {
       return date && date !== "invalid date" ? moment(date) : null;
@@ -80,22 +80,9 @@ export class BcmRcPicker {
     const options = {
       time: Object.assign({}, timeOptions),
       date: Object.assign({}, dateOptions),
-      datetime: {
-        // ...dateOptions, 
-        // ...timeOptions,
-        // showTime={{
-        //     showSecond: false,
-        //     defaultValue: moment('11:28:39', 'HH:mm:ss'),
-        //   }}
-        //   showToday
-        showTime: {
-          showSecond: this.showSecond,
-          // defaultValue: moment(),
-        },
-        showToday: true,
-      },
+      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 })), { format: this.format, 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 }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, className: cs(`bcm-date--${this.type}`, {
         [`bcm-date--${this.size}`]: this.size,
         "bcm-date--error": this.error,
       }) });

package/dist/collection/helper/generate.js

@@ -33,6 +33,15 @@ if (isAllowedDomain()) {
   }
 })();
 export class Generate {
+  static prettify(input) {
+    const prettifiedObject = {};
+    for (const key in input) {
+      if (input.hasOwnProperty(key)) {
+        prettifiedObject[key] = input[key];
+      }
+    }
+    return prettifiedObject;
+  }
   /**
       const dc = Generate.getTwColor({
           color: "blue",

package/dist/collection/models/bcm.js

@@ -396,34 +396,34 @@ 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": "Must be at least {0} chars long",
-    "maxlength": "Must be at most {0} chars long",
-    "betweenlength": "Must be between {0} and {1} chars 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": "Must be at least {0} chars long.",
+    "maxlength": "Must be at most {0} chars long.",
+    "betweenlength": "Must be between {0} and {1} chars 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) {