npm - @aquera/nile-elements - Versions diffs - 0.0.97 → 0.0.99 - Mend

@aquera/nile-elements 0.0.97 → 0.0.99

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 (100) hide show

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

@@ -98,7 +98,7 @@ export const styles = css `
   .input--standard {
     background-color: var(--nile-input-standard-background-color);
     border: solid 1px var(--nile-input-standard-border-color);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    box-shadow: var(--nile-input-shadow-standard);
   }
   .input--standard:hover:not(.input--disabled) {
@@ -109,8 +109,7 @@ export const styles = css `
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
     border-color: #85aad1;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -150,35 +149,33 @@ export const styles = css `
   .input--standard.input--focused.input--destructive:not(.input--disabled) {
     border: 1px solid #fda29b;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+    box-shadow: var(--nile-input-shadow-destructive-active);
   }
   .input--destructive:active {
     border: 1px solid #fda29b;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+    box-shadow: var(--nile-input-shadow-destructive-active);
   }
   /* Filled inputs */
   .input--filled {
     border: none;
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
     color: hsl(240 5.3% 26.1%);
   }
   .input--filled:hover:not(.input--disabled) {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
   }
   .input--filled.input--focused:not(.input--disabled) {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
     outline: solid 3px hsl(200.4 98% 39.4%);
     outline-offset: 1px;
   }
   .input--filled.input--disabled {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -212,42 +209,42 @@ export const styles = css `
   .input__control:-webkit-autofill {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
   .input__control:-webkit-autofill:hover {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
   .input__control:-webkit-autofill:focus {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
   .input__control:-webkit-autofill:active {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
   .input--filled .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
   .input--filled .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
   .input--filled .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
   .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
   .input__control::placeholder {

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

	@@ -1 +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,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmfxB,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-element';\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: #a4121c;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n / Error message /\n .form-control__error-message {\n display: block;\n color: #a4121c;\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: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #85aad1;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24);\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: #fff;\n border-color: #c7ced4;\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: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .input--destructive:active {\n border: 1px solid #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / Filled inputs /\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\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 hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #667085;\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\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 #85aad1;\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 }\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"]}
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,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgfxB,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-element';\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: #a4121c;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n / Error message /\n .form-control__error-message {\n display: block;\n color: #a4121c;\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: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #85aad1;\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: #fff;\n border-color: #c7ced4;\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: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid #fda29b;\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid #fda29b;\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n / Filled inputs /\n .input--filled {\n border: none;\n background-color: #F1F1F2;\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: #F1F1F2;\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: #F1F1F2;\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: #F1F1F2;\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 #F1F1F2 inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n }\n\n .input__control::placeholder {\n color: #667085;\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\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 #85aad1;\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 }\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-popover/nile-popover.d.ts CHANGED Viewed

@@ -4,14 +4,15 @@
  * 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 { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
 /**
  * Nile icon component.
  *
  * @tag nile-popover
  *
  */
-export declare class NilePopover extends LitElement {
+export declare class NilePopover extends NileElement {
     /**
      * The styles for Popover
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -27,7 +28,7 @@ export declare class NilePopover extends LitElement {
     arrow: boolean;
     /** Gives the title to the popover */
     title: string;
-    private isShow;
+    isShow: boolean;
     arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
     /**
      * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
@@ -41,6 +42,7 @@ export declare class NilePopover extends LitElement {
      */
     connectedCallback(): void;
     disconnectedCallback(): void;
+    handleShowHide(): void;
     private handleClick;
     private handleDocumentClick;
     render(): TemplateResult;

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

@@ -5,16 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { LitElement, html, property, } from 'lit-element';
-import { customElement, state } from 'lit/decorators.js';
+import { html, property, } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-popover.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
 /**
  * Nile icon component.
  *
  * @tag nile-popover
  *
  */
-let NilePopover = class NilePopover extends LitElement {
+let NilePopover = class NilePopover extends NileElement {
     constructor() {
         super(...arguments);
         /**
@@ -46,7 +48,7 @@ let NilePopover = class NilePopover extends LitElement {
         };
         this.handleDocumentClick = () => {
             if (this.isShow) {
-                this.isShow = !this.isShow;
+                this.isShow = false;
             }
         };
         /* #endregion */
@@ -66,12 +68,20 @@ let NilePopover = class NilePopover extends LitElement {
      */
     connectedCallback() {
         super.connectedCallback();
+        this.emit('nile-init');
         document.addEventListener('click', this.handleDocumentClick);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.emit('nile-destroy');
         document.removeEventListener('click', this.handleDocumentClick);
     }
+    handleShowHide() {
+        if (this.isShow)
+            this.emit('nile-show');
+        else
+            this.emit('nile-hide');
+    }
     render() {
         return html `
       <nile-popup
@@ -115,7 +125,7 @@ __decorate([
     property({ type: String })
 ], NilePopover.prototype, "title", void 0);
 __decorate([
-    state()
+    property({ type: Boolean, attribute: 'open' })
 ], NilePopover.prototype, "isShow", void 0);
 __decorate([
     property({ attribute: 'arrow-placement' })
@@ -126,6 +136,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NilePopover.prototype, "flip", void 0);
+__decorate([
+    watch('isShow')
+], NilePopover.prototype, "handleShowHide", null);
 NilePopover = __decorate([
     customElement('nile-popover')
 ], NilePopover);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,~~EACL~~,~~UAAU,EACV,~~IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,~~KAAK,EAAE,~~MAAM,mBAAmB,CAAC;~~AACzD~~,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;~~AAI5C~~;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,~~UAAU~~;~~IAApC~~;;QASL;;;WAGG;QACS,cAAS,GAYJ,KAAK,CAAC;QAEvB,oFAAoF;QACxD,aAAQ,GAAG,EAAE,CAAC;QAEO,UAAK,GAAG,IAAI,CAAC;QAE9D,qCAAqC;QACT,UAAK,GAAG,EAAE,CAAC;~~QAEtB~~,WAAM,GAAG,KAAK,CAAC;~~QAEY~~,mBAAc,GAI3C,QAAQ,CAAC;QAExB;;;WAGG;QAC0B,UAAK,GAAG,KAAK,CAAC;QAEd,SAAI,GAAG,KAAK,CAAC;~~QAqBlC~~,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3B,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;YAE9D,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAC5B,IAAI,OAAO,KAAK,IAAI,EAAE;oBACpB,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;iBACxB;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,MAAM,GAAG,~~CAAC~~,~~IAAI,~~CAAC~~,MAAM,CAAC~~;~~aAC5B~~;QACH,CAAC,CAAC;QAgCF,gBAAgB;IAClB,CAAC;~~IArHC~~;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IA4CD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAClE,CAAC;IAmBM,MAAM;QACX,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;oBACvB,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;iBAClB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;0BACxB,IAAI,CAAC,cAAc;iBAC5B,IAAI,CAAC,IAAI;;mBAEP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;;;;;;mBAMjC,IAAI,CAAC,WAAW;;UAEzB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;0DAC0C,IAAI,CAAC,KAAK;;;mBAGjD;YACT,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEb,CAAC;IACJ,CAAC;CAGF,CAAA;~~AAzGa~~;IAAX,QAAQ,EAAE;8CAYY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEO;IAAhD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;0CAAc;AAGlC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAY;~~AAE9B~~;~~IAAR~~,~~KAAK~~,EAAE;~~2CAAwB~~;~~AAEY~~;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;mDAInB;AAMK;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAEd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAc;~~AAjD/B~~,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,~~CAsHvB~~;~~SAtHY~~,WAAW;~~AAwHxB~~,eAAe,WAAW,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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, ~~state~~ } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport ~~type~~ ~~NilePopup~~ from '../~~nile-popup~~/nile-~~popup~~';\nimport { ~~string~~ } from '../~~nile-icon~~/~~icons/svg~~';\n\n/\n Nile icon component.\n \n @tag nile-popover\n \n /\n@customElement('nile-popover')\nexport class NilePopover extends ~~LitElement~~ {\n /*\n The styles for Popover\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /\n The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @property() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* The distance in pixels from which to offset the popover away from its target. /\n @property({ type: Number }) distance = 18;\n\n @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n /* Gives the title to the popover /\n @property({ type: String }) title = '';\n\n @~~state~~() ~~private~~ isShow = false;\n\n @property({ attribute: 'arrow-placement' }) arrowPlacement:\n \| 'start'\n \| 'end'\n \| 'center'\n \| 'anchor' = 'anchor';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n /\n @property({ type: Boolean }) hoist = false;\n\n @property({ type: Boolean }) flip = false;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.handleDocumentClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.handleDocumentClick);\n }\n\n private handleClick = () => {\n this.isShow = !this.isShow;\n const allPopovers = document.querySelectorAll('nile-popover');\n\n allPopovers.forEach(popover => {\n if (popover !== this) {\n popover.isShow = false;\n }\n });\n };\n\n private handleDocumentClick = () => {\n if (this.isShow) {\n this.isShow = ~~!this.isShow~~;\n }\n };\n\n public render(): TemplateResult {\n return html`\n <nile-popup\n active\n .arrow=\"${this.arrow && this.isShow}\"\n distance=\"${this.distance}\"\n placement=\"${this.placement}\"\n @click=${(e: Event) => e.stopPropagation()}\n arrowPlacement=\"${this.arrowPlacement}\"\n .flip=\"${this.flip}\"\n shift\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n >\n <slot\n slot=\"anchor\"\n name=\"anchor\"\n aria-describedby=\"tooltip\"\n @click=${this.handleClick}\n ></slot>\n ${this.isShow\n ? html` <div part=\"popover\" class=\"popover__box\">\n <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n <slot part=\"base\"></slot>\n <slot name=\"action\" class=\"popover__action\"> </slot>\n </div>`\n : html``}\n </nile-popup>\n `;\n }\n\n / #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-popover': NilePopover;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.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 property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/\n Nile icon component.\n \n @tag nile-popover\n \n /\n@customElement('nile-popover')\nexport class NilePopover extends NileElement {\n /*\n The styles for Popover\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /\n The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @property() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* The distance in pixels from which to offset the popover away from its target. /\n @property({ type: Number }) distance = 18;\n\n @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n /* Gives the title to the popover /\n @property({ type: String }) title = '';\n\n @property({type:Boolean, attribute:'open'}) isShow = false;\n\n @property({ attribute: 'arrow-placement' }) arrowPlacement:\n \| 'start'\n \| 'end'\n \| 'center'\n \| 'anchor' = 'anchor';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n /\n @property({ type: Boolean }) hoist = false;\n\n @property({ type: Boolean }) flip = false;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n document.addEventListener('click', this.handleDocumentClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n document.removeEventListener('click', this.handleDocumentClick);\n }\n\n @watch('isShow')\n handleShowHide(){\n if(this.isShow)this.emit('nile-show')\n else this.emit('nile-hide')\n }\n\n private handleClick = () => {\n this.isShow = !this.isShow;\n const allPopovers = document.querySelectorAll('nile-popover');\n\n allPopovers.forEach(popover => {\n if (popover !== this) {\n popover.isShow = false;\n }\n });\n };\n\n private handleDocumentClick = () => {\n if (this.isShow) {\n this.isShow = false;\n }\n };\n\n public render(): TemplateResult {\n return html`\n <nile-popup\n active\n .arrow=\"${this.arrow && this.isShow}\"\n distance=\"${this.distance}\"\n placement=\"${this.placement}\"\n @click=${(e: Event) => e.stopPropagation()}\n arrowPlacement=\"${this.arrowPlacement}\"\n .flip=\"${this.flip}\"\n shift\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n >\n <slot\n slot=\"anchor\"\n name=\"anchor\"\n aria-describedby=\"tooltip\"\n @click=${this.handleClick}\n ></slot>\n ${this.isShow\n ? html` <div part=\"popover\" class=\"popover__box\">\n <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n <slot part=\"base\"></slot>\n <slot name=\"action\" class=\"popover__action\"> </slot>\n </div>`\n : html``}\n </nile-popup>\n `;\n }\n\n / #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-popover': NilePopover;\n }\n}\n"]}

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

@@ -262,7 +262,7 @@ export const styles = css `
     border-radius: 4px;
     font-size: 14px;
     padding: 12px;
-    height: 38px;
+    height: 40px;
     box-sizing: border-box;
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6bxB,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-element';\n\n/\n Select_2 CSS\n /\nexport const styles = css`\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 .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: block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\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: inherit;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\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 :host {\n display: block;\n }\n\n /* The popup /\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n / Combobox /\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif);\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n / Visually hide the display input when multiple is enabled /\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: #005ea6;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n margin: 6px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n / Standard selects /\n .select--standard .select__combobox {\n background-color: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid #000;\n background: #fff;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .select--error .select__combobox {\n border-color: #e5434d;\n }\n\n .select--success {\n border-color: #43e5c0;\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 4px;\n font-size: 14px;\n padding: 12px;\n height: 38px;\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted() {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n / Pills /\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n / Prefix /\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n / Clear button /\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n / Expand icon /\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: 0.25rem;\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n / Listbox /\n .select__listbox {\n display: block;\n position: relative;\n font-size: 1rem;\n font-weight: 400;\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n / Make sure it adheres to the popup's auto size /\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options__search-enabled {\n padding-top: 10px;\n }\n\n .select__options {\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n / Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 12px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: 20px;\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: 10px;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible{\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: 12px;\n }\n \n .select__hide-default{\n display: none;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6bxB,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-element';\n\n/\n Select_2 CSS\n /\nexport const styles = css`\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 .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: block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\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: inherit;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\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 :host {\n display: block;\n }\n\n /* The popup /\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n / Combobox /\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif);\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n / Visually hide the display input when multiple is enabled /\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: #005ea6;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n margin: 6px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n / Standard selects /\n .select--standard .select__combobox {\n background-color: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid #000;\n background: #fff;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .select--error .select__combobox {\n border-color: #e5434d;\n }\n\n .select--success {\n border-color: #43e5c0;\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 4px;\n font-size: 14px;\n padding: 12px;\n height: 40px;\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted() {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n / Pills /\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n / Prefix /\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n / Clear button /\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n / Expand icon /\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: 0.25rem;\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n / Listbox /\n .select__listbox {\n display: block;\n position: relative;\n font-size: 1rem;\n font-weight: 400;\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n / Make sure it adheres to the popup's auto size /\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options__search-enabled {\n padding-top: 10px;\n }\n\n .select__options {\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n / Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 12px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: 20px;\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: 10px;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible{\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: 12px;\n }\n \n .select__hide-default{\n display: none;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js CHANGED Viewed

@@ -12,6 +12,12 @@ export const styles = css `
   :host {
     display: table-cell;
     box-sizing: border-box;
+  }
+  .header__item__wrapper{
+    display:flex;
+    align-items:center;
+    box-sizing: border-box;
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB~~,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-element';\n\n/\n TableHeaderItem CSS\n /\nexport const styles = css`\n :host {\n display: table-cell;\n box-sizing: border-box;\n padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n min-height: 44px;\n height: 44px;\n }\n\n .headers {\n display: flex;\n align-items: center;\n height: auto;\n width: 100%;\n gap: 8px;\n color: var(--nile-colors-gray-light-mode-600);\n font-family: var(--nile-font-family-serif);\n font-feature-settings: 'clig' off, 'liga' off;\n font-size: var(--nile-type-scale-2);\n font-weight: 500;\n font-style: normal;\n / line-height: var(--nile-type-scale-5); */\n line-height: normal;\n }\n\n nile-icon {\n cursor: pointer;\n }\n\n .sorting__icons {\n display: flex;\n flex-direction: column;\n align-items: centre;\n }\n\n .sorting__icons nile-icon:hover {\n opacity: 0.4;\n }\n\n .hover__arrow {\n opacity: 0;\n }\n\n .headers:hover .hover__arrow {\n opacity: 0.3;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,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-element';\n\n/\n TableHeaderItem CSS\n /\nexport const styles = css`\n :host {\n display: table-cell;\n box-sizing: border-box;\n }\n \n .header__item__wrapper{\n display:flex;\n align-items:center;\n box-sizing: border-box;\n padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n min-height: 44px;\n height: 44px;\n }\n\n .headers {\n display: flex;\n align-items: center;\n height: auto;\n width: 100%;\n gap: 8px;\n color: var(--nile-colors-gray-light-mode-600);\n font-family: var(--nile-font-family-serif);\n font-feature-settings: 'clig' off, 'liga' off;\n font-size: var(--nile-type-scale-2);\n font-weight: 500;\n font-style: normal;\n / line-height: var(--nile-type-scale-5); */\n line-height: normal;\n }\n\n nile-icon {\n cursor: pointer;\n }\n\n .sorting__icons {\n display: flex;\n flex-direction: column;\n align-items: centre;\n }\n\n .sorting__icons nile-icon:hover {\n opacity: 0.4;\n }\n\n .hover__arrow {\n opacity: 0;\n }\n\n .headers:hover .hover__arrow {\n opacity: 0.3;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.js CHANGED Viewed

@@ -55,7 +55,9 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
     }
     render() {
         return html ` ${this.hasSlotController.test('[default]')
-            ? html ` <div class="headers">
+            ? html `
+      <div class="header__item__wrapper">
+        <div class="headers">
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0
                 ? html `<nile-icon
@@ -93,7 +95,8 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
                 <slot name="filter__content" part="filter__content"></slot>
               </nile-popover>`
                 : html ``}
-        </div>`
+        </div>
+      </div>`
             : null}`;
     }
 };

package/dist/src/nile-table-header-item/nile-table-header-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAE7D,sCAAsC;QACM,eAAU,GAAG,KAAK,CAAC;QAE/D,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;QAEI,eAAU,GAAG,CAAC,CAAC;~~QAkExB~~,gBAAgB;IAClB,CAAC;~~IArFC~~;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAcD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,UAAU,CAAC,CAAM;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7D,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,KAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE;SAC/D,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,CAAM;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA~~;;YAEA~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,UAAU;;4BAEZ;gBAChB,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,UAAU;4BACZ;gBAChB,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,UAAU;4BACZ;gBAChB,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,0BAA0B;gBAClE,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA;;;;gCAIc,IAAI,CAAC,YAAY;;;;8BAInB;gBAClB,CAAC,CAAC,IAAI,CAAA,EAAE;~~eACL;YACT~~,CAAC,CAAC,IAAI,EAAE,CAAC;IACb,CAAC;CAEF,CAAA;~~AA5E6C~~;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAoB;AAGI;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;qDAC7D;AAEI;IAAR,KAAK,EAAE;uDAAgB;AApBb,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,~~CAuF~~/B;~~SAvFY~~,mBAAmB;~~AAyFhC~~,eAAe,mBAAmB,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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/\n Nile icon component.\n \n @tag nile-table-header-item\n \n /\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n private readonly hasSlotController = new HasSlotController(this, '[default]');\n /*\n The styles for TableHeaderItem\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Enables the sort functionality. /\n @property({ type: Boolean, reflect: true }) havesort = false;\n\n /* Enables the sort functionality. /\n @property({ type: Boolean, reflect: true }) havefilter = false;\n\n /* Places the icon . /\n @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n '';\n\n @state() sorting_ct = 0;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n private handleSort(e: any) {\n this.sorting_ct++;\n let curr_sort_string = this.hasSlotController.host.innerHTML;\n const order = ['normal', 'asc', 'des'];\n this.emit('nile-click-sort', {\n value: { curr_sort_string, order: order[this.sorting_ct % 3] },\n });\n }\n\n private handleSearch(e: any) {\n this.emit('nile-search', { value: e.detail.value });\n }\n\n public render(): TemplateResult {\n return html` ${this.hasSlotController.test('[default]')\n ? html` <div class=\"headers\">\n <slot> </slot>\n ${this.havesort && this.sorting_ct % 3 === 0\n ? html`<nile-icon\n name=\"sortdown\"\n size=\"16\"\n @click=${this.handleSort}\n class=\"hover__arrow\"\n ></nile-icon>`\n : null}\n ${this.havesort && this.sorting_ct % 3 === 1\n ? html`<nile-icon\n name=\"sortdown\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>`\n : null}\n ${this.havesort && this.sorting_ct % 3 === 2\n ? html`<nile-icon\n name=\"sortup\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>`\n : null}\n ${this.iconName\n ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n : html``}\n ${this.havefilter\n ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n <nile-input\n placeholder=\"Search\"\n @nile-input=${this.handleSearch}\n part=\"filter__search\"\n ></nile-input>\n <slot name=\"filter__content\" part=\"filter__content\"></slot>\n </nile-popover>`\n : html``}\n </div>`\n : null}`;\n }\n / #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-header-item': NileTableHeaderItem;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.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 property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/\n Nile icon component.\n \n @tag nile-table-header-item\n \n /\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n private readonly hasSlotController = new HasSlotController(this, '[default]');\n /*\n The styles for TableHeaderItem\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Enables the sort functionality. /\n @property({ type: Boolean, reflect: true }) havesort = false;\n\n /* Enables the sort functionality. /\n @property({ type: Boolean, reflect: true }) havefilter = false;\n\n /* Places the icon . /\n @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n '';\n\n @state() sorting_ct = 0;\n\n / #endregion /\n\n / #region Methods /\n\n /\n Render method\n * @slot This is a slot test\n /\n private handleSort(e: any) {\n this.sorting_ct++;\n let curr_sort_string = this.hasSlotController.host.innerHTML;\n const order = ['normal', 'asc', 'des'];\n this.emit('nile-click-sort', {\n value: { curr_sort_string, order: order[this.sorting_ct % 3] },\n });\n }\n\n private handleSearch(e: any) {\n this.emit('nile-search', { value: e.detail.value });\n }\n\n public render(): TemplateResult {\n return html` ${this.hasSlotController.test('[default]')\n ? html`\n <div class=\"header__item__wrapper\">\n <div class=\"headers\">\n <slot> </slot>\n ${this.havesort && this.sorting_ct % 3 === 0\n ? html`<nile-icon\n name=\"sortdown\"\n size=\"16\"\n @click=${this.handleSort}\n class=\"hover__arrow\"\n ></nile-icon>`\n : null}\n ${this.havesort && this.sorting_ct % 3 === 1\n ? html`<nile-icon\n name=\"sortdown\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>`\n : null}\n ${this.havesort && this.sorting_ct % 3 === 2\n ? html`<nile-icon\n name=\"sortup\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>`\n : null}\n ${this.iconName\n ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n : html``}\n ${this.havefilter\n ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n <nile-input\n placeholder=\"Search\"\n @nile-input=${this.handleSearch}\n part=\"filter__search\"\n ></nile-input>\n <slot name=\"filter__content\" part=\"filter__content\"></slot>\n </nile-popover>`\n : html``}\n </div>\n </div>`\n : null}`;\n }\n / #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-header-item': NileTableHeaderItem;\n }\n}\n"]}

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

@@ -17,6 +17,8 @@ export const styles = css `
   }
   .alert {
+    max-width: 100%;
+    box-sizing: border-box;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -167,7 +169,7 @@ export const styles = css `
     padding: 0 6px;
     color: var(--nile-colors-dark-900);
-    font-family: var
+    font-family:  var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLxB~~,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-element';\n\n/\n Toast CSS\n /\nexport const styles = css`\n :host {\n display: contents;\n\n / For better DX, we'll reset the margin here so the base part can inherit it */\n margin: 0;\n }\n\n .alert {\n position: relative;\n display: flex;\n align-items: flex-start;\n border: solid 2px 2px;\n border-radius: 8px;\n margin: inherit;\n padding: 16px;\n gap: 16px;\n width: max-content;\n min-width: 400px;\n }\n\n .alert:not(.alert--has-icon) .alert__icon,\n .alert:not(.alert--closable) .alert__close-button {\n display: none;\n }\n\n .alert__prefix-icon-container {\n background-color: red;\n border-radius: 4px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 10px;\n }\n\n .alert--success {\n border: 1px solid var(--nile-toast-color-border-success);\n background: var(--nile-toast-color-background-success);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--success .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-success);\n }\n\n .alert--info {\n border: 1px solid var(--nile-toast-color-border-info);\n background: var(--nile-toast-color-background-info);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--info .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-info);\n }\n\n .alert--warning {\n border: 1px solid var(--nile-toast-color-border-warning);\n background: var(--nile-toast-color-background-warning);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--warning .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-warning);\n }\n\n .alert--error {\n border: 1px solid var(--nile-toast-color-border-error);\n background: var(--nile-toast-color-background-error);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--error .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-error);\n }\n\n .alert--gray {\n border: 1px solid var(--nile-toast-color-border-gray);\n background: var(--nile-toast-color-background-gray);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--gray .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-gray);\n }\n\n .alert--black {\n border: 1px solid var(--nile-toast-color-border-black);\n background: var(--nile-toast-color-background-black);\n box-shadow: var(--nile-toast-color-box-black);\n }\n\n .alert--black .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-black);\n }\n\n .alert__message {\n flex: 1 1 auto;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n line-height: 20px;\n color: black;\n gap:3px;\n }\n\n .alert__message--title {\n font-weight: 600;\n color:#344054;\n }\n\n .alert__message--content {\n font-weight:400;\n color:#475467;\n }\n\n .alert__message--content-only {\n margin-top: 3px;\n }\n\n .alert__close-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .alert__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 4px;\n }\n\n .alert__tag {\n height: 24px;\n display: flex;\n border-radius: 4px;\n border: 1px solid #e5e9eb;\n background: var(--nile-colors-white-base);\n }\n\n .alert__tag-content {\n border-left: 1px solid #e5e9eb;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 6px;\n\n color: var(--nile-colors-dark-900);\n font-family: var\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .alert__tag-image {\n height: 24px;\n width: 24px;\n border-radius: 4px 0 0 4px;\n }\n\n .alert__prefix-img {\n height: 24px;\n border-radius: 4px;\n }\n\n .alert--no-content{\n align-items:center ;\n }\n\n [hidden] {\n display: none;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LxB,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-element';\n\n/\n Toast CSS\n /\nexport const styles = css`\n :host {\n display: contents;\n\n / For better DX, we'll reset the margin here so the base part can inherit it */\n margin: 0;\n }\n\n .alert {\n max-width: 100%;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: flex-start;\n border: solid 2px 2px;\n border-radius: 8px;\n margin: inherit;\n padding: 16px;\n gap: 16px;\n width: max-content;\n min-width: 400px;\n }\n\n .alert:not(.alert--has-icon) .alert__icon,\n .alert:not(.alert--closable) .alert__close-button {\n display: none;\n }\n\n .alert__prefix-icon-container {\n background-color: red;\n border-radius: 4px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 10px;\n }\n\n .alert--success {\n border: 1px solid var(--nile-toast-color-border-success);\n background: var(--nile-toast-color-background-success);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--success .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-success);\n }\n\n .alert--info {\n border: 1px solid var(--nile-toast-color-border-info);\n background: var(--nile-toast-color-background-info);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--info .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-info);\n }\n\n .alert--warning {\n border: 1px solid var(--nile-toast-color-border-warning);\n background: var(--nile-toast-color-background-warning);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--warning .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-warning);\n }\n\n .alert--error {\n border: 1px solid var(--nile-toast-color-border-error);\n background: var(--nile-toast-color-background-error);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--error .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-error);\n }\n\n .alert--gray {\n border: 1px solid var(--nile-toast-color-border-gray);\n background: var(--nile-toast-color-background-gray);\n box-shadow: var(--nile-toast-color-box-shadow);\n }\n\n .alert--gray .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-gray);\n }\n\n .alert--black {\n border: 1px solid var(--nile-toast-color-border-black);\n background: var(--nile-toast-color-background-black);\n box-shadow: var(--nile-toast-color-box-black);\n }\n\n .alert--black .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-black);\n }\n\n .alert__message {\n flex: 1 1 auto;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n line-height: 20px;\n color: black;\n gap:3px;\n }\n\n .alert__message--title {\n font-weight: 600;\n color:#344054;\n }\n\n .alert__message--content {\n font-weight:400;\n color:#475467;\n }\n\n .alert__message--content-only {\n margin-top: 3px;\n }\n\n .alert__close-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .alert__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 4px;\n }\n\n .alert__tag {\n height: 24px;\n display: flex;\n border-radius: 4px;\n border: 1px solid #e5e9eb;\n background: var(--nile-colors-white-base);\n }\n\n .alert__tag-content {\n border-left: 1px solid #e5e9eb;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 6px;\n\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: 400;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .alert__tag-image {\n height: 24px;\n width: 24px;\n border-radius: 4px 0 0 4px;\n }\n\n .alert__prefix-img {\n height: 24px;\n border-radius: 4px;\n }\n\n .alert--no-content{\n align-items:center ;\n }\n\n [hidden] {\n display: none;\n }\n`;\n\nexport default [styles];\n"]}

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

@@ -18,14 +18,14 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 16px;
+    padding: 0 48px;
     box-sizing: border-box;
     min-height: 64px;
-	line-height: var(--nile-toolbar-line-height);
-	font-weight: var(--nile-toolbar-font-weight);
+    line-height: var(--nile-toolbar-line-height);
+    font-weight: var(--nile-toolbar-font-weight);
     font-family: var(--nile-font-family-sans-serif);
-	font-size: var(--nile-toolbar-font-size);
-    background-color: var(--nile-toolbar-background-color, #f5f5f5);
+    font-size: var(--nile-toolbar-font-size);
+    background-color: var(--nile-toolbar-background-color, #FFFFFF);
     color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
   }
 `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-toolbar.css.js","sourceRoot":"","sources":["../../../src/nile-toolbar/nile-toolbar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,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-element';\n\n/\n Toolbar CSS\n */\nexport const styles = css`\n :host {\n display: block;\n width: 100%;\n }\n\n .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 ~~16px~~;\n box-sizing: border-box;\n min-height: 64px;\n~~\tline~~-height: var(--nile-toolbar-line-height);\n~~\tfont~~-weight: var(--nile-toolbar-font-weight);\n font-family: var(--nile-font-family-sans-serif);\n~~\tfont~~-size: var(--nile-toolbar-font-size);\n background-color: var(--nile-toolbar-background-color, #~~f5f5f5~~);\n color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-toolbar.css.js","sourceRoot":"","sources":["../../../src/nile-toolbar/nile-toolbar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,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-element';\n\n/\n Toolbar CSS\n */\nexport const styles = css`\n :host {\n display: block;\n width: 100%;\n }\n\n .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 48px;\n box-sizing: border-box;\n min-height: 64px;\n line-height: var(--nile-toolbar-line-height);\n font-weight: var(--nile-toolbar-font-weight);\n font-family: var(--nile-font-family-sans-serif);\n font-size: var(--nile-toolbar-font-size);\n background-color: var(--nile-toolbar-background-color, #FFFFFF);\n color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));\n }\n`;\n\nexport default [styles];\n"]}