@aquera/nile-elements 1.8.7 → 1.8.8
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 +33 -4
- package/dist/nile-side-bar/nile-side-bar.cjs.js +1 -1
- package/dist/nile-side-bar/nile-side-bar.cjs.js.map +1 -1
- package/dist/nile-side-bar/nile-side-bar.css.cjs.js +1 -1
- package/dist/nile-side-bar/nile-side-bar.css.cjs.js.map +1 -1
- package/dist/nile-side-bar/nile-side-bar.css.esm.js +31 -2
- package/dist/nile-side-bar/nile-side-bar.esm.js +2 -2
- package/dist/nile-side-bar-expand/nile-side-bar-expand.cjs.js +1 -1
- package/dist/nile-side-bar-expand/nile-side-bar-expand.cjs.js.map +1 -1
- package/dist/nile-side-bar-expand/nile-side-bar-expand.esm.js +2 -2
- package/dist/src/nile-side-bar/nile-side-bar.css.js +29 -0
- package/dist/src/nile-side-bar/nile-side-bar.css.js.map +1 -1
- package/dist/src/nile-side-bar/nile-side-bar.d.ts +16 -0
- package/dist/src/nile-side-bar/nile-side-bar.js +30 -0
- package/dist/src/nile-side-bar/nile-side-bar.js.map +1 -1
- package/dist/src/nile-side-bar/nile-side-bar.test.d.ts +2 -0
- package/dist/src/nile-side-bar/nile-side-bar.test.js +96 -0
- package/dist/src/nile-side-bar/nile-side-bar.test.js.map +1 -0
- package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js +4 -6
- package/dist/src/nile-side-bar-expand/nile-side-bar-expand.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-side-bar/nile-side-bar.css.ts +29 -0
- package/src/nile-side-bar/nile-side-bar.test.ts +109 -0
- package/src/nile-side-bar/nile-side-bar.ts +29 -0
- package/src/nile-side-bar-expand/nile-side-bar-expand.ts +7 -8
- package/vscode-html-custom-data.json +10 -1
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.8 (June 12, 2026)
|
|
83
|
+
- Nile Sidebar: Added Overlay Variant (UIF-1266)
|
|
84
|
+
|
|
82
85
|
#### Version 1.8.7 (June 11, 2026)
|
|
83
86
|
- Nile Select: Fixed the multi-select checkboxes and show selected filter issue in NxtGen (UIF-1262)
|
|
84
87
|
- Nile Virtual Select: Fixed the multi-select checkboxes issue in NxtGen (UIF-1262)
|
package/dist/index.js
CHANGED
|
@@ -17885,7 +17885,7 @@ nile-rich-text-editor[disabled] .editor a {
|
|
|
17885
17885
|
</span>
|
|
17886
17886
|
`:B}
|
|
17887
17887
|
</button>
|
|
17888
|
-
`}};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.
|
|
17888
|
+
`}};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.8"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const KS=r`
|
|
17889
17889
|
:host {
|
|
17890
17890
|
|
|
17891
17891
|
top: 0;
|
|
@@ -17920,6 +17920,35 @@ nile-rich-text-editor[disabled] .editor a {
|
|
|
17920
17920
|
transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
|
|
17921
17921
|
}
|
|
17922
17922
|
|
|
17923
|
+
/*
|
|
17924
|
+
* Overlay mode: lift the sidebar out of normal flow so expanding it floats
|
|
17925
|
+
* on top of adjacent content instead of pushing siblings. Anchors to the
|
|
17926
|
+
* nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
|
|
17927
|
+
* it to the viewport instead.
|
|
17928
|
+
*/
|
|
17929
|
+
:host([overlay]) {
|
|
17930
|
+
position: var(--sidebar-overlay-position, absolute);
|
|
17931
|
+
top: 0;
|
|
17932
|
+
bottom: 0;
|
|
17933
|
+
height: 100%;
|
|
17934
|
+
}
|
|
17935
|
+
|
|
17936
|
+
:host([overlay][position='left']) {
|
|
17937
|
+
left: 0;
|
|
17938
|
+
}
|
|
17939
|
+
|
|
17940
|
+
:host([overlay][position='right']) {
|
|
17941
|
+
right: 0;
|
|
17942
|
+
}
|
|
17943
|
+
|
|
17944
|
+
/* Elevate while expanded so it reads as floating above the page. */
|
|
17945
|
+
:host([overlay]:not([collapsed])) {
|
|
17946
|
+
box-shadow: var(
|
|
17947
|
+
--sidebar-overlay-shadow,
|
|
17948
|
+
0px 8px 24px 0px rgba(119, 125, 130, 0.25)
|
|
17949
|
+
);
|
|
17950
|
+
}
|
|
17951
|
+
|
|
17923
17952
|
:host {
|
|
17924
17953
|
scrollbar-width: thin;
|
|
17925
17954
|
scrollbar-color: #64748b transparent;
|
|
@@ -17966,13 +17995,13 @@ nile-rich-text-editor[disabled] .editor a {
|
|
|
17966
17995
|
|
|
17967
17996
|
|
|
17968
17997
|
|
|
17969
|
-
`;let ew=class extends Fe{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[KS]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}render(){return _`
|
|
17998
|
+
`;let ew=class extends Fe{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.overlay=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[KS]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}expand(){this.setCollapsed(!1)}collapse(){this.setCollapsed(!0)}toggle(e){this.setCollapsed(e??!this.collapsed)}setCollapsed(e){this.collapsed!==e&&(this.collapsed=e,this.emit("nile-toggle",{collapsed:e}))}render(){return _`
|
|
17970
17999
|
<slot name="header" part="header"></slot>
|
|
17971
18000
|
<div class="scroll-container" part="scroll-container">
|
|
17972
18001
|
<slot></slot>
|
|
17973
18002
|
</div>
|
|
17974
18003
|
<slot name="footer" part="footer"></slot>
|
|
17975
|
-
`}};e([ue({type:String,reflect:!0,attribute:!0})],ew.prototype,"position",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"collapsed",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"fullHeight",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"width",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"collapsedWidth",void 0),ew=e([ge("nile-side-bar")],ew);const tw=r`
|
|
18004
|
+
`}};e([ue({type:String,reflect:!0,attribute:!0})],ew.prototype,"position",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"collapsed",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"overlay",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"fullHeight",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"width",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"collapsedWidth",void 0),ew=e([ge("nile-side-bar")],ew);const tw=r`
|
|
17976
18005
|
:host {
|
|
17977
18006
|
display: flex;
|
|
17978
18007
|
align-items: center;
|
|
@@ -18080,7 +18109,7 @@ nile-rich-text-editor[disabled] .editor a {
|
|
|
18080
18109
|
transition: background-color 0.2s ease;
|
|
18081
18110
|
}
|
|
18082
18111
|
|
|
18083
|
-
`;let rw=class extends Fe{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[Mw]}connectedCallback(){super.connectedCallback();const e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"))}toggleSidebar(){const e=this.closest("nile-side-bar");
|
|
18112
|
+
`;let rw=class extends Fe{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[Mw]}connectedCallback(){super.connectedCallback();const e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"))}toggleSidebar(){const e=this.closest("nile-side-bar");e&&("function"==typeof e.toggle?e.toggle():e.toggleAttribute("collapsed",!e.hasAttribute("collapsed")),this.collapsed=e.hasAttribute("collapsed"))}render(){return _`
|
|
18084
18113
|
<button class="expand-btn" part="expand-btn" @click=${this.toggleSidebar}>
|
|
18085
18114
|
${this.collapsed?_`
|
|
18086
18115
|
<nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,r,
|
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,l,r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileSideBarCssCjsJs){l=_nileSideBarCssCjsJs.s;},function(_internalNileElementCjsJs){r=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_r){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.position="left",_this.collapsed=!1,_this.overlay=!1,_this.fullHeight=!1,_this.width=null,_this.collapsedWidth=null;return _this;}_inherits(o,_r);return _createClass(o,[{key:"updated",value:function updated(t){var _this2=this;_superPropGet(o,"updated",this,3)([t]),t.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach(function(t){return t.toggleAttribute("collapsed",_this2.collapsed);}),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width","".concat(this.width,"px")),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width","".concat(this.collapsedWidth,"px"));}},{key:"expand",value:function expand(){this.setCollapsed(!1);}},{key:"collapse",value:function collapse(){this.setCollapsed(!0);}},{key:"toggle",value:function toggle(t){this.setCollapsed(t!==null&&t!==void 0?t:!this.collapsed);}},{key:"setCollapsed",value:function setCollapsed(t){this.collapsed!==t&&(this.collapsed=t,this.emit("nile-toggle",{collapsed:t}));}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n "])));}}],[{key:"styles",get:function get(){return[l];}}]);}(r));t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"overlay",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),_export("N",o=t([s("nile-side-bar")],o));}};});
|
|
2
2
|
//# sourceMappingURL=nile-side-bar.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-side-bar.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n \n @property({ type: Number, attribute: true })width: number | null = null;\n\n \n @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n if (changedProps.has('collapsed')) {\n this.querySelectorAll<NileElement>(\n `\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n `\n ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n }\n \n\n if (changedProps.has('width') && this.width !== null) {\n this.style.setProperty('--sidebar-width', `${this.width}px`);\n }\n if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n }\n }\n\n public render(): TemplateResult {\n return html`\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n `;\n }\n \n}\n\nexport default NileSideBar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar': NileSideBar;\n }\n}\n"],"names":["NileSideBar","
|
|
1
|
+
{"version":3,"file":"nile-side-bar.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n * @attr overlay - When set, the sidebar is taken out of normal flow and floats\n * on top of adjacent content, so expanding it overlays the page instead of\n * pushing siblings sideways.\n *\n * @event nile-toggle - Fired after the collapsed state changes (via the built-in\n * expand button or the public expand()/collapse()/toggle() methods).\n * `event.detail.collapsed` is the new state.\n *\n * @method expand() - Expand the sidebar.\n * @method collapse() - Collapse the sidebar.\n * @method toggle(force?) - Toggle, or force a specific collapsed state.\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })overlay: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n \n @property({ type: Number, attribute: true })width: number | null = null;\n\n \n @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n if (changedProps.has('collapsed')) {\n this.querySelectorAll<NileElement>(\n `\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n `\n ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n }\n \n\n if (changedProps.has('width') && this.width !== null) {\n this.style.setProperty('--sidebar-width', `${this.width}px`);\n }\n if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n }\n }\n public expand(): void {\n this.setCollapsed(false);\n }\n public collapse(): void {\n this.setCollapsed(true);\n }\n\n public toggle(force?: boolean): void {\n this.setCollapsed(force ?? !this.collapsed);\n }\n\n private setCollapsed(value: boolean): void {\n if (this.collapsed === value) return;\n this.collapsed = value;\n this.emit('nile-toggle', { collapsed: value });\n }\n\n public render(): TemplateResult {\n return html`\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n `;\n }\n \n}\n\nexport default NileSideBar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar': NileSideBar;\n }\n}\n"],"names":["NileSideBar","o","constructor","this","position","collapsed","overlay","fullHeight","width","collapsedWidth","_this","_inherits","_r","_createClass","key","value","updated","changedProps","super","has","querySelectorAll","forEach","el","toggleAttribute","style","setProperty","concat","expand","setCollapsed","collapse","toggle","force","emit","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","Boolean","Number","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var o,_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){o=_lit.css;}],execute:function execute(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n \n top: 0;\n width: var(--nile-width-240px, var(--ng-spacing-296));\n display: flex;\n flex-direction: column;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n height: 100%;\n overflow: hidden; \n transition: width 0.25s ease, transform 0.25s ease;\n z-index: 1000;\n}\n\n \n:host([position='left']) {\n left: 0;\n border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n right: 0;\n border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/*\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n */\n:host([overlay]) {\n position: var(--sidebar-overlay-position, absolute);\n top: 0;\n bottom: 0;\n height: 100%;\n}\n\n:host([overlay][position='left']) {\n left: 0;\n}\n\n:host([overlay][position='right']) {\n right: 0;\n}\n\n/* Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n box-shadow: var(\n --sidebar-overlay-shadow,\n 0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n );\n}\n\n:host {\n scrollbar-width: thin;\n scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n width: 6px;\n}\n:host::-webkit-scrollbar-track {\n background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n background-color: #64748b;\n border-radius: 10px;\n}\n\n \n.scroll-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n flex-shrink: 0;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-side-bar.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-side-bar.css.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 * SideBar CSS\n */\nexport const styles = css`\n :host {\n \n top: 0;\n width: var(--nile-width-240px, var(--ng-spacing-296));\n display: flex;\n flex-direction: column;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n height: 100%;\n overflow: hidden; \n transition: width 0.25s ease, transform 0.25s ease;\n z-index: 1000;\n}\n\n \n:host([position='left']) {\n left: 0;\n border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n right: 0;\n border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n:host {\n scrollbar-width: thin;\n scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n width: 6px;\n}\n:host::-webkit-scrollbar-track {\n background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n background-color: #64748b;\n border-radius: 10px;\n}\n\n \n.scroll-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n flex-shrink: 0;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-side-bar.css.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 * SideBar CSS\n */\nexport const styles = css`\n :host {\n \n top: 0;\n width: var(--nile-width-240px, var(--ng-spacing-296));\n display: flex;\n flex-direction: column;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n height: 100%;\n overflow: hidden; \n transition: width 0.25s ease, transform 0.25s ease;\n z-index: 1000;\n}\n\n \n:host([position='left']) {\n left: 0;\n border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n right: 0;\n border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/*\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n */\n:host([overlay]) {\n position: var(--sidebar-overlay-position, absolute);\n top: 0;\n bottom: 0;\n height: 100%;\n}\n\n:host([overlay][position='left']) {\n left: 0;\n}\n\n:host([overlay][position='right']) {\n right: 0;\n}\n\n/* Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n box-shadow: var(\n --sidebar-overlay-shadow,\n 0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n );\n}\n\n:host {\n scrollbar-width: thin;\n scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n width: 6px;\n}\n:host::-webkit-scrollbar-track {\n background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n background-color: #64748b;\n border-radius: 10px;\n}\n\n \n.scroll-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n flex-shrink: 0;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as o}from"lit";const t=o`
|
|
2
2
|
:host {
|
|
3
3
|
|
|
4
4
|
top: 0;
|
|
@@ -33,6 +33,35 @@ import{css as r}from"lit";const o=r`
|
|
|
33
33
|
transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
/*
|
|
37
|
+
* Overlay mode: lift the sidebar out of normal flow so expanding it floats
|
|
38
|
+
* on top of adjacent content instead of pushing siblings. Anchors to the
|
|
39
|
+
* nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
|
|
40
|
+
* it to the viewport instead.
|
|
41
|
+
*/
|
|
42
|
+
:host([overlay]) {
|
|
43
|
+
position: var(--sidebar-overlay-position, absolute);
|
|
44
|
+
top: 0;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
height: 100%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host([overlay][position='left']) {
|
|
50
|
+
left: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host([overlay][position='right']) {
|
|
54
|
+
right: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Elevate while expanded so it reads as floating above the page. */
|
|
58
|
+
:host([overlay]:not([collapsed])) {
|
|
59
|
+
box-shadow: var(
|
|
60
|
+
--sidebar-overlay-shadow,
|
|
61
|
+
0px 8px 24px 0px rgba(119, 125, 130, 0.25)
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
36
65
|
:host {
|
|
37
66
|
scrollbar-width: thin;
|
|
38
67
|
scrollbar-color: #64748b transparent;
|
|
@@ -79,4 +108,4 @@ import{css as r}from"lit";const o=r`
|
|
|
79
108
|
|
|
80
109
|
|
|
81
110
|
|
|
82
|
-
`;export{
|
|
111
|
+
`;export{t as s};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as
|
|
1
|
+
import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as l}from"./nile-side-bar.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let o=class extends r{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.overlay=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[l]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}expand(){this.setCollapsed(!1)}collapse(){this.setCollapsed(!0)}toggle(e){this.setCollapsed(e??!this.collapsed)}setCollapsed(e){this.collapsed!==e&&(this.collapsed=e,this.emit("nile-toggle",{collapsed:e}))}render(){return t`
|
|
2
2
|
<slot name="header" part="header"></slot>
|
|
3
3
|
<div class="scroll-container" part="scroll-container">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|
|
6
6
|
<slot name="footer" part="footer"></slot>
|
|
7
|
-
`}};e([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),e([i({type:Number,attribute:!0})],o.prototype,"width",void 0),e([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),o=e([s("nile-side-bar")],o);export{o as N};
|
|
7
|
+
`}};e([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"overlay",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),e([i({type:Number,attribute:!0})],o.prototype,"width",void 0),e([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),o=e([s("nile-side-bar")],o);export{o as N};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar-expand.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var e,t,i,n,o,
|
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar-expand.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var e,t,i,n,o,l,_templateObject,_templateObject2,_templateObject3,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;n=_litDecoratorsJs.customElement;},function(_nileSideBarExpandCssCjsJs){o=_nileSideBarExpandCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",r=/*#__PURE__*/function(_l){function r(){var _this;_classCallCheck(this,r);_this=_callSuper(this,r,arguments),_this.collapsed=!1,_this.expandTooltipText="Expand Sidebar",_this.collapseTooltipText="Collapse Sidebar";return _this;}_inherits(r,_l);return _createClass(r,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(r,"connectedCallback",this,3)([]);var e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"));}},{key:"toggleSidebar",value:function toggleSidebar(){var e=this.closest("nile-side-bar");e&&("function"==typeof e.toggle?e.toggle():e.toggleAttribute("collapsed",!e.hasAttribute("collapsed")),this.collapsed=e.hasAttribute("collapsed"));}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <button class=\"expand-btn\" part=\"expand-btn\" @click=",">\n ","\n </button>\n "])),this.toggleSidebar,this.collapsed?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <nile-lite-tooltip placement=\"right\" hoist content=",">\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n "])),this.expandTooltipText):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-lite-tooltip placement=\"right\" hoist content=",">\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n "])),this.collapseTooltipText));}}],[{key:"styles",get:function get(){return[o];}}]);}(l));e([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"expandTooltipText",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"collapseTooltipText",void 0),_export("N",r=e([n("nile-side-bar-expand")],r));}};});
|
|
2
2
|
//# sourceMappingURL=nile-side-bar-expand.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-side-bar-expand.cjs.js","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n @property({ type: Boolean, reflect: true })\n collapsed: boolean = false;\n @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Sync with parent sidebar if it exists\n const sidebar = this.closest('nile-side-bar');\n if (sidebar) {\n this.collapsed = sidebar.hasAttribute('collapsed');\n }\n }\n\n private toggleSidebar() {\n const sidebar = this.closest('nile-side-bar');\n if (!sidebar) return;\n
|
|
1
|
+
{"version":3,"file":"nile-side-bar-expand.cjs.js","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n @property({ type: Boolean, reflect: true })\n collapsed: boolean = false;\n @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Sync with parent sidebar if it exists\n const sidebar = this.closest('nile-side-bar');\n if (sidebar) {\n this.collapsed = sidebar.hasAttribute('collapsed');\n }\n }\n\n private toggleSidebar() {\n const sidebar = this.closest('nile-side-bar') as\n | (HTMLElement & { toggle?: (force?: boolean) => void })\n | null;\n if (!sidebar) return;\n if (typeof sidebar.toggle === 'function') {\n sidebar.toggle();\n } else {\n sidebar.toggleAttribute('collapsed', !sidebar.hasAttribute('collapsed'));\n }\n this.collapsed = sidebar.hasAttribute('collapsed');\n }\n\n public render(): TemplateResult {\n return html`\n <button class=\"expand-btn\" part=\"expand-btn\" @click=${this.toggleSidebar}>\n ${this.collapsed\n ? html`\n <nile-lite-tooltip placement=\"right\" hoist content=${this.expandTooltipText}>\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n `\n : html`\n <nile-lite-tooltip placement=\"right\" hoist content=${this.collapseTooltipText}>\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n `}\n </button>\n `;\n }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar-expand': NileSideBarExpand;\n }\n}\n"],"names":["NileSideBarExpand","_l","r","constructor","this","collapsed","expandTooltipText","collapseTooltipText","_this","_inherits","_createClass","key","value","connectedCallback","super","sidebar","closest","hasAttribute","toggleSidebar","toggle","toggleAttribute","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","type","Boolean","reflect","prototype","String","attribute","_export","customElement"],"mappings":"o/HAYaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAELC,KAAAA,CAASC,SAAY,CAAA,CAAA,CAAA,CACmCD,KAAAA,CAAiBE,iBAAAA,CAAW,iBAC5BF,KAAAA,CAAmBG,mBAAAA,CAAW,kBA6CvF,QAAAC,KAAA,EA3CQC,SAAA,CAAAP,CAAA,CAAAD,EAAA,SAAAS,YAAA,CAAAR,CAAA,GAAAS,GAAA,qBAAAC,KAAA,CAIP,SAAAC,iBAAAA,CAAAA,CACEC,CAAAA,aAAAA,CAAAA,CAAAA,iCAEA,GAAMC,CAAAA,EAAUX,IAAKY,CAAAA,OAAAA,CAAQ,eACzBD,CAAAA,CAAAA,CAAAA,GACFX,KAAKC,SAAYU,CAAAA,CAAAA,CAAQE,YAAa,CAAA,WAAA,CAAA,CAEzC,EAEO,GAAAN,GAAA,iBAAAC,KAAA,UAAAM,aAAAA,CAAAA,CAAAA,CACN,GAAMH,CAAAA,CAAUX,CAAAA,IAAAA,CAAKY,QAAQ,eAGxBD,CAAAA,CAAAA,CAAAA,GACyB,UAAnBA,EAAAA,MAAAA,CAAAA,CAAAA,CAAQI,OACjBJ,CAAQI,CAAAA,MAAAA,CAAAA,CAAAA,CAERJ,EAAQK,eAAgB,CAAA,WAAA,CAAA,CAAcL,EAAQE,YAAa,CAAA,WAAA,CAAA,CAAA,CAE7Db,IAAKC,CAAAA,SAAAA,CAAYU,EAAQE,YAAa,CAAA,WAAA,CAAA,CACvC,EAEM,GAAAN,GAAA,UAAAC,KAAA,UAAAS,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gHAC6CpB,IAAKc,CAAAA,aAAAA,CACvDd,IAAAA,CAAKC,UACHiB,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,wdACmDpB,IAAKE,CAAAA,iBAAAA,EAI5DgB,CAAI,CAAAI,gBAAA,GAAAA,gBAAA,CAAAF,sBAAA,sdACmDpB,IAAKG,CAAAA,mBAAAA,GAMrE,CA9CDoB,KAAAA,GAAAA,UAAAA,GAAAA,CAIO,SAAAC,IAAA,CACL,CAAA,MAAO,CAACC,CACT,CAAA,EAED,MAVqCC,IAErCH,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KACTlC,CAAAmC,CAAAA,SAAAA,CAAA,gBAAA,EAC6BR,CAAAA,CAAAA,CAAAA,CAAA,CAAvDI,CAAS,CAAA,CAACC,KAAMI,MAAQF,CAAAA,OAAAA,CAAAA,CAAQ,EAAMG,SAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAoDrC,EAAAmC,SAAA,CAAA,mBAAA,CAAA,IAAA,IAC7CR,CAAA,CAAA,CAAvDI,EAAS,CAACC,IAAAA,CAAMI,OAAQF,OAAQ,CAAA,CAAA,CAAA,CAAMG,WAAU,CAAwDrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAmC,UAAA,qBAAA,CAAA,IAAA,EAAA,CAAA,CAAAG,OAAA,KAJ9FtC,EAAiB2B,CAAA,CAAA,CAD7BY,CAAc,CAAA,sBAAA,CAAA,CAAA,CACFvC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{s as o}from"./nile-side-bar-expand.css.esm.js";import{N as
|
|
1
|
+
import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{s as o}from"./nile-side-bar-expand.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let r=class extends l{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[o]}connectedCallback(){super.connectedCallback();const e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"))}toggleSidebar(){const e=this.closest("nile-side-bar");e&&("function"==typeof e.toggle?e.toggle():e.toggleAttribute("collapsed",!e.hasAttribute("collapsed")),this.collapsed=e.hasAttribute("collapsed"))}render(){return t`
|
|
2
2
|
<button class="expand-btn" part="expand-btn" @click=${this.toggleSidebar}>
|
|
3
3
|
${this.collapsed?t`
|
|
4
4
|
<nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
|
|
@@ -10,4 +10,4 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as
|
|
|
10
10
|
</nile-lite-tooltip>
|
|
11
11
|
`}
|
|
12
12
|
</button>
|
|
13
|
-
`}};e([i({type:Boolean,reflect:!0})],
|
|
13
|
+
`}};e([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"expandTooltipText",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"collapseTooltipText",void 0),r=e([n("nile-side-bar-expand")],r);export{r as N};
|
|
@@ -43,6 +43,35 @@ export const styles = css `
|
|
|
43
43
|
transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
/*
|
|
47
|
+
* Overlay mode: lift the sidebar out of normal flow so expanding it floats
|
|
48
|
+
* on top of adjacent content instead of pushing siblings. Anchors to the
|
|
49
|
+
* nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
|
|
50
|
+
* it to the viewport instead.
|
|
51
|
+
*/
|
|
52
|
+
:host([overlay]) {
|
|
53
|
+
position: var(--sidebar-overlay-position, absolute);
|
|
54
|
+
top: 0;
|
|
55
|
+
bottom: 0;
|
|
56
|
+
height: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:host([overlay][position='left']) {
|
|
60
|
+
left: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host([overlay][position='right']) {
|
|
64
|
+
right: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Elevate while expanded so it reads as floating above the page. */
|
|
68
|
+
:host([overlay]:not([collapsed])) {
|
|
69
|
+
box-shadow: var(
|
|
70
|
+
--sidebar-overlay-shadow,
|
|
71
|
+
0px 8px 24px 0px rgba(119, 125, 130, 0.25)
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
46
75
|
:host {
|
|
47
76
|
scrollbar-width: thin;
|
|
48
77
|
scrollbar-color: #64748b transparent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,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 * SideBar CSS\n */\nexport const styles = css`\n :host {\n \n top: 0;\n width: var(--nile-width-240px, var(--ng-spacing-296));\n display: flex;\n flex-direction: column;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n height: 100%;\n overflow: hidden; \n transition: width 0.25s ease, transform 0.25s ease;\n z-index: 1000;\n}\n\n \n:host([position='left']) {\n left: 0;\n border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n right: 0;\n border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/*\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n */\n:host([overlay]) {\n position: var(--sidebar-overlay-position, absolute);\n top: 0;\n bottom: 0;\n height: 100%;\n}\n\n:host([overlay][position='left']) {\n left: 0;\n}\n\n:host([overlay][position='right']) {\n right: 0;\n}\n\n/* Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n box-shadow: var(\n --sidebar-overlay-shadow,\n 0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n );\n}\n\n:host {\n scrollbar-width: thin;\n scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n width: 6px;\n}\n:host::-webkit-scrollbar-track {\n background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n background-color: #64748b;\n border-radius: 10px;\n}\n\n \n.scroll-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n flex-shrink: 0;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"]}
|
|
@@ -14,15 +14,31 @@ import NileElement from '../internal/nile-element';
|
|
|
14
14
|
* @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
|
|
15
15
|
* @attr width - Expanded width of the sidebar (px).
|
|
16
16
|
* @attr collapsed-width - Collapsed width of the sidebar (px).
|
|
17
|
+
* @attr overlay - When set, the sidebar is taken out of normal flow and floats
|
|
18
|
+
* on top of adjacent content, so expanding it overlays the page instead of
|
|
19
|
+
* pushing siblings sideways.
|
|
20
|
+
*
|
|
21
|
+
* @event nile-toggle - Fired after the collapsed state changes (via the built-in
|
|
22
|
+
* expand button or the public expand()/collapse()/toggle() methods).
|
|
23
|
+
* `event.detail.collapsed` is the new state.
|
|
24
|
+
*
|
|
25
|
+
* @method expand() - Expand the sidebar.
|
|
26
|
+
* @method collapse() - Collapse the sidebar.
|
|
27
|
+
* @method toggle(force?) - Toggle, or force a specific collapsed state.
|
|
17
28
|
*/
|
|
18
29
|
export declare class NileSideBar extends NileElement {
|
|
19
30
|
position: 'left' | 'right';
|
|
20
31
|
collapsed: boolean;
|
|
32
|
+
overlay: boolean;
|
|
21
33
|
fullHeight: boolean;
|
|
22
34
|
width: number | null;
|
|
23
35
|
collapsedWidth: number | null;
|
|
24
36
|
static get styles(): CSSResultArray;
|
|
25
37
|
protected updated(changedProps: Map<string, unknown>): void;
|
|
38
|
+
expand(): void;
|
|
39
|
+
collapse(): void;
|
|
40
|
+
toggle(force?: boolean): void;
|
|
41
|
+
private setCollapsed;
|
|
26
42
|
render(): TemplateResult;
|
|
27
43
|
}
|
|
28
44
|
export default NileSideBar;
|
|
@@ -17,12 +17,24 @@ import NileElement from '../internal/nile-element';
|
|
|
17
17
|
* @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
|
|
18
18
|
* @attr width - Expanded width of the sidebar (px).
|
|
19
19
|
* @attr collapsed-width - Collapsed width of the sidebar (px).
|
|
20
|
+
* @attr overlay - When set, the sidebar is taken out of normal flow and floats
|
|
21
|
+
* on top of adjacent content, so expanding it overlays the page instead of
|
|
22
|
+
* pushing siblings sideways.
|
|
23
|
+
*
|
|
24
|
+
* @event nile-toggle - Fired after the collapsed state changes (via the built-in
|
|
25
|
+
* expand button or the public expand()/collapse()/toggle() methods).
|
|
26
|
+
* `event.detail.collapsed` is the new state.
|
|
27
|
+
*
|
|
28
|
+
* @method expand() - Expand the sidebar.
|
|
29
|
+
* @method collapse() - Collapse the sidebar.
|
|
30
|
+
* @method toggle(force?) - Toggle, or force a specific collapsed state.
|
|
20
31
|
*/
|
|
21
32
|
let NileSideBar = class NileSideBar extends NileElement {
|
|
22
33
|
constructor() {
|
|
23
34
|
super(...arguments);
|
|
24
35
|
this.position = 'left';
|
|
25
36
|
this.collapsed = false;
|
|
37
|
+
this.overlay = false;
|
|
26
38
|
this.fullHeight = false;
|
|
27
39
|
this.width = null;
|
|
28
40
|
this.collapsedWidth = null;
|
|
@@ -51,6 +63,21 @@ let NileSideBar = class NileSideBar extends NileElement {
|
|
|
51
63
|
this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
|
|
52
64
|
}
|
|
53
65
|
}
|
|
66
|
+
expand() {
|
|
67
|
+
this.setCollapsed(false);
|
|
68
|
+
}
|
|
69
|
+
collapse() {
|
|
70
|
+
this.setCollapsed(true);
|
|
71
|
+
}
|
|
72
|
+
toggle(force) {
|
|
73
|
+
this.setCollapsed(force ?? !this.collapsed);
|
|
74
|
+
}
|
|
75
|
+
setCollapsed(value) {
|
|
76
|
+
if (this.collapsed === value)
|
|
77
|
+
return;
|
|
78
|
+
this.collapsed = value;
|
|
79
|
+
this.emit('nile-toggle', { collapsed: value });
|
|
80
|
+
}
|
|
54
81
|
render() {
|
|
55
82
|
return html `
|
|
56
83
|
<slot name="header" part="header"></slot>
|
|
@@ -67,6 +94,9 @@ __decorate([
|
|
|
67
94
|
__decorate([
|
|
68
95
|
property({ type: Boolean, reflect: true, attribute: true })
|
|
69
96
|
], NileSideBar.prototype, "collapsed", void 0);
|
|
97
|
+
__decorate([
|
|
98
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
|
99
|
+
], NileSideBar.prototype, "overlay", void 0);
|
|
70
100
|
__decorate([
|
|
71
101
|
property({ type: Boolean, reflect: true, attribute: true })
|
|
72
102
|
], NileSideBar.prototype, "fullHeight", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD
|
|
1
|
+
{"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n * @attr overlay - When set, the sidebar is taken out of normal flow and floats\n * on top of adjacent content, so expanding it overlays the page instead of\n * pushing siblings sideways.\n *\n * @event nile-toggle - Fired after the collapsed state changes (via the built-in\n * expand button or the public expand()/collapse()/toggle() methods).\n * `event.detail.collapsed` is the new state.\n *\n * @method expand() - Expand the sidebar.\n * @method collapse() - Collapse the sidebar.\n * @method toggle(force?) - Toggle, or force a specific collapsed state.\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })overlay: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n \n @property({ type: Number, attribute: true })width: number | null = null;\n\n \n @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n if (changedProps.has('collapsed')) {\n this.querySelectorAll<NileElement>(\n `\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n `\n ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n }\n \n\n if (changedProps.has('width') && this.width !== null) {\n this.style.setProperty('--sidebar-width', `${this.width}px`);\n }\n if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n }\n }\n public expand(): void {\n this.setCollapsed(false);\n }\n public collapse(): void {\n this.setCollapsed(true);\n }\n\n public toggle(force?: boolean): void {\n this.setCollapsed(force ?? !this.collapsed);\n }\n\n private setCollapsed(value: boolean): void {\n if (this.collapsed === value) return;\n this.collapsed = value;\n this.emit('nile-toggle', { collapsed: value });\n }\n\n public render(): TemplateResult {\n return html`\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n `;\n }\n \n}\n\nexport default NileSideBar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar': NileSideBar;\n }\n}\n"]}
|