bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

package/dist/components/datetime-picker.js

@@ -53,7 +53,7 @@ var Types;
   Types["time"] = "time";
 })(Types || (Types = {}));
 
-const datetimePickerCss = "@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}.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}*{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}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}:host{display:inline-block;position:relative;width:100%;max-width:256px;margin:0;margin-bottom:8px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.picker-label{user-select:none;line-height:1}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc(100% - 28px);z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .bcm-datetime-picker__header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .bcm-datetime-picker__content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .bcm-datetime-picker__header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .bcm-datetime-picker__header .month-year{font-size:16px;line-height:24px}.date-container .bcm-datetime-picker__header .month-year{display:flex;align-items:center}.date-container .bcm-datetime-picker__header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .bcm-datetime-picker__header .month{text-transform:capitalize}.date-container .bcm-datetime-picker__header .year{padding-left:4px}.date-container .bcm-datetime-picker__header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .bcm-datetime-picker__content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:100%;cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0);scroll-behavior:smooth}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}";
+const datetimePickerCss = "@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}.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}*{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}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}:host{display:inline-flex;flex-direction:column;position:relative;width:100%;max-width:256px;margin:0;margin-bottom:8px}:host(.full-width){max-width:100%}:host(.no-margin){margin:0}:host(.hidden){display:none}:host(.linked-component){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.picker-label{user-select:none;line-height:1}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc(100% - 28px);z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .bcm-datetime-picker__header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .bcm-datetime-picker__content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .bcm-datetime-picker__header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .bcm-datetime-picker__header .month-year{font-size:16px;line-height:24px}.date-container .bcm-datetime-picker__header .month-year{display:flex;align-items:center}.date-container .bcm-datetime-picker__header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .bcm-datetime-picker__header .month{text-transform:capitalize}.date-container .bcm-datetime-picker__header .year{padding-left:4px}.date-container .bcm-datetime-picker__header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .bcm-datetime-picker__content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:100%;cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0);scroll-behavior:smooth}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}.picker-input-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch}";
 
 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;
@@ -98,6 +98,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.minYear = 1900;
     this.maxYear = 2200;
     this.noCaption = false;
+    this.noMargin = false;
     this.captionError = undefined;
     this.caption = '';
     this.captionType = 'default';
@@ -1017,6 +1018,20 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.setDataFromText(text);
     return text;
   }
+  parseDate(input) {
+    var parts = input.split('/');
+    var day = parseInt(parts[0], 10);
+    var month = parseInt(parts[1], 10) - 1;
+    var year = parseInt(parts[2], 10);
+    if (isNaN(day) || isNaN(month) || isNaN(year)) {
+      return 'invalid date';
+    }
+    var date = new Date(year, month, day);
+    if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
+      return 'invalid date';
+    }
+    return date;
+  }
   /**
    * @desc
    * @param dateStr
@@ -1029,7 +1044,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
     const date = new Date(sectionDate);
     const date2 = new Date(sectionDate2);
-    const dateCheck = date.toString().toLowerCase() !== 'invalid date';
+    const dateCheck = date.toString().toLowerCase() !== 'invalid date' && this.parseDate(dateStr) !== 'invalid date';
     const dateCheck2 = date2.toString().toLowerCase() !== 'invalid date';
     const regDate = /^((0?[1-9]|1[0-2])(-|\/)(0?[1-9]|[12]\d|3[01])(-|\/)[12]\d{3})$/;
     const regDateCheck = regDate.test(sectionDate);
@@ -1395,6 +1410,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const hostClasses = classnames(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth,
       'linked-component': this.linkedComponent,
+      'no-margin': this.noMargin,
     });
     const toggleClasses = classnames('toggle', {
       disabled: this.disabled
@@ -1403,7 +1419,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
     const errorIcon = `<svg style="fill: #ef4444; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
     const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
-    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
+    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), "no-margin": true, disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
       // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
       noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
         'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
@@ -1442,6 +1458,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "minYear": [1026, "min-year"],
     "maxYear": [1026, "max-year"],
     "noCaption": [1028, "no-caption"],
+    "noMargin": [1028, "no-margin"],
     "captionError": [1025, "caption-error"],
     "caption": [1025],
     "captionType": [1025, "caption-type"],

package/dist/components/generate.js

@@ -5,6 +5,8 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
+const version = "2.9.0-rc.20";
+
 /**
  * 'status' prop predefined values
  */
@@ -25,8 +27,6 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.9.0-rc.2";
-
 function snq(callback, defaultValue) {
     try {
         var result = callback();
@@ -65,15 +65,65 @@ if (isAllowedDomain()) {
   }
 })();
 class Generate {
-  static getTwColor(color, variable = "--bcm-color-default") {
+  /**
+      const dc = Generate.getTwColor({
+          color: "blue",
+          tones: {
+              200: ["text"],
+              700: ["bg", "border"],
+              800: ["bg-hover", "border-hover"],
+          },
+          variable: "--bcm-avatar",
+      });
+
+      return {
+          --bcm-avatar-text: --tw-blue-200;
+          --bcm-avatar-bg: --tw-blue-700;
+          --bcm-avatar-bg-hover: --tw-blue-800;
+          --bcm-avatar-border: --tw-blue-700;
+          --bcm-avatar-border-hover: --tw-blue-800;
+      }
+      
+   */
+  static getTwColor(args) {
+    const { color, variable, tones } = (args = Object.assign({
+      variable: "--bcm-color-default",
+      defaultTone: "600",
+      tones: {
+        50: {},
+        100: {},
+        200: {},
+        300: {},
+        400: {},
+        500: {},
+        600: {},
+        700: {},
+        800: {},
+        900: {},
+        950: {},
+      },
+    }, args));
     if (!color || !colors[color]) {
       return false;
     }
-    const colorObj = colors[color];
     const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
-      result[`${variable}-${key}`] = value;
+    if (typeof colors[color] === "string") {
+      result[variable] = colors[color];
+      return result;
     }
+    const toneList = Array.isArray(tones) ? tones : Object.keys(tones);
+    toneList.forEach(tone => {
+      if (colors[color][tone]) {
+        if (Array.isArray(tones[tone])) {
+          tones[tone].forEach(item => {
+            result[`${variable}-${item}`] = colors[color][tone];
+          });
+        }
+        else {
+          result[`${variable}-${tone}`] = colors[color][tone];
+        }
+      }
+    });
     return result;
   }
 }
@@ -292,4 +342,4 @@ Generate.findParentElement = (element, selector) => {
   }
 };
 
-export { Generate as G, StatusProps as S, TypeProps as T, snq as s };
+export { Generate as G, StatusProps as S, TypeProps as T, snq as s, version as v };

package/dist/components/icon.js

@@ -19,15 +19,16 @@ const BcmIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getIcon() {
     const { icon } = this;
     if (icon in customIconList) {
-      const _icon = getAssetPath("/assets/icon/" + customIconList[icon]);
-      return (h("div", { class: "tw-h-fit tw-w-fit tw-flex tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+      const _icon = getAssetPath("./static/" + customIconList[icon]);
+      return (h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
     }
     return h("i", { class: `${icon}` });
   }
   render() {
     const { /*icon,*/ hidden } = this;
-    return (h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon()));
+    return h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
   }
+  static get assetsDirs() { return ["static"]; }
   get el() { return this; }
   static get style() { return iconCss; }
 }, [0, "bcm-icon", {

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export { BcmColorInput as BcmColorInput } from '../types/components/molecules/co
 export { BcmColorful as BcmColorful } from '../types/components/third-parts/colorful/colorful';
 export { BcmColorPicker as BcmColorpicker } from '../types/components/other_deprecated/colorpicker/colorpicker';
 export { BcmContent as BcmContent } from '../types/components/other/content/content';
+export { BcmDate as BcmDate } from '../types/components/third-parts/rc-picker/date';
 export { BcmDatePicker as BcmDatePicker } from '../types/components/organism/date-picker/date-picker';
 export { BcmDatetimePicker as BcmDatetimePicker } from '../types/components/organism/datetime-picker/datetime-picker';
 export { BcmDefault as BcmDefault } from '../types/components/other/default/default';
@@ -36,6 +37,7 @@ export { BcmFormGroup as BcmFormGroup } from '../types/components/organism/form/
 export { BcmIcon as BcmIcon } from '../types/components/atoms/icon/icon';
 export { BcmInput as BcmInput } from '../types/components/molecules/input/input';
 export { BcmInputCustom as BcmInputCustom } from '../types/components/other/input-custom/input-custom';
+export { BcmInputDropdown as BcmInputDropdown } from '../types/components/molecules/input-dropdown/input-dropdown';
 export { BcmItem as BcmItem } from '../types/components/molecules/item/item';
 export { BcmItems as BcmItems } from '../types/components/molecules/items/items';
 export { BcmLabel as BcmLabel } from '../types/components/atoms/label/label';
@@ -64,6 +66,7 @@ export { BcmRadio as BcmRadio } from '../types/components/molecules/radio/radio'
 export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/radio/radio-group';
 export { BcmRange as BcmRange } from '../types/components/molecules/range/range';
 export { BcmRcOverflow as BcmRcOverflow } from '../types/components/third-parts/rc-overflow/rc-overflow';
+export { BcmRcPicker as BcmRcPicker } from '../types/components/third-parts/rc-picker/rc-picker';
 export { BcmResult as BcmResult } from '../types/components/molecules/result/result';
 export { BcmScrollArea as BcmScrollArea } from '../types/components/other/scroll-area/scroll-area';
 export { BcmSearch as BcmSearch } from '../types/components/molecules/search/search';
@@ -80,7 +83,7 @@ export { BcmTabGroup as BcmTabGroup } from '../types/components/molecules/tab-gr
 export { BcmTabItem as BcmTabItem } from '../types/components/molecules/tab-group/tab-item';
 export { BcmTabItemHeader as BcmTabItemHeader } from '../types/components/molecules/tab-group/tab-item-header';
 export { BcmTabPane as BcmTabPane } from '../types/components/other_deprecated/tabs/tab-pane';
-export { BcmTable as BcmTable } from '../types/components/other/data-table/table';
+export { BcmTable as BcmTable } from '../types/components/third-parts/table/table';
 export { BcmTabs as BcmTabs } from '../types/components/other_deprecated/tabs/tabs';
 export { BcmTabsContent as BcmTabsContent } from '../types/components/other_deprecated/tabs/tabs-content';
 export { BcmTag as BcmTag } from '../types/components/other_deprecated/tag/tag';

package/dist/components/index.js

@@ -2,7 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
+import { Env } from '@stencil/core/internal/client';
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+import { v as version } from './generate.js';
+import { L as LicenseManager } from './bcm-table.js';
+export { BcmTable, defineCustomElement as defineCustomElementBcmTable } from './bcm-table.js';
 export { BcmAccordion, defineCustomElement as defineCustomElementBcmAccordion } from './bcm-accordion.js';
 export { BcmAlert, defineCustomElement as defineCustomElementBcmAlert } from './bcm-alert.js';
 export { BcmAttendance, defineCustomElement as defineCustomElementBcmAttendance } from './bcm-attendance.js';
@@ -25,6 +29,7 @@ export { BcmColorInput, defineCustomElement as defineCustomElementBcmColorInput
 export { BcmColorful, defineCustomElement as defineCustomElementBcmColorful } from './bcm-colorful.js';
 export { BcmColorpicker, defineCustomElement as defineCustomElementBcmColorpicker } from './bcm-colorpicker.js';
 export { BcmContent, defineCustomElement as defineCustomElementBcmContent } from './bcm-content.js';
+export { BcmDate, defineCustomElement as defineCustomElementBcmDate } from './bcm-date.js';
 export { BcmDatePicker, defineCustomElement as defineCustomElementBcmDatePicker } from './bcm-date-picker.js';
 export { BcmDatetimePicker, defineCustomElement as defineCustomElementBcmDatetimePicker } from './bcm-datetime-picker.js';
 export { BcmDefault, defineCustomElement as defineCustomElementBcmDefault } from './bcm-default.js';
@@ -40,6 +45,7 @@ export { BcmFormGroup, defineCustomElement as defineCustomElementBcmFormGroup }
 export { BcmIcon, defineCustomElement as defineCustomElementBcmIcon } from './bcm-icon.js';
 export { BcmInput, defineCustomElement as defineCustomElementBcmInput } from './bcm-input.js';
 export { BcmInputCustom, defineCustomElement as defineCustomElementBcmInputCustom } from './bcm-input-custom.js';
+export { BcmInputDropdown, defineCustomElement as defineCustomElementBcmInputDropdown } from './bcm-input-dropdown.js';
 export { BcmItem, defineCustomElement as defineCustomElementBcmItem } from './bcm-item.js';
 export { BcmItems, defineCustomElement as defineCustomElementBcmItems } from './bcm-items.js';
 export { BcmLabel, defineCustomElement as defineCustomElementBcmLabel } from './bcm-label.js';
@@ -68,6 +74,7 @@ export { BcmRadio, defineCustomElement as defineCustomElementBcmRadio } from './
 export { BcmRadioGroup, defineCustomElement as defineCustomElementBcmRadioGroup } from './bcm-radio-group.js';
 export { BcmRange, defineCustomElement as defineCustomElementBcmRange } from './bcm-range.js';
 export { BcmRcOverflow, defineCustomElement as defineCustomElementBcmRcOverflow } from './bcm-rc-overflow.js';
+export { BcmRcPicker, defineCustomElement as defineCustomElementBcmRcPicker } from './bcm-rc-picker.js';
 export { BcmResult, defineCustomElement as defineCustomElementBcmResult } from './bcm-result.js';
 export { BcmScrollArea, defineCustomElement as defineCustomElementBcmScrollArea } from './bcm-scroll-area.js';
 export { BcmSearch, defineCustomElement as defineCustomElementBcmSearch } from './bcm-search.js';
@@ -84,7 +91,6 @@ export { BcmTabGroup, defineCustomElement as defineCustomElementBcmTabGroup } fr
 export { BcmTabItem, defineCustomElement as defineCustomElementBcmTabItem } from './bcm-tab-item.js';
 export { BcmTabItemHeader, defineCustomElement as defineCustomElementBcmTabItemHeader } from './bcm-tab-item-header.js';
 export { BcmTabPane, defineCustomElement as defineCustomElementBcmTabPane } from './bcm-tab-pane.js';
-export { BcmTable, defineCustomElement as defineCustomElementBcmTable } from './bcm-table.js';
 export { BcmTabs, defineCustomElement as defineCustomElementBcmTabs } from './bcm-tabs.js';
 export { BcmTabsContent, defineCustomElement as defineCustomElementBcmTabsContent } from './bcm-tabs-content.js';
 export { BcmTag, defineCustomElement as defineCustomElementBcmTag } from './bcm-tag.js';
@@ -102,12 +108,20 @@ export { BcmTypography, defineCustomElement as defineCustomElementBcmTypography
 export { OldBcmPopover, defineCustomElement as defineCustomElementOldBcmPopover } from './old-bcm-popover.js';
 export { OldBcmPopoverBox, defineCustomElement as defineCustomElementOldBcmPopoverBox } from './old-bcm-popover-box.js';
 
+window.bcm = (function () {
+  return {
+    version: version,
+  };
+})();
 function addHeadScript(obj) {
   const head = document.head;
-  const script = document.createElement('script');
+  const script = document.createElement("script");
   Object.keys(obj).forEach(key => {
     script[key] = obj[key];
   });
   head.appendChild(script);
 }
-addHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });
+addHeadScript({ src: "https://kit.fontawesome.com/5e86bea963.js", crossOrigin: "anonymous" });
+(() => {
+  LicenseManager.setLicenseKey(Env["AG_GRID_LICENSE_KEY"]);
+})();

package/dist/components/index3.js

@@ -151,6 +151,10 @@ var react = createCommonjsModule(function (module) {
 }
 });
 
+const React = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), react, {
+	'default': react
+}));
+
 var scheduler_production_min = createCommonjsModule(function (module, exports) {
 var f,g,h,k,l;
 if("undefined"===typeof window||"function"!==typeof MessageChannel){var p=null,q=null,t=function(){if(null!==p)try{var a=exports.unstable_now();p(!0,a);p=null;}catch(b){throw setTimeout(t,0),b;}},u=Date.now();exports.unstable_now=function(){return Date.now()-u};f=function(a){null!==p?setTimeout(f,0,a):(p=a,setTimeout(t,0));};g=function(a,b){q=setTimeout(a,b);};h=function(){clearTimeout(q);};k=function(){return !1};l=exports.unstable_forceFrameRate=function(){};}else {var w=window.performance,x=window.Date,
@@ -534,4 +538,4 @@ function checkDCE() {
 }
 });
 
-export { reactDom as a, react as r };
+export { React as R, reactDom as a, react as r };