@kubex/zinc 1.1.29 → 1.1.32

package/docs/pages/components/settings-container.md

@@ -132,6 +132,41 @@ for example by adding item-selector="zn-inline-edit" only the inline edit elemen
 </div>
 ```
 
-### Second Example
+### Pull Tab
 
-TODO
+Add the `pull-tab` attribute to replace the settings dropdown with a pull tab anchored to the top right
+of the container. Clicking the tab slides down a panel containing the settings options. Optional content
+can be placed in the `tab` slot to render alongside the chevron.
+
+```html:preview
+
+<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
+  <zn-settings-container pull-tab store-key="example-pull-tab-filters">
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <div slot="filter" attribute="private" default="true">Toggle Private Messages</div>
+    <div slot="filter" attribute="original" default="true">Toggle Original Messages</div>
+
+  </zn-settings-container>
+</div>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.29",
+  "version": "1.1.32",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/editor/editor.component.ts

@@ -3,7 +3,6 @@ import {deepQuerySelectorAll} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
 import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
-import {trim} from "lodash";
 import Attachment from "./modules/attachment/attachment";
 import ContextMenu from "./modules/context-menu/context-menu";
 import DatePicker from "./modules/date-picker/date-picker";
@@ -456,7 +455,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     }
     if (!content || content === '') return;
 
-    this._content = trim(content);
+    this._content = content.trim();
 
     if (editorMode === 'replace') {
       this._replaceTextAtSelection();

package/src/components/header/header.scss

@@ -127,7 +127,8 @@
   &__right {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: hidden;
+    overflow-x: clip;
+    overflow-y: visible;
     min-width: 20px;
   }
 
@@ -225,6 +226,7 @@
   slot[name="actions"] {
     justify-content: end;
     flex-wrap: nowrap;
+    height: var(--zn-icon-size, 20px);
   }
 
   slot[name="actions"]::slotted(zn-button-menu) {