smoothly 0.1.66 → 0.1.70

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

@@ -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-picker.cjs.entry.js

@@ -40,14 +40,11 @@ const SmoothlyPicker = class {
         : this.select(option);
   }
   clearSelection() {
-    var _a;
     this.selections = [];
     this.inputElement.focus();
     this.keepFocusOnReRender = true;
-    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(option => (option.description = ""));
   }
   unselect(selection) {
-    var _a;
     const index = this.selections.map(selection => selection.value).indexOf(selection.value);
     if (index != -1) {
       this.selections = [
@@ -56,12 +53,8 @@ const SmoothlyPicker = class {
       ];
       this.keepFocusOnReRender = true;
     }
-    const optionIndex = (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(s => s.value).indexOf(selection.value);
-    if (optionIndex != -1)
-      this.options[optionIndex].description = "";
   }
   select(selection) {
-    var _a;
     const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
     if (isNewSelection)
       this.selections = this.multiple ? [...this.selections, selection] : [selection];
@@ -69,8 +62,6 @@ const SmoothlyPicker = class {
     this.filterOptions();
     this.keepFocusOnReRender = true;
     this.isOpen = this.multiple;
-    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(option => (option.description =
-      option.value == selection.value ? this.getCheckHtml() : this.multiple ? option.description : ""));
   }
   toggleHighlighted() {
     var _a;
@@ -130,14 +121,18 @@ const SmoothlyPicker = class {
       "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
       "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
     };
-    return (index.h(index.Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, index.h("div", null, index.h("label", null, this.label), index.h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) })), index.h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({ padding: "0 1em", height: "2.5em" }, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: [
-        {
-          value: "select-none",
-          name: this.selectNoneName,
-          description: this.selections.length == 0 ? this.getCheckHtml() : "",
-        },
-        ...((_b = this.options) !== null && _b !== void 0 ? _b : []),
-      ] })));
+    this.options.forEach(o => {
+      o.description = this.selections.map(s => s.value).includes(o.value) ? this.getCheckHtml() : "";
+    });
+    const options = [
+      {
+        value: "select-none",
+        name: this.selectNoneName,
+        description: this.selections.length == 0 ? this.getCheckHtml() : "",
+      },
+      ...((_b = this.options) !== null && _b !== void 0 ? _b : []),
+    ];
+    return (index.h(index.Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, index.h("div", null, index.h("label", null, this.label), index.h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) })), index.h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({ padding: "0 1em", height: "2.5em" }, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/smoothly-table-expandable-cell.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
 
-const styleCss = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.5em}.sc-smoothly-table-expandable-cell-h>tr.sc-smoothly-table-expandable-cell{display:none}";
+const styleCss = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.5em}.hide.sc-smoothly-table-expandable-cell{display:none}";
 
 const TableExpandableCell = class {
   constructor(hostRef) {
@@ -33,7 +33,7 @@ const TableExpandableCell = class {
     }
   }
   render() {
-    return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("slot", null), index.h("tr", { ref: e => (this.expansionElement = e) }, this.open ? (index.h("td", { colSpan: 500 }, index.h("slot", { name: "detail" }))) : ([]))));
+    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 {

package/dist/cjs/smoothly-trigger-sink.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-2a5f8661.js');
+const index$1 = require('./index-c973259c.js');
 
 const styleCss = ".sc-smoothly-trigger-sink-h{display:block}[hidden].sc-smoothly-trigger-sink-h{display:none}";
 

package/dist/cjs/smoothly-trigger-source.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-2a5f8661.js');
+const index$1 = require('./index-c973259c.js');
 
 const styleCss = ".sc-smoothly-trigger-source-h{display:block}[hidden].sc-smoothly-trigger-source-h{display:none}";
 

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/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/picker/index.js

@@ -31,14 +31,11 @@ export class SmoothlyPicker {
         : this.select(option);
   }
   clearSelection() {
-    var _a;
     this.selections = [];
     this.inputElement.focus();
     this.keepFocusOnReRender = true;
-    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(option => (option.description = ""));
   }
   unselect(selection) {
-    var _a;
     const index = this.selections.map(selection => selection.value).indexOf(selection.value);
     if (index != -1) {
       this.selections = [
@@ -47,12 +44,8 @@ export class SmoothlyPicker {
       ];
       this.keepFocusOnReRender = true;
     }
-    const optionIndex = (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(s => s.value).indexOf(selection.value);
-    if (optionIndex != -1)
-      this.options[optionIndex].description = "";
   }
   select(selection) {
-    var _a;
     const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
     if (isNewSelection)
       this.selections = this.multiple ? [...this.selections, selection] : [selection];
@@ -60,8 +53,6 @@ export class SmoothlyPicker {
     this.filterOptions();
     this.keepFocusOnReRender = true;
     this.isOpen = this.multiple;
-    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(option => (option.description =
-      option.value == selection.value ? this.getCheckHtml() : this.multiple ? option.description : ""));
   }
   toggleHighlighted() {
     var _a;
@@ -121,18 +112,22 @@ export class SmoothlyPicker {
       "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
       "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
     };
+    this.options.forEach(o => {
+      o.description = this.selections.map(s => s.value).includes(o.value) ? this.getCheckHtml() : "";
+    });
+    const options = [
+      {
+        value: "select-none",
+        name: this.selectNoneName,
+        description: this.selections.length == 0 ? this.getCheckHtml() : "",
+      },
+      ...((_b = this.options) !== null && _b !== void 0 ? _b : []),
+    ];
     return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() },
       h("div", null,
         h("label", null, this.label),
         h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) })),
-      h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({ padding: "0 1em", height: "2.5em" }, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: [
-          {
-            value: "select-none",
-            name: this.selectNoneName,
-            description: this.selections.length == 0 ? this.getCheckHtml() : "",
-          },
-          ...((_b = this.options) !== null && _b !== void 0 ? _b : []),
-        ] })));
+      h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({ padding: "0 1em", height: "2.5em" }, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/exandable/cell/index.js

@@ -25,8 +25,9 @@ export class TableExpandableCell {
   render() {
     return (h(Host, { style: { textAlign: this.align } },
       h("slot", null),
-      h("tr", { ref: e => (this.expansionElement = e) }, this.open ? (h("td", { colSpan: 500 },
-        h("slot", { name: "detail" }))) : ([]))));
+      h("tr", { ref: e => (this.expansionElement = e) },
+        h("td", { colSpan: 500, class: !this.open ? "hide" : "" },
+          h("slot", { name: "detail" })))));
   }
   static get is() { return "smoothly-table-expandable-cell"; }
   static get encapsulation() { return "scoped"; }

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

@@ -2,6 +2,6 @@
 	display: table-cell;
 	padding: 0.5em;
 }
-:host > tr {
+.hide {
 	display: none;
 }