@aquera/nile-elements 1.0.1-beta-1.9 → 1.0.1

package/dist/internal/resizable-table-styles.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,e,r,i,s,t,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("r",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host([resizable]) {\n    position: relative;\n    overflow: hidden;\n    table-layout: fixed;\n  }\n"])))),_export("c",r=o(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  :host([resizable]) {\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n"])))),_export("a",i=o(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    pointer-events: none;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 3px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n    width: 3px;\n  }\n\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n"])))),_export("h",s=o(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])))),_export("b",t=o(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n"])))),_export("t",a=o(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,o,r,i,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("b",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host([resizable]) .base {\n    overflow: unset;\n  }\n  :host([resizable]) .nile__table__body {\n    display: table;\n    table-layout: fixed;\n    border-collapse: collapse;\n    width: 100%;\n    position: relative;\n  }\n"])))),_export("c",r=e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  :host([resizable]) .headers {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n\n  :host([resizable]) .headers {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n"])))),_export("a",i=e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: 0px;\n    bottom: 0px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 0px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n    width: 3px;\n  }\n"])))),_export("r",s=e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n"]))));e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"]))),e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n"]))),e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n"])));}};});
 //# sourceMappingURL=resizable-table-styles.cjs.js.map

package/dist/internal/resizable-table-styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-table-styles.cjs.js","sources":["../../../src/internal/resizable-table-styles.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableHostStyles = css`\n  :host([resizable]) {\n    position: relative;\n    overflow: hidden;\n    table-layout: fixed;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  :host([resizable]) {\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n`;\n\nexport const resizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    pointer-events: none;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 3px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n    width: 3px;\n  }\n\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`; \n"],"names":["resizableHostStyles","css","_templateObject","_taggedTemplateLiteral","_export","resizableHeaderStyles","_templateObject2","resizerStyles","_templateObject3","headerResizerStyles","_templateObject4","resizableSlotStyles","_templateObject5","tableLayoutStyles","_templateObject6"],"mappings":"mZAcaA,CAAAA,CAAsBC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,mHAAAC,OAAA,KAQzBC,CAAAA,CAAwBJ,CAAG,CAAAK,gBAAA,GAAAA,gBAAA,CAAAH,sBAAA,iPAAAC,OAAA,KAW3BG,CAAAA,CAAgBN,CAAG,CAAAO,gBAAA,GAAAA,gBAAA,CAAAL,sBAAA,i7CAAAC,OAAA,KA8DnBK,CAAAA,CAAsBR,CAAG,CAAAS,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,ouBAAAC,OAAA,KAsCzBO,CAAAA,CAAsBV,CAAG,CAAAW,gBAAA,GAAAA,gBAAA,CAAAT,sBAAA,uXAAAC,OAAA,KAkBzBS,CAAAA,CAAoBZ,CAAG,CAAAa,gBAAA,GAAAA,gBAAA,CAAAX,sBAAA"}
+{"version":3,"file":"resizable-table-styles.cjs.js","sources":["../../../src/internal/resizable-table-styles.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableTableStyles = css`\n  :host([resizable]) .base {\n    overflow: unset;\n  }\n  :host([resizable]) .nile__table__body {\n    display: table;\n    table-layout: fixed;\n    border-collapse: collapse;\n    width: 100%;\n    position: relative;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  :host([resizable]) .headers {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n\n  :host([resizable]) .headers {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const resizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: 0px;\n    bottom: 0px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 0px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n    width: 3px;\n  }\n`;\n\nexport const resizableCellStyles = css`\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`;\n"],"names":["resizableTableStyles","css","_templateObject","_taggedTemplateLiteral","_export","resizableHeaderStyles","_templateObject2","resizerStyles","_templateObject3","resizableCellStyles","_templateObject4","_templateObject5","_templateObject6","_templateObject7"],"mappings":"gaAcaA,CAAAA,CAAuBC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,+OAAAC,OAAA,KAa1BC,CAAAA,CAAwBJ,CAAG,CAAAK,gBAAA,GAAAA,gBAAA,CAAAH,sBAAA,8jBAAAC,OAAA,KAsB3BG,CAAAA,CAAgBN,CAAG,CAAAO,gBAAA,GAAAA,gBAAA,CAAAL,sBAAA,mwCAAAC,OAAA,KAsDnBK,CAAAA,CAAsBR,CAAG,CAAAS,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,qJASHF,CAAG,CAAAU,gBAAA,GAAAA,gBAAA,CAAAR,sBAAA,gsBAsCHF,CAAG,CAAAW,gBAAA,GAAAA,gBAAA,CAAAT,sBAAA,sXAkBLF,CAAG,CAAAY,gBAAA,GAAAA,gBAAA,CAAAV,sBAAA"}

package/dist/internal/resizable-table-styles.esm.js

@@ -1,11 +1,20 @@
-import{css as o}from"lit";const e=o`
-  :host([resizable]) {
-    position: relative;
-    overflow: hidden;
+import{css as e}from"lit";const o=e`
+  :host([resizable]) .base {
+    overflow: unset;
+  }
+  :host([resizable]) .nile__table__body {
+    display: table;
     table-layout: fixed;
+    border-collapse: collapse;
+    width: 100%;
+    position: relative;
   }
-`,r=o`
-  :host([resizable]) {
+`,r=e`
+  :host([resizable]) .headers {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
     position: relative;
   }
 
@@ -13,12 +22,19 @@ import{css as o}from"lit";const e=o`
     border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     position: relative;
   }
-`,i=o`
+
+  :host([resizable]) .headers {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`,i=e`
   .resizer {
     position: absolute;
     right: 0;
-    top: -1000px;
-    bottom: -1000px;
+    top: 0px;
+    bottom: 0px;
     width: 8px;
     cursor: col-resize;
     user-select: none;
@@ -27,7 +43,6 @@ import{css as o}from"lit";const e=o`
     z-index: 10;
     opacity: 0;
     transition: opacity 0.2s ease;
-    pointer-events: none;
   }
 
   :host([resizable]):hover .resizer {
@@ -38,7 +53,7 @@ import{css as o}from"lit";const e=o`
   .resizer::before {
     content: '';
     position: absolute;
-    right: 3px;
+    right: 0px;
     top: 0;
     width: 2px;
     height: 100%;
@@ -66,14 +81,14 @@ import{css as o}from"lit";const e=o`
     opacity: 1;
     width: 3px;
   }
-
+`,s=e`
   :host([resizable]) .column {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: block;
   }
-`,s=o`
+`;e`
   .resizer {
     position: absolute;
     right: -2px;
@@ -100,7 +115,7 @@ import{css as o}from"lit";const e=o`
   }
 
   .resizer.resizing {
-    border-right: 4px double var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 4px double var(--nile-colors-neutral-400);
     background-color: transparent;
     opacity: 1;
   }
@@ -109,7 +124,7 @@ import{css as o}from"lit";const e=o`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-`,t=o`
+`,e`
   :host([resizable]) ::slotted(*) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -125,8 +140,8 @@ import{css as o}from"lit";const e=o`
     white-space: nowrap;
     display: block;
   }
-`,a=o`
+`,e`
   .nile__table__body[resizable] {
     table-layout: fixed;
   }
-`;export{i as a,t as b,r as c,s as h,e as r,a as t};
+`;export{i as a,o as b,r as c,s as r};