smoothly 0.1.68 → 0.1.72

package/dist/cjs/smoothly-calendar.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-b8688617.js');
-const generate = require('./generate-5e7cd3f7.js');
+const index$1 = require('./index-e37f73fe.js');
+const generate = require('./generate-7f7f7d99.js');
 require('./_commonjsHelpers-10109b76.js');
 
-const styleCss = ".sc-smoothly-calendar-h{display:block}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:.5em .5em 0 .5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-light-shade))}td.sc-smoothly-calendar:not(.selected):hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}";
+const styleCss = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected):hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}";
 
 const Calendar = class {
   constructor(hostRef) {
@@ -32,7 +32,7 @@ const Calendar = class {
           event.stopPropagation();
         } }),
       index.h("table", null, index.h("thead", null, index.h("tr", null, generate.weekdays().map(day => (index.h("th", null, day))))), generate.month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (index.h("tr", null, week.map(date => {
-        var _a, _b;
+        var _a, _b, _c;
         return (index.h("td", { tabindex: 1, onClick: () => {
             this.valueChanged.emit((this.value = date));
             this.clickCounter += 1;
@@ -45,9 +45,9 @@ const Calendar = class {
                 this.start = date;
             }
           }, class: (date == this.value ? ["selected"] : [])
-            .concat(...(date == index$1.dist.Date.now() ? ["today"] : []), date == this.value ? ["selected"] : [], this.doubleInput
-            ? index$1.dist.Date.parse(date) >= index$1.dist.Date.parse((_a = this.start) !== null && _a !== void 0 ? _a : "") &&
-              index$1.dist.Date.parse(date) <= index$1.dist.Date.parse((_b = this.end) !== null && _b !== void 0 ? _b : "")
+            .concat(...(date == index$1.dist.Date.now() ? ["today"] : []), index$1.dist.Date.firstOfMonth((_a = this.month) !== null && _a !== void 0 ? _a : this.value) == index$1.dist.Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
+            ? index$1.dist.Date.parse(date) >= index$1.dist.Date.parse((_b = this.start) !== null && _b !== void 0 ? _b : "") &&
+              index$1.dist.Date.parse(date) <= index$1.dist.Date.parse((_c = this.end) !== null && _c !== void 0 ? _c : "")
               ? ["dateRange"]
               : []
             : "")

package/dist/cjs/smoothly-display-amount.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-b8688617.js');
+const index$1 = require('./index-e37f73fe.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
@@ -15,9 +15,7 @@ const SmoothlyDisplayAmount = class {
   format(amount) {
     const digitsPerGroup = 3;
     const defaultDecimals = 2;
-    const maxDecimals = (index$1.dist.Currency.decimalDigits(this.currency)
-      ? index$1.dist.Currency.decimalDigits(this.currency)
-      : defaultDecimals);
+    const maxDecimals = (index$1.dist.Currency.decimalDigits(this.currency) ? index$1.dist.Currency.decimalDigits(this.currency) : defaultDecimals);
     let beforeSeparator = amount.length;
     let separator;
     let result = amount;

package/dist/cjs/smoothly-display.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-896ac706.js');
+const index$1 = require('./index-7c9d0102.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";

package/dist/cjs/smoothly-input-date-range.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-b8688617.js');
+const index$1 = require('./index-e37f73fe.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-date-range-h{position:relative;display:block}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>smoothly-input.sc-smoothly-input-date-range{padding:0}";

package/dist/cjs/smoothly-input-date.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-b8688617.js');
+const index$1 = require('./index-e37f73fe.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";

package/dist/cjs/smoothly-input-month.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-b8688617.js');
-const generate = require('./generate-5e7cd3f7.js');
+const index$1 = require('./index-e37f73fe.js');
+const generate = require('./generate-7f7f7d99.js');
 require('./_commonjsHelpers-10109b76.js');
 
-const styleCss = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}button.sc-smoothly-input-month{border:none;background:none;cursor:pointer;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
+const styleCss = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
 
 const MonthSelector = class {
   constructor(hostRef) {
@@ -17,21 +17,21 @@ const MonthSelector = class {
   onValueChanged(next) {
     this.valueChanged.emit(next);
   }
+  adjustMonth(delta) {
+    var _a;
+    const date = index$1.dist.Date.parse((_a = this.value) !== null && _a !== void 0 ? _a : index$1.dist.Date.now());
+    date.setMonth(date.getMonth() + delta);
+    this.value = index$1.dist.Date.create(date);
+  }
   render() {
     var _a, _b;
     return [
-      index.h("button", { onClick: () => this.adjustMonth(-1) }, index.h("smoothly-icon", { name: "chevron-back-outline", size: "small" })),
+      index.h("div", { onClick: () => this.adjustMonth(-1) }, index.h("smoothly-icon", { name: "chevron-back-outline", size: "small" })),
       index.h("smoothly-selector", { onSelected: (e) => (this.value = e.detail) }, generate.years((_a = this.value) !== null && _a !== void 0 ? _a : index$1.dist.Date.now()).map(year => (index.h("smoothly-item", { value: year.date, selected: year.selected }, year.name)))),
       index.h("smoothly-selector", { onSelected: (e) => (this.value = e.detail) }, generate.months((_b = this.value) !== null && _b !== void 0 ? _b : index$1.dist.Date.now()).map(month => (index.h("smoothly-item", { value: month.date, selected: month.selected }, month.name)))),
-      index.h("button", { onClick: () => this.adjustMonth(1) }, index.h("smoothly-icon", { name: "chevron-forward-outline", size: "small" })),
+      index.h("div", { onClick: () => this.adjustMonth(1) }, index.h("smoothly-icon", { name: "chevron-forward-outline", size: "small" })),
     ];
   }
-  adjustMonth(delta) {
-    var _a;
-    const date = index$1.dist.Date.parse((_a = this.value) !== null && _a !== void 0 ? _a : index$1.dist.Date.now());
-    date.setMonth(date.getMonth() + delta);
-    this.value = index$1.dist.Date.create(date);
-  }
   static get watchers() { return {
     "value": ["onValueChanged"]
   }; }

package/dist/cjs/smoothly-input.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-896ac706.js');
+const index$1 = require('./index-7c9d0102.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-h{display:block;position:relative}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-text-tint));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;width:calc(100% - 0.4em);background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 30px unset inset !important;-webkit-box-shadow:0 0 0 30px unset inset !important}input.sc-smoothly-input:-webkit-autofill{-webkit-text-fill-color:unset !important}input.sc-smoothly-input:-internal-autofill-previewed,input.sc-smoothly-input:-internal-autofill-selected,textarea.sc-smoothly-input:-internal-autofill-previewed,textarea.sc-smoothly-input:-internal-autofill-selected,select.sc-smoothly-input:-internal-autofill-previewed,select.sc-smoothly-input:-internal-autofill-selected{background-color:none !important;background-image:none !important;color:unset !important}";
@@ -88,7 +88,7 @@ const SmoothlyInput = class {
           end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
           direction: backend.selectionDirection ? backend.selectionDirection : "none",
         } });
-      if ((!(event.ctrlKey && event.key == "v") && event.key.length == 1) ||
+      if ((!((event.ctrlKey || event.metaKey) && event.key == "v") && event.key.length == 1) ||
         event.key == "ArrowLeft" ||
         event.key == "ArrowRight" ||
         event.key == "Delete" ||

package/dist/cjs/smoothly-select.cjs.entry.js

@@ -13,7 +13,7 @@ const SmoothlySelect = class {
   }
   optionSelected() {
     if (this.selectElement)
-      this.selectionChanged.emit({ identifier: this.identifier, value: this.value = this.selectElement.value });
+      this.selectionChanged.emit({ identifier: this.identifier, value: (this.value = this.selectElement.value) });
   }
   componentDidLoad() {
     var _a;

package/dist/cjs/smoothly-table-demo.cjs.entry.js

@@ -11,7 +11,10 @@ const TableDemo = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header A"), index.h("smoothly-table-header", null, "Header B"), index.h("smoothly-table-header", null, "Header C")), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-expandable-cell", null, "Value 1A", index.h("div", { slot: "detail" }, "1A details")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 20, currency: "EUR" }), index.h("div", { slot: "detail" }, "Budget details.")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 18, currency: "EUR" }), index.h("div", { slot: "detail" }, "Cost details."))), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-expandable-cell", null, "Value 1A", index.h("div", { slot: "detail" }, "2A details")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" }), index.h("div", { slot: "detail" }, "Budget details.")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 38, currency: "EUR" }), index.h("div", { slot: "detail" }, "Cost details.")))));
+    return [
+      index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header A"), index.h("smoothly-table-header", null, "Header B"), index.h("smoothly-table-header", null, "Header C")), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-expandable-cell", null, "Value 1A", index.h("div", { slot: "detail" }, "1A details")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 20, currency: "EUR" }), index.h("div", { slot: "detail" }, "Budget details.")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 18, currency: "EUR" }), index.h("div", { slot: "detail" }, "Cost details."))), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-expandable-cell", null, "Value 1A", index.h("div", { slot: "detail" }, "2A details")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 30, currency: "EUR" }), index.h("div", { slot: "detail" }, "Budget details.")), index.h("smoothly-table-expandable-cell", null, index.h("smoothly-display", { type: "price", value: 38, currency: "EUR" }), index.h("div", { slot: "detail" }, "Cost details.")))),
+      index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header D"), index.h("smoothly-table-header", null, "Header E"), index.h("smoothly-table-header", null, "Header F")), index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, "Value 1A"), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: 20, currency: "EUR" })), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: 18, currency: "EUR" })), index.h("div", { slot: "detail" }, "Cost details.")), index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, "Value 1A"), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: 20, currency: "EUR" })), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: 18, currency: "EUR" })), index.h("div", { slot: "detail" }, "Cost details."))),
+    ];
   }
 };
 TableDemo.style = styleCss;

package/dist/cjs/smoothly-table-header.cjs.entry.js

@@ -14,7 +14,7 @@ const TableHeader = class {
   onClick(event) {
     this.sort.emit({
       property: this.name,
-      direction: this.sortDirection = this.sortDirection == "ascending" ? "descending" : "ascending",
+      direction: (this.sortDirection = this.sortDirection == "ascending" ? "descending" : "ascending"),
     });
     console.log("sort", this.name, this.sortDirection);
     event.preventDefault();

package/dist/cjs/smoothly-table-row.cjs.entry.js

@@ -4,15 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
 
-const styleCss = ".sc-smoothly-table-row-h{display:table-row;border:1px solid rgb(var(--smoothly-dark-color), 0.5);cursor:pointer}.sc-smoothly-table-row-h:nth-child(even){background-color:rgb(var(--smoothly-default-color))}.sc-smoothly-table-row-h:hover{background-color:rgb(var(--smoothly-default-color))}";
+const styleCss = ".sc-smoothly-table-row-h{display:table-row;border:1px solid rgb(var(--smoothly-dark-color), 0.5);cursor:pointer}.sc-smoothly-table-row-h:nth-child(even){background-color:rgb(var(--smoothly-default-color))}.sc-smoothly-table-row-h:hover{background-color:rgb(var(--smoothly-default-color))}.hide.sc-smoothly-table-row{display:none}";
 
 const TableRow = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.expansionOpen = index.createEvent(this, "expansionOpen", 7);
+    this.align = "left";
+  }
+  openChanged(value) {
+    if (this.expansionElement)
+      this.element.after(this.expansionElement);
+  }
+  onClick(e) {
+    this.open = !this.open;
+    e.stopPropagation();
+  }
+  componentDidRender() {
+    this.expansionOpen.emit(this.expansionElement);
+    if (this.expansionElement && this.open)
+      this.element.after(this.expansionElement);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("slot", null), index.h("tr", { ref: e => (this.expansionElement = e) }, index.h("td", { colSpan: 500, class: !this.open ? "hide" : "" }, index.h("slot", { name: "detail" })))));
   }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
 };
 TableRow.style = styleCss;
 

package/dist/cjs/smoothly.cjs.js

@@ -120,5 +120,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["smoothly-app-demo.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-table-cell.cjs",[[6,"smoothly-table-cell"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo.cjs",[[0,"smoothly-input-demo"]]],["smoothly-select-demo.cjs",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo.cjs",[[2,"smoothly-table-demo"]]],["smoothly-display-demo.cjs",[[0,"smoothly-display-demo"]]],["smoothly-notifier.cjs",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-app.cjs",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo.cjs",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo.cjs",[[2,"smoothly-icon-demo"]]],["smoothly-room.cjs",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range.cjs",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"open":[1028]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"]]]]],["smoothly-picker.cjs",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog.cjs",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-checkbox.cjs",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-spinner.cjs",[[2,"smoothly-spinner",{"active":[516]}]]],["smoothly-submit.cjs",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-urlencoded.cjs",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion.cjs",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item.cjs",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount.cjs",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame.cjs",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup.cjs",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-radio.cjs",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select.cjs",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-table.cjs",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-expandable-cell.cjs",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row.cjs",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header.cjs",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row.cjs",[[6,"smoothly-table-row"]]],["smoothly-icon.cjs",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-selector.cjs",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-input-date.cjs",[[6,"smoothly-input-date",{"value":[1025],"open":[1028]}]]],["smoothly-notification.cjs",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-menu-options.cjs",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display.cjs",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time.cjs",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-tuple.cjs",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-option.cjs",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-item.cjs",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-input-month.cjs",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-calendar.cjs",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"doubleInput":[516,"double-input"]}]]],["smoothly-input.cjs",[[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-trigger.cjs",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
+  return index.bootstrapLazy([["smoothly-app-demo.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo.cjs",[[0,"smoothly-input-demo"]]],["smoothly-select-demo.cjs",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo.cjs",[[2,"smoothly-table-demo"]]],["smoothly-display-demo.cjs",[[0,"smoothly-display-demo"]]],["smoothly-app.cjs",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo.cjs",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo.cjs",[[2,"smoothly-icon-demo"]]],["smoothly-room.cjs",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range.cjs",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"open":[1028]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"]]]]],["smoothly-notifier.cjs",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker.cjs",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog.cjs",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-checkbox.cjs",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit.cjs",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-tuple.cjs",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-urlencoded.cjs",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion.cjs",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item.cjs",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount.cjs",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame.cjs",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup.cjs",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-radio.cjs",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select.cjs",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-table.cjs",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell.cjs",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell.cjs",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row.cjs",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header.cjs",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row.cjs",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon.cjs",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-selector.cjs",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-input-date.cjs",[[6,"smoothly-input-date",{"value":[1025],"open":[1028]}]]],["smoothly-notification.cjs",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-menu-options.cjs",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display.cjs",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time.cjs",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-spinner.cjs",[[2,"smoothly-spinner",{"active":[516]}]]],["smoothly-option.cjs",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-item.cjs",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-input-month.cjs",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-calendar.cjs",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"doubleInput":[516,"double-input"]}]]],["smoothly-input.cjs",[[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-trigger.cjs",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
 });

package/dist/collection/components/calendar/generate.js

@@ -11,7 +11,8 @@ export function month(date) {
       d.setDate(day++);
       r.push(isoly.Date.create(d));
     }
-    result.push(r);
+    if (row < 5 || isoly.Date.firstOfMonth(r[0]) == isoly.Date.firstOfMonth(date))
+      result.push(r);
   }
   return result;
 }

package/dist/collection/components/calendar/index.js

@@ -23,7 +23,7 @@ export class Calendar {
         h("thead", null,
           h("tr", null, generate.weekdays().map(day => (h("th", null, day))))),
         generate.month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (h("tr", null, week.map(date => {
-          var _a, _b;
+          var _a, _b, _c;
           return (h("td", { tabindex: 1, onClick: () => {
               this.valueChanged.emit((this.value = date));
               this.clickCounter += 1;
@@ -36,9 +36,9 @@ export class Calendar {
                   this.start = date;
               }
             }, class: (date == this.value ? ["selected"] : [])
-              .concat(...(date == Date.now() ? ["today"] : []), date == this.value ? ["selected"] : [], this.doubleInput
-              ? Date.parse(date) >= Date.parse((_a = this.start) !== null && _a !== void 0 ? _a : "") &&
-                Date.parse(date) <= Date.parse((_b = this.end) !== null && _b !== void 0 ? _b : "")
+              .concat(...(date == Date.now() ? ["today"] : []), Date.firstOfMonth((_a = this.month) !== null && _a !== void 0 ? _a : this.value) == Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
+              ? Date.parse(date) >= Date.parse((_b = this.start) !== null && _b !== void 0 ? _b : "") &&
+                Date.parse(date) <= Date.parse((_c = this.end) !== null && _c !== void 0 ? _c : "")
                 ? ["dateRange"]
                 : []
               : "")

package/dist/collection/components/calendar/style.css

@@ -1,35 +1,53 @@
 :host {
-  display: block;
+	display: block;
+	--other-month-opacity: 0.5;
 }
 :host > smoothly-input-month {
 	width: calc(100% - 1em);
-	padding: .5em .5em 0 .5em;
+	padding: 0.5em 0.5em 0 0.5em;
 }
 th,
 td {
 	text-align: center;
-	padding: .5em;
+	padding: 0.5em;
 	min-width: 2em;
 	background-color: rgb(var(--smoothly-default-shade));
+	cursor: pointer;
+	user-select: none;
+}
+td.currentMonth {
+	color: rgb(var(--smoothly-default-contrast));
+}
+td:not(.currentMonth) {
+	color: rgba(var(--smoothly-default-contrast), var(--other-month-opacity));
+}
+td:nth-child(6):not(.currentMonth).selected,
+td:nth-child(6):not(.currentMonth).dateRange,
+td:nth-child(7):not(.currentMonth).selected,
+td:nth-child(7):not(.currentMonth).dateRange {
+	color: rgba(var(--smoothly-default-contrast));
 }
-
 td:nth-child(6),
 td:nth-child(7) {
-  color: rgb(var(--smoothly-light-shade));
+	color: rgb(var(--smoothly-danger-tint));
+}
+td:nth-child(6):not(.currentMonth),
+td:nth-child(7):not(.currentMonth) {
+	color: rgba(var(--smoothly-danger-tint), var(--other-month-opacity));
 }
 td:not(.selected):hover {
-  color: rgb(var(--smoothly-primary-contrast));
-  background: rgb(var(--smoothly-primary-tint));
+	color: rgb(var(--smoothly-primary-contrast));
+	background: rgb(var(--smoothly-primary-tint));
 }
 td.selected {
-  color: rgb(var(--smoothly-primary-contrast));
-  background: rgb(var(--smoothly-primary-color));
+	color: rgb(var(--smoothly-primary-contrast));
+	background: rgb(var(--smoothly-primary-color));
 }
 td:not(.selected,.dateRange):not(:hover).today {
-  background: rgb(var(--smoothly-dark-tint));
+	background: rgb(var(--smoothly-dark-tint));
 	color: rgb(var(--smoothly-dark-contrast));
 }
 td.dateRange {
 	color: rgb(var(--smoothly-primary-contrast));
-  background: rgb(var(--smoothly-primary-tint));
+	background: rgb(var(--smoothly-primary-tint));
 }

package/dist/collection/components/display-amount/index.js

@@ -4,9 +4,7 @@ export class SmoothlyDisplayAmount {
   format(amount) {
     const digitsPerGroup = 3;
     const defaultDecimals = 2;
-    const maxDecimals = (Currency.decimalDigits(this.currency)
-      ? Currency.decimalDigits(this.currency)
-      : defaultDecimals);
+    const maxDecimals = (Currency.decimalDigits(this.currency) ? Currency.decimalDigits(this.currency) : defaultDecimals);
     let beforeSeparator = amount.length;
     let separator;
     let result = amount;

package/dist/collection/components/input/index.js

@@ -78,7 +78,7 @@ export class SmoothlyInput {
           end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
           direction: backend.selectionDirection ? backend.selectionDirection : "none",
         } });
-      if ((!(event.ctrlKey && event.key == "v") && event.key.length == 1) ||
+      if ((!((event.ctrlKey || event.metaKey) && event.key == "v") && event.key.length == 1) ||
         event.key == "ArrowLeft" ||
         event.key == "ArrowRight" ||
         event.key == "Delete" ||

package/dist/collection/components/input-month/index.js

@@ -5,23 +5,23 @@ export class MonthSelector {
   onValueChanged(next) {
     this.valueChanged.emit(next);
   }
+  adjustMonth(delta) {
+    var _a;
+    const date = Date.parse((_a = this.value) !== null && _a !== void 0 ? _a : Date.now());
+    date.setMonth(date.getMonth() + delta);
+    this.value = Date.create(date);
+  }
   render() {
     var _a, _b;
     return [
-      h("button", { onClick: () => this.adjustMonth(-1) },
+      h("div", { onClick: () => this.adjustMonth(-1) },
         h("smoothly-icon", { name: "chevron-back-outline", size: "small" })),
       h("smoothly-selector", { onSelected: (e) => (this.value = e.detail) }, generate.years((_a = this.value) !== null && _a !== void 0 ? _a : Date.now()).map(year => (h("smoothly-item", { value: year.date, selected: year.selected }, year.name)))),
       h("smoothly-selector", { onSelected: (e) => (this.value = e.detail) }, generate.months((_b = this.value) !== null && _b !== void 0 ? _b : Date.now()).map(month => (h("smoothly-item", { value: month.date, selected: month.selected }, month.name)))),
-      h("button", { onClick: () => this.adjustMonth(1) },
+      h("div", { onClick: () => this.adjustMonth(1) },
         h("smoothly-icon", { name: "chevron-forward-outline", size: "small" })),
     ];
   }
-  adjustMonth(delta) {
-    var _a;
-    const date = Date.parse((_a = this.value) !== null && _a !== void 0 ? _a : Date.now());
-    date.setMonth(date.getMonth() + delta);
-    this.value = Date.create(date);
-  }
   static get is() { return "smoothly-input-month"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/input-month/style.css

@@ -3,12 +3,6 @@
 	justify-content: space-between;
 	font-size: large;
 }
-button {
-  border: none;
-	background: none;
-	cursor: pointer;
-  font-size: large;
-}
 smoothly-icon {
 	font-size: smaller;
 }

package/dist/collection/components/select/index.js

@@ -2,7 +2,7 @@ import { Component, Event, h, Prop } from "@stencil/core";
 export class SmoothlySelect {
   optionSelected() {
     if (this.selectElement)
-      this.selectionChanged.emit({ identifier: this.identifier, value: this.value = this.selectElement.value });
+      this.selectionChanged.emit({ identifier: this.identifier, value: (this.value = this.selectElement.value) });
   }
   componentDidLoad() {
     var _a;

package/dist/collection/components/table/demo/index.js

@@ -1,31 +1,52 @@
 import { Component, h } from "@stencil/core";
 export class TableDemo {
   render() {
-    return (h("smoothly-table", null,
-      h("smoothly-table-row", null,
-        h("smoothly-table-header", null, "Header A"),
-        h("smoothly-table-header", null, "Header B"),
-        h("smoothly-table-header", null, "Header C")),
-      h("smoothly-table-expandable-row", null,
-        h("smoothly-table-expandable-cell", null,
-          "Value 1A",
-          h("div", { slot: "detail" }, "1A details")),
-        h("smoothly-table-expandable-cell", null,
-          h("smoothly-display", { type: "price", value: 20, currency: "EUR" }),
-          h("div", { slot: "detail" }, "Budget details.")),
-        h("smoothly-table-expandable-cell", null,
-          h("smoothly-display", { type: "price", value: 18, currency: "EUR" }),
+    return [
+      h("smoothly-table", null,
+        h("smoothly-table-row", null,
+          h("smoothly-table-header", null, "Header A"),
+          h("smoothly-table-header", null, "Header B"),
+          h("smoothly-table-header", null, "Header C")),
+        h("smoothly-table-expandable-row", null,
+          h("smoothly-table-expandable-cell", null,
+            "Value 1A",
+            h("div", { slot: "detail" }, "1A details")),
+          h("smoothly-table-expandable-cell", null,
+            h("smoothly-display", { type: "price", value: 20, currency: "EUR" }),
+            h("div", { slot: "detail" }, "Budget details.")),
+          h("smoothly-table-expandable-cell", null,
+            h("smoothly-display", { type: "price", value: 18, currency: "EUR" }),
+            h("div", { slot: "detail" }, "Cost details."))),
+        h("smoothly-table-expandable-row", null,
+          h("smoothly-table-expandable-cell", null,
+            "Value 1A",
+            h("div", { slot: "detail" }, "2A details")),
+          h("smoothly-table-expandable-cell", null,
+            h("smoothly-display", { type: "price", value: 30, currency: "EUR" }),
+            h("div", { slot: "detail" }, "Budget details.")),
+          h("smoothly-table-expandable-cell", null,
+            h("smoothly-display", { type: "price", value: 38, currency: "EUR" }),
+            h("div", { slot: "detail" }, "Cost details.")))),
+      h("smoothly-table", null,
+        h("smoothly-table-row", null,
+          h("smoothly-table-header", null, "Header D"),
+          h("smoothly-table-header", null, "Header E"),
+          h("smoothly-table-header", null, "Header F")),
+        h("smoothly-table-row", null,
+          h("smoothly-table-cell", null, "Value 1A"),
+          h("smoothly-table-cell", null,
+            h("smoothly-display", { type: "price", value: 20, currency: "EUR" })),
+          h("smoothly-table-cell", null,
+            h("smoothly-display", { type: "price", value: 18, currency: "EUR" })),
+          h("div", { slot: "detail" }, "Cost details.")),
+        h("smoothly-table-row", null,
+          h("smoothly-table-cell", null, "Value 1A"),
+          h("smoothly-table-cell", null,
+            h("smoothly-display", { type: "price", value: 20, currency: "EUR" })),
+          h("smoothly-table-cell", null,
+            h("smoothly-display", { type: "price", value: 18, currency: "EUR" })),
           h("div", { slot: "detail" }, "Cost details."))),
-      h("smoothly-table-expandable-row", null,
-        h("smoothly-table-expandable-cell", null,
-          "Value 1A",
-          h("div", { slot: "detail" }, "2A details")),
-        h("smoothly-table-expandable-cell", null,
-          h("smoothly-display", { type: "price", value: 30, currency: "EUR" }),
-          h("div", { slot: "detail" }, "Budget details.")),
-        h("smoothly-table-expandable-cell", null,
-          h("smoothly-display", { type: "price", value: 38, currency: "EUR" }),
-          h("div", { slot: "detail" }, "Cost details.")))));
+    ];
   }
   static get is() { return "smoothly-table-demo"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/exandable/row/style.css

@@ -9,3 +9,4 @@
 :host:hover {
 	background-color: rgb(var(--smoothly-default-color));
 }
+

package/dist/collection/components/table/header/index.js

@@ -3,7 +3,7 @@ export class TableHeader {
   onClick(event) {
     this.sort.emit({
       property: this.name,
-      direction: this.sortDirection = this.sortDirection == "ascending" ? "descending" : "ascending",
+      direction: (this.sortDirection = this.sortDirection == "ascending" ? "descending" : "ascending"),
     });
     console.log("sort", this.name, this.sortDirection);
     event.preventDefault();