@creaditor/web-starterkit 1.0.39 → 1.0.40

package/dist/8646.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[8646],{48646(e,t,i){i.r(t),i.d(t,{Drawer:()=>n});var o=i(59929),s=i(69600);class n extends o.WF{constructor(){super(),this.closeEvent=void 0,this.openEvent=void 0,this.backdropColor="transparent",this.width="600px",this.obKeyDown=this.obKeyDown.bind(this),this.closeEvent=new UIEvent("close",{view:window,bubbles:!0,cancelable:!0}),this.openEvent=new UIEvent("open",{view:window,bubbles:!0,cancelable:!0})}onClickOutside(e){let{target:t}=e;t.closest(".drawer")||t.closest("cdtr-drawer")||this.onClose()}onClose(){const e=this.shadowRoot.querySelector(".drawer");e&&e.classList.add("slide-out"),setTimeout(()=>{this.dispatchEvent(this.closeEvent),e&&e.classList.remove("slide-out"),this.opened=!1,this.requestUpdate()},200)}obKeyDown(e){"Escape"===e.key?this.onClose():"m"===e.key&&e.ctrlKey&&this.dispatchEvent(this.openEvent)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.obKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.obKeyDown)}render(){return this.style.zIndex=(0,s.A)(),this.opened?o.qy`<div
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[8646],{48646(e,t,o){o.r(t),o.d(t,{Drawer:()=>r});var i=o(59929),s=o(69600);class r extends i.WF{constructor(){super(),this.closeEvent=void 0,this.openEvent=void 0,this.backdropColor="transparent",this.width="600px",this.obKeyDown=this.obKeyDown.bind(this),this.closeEvent=new UIEvent("close",{view:window,bubbles:!0,cancelable:!0}),this.openEvent=new UIEvent("open",{view:window,bubbles:!0,cancelable:!0})}onClickOutside(e){let{target:t}=e;t.closest(".drawer")||t.closest("cdtr-drawer")||this.onClose()}onClose(){const e=this.shadowRoot.querySelector(".drawer");e&&e.classList.add("slide-out"),setTimeout(()=>{this.dispatchEvent(this.closeEvent),e&&e.classList.remove("slide-out"),this.opened=!1,this.requestUpdate()},200)}obKeyDown(e){"Escape"===e.key?this.onClose():"m"===e.key&&e.ctrlKey&&this.dispatchEvent(this.openEvent)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.obKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.obKeyDown)}render(){return this.style.zIndex=(0,s.A)(),this.opened?i.qy`<div
           @dragover=${e=>{e.preventDefault(),this.onClose()}}
           @mousedown=${this.onClickOutside}
           .style="background:${this.backdropColor};z-index:${(0,s.A)()};${this.backdropStyle};"
@@ -10,13 +10,13 @@
             class="drawer" role="navigation"
           >
             <div class="header">
-              <paper-button
+              <button
+                class="close-button"
                 @click=${this.onClose}
-                style="padding:0;z-index:3;min-width:32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;margin-inline-start:8px;"
               >
                 <cdtr-close-icon class="close-icon" icon="close">
                 </cdtr-close-icon>
-              </paper-button>
+              </button>
               <h1 class="header-text">
                 <lang-text text="${this.headerText}"></lang-text>
               </h1>
@@ -25,7 +25,7 @@
               <slot></slot>
             </div>
           </div>
-        </div>`:null}}n.properties={portal:{type:Object},opened:{type:Boolean,reflect:!0},backdropColor:{type:String},width:{type:String},headerText:{type:String},backdropStyle:{},dim:{type:Boolean,reflect:!0}},n.styles=o.AH`
+        </div>`:null}}r.properties={portal:{type:Object},opened:{type:Boolean,reflect:!0},backdropColor:{type:String},width:{type:String},headerText:{type:String},backdropStyle:{},dim:{type:Boolean,reflect:!0}},r.styles=i.AH`
     .backdrop {
       width: 100vw;
       height: 100vh;
@@ -42,42 +42,34 @@
       font-size: var(--text-lg, 16px);
       font-weight: 600;
       font-family: var(--font-sans, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif);
-      text-align: right;
-      display: block;
-      width: 95%;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-      padding: 0 var(--space-4, 16px);
-      direction: var(--direction-locale);
-      box-sizing: border-box;
       color: var(--color-text, #1a1a1f);
+      direction: var(--direction-locale, ltr);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .drawer {
-      width: ${500}px;
       height: 100vh;
       background: var(--color-bg, #fff);
       position: absolute;
       right: 0;
-      transition: width 0.28s var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
-      box-shadow: var(--shadow-lg, rgba(0, 0, 0, 0.24) 0px 3px 8px);
-      -webkit-animation: slide-in 0.5s forwards;
-      -webkit-animation-delay: 2s;
-      animation: slide-in 0.5s forwards;
+      border-left: 1px solid var(--color-border, #e8e8ec);
+      transition: width var(--duration-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+      box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04));
+      animation: slide-in var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
     }
     .slide-out {
-      -webkit-animation: slide-out 0.5s forwards;
-      -webkit-animation-delay: 2s;
-      animation: slide-out 0.5s forwards;
+      animation: slide-out 160ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
     }
     .header {
       height: 48px;
       width: 100%;
+      padding: 0 var(--space-4, 16px);
       border-bottom: 1px solid var(--color-border, #e8e8ec);
       display: flex;
       align-items: center;
-      position: relative;
+      justify-content: space-between;
+      gap: var(--space-2, 8px);
       box-sizing: border-box;
     }
     .body {
@@ -87,33 +79,40 @@
     }
     .close-button {
       cursor: pointer;
+      flex: 0 0 auto;
+      width: 32px;
+      height: 32px;
+      border: 0;
+      padding: 0;
+      border-radius: var(--radius-sm, 6px);
+      background: transparent;
+      color: var(--color-text-muted, #888888);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background var(--duration-fast, 120ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
     }
-    @-webkit-keyframes slide-in {
-      100% {
-        transform: rotate(180deg);
-      }
+    .close-button:hover {
+      background: var(--color-bg-muted, #f4f4f6);
     }
     @keyframes slide-in {
       0% {
         opacity: 0;
-        right: -${500}px;
+        right: -100%;
       }
       100% {
+        opacity: 1;
         right: 0;
       }
     }
-    @-webkit-keyframes slide-out {
-      100% {
-        transform: rotate(180deg);
-      }
-    }
     @keyframes slide-out {
       0% {
         opacity: 1;
         right: 0;
       }
       100% {
-        right: -${500}px;
+        opacity: 0;
+        right: -100%;
       }
     }
-  `,customElements.define("cdtr-drawer",n)}}]);
+  `,customElements.define("cdtr-drawer",r)}}]);