@aquera/nile-elements 0.1.32-beta-1.5 → 0.1.32

package/dist/nile-tooltip/nile-tooltip.esm.js

@@ -1,25 +1,30 @@
-import{__decorate as t}from"tslib";import{html as i}from"lit";import{property as s,query as o,customElement as e}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{s as l}from"./nile-tooltip.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{i as n,g as a,a as c}from"./nile-tooltip-utils.esm.js";let d=class extends r{constructor(){super(...arguments),this.content="",this.size="small",this.placement="bottom",this.disabled=!1,this.open=!1,this.trigger="hover focus",this.distance=8,this.SHIFT_OFFSET=16,this.skidding=0,this.hoist=!1,this.hasTooltipSlot=!1,this.hoverTimeout=0,this.caretSize=6,this.originalPlacement=this.placement,this.updateTooltipPosition=()=>{if(!n(this.triggerContainer))return void(this.open=!1);const t=this.triggerContainer.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),s=window.innerWidth,o=window.innerHeight,{top:e,left:h,placement:l}=a(t,i,this.originalPlacement,this.distance,this.skidding,this.caretSize,s,o);this.setAttribute("placement",l),this.tooltip.style.top=`${e}px`,this.tooltip.style.left=`${h}px`;const{caretLeft:r,caretTop:d}=c({placement:l,tooltipRect:i,triggerRect:t,caretSize:this.caretSize,left:h,top:e});this.caret.style.left=`${r}px`,this.caret.style.top=`${d}px`},this.showTooltip=()=>{(this.content.trim()||this.hasTooltipSlot)&&(!this.disabled&&n(this.triggerContainer)?(this.emit("nile-show"),this.open=!0,this.updateComplete.then((()=>{this.updateTooltipPosition(),this.emit("nile-after-show")}))):this.open=!1)},this.hideTooltip=()=>{this.emit("nile-hide"),this.open=!1,setTimeout((()=>{this.emit("nile-after-hide")}),200)},this.handleMouseOver=()=>{this.trigger.includes("hover")&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.showTooltip()),150))},this.handleMouseOut=()=>{this.trigger.includes("hover")&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hideTooltip()),0))},this.handleClick=()=>{this.trigger.includes("click")&&(!this.open&&n(this.triggerContainer)?this.showTooltip():this.hideTooltip())},this.handleFocus=()=>{this.trigger.includes("focus")&&this.showTooltip()},this.handleBlur=()=>{this.trigger.includes("focus")&&this.hideTooltip()}}static get styles(){return[l]}connectedCallback(){super.connectedCallback(),this.originalPlacement=this.placement,window.addEventListener("resize",this.updateTooltipPosition),window.addEventListener("scroll",this.updateTooltipPosition,!0)}updated(t){super.updated?.(t);const i=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"];i.includes(this.placement)||(console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`),this.placement="bottom"),i.includes(this.originalPlacement)||(this.originalPlacement="bottom")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.updateTooltipPosition),window.removeEventListener("scroll",this.updateTooltipPosition,!0)}handleTooltipSlotChange(){const t=this.tooltipSlot.assignedNodes({flatten:!0});this.hasTooltipSlot=t.length>0,this.requestUpdate()}render(){return i`
-      <div
-        class=${h({tooltip:!0,"tooltip__body--large":"large"===this.size})}
-        id="tooltip"
+import{__decorate as t}from"tslib";import{s as i}from"./nile-tooltip.css.esm.js";import"../nile-popup/nile-popup.esm.js";import{p as s,s as e,a as o}from"../internal/animate.esm.js";import{classMap as h}from"lit/directives/class-map.js";import{query as a,property as l,customElement as n}from"lit/decorators.js";import{s as r,g as p}from"../utilities/animation-registry.esm.js";import{html as d}from"lit";import{w as c}from"../internal/event.esm.js";import{w as m}from"../internal/watch.esm.js";import{N as u}from"../internal/nile-element.esm.js";import"../nile-popup/nile-popup.css.esm.js";let f=class extends u{constructor(){super(...arguments),this.content="",this.size="small",this.placement="top",this.disabled=!1,this.distance=8,this.open=!1,this.skidding=0,this.trigger="hover focus",this.hoist=!1}static get styles(){return[i]}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){this.hasTrigger("click")&&(this.open?this.hide():this.show())}handleFocus(){this.hasTrigger("focus")&&this.show()}handleKeyDown(t){this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const t=s(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),t)}}handleMouseOut(){if(this.hasTrigger("hover")){const t=s(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),t)}}hasTrigger(t){return this.trigger.split(" ").includes(t)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("nile-show"),await e(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:t,options:i}=p(this,"tooltip.show",{dir:""});await o(this.popup.popup,t,i),this.emit("nile-after-show")}else{this.emit("nile-hide"),await e(this.body);const{keyframes:t,options:i}=p(this,"tooltip.hide",{dir:""});await o(this.popup.popup,t,i),this.popup.active=!1,this.body.hidden=!0,this.emit("nile-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open&&this.content?.trim().length)return this.open=!0,c(this,"nile-after-show")}async hide(){if(this.open)return this.open=!1,c(this,"nile-after-hide")}render(){return d`
+      <nile-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${h({tooltip:!0,"tooltip--open":this.open})}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist?"fixed":"absolute"}
+        flip
+        shift
+        arrow
       >
-        <div class="tooltip-content" part="content">
-          <slot name="content" @slotchange=${this.handleTooltipSlotChange}></slot>
-          ${this.hasTooltipSlot?null:i`${this.content}`}
-        </div>
-        <div class="tooltip-caret" style="--caret-size: ${this.caretSize}px;"></div>
-      </div>
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
 
-      <div
-        class="trigger-container"
-        tabindex="0"
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-        @click=${this.handleClick}
-        @focusin=${this.handleFocus}
-        @focusout=${this.handleBlur}
-        aria-describedby="tooltip"
-      >
-        <slot></slot>
-      </div>
-    `}};t([s({type:String})],d.prototype,"content",void 0),t([s({reflect:!0})],d.prototype,"size",void 0),t([s({type:String})],d.prototype,"placement",void 0),t([s({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),t([s({type:Boolean,reflect:!0})],d.prototype,"open",void 0),t([s()],d.prototype,"trigger",void 0),t([s({type:Number})],d.prototype,"distance",void 0),t([s({type:Number})],d.prototype,"skidding",void 0),t([s({type:Boolean,reflect:!0})],d.prototype,"hoist",void 0),t([o(".tooltip")],d.prototype,"tooltip",void 0),t([o(".trigger-container")],d.prototype,"triggerContainer",void 0),t([o(".tooltip-caret")],d.prototype,"caret",void 0),t([o('slot[name="content"]')],d.prototype,"tooltipSlot",void 0),d=t([e("nile-tooltip")],d);export{d as N};
+        <slot
+          name="content"
+          part="body"
+          id="tooltip"
+          class=${h({tooltip__body:!0,"tooltip__body--large":"large"===this.size})}
+          role="tooltip"
+          aria-live=${this.open?"polite":"off"}
+        >
+          ${this.content}
+        </slot>
+      </nile-popup>
+    `}};t([a("slot:not([name])")],f.prototype,"defaultSlot",void 0),t([a(".tooltip__body")],f.prototype,"body",void 0),t([a("nile-popup")],f.prototype,"popup",void 0),t([l({type:String,reflect:!0})],f.prototype,"content",void 0),t([l({reflect:!0})],f.prototype,"size",void 0),t([l()],f.prototype,"placement",void 0),t([l({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),t([l({type:Number})],f.prototype,"distance",void 0),t([l({type:Boolean,reflect:!0})],f.prototype,"open",void 0),t([l({type:Number})],f.prototype,"skidding",void 0),t([l()],f.prototype,"trigger",void 0),t([l({type:Boolean})],f.prototype,"hoist",void 0),t([m("open",{waitUntilFirstUpdate:!0})],f.prototype,"handleOpenChange",null),t([m(["content","distance","hoist","placement","skidding"])],f.prototype,"handleOptionsChange",null),t([m("disabled")],f.prototype,"handleDisabledChange",null),f=t([n("nile-tooltip")],f),r("tooltip.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:150,easing:"ease"}}),r("tooltip.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:150,easing:"ease"}});export{f as N};

package/dist/src/index.d.ts

@@ -75,3 +75,4 @@ export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
+export { NileTable } from './nile-table';

package/dist/src/index.js

@@ -75,4 +75,5 @@ export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
+export { NileTable } from './nile-table';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink } from './nile-link';\nexport { NileButtonToggleGroup } from './nile-button-toggle-group';\nexport { NileButtonToggle } from './nile-button-toggle';\nexport { NileSwitcher } from './nile-switcher';\nexport { NileContentEditor } from './nile-content-editor';\nexport { NileDialog } from './nile-dialog';\nexport { NileErrorNotification } from './nile-error-notification';\nexport { NileTabGroup } from './nile-tab-group';\nexport { NileTab } from './nile-tab';\nexport { NileTabPanel } from './nile-tab-panel';\nexport { NileCodeEditor } from './nile-code-editor';\nexport { NileToast } from './nile-toast';\nexport { NileBreadcrumb } from './nile-breadcrumb';\nexport { NileBreadcrumbItem } from './nile-breadcrumb-item';\nexport { NileFormGroup } from './nile-form-group';\nexport { NileCard } from './nile-card';\nexport { NilePopover } from './nile-popover';\nexport { NileButtonFilter } from './nile-button-filter';\nexport { NileCircularProgressbar } from './nile-circular-progressbar';\nexport { NileSidebarMenu } from './nile-sidebar-menu';\nexport { NileSidebarMenuItems } from './nile-sidebar-menu-items';\nexport { NileSidebarWrapper } from './nile-sidebar-wrapper';\nexport { NileTableCellItem } from './nile-table-cell-item';\nexport { NileTableRow } from './nile-table-row';\nexport { NileTableBody } from './nile-table-body';\nexport { NileTableHeaderItem } from './nile-table-header-item';\nexport { NileAvatar } from './nile-avatar';\nexport { NilePageHeader } from './nile-page-header';\nexport { NileEmptyState } from './nile-empty-state';\nexport { NileHero } from './nile-hero';\nexport { NileStepperItem } from './nile-stepper-item';\nexport { NileStepper } from './nile-stepper';\nexport { NileHeroHeader } from './nile-hero-header';\nexport { NileVerticalStepperItem } from './nile-vertical-stepper-item';\nexport { NileFormatDate } from './nile-format-date';\nexport { NileSplitPanel } from './nile-split-panel';\nexport { NileTree } from './nile-tree';\nexport { NileTreeItem } from './nile-tree-item';\nexport { NileListItem } from './nile-list-item';\nexport { NileList } from './nile-list';\nexport { NileAccordion } from './nile-accordion';\nexport { NileDivider } from './nile-divider';\nexport { NileTitle } from './nile-title';\nexport { NileSectionMessage } from './nile-section-message';\nexport { NileToolbar } from './nile-toolbar';\nexport { NileInlineEdit } from './nile-inline-edit';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink } from './nile-link';\nexport { NileButtonToggleGroup } from './nile-button-toggle-group';\nexport { NileButtonToggle } from './nile-button-toggle';\nexport { NileSwitcher } from './nile-switcher';\nexport { NileContentEditor } from './nile-content-editor';\nexport { NileDialog } from './nile-dialog';\nexport { NileErrorNotification } from './nile-error-notification';\nexport { NileTabGroup } from './nile-tab-group';\nexport { NileTab } from './nile-tab';\nexport { NileTabPanel } from './nile-tab-panel';\nexport { NileCodeEditor } from './nile-code-editor';\nexport { NileToast } from './nile-toast';\nexport { NileBreadcrumb } from './nile-breadcrumb';\nexport { NileBreadcrumbItem } from './nile-breadcrumb-item';\nexport { NileFormGroup } from './nile-form-group';\nexport { NileCard } from './nile-card';\nexport { NilePopover } from './nile-popover';\nexport { NileButtonFilter } from './nile-button-filter';\nexport { NileCircularProgressbar } from './nile-circular-progressbar';\nexport { NileSidebarMenu } from './nile-sidebar-menu';\nexport { NileSidebarMenuItems } from './nile-sidebar-menu-items';\nexport { NileSidebarWrapper } from './nile-sidebar-wrapper';\nexport { NileTableCellItem } from './nile-table-cell-item';\nexport { NileTableRow } from './nile-table-row';\nexport { NileTableBody } from './nile-table-body';\nexport { NileTableHeaderItem } from './nile-table-header-item';\nexport { NileAvatar } from './nile-avatar';\nexport { NilePageHeader } from './nile-page-header';\nexport { NileEmptyState } from './nile-empty-state';\nexport { NileHero } from './nile-hero';\nexport { NileStepperItem } from './nile-stepper-item';\nexport { NileStepper } from './nile-stepper';\nexport { NileHeroHeader } from './nile-hero-header';\nexport { NileVerticalStepperItem } from './nile-vertical-stepper-item';\nexport { NileFormatDate } from './nile-format-date';\nexport { NileSplitPanel } from './nile-split-panel';\nexport { NileTree } from './nile-tree';\nexport { NileTreeItem } from './nile-tree-item';\nexport { NileListItem } from './nile-list-item';\nexport { NileList } from './nile-list';\nexport { NileAccordion } from './nile-accordion';\nexport { NileDivider } from './nile-divider';\nexport { NileTitle } from './nile-title';\nexport { NileSectionMessage } from './nile-section-message';\nexport { NileToolbar } from './nile-toolbar';\nexport { NileInlineEdit } from './nile-inline-edit';\nexport { NileTable } from './nile-table';"]}

package/dist/src/nile-input/nile-input.css.js

@@ -13,14 +13,6 @@ export const styles = css `
     display: block;
   }
 
-  /* To Hide Safari's AutoFill icon */
-  input::-webkit-contacts-auto-fill-button {
-    visibility: hidden;
-    width: 0;
-    margin: 0;
-    padding: 0;
-  }
-
   .form-control .form-control__label {
     display: none;
   }

package/dist/src/nile-input/nile-input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 6px;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 14px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700);\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: 400;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: var(--nile-input-shadow-standard);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: var(--nile-colors-dark-900);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: var(--nile-colors-primary-500);\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500);\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-neutral-700);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input--standard:focus {\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-medium);\n    height: 40px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: 12px;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 12px;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: 'disc';\n    letter-spacing: 2px;\n  }\n\n  .input__non-printable {\n    border-radius: 4px;\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: 10px;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: 16px;\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: 10px;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: 4px;\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: 16px;\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAifxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 6px;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 14px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700);\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: 400;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: var(--nile-input-shadow-standard);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: var(--nile-colors-dark-900);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: var(--nile-colors-primary-500);\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500);\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-neutral-700);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input--standard:focus {\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-medium);\n    height: 40px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: 12px;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 12px;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: 'disc';\n    letter-spacing: 2px;\n  }\n\n  .input__non-printable {\n    border-radius: 4px;\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: 10px;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: 16px;\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: 10px;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: 4px;\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: 16px;\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table/index.d.ts

@@ -0,0 +1 @@
+export { NileTable } from './nile-table';

package/dist/src/nile-table/index.js

@@ -0,0 +1,2 @@
+export { NileTable } from './nile-table';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { NileTable } from './nile-table';"]}

package/dist/src/nile-table/nile-table.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * Table CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-table/nile-table.css.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * Table CSS
+ */
+export const styles = css `
+	:host {
+		display:block;
+		width:100%;
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-table.css.js.map

package/dist/src/nile-table/nile-table.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table.css.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Table CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay:block;\n\t\twidth:100%;\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-table/nile-table.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult, PropertyValues } from 'lit';
+import NileElement from '../internal/nile-element';
+import { NileTableBody } from '../nile-table-body';
+/**
+ * Nile table component.
+ *
+ * @tag nile-table
+ *
+ */
+export declare class NileTable extends NileElement {
+    defaultSlot: HTMLSlotElement;
+    private rows;
+    private primaryRowWidths;
+    private resizeObserver;
+    private debounceTimeout;
+    /**
+     * The styles for nile-table
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+    repaintTable(): void;
+    handleRows(e: CustomEvent): void;
+    handleBodyCssUpdate(): void;
+    getPrimaryColumnWidths(): number[];
+    realignStructure(): void;
+    getTableCellFetchQuery(row: NileTableBody): Array<Element>;
+    handleResizeObserver(): void;
+    disconnectedCallback(): void;
+}
+export default NileTable;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-table': NileTable;
+    }
+}

package/dist/src/nile-table/nile-table.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { styles } from './nile-table.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile table component.
+ *
+ * @tag nile-table
+ *
+ */
+let NileTable = class NileTable extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.primaryRowWidths = [];
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-table
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('nile-body-load', this.handleRows);
+    }
+    firstUpdated(_changedProperties) {
+        this.updateComplete.then(() => {
+            this.handleResizeObserver();
+        });
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<slot @slotchange="${this.repaintTable}"></slot>
+			`;
+    }
+    repaintTable() {
+        this.realignStructure();
+        this.handleBodyCssUpdate();
+    }
+    handleRows(e) {
+        this.rows = [...this.rows, e.detail.comp];
+    }
+    handleBodyCssUpdate() {
+        if (this.rows.length < 2)
+            return;
+        const tableBodies = this.rows;
+        const firstEl = tableBodies[0].shadowRoot?.querySelector('div.base');
+        if (firstEl) {
+            firstEl.style.borderTopRightRadius = "var(--nile-radius-radius-xl)";
+            firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
+            firstEl.style.borderBottomRightRadius = "0px";
+            firstEl.style.borderBottomLeftRadius = '0px';
+            firstEl.style.borderBottom = 'none';
+        }
+        tableBodies.forEach((tb, i) => {
+            if (i > 0 && i < tableBodies.length - 1) {
+                const el = tb.shadowRoot?.querySelector('div.base');
+                if (el) {
+                    el.style.borderTopRightRadius = "0px";
+                    el.style.borderTopLeftRadius = "0px";
+                    el.style.borderBottomRightRadius = "0px";
+                    el.style.borderBottomLeftRadius = "0px";
+                    el.style.borderBottom = 'none';
+                }
+            }
+        });
+        const lastEl = tableBodies[tableBodies.length - 1].shadowRoot?.querySelector('div.base');
+        if (lastEl) {
+            lastEl.style.borderTopRightRadius = "0px";
+            lastEl.style.borderTopLeftRadius = '0px';
+            lastEl.style.borderBottomRightRadius = "var(--nile-radius-radius-xl)";
+            lastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';
+        }
+    }
+    getPrimaryColumnWidths() {
+        const primaryTb = this.rows.find(tb => tb.type == 'primary');
+        const widthArray = this.getTableCellFetchQuery(primaryTb).map((e) => e.clientWidth);
+        return widthArray;
+    }
+    realignStructure() {
+        if (this.rows.length < 2)
+            return;
+        const primaryRowWidths = this.getPrimaryColumnWidths();
+        const secondaryRows = this.rows.filter(tb => tb.type != 'primary');
+        secondaryRows.forEach((row) => {
+            let elements = this.getTableCellFetchQuery(row);
+            elements?.forEach((el, ind) => {
+                el.style.setProperty('--cell-width', primaryRowWidths.at(ind) + 'px');
+            });
+        });
+    }
+    getTableCellFetchQuery(row) {
+        return row?.shadowRoot?.
+            querySelector('slot:not([name])')?.
+            assignedElements()[0]
+            .shadowRoot?.querySelector('slot')?.
+            assignedElements();
+    }
+    handleResizeObserver() {
+        const onResize = (entries) => {
+            for (let entry of entries) {
+                if (this.debounceTimeout) {
+                    clearTimeout(this.debounceTimeout);
+                }
+                this.debounceTimeout = setTimeout(() => {
+                    this.realignStructure();
+                    this.debounceTimeout = null;
+                }, 50);
+            }
+        };
+        this.resizeObserver = new ResizeObserver(onResize);
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        super.disconnectedCallback();
+    }
+};
+__decorate([
+    query('slot')
+], NileTable.prototype, "defaultSlot", void 0);
+NileTable = __decorate([
+    customElement('nile-table')
+], NileTable);
+export { NileTable };
+export default NileTable;
+//# sourceMappingURL=nile-table.js.map

package/dist/src/nile-table/nile-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.ts"],"names":[],"mappings":"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","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 {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n  @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\tprivate resizeObserver:ResizeObserver ;\n\tprivate debounceTimeout:any\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleResizeObserver();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n    if (this.rows.length<2) return;\n    const tableBodies = this.rows;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n    if (this.rows.length<2) return;\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\n\thandleResizeObserver(){\n\t\tconst onResize = (entries:ResizeObserverEntry[]): void=> {\n\t\t\tfor (let entry of entries) {\n\t\t\t\tif(this.debounceTimeout){\n\t\t\t\t\tclearTimeout(this.debounceTimeout);\n\t\t\t\t}\n\t\t\t\tthis.debounceTimeout=setTimeout(() => {\n\t\t\t\t\tthis.realignStructure();\n\t\t\t\t\tthis.debounceTimeout=null;\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t};\n\t\tthis.resizeObserver=new ResizeObserver(onResize)\n\t\tthis.resizeObserver.observe(this);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.resizeObserver.disconnect()\n\t\tsuper.disconnectedCallback()\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table': NileTable;\n  }\n}"]}

package/dist/src/nile-table-body/nile-table-body.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { CSSResultArray, TemplateResult } from 'lit';
+import { CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
  * nile-table-body component.
@@ -19,11 +19,13 @@ export declare class NileTableBody extends NileElement {
      */
     defaultSlot: HTMLSlotElement;
     _childNodes: Array<HTMLElement>;
+    type: 'primary' | 'secondary';
     private rows_data;
     private header_rows_data;
     private sort__index;
     private search__index;
     static get styles(): CSSResultArray;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     private getChildren;
     private getIndexValue;
     handleSlotchange(e: any): void;

package/dist/src/nile-table-body/nile-table-body.js

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html, } from 'lit';
-import { customElement, query, state, queryAssignedNodes } from 'lit/decorators.js';
+import { customElement, query, state, queryAssignedNodes, property } from 'lit/decorators.js';
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 /**
@@ -22,6 +22,7 @@ let NileTableBody = class NileTableBody extends NileElement {
          * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
          */
         super(...arguments);
+        this.type = 'primary';
         this.rows_data = [];
         this.header_rows_data = [];
         /* #endregion */
@@ -29,6 +30,9 @@ let NileTableBody = class NileTableBody extends NileElement {
     static get styles() {
         return [styles];
     }
+    firstUpdated(_changedProperties) {
+        this.emit('nile-body-load', { value: this.type, comp: this }, true, false);
+    }
     /* #endregion */
     /* #region Methods */
     getChildren(child, tagname) {
@@ -95,6 +99,9 @@ __decorate([
 __decorate([
     queryAssignedNodes({ flatten: true })
 ], NileTableBody.prototype, "_childNodes", void 0);
+__decorate([
+    property()
+], NileTableBody.prototype, "type", void 0);
 __decorate([
     state()
 ], NileTableBody.prototype, "rows_data", void 0);

package/dist/src/nile-table-body/nile-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"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","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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport {\n  customElement,\n  query,\n  state,\n  queryAll,\n  queryAssignedElements,\n  queryAssignedNodes,\n  property\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\n\n/**\n * nile-table-body component.\n *\n * @tag nile-table-body\n *\n */\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n  /**\n   * The styles for TableBody\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @queryAssignedNodes({ flatten: true })\n  _childNodes!: Array<HTMLElement>;\n\n  @state() private rows_data: any[] = [];\n  @state() private header_rows_data: any[] = [];\n  @state() private sort__index: number;\n  @state() private search__index: number;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private getChildren(child: any, tagname: string) {\n    return child.querySelectorAll(tagname);\n  }\n\n  private getIndexValue(index__value: string): number {\n    return this.header_rows_data.indexOf(index__value);\n  }\n\n  handleSlotchange(e: any) {\n    let row_data: any = [];\n    this._childNodes.forEach((child: any) => {\n      if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n        let nilerows = this.getChildren(child, 'nile-table-cell-item');\n        if (nilerows.length > 0) {\n          nilerows.forEach((element: { innerHTML: any }) => {\n            row_data.push(element.innerHTML);\n          });\n          this.rows_data.push(row_data);\n        } else {\n          let nileheaders = this.getChildren(child, 'nile-table-header-item');\n          if (nileheaders.length > 0) {\n            nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n              this.header_rows_data.push(header.innerHTML);\n            });\n          }\n        }\n        row_data = [];\n      }\n    });\n  }\n\n  private handleSort(e: any) {\n    const { curr_sort_string, order } = e.detail.value;\n    const header_index = this.getIndexValue(curr_sort_string);\n    this.emit('nile-sort', {\n      value: { header_index, curr_sort_string, order },\n    });\n  }\n\n  private handleSearch(e: any) {\n    const searchText = e.detail.value;\n    this.search__index = this.getIndexValue(e.target.textContent);\n    this.emit('nile-table-search', {\n      index: this.search__index,\n      value: searchText,\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"base\" part=\"base\">\n        <slot name=\"table__header\" class=\"table__header\"></slot>\n        <slot\n          @slotchange=${this.handleSlotchange}\n          @nile-click-sort=${this.handleSort}\n          class=\"nile__table__body\"\n          @nile-search=${this.handleSearch}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-body': NileTableBody;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"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","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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport {\n  customElement,\n  query,\n  state,\n  queryAll,\n  queryAssignedElements,\n  queryAssignedNodes,\n  property\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\n\n/**\n * nile-table-body component.\n *\n * @tag nile-table-body\n *\n */\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n  /**\n   * The styles for TableBody\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;\n  @property() type: 'primary' | 'secondary' = 'primary';\n\n  @state() private rows_data: any[] = [];\n  @state() private header_rows_data: any[] = [];\n  @state() private sort__index: number;\n  @state() private search__index: number;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.emit('nile-body-load', { value: this.type, comp:this },true,false)\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private getChildren(child: any, tagname: string) {\n    return child.querySelectorAll(tagname);\n  }\n\n  private getIndexValue(index__value: string): number {\n    return this.header_rows_data.indexOf(index__value);\n  }\n\n  handleSlotchange(e: any) {\n    let row_data: any = [];\n    this._childNodes.forEach((child: any) => {\n      if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n        let nilerows = this.getChildren(child, 'nile-table-cell-item');\n        if (nilerows.length > 0) {\n          nilerows.forEach((element: { innerHTML: any }) => {\n            row_data.push(element.innerHTML);\n          });\n          this.rows_data.push(row_data);\n        } else {\n          let nileheaders = this.getChildren(child, 'nile-table-header-item');\n          if (nileheaders.length > 0) {\n            nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n              this.header_rows_data.push(header.innerHTML);\n            });\n          }\n        }\n        row_data = [];\n      }\n    });\n  }\n\n  private handleSort(e: any) {\n    const { curr_sort_string, order } = e.detail.value;\n    const header_index = this.getIndexValue(curr_sort_string);\n    this.emit('nile-sort', {\n      value: { header_index, curr_sort_string, order },\n    });\n  }\n\n  private handleSearch(e: any) {\n    const searchText = e.detail.value;\n    this.search__index = this.getIndexValue(e.target.textContent);\n    this.emit('nile-table-search', {\n      index: this.search__index,\n      value: searchText,\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"base\" part=\"base\">\n        <slot name=\"table__header\" class=\"table__header\"></slot>\n        <slot\n          @slotchange=${this.handleSlotchange}\n          @nile-click-sort=${this.handleSort}\n          class=\"nile__table__body\"\n          @nile-search=${this.handleSearch}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-body': NileTableBody;\n  }\n}\n"]}

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js

@@ -10,17 +10,21 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
+    --min-cell-width:auto;
+    --cell-width:auto;
+    --min--height: 52px;
+    --max--cell-width: auto;
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    --min--height: 52px;
-    --max--cell-width: auto;
     max-width: var(--max--cell-width);
     padding: 16px 24px;
     min-height: var(--min--height);
   }
 
   .column {
+    min-width:var(--min-cell-width);
+    width:var(--cell-width);
     height: 100%;
     color: var(--nile-colors-gray-light-mode-600);
     font-family: var(--nile-font-family-serif);

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * TableCellItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    display: table-cell;\n    vertical-align: middle;\n    --min--height: 52px;\n    --max--cell-width: auto;\n    max-width: var(--max--cell-width);\n    padding: 16px 24px;\n    min-height: var(--min--height);\n  }\n\n  .column {\n    height: 100%;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    /* line-height: var(--nile-type-scale-6); */\n    line-height: normal;\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * TableCellItem CSS\n */\nexport const styles = css`\n  :host {\n    --min-cell-width:auto;\n    --cell-width:auto;\n    --min--height: 52px;\n    --max--cell-width: auto;\n    box-sizing: border-box;\n    display: table-cell;\n    vertical-align: middle;\n    max-width: var(--max--cell-width);\n    padding: 16px 24px;\n    min-height: var(--min--height);\n  }\n\n  .column {\n    min-width:var(--min-cell-width);\n    width:var(--cell-width);\n    height: 100%;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    /* line-height: var(--nile-type-scale-6); */\n    line-height: normal;\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}