@limetech/lime-crm-building-blocks 1.2.0 → 1.3.0

package/dist/cjs/{index-9b027564.js → index-bea86c2b.js}

@@ -825,6 +825,11 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
     let promise;
+    if (isInitialLoad) {
+        {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -934,6 +939,17 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+const safeCall = (instance, method, arg) => {
+    if (instance && instance[method]) {
+        try {
+            return instance[method](arg);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    return undefined;
+};
 const then = (promise, thenFn) => {
     return promise && promise.then ? promise.then(thenFn) : thenFn();
 };

package/dist/cjs/lime-crm-building-blocks.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 /*
  Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"disabled":[516],"value":[16]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]]], options);
+  return index.bootstrapLazy([["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-example-date-range.cjs",[[1,"limebb-example-date-range"]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"disabled":[516],"value":[16]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/limebb-currency-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 const currencies = require('./currencies-98ac425a.js');
 
 /**

package/dist/cjs/limebb-date-range.cjs.entry.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bea86c2b.js');
+
+const dateRangeCss = ":host(limebb-date-range){isolation:isolate;display:block;position:relative}*{box-sizing:border-box}.date-pickers{display:grid;grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));gap:0.5rem;padding:0.75rem 1rem 1.25rem 1rem}.label-group{display:flex;align-items:center;margin-bottom:0.25rem}.end-time .label-group{flex-direction:row-reverse}.label-group .label{font-size:0.75rem;padding:0 0.25rem}.label-group .circle{flex-shrink:0;width:0.5rem;height:0.5rem;border-radius:50%}.start-time .label-group .circle{background-color:rgb(var(--color-green-default))}.end-time .label-group .circle{background-color:rgb(var(--color-coral-default))}.label-group .line{flex-grow:1;height:0.25rem;border-radius:1rem}.start-time .label-group .line{background-image:linear-gradient(to right, rgb(var(--color-green-light)), rgb(var(--contrast-400)) 30%)}.end-time .label-group .line{background-image:linear-gradient(to left, rgb(var(--color-coral-light)), rgb(var(--contrast-400)) 30%)}.date-pickers:has(>:last-child:nth-child(2)) .start-time .line{margin-right:-0.5rem}.date-pickers:has(>:last-child:nth-child(2)) .end-time .line{margin-left:-0.5rem}";
+
+const DateRange = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.changeStartTime = index.createEvent(this, "changeStartTime", 7);
+    this.changeEndTime = index.createEvent(this, "changeEndTime", 7);
+    this.handleStartTimeChange = (event) => {
+      event.stopPropagation();
+      this.changeStartTime.emit(event.detail);
+    };
+    this.handleEndTimeChange = (event) => {
+      event.stopPropagation();
+      this.changeEndTime.emit(event.detail);
+    };
+    this.startTime = undefined;
+    this.endTime = undefined;
+    this.startTimeLabel = undefined;
+    this.endTimeLabel = undefined;
+    this.language = undefined;
+    this.timeFormat = undefined;
+    this.type = undefined;
+  }
+  componentWillLoad() {
+    this.originalStartTime = this.startTime;
+    this.originalEndTime = this.endTime;
+  }
+  render() {
+    return (index.h("div", { class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
+  }
+  renderStartDatePicker() {
+    if (!this.originalStartTime) {
+      return;
+    }
+    return (index.h("div", { class: "start-time" }, this.renderDatePicker(this.startTimeLabel, this.startTime, !this.startTime, this.handleStartTimeChange)));
+  }
+  renderEndDatePicker() {
+    if (!this.originalEndTime) {
+      return;
+    }
+    return (index.h("div", { class: "end-time" }, this.renderDatePicker(this.endTimeLabel, this.endTime, !this.endTime, this.handleEndTimeChange)));
+  }
+  renderDatePicker(label, value, isInvalid, onChangeHandler) {
+    return [
+      index.h("div", { class: "label-group" }, index.h("span", { class: "circle" }), index.h("span", { class: "label" }, label), index.h("span", { class: "line" })),
+      index.h("limel-date-picker", { type: this.type, value: value, format: this.timeFormat, language: this.language, onChange: onChangeHandler, invalid: isInvalid }),
+    ];
+  }
+};
+DateRange.style = dateRangeCss;
+
+exports.limebb_date_range = DateRange;

package/dist/cjs/limebb-example-currency-picker-european.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 const currencies = require('./currencies-98ac425a.js');
 
 const CurrencyPickerExample = class {

package/dist/cjs/limebb-example-currency-picker-nordic.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 const currencies = require('./currencies-98ac425a.js');
 
 const CurrencyPickerExample = class {

package/dist/cjs/limebb-example-currency-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const CurrencyPickerExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-example-date-range.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bea86c2b.js');
+
+const dateRangeCss = ":host(limebb-example-date-range){display:flex;flex-direction:column;background-color:rgb(var(--contrast-500));border-radius:0.5rem;padding:0.5rem}span{padding-left:0.5rem;font-size:1.25rem}limebb-date-range{margin-top:0.75rem;border-radius:0.75rem;background-color:rgb(var(--contrast-100))}limebb-date-range:before{content:\"\";position:absolute;top:-0.5rem;left:2rem;background-color:inherit;width:1rem;height:1rem;rotate:45deg;border-radius:0.25rem 0 0 0}";
+
+const DateRangeExample = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.startTime = new Date('2022-01-02T00:00:00.000Z');
+    this.endTime = new Date('2022-01-03T00:00:00.000Z');
+  }
+  render() {
+    return [
+      index.h("span", null, "My event"),
+      index.h("limebb-date-range", { startTime: this.startTime, endTime: this.endTime, startTimeLabel: "Start time", endTimeLabel: "End time", type: "datetime" }),
+    ];
+  }
+};
+DateRangeExample.style = dateRangeCss;
+
+exports.limebb_example_date_range = DateRangeExample;

package/dist/cjs/limebb-example-navigation-button-back.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const NavigationButtonBackExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-example-navigation-button-close.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const NavigationButtonCloseExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-example-navigation-button-expand.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const NavigationButtonExpandExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-example-navigation-button-float.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const NavigationButtonFloatExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-example-navigation-button-new-tab.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const NavigationButtonNewTabExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-example-navigation-button-shrink.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const NavigationButtonShrinkExample = class {
   constructor(hostRef) {

package/dist/cjs/limebb-navigation-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 const navigationButtonCss = ".navigation-button{all:unset;isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;height:1.875rem;width:1.875rem;border-radius:50%;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--navigation-button-background-color, var(--lime-elevated-surface-background-color))}.navigation-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.navigation-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.navigation-button:focus{outline:none}.navigation-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.navigation-button limel-icon{transition:color 0.2s ease, transform 0.2s cubic-bezier(0.84, 0.15, 0.52, 1.42);color:var(--header-menu-icon-color);width:1.25rem}.newTab limel-icon{transition:transform 0.2s ease;transform:scale(0.8);z-index:3}.newTab:before{z-index:2}.newTab::after{z-index:1}.newTab:before,.newTab:after{content:\"\";transition:transform 0.2s ease, border-color 0.2s ease;position:absolute;width:0.875rem;height:0.875rem;border:1px solid rgb(var(--contrast-900));background-color:var(--navigation-button-background-color, rgb(var(--contrast-100)))}.newTab:hover limel-icon{color:var(--mdc-theme-primary);transform:translate3d(-0.1rem, 0.1rem, 0) scale(1)}.newTab:hover:before{transform:translate3d(0.125rem, -0.125rem, 0);border-color:rgb(var(--contrast-1000));box-shadow:var(--shadow-depth-8)}.newTab:hover:after{transform:translate3d(-0.15rem, 0.15rem, 0) scale(0.9);border-color:rgb(var(--contrast-700))}.expand:after{transition:transform 0.2s ease;content:\"\";position:absolute;z-index:1;background-color:var(--navigation-button-background-color, rgb(var(--contrast-100)));width:0.75rem;height:0.75rem}.expand:hover limel-icon{color:var(--mdc-theme-primary)}.expand:hover:after{transform:scale(0.5)}.expand:hover limel-icon{transform:scale(1.18)}.close limel-icon{transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{transition-delay:0.1s;content:\"\";position:absolute;inset:0;border-radius:50%;opacity:0}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.float:after{transition:width 0.2s ease-out, opacity 0.2s ease;content:\"\";position:absolute;inset:0 0.5rem 0 auto;border-radius:1px;opacity:0.8;transform:translate3d(0, 0, 0);background-color:rgb(var(--contrast-800));width:0.125rem;height:0.6rem;margin:auto}.float:hover:after{width:0.4rem;opacity:1;transform:translate3d(0, 0, 0)}";
 

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9b027564.js');
+const index = require('./index-bea86c2b.js');
 
 /*
  Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"disabled":[516],"value":[16]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]]], options);
+  return index.bootstrapLazy([["limebb-example-currency-picker.cjs",[[1,"limebb-example-currency-picker",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-european.cjs",[[1,"limebb-example-currency-picker-european",{"selectedCurrency":[32]}]]],["limebb-example-currency-picker-nordic.cjs",[[1,"limebb-example-currency-picker-nordic",{"selectedCurrency":[32]}]]],["limebb-example-date-range.cjs",[[1,"limebb-example-date-range"]]],["limebb-example-navigation-button-back.cjs",[[1,"limebb-example-navigation-button-back"]]],["limebb-example-navigation-button-close.cjs",[[1,"limebb-example-navigation-button-close"]]],["limebb-example-navigation-button-expand.cjs",[[1,"limebb-example-navigation-button-expand"]]],["limebb-example-navigation-button-float.cjs",[[1,"limebb-example-navigation-button-float"]]],["limebb-example-navigation-button-new-tab.cjs",[[1,"limebb-example-navigation-button-new-tab"]]],["limebb-example-navigation-button-shrink.cjs",[[1,"limebb-example-navigation-button-shrink"]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"disabled":[516],"value":[16]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -4,6 +4,8 @@
     "./components/currency-picker/examples/currency-picker-european.js",
     "./components/currency-picker/examples/currency-picker-nordic.js",
     "./components/currency-picker/examples/currency-picker.js",
+    "./components/date-range/date-range.js",
+    "./components/date-range/examples/date-range.js",
     "./components/navigation-button/navigation-button.js",
     "./components/navigation-button/examples/navigation-button-back.js",
     "./components/navigation-button/examples/navigation-button-close.js",

package/dist/collection/components/date-range/date-range.css

@@ -0,0 +1,59 @@
+:host(limebb-date-range) {
+  isolation: isolate;
+  display: block;
+  position: relative;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.date-pickers {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
+  gap: 0.5rem;
+  padding: 0.75rem 1rem 1.25rem 1rem;
+}
+
+.label-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+.end-time .label-group {
+  flex-direction: row-reverse;
+}
+.label-group .label {
+  font-size: 0.75rem;
+  padding: 0 0.25rem;
+}
+.label-group .circle {
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+.start-time .label-group .circle {
+  background-color: rgb(var(--color-green-default));
+}
+.end-time .label-group .circle {
+  background-color: rgb(var(--color-coral-default));
+}
+.label-group .line {
+  flex-grow: 1;
+  height: 0.25rem;
+  border-radius: 1rem;
+}
+.start-time .label-group .line {
+  background-image: linear-gradient(to right, rgb(var(--color-green-light)), rgb(var(--contrast-400)) 30%);
+}
+.end-time .label-group .line {
+  background-image: linear-gradient(to left, rgb(var(--color-coral-light)), rgb(var(--contrast-400)) 30%);
+}
+
+.date-pickers:has(> :last-child:nth-child(2)) .start-time .line {
+  margin-right: -0.5rem;
+}
+.date-pickers:has(> :last-child:nth-child(2)) .end-time .line {
+  margin-left: -0.5rem;
+}

package/dist/collection/components/date-range/date-range.js

@@ -0,0 +1,253 @@
+import { h } from '@stencil/core';
+/**
+ * This component can receive one or two date values,
+ * and display them in a nice responsive layout, using date pickers.
+ *
+ * :::note
+ * The component needs to be provided at least with one value as
+ * `startTime` or `endTime` to get rendered correctly.
+ * :::
+ *
+ * The most common use case is to visualize a range for an event
+ * that has a start and end time.
+ *
+ * The end user can use the date pickers displayed in the UI,
+ * to change the start and end time. When these values are changed
+ * by the user, the component emits events.
+ *
+ * @exampleComponent limebb-example-date-range
+ */
+export class DateRange {
+  constructor() {
+    this.handleStartTimeChange = (event) => {
+      event.stopPropagation();
+      this.changeStartTime.emit(event.detail);
+    };
+    this.handleEndTimeChange = (event) => {
+      event.stopPropagation();
+      this.changeEndTime.emit(event.detail);
+    };
+    this.startTime = undefined;
+    this.endTime = undefined;
+    this.startTimeLabel = undefined;
+    this.endTimeLabel = undefined;
+    this.language = undefined;
+    this.timeFormat = undefined;
+    this.type = undefined;
+  }
+  componentWillLoad() {
+    this.originalStartTime = this.startTime;
+    this.originalEndTime = this.endTime;
+  }
+  render() {
+    return (h("div", { class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
+  }
+  renderStartDatePicker() {
+    if (!this.originalStartTime) {
+      return;
+    }
+    return (h("div", { class: "start-time" }, this.renderDatePicker(this.startTimeLabel, this.startTime, !this.startTime, this.handleStartTimeChange)));
+  }
+  renderEndDatePicker() {
+    if (!this.originalEndTime) {
+      return;
+    }
+    return (h("div", { class: "end-time" }, this.renderDatePicker(this.endTimeLabel, this.endTime, !this.endTime, this.handleEndTimeChange)));
+  }
+  renderDatePicker(label, value, isInvalid, onChangeHandler) {
+    return [
+      h("div", { class: "label-group" }, h("span", { class: "circle" }), h("span", { class: "label" }, label), h("span", { class: "line" })),
+      h("limel-date-picker", { type: this.type, value: value, format: this.timeFormat, language: this.language, onChange: onChangeHandler, invalid: isInvalid }),
+    ];
+  }
+  static get is() { return "limebb-date-range"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["date-range.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["date-range.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "startTime": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date | undefined",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The start time"
+        }
+      },
+      "endTime": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date | undefined",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A secondary optional time, which is the time when an event ends."
+        }
+      },
+      "startTimeLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label that appears together with the date picker of `startTime`"
+        },
+        "attribute": "start-time-label",
+        "reflect": false
+      },
+      "endTimeLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label that appears together with the date picker of `endTime`"
+        },
+        "attribute": "end-time-label",
+        "reflect": false
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the localization for translations and date formatting"
+        },
+        "attribute": "language",
+        "reflect": false
+      },
+      "timeFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Format to display the selected date in"
+        },
+        "attribute": "time-format",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DateType",
+          "resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
+          "references": {
+            "DateType": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of date picker.\nThe type can be \"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\""
+        },
+        "attribute": "type",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "changeStartTime",
+        "name": "changeStartTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the start time value has changed by the end user,\nusing the date pickers in the UI."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "changeEndTime",
+        "name": "changeEndTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the end time value has changed by the end user,\nusing the date pickers in the UI."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/date-range/examples/date-range.css

@@ -0,0 +1,29 @@
+:host(limebb-example-date-range) {
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(var(--contrast-500));
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+}
+
+span {
+  padding-left: 0.5rem;
+  font-size: 1.25rem;
+}
+
+limebb-date-range {
+  margin-top: 0.75rem;
+  border-radius: 0.75rem;
+  background-color: rgb(var(--contrast-100));
+}
+limebb-date-range:before {
+  content: "";
+  position: absolute;
+  top: -0.5rem;
+  left: 2rem;
+  background-color: inherit;
+  width: 1rem;
+  height: 1rem;
+  rotate: 45deg;
+  border-radius: 0.25rem 0 0 0;
+}

package/dist/collection/components/date-range/examples/date-range.js

@@ -0,0 +1,28 @@
+import { h } from '@stencil/core';
+/**
+ * Basic example
+ */
+export class DateRangeExample {
+  constructor() {
+    this.startTime = new Date('2022-01-02T00:00:00.000Z');
+    this.endTime = new Date('2022-01-03T00:00:00.000Z');
+  }
+  render() {
+    return [
+      h("span", null, "My event"),
+      h("limebb-date-range", { startTime: this.startTime, endTime: this.endTime, startTimeLabel: "Start time", endTimeLabel: "End time", type: "datetime" }),
+    ];
+  }
+  static get is() { return "limebb-example-date-range"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["date-range.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["date-range.css"]
+    };
+  }
+}