@supersoniks/concorde 1.1.42 → 1.1.43

package/core/components/ui/menu/menu.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, state, query } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 const tagName = "sonic-menu";
 let MenuItems = class MenuItems extends LitElement {
@@ -28,18 +28,26 @@ let MenuItems = class MenuItems extends LitElement {
          */
         this.shadow = null;
         this.moreShape = "circle";
+        this.scrollable = false;
+        this.observer = null;
         /**
          * Propriété min-width du bouton
          */
         this.minWidth = "0";
         this.hasMoreElements = false;
+        this.updateIsScollable = () => {
+            if (this.scrollable) {
+                this.initScrollable();
+                this.setScrollShadow(this, this.direction);
+            }
+        };
     }
     checkIfMore() {
         var _a;
         this.hasMoreElements = !!((_a = this.moreElements) === null || _a === void 0 ? void 0 : _a.length);
     }
     updated(_changedProperties) {
-        const moreBtn = this.querySelector('.more-btn');
+        const moreBtn = this.querySelector(".more-btn");
         if (this.size && moreBtn) {
             moreBtn.setAttribute("size", this.size);
         }
@@ -53,6 +61,85 @@ let MenuItems = class MenuItems extends LitElement {
     }
     mainSlotChange() {
         this.setChildrenSize(this.menuChildren);
+        this.updateIsScollable();
+    }
+    connectedCallback() {
+        this.observer = new ResizeObserver(this.updateIsScollable);
+        // observe if menu elements are overflowing and initiate scrollable
+        this.observer.observe(this);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    initScrollable() {
+        const tabsMenu = this;
+        let isDown = false;
+        let startX;
+        let scrollLeft;
+        if (this.scrollable) {
+            tabsMenu.addEventListener("mousedown", (e) => {
+                isDown = true;
+                tabsMenu.classList.add("active");
+                startX = e.pageX - tabsMenu.offsetLeft;
+                scrollLeft = tabsMenu.scrollLeft;
+            });
+            tabsMenu.addEventListener("mouseleave", () => {
+                isDown = false;
+                tabsMenu.classList.remove("active");
+            });
+            tabsMenu.addEventListener("mouseup", () => {
+                isDown = false;
+                tabsMenu.classList.remove("active");
+            });
+            tabsMenu.addEventListener("mousemove", (e) => {
+                if (!isDown)
+                    return;
+                e.preventDefault();
+                const x = e.pageX - tabsMenu.offsetLeft;
+                const walk = (x - startX) * 1.5; //scroll-fast
+                tabsMenu.scrollLeft = scrollLeft - walk;
+                this.setScrollShadow(tabsMenu, this.direction);
+            });
+            tabsMenu.addEventListener("scroll", (e) => {
+                e.preventDefault();
+                // const delta = Math.sign(e.deltaY);
+                // tabsMenu.scrollLeft += delta * 50;
+                this.setScrollShadow(tabsMenu, this.direction);
+            });
+        }
+    }
+    setScrollShadow(target, direction) {
+        if (direction == "row") {
+            if (target.scrollLeft > 0) {
+                this.classList.add("shadow-left");
+            }
+            else {
+                this.classList.remove("shadow-left");
+            }
+            if (target.scrollLeft < target.scrollWidth - target.offsetWidth) {
+                this.classList.add("shadow-right");
+            }
+            else {
+                this.classList.remove("shadow-right");
+            }
+        }
+        else if (direction == "column") {
+            if (target.scrollTop > 0) {
+                this.classList.add("shadow-top");
+            }
+            else {
+                this.classList.remove("shadow-top");
+            }
+            if (target.scrollTop < target.scrollHeight - (target.offsetHeight + 1)) {
+                this.classList.add("shadow-bottom");
+            }
+            else {
+                this.classList.remove("shadow-bottom");
+            }
+        }
     }
     setChildrenSize(menuItems) {
         menuItems.forEach((elt) => {
@@ -63,7 +150,7 @@ let MenuItems = class MenuItems extends LitElement {
                 elt.setAttribute("align", this.align);
             }
             if (this.direction == "row") {
-                if (elt.getAttribute('shape') == "block") {
+                if (elt.getAttribute("shape") == "block") {
                     elt.setAttribute("shape", "default");
                 }
             }
@@ -73,34 +160,34 @@ let MenuItems = class MenuItems extends LitElement {
         const menuStyles = {
             minWidth: this.minWidth,
             flexDirection: this.direction,
-            gap: this.gap
+            gap: this.gap,
         };
         const isMenuRow = this.direction == "row";
         const popStyles = {
-            display: 'block',
-            alignSelf: isMenuRow ? 'center' : 'flex-start',
-            justifySelf: 'center',
-            flexDirection: this.direction
+            display: "block",
+            alignSelf: isMenuRow ? "center" : "flex-start",
+            justifySelf: "center",
+            flexDirection: this.direction,
         };
         const popBtnStyles = {
-            marginLeft: isMenuRow ? '' : '.55em'
+            marginLeft: isMenuRow ? "" : ".55em",
         };
         return html `<menu part="menu" class="shadowable" style=${styleMap(menuStyles)}>
-                <slot @slotchange=${this.mainSlotChange}></slot>
-                <sonic-pop style=${styleMap(popStyles)}  class=${!this.hasMoreElements ? 'hidden' : ''}>
-                  <sonic-menu-item  style=${styleMap(popBtnStyles)} class="more-btn" shape=${this.moreShape} align="center" >
-                    <sonic-icon size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"} ></sonic-icon>
-                  </sonic-menu-item>
-                  <slot name="more"  @slotchange=${this.checkIfMore} slot="content"></slot>
-                </sonic-pop>
-              </menu>`;
+      <slot @slotchange=${this.mainSlotChange}></slot>
+      <sonic-pop style=${styleMap(popStyles)} class=${!this.hasMoreElements ? "hidden" : ""}>
+        <sonic-menu-item style=${styleMap(popBtnStyles)} class="more-btn" shape=${this.moreShape} align="center">
+          <sonic-icon size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"}></sonic-icon>
+        </sonic-menu-item>
+        <slot name="more" @slotchange=${this.checkIfMore} slot="content"></slot>
+      </sonic-pop>
+    </menu>`;
     }
 };
 MenuItems.styles = [
     css `
       :host {
         display: block;
-        --sc-menu-gap:.15rem;
+        --sc-menu-gap: 0.15rem;
       }
 
       :host > menu {
@@ -109,9 +196,9 @@ MenuItems.styles = [
         margin: 0;
         padding: 0.35em;
       }
- 
+
       .hidden {
-        display:none !important;
+        display: none !important;
       }
 
       /*OMBRE*/
@@ -128,11 +215,79 @@ MenuItems.styles = [
       :host([shadow="lg"]) .shadowable {
         box-shadow: var(--sc-shadow-lg);
       }
-      
+
       :host([shadow="none"]) .shadowable {
         box-shadow: none;
       }
-    
+
+      /* SCROLLABLE*/
+      :host([scrollable]) {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+      :host([scrollable]) menu > * {
+        scroll-snap-align: start;
+        white-space: nowrap;
+      }
+      :host([scrollable][direction="row"]) {
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+      }
+      :host([scrollable][direction="column"]) {
+        overflow-y: scroll;
+        scroll-snap-type: y mandatory;
+      }
+      :host([scrollable])::-webkit-scrollbar {
+        display: none !important;
+      }
+      :host([scrollable][direction="row"].shadow-right) {
+        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="row"].shadow-left) {
+        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="row"].shadow-left.shadow-right) {
+        -webkit-mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+      }
+      :host([scrollable][direction="column"].shadow-top) {
+        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="column"].shadow-bottom) {
+        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="column"].shadow-top.shadow-bottom) {
+        -webkit-mask-image: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+      }
     `,
 ];
 __decorate([
@@ -153,9 +308,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], MenuItems.prototype, "moreShape", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuItems.prototype, "scrollable", void 0);
 __decorate([
     property({ type: String })
 ], MenuItems.prototype, "minWidth", void 0);
+__decorate([
+    query("menu")
+], MenuItems.prototype, "menu", void 0);
 __decorate([
     queryAssignedElements({ selector: "sonic-menu-item" })
 ], MenuItems.prototype, "menuChildren", void 0);
@@ -169,8 +330,3 @@ MenuItems = __decorate([
     customElement(tagName)
 ], MenuItems);
 export { MenuItems };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, MenuItems);
-}
-catch (e) { }

package/core/components/ui/modal/modal-actions.js

@@ -29,7 +29,7 @@ ModalActions.styles = [
         display: flex;
         gap: 0.5rem;
         margin-top: auto;
-        padding-top: 1rem;
+        padding-top: 1.5rem;
       }
     `,
 ];
@@ -40,8 +40,3 @@ ModalActions = __decorate([
     customElement(tagName)
 ], ModalActions);
 export { ModalActions };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, ModalActions);
-}
-catch (e) { }

package/core/components/ui/modal/modal-close.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 export declare class ModalClose extends LitElement {
     static styles: import("lit").CSSResult[];
+    reset?: string;
     render(): import("lit-html").TemplateResult<1>;
     handleClick(): void;
 }

package/core/components/ui/modal/modal-close.js

@@ -5,11 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 const tagName = "sonic-modal-close";
 let ModalClose = class ModalClose extends LitElement {
     render() {
-        return html `<sonic-button shape="circle" variant="ghost" @click=${this.handleClick}
+        return html `<sonic-button reset=${ifDefined(this.reset)} shape="circle" @click=${this.handleClick}
       ><sonic-icon name="cancel" size="lg"></sonic-icon
     ></sonic-button>`;
     }
@@ -21,19 +22,22 @@ let ModalClose = class ModalClose extends LitElement {
 ModalClose.styles = [
     css `
       :host {
-        position: absolute;
-        right: 0.6rem;
-        top: 0.6rem;
+        position: sticky;
+        display: block;
+        align-self: flex-end;
+        height: 0;
+        top: 0;
+        padding-top: 0.5rem;
+        padding-right: 0.5rem;
+        transform: translate3d(calc(var(--sc-modal-px)), calc(-1 * var(--sc-modal-py)), 0);
         z-index: 20;
       }
     `,
 ];
+__decorate([
+    property()
+], ModalClose.prototype, "reset", void 0);
 ModalClose = __decorate([
     customElement(tagName)
 ], ModalClose);
 export { ModalClose };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, ModalClose);
-}
-catch (e) { }

package/core/components/ui/modal/modal-content.js

@@ -23,8 +23,3 @@ ModalContent = __decorate([
     customElement(tagName)
 ], ModalContent);
 export { ModalContent };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, ModalContent);
-}
-catch (e) { }

package/core/components/ui/modal/modal-subtitle.js

@@ -17,9 +17,10 @@ ModalSubTitle.styles = [
       :host {
         font-size: 1.1rem;
         display: block;
-        text-transform: uppercase;
+        line-height: 1.1rem;
         line-height: var(--sc-headings-line-height);
         font-family: var(--sc-headings-font-family);
+        font-weight: var(--sc-headings-font-weight);
       }
     `,
 ];
@@ -27,8 +28,3 @@ ModalSubTitle = __decorate([
     customElement(tagName)
 ], ModalSubTitle);
 export { ModalSubTitle };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, ModalSubTitle);
-}
-catch (e) { }

package/core/components/ui/modal/modal-title.js

@@ -27,8 +27,3 @@ ModalTitle = __decorate([
     customElement(tagName)
 ], ModalTitle);
 export { ModalTitle };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, ModalTitle);
-}
-catch (e) { }

package/core/components/ui/modal/modal.d.ts

@@ -1,17 +1,16 @@
-import { LitElement, nothing } from "lit";
+import { LitElement, nothing, PropertyValues } from "lit";
 import "@supersoniks/concorde/core/components/ui/modal/modal-actions";
-import "@supersoniks/concorde/core/components/ui/modal/modal-title";
-import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
-import "@supersoniks/concorde/core/components/ui/modal/modal-content";
 import "@supersoniks/concorde/core/components/ui/modal/modal-close";
+import "@supersoniks/concorde/core/components/ui/modal/modal-content";
+import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
+import "@supersoniks/concorde/core/components/ui/modal/modal-title";
 declare type ModalCreateOptions = {
     content?: string;
 };
-declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
 export declare class Modal extends Modal_base {
     static styles: import("lit").CSSResult[];
-    hideOnOverlayClick: boolean;
-    hideOnEscape: boolean;
+    forceAction: boolean;
     align: "center" | "right" | "left";
     padding: string;
     maxWidth: string;
@@ -26,6 +25,7 @@ export declare class Modal extends Modal_base {
     static create(options: ModalCreateOptions): Modal;
     connectedCallback(): void;
     updated(): void;
+    willUpdate(_changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
     show(): void;
     hide(): void;

package/core/components/ui/modal/modal.js

@@ -4,24 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css, nothing } from "lit";
-import { customElement, property, queryAssignedElements, query } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { animate, fadeIn, fadeOut } from "@lit-labs/motion";
-import { styleMap } from "lit/directives/style-map.js";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, queryAssignedElements } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 import "@supersoniks/concorde/core/components/ui/modal/modal-actions";
-import "@supersoniks/concorde/core/components/ui/modal/modal-title";
-import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
-import "@supersoniks/concorde/core/components/ui/modal/modal-content";
 import "@supersoniks/concorde/core/components/ui/modal/modal-close";
+import "@supersoniks/concorde/core/components/ui/modal/modal-content";
+import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
+import "@supersoniks/concorde/core/components/ui/modal/modal-title";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 const tagName = "sonic-modal";
 let Modal = class Modal extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
-        this.hideOnOverlayClick = true;
-        this.hideOnEscape = true;
-        this.align = "center";
+        this.forceAction = false;
+        this.align = "left";
         this.padding = "var(--sc-modal-py) var(--sc-modal-px)";
         this.maxWidth = "var(--sc-modal-max-w) ";
         this.maxHeight = "var(--sc-modal-max-h) ";
@@ -41,6 +41,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.handleFullsceen();
     }
     updated() {
         const currentModal = this;
@@ -51,10 +52,15 @@ let Modal = class Modal extends Subscriber(LitElement) {
             }, { once: true });
         });
     }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has("fullScreen")) {
+            this.handleFullsceen();
+        }
+        super.willUpdate(_changedProperties);
+    }
     render() {
         if (this.visible == false)
             return nothing;
-        this.handleFullsceen();
         const modalStyles = {
             padding: this.padding,
             maxWidth: this.maxWidth,
@@ -99,7 +105,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
 
       <div
         class="overlay"
-        @click="${this.hideOnOverlayClick ? this.hide : ""}"
+        @click="${!this.forceAction ? this.hide : ""}"
         ${animate({
             keyframeOptions: {
                 duration: 500,
@@ -121,6 +127,9 @@ let Modal = class Modal extends Subscriber(LitElement) {
         this.visible = false;
         (_a = this.modalElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
         this.dispatchEvent(new CustomEvent("hide"));
+        if (this.hasAttribute("resetDataProviderOnHide")) {
+            PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});
+        }
     }
     dispose() {
         this.hide();
@@ -130,7 +139,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
         if (e.key === "Escape") {
             const modals = [...document.querySelectorAll(tagName)];
             modals.forEach((item) => {
-                if (this.hideOnEscape == true) {
+                if (!this.forceAction) {
                     item.hide();
                 }
             });
@@ -152,11 +161,8 @@ Modal.styles = [
       :host {
         --sc-modal-py: 2.5rem;
         --sc-modal-px: 1.5rem;
-        --sc-modal-content: var(--sc-base-content);
-        --sc-modal-bg: var(--sc-base);
         --sc-modal-max-w: min(100vw, 64ch);
         --sc-modal-max-h: 80vh;
-        --sc-modal-scrollbar-bg: var(--sc-base-300);
         --sc-modal-rounded: var(--sc-rounded-lg);
       }
 
@@ -170,7 +176,6 @@ Modal.styles = [
         left: 0;
         width: 100%;
         z-index: 990;
-        text-align: center;
         align-items: center;
         justify-content: center;
         flex-direction: column;
@@ -178,18 +183,16 @@ Modal.styles = [
         pointer-events: none;
       }
 
-     
       .modal-content {
-        overflow-y: auto;
         display: flex;
         flex-direction: column;
-        text-align: center;
-        align-items: center;
         min-height: 10rem;
+        line-height: 1.25;
       }
 
       .modal {
         background: var(--sc-base);
+        color: var(--sc-base-content);
         width: 100%;
         box-shadow: var(--sc-shadow-lg);
         border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;
@@ -199,7 +202,7 @@ Modal.styles = [
       }
 
       .overlay {
-        background: var(--sc-base-200);
+        background: var(--sc-modal-overlay-bg, var(--sc-base-200));
         left: 0;
         top: 0;
         right: 0;
@@ -210,12 +213,12 @@ Modal.styles = [
       }
 
       ::slotted(sonic-modal-title) {
-        margin-bottom: 1rem;
+        margin-bottom: 1.25rem;
       }
 
       ::slotted(sonic-modal-subtitle) {
-        margin-top: -0.45rem;
-        margin-bottom: 1rem;
+        margin-top: -0.9rem;
+        margin-bottom: 1.25rem;
       }
 
       @media (max-width: 767.5px) {
@@ -248,6 +251,11 @@ Modal.styles = [
         align-items: flex-start;
       }
 
+      :host([align="center"]) .modal-content {
+        text-align: center;
+        align-items: center;
+      }
+
       :host([align="right"]) .modal-content {
         text-align: right;
         align-items: flex-end;
@@ -260,11 +268,8 @@ Modal.styles = [
     `,
 ];
 __decorate([
-    property({ type: Boolean, reflect: true })
-], Modal.prototype, "hideOnOverlayClick", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Modal.prototype, "hideOnEscape", void 0);
+    property({ type: Boolean })
+], Modal.prototype, "forceAction", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Modal.prototype, "align", void 0);
@@ -303,10 +308,5 @@ Modal = __decorate([
 ], Modal);
 export { Modal };
 if (typeof window !== "undefined") {
-    let win = window;
-    win.SonicModal = Modal;
-}
-try {
-    customElements.define(tagName, Modal);
+    window.SonicModal = Modal;
 }
-catch (e) { }

package/core/components/ui/pop/pop.d.ts

@@ -1,23 +1,24 @@
-import { LitElement } from 'lit';
-declare type PopPlacement = 'bottom' | 'top' | 'right' | 'left';
+import { LitElement } from "lit";
+declare type PopPlacement = "bottom" | "top" | "right" | "left";
 export declare class Pop extends LitElement {
     static pops: Set<Pop>;
     static styles: import("lit").CSSResult[];
     open: boolean;
     popBtn: HTMLElement;
     popContent: HTMLElement;
-    toggle: 'true' | 'false';
+    toggle: "true" | "false";
+    noToggle: boolean;
     inline: boolean;
     /**
      * Ombre
      */
-    shadow: '' | 'none' | 'sm' | 'md' | 'lg';
+    shadow: "" | "none" | "sm" | "md" | "lg";
     placement: PopPlacement;
     positioningRuns: boolean;
     lastContentX: number;
     lastContentY: number;
     runPositioning(): void;
-    _toggle(e: any): void;
+    _toggle(e: Event): void;
     _show(): void;
     _hide(): void;
     _handleClosePop(e: Event): void;