@aquera/nile-elements 1.6.0 → 1.6.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -116,7 +116,8 @@
     "./nile-inline-sidebar": "./dist/src/nile-inline-sidebar/index.js",
     "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
     "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js",
-    "./nile-qr-code": "./dist/src/nile-qr-code/index.js"
+    "./nile-qr-code": "./dist/src/nile-qr-code/index.js",
+    "./nile-floating-panel": "./dist/src/nile-floating-panel/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -221,4 +222,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -75,7 +75,6 @@ export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
-export { NileFloatingPanel } from './nile-floating-panel';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
@@ -114,4 +113,5 @@ export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
 export { NileliteTooltip } from './nile-lite-tooltip';
 export { NileSideBarPanel } from './nile-side-bar-panel';
 export { NileDetail } from './nile-detail';
-export { NileQrCode } from './nile-qr-code';
+export { NileQrCode } from './nile-qr-code';
+export { NileFloatingPanel } from './nile-floating-panel';

package/src/nile-floating-panel/index.ts

@@ -1,2 +1 @@
 export { NileFloatingPanel } from './nile-floating-panel';
-

package/src/nile-floating-panel/nile-floating-panel.css.ts

@@ -6,36 +6,59 @@
  */
 
 import { css } from 'lit';
+
 export const styles = css`
-  :host {
-    box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  nile-floating-panel {
     display: inline-block;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
+    padding: 0;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    line-height: 1.4;
+    white-space: normal;
+    outline: 0;
+    transition-property: transform, visibility, opacity;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-content {
     position: relative;
+    z-index: 1;
+    padding: 0;
   }
 
-  :host([hidden]) {
-    display: none;
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {
+    fill: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
-  slot {
-    display: none;
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
+    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
-`;
 
-export const panelContainerStyles = css`
-  .nile-floating-panel__container {
-    position: fixed;
-    box-sizing: border-box;
-    z-index: 800;
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  .nile-floating-panel__body {
+    display: flex;
+    flex-direction: column;
+    height: auto;
     min-width: var(--nile-width-352px, var(--ng-width-80));
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .nile-floating-panel__title {
+    display: block;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
@@ -44,7 +67,112 @@ export const panelContainerStyles = css`
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
   }
+
+  .nile-floating-panel__title:empty {
+    display: none;
+  }
+
+  .nile-floating-panel__action {
+    align-self: end;
+    display: inline;
+  }
+
+  .nile-floating-panel__action:empty {
+    display: none;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow:after,
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {
+    top: 16px;
+    transform: rotate(180deg);
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 16px; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow:after,
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {
+    transform: rotate(90deg);
+    top: calc(50% - 3px);
+    left: 11px;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow:after,
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {
+    transform: rotate(-90deg);
+    top: calc(50% - 3px);
+    right: 11px;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {
+    width: 16px;
+    height: 16px;
+    text-align: initial;
+    position: absolute;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {
+    position: absolute;
+  }
+
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:before {
+    bottom: -7px;
+    border-width: 8px 8px 0;
+    border-top-color: initial;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:before {
+    top: -7px;
+    border-width: 0 8px 8px;
+    border-bottom-color: initial;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:before {
+    right: -7px;
+    border-width: 8px 0 8px 8px;
+    border-left-color: initial;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:before {
+    left: -7px;
+    border-width: 8px 8px 8px 0;
+    border-right-color: initial;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
+    width: 16px;
+    height: 16px;
+    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
 `;
 
-export default [styles];
+export function injectGlobalFloatingPanelStyles(): void {
+  if (typeof document === 'undefined') return;
+
+  const STYLE_ID = 'nile-floating-panel-styles';
+  if (document.getElementById(STYLE_ID)) return;
 
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = styles.cssText;
+  document.head?.appendChild(style);
+}
+
+injectGlobalFloatingPanelStyles();
+
+export default [styles];