@aquera/nile-elements 1.8.3 → 1.8.4
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/README.md +3 -0
- package/dist/index.js +12 -12
- package/dist/nile-tree/nile-tree.css.cjs.js +1 -1
- package/dist/nile-tree/nile-tree.css.cjs.js.map +1 -1
- package/dist/nile-tree/nile-tree.css.esm.js +1 -1
- package/dist/nile-tree-item/nile-tree-item.css.cjs.js +1 -1
- package/dist/nile-tree-item/nile-tree-item.css.cjs.js.map +1 -1
- package/dist/nile-tree-item/nile-tree-item.css.esm.js +10 -10
- package/dist/src/nile-tree/nile-tree.css.js +1 -1
- package/dist/src/nile-tree/nile-tree.css.js.map +1 -1
- package/dist/src/nile-tree-item/nile-tree-item.css.js +10 -10
- package/dist/src/nile-tree-item/nile-tree-item.css.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-tree/nile-tree.css.ts +1 -1
- package/src/nile-tree-item/nile-tree-item.css.ts +10 -10
package/README.md
CHANGED
|
@@ -79,6 +79,9 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
#### Version 1.8.4 (June 04, 2026)
|
|
83
|
+
- Nile Tree: Added Nxt Theme for Tree(UIF-1252)
|
|
84
|
+
|
|
82
85
|
#### Version 1.8.3 (June 04, 2026)
|
|
83
86
|
- Nile Detail: Added Preview Feature for Nile Detail(UIF-1254)
|
|
84
87
|
|
package/dist/index.js
CHANGED
|
@@ -13414,7 +13414,7 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
|
|
|
13414
13414
|
--indent-guide-offset: 0;
|
|
13415
13415
|
--indent-guide-style: solid;
|
|
13416
13416
|
--indent-guide-width: 0;
|
|
13417
|
-
--indent-size: var(--nile-spacing-2xl);
|
|
13417
|
+
--indent-size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
|
|
13418
13418
|
|
|
13419
13419
|
display: block;
|
|
13420
13420
|
isolation: isolate;
|
|
@@ -13459,7 +13459,7 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
|
|
|
13459
13459
|
}
|
|
13460
13460
|
|
|
13461
13461
|
slot:not([name])::slotted(nile-icon) {
|
|
13462
|
-
margin-inline-end: var(--nile-spacing-md);
|
|
13462
|
+
margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
13463
13463
|
}
|
|
13464
13464
|
|
|
13465
13465
|
.tree-item {
|
|
@@ -13467,7 +13467,7 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
|
|
|
13467
13467
|
display: flex;
|
|
13468
13468
|
align-items: stretch;
|
|
13469
13469
|
flex-direction: column;
|
|
13470
|
-
color: var(--nile-colors-dark-900);
|
|
13470
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
|
|
13471
13471
|
cursor: pointer;
|
|
13472
13472
|
user-select: none;
|
|
13473
13473
|
}
|
|
@@ -13479,9 +13479,9 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
|
|
|
13479
13479
|
.tree-item__expand-button,
|
|
13480
13480
|
.tree-item__checkbox,
|
|
13481
13481
|
.tree-item__label {
|
|
13482
|
-
font-family: var(--nile-font-family-serif);
|
|
13483
|
-
font-size: var(--nile-type-scale-4);
|
|
13484
|
-
font-weight: var(--nile-font-weight-regular);
|
|
13482
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
13483
|
+
font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
|
|
13484
|
+
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
|
|
13485
13485
|
}
|
|
13486
13486
|
|
|
13487
13487
|
.tree-item__checkbox::part(base) {
|
|
@@ -13500,8 +13500,8 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
|
|
|
13500
13500
|
align-items: center;
|
|
13501
13501
|
justify-content: center;
|
|
13502
13502
|
box-sizing: content-box;
|
|
13503
|
-
color: var(--nile-colors-neutral-500);
|
|
13504
|
-
padding: var(--nile-spacing-md);
|
|
13503
|
+
color: var(--nile-colors-neutral-500, var(--ng-colors-fg-tertiary-600));
|
|
13504
|
+
padding: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
13505
13505
|
width: 1rem;
|
|
13506
13506
|
height: 1rem;
|
|
13507
13507
|
flex-shrink: 0;
|
|
@@ -13552,12 +13552,12 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
|
|
|
13552
13552
|
}
|
|
13553
13553
|
|
|
13554
13554
|
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
|
|
13555
|
-
background-color: var(--nile-colors-primary-100);
|
|
13556
|
-
border-inline-start-color: var(--nile-colors-primary-700);
|
|
13555
|
+
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
|
|
13556
|
+
border-inline-start-color: var(--nile-colors-primary-700, var(--ng-colors-border-brand));
|
|
13557
13557
|
}
|
|
13558
13558
|
|
|
13559
13559
|
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
|
|
13560
|
-
color: var(--nile-colors-dark-900);
|
|
13560
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-fg-tertiary-600));
|
|
13561
13561
|
}
|
|
13562
13562
|
|
|
13563
13563
|
.tree-item__label {
|
|
@@ -17840,7 +17840,7 @@ nile-rich-text-editor[disabled] .editor a {
|
|
|
17840
17840
|
</span>
|
|
17841
17841
|
`:B}
|
|
17842
17842
|
</button>
|
|
17843
|
-
`}};e([ue({type:String,reflect:!0})],qS.prototype,"color",void 0),e([ue({type:Boolean,reflect:!0})],qS.prototype,"active",void 0),qS=e([ge("nile-color-swatch")],qS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.8.
|
|
17843
|
+
`}};e([ue({type:String,reflect:!0})],qS.prototype,"color",void 0),e([ue({type:Boolean,reflect:!0})],qS.prototype,"active",void 0),qS=e([ge("nile-color-swatch")],qS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.8.4"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const KS=r`
|
|
17844
17844
|
:host {
|
|
17845
17845
|
|
|
17846
17846
|
top: 0;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n /*\n * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n * stay consistent.\n */\n --indent-guide-color: var(--nile-colors-dark-200);\n --indent-guide-offset: 0;\n --indent-guide-style: solid;\n --indent-guide-width: 0;\n --indent-size: var(--nile-spacing-2xl);\n\n display: block;\n isolation: isolate;\n\n /*\n * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n * here removes the indentation for all the nodes on the first level.\n */\n font-size: 0;\n }\n"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n /*\n * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n * stay consistent.\n */\n --indent-guide-color: var(--nile-colors-dark-200);\n --indent-guide-offset: 0;\n --indent-guide-style: solid;\n --indent-guide-width: 0;\n --indent-size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n\n display: block;\n isolation: isolate;\n\n /*\n * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n * here removes the indentation for all the nodes on the first level.\n */\n font-size: 0;\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-tree.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tree.css.cjs.js","sources":["../../../src/nile-tree/nile-tree.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Tree CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n /*\n * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n * stay consistent.\n */\n --indent-guide-color: var(--nile-colors-dark-200);\n --indent-guide-offset: 0;\n --indent-guide-style: solid;\n --indent-guide-width: 0;\n --indent-size: var(--nile-spacing-2xl);\n\n display: block;\n isolation: isolate;\n\n /*\n * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n * here removes the indentation for all the nodes on the first level.\n */\n font-size: 0;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-tree.css.cjs.js","sources":["../../../src/nile-tree/nile-tree.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Tree CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n /*\n * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n * stay consistent.\n */\n --indent-guide-color: var(--nile-colors-dark-200);\n --indent-guide-offset: 0;\n --indent-guide-style: solid;\n --indent-guide-width: 0;\n --indent-size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n\n display: block;\n isolation: isolate;\n\n /*\n * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n * here removes the indentation for all the nodes on the first level.\n */\n font-size: 0;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -25,7 +25,7 @@ import{css as e}from"lit";const t=e`
|
|
|
25
25
|
--indent-guide-offset: 0;
|
|
26
26
|
--indent-guide-style: solid;
|
|
27
27
|
--indent-guide-width: 0;
|
|
28
|
-
--indent-size: var(--nile-spacing-2xl);
|
|
28
|
+
--indent-size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
|
|
29
29
|
|
|
30
30
|
display: block;
|
|
31
31
|
isolation: isolate;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n outline: 0;\n z-index: 0;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n slot:not([name])::slotted(nile-icon) {\n margin-inline-end: var(--nile-spacing-md);\n }\n\n .tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n user-select: none;\n }\n\n .tree-item__checkbox {\n pointer-events: none;\n }\n\n .tree-item__expand-button,\n .tree-item__checkbox,\n .tree-item__label {\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-4);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .tree-item__checkbox::part(base) {\n display: flex;\n align-items: center;\n }\n\n .tree-item__indentation {\n display: block;\n width: 1em;\n flex-shrink: 0;\n }\n\n .tree-item__expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n color: var(--nile-colors-neutral-500);\n padding: var(--nile-spacing-md);\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .tree-item__expand-button {\n transition: 250ms rotate ease;\n }\n\n .tree-item--expanded .tree-item__expand-button {\n rotate: 90deg;\n }\n\n .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n rotate: -90deg;\n }\n\n .tree-item--expanded slot[name='expand-icon'],\n .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n display: none;\n }\n\n .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n display: none;\n }\n\n .tree-item__expand-button--visible {\n cursor: pointer;\n }\n\n .tree-item__item {\n display: flex;\n align-items: center;\n border-inline-start: solid 3px transparent;\n }\n\n .tree-item--disabled .tree-item__item {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n\n :host(:focus-visible) .tree-item__item {\n outline: solid 3px var(--nile-colors-neutral-500);\n outline-offset: 1px;\n z-index: 2;\n }\n\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n background-color: var(--nile-colors-primary-100);\n border-inline-start-color: var(--nile-colors-primary-700);\n }\n\n :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n color: var(--nile-colors-dark-900);\n }\n\n .tree-item__label {\n display: flex;\n align-items: center;\n transition: 150ms color;\n }\n\n .tree-item__children {\n display: block;\n font-size: calc(1em + var(--indent-size, 1rem));\n }\n\n /* Indentation lines */\n .tree-item__children {\n position: relative;\n }\n\n .tree-item__children::before {\n content: '';\n position: absolute;\n top: var(--indent-guide-offset);\n bottom: var(--indent-guide-offset);\n left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n z-index: 1;\n }\n\n .tree-item--rtl .tree-item__children::before {\n left: auto;\n right: 1em;\n }\n\n @media (forced-colors: active) {\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n outline: dashed 1px SelectedItem;\n }\n }\n"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n outline: 0;\n z-index: 0;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n slot:not([name])::slotted(nile-icon) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n }\n\n .tree-item__checkbox {\n pointer-events: none;\n }\n\n .tree-item__expand-button,\n .tree-item__checkbox,\n .tree-item__label {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n .tree-item__checkbox::part(base) {\n display: flex;\n align-items: center;\n }\n\n .tree-item__indentation {\n display: block;\n width: 1em;\n flex-shrink: 0;\n }\n\n .tree-item__expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-tertiary-600));\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .tree-item__expand-button {\n transition: 250ms rotate ease;\n }\n\n .tree-item--expanded .tree-item__expand-button {\n rotate: 90deg;\n }\n\n .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n rotate: -90deg;\n }\n\n .tree-item--expanded slot[name='expand-icon'],\n .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n display: none;\n }\n\n .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n display: none;\n }\n\n .tree-item__expand-button--visible {\n cursor: pointer;\n }\n\n .tree-item__item {\n display: flex;\n align-items: center;\n border-inline-start: solid 3px transparent;\n }\n\n .tree-item--disabled .tree-item__item {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n\n :host(:focus-visible) .tree-item__item {\n outline: solid 3px var(--nile-colors-neutral-500);\n outline-offset: 1px;\n z-index: 2;\n }\n\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n border-inline-start-color: var(--nile-colors-primary-700, var(--ng-colors-border-brand));\n }\n\n :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n color: var(--nile-colors-dark-900, var(--ng-colors-fg-tertiary-600));\n }\n\n .tree-item__label {\n display: flex;\n align-items: center;\n transition: 150ms color;\n }\n\n .tree-item__children {\n display: block;\n font-size: calc(1em + var(--indent-size, 1rem));\n }\n\n /* Indentation lines */\n .tree-item__children {\n position: relative;\n }\n\n .tree-item__children::before {\n content: '';\n position: absolute;\n top: var(--indent-guide-offset);\n bottom: var(--indent-guide-offset);\n left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n z-index: 1;\n }\n\n .tree-item--rtl .tree-item__children::before {\n left: auto;\n right: 1em;\n }\n\n @media (forced-colors: active) {\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n outline: dashed 1px SelectedItem;\n }\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-tree-item.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tree-item.css.cjs.js","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n outline: 0;\n z-index: 0;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n slot:not([name])::slotted(nile-icon) {\n margin-inline-end: var(--nile-spacing-md);\n }\n\n .tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n user-select: none;\n }\n\n .tree-item__checkbox {\n pointer-events: none;\n }\n\n .tree-item__expand-button,\n .tree-item__checkbox,\n .tree-item__label {\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-4);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .tree-item__checkbox::part(base) {\n display: flex;\n align-items: center;\n }\n\n .tree-item__indentation {\n display: block;\n width: 1em;\n flex-shrink: 0;\n }\n\n .tree-item__expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n color: var(--nile-colors-neutral-500);\n padding: var(--nile-spacing-md);\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .tree-item__expand-button {\n transition: 250ms rotate ease;\n }\n\n .tree-item--expanded .tree-item__expand-button {\n rotate: 90deg;\n }\n\n .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n rotate: -90deg;\n }\n\n .tree-item--expanded slot[name='expand-icon'],\n .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n display: none;\n }\n\n .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n display: none;\n }\n\n .tree-item__expand-button--visible {\n cursor: pointer;\n }\n\n .tree-item__item {\n display: flex;\n align-items: center;\n border-inline-start: solid 3px transparent;\n }\n\n .tree-item--disabled .tree-item__item {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n\n :host(:focus-visible) .tree-item__item {\n outline: solid 3px var(--nile-colors-neutral-500);\n outline-offset: 1px;\n z-index: 2;\n }\n\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n background-color: var(--nile-colors-primary-100);\n border-inline-start-color: var(--nile-colors-primary-700);\n }\n\n :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n color: var(--nile-colors-dark-900);\n }\n\n .tree-item__label {\n display: flex;\n align-items: center;\n transition: 150ms color;\n }\n\n .tree-item__children {\n display: block;\n font-size: calc(1em + var(--indent-size, 1rem));\n }\n\n /* Indentation lines */\n .tree-item__children {\n position: relative;\n }\n\n .tree-item__children::before {\n content: '';\n position: absolute;\n top: var(--indent-guide-offset);\n bottom: var(--indent-guide-offset);\n left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n z-index: 1;\n }\n\n .tree-item--rtl .tree-item__children::before {\n left: auto;\n right: 1em;\n }\n\n @media (forced-colors: active) {\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n outline: dashed 1px SelectedItem;\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-tree-item.css.cjs.js","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n outline: 0;\n z-index: 0;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n slot:not([name])::slotted(nile-icon) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n }\n\n .tree-item__checkbox {\n pointer-events: none;\n }\n\n .tree-item__expand-button,\n .tree-item__checkbox,\n .tree-item__label {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n .tree-item__checkbox::part(base) {\n display: flex;\n align-items: center;\n }\n\n .tree-item__indentation {\n display: block;\n width: 1em;\n flex-shrink: 0;\n }\n\n .tree-item__expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-tertiary-600));\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .tree-item__expand-button {\n transition: 250ms rotate ease;\n }\n\n .tree-item--expanded .tree-item__expand-button {\n rotate: 90deg;\n }\n\n .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n rotate: -90deg;\n }\n\n .tree-item--expanded slot[name='expand-icon'],\n .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n display: none;\n }\n\n .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n display: none;\n }\n\n .tree-item__expand-button--visible {\n cursor: pointer;\n }\n\n .tree-item__item {\n display: flex;\n align-items: center;\n border-inline-start: solid 3px transparent;\n }\n\n .tree-item--disabled .tree-item__item {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n\n :host(:focus-visible) .tree-item__item {\n outline: solid 3px var(--nile-colors-neutral-500);\n outline-offset: 1px;\n z-index: 2;\n }\n\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n border-inline-start-color: var(--nile-colors-primary-700, var(--ng-colors-border-brand));\n }\n\n :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n color: var(--nile-colors-dark-900, var(--ng-colors-fg-tertiary-600));\n }\n\n .tree-item__label {\n display: flex;\n align-items: center;\n transition: 150ms color;\n }\n\n .tree-item__children {\n display: block;\n font-size: calc(1em + var(--indent-size, 1rem));\n }\n\n /* Indentation lines */\n .tree-item__children {\n position: relative;\n }\n\n .tree-item__children::before {\n content: '';\n position: absolute;\n top: var(--indent-guide-offset);\n bottom: var(--indent-guide-offset);\n left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n z-index: 1;\n }\n\n .tree-item--rtl .tree-item__children::before {\n left: auto;\n right: 1em;\n }\n\n @media (forced-colors: active) {\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n outline: dashed 1px SelectedItem;\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -27,7 +27,7 @@ import{css as e}from"lit";const t=e`
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
slot:not([name])::slotted(nile-icon) {
|
|
30
|
-
margin-inline-end: var(--nile-spacing-md);
|
|
30
|
+
margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.tree-item {
|
|
@@ -35,7 +35,7 @@ import{css as e}from"lit";const t=e`
|
|
|
35
35
|
display: flex;
|
|
36
36
|
align-items: stretch;
|
|
37
37
|
flex-direction: column;
|
|
38
|
-
color: var(--nile-colors-dark-900);
|
|
38
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
|
|
39
39
|
cursor: pointer;
|
|
40
40
|
user-select: none;
|
|
41
41
|
}
|
|
@@ -47,9 +47,9 @@ import{css as e}from"lit";const t=e`
|
|
|
47
47
|
.tree-item__expand-button,
|
|
48
48
|
.tree-item__checkbox,
|
|
49
49
|
.tree-item__label {
|
|
50
|
-
font-family: var(--nile-font-family-serif);
|
|
51
|
-
font-size: var(--nile-type-scale-4);
|
|
52
|
-
font-weight: var(--nile-font-weight-regular);
|
|
50
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
51
|
+
font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
|
|
52
|
+
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.tree-item__checkbox::part(base) {
|
|
@@ -68,8 +68,8 @@ import{css as e}from"lit";const t=e`
|
|
|
68
68
|
align-items: center;
|
|
69
69
|
justify-content: center;
|
|
70
70
|
box-sizing: content-box;
|
|
71
|
-
color: var(--nile-colors-neutral-500);
|
|
72
|
-
padding: var(--nile-spacing-md);
|
|
71
|
+
color: var(--nile-colors-neutral-500, var(--ng-colors-fg-tertiary-600));
|
|
72
|
+
padding: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
73
73
|
width: 1rem;
|
|
74
74
|
height: 1rem;
|
|
75
75
|
flex-shrink: 0;
|
|
@@ -120,12 +120,12 @@ import{css as e}from"lit";const t=e`
|
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
|
|
123
|
-
background-color: var(--nile-colors-primary-100);
|
|
124
|
-
border-inline-start-color: var(--nile-colors-primary-700);
|
|
123
|
+
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
|
|
124
|
+
border-inline-start-color: var(--nile-colors-primary-700, var(--ng-colors-border-brand));
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
|
|
128
|
-
color: var(--nile-colors-dark-900);
|
|
128
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-fg-tertiary-600));
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
.tree-item__label {
|
|
@@ -35,7 +35,7 @@ export const styles = css `
|
|
|
35
35
|
--indent-guide-offset: 0;
|
|
36
36
|
--indent-guide-style: solid;
|
|
37
37
|
--indent-guide-width: 0;
|
|
38
|
-
--indent-size: var(--nile-spacing-2xl);
|
|
38
|
+
--indent-size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
|
|
39
39
|
|
|
40
40
|
display: block;
|
|
41
41
|
isolation: isolate;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tree.css.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Tree CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n /*\n * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n * stay consistent.\n */\n --indent-guide-color: var(--nile-colors-dark-200);\n --indent-guide-offset: 0;\n --indent-guide-style: solid;\n --indent-guide-width: 0;\n --indent-size: var(--nile-spacing-2xl);\n\n display: block;\n isolation: isolate;\n\n /*\n * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n * here removes the indentation for all the nodes on the first level.\n */\n font-size: 0;\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-tree.css.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Tree CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n /*\n * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n * stay consistent.\n */\n --indent-guide-color: var(--nile-colors-dark-200);\n --indent-guide-offset: 0;\n --indent-guide-style: solid;\n --indent-guide-width: 0;\n --indent-size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n\n display: block;\n isolation: isolate;\n\n /*\n * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n * here removes the indentation for all the nodes on the first level.\n */\n font-size: 0;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -37,7 +37,7 @@ export const styles = css `
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
slot:not([name])::slotted(nile-icon) {
|
|
40
|
-
margin-inline-end: var(--nile-spacing-md);
|
|
40
|
+
margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.tree-item {
|
|
@@ -45,7 +45,7 @@ export const styles = css `
|
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: stretch;
|
|
47
47
|
flex-direction: column;
|
|
48
|
-
color: var(--nile-colors-dark-900);
|
|
48
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
|
|
49
49
|
cursor: pointer;
|
|
50
50
|
user-select: none;
|
|
51
51
|
}
|
|
@@ -57,9 +57,9 @@ export const styles = css `
|
|
|
57
57
|
.tree-item__expand-button,
|
|
58
58
|
.tree-item__checkbox,
|
|
59
59
|
.tree-item__label {
|
|
60
|
-
font-family: var(--nile-font-family-serif);
|
|
61
|
-
font-size: var(--nile-type-scale-4);
|
|
62
|
-
font-weight: var(--nile-font-weight-regular);
|
|
60
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
61
|
+
font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
|
|
62
|
+
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.tree-item__checkbox::part(base) {
|
|
@@ -78,8 +78,8 @@ export const styles = css `
|
|
|
78
78
|
align-items: center;
|
|
79
79
|
justify-content: center;
|
|
80
80
|
box-sizing: content-box;
|
|
81
|
-
color: var(--nile-colors-neutral-500);
|
|
82
|
-
padding: var(--nile-spacing-md);
|
|
81
|
+
color: var(--nile-colors-neutral-500, var(--ng-colors-fg-tertiary-600));
|
|
82
|
+
padding: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
83
83
|
width: 1rem;
|
|
84
84
|
height: 1rem;
|
|
85
85
|
flex-shrink: 0;
|
|
@@ -130,12 +130,12 @@ export const styles = css `
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
|
|
133
|
-
background-color: var(--nile-colors-primary-100);
|
|
134
|
-
border-inline-start-color: var(--nile-colors-primary-700);
|
|
133
|
+
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
|
|
134
|
+
border-inline-start-color: var(--nile-colors-primary-700, var(--ng-colors-border-brand));
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
|
|
138
|
-
color: var(--nile-colors-dark-900);
|
|
138
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-fg-tertiary-600));
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.tree-item__label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n outline: 0;\n z-index: 0;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n slot:not([name])::slotted(nile-icon) {\n margin-inline-end: var(--nile-spacing-md);\n }\n\n .tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n user-select: none;\n }\n\n .tree-item__checkbox {\n pointer-events: none;\n }\n\n .tree-item__expand-button,\n .tree-item__checkbox,\n .tree-item__label {\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-4);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .tree-item__checkbox::part(base) {\n display: flex;\n align-items: center;\n }\n\n .tree-item__indentation {\n display: block;\n width: 1em;\n flex-shrink: 0;\n }\n\n .tree-item__expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n color: var(--nile-colors-neutral-500);\n padding: var(--nile-spacing-md);\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .tree-item__expand-button {\n transition: 250ms rotate ease;\n }\n\n .tree-item--expanded .tree-item__expand-button {\n rotate: 90deg;\n }\n\n .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n rotate: -90deg;\n }\n\n .tree-item--expanded slot[name='expand-icon'],\n .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n display: none;\n }\n\n .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n display: none;\n }\n\n .tree-item__expand-button--visible {\n cursor: pointer;\n }\n\n .tree-item__item {\n display: flex;\n align-items: center;\n border-inline-start: solid 3px transparent;\n }\n\n .tree-item--disabled .tree-item__item {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n\n :host(:focus-visible) .tree-item__item {\n outline: solid 3px var(--nile-colors-neutral-500);\n outline-offset: 1px;\n z-index: 2;\n }\n\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n background-color: var(--nile-colors-primary-100);\n border-inline-start-color: var(--nile-colors-primary-700);\n }\n\n :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n color: var(--nile-colors-dark-900);\n }\n\n .tree-item__label {\n display: flex;\n align-items: center;\n transition: 150ms color;\n }\n\n .tree-item__children {\n display: block;\n font-size: calc(1em + var(--indent-size, 1rem));\n }\n\n /* Indentation lines */\n .tree-item__children {\n position: relative;\n }\n\n .tree-item__children::before {\n content: '';\n position: absolute;\n top: var(--indent-guide-offset);\n bottom: var(--indent-guide-offset);\n left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n z-index: 1;\n }\n\n .tree-item--rtl .tree-item__children::before {\n left: auto;\n right: 1em;\n }\n\n @media (forced-colors: active) {\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n outline: dashed 1px SelectedItem;\n }\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n outline: 0;\n z-index: 0;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n slot:not([name])::slotted(nile-icon) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n }\n\n .tree-item__checkbox {\n pointer-events: none;\n }\n\n .tree-item__expand-button,\n .tree-item__checkbox,\n .tree-item__label {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n .tree-item__checkbox::part(base) {\n display: flex;\n align-items: center;\n }\n\n .tree-item__indentation {\n display: block;\n width: 1em;\n flex-shrink: 0;\n }\n\n .tree-item__expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-tertiary-600));\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .tree-item__expand-button {\n transition: 250ms rotate ease;\n }\n\n .tree-item--expanded .tree-item__expand-button {\n rotate: 90deg;\n }\n\n .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n rotate: -90deg;\n }\n\n .tree-item--expanded slot[name='expand-icon'],\n .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n display: none;\n }\n\n .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n display: none;\n }\n\n .tree-item__expand-button--visible {\n cursor: pointer;\n }\n\n .tree-item__item {\n display: flex;\n align-items: center;\n border-inline-start: solid 3px transparent;\n }\n\n .tree-item--disabled .tree-item__item {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n\n :host(:focus-visible) .tree-item__item {\n outline: solid 3px var(--nile-colors-neutral-500);\n outline-offset: 1px;\n z-index: 2;\n }\n\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n border-inline-start-color: var(--nile-colors-primary-700, var(--ng-colors-border-brand));\n }\n\n :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n color: var(--nile-colors-dark-900, var(--ng-colors-fg-tertiary-600));\n }\n\n .tree-item__label {\n display: flex;\n align-items: center;\n transition: 150ms color;\n }\n\n .tree-item__children {\n display: block;\n font-size: calc(1em + var(--indent-size, 1rem));\n }\n\n /* Indentation lines */\n .tree-item__children {\n position: relative;\n }\n\n .tree-item__children::before {\n content: '';\n position: absolute;\n top: var(--indent-guide-offset);\n bottom: var(--indent-guide-offset);\n left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n z-index: 1;\n }\n\n .tree-item--rtl .tree-item__children::before {\n left: auto;\n right: 1em;\n }\n\n @media (forced-colors: active) {\n :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n outline: dashed 1px SelectedItem;\n }\n }\n`;\n\nexport default [styles];\n"]}
|
package/dist/src/version.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Version utility - placeholders will be replaced during build
|
|
2
|
-
export const NILE_ELEMENTS_VERSION = '1.8.
|
|
2
|
+
export const NILE_ELEMENTS_VERSION = '1.8.4';
|
|
3
3
|
export const NILE_VERSION = '1.2.6';
|
|
4
4
|
// Set global versions for runtime access
|
|
5
5
|
if (typeof window !== 'undefined') {
|
package/dist/src/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.8.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.8.4';\nexport const NILE_VERSION = '1.2.6';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
|