@simai-studio/ui 0.0.0-stage → 5.20261019.1710

package/distr/smart/drawer/js/drawer.min.js

@@ -0,0 +1,44 @@
+(()=>{"use strict";var e={"5f0529568b98"(e,t,s){s.a(e,async(e,t)=>{try{var r=s("ddf1cdb42ecc"),o=s("fbe0570fcc69"),a=s("0d662e4d7d63"),n=e([r,o,a]);[r,o,a]=n.then?(await n)():n;var i=s.n(o);const l={en:{closeLabel:"Close drawer"},ru:{closeLabel:"Закрыть панель"}},d="sf-drawer",c=["edge"],h=(e,t)=>1===e.nodeType&&e.getAttribute("slot")===t,u=e=>c.some(t=>h(e,t)),f="data-sf-drawer-portal",p="[data-sf-overlay-container], [data-sf-drawer-container]",b=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","),m=[],g=48,w=`(min-width: ${g}rem)`;function y(...e){return e.flat().filter(Boolean).join(" ")}const v={globalBound:!1,lockState:null,add(e){this.remove(e,!1),m.push(e),this.sync(),this.syncPageLock()},remove(e,t=!0){const s=m.indexOf(e);s>=0&&m.splice(s,1),this.sync(),t&&this.syncPageLock()},bringToFront(e){m.includes(e)&&(this.remove(e,!1),m.push(e),this.sync())},isTop:e=>m.at(-1)===e,sync(){m.forEach((e,t)=>e.applyStackPosition(t)),this.syncDock()},syncDock(){const e=document.documentElement;if(!e)return;this.bindDockMedia();const t={start:0,end:0},s=this.reservesDock();for(const e of s?m:[]){if(!e.openState||!e.docked)continue;const s=e.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),r=s?Math.round(s.getBoundingClientRect().width):0;t[e.dockSide]+=r}for(const s of["start","end"]){const r=`--sf-drawer-dock-inline-${s}`;t[s]>0?e.style.setProperty(r,`${t[s]}px`):e.style.removeProperty(r)}},bindDockMedia(){void 0===this.dockMedia&&(this.dockMedia="function"==typeof globalThis.matchMedia?globalThis.matchMedia(w):null,this.dockMedia?.addEventListener?.("change",()=>this.syncDock()));const e=document.querySelector("[data-sf-drawer-dock-host]");e!==this.dockHost&&(this.dockHostObserver?.disconnect(),this.dockHost=e,this.dockHostObserver=e&&"function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=this.dockReserved;this.reservesDock()!==e&&this.syncDock()}):null,this.dockHostObserver?.observe(e,{box:"border-box"}))},reservesDock(){const e=this.dockHost;let t;if(e?.isConnected){const s=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;t=e.getBoundingClientRect().width>=g*s}else t=!this.dockMedia||this.dockMedia.matches;return this.dockReserved=t,t},syncPageLock(){const e=m.find(e=>e.openState&&e.modal&&!e.closest(p));e?this.lockPage(e.preserveScrollGap):this.unlockPage()},lockPage(e){const t=document.documentElement,s=document.body;if(!t||!s||this.lockState)return;const r=Math.max(0,window.innerWidth-t.clientWidth);this.lockState={htmlOverflow:t.style.overflow,bodyOverflow:s.style.overflow,bodyPaddingInlineEnd:s.style.paddingInlineEnd},t.style.overflow="hidden",s.style.overflow="hidden",e&&r>0&&(s.style.paddingInlineEnd=`${r}px`)},unlockPage(){if(!this.lockState)return;const e=document.documentElement,t=document.body;e.style.overflow=this.lockState.htmlOverflow,t.style.overflow=this.lockState.bodyOverflow,t.style.paddingInlineEnd=this.lockState.bodyPaddingInlineEnd,this.lockState=null},bindGlobalEvents(){this.globalBound||"undefined"==typeof document||(document.addEventListener("click",e=>{if(!(e.target instanceof Element))return;const t=e.target.closest("[data-drawer]"),s=e.target.closest("[data-sf-drawer-open]"),r=e.target.closest("[data-sf-drawer-toggle]"),o=e.target.closest("[data-sf-drawer-close]"),a=t?.getAttribute("data-drawer")||"",n=["open","toggle","close"].includes(a)?a:s?"open":r?"toggle":o?"close":"",i=t||s||r||o;if(!n||!i)return;const l=i.getAttribute("aria-controls")||i.getAttribute(`data-sf-drawer-${n}`)||i.closest("[data-sf-drawer-id]")?.getAttribute("data-sf-drawer-id");l&&customElements.whenDefined(d).then(()=>{document.getElementById(l)?.[n]?.()})}),this.globalBound=!0)}};class k extends(i()){static get props(){return{templateName:{attribute:"template",default:"default"},opened:{attribute:"open",type:Boolean,default:!1},placement:{default:"right",values:["left","right","inline-start","inline-end"]},overlay:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},docked:{type:Boolean,default:!1},size:{default:"1",values:["1/2","1","2","full"],valueAliases:{"1/2":["small"],1:["medium"],2:["large"]}},closeOnEsc:{attribute:"close-on-esc",type:Boolean,default:!0},closeOnOverlay:{attribute:"close-on-overlay",type:Boolean,default:!0},preserveScrollGap:{attribute:"preserve-scroll-gap",type:Boolean,default:!0},showClose:{attribute:"show-close",type:Boolean,default:!0},closePlacement:{attribute:"close-placement",default:"inside",values:["inside","outside"]},title:{default:""},label:{default:""},closeLabel:{attribute:"close-label",default:""},width:{default:""},stackOffset:{attribute:"stack-offset",default:""},gutter:{default:""},zIndex:{attribute:"z-index",default:""},overlayClass:{attribute:"overlay-class",default:""},panelClass:{attribute:"panel-class",default:""},panelStyle:{attribute:"panel-style",default:""},headerClass:{attribute:"header-class",default:""},bodyClass:{attribute:"body-class",default:""},closeClass:{attribute:"close-class",default:""}}}static get defaultTrueAttributes(){return new Set(["overlay","modal","close-on-esc","close-on-overlay","preserve-scroll-gap","show-close"])}constructor(){super(),this.drawerId="",this._portalRoot=null,this._contentNodes=null,this._lastActive=null,this._syncingOpenAttribute=!1,this._hasEmittedReady=!1,this._stackIndex=-1,this._focusAfterRender=!1,this._emitAfterOpen=!1,this._dockObserver=null,this.onKeyDown=this.onKeyDown.bind(this),this.handleRootClick=this.handleRootClick.bind(this)}connectedCallback(){this._contentNodes||(this._contentNodes=Array.from(this.childNodes)),this.drawerId=this.resolveDrawerId(),super.connectedCallback(),v.bindGlobalEvents(),document.addEventListener("keydown",this.onKeyDown),this.openState&&(this._focusAfterRender=this.modal,v.add(this))}disconnectedCallback(){this._areaObserver?.disconnect(),this._areaObserver=null,document.removeEventListener("keydown",this.onKeyDown),this._dockObserver?.disconnect(),this._dockObserver=null,v.remove(this),this.clearPortal(),super.disconnectedCallback()}attributeChangedCallback(e,t,s){t!==s&&("open"!==e||this._syncingOpenAttribute||!this._isMounted?("modal"!==e&&"docked"!==e||!this.openState||v.syncPageLock(),"docked"!==e&&"placement"!==e&&"size"!==e&&"width"!==e||!this.openState||requestAnimationFrame(()=>{v.syncDock(),v.sync()}),super.attributeChangedCallback(e,t,s)):this.syncExternalOpenState(null!==s))}get openState(){return this.hasAttribute("open")}get placement(){return this.getEnumAttr("placement",["left","right","inline-start","inline-end"],"right")}get overlay(){return this.getBooleanAttr("overlay",!0)}get modal(){return!this.docked&&this.getBooleanAttr("modal",!0)}get docked(){return this.getBooleanAttr("docked",!1)}get gutter(){return this.getAttribute("gutter")||""}get stackOffset(){return this.getAttribute("stack-offset")||""}get stackEdge(){const e=this.placement;if(!e.startsWith("inline"))return e;return"inline-start"===e!==("rtl"===(this.closest("[dir]")?.getAttribute("dir")||document.documentElement.dir))?"left":"right"}get dockSide(){const e=this.placement;if("inline-start"===e)return"start";if("inline-end"===e)return"end";const t="rtl"===globalThis.getComputedStyle?.(document.documentElement).direction;return"left"===e?t?"end":"start":t?"start":"end"}get size(){return this.getProp("size")}get closeOnEsc(){return this.getBooleanAttr("close-on-esc",!0)}get closeOnOverlay(){return this.getBooleanAttr("close-on-overlay",!0)}get preserveScrollGap(){return this.getBooleanAttr("preserve-scroll-gap",!0)}get showClose(){return this.getBooleanAttr("show-close",!0)}get closePlacement(){return this.getEnumAttr("close-placement",["inside","outside"],"inside")}resolveDrawerId(){const e=this.id||this.getAttribute("drawer-id");if(e)return this.id||(this.id=e),e;const t=`sf-drawer-${Math.random().toString(36).slice(2,10)}`;return this.id=t,this.setAttribute("drawer-id",t),t}templateContext(){return this.createTemplateContext({closeLabel:this.getAttribute("close-label")||(0,a.pageText)(l,"closeLabel",this),drawerId:this.drawerId||this.resolveDrawerId(),open:this.openState,placement:this.placement,overlay:this.overlay,modal:this.modal,docked:this.docked,size:this.size,showClose:this.showClose,closePlacement:this.closePlacement,title:this.getAttribute("title")||"",label:this.getAttribute("label")||this.getAttribute("title")||"",closeLabel:this.getAttribute("close-label")||this.defaultCloseLabel,width:this.getAttribute("width")||"",stackOffset:this.stackOffset,gutter:this.gutter,zIndex:this.drawerZIndex,overlayClass:this.getAttribute("overlay-class")||"",panelClass:this.getAttribute("panel-class")||"",panelStyle:this.getAttribute("panel-style")||"",headerClass:this.getAttribute("header-class")||"",bodyClass:this.getAttribute("body-class")||"",closeClass:this.getAttribute("close-class")||""})}get drawerZIndex(){return this.getAttribute("z-index")||`calc(var(--sf-drawer-z-index, var(--sf-z-index-9)) + ${2*Math.max(0,this._stackIndex)})`}get defaultCloseLabel(){return(0,a.pageText)(l,"closeLabel",this)}async renderComponent(e=[]){const t=++this._renderToken,s=await this.resolveTemplateResult(e);this._isMounted&&t===this._renderToken&&((0,r.render)(s,this.resolvePortalRoot()),this.afterRender())}resolvePortalRoot(){if(this._portalRoot?.isConnected)return this._portalRoot;const e=this.closest(p)||document.body,t=`[${f}="${s=this.drawerId,globalThis.CSS?.escape?globalThis.CSS.escape(s):String(s).replace(/["\\]/g,"\\$&")}"]`;var s;return this._portalRoot=e.querySelector(t)||document.createElement("div"),this._portalRoot.setAttribute(f,this.drawerId),this._portalRoot.isConnected||e.append(this._portalRoot),this._portalRoot}watchForAreaChildren(){this._areaObserver||(this._areaObserver=new MutationObserver(()=>{const e=this.getDrawerRoot();e&&this.projectAreas(e)}),this._areaObserver.observe(this,{childList:!0}))}projectAreas(e){for(const[t,s]of[["edge","[data-sf-drawer-edge]"]]){const r=e.querySelector(s);if(!r)continue;const o=[...this._contentNodes.filter(e=>h(e,t)&&e.parentElement!==r),...[...this.children].filter(e=>h(e,t))];o.length&&r.append(...new Set(o))}}afterRender(){const e=this.getDrawerRoot();if(!e)return;this.projectAreas(e),this.watchForAreaChildren();const t=e.querySelector("[data-sf-drawer-body]");t&&"1"!==t.dataset.sfDrawerContentReady&&(t.replaceChildren(...this._contentNodes.filter(e=>!u(e))),t.dataset.sfDrawerContentReady="1"),e.removeEventListener("click",this.handleRootClick),e.addEventListener("click",this.handleRootClick),this.applyStackPosition(),this.observeDock(e);const s=this._hasEmittedReady?"drawer:update":"drawer:ready";this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{component:this,drawer:this,drawerId:this.drawerId,root:e}})),this._hasEmittedReady=!0,(this._focusAfterRender||this._emitAfterOpen)&&(this._focusAfterRender=!1,requestAnimationFrame(()=>{this.openState&&this.modal&&this.focusFirst(),this._emitAfterOpen&&this.emitDrawerEvent("drawer:after-open"),this._emitAfterOpen=!1}))}template(){const e=this.templateContext(),t=e.showClose?r.html`<button
+          type="button"
+          class=${y("sf-icon-button sf-drawer-close sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3 m-0","outside"===e.closePlacement&&"sf-drawer-close--outside",e.closeClass)}
+          aria-label=${e.closeLabel}
+          data-drawer="close"
+          data-sf-drawer-close=${e.drawerId}
+        >
+          <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true">
+            <span class="sf-close-icon"></span>
+          </span>
+        </button>`:r.nothing;return r.html`<div
+      class=${y("sf-drawer",e.open&&"is-open",e.rootClass)}
+      style=${`z-index:${e.zIndex};${e.width?`--sf-drawer-width:${e.width};`:""}${e.stackOffset?`--sf-drawer-stack-offset:${e.stackOffset};`:""}${e.rootStyle||""}`}
+      data-sf-drawer-root
+      data-sf-drawer-id=${e.drawerId}
+      data-sf-drawer-placement=${e.placement}
+      data-sf-drawer-size=${e.size}
+      data-sf-drawer-modal=${e.modal?"true":"false"}
+      data-sf-drawer-docked=${e.docked?"true":"false"}
+      aria-hidden=${e.open?"false":"true"}
+    >
+      <div class=${y("sf-drawer-overlay",e.overlayClass)} data-sf-drawer-overlay ?hidden=${!e.modal||!e.overlay}></div>
+      <section
+        class=${y("sf-drawer-panel",e.panelClass)}
+        style=${`${e.width?`--sf-drawer-width:${e.width};`:""}${e.stackOffset?`--sf-drawer-stack-offset:${e.stackOffset};`:""}${e.gutter?`--sf-drawer-gutter:${e.gutter};`:""}${e.panelStyle||""}`}
+        role=${e.docked?"region":"dialog"}
+        aria-modal=${e.modal?"true":r.nothing}
+        aria-label=${e.label||r.nothing}
+        aria-labelledby=${e.title?`${e.drawerId}-title`:r.nothing}
+        tabindex="-1"
+        ?inert=${!e.open}
+        data-sf-drawer-panel
+      >
+        ${e.title||e.showClose&&"inside"===e.closePlacement||e.headerClass?r.html`
+                  <header class=${y("sf-drawer-head",e.headerClass)}>
+                    ${e.title?r.html`<div class="sf-drawer-title" id=${`${e.drawerId}-title`}>${e.title}</div>`:r.nothing}
+                    ${"inside"===e.closePlacement?t:r.nothing}
+                  </header>`:r.nothing}
+        <div class=${y("sf-drawer-body",e.bodyClass)} data-sf-drawer-body></div>
+      </section>
+      <div class="sf-drawer-edge" data-sf-drawer-edge>
+        ${"outside"===e.closePlacement?t:r.nothing}
+      </div>
+    </div>`}open(e={}){return this.openState?(v.bringToFront(this),this):!1===e.emit||this.emitDrawerEvent("drawer:before-open",!0)?(this._lastActive=document.activeElement,this.syncOpenAttribute(!0),v.add(this),this._focusAfterRender=this.modal,this._emitAfterOpen=!1!==e.emit,this.requestComponentUpdate("open"),this):this}close(e={}){return this.openState&&(!1===e.emit||this.emitDrawerEvent("drawer:before-close",!0))?(this.syncOpenAttribute(!1),v.remove(this),this.requestComponentUpdate("close"),this.restoreFocus(),!1!==e.emit&&this.emitDrawerEvent("drawer:after-close"),this):this}toggle(){return this.openState?this.close():this.open()}setState(e={}){if(e&&"object"==typeof e&&Object.prototype.hasOwnProperty.call(e,"open")){const{open:t,...s}=e;return t?this.open():this.close(),super.setState(s)}return super.setState(e)}getState(){return{...this.templateContext(),open:this.openState}}syncExternalOpenState(e){e?(this._lastActive=document.activeElement,this._focusAfterRender=this.modal,v.add(this)):(v.remove(this),this.restoreFocus()),this.requestComponentUpdate(e?"open":"close")}syncOpenAttribute(e){this._syncingOpenAttribute=!0,this.toggleAttribute("open",e),this._syncingOpenAttribute=!1}getDrawerRoot(){return this._portalRoot?.querySelector("[data-sf-drawer-root]")||null}observeDock(e){const t=e.querySelector("[data-sf-drawer-panel]");if(!this.docked||!t||"function"!=typeof ResizeObserver)return this._dockObserver?.disconnect(),this._dockObserver=null,void(this.docked&&v.syncDock());this._dockObserver||(this._dockObserver=new ResizeObserver(()=>v.syncDock())),this._dockObserver.disconnect(),this._dockObserver.observe(t),v.syncDock()}applyStackPosition(e=m.indexOf(this)){this._stackIndex=e;const t=this.getDrawerRoot();if(t){t.style.zIndex=this.drawerZIndex;const s=this.stackEdge,r=this.docked||e<0?0:m.slice(0,e).filter(e=>e.openState&&!e.docked&&e.stackEdge===s).length;t.style.setProperty("--sf-drawer-stack-depth",String(r))}return this}focusFirst(){const e=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),t=e?.querySelector("[autofocus]");(t||e)?.focus?.()}restoreFocus(){const e=this._lastActive;e instanceof HTMLElement&&e.isConnected&&!e.matches(":disabled,[hidden],[inert]")&&e.focus()}handleRootClick(e){const t=this.getDrawerRoot();e.target===t?.querySelector("[data-sf-drawer-overlay]")&&this.closeOnOverlay?this.close():e.target instanceof Element&&e.target.closest("[data-sf-drawer-close]")&&(e.preventDefault(),this.close())}onKeyDown(e){if(e.defaultPrevented||!this.openState||!v.isTop(this))return;if("Escape"===e.key&&this.closeOnEsc&&!document.documentElement?.dataset?.sfPopoverOpen)return e.preventDefault(),e.stopImmediatePropagation(),void this.close();if(!this.modal)return;if("Tab"!==e.key)return;const t=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),s=Array.from(t?.querySelectorAll(b)||[]).filter(e=>e.getClientRects().length>0);if(0===s.length)return e.preventDefault(),void t?.focus();const r=s[0],o=s.at(-1);t?.contains(document.activeElement)?e.shiftKey&&document.activeElement===r?(e.preventDefault(),o.focus()):e.shiftKey||document.activeElement!==o||(e.preventDefault(),r.focus()):(e.preventDefault(),(e.shiftKey?o:r).focus())}emitDrawerEvent(e,t=!1){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,cancelable:t,detail:{component:this,drawer:this,drawerId:this.drawerId,root:this.getDrawerRoot()}}))}ownDrawerHandler(e){return t=>{t.detail?.drawer===this&&e.call(this,t)}}onBeforeOpen(e,t){return"function"==typeof e&&this.addEventListener("drawer:before-open",this.ownDrawerHandler(e),t),this}onAfterOpen(e,t){return"function"==typeof e&&this.addEventListener("drawer:after-open",this.ownDrawerHandler(e),t),this}onBeforeClose(e,t){return"function"==typeof e&&this.addEventListener("drawer:before-close",this.ownDrawerHandler(e),t),this}onAfterClose(e,t){return"function"==typeof e&&this.addEventListener("drawer:after-close",this.ownDrawerHandler(e),t),this}clearPortal(){this._portalRoot&&((0,r.render)(r.nothing,this._portalRoot),this._portalRoot.remove(),this._portalRoot=null)}}k.define(d),t()}catch(S){t(S)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function s(r){const o=t[r];if(void 0!==o)return o.exports;const a=t[r]={exports:{}};return e[r](a,a.exports,s),a.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",r=e?Symbol("webpack exports"):"__webpack_exports__",o=e?Symbol("webpack error"):"__webpack_error__",a=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};s.a=(e,s,n)=>{let i;n&&((i=[]).d=-1);const l=new Set,d=e.exports;let c,h,u;const f=new Promise((e,t)=>{u=t,h=e});f[r]=d,f[t]=e=>(i&&e(i),l.forEach(e),f.catch(e=>{})),e.exports=f;s(e=>{let s;c=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const s=[];s.d=0,e.then(e=>{n[r]=e,a(s)},e=>{n[o]=e,a(s)});const n={};return n[t]=e=>e(s),n}}const s={};return s[t]=e=>{},s[r]=e,s}))(e);const n=()=>c.map(e=>{if(e[o])throw e[o];return e[r]}),d=new Promise(e=>{s=()=>e(n),s.r=0;const r=e=>e!==i&&!l.has(e)&&(l.add(e),e&&!e.d&&(s.r++,e.push(s)));c.map(e=>e[t](r))});return s.r?d:n()},e=>(e?u(f[o]=e):h(d),a(i))),i?.d<0&&(i.d=0)}})(),s.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var o=t[r++],a=t[r++];s.o(e,o)?0===a&&r++:0===a?Object.defineProperty(e,o,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,o,{enumerable:!0,get:a})}else for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);s("5f0529568b98")})();