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

package/dist/collection/components/other_deprecated/old-input/old-input.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/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",
@@ -110,6 +119,11 @@ Generate.getIconAttrWithStatusType = (status, loading = false) => {
       return { icon: "far fa-check-circle" };
   }
 };
+Generate.domParser = (html) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  return doc.body.innerText;
+};
 Generate.createComponent = (el, props, area = "append-area") => {
   let container = area ? document.querySelector(area) : document.body;
   if (area && !container) {