@ship-ui/core 0.18.10 → 0.18.11

package/assets/mcp/components.json

@@ -3093,6 +3093,12 @@
         "description": "",
         "defaultValue": "false"
       },
+      {
+        "name": "asSheetOnMobile",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
       {
         "name": "disableOpenByClick",
         "type": "boolean",
@@ -3119,6 +3125,12 @@
       }
     ],
     "methods": [
+      {
+        "name": "toggleIsOpen",
+        "parameters": "event: MouseEvent",
+        "returnType": "any",
+        "description": ""
+      },
       {
         "name": "eventClose",
         "parameters": "$event: MouseEvent",

package/fesm2022/ship-ui-core.mjs

@@ -2931,6 +2931,7 @@ class ShipPopover {
         this.#document = inject(DOCUMENT);
         this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
         this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : /* istanbul ignore next */ []));
+        this.asSheetOnMobile = input(false, ...(ngDevMode ? [{ debugName: "asSheetOnMobile" }] : /* istanbul ignore next */ []));
         this.disableOpenByClick = input(false, ...(ngDevMode ? [{ debugName: "disableOpenByClick" }] : /* istanbul ignore next */ []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
@@ -2945,6 +2946,7 @@ class ShipPopover {
         this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : /* istanbul ignore next */ []));
         this.openAbort = null;
+        this.#originalOverflow = null;
         this.openEffect = effect(() => {
             const open = this.isOpen();
             queueMicrotask(() => {
@@ -2972,7 +2974,13 @@ class ShipPopover {
                     if (!popoverEl.isConnected)
                         return;
                     popoverEl.showPopover();
-                    if (!this.SUPPORTS_ANCHOR) {
+                    const isMobileSheet = this.asSheetOnMobile() && window.innerWidth <= 768;
+                    if (isMobileSheet) {
+                        this.#originalOverflow = this.#document.body.style.overflow;
+                        this.#document.body.style.overflow = 'hidden';
+                        this.menuStyle.set(null); // Clear any leftover inline styles
+                    }
+                    if (!this.SUPPORTS_ANCHOR && !isMobileSheet) {
                         setTimeout(() => {
                             const scrollableParent = this.#findScrollableParent(popoverEl);
                             scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), {
@@ -2990,11 +2998,16 @@ class ShipPopover {
                     popoverEl.hidePopover();
                     this.openAbort?.abort();
                     this.openAbort = null;
+                    if (this.asSheetOnMobile() && this.#originalOverflow !== null) {
+                        this.#document.body.style.overflow = this.#originalOverflow;
+                        this.#originalOverflow = null;
+                    }
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : /* istanbul ignore next */ []));
     }
     #document;
+    #originalOverflow;
     toggleIsOpen(event) {
         if (!this.disableOpenByClick()) {
             event.preventDefault();
@@ -3124,7 +3137,7 @@ class ShipPopover {
         this.openAbort = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipPopover, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipPopover, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, asSheetOnMobile: { classPropertyName: "asSheetOnMobile", publicName: "asSheetOnMobile", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()", "class.as-sheet": "asSheetOnMobile()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
@@ -3171,9 +3184,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class.multi-layer]': 'asMultiLayer()',
+                        '[class.as-sheet]': 'asSheetOnMobile()',
                     },
                 }]
-        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], disableOpenByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOpenByClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popoverRef', { isSignal: true }] }], popoverContentRef: [{ type: i0.ViewChild, args: ['popoverContentRef', { isSignal: true }] }] } });
+        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], asSheetOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "asSheetOnMobile", required: false }] }], disableOpenByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOpenByClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popoverRef', { isSignal: true }] }], popoverContentRef: [{ type: i0.ViewChild, args: ['popoverContentRef', { isSignal: true }] }] } });
 
 class ShipFormFieldPopover {
     constructor() {
@@ -3235,6 +3249,7 @@ class ShipFormFieldPopover {
     <sh-popover
       [(isOpen)]="isOpen"
       (closed)="close()"
+      [asSheetOnMobile]="true"
       [options]="{
         closeOnButton: false,
         closeOnEsc: true,
@@ -3267,7 +3282,7 @@ class ShipFormFieldPopover {
         <ng-content select="[hint]"></ng-content>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipFormFieldPopover, decorators: [{
             type: Component,
@@ -3280,6 +3295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     <sh-popover
       [(isOpen)]="isOpen"
       (closed)="close()"
+      [asSheetOnMobile]="true"
       [options]="{
         closeOnButton: false,
         closeOnEsc: true,
@@ -5211,7 +5227,7 @@ class ShipMenu {
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipMenu, decorators: [{
             type: Component,
@@ -6412,7 +6428,7 @@ class ShipSelect {
         }
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["checked", "color", "variant", "readonly", "disabled", "noInternalInput"], outputs: ["checkedChange"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["checked", "color", "variant", "readonly", "disabled", "noInternalInput"], outputs: ["checkedChange"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipSelect, decorators: [{
             type: Component,