@kubex/zinc 1.1.29 → 1.1.32

package/src/components/panel/panel.scss

@@ -51,6 +51,7 @@
 
     &::part(base) {
       border-bottom: 0;
+      overflow: visible;
     }
 
     &--inline {

package/src/components/rating/rating.component.ts

@@ -1,4 +1,3 @@
-import {clamp} from "lodash";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {FormControlController, validValidityState} from "../../internal/form";
@@ -98,7 +97,7 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
     const {left, width} = this.rating.getBoundingClientRect();
     const value = this._roundToPrecision(((coordinate - left) / width) * this.max, this.precision);
 
-    return clamp(value, 0, this.max);
+    return Math.min(Math.max(value, 0), this.max);
   }
 
   private _getValueFromMousePosition(event: MouseEvent): number {

package/src/components/settings-container/settings-container.component.ts

@@ -25,10 +25,13 @@ interface SettingsContainerFilter {
  *
  * @dependency zn-example
  *
- * @event zn-event-name - Emitted as an example.
+ * @event zn-show - Emitted when the pull tab panel opens.
+ * @event zn-hide - Emitted when the pull tab panel closes.
  *
  * @slot - The default slot.
- * @slot example - An example slot.
+ * @slot filter - Filter definitions used to toggle visibility of content.
+ * @slot dropdown-content - Custom content for the settings panel.
+ * @slot tab - Extra content rendered inside the pull tab next to the chevron.
  *
  * @csspart base - The component's base wrapper.
  *
@@ -43,6 +46,10 @@ export default class ZnSettingsContainer extends ZincElement {
 
   @property({attribute: 'store-key'}) storeKey: string;
   @property({attribute: 'no-scroll'}) noScroll: boolean;
+  @property({attribute: 'pull-tab', type: Boolean, reflect: true}) pullTab = false;
+  @property({type: Boolean, reflect: true}) open = false;
+
+  @state() private panelExpanded = false;
 
   private readonly _mutationObserver = new MutationController(this, {
     target: null,
@@ -88,6 +95,40 @@ export default class ZnSettingsContainer extends ZincElement {
     this._mutationObserver.observe(this);
   }
 
+  disconnectedCallback() {
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+    super.disconnectedCallback();
+  }
+
+  private handleDocumentMouseDown = (e: MouseEvent) => {
+    if (!this.open) return;
+    const pullTab = this.shadowRoot?.querySelector('.pull-tab');
+    if (pullTab && e.composedPath().includes(pullTab)) return;
+    this.hidePullTab();
+  };
+
+  private togglePullTab = () => {
+    if (this.open) {
+      this.hidePullTab();
+    } else {
+      this.open = true;
+      document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
+      this.emit('zn-show');
+    }
+  };
+
+  private hidePullTab() {
+    this.open = false;
+    this.panelExpanded = false;
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+    this.emit('zn-hide');
+  }
+
+  private handlePanelTransitionEnd = (e: TransitionEvent) => {
+    if (e.propertyName !== 'grid-template-rows') return;
+    this.panelExpanded = this.open;
+  };
+
   // Debounced scheduling to avoid excessive updates on rapid DOM mutations
   private scheduleUpdateFilters() {
     if (this._updateFiltersScheduled) return;
@@ -221,17 +262,41 @@ export default class ZnSettingsContainer extends ZincElement {
         <div class="scroll-content">
           <slot @slotchange="${this.handleContentSlotChange}"></slot>
         </div>
-        <zn-dropdown placement="${placement}" class="${classMap({
-          'setting-container__dropdown': true,
-          [`setting-container__dropdown--${this.position}`]: true,
-        })}">
-          <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
-          ${this.getDropdownContent()}
-        </zn-dropdown>
+        ${this.pullTab ? this.renderPullTab() : html`
+          <zn-dropdown placement="${placement}" class="${classMap({
+            'setting-container__dropdown': true,
+            [`setting-container__dropdown--${this.position}`]: true,
+          })}">
+            <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
+            ${this.getDropdownContent()}
+          </zn-dropdown>`}
       </div>
     `;
   }
 
+  private renderPullTab() {
+    return html`
+      <div class="${classMap({
+        'pull-tab': true,
+        'pull-tab--open': this.open,
+        'pull-tab--expanded': this.panelExpanded,
+      })}">
+        <div class="pull-tab__panel" @transitionend="${this.handlePanelTransitionEnd}">
+          <div class="pull-tab__panel-content">
+            ${this.getDropdownContent()}
+          </div>
+        </div>
+        <button class="pull-tab__tab"
+                type="button"
+                aria-expanded="${this.open ? 'true' : 'false'}"
+                aria-label="Settings"
+                @click="${this.togglePullTab}">
+          <slot name="tab"></slot>
+          <zn-icon src="${this.open ? 'chevron-up@lu' : 'chevron-down@lu'}" size="20"></zn-icon>
+        </button>
+      </div>`;
+  }
+
   private getDropdownContent() {
     const hasDropdownContent = this.querySelector('[slot="dropdown-content"]');
     if (hasDropdownContent) {

package/src/components/settings-container/settings-container.scss

@@ -84,6 +84,81 @@ zn-button {
   border-radius: var(--zn-border-radius);
 }
 
+.pull-tab {
+  position: absolute;
+  top: 0;
+  right: calc(var(--zn-base-gap) + var(--zn-gutter));
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-height: 100%;
+
+  &__panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    min-height: 0;
+    overflow: hidden;
+    background-color: rgb(var(--zn-panel));
+    border: 1px solid rgb(var(--zn-border-color));
+    border-top: none;
+    border-bottom-width: 0;
+    border-radius: 0 0 0 var(--zn-border-radius);
+    transition: grid-template-rows 0.22s ease, border-bottom-width 0s linear 0.22s;
+    will-change: grid-template-rows;
+  }
+
+  &--open &__panel {
+    grid-template-rows: 1fr;
+    border-bottom-width: 1px;
+    transition: grid-template-rows 0.22s ease, border-bottom-width 0s linear 0s;
+  }
+
+  &__panel-content {
+    min-height: 0;
+    overflow: hidden;
+
+    .settings-container__dropdown-content {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      margin-bottom: 0;
+      max-width: none;
+      width: auto;
+    }
+  }
+
+  &--expanded &__panel-content {
+    overflow-y: auto;
+  }
+
+  &__tab {
+    flex-shrink: 0;
+    background-color: rgb(var(--zn-panel));
+    color: rgb(var(--zn-text-heading));
+    border: 1px solid rgb(var(--zn-border-color));
+    border-top: none;
+    border-radius: 0 0 10px 10px;
+    padding: var(--zn-spacing-x-small);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--zn-spacing-x-small);
+    max-height: 36px;
+    overflow: hidden;
+    margin-top: -1px;
+
+    &:hover {
+      background-color: rgb(var(--zn-shadow));
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgb(var(--zn-primary));
+      outline-offset: -2px;
+    }
+  }
+}
+
 .settings-container__dropdown-content {
   display: flex;
   flex-direction: column;

package/src/components/settings-container/settings-container.test.ts

@@ -7,4 +7,39 @@ describe('<zn-settings-container>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('pull tab', () => {
+    it('should render a pull tab instead of the dropdown', async () => {
+      const el = await fixture<HTMLElement>(html` <zn-settings-container pull-tab></zn-settings-container> `);
+
+      expect(el.shadowRoot!.querySelector('.pull-tab')).to.exist;
+      expect(el.shadowRoot!.querySelector('zn-dropdown')).to.not.exist;
+    });
+
+    it('should open and close when the tab is clicked', async () => {
+      const el = await fixture<HTMLElement>(html` <zn-settings-container pull-tab></zn-settings-container> `);
+      const tab = el.shadowRoot!.querySelector<HTMLButtonElement>('.pull-tab__tab')!;
+
+      tab.click();
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.true;
+
+      tab.click();
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.false;
+    });
+
+    it('should close when clicking outside', async () => {
+      const el = await fixture<HTMLElement>(html` <zn-settings-container pull-tab></zn-settings-container> `);
+      const tab = el.shadowRoot!.querySelector<HTMLButtonElement>('.pull-tab__tab')!;
+
+      tab.click();
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.true;
+
+      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, composed: true }));
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.false;
+    });
+  });
 });