@aquera/nile-elements 0.0.53 → 0.0.54
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.
- package/demo/variables.css +5 -0
- package/demo/variables_v2.css +5 -0
- package/dist/index.iife.js +193 -176
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +2 -0
- package/dist/nile-table-body/nile-table-body.css.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.css.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.css.esm.js +10 -0
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.esm.js +3 -0
- package/dist/nile-table-cell-item/nile-table-cell-item.esm.js +2 -2
- package/dist/nile-table-header-item/index.cjs.js +1 -1
- package/dist/nile-table-header-item/index.esm.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.esm.js +3 -8
- package/dist/nile-table-row/nile-table-row.cjs.js +1 -1
- package/dist/nile-table-row/nile-table-row.cjs.js.map +1 -1
- package/dist/nile-table-row/nile-table-row.css.cjs.js +1 -1
- package/dist/nile-table-row/nile-table-row.css.cjs.js.map +1 -1
- package/dist/nile-table-row/nile-table-row.css.esm.js +7 -2
- package/dist/nile-table-row/nile-table-row.esm.js +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.esm.js +2 -0
- package/dist/src/nile-input/nile-input.css.js +2 -0
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-table-body/nile-table-body.css.js +10 -0
- package/dist/src/nile-table-body/nile-table-body.css.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js +3 -0
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.d.ts +4 -0
- package/dist/src/nile-table-header-item/nile-table-header-item.js +17 -7
- package/dist/src/nile-table-header-item/nile-table-header-item.js.map +1 -1
- package/dist/src/nile-table-row/nile-table-row.css.js +5 -0
- package/dist/src/nile-table-row/nile-table-row.css.js.map +1 -1
- package/dist/src/nile-table-row/nile-table-row.js +1 -1
- package/dist/src/nile-table-row/nile-table-row.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.css.js +2 -0
- package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-input/nile-input.css.ts +2 -0
- package/src/nile-table-body/nile-table-body.css.ts +10 -0
- package/src/nile-table-cell-item/nile-table-cell-item.css.ts +3 -0
- package/src/nile-table-cell-item/nile-table-cell-item.ts +1 -1
- package/src/nile-table-header-item/nile-table-header-item.ts +13 -6
- package/src/nile-table-row/nile-table-row.css.ts +5 -0
- package/src/nile-table-row/nile-table-row.ts +1 -1
- package/src/nile-textarea/nile-textarea.css.ts +2 -0
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkfxB,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: 12px;\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: 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: #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); /**for v2 */\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: #005ea6;\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: hsl(240 5.2% 33.9%);\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--destructive:focus {\n border: 1px solid #fda29b;\n /* Focus rings/ring-error-shadow-xs */\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: 14px;\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: #7f7f7f;\n color: #667085; /**for v2 */\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n font-size: 14px;\n line-height: 14px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\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; /**for v2 */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\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: 38px;\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 }\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 }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAofxB,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: 12px;\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: 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: #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); /**for v2 */\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: #005ea6;\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: hsl(240 5.2% 33.9%);\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--destructive:focus {\n border: 1px solid #fda29b;\n /* Focus rings/ring-error-shadow-xs */\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: 14px;\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: #7f7f7f;\n color: #667085; /**for v2 */\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n font-size: 14px;\n line-height: 14px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\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; /**for v2 */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\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: 38px;\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-wrap: 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"]}
|
|
@@ -11,6 +11,8 @@ import { css } from 'lit-element';
|
|
|
11
11
|
export const styles = css `
|
|
12
12
|
:host {
|
|
13
13
|
box-sizing: border-box;
|
|
14
|
+
--nile-table-background--odd: var(--nile-table-body-row-odd-background-color);
|
|
15
|
+
--nile-table-background--even: var(--nile-table-body-row-even-background-color);
|
|
14
16
|
}
|
|
15
17
|
.base {
|
|
16
18
|
width: max-content;
|
|
@@ -26,6 +28,14 @@ export const styles = css `
|
|
|
26
28
|
display: table;
|
|
27
29
|
border-collapse: collapse;
|
|
28
30
|
}
|
|
31
|
+
|
|
32
|
+
slot::slotted(nile-table-row:nth-child(odd)) {
|
|
33
|
+
border-bottom: 1px solid var(--nile-table-row-border-color);
|
|
34
|
+
background: var(--nile-table-background--odd);
|
|
35
|
+
}
|
|
36
|
+
slot::slotted(nile-table-row:nth-child(even)) {
|
|
37
|
+
background: var(--nile-table-background--even);
|
|
38
|
+
}
|
|
29
39
|
`;
|
|
30
40
|
export default [styles];
|
|
31
41
|
//# sourceMappingURL=nile-table-body.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * TableBody CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-table-background--odd: var(--nile-table-body-row-odd-background-color);\n --nile-table-background--even: var(--nile-table-body-row-even-background-color);\n }\n .base {\n width: max-content;\n background-color: var(--nile-colors-white-base);\n }\n\n .table__header {\n display: flex;\n box-sizing: border-box;\n }\n\n .nile__table__body {\n display: table;\n border-collapse: collapse;\n }\n\n slot::slotted(nile-table-row:nth-child(odd)) {\n border-bottom: 1px solid var(--nile-table-row-border-color);\n background: var(--nile-table-background--odd);\n }\n slot::slotted(nile-table-row:nth-child(even)) {\n background: var(--nile-table-background--even);\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,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 * TableCellItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n display: table-cell;\n --min--height: 52px;\n --max--cell-width:auto;\n max-width: var(--max--cell-width);\n overflow: hidden;\n }\n\n .column {\n display: flex;\n flex-direction: row;\n padding: 0 var(--nile-type-scale-4);\n align-items: center;\n min-height: var(--min--height);\n height: auto;\n width: auto;\n\n /**font styling */\n color: var(--nile-colors-dark-900);\n\n font-feature-settings: 'clig' off, 'liga' off;\n /* New Paragraph/Regular */\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-type-scale-3); /* 100% */\n letter-spacing: 0.2px;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -38,7 +38,7 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
|
|
|
38
38
|
render() {
|
|
39
39
|
return html `
|
|
40
40
|
${this.hasSlotController.test('[default]')
|
|
41
|
-
? html ` <slot class="column"> </slot>`
|
|
41
|
+
? html ` <slot class="column" part="nile__table-cell"> </slot>`
|
|
42
42
|
: ''}
|
|
43
43
|
`;
|
|
44
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-cell-item.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAyB9E,gBAAgB;IAClB,CAAC;IAzBC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,
|
|
1
|
+
{"version":3,"file":"nile-table-cell-item.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAyB9E,gBAAgB;IAClB,CAAC;IAzBC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,wDAAwD;YAC9D,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CAGF,CAAA;AA3BY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2B7B;SA3BY,iBAAiB;AA6B9B,eAAe,iBAAiB,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 } from 'lit/decorators.js';\nimport { styles } from './nile-table-cell-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile table Cell Item component.\n *\n * @tag nile-table-cell-item\n *\n */\n@customElement('nile-table-cell-item')\nexport class NileTableCellItem extends NileElement {\n private readonly hasSlotController = new HasSlotController(this, '[default]');\n /**\n * The styles for TableCellItem\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 /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n return html`\n ${this.hasSlotController.test('[default]')\n ? html` <slot class=\"column\" part=\"nile__table-cell\"> </slot>`\n : ''}\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileTableCellItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-cell-item': NileTableCellItem;\n }\n}\n"]}
|
|
@@ -19,6 +19,10 @@ export declare class NileTableHeaderItem extends NileElement {
|
|
|
19
19
|
* @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
|
|
20
20
|
*/
|
|
21
21
|
static get styles(): CSSResultArray;
|
|
22
|
+
/** Enables the sort functionality. */
|
|
23
|
+
havesort: boolean;
|
|
24
|
+
/** Places the icon . */
|
|
25
|
+
iconName: string;
|
|
22
26
|
/**
|
|
23
27
|
* Render method
|
|
24
28
|
* @slot This is a slot test
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import { __decorate } from "tslib";
|
|
8
|
-
import { html, } from 'lit-element';
|
|
8
|
+
import { html, property, } from 'lit-element';
|
|
9
9
|
import { customElement } from 'lit/decorators.js';
|
|
10
10
|
import { styles } from './nile-table-header-item.css';
|
|
11
11
|
import NileElement from '../internal/nile-element';
|
|
@@ -20,6 +20,10 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
|
20
20
|
constructor() {
|
|
21
21
|
super(...arguments);
|
|
22
22
|
this.hasSlotController = new HasSlotController(this, '[default]');
|
|
23
|
+
/** Enables the sort functionality. */
|
|
24
|
+
this.havesort = false;
|
|
25
|
+
/** Places the icon . */
|
|
26
|
+
this.iconName = '';
|
|
23
27
|
/* #endregion */
|
|
24
28
|
}
|
|
25
29
|
/**
|
|
@@ -36,6 +40,9 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
|
36
40
|
* @slot This is a slot test
|
|
37
41
|
*/
|
|
38
42
|
handleClick(e) {
|
|
43
|
+
if (!this.havesort) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
39
46
|
let curr_sort_string = e.target?.parentElement?.children[0]?.assignedNodes()[0];
|
|
40
47
|
this.emit('nile-click-sort', { value: curr_sort_string });
|
|
41
48
|
}
|
|
@@ -43,16 +50,19 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
|
43
50
|
return html ` ${this.hasSlotController.test('[default]')
|
|
44
51
|
? html ` <div class="headers">
|
|
45
52
|
<slot @click=${this.handleClick}> </slot>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
size="16"
|
|
50
|
-
@click=${this.handleClick}
|
|
51
|
-
></nile-icon>
|
|
53
|
+
${this.iconName
|
|
54
|
+
? html ` <nile-icon name="${this.iconName}" size="16" @click=${this.handleClick}></nile-icon>`
|
|
55
|
+
: html ``}
|
|
52
56
|
</div>`
|
|
53
57
|
: html ``}`;
|
|
54
58
|
}
|
|
55
59
|
};
|
|
60
|
+
__decorate([
|
|
61
|
+
property({ type: Boolean, reflect: true })
|
|
62
|
+
], NileTableHeaderItem.prototype, "havesort", void 0);
|
|
63
|
+
__decorate([
|
|
64
|
+
property({ type: String, reflect: true, attribute: 'icon-name' })
|
|
65
|
+
], NileTableHeaderItem.prototype, "iconName", void 0);
|
|
56
66
|
NileTableHeaderItem = __decorate([
|
|
57
67
|
customElement('nile-table-header-item')
|
|
58
68
|
], NileTableHeaderItem);
|
|
@@ -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,
|
|
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,MAAM,mBAAmB,CAAC;AAClD,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,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;QA6BL,gBAAgB;IAClB,CAAC;IA3CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IASD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,WAAW,CAAC,CAAM;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO;SACR;QACD,IAAI,gBAAgB,GAClB,CAAC,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAC5D,CAAC;IACM,MAAM;QACX,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA;yBACa,IAAI,CAAC,WAAW;YAC7B,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,sBAAsB,IAAI,CAAC,WAAW,eAAe;gBAC7F,CAAC,CAAC,IAAI,CAAA,EAAE;eACL;YACT,CAAC,CAAC,IAAI,CAAA,EAAE,EAAE,CAAC;IACf,CAAC;CAGF,CAAA;AAlC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAGM;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;qDAC7D;AAfM,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA6C/B;SA7CY,mBAAmB;AA+ChC,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 } 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 /** Places the icon . */\n @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n '';\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n private handleClick(e: any) {\n if (!this.havesort) {\n return;\n }\n let curr_sort_string =\n e.target?.parentElement?.children[0]?.assignedNodes()[0];\n this.emit('nile-click-sort', { value: curr_sort_string });\n }\n public render(): TemplateResult {\n return html` ${this.hasSlotController.test('[default]')\n ? html` <div class=\"headers\">\n <slot @click=${this.handleClick}> </slot>\n ${this.iconName\n ? html` <nile-icon name=\"${this.iconName}\" size=\"16\" @click=${this.handleClick}></nile-icon>`\n : html``}\n </div>`\n : html``}`;\n }\n\n /* #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-header-item': NileTableHeaderItem;\n }\n}\n"]}
|
|
@@ -12,6 +12,11 @@ export const styles = css `
|
|
|
12
12
|
:host {
|
|
13
13
|
display: table-row;
|
|
14
14
|
border-bottom: 1px solid #e4e2e4;
|
|
15
|
+
--nile-header-background:var(--nile-table-header-background-color);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
slot::slotted(nile-table-header-item) {
|
|
19
|
+
background-color: var(--nile-header-background);
|
|
15
20
|
}
|
|
16
21
|
`;
|
|
17
22
|
export default [styles];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,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 * TableRow CSS\n */\nexport const styles = css`\n :host {\n display: table-row;\n border-bottom: 1px solid #e4e2e4;\n --nile-header-background:var(--nile-table-header-background-color);\n }\n\n slot::slotted(nile-table-header-item) {\n background-color: var(--nile-header-background);\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-row.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAS,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;;;OAGG;IAEI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA,
|
|
1
|
+
{"version":3,"file":"nile-table-row.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAS,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;;;OAGG;IAEI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA,kCAAkC,CAAC;IAChD,CAAC;CAGF,CAAA;AAvBY,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAuBxB;SAvBY,YAAY;AAyBzB,eAAe,YAAY,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, query } from 'lit/decorators.js';\nimport { styles } from './nile-table-row.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n *nile-table-row component.\n *\n * @tag nile-table-row\n *\n */\n@customElement('nile-table-row')\nexport class NileTableRow extends NileElement {\n /**\n * The styles for TableRow\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n return html` <slot part=\"nile-row\"></slot> `;\n }\n\n /* #endregion */\n}\n\nexport default NileTableRow;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-row': NileTableRow;\n }\n}\n"]}
|
|
@@ -214,6 +214,7 @@ export const styles = css `
|
|
|
214
214
|
font-size: 12px;
|
|
215
215
|
max-height: 300px;
|
|
216
216
|
overflow-y: scroll;
|
|
217
|
+
line-height: 16px;
|
|
217
218
|
}
|
|
218
219
|
|
|
219
220
|
.input__remove-non-printable {
|
|
@@ -221,6 +222,7 @@ export const styles = css `
|
|
|
221
222
|
margin-left: 10px;
|
|
222
223
|
font-size: 14px;
|
|
223
224
|
color: var(--nile-colors-dark-900);
|
|
225
|
+
cursor: pointer;
|
|
224
226
|
}
|
|
225
227
|
|
|
226
228
|
.input__srtiked-text-container {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-textarea.css.js","sourceRoot":"","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-textarea.css.js","sourceRoot":"","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOxB,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 * TextArea CSS\n */\nexport const styles = css`\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 margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight);\n line-height: var(--nile-textarea-label-line-height);\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\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: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\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 /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n min-height: 12px;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-textarea-standard-border-color);\n box-shadow:var(--nile-textarea-standard-box-shadow);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-hover-border-color);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-focused-border-color);\n box-shadow:var(--nile-textarea-standard-focused-box-shadow);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(--nile-textarea-standard-disabled-border-color);\n background: var(--nile-textarea-standard-disabled-background-color);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow:var(--nile-textarea-standard-disabled-box-shadow);\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(--nile-colors-neutral-500);\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(--nile-colors-neutral-500);\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(--nile-colors-dark-500);\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding:var(--nile-textarea-padding);\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n min-height: 12px;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n min-height: 12px;\n }\n\n .textarea--resize-auto .textarea__control {\n resize: none;\n overflow-y: hidden;\n min-height: 12px;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .textarea--standard.textarea--destructive {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .textarea--standard.textarea--destructive.textarea--focused {\n border-color: #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__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-wrap: 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"]}
|