npm - @aquera/nile-elements - Versions diffs - 1.0.1-beta-1.9 → 1.1.0-beta-1.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1895) hide show

package/dist/src/internal/resizable-table-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable-table-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;CAMrC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;CASvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;CAInC,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 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"]}
1	+ {"version":3,"file":"resizable-table-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;CAMrC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;CASvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;CAInC,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 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);\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);\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);\n opacity: 0.8;\n }\n\n .resizer:hover {\n background-color: var(--nile-colors-neutral-400);\n }\n\n .resizer:hover::before {\n background-color: var(--nile-colors-neutral-700);\n opacity: 1;\n }\n\n .resizer.resizing {\n background-color: var(--nile-colors-neutral-400);\n opacity: 1;\n pointer-events: auto;\n }\n\n .resizer.resizing::before {\n background-color: var(--nile-colors-neutral-700);\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);\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"]}

package/dist/src/nile-accordion/nile-accordion.css.js CHANGED Viewed

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   :host *,
@@ -32,36 +29,31 @@ export const styles = css `
   }
   .accordian {
-    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
-    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border-top:solid 1px var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
     overflow-anchor: none;
-    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));
   }
   .accordian--lg{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
-    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
   .accordian--md{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
   .accordian--sm{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
   }
   .accordian {
     font-size: var(--accordian-text-size);
-    font-family: var(--accordion-font-family)
   }
   .accordian--disabled {
@@ -70,17 +62,17 @@ export const styles = css `
   .accordian__header {
     display: flex;
-    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
+    font-weight:500;
     padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
   .accordian__header--dark{
-    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));
+    background-color:var(--nile-colors-dark-200);
   }
   .accordian__header--arrow-left{
@@ -92,8 +84,7 @@ export const styles = css `
   }
   .accordian__header:focus-visible {
-    outline: solid 3px var(--nile-colors-blue-500);
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
@@ -138,7 +129,7 @@ export const styles = css `
   }
   .accordian__content--arrow-left{
-   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));
+   margin-left:28px;
   }
 `;
 export default [styles];

package/dist/src/nile-accordion/nile-accordion.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB~~,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 Detail CSS\n /\nexport const styles = css`\n\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n .accordian {\n border-top:solid 1px var(--nile-colors-neutral-500 ~~, var(--ng-colors-border-primary~~));\n background-color: var(--nile-colors-white-base ~~, var(--ng-colors-bg-primary~~));\n overflow-anchor: none;\n ~~line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));\n~~ }\n\n .accordian--lg{\n --accordian-text-size:var(--~~nile~~-~~type-scale-3~~ , ~~var(--ng-font-size-text-sm~~));\n --accordian-heading-padding: ~~var(--nile-spacing-xl~~ ~~, var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg))~~;\n --accordian-content-padding: ~~var(--nile-spacing-sm~~ , ~~var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl))~~;\n ~~--accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n~~ }\n\n .accordian--md{\n --accordian-text-size:var(--~~nile~~-~~type-scale-3~~ , ~~var(--ng-font-size-text-sm~~));\n --accordian-heading-padding: ~~var(--nile-spacing-lg~~ ~~, var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg))~~;\n --accordian-content-padding: ~~var(--nile-spacing-sm~~ , ~~var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl))~~;\n ~~--accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n~~ }\n\n .accordian--sm{\n --accordian-text-size:var(--~~nile~~-~~type-scale-3~~ , ~~var(--ng-font-size-text-sm~~));\n --accordian-heading-padding: ~~var(--nile-spacing-sm~~ ~~, var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg))~~;\n --accordian-content-padding: ~~var(--nile-spacing-sm~~ , ~~var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg))~~;\n ~~--accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n~~ }\n \n .accordian {\n font-size: var(--accordian-text-size);\n ~~font-family: var(--accordion-font-family)\n~~ }\n\n .accordian--disabled {\n opacity: 0.5;\n }\n\n .accordian__header {\n display: flex;\n gap:~~var(--nile-spacing-lg , var(--ng-spacing-lg))~~;\n align-items: center;\n border-radius: inherit;\n font-weight: ~~var(--nile-font-weight-medium , var(--ng-font-weight-semibold))~~;\n padding: var(--accordian-heading-padding);\n user-select: none;\n cursor: pointer;\n }\n\n .accordian__header--dark{\n background-color:var(--nile-colors-dark-200 ~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .accordian__header--arrow-left{\n flex-direction: row-reverse;\n }\n\n .accordian__header:focus {\n outline: none;\n }\n\n .accordian__header:focus-visible {\n outline: solid 3px ~~var~~(~~--nile-colors-blue-500);\n box-shadow: var(--nile-box-shadow-none~~, ~~var(--ng-focus-ring-shadow-xs~~));\n outline-offset: calc(1px + 1px);\n }\n\n .accordian--disabled .accordian__header {\n cursor: not-allowed;\n }\n\n .accordian--disabled .accordian__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .accordian__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n .accordian__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n }\n\n .accordian--open .accordian__summary-icon {\n rotate: 90deg;\n }\n\n .accordian--open slot[name='expand-icon'],\n .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n display: none;\n }\n\n .accordian__body {\n overflow: hidden;\n }\n\n .accordian__content {\n display: block;\n padding: var(--accordian-content-padding);\n }\n\n .accordian__content--arrow-left{\n margin-left: ~~var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt)); \~~n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,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 Detail CSS\n /\nexport const styles = css`\n\n :host {\n box-sizing: border-box;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n .accordian {\n border-top:solid 1px var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n overflow-anchor: none;\n }\n\n .accordian--lg{\n --accordian-text-size:var(--sm-tesx, 14px);\n --accordian-heading-padding: 16px 12px;\n --accordian-content-padding: 6px 12px 18px;\n }\n\n .accordian--md{\n --accordian-text-size:var(--sm-tesx, 14px);\n --accordian-heading-padding: 12px 12px;\n --accordian-content-padding: 6px 12px 18px;\n }\n\n .accordian--sm{\n --accordian-text-size:var(--sm-tesx, 12px);\n --accordian-heading-padding: 6px 12px;\n --accordian-content-padding: 6px 12px 12px;\n }\n \n .accordian {\n font-size: var(--accordian-text-size);\n }\n\n .accordian--disabled {\n opacity: 0.5;\n }\n\n .accordian__header {\n display: flex;\n gap:12px;\n align-items: center;\n border-radius: inherit;\n font-weight:500;\n padding: var(--accordian-heading-padding);\n user-select: none;\n cursor: pointer;\n }\n\n .accordian__header--dark{\n background-color:var(--nile-colors-dark-200);\n }\n\n .accordian__header--arrow-left{\n flex-direction: row-reverse;\n }\n\n .accordian__header:focus {\n outline: none;\n }\n\n .accordian__header:focus-visible {\n outline: solid 3px hsl(200.4, 98%, 39.4%);\n outline-offset: calc(1px + 1px);\n }\n\n .accordian--disabled .accordian__header {\n cursor: not-allowed;\n }\n\n .accordian--disabled .accordian__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .accordian__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n .accordian__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n }\n\n .accordian--open .accordian__summary-icon {\n rotate: 90deg;\n }\n\n .accordian--open slot[name='expand-icon'],\n .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n display: none;\n }\n\n .accordian__body {\n overflow: hidden;\n }\n\n .accordian__content {\n display: block;\n padding: var(--accordian-content-padding);\n }\n\n .accordian__content--arrow-left{\n margin-left:28px;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-accordion/nile-accordion.js CHANGED Viewed

@@ -184,10 +184,10 @@ let NileAccordion = class NileAccordion extends NileElement {
         <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
-            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
           <slot name="collapse-icon">
-            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
         </span>
       </div>

package/dist/src/nile-accordion/nile-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.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} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/\n Nile detail component.\n \n @tag nile-accordion\n \n /\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/*\n @summary Accordian show a brief summary and expand to show additional content.\n \n @dependency nile-icon\n \n @slot - The accordian' main content.\n * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n \n @event nile-show - Emitted when the accordian opens.\n * @event nile-after-show - Emitted after the accordian opens and all animations are complete.\n * @event nile-hide - Emitted when the accordian closes.\n * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.\n \n @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The accordian content.\n \n @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.\n * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.\n /\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.accordian') accordian: HTMLElement;\n@query('.accordian__header') header: HTMLElement;\n@query('.accordian__body') body: HTMLElement;\n@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/\n Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n /\n@property({ type: Boolean, reflect: true }) open = false;\n\n/\n Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\n * Defaults to `'light'`.\n /\n@property({ reflect: true }) variant: 'dark' \| 'light' = 'light';\n\n/\n Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\n * Defaults to `'right'`.\n /\n@property({ reflect: true }) expandIconPlacement: 'left' \| 'right' = 'right';\n\n/\n Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\n * Defaults to `'md'`.\n /\n@property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n\n/* The summary to show in the header. If you need to display HTML, use the `summary` slot instead. /\n@property() summary: string;\n\n/* Disables the accordian so it can't be toggled. /\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n if (!this.disabled) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n if (this.open) {\n // Show\n const nileShow = this.emit('nile-show', { cancelable: true });\n if (nileShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = 'auto';\n\n this.emit('nile-after-show');\n } else {\n // Hide\n const nileHide = this.emit('nile-hide', { cancelable: true });\n if (nileHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = 'auto';\n\n this.emit('nile-after-hide');\n }\n}\n\n/* Shows the accordian. /\nasync show() {\n if (this.open \|\| this.disabled) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n}\n\n/* Hides the accordian */\nasync hide() {\n if (!this.open \|\| this.disabled) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n const isRtl = true;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n accordian: true,\n 'accordian--open': this.open,\n 'accordian--disabled': this.disabled,\n 'accordian--sm':this.size=='sm',\n 'accordian--md':this.size=='md',\n 'accordian--lg':this.size=='lg',\n })}\n >\n <div\n part=\"header\"\n id=\"header\"\n class=\"${classMap({\n 'accordian__header':true,\n 'accordian__header--dark':this.variant=='dark',\n 'accordian__header--arrow-left':'left'==this.expandIconPlacement\n })}\"\n role=\"button\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"summary\" part=\"summary\" class=\"accordian__summary\">${this.summary}</slot>\n\n <span part=\"summary-icon\" class=\"accordian__summary-icon\">\n <slot name=\"expand-icon\">\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>\n </slot>\n <slot name=\"collapse-icon\">\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>\n </slot>\n </span>\n </div>\n\n <div class=\"accordian__body\" role=\"region\" aria-labelledby=\"header\">\n <slot part=\"content\" id=\"content\" \n class=\"${classMap({\n 'accordian__content':true,\n 'accordian__content--arrow-left':this.expandIconPlacement=='left'\n })}\"></slot>\n </div>\n </div>\n `;\n}\n}\n\nsetDefaultAnimation('accordian.show', {\nkeyframes: [\n { height: '0', opacity: '0' },\n { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('accordian.hide', {\nkeyframes: [\n { height: 'auto', opacity: '1' },\n { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-accordion': NileAccordion;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;QAEP;;;;;;;;;;;;;;;;;;;;;;;WAuBG;;QAUH;;;WAGG;QACyC,SAAI,GAAG,KAAK,CAAC;QAEzD;;;WAGG;QAC0B,YAAO,GAAqB,OAAO,CAAC;QAEjE;;;WAGG;QAC0B,wBAAmB,GAAqB,OAAO,CAAC;QAE7E;;;WAGG;QAC0B,SAAI,GAAuB,IAAI,CAAC;QAK7D,qDAAqD;QACT,aAAQ,GAAG,KAAK,CAAC;IAuJ7D,CAAC;IArJD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;IACpD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,KAAoB;QAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACzD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAGK,AAAN,KAAK,CAAC,gBAAgB;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO;YACP,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,IAAI,QAAQ,CAAC,gBAAgB,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEzB,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;YACpF,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAEhC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,OAAO;YACP,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,IAAI,QAAQ,CAAC,gBAAgB,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,OAAO;YACT,CAAC;YAED,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEhC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;YACpF,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAEhC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,2BAA2B;IAC3B,KAAK,CAAC,IAAI;QACR,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC/B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAED,0BAA0B;IAC1B,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC;QAEnB,OAAO,IAAI,CAAA;;;cAGC,QAAQ,CAAC;YACf,SAAS,EAAE,IAAI;YACf,iBAAiB,EAAE,IAAI,CAAC,IAAI;YAC5B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;YACpC,eAAe,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YAC/B,eAAe,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YAC/B,eAAe,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;SAChC,CAAC;;;;;iBAKS,QAAQ,CAAC;YAChB,mBAAmB,EAAC,IAAI;YACxB,yBAAyB,EAAC,IAAI,CAAC,OAAO,IAAE,MAAM;YAC9C,+BAA+B,EAAC,MAAM,IAAE,IAAI,CAAC,mBAAmB;SAC/D,CAAC;;wBAEY,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;wBAE5B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;iBAC5B,IAAI,CAAC,kBAAkB;mBACrB,IAAI,CAAC,oBAAoB;;yEAE6B,IAAI,CAAC,OAAO;;;;;;;;;;;;;;mBAclE,QAAQ,CAAC;YAChB,oBAAoB,EAAC,IAAI;YACzB,gCAAgC,EAAC,IAAI,CAAC,mBAAmB,IAAE,MAAM;SAChE,CAAC;;;GAGX,CAAC;IACJ,CAAC;;AA1LM,oBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGlB;IAApB,KAAK,CAAC,YAAY,CAAC;gDAAwB;AACf;IAA5B,KAAK,CAAC,oBAAoB,CAAC;6CAAqB;AACtB;IAA1B,KAAK,CAAC,kBAAkB,CAAC;2CAAmB;AACN;IAAtC,KAAK,CAAC,8BAA8B,CAAC;qDAAiC;AAM3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAc;AAM5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqC;AAMpC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAAiD;AAMhD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiC;AAGjD;IAAX,QAAQ,EAAE;8CAAiB;AAGgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AA0CvD;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;qDAmC7C;AA3IY,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsNzB;;AAED,mBAAmB,CAAC,gBAAgB,EAAE;IACtC,SAAS,EAAE;QACT,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;QAC7B,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;KACjC;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC3C,CAAC,CAAC;AAEH,mBAAmB,CAAC,gBAAgB,EAAE;IACtC,SAAS,EAAE;QACT,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QAChC,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;KAC9B;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC3C,CAAC,CAAC;AAEH,eAAe,aAAa,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/\n Nile detail component.\n \n @tag nile-accordion\n \n /\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/*\n @summary Accordian show a brief summary and expand to show additional content.\n \n @dependency nile-icon\n \n @slot - The accordian' main content.\n * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n \n @event nile-show - Emitted when the accordian opens.\n * @event nile-after-show - Emitted after the accordian opens and all animations are complete.\n * @event nile-hide - Emitted when the accordian closes.\n * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.\n \n @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The accordian content.\n \n @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.\n * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.\n /\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.accordian') accordian: HTMLElement;\n@query('.accordian__header') header: HTMLElement;\n@query('.accordian__body') body: HTMLElement;\n@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/\n Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n /\n@property({ type: Boolean, reflect: true }) open = false;\n\n/\n Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\n * Defaults to `'light'`.\n /\n@property({ reflect: true }) variant: 'dark' \| 'light' = 'light';\n\n/\n Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\n * Defaults to `'right'`.\n /\n@property({ reflect: true }) expandIconPlacement: 'left' \| 'right' = 'right';\n\n/\n Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\n * Defaults to `'md'`.\n /\n@property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n\n/* The summary to show in the header. If you need to display HTML, use the `summary` slot instead. /\n@property() summary: string;\n\n/* Disables the accordian so it can't be toggled. /\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n if (!this.disabled) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n if (this.open) {\n // Show\n const nileShow = this.emit('nile-show', { cancelable: true });\n if (nileShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = 'auto';\n\n this.emit('nile-after-show');\n } else {\n // Hide\n const nileHide = this.emit('nile-hide', { cancelable: true });\n if (nileHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = 'auto';\n\n this.emit('nile-after-hide');\n }\n}\n\n/* Shows the accordian. /\nasync show() {\n if (this.open \|\| this.disabled) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n}\n\n/* Hides the accordian */\nasync hide() {\n if (!this.open \|\| this.disabled) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n const isRtl = true;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n accordian: true,\n 'accordian--open': this.open,\n 'accordian--disabled': this.disabled,\n 'accordian--sm':this.size=='sm',\n 'accordian--md':this.size=='md',\n 'accordian--lg':this.size=='lg',\n })}\n >\n <div\n part=\"header\"\n id=\"header\"\n class=\"${classMap({\n 'accordian__header':true,\n 'accordian__header--dark':this.variant=='dark',\n 'accordian__header--arrow-left':'left'==this.expandIconPlacement\n })}\"\n role=\"button\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"summary\" part=\"summary\" class=\"accordian__summary\">${this.summary}</slot>\n\n <span part=\"summary-icon\" class=\"accordian__summary-icon\">\n <slot name=\"expand-icon\">\n <nile-icon name=\"arrowright\"></nile-icon>\n </slot>\n <slot name=\"collapse-icon\">\n <nile-icon name=\"arrowright\"></nile-icon>\n </slot>\n </span>\n </div>\n\n <div class=\"accordian__body\" role=\"region\" aria-labelledby=\"header\">\n <slot part=\"content\" id=\"content\" \n class=\"${classMap({\n 'accordian__content':true,\n 'accordian__content--arrow-left':this.expandIconPlacement=='left'\n })}\"></slot>\n </div>\n </div>\n `;\n}\n}\n\nsetDefaultAnimation('accordian.show', {\nkeyframes: [\n { height: '0', opacity: '0' },\n { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('accordian.hide', {\nkeyframes: [\n { height: 'auto', opacity: '1' },\n { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-accordion': NileAccordion;\n }\n}\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.css.js CHANGED Viewed

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     --virtual-scroll-container-width:110px;
     --virtual-scroll-container-height:200px;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   .nile-dropdown--input {

package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB~~,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 AutoComplete CSS\n */\nexport const styles = css`\n :host {\n --virtual-scroll-container-width:110px;\n --virtual-scroll-container-height:200px;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-dropdown--input {\n width: 100%;\n }\n\n .virtualized__menu{\n min-width: var(--virtual-scroll-container-width);\n min-height: var(--virtual-scroll-container-height) !important;\n }\n\n .virtualized__menu nile-menu-item{\n width:100%;\n }\n\n .nile-auto-complete--input {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,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 AutoComplete CSS\n */\nexport const styles = css`\n :host {\n --virtual-scroll-container-width:110px;\n --virtual-scroll-container-height:200px;\n }\n\n .nile-dropdown--input {\n width: 100%;\n }\n\n .virtualized__menu{\n min-width: var(--virtual-scroll-container-width);\n min-height: var(--virtual-scroll-container-height) !important;\n }\n\n .virtualized__menu nile-menu-item{\n width:100%;\n }\n\n .nile-auto-complete--input {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.d.ts CHANGED Viewed

@@ -12,8 +12,6 @@ export declare class NileAutoComplete extends NileElement {
     value: string;
     placeholder: string;
     noBorder: boolean;
-    noOutline: boolean;
-    noPadding: boolean;
     loading: boolean;
     filterFunction: (item: string, searchedValue: string) => boolean;
     renderItemFunction: (item: any) => string;

package/dist/src/nile-auto-complete/nile-auto-complete.js CHANGED Viewed

@@ -16,8 +16,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
         this.value = '';
         this.placeholder = 'Type here ..';
         this.noBorder = false;
-        this.noOutline = false;
-        this.noPadding = false;
         this.loading = false;
         this.filterFunction = (item, searchedValue) => item.toLowerCase().includes(searchedValue.toLowerCase());
         this.renderItemFunction = (item) => item;
@@ -43,11 +41,9 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     render() {
         const content = this.enableVirtualScroll ? this.getVirtualizedContent() : this.getContent();
         return html `
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts="input">
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
-          ?no-outline=${this.noOutline}
-          ?no-padding=${this.noPadding}
           .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}
@@ -55,9 +51,8 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
           @click=${this.handleClick}
           slot="trigger"
           placeholder=${this.placeholder}
-          exportparts="input"
         >
-          ${this.loading ? html `<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>` : nothing}
+          ${this.loading ? html `<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>` : nothing}
         </nile-input>
         ${this.menuItems.length > 0 && !this.loading
             ? content
@@ -162,12 +157,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "noBorder", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileAutoComplete.prototype, "noOutline", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileAutoComplete.prototype, "noPadding", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "loading", void 0);

package/dist/src/nile-auto-complete/nile-auto-complete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n \n @property({ type: Boolean }) noOutline: boolean = false;\n\n @property({ type: Boolean }) noPadding: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n }\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts=\"input\">\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n ?no-outline=${this.noOutline}\n ?no-padding=${this.noPadding}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n exportparts=\"input\"\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n }\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}"]}

package/dist/src/nile-avatar/nile-avatar.css.js CHANGED Viewed

@@ -10,19 +10,15 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   .text__avatar {
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     font-style: normal;
-    aspect-ratio: 1 / 1;
-    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));
-    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));
-    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    font-weight: 600;
+    color: var(--nile-colors-white-base);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -33,54 +29,47 @@ export const styles = css `
   .avatar {
     box-sizing: border-box;
-    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    border: 0.5px solid var(--nile-colors-neutral-500);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
     overflow: hidden;
   }
-  .avatar__xs {
-    width: var(--nile-type-scale-4, var(--ng-height-24px));
-    height: var(--nile-type-scale-4), var(--ng-height-24px);
-    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));
-    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));
-  }
   .avatar__small {
-    width: var(--nile-type-scale-4, var(--ng-height-32px));
-    height: var(--nile-type-scale-4, var(--ng-height-32px));
-    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));
-    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));
+    width: var(--nile-type-scale-4);
+    height: var(--nile-type-scale-4);
+    font-size: 6.516px;
+    line-height: 6.516px;
   }
   .avatar__medium {
-    width: var(--nile-spacing-3-x, var(--ng-height-40px));
-    height: var(--nile-spacing-3-x, var(--ng-height-40px));
-    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));
+    width: var(--nile-spacing-3-x);
+    height: var(--nile-spacing-3-x);
+    font-size: 12px;
+    line-height: 18px;
   }
   .avatar__large {
-    width: var(--nile-spacing-4xl, var(--ng-height-48px));
-    height: var(--nile-spacing-4xl, var(--ng-height-48px));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
-    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 20px;
   }
   .avatar__extralarge {
-    height: var(--nile-spacing-5xl, 56px);
-    width: var(--nile-spacing-5xl, 56px);
-    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));
-    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));
+    height: 40px;
+    width: 40px;
+    font-size: 16px;
+    line-height: 24px;
   }
   .avatar__2xl {
-    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
-    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
-    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));
-    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));
+    height: 64px;
+    width: 64px;
+    font-size: 24px;
+    line-height: 32px;
   }
   .avatar__rounded {
@@ -88,23 +77,23 @@ export const styles = css `
   }
   .variant__orange {
-    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));
+    background:var(--nile-avatar-background-color-orange);
   }
   .variant__pink {
-    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-pink);
   }
   .variant__blue {
-    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-blue);
   }
   .variant__light_blue {
-    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-lightblue);
   }
   .variant__green {
-    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-green);
   }
 `;
 export default [styles];

package/dist/src/nile-avatar/nile-avatar.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB~~,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 Avatar CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif ~~, var(--ng-font-family-body~~));\n font-style: normal;\n ~~aspect-ratio: 1 / 1;\n~~ font-weight: ~~var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold))~~;\n color: var(--nile-colors-white-base ~~, var(--ng-colors-text-quaternary-500~~));\n border-radius: ~~var(--nile-radius-radius-xs , var(--ng-radius-xs))~~;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500 ~~, var(--ng-colors-border-secondary~~));\n border-radius: ~~var(--nile-radius-radius-xs , var(--ng-radius-xs))~~;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .~~avatar__xs~~ {\n width: var(--nile-type-scale-4~~, var(--ng-height-24px~~));\n height: var(--nile-type-scale-4)~~, var(--ng-height-24px)~~;\n font-size: ~~var(--nile-font-size-~~6~~-7, var(--ng-font-size-text-xs))~~;\n line-height: ~~var(--nile-font-size-~~6~~-7, var(--ng-line-height-text-xs));\n }\n \n~~ .~~avatar__small {\n width: var(--nile-type-scale-4, var(--ng-height-32px))~~;\n height: var(--nile-type-scale-4, var(--ng-height-32px));\n font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x~~, var(--ng-height-40px~~));\n height: var(--nile-spacing-3-x~~, var(--ng-height-40px~~));\n font-size: ~~var(--nile-spacing-2-x, var(--ng-font-size-text-md))~~;\n line-height: ~~var(--nile-type-scale-5, var(--ng-line-height-text-md))~~;\n }\n\n .avatar__large {\n width: ~~var(--nile-spacing-4xl, var(--ng-height-48px))~~;\n height: ~~var(--nile-spacing-4xl, var(--ng-height-48px))~~;\n font-size: ~~var(--nile-type-scale-3, var(--ng-font-size-text-lg))~~;\n line-height: ~~var(--nile-type-scale-6, var(--ng-line-height-text-lg))~~;\n }\n\n .avatar__extralarge {\n height: ~~var(--nile-spacing-5xl, 56px)~~;\n width: ~~var(--nile-spacing-5xl, 56px)~~;\n font-size: ~~var(--nile-spacing-xl, var(--ng-font-size-text-xl))~~;\n line-height: ~~var(--nile-spacing-3xl , var(--ng-line-height-text-xl))~~;\n }\n\n .avatar__2xl {\n height: ~~var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl))~~;\n width: ~~var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl))~~;\n font-size: ~~var(--nile-spacing-3xl, var(--ng-line-height-display-xs))~~;\n line-height: ~~var(--nile-spacing-4xl, var(--ng-line-height-display-xs))~~;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange ~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue ~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green~~, var(--ng-colors-bg-tertiary~~));\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,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 Avatar CSS\n */\nexport const styles = css`\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n border-radius: 4px;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n border-radius: 4px;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-avatar/nile-avatar.d.ts CHANGED Viewed

@@ -33,7 +33,7 @@ export declare class NileAvatar extends NileElement {
     /** Gives the default border color  to the Avatar */
     borderColor: string;
     /** Size of the Avatar */
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     /** Gives a border radius of 50% to the Avatar */
     isRounded: boolean;
     private imageError;

package/dist/src/nile-avatar/nile-avatar.js CHANGED Viewed

@@ -24,13 +24,13 @@ let NileAvatar = class NileAvatar extends NileElement {
         /** Gives the icon to the Avatar */
         this.variant = 'text';
         /** Gives the icon to the Avatar */
-        this.icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';
+        this.icon = 'user';
         /** Gives the default Image Letters to the Avatar */
         this.name = '';
         /** Gives the default bg color  to the Avatar */
         this.bgColor = '';
         /** Gives the default text color  to the Avatar */
-        this.textColor = '';
+        this.textColor = '#fff';
         /** Gives the default border color  to the Avatar */
         this.borderColor = '';
         /** Size of the Avatar */
@@ -68,8 +68,6 @@ let NileAvatar = class NileAvatar extends NileElement {
     }
     getDefaultIconSize() {
         switch (this.size) {
-            case 'xs':
-                return '6';
             case 'sm':
                 return '10';
             case 'md':
@@ -104,7 +102,6 @@ let NileAvatar = class NileAvatar extends NileElement {
     <div
       class=${classMap({
             text__avatar: true,
-            avatar__xs: this.size === 'xs',
             avatar__small: this.size === 'sm',
             avatar__medium: this.size === 'md',
             avatar__large: this.size === 'lg',
@@ -120,9 +117,9 @@ let NileAvatar = class NileAvatar extends NileElement {
       part="avatar__content"
       style="
         background-color: ${this.bgColor};
-        color:${this.textColor ? this.textColor : "var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))"};
-        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};
-        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
+        color:${this.textColor};
+        border: 1px solid ${this.borderColor};
+        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}"
     >
       ${content}
     </div>`;
@@ -131,8 +128,7 @@ let NileAvatar = class NileAvatar extends NileElement {
         return html `
     <nile-icon
       name="${this.icon}"
-      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-      color="${this.textColor ? this.textColor : 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
+      color="${this.textColor && "#fff" !== this.textColor ? this.textColor : 'var(--nile-colors-dark-500)'}"
       size="${this.getDefaultIconSize()}"
     ></nile-icon>`;
     }
@@ -143,7 +139,6 @@ let NileAvatar = class NileAvatar extends NileElement {
       class="avatar"
       class=${classMap({
             avatar: true,
-            avatar__xs: this.size === 'xs',
             avatar__small: this.size === 'sm',
             avatar__medium: this.size === 'md',
             avatar__large: this.size === 'lg',