@aquera/nile-elements 0.1.32-beta-1.6 → 0.1.33-beta-1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/nile-menu/nile-menu.cjs.js +1 -1
- package/dist/nile-menu/nile-menu.cjs.js.map +1 -1
- package/dist/nile-menu/nile-menu.esm.js +1 -1
- package/dist/src/nile-menu/nile-menu.js +13 -15
- package/dist/src/nile-menu/nile-menu.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-menu/nile-menu.ts +17 -20
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 0.1.33-beta-1.0
|
83
|
+
- Nile Menu: Bugfix for using space key in nile input inside nile-menu
|
84
|
+
|
82
85
|
#### Version 0.1.32-beta-1.5
|
83
86
|
- Nile Tokens: Spacing tokens updated
|
84
87
|
- Dependency Nile 0.3.61-beta-1.0
|
@@ -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","../internal/nile-element.cjs.js","./nile-menu.css.cjs.js","../internal/slot.cjs.js"],function(_export,_context){"use strict";var e,t,s,i,n,o,r,l,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,h;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0;}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r);}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r);}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n;}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){s=_litDecoratorsJs.state;i=_litDecoratorsJs.property;n=_litDecoratorsJs.query;o=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){r=_internalNileElementCjsJs.N;},function(_nileMenuCssCjsJs){l=_nileMenuCssCjsJs.s;},function(_internalSlotCjsJs){a=_internalSlotCjsJs.H;}],execute:function execute(){_export("N",h=/*#__PURE__*/function(_r){function h(){var _this;_classCallCheck(this,h);_this=_callSuper(this,h,arguments),_this.searchValue="",_this.searchWidth=0,_this.searchEnabled=!1,_this.customSearch=!1,_this.showNoResults=!1,_this.noResultsMessage="No results found",_this.hasSlotController=new a(_assertThisInitialized(_this),"menu__footer","menu__header");return _this;}_inherits(h,_r);return _createClass(h,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(h,"connectedCallback",this,3)([]),this.setAttribute("role","menu");}},{key:"handleClick",value:function handleClick(e){var t=e.target.closest("nile-menu-item");(t===null||t===void 0?void 0:t.hasSubMenu)||t&&!t.disabled&&("checkbox"===t.type&&(t.checked=!t.checked),this.emit("nile-select",{value:t.value}));}},{key:"handleKeyDown",value:function handleKeyDown(e){if("Enter"===e.key){var _t=this.getCurrentItem();e.preventDefault(),_t===null||_t===void 0?void 0:_t.click();}if(" "===e.key&&e.preventDefault(),["ArrowDown","ArrowUp","Home","End"].includes(e.key)){var _t2=this.getAllItems(),_s=this.getCurrentItem();var _i=_s?_t2.indexOf(_s):0;_t2.length>0&&(e.preventDefault(),"ArrowDown"===e.key?_i++:"ArrowUp"===e.key?_i--:"Home"===e.key?_i=0:"End"===e.key&&(_i=_t2.length-1),_i<0&&(_i=_t2.length-1),_i>_t2.length-1&&(_i=0),this.setCurrentItem(_t2[_i]),_t2[_i].focus());}}},{key:"handleMouseDown",value:function handleMouseDown(e){var t=e.target;this.isMenuItem(t)&&this.setCurrentItem(t);}},{key:"handleSlotChange",value:function handleSlotChange(){var e=this.getAllItems();e.length>0&&this.setCurrentItem(e[0]);}},{key:"isMenuItem",value:function isMenuItem(e){var _e$getAttribute;return"nile-menu-item"===e.tagName.toLowerCase()||["menuitem","menuitemcheckbox","menuitemradio"].includes((_e$getAttribute=e.getAttribute("role"))!==null&&_e$getAttribute!==void 0?_e$getAttribute:"");}},{key:"getAllItems",value:function getAllItems(){var _this2=this;return _toConsumableArray(this.defaultSlot.assignedElements({flatten:!0})).filter(function(e){return!!_this2.isMenuItem(e);});}},{key:"getCurrentItem",value:function getCurrentItem(){return this.getAllItems().find(function(e){return"0"===e.getAttribute("tabindex");});}},{key:"setCurrentItem",value:function setCurrentItem(e){this.getAllItems().forEach(function(t){t.setAttribute("tabindex",t===e?"0":"-1");});}},{key:"handleSearchChange",value:function handleSearchChange(e){var _this3=this;var t=this.getAllItems(),s=e.target.value;if(this.customSearch)return void this.emit("nile-search-value",{value:s});var i=0;t.map(function(t){_this3.searchWidth=Math.max(_this3.searchWidth,t.offsetWidth),t.innerText.toLowerCase().includes(e.target.value.toLowerCase())?(t.style.display="block",i++):t.style.display="none";}),this.showNoResults=0===i;}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n ","\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ","\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=","\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=","\n @click=","\n @keydown=","\n @mousedown=","\n ></slot>\n ","\n </div>\n "])),this.searchEnabled?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=","\n placeholder=\"Search...\"\n @nile-input=","\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>"])),this.searchValue,this.handleSearchChange):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral([""]))),this.showNoResults?t(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" <nile-menu-item>","</nile-menu-item> "])),this.noResultsMessage):"",function(e){e.stopPropagation();},this.handleSlotChange,this.handleClick,this.handleKeyDown,this.handleMouseDown,this.hasSlotController.test("menu__footer")?t(_templateObject5||(_templateObject5=_taggedTemplateLiteral([" <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>"]))):null);}}]);}(r));h.styles=l,e([s()],h.prototype,"searchValue",void 0),e([s()],h.prototype,"searchWidth",void 0),e([i({type:Boolean,reflect:!0})],h.prototype,"searchEnabled",void 0),e([i({type:Boolean,reflect:!0})],h.prototype,"customSearch",void 0),e([i({type:Boolean})],h.prototype,"showNoResults",void 0),e([i({type:String})],h.prototype,"noResultsMessage",void 0),e([n("slot:not([name])")],h.prototype,"defaultSlot",void 0),_export("N",h=e([o("nile-menu")],h));}};});
|
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","../internal/nile-element.cjs.js","./nile-menu.css.cjs.js","../internal/slot.cjs.js"],function(_export,_context){"use strict";var e,t,s,i,n,o,r,l,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,h;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0;}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r);}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r);}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n;}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){s=_litDecoratorsJs.state;i=_litDecoratorsJs.property;n=_litDecoratorsJs.query;o=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){r=_internalNileElementCjsJs.N;},function(_nileMenuCssCjsJs){l=_nileMenuCssCjsJs.s;},function(_internalSlotCjsJs){a=_internalSlotCjsJs.H;}],execute:function execute(){_export("N",h=/*#__PURE__*/function(_r){function h(){var _this;_classCallCheck(this,h);_this=_callSuper(this,h,arguments),_this.searchValue="",_this.searchWidth=0,_this.searchEnabled=!1,_this.customSearch=!1,_this.showNoResults=!1,_this.noResultsMessage="No results found",_this.hasSlotController=new a(_assertThisInitialized(_this),"menu__footer","menu__header");return _this;}_inherits(h,_r);return _createClass(h,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(h,"connectedCallback",this,3)([]),this.setAttribute("role","menu");}},{key:"handleClick",value:function handleClick(e){var t=e.target.closest("nile-menu-item");(t===null||t===void 0?void 0:t.hasSubMenu)||t&&!t.disabled&&("checkbox"===t.type&&(t.checked=!t.checked),this.emit("nile-select",{value:t.value}));}},{key:"handleKeyDown",value:function handleKeyDown(e){var t=e.target;if(!t.closest("nile-input")&&"INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&!t.isContentEditable){if("Enter"===e.key){var _t=this.getCurrentItem();e.preventDefault(),_t===null||_t===void 0?void 0:_t.click();}if(" "===e.key&&e.preventDefault(),["ArrowDown","ArrowUp","Home","End"].includes(e.key)){var _t2=this.getAllItems(),_s=this.getCurrentItem();var _i=_s?_t2.indexOf(_s):0;_t2.length>0&&(e.preventDefault(),"ArrowDown"===e.key?_i++:"ArrowUp"===e.key?_i--:"Home"===e.key?_i=0:"End"===e.key&&(_i=_t2.length-1),_i<0&&(_i=_t2.length-1),_i>_t2.length-1&&(_i=0),this.setCurrentItem(_t2[_i]),_t2[_i].focus());}}}},{key:"handleMouseDown",value:function handleMouseDown(e){var t=e.target;this.isMenuItem(t)&&this.setCurrentItem(t);}},{key:"handleSlotChange",value:function handleSlotChange(){var e=this.getAllItems();e.length>0&&this.setCurrentItem(e[0]);}},{key:"isMenuItem",value:function isMenuItem(e){var _e$getAttribute;return"nile-menu-item"===e.tagName.toLowerCase()||["menuitem","menuitemcheckbox","menuitemradio"].includes((_e$getAttribute=e.getAttribute("role"))!==null&&_e$getAttribute!==void 0?_e$getAttribute:"");}},{key:"getAllItems",value:function getAllItems(){var _this2=this;return _toConsumableArray(this.defaultSlot.assignedElements({flatten:!0})).filter(function(e){return!!_this2.isMenuItem(e);});}},{key:"getCurrentItem",value:function getCurrentItem(){return this.getAllItems().find(function(e){return"0"===e.getAttribute("tabindex");});}},{key:"setCurrentItem",value:function setCurrentItem(e){this.getAllItems().forEach(function(t){t.setAttribute("tabindex",t===e?"0":"-1");});}},{key:"handleSearchChange",value:function handleSearchChange(e){var _this3=this;var t=this.getAllItems(),s=e.target.value;if(this.customSearch)return void this.emit("nile-search-value",{value:s});var i=0;t.map(function(t){_this3.searchWidth=Math.max(_this3.searchWidth,t.offsetWidth),t.innerText.toLowerCase().includes(e.target.value.toLowerCase())?(t.style.display="block",i++):t.style.display="none";}),this.showNoResults=0===i;}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n ","\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ","\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=","\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=","\n @click=","\n @keydown=","\n @mousedown=","\n ></slot>\n ","\n </div>\n "])),this.searchEnabled?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=","\n placeholder=\"Search...\"\n @nile-input=","\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>"])),this.searchValue,this.handleSearchChange):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral([""]))),this.showNoResults?t(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" <nile-menu-item>","</nile-menu-item> "])),this.noResultsMessage):"",function(e){e.stopPropagation();},this.handleSlotChange,this.handleClick,this.handleKeyDown,this.handleMouseDown,this.hasSlotController.test("menu__footer")?t(_templateObject5||(_templateObject5=_taggedTemplateLiteral([" <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>"]))):null);}}]);}(r));h.styles=l,e([s()],h.prototype,"searchValue",void 0),e([s()],h.prototype,"searchWidth",void 0),e([i({type:Boolean,reflect:!0})],h.prototype,"searchEnabled",void 0),e([i({type:Boolean,reflect:!0})],h.prototype,"customSearch",void 0),e([i({type:Boolean})],h.prototype,"showNoResults",void 0),e([i({type:String})],h.prototype,"noResultsMessage",void 0),e([n("slot:not([name])")],h.prototype,"defaultSlot",void 0),_export("N",h=e([o("nile-menu")],h));}};});
|
2
2
|
//# sourceMappingURL=nile-menu.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-menu.cjs.js","sources":["../../../src/nile-menu/nile-menu.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean, reflect: true }) customSearch = false;\n\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'menu__footer',\n 'menu__header'\n );\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let searchValue = e.target.value;\n if (this.customSearch) {\n this.emit('nile-search-value', { value: searchValue });\n return;\n }\n\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n ${this.searchEnabled\n ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>`\n : html``}\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.hasSlotController.test('menu__footer')\n ? html` <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>`\n : null}\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"],"names":["NileMenu","h","constructor","this","searchValue","searchWidth","searchEnabled","customSearch","showNoResults","noResultsMessage","hasSlotController","HasSlotController","_this","_inherits","_r","_createClass","key","value","connectedCallback","super","setAttribute","handleClick","event","item","target","closest","hasSubMenu","disabled","type","checked","emit","handleKeyDown","getCurrentItem","preventDefault","click","includes","items","getAllItems","activeItem","index","indexOf","length","setCurrentItem","focus","handleMouseDown","isMenuItem","handleSlotChange","_e$getAttribute","tagName","toLowerCase","getAttribute","_toConsumableArray","defaultSlot","assignedElements","flatten","filter","el","find","i","forEach","handleSearchChange","e","counter","map","curr_item","Math","max","offsetWidth","innerText","style","display","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","_templateObject4","stopPropagation","test","_templateObject5","NileElement","styles","__decorate","state","prototype","property","Boolean","reflect","String","query","customElement"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"nile-menu.cjs.js","sources":["../../../src/nile-menu/nile-menu.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean, reflect: true }) customSearch = false;\n\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'menu__footer',\n 'menu__header'\n );\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n\n // Only handle keyboard shortcuts if NOT inside input, textarea, or contenteditable\n if (target.closest('nile-input') || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {\n return; // Ignore handling space, arrows, etc.\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n item?.click();\n }\n\n // Prevent scrolling when space is pressed (ONLY if not typing)\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move selection\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') index++;\n else if (event.key === 'ArrowUp') index--;\n else if (event.key === 'Home') index = 0;\n else if (event.key === 'End') index = items.length - 1;\n\n if (index < 0) index = items.length - 1;\n if (index > items.length - 1) index = 0;\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n}\n\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let searchValue = e.target.value;\n if (this.customSearch) {\n this.emit('nile-search-value', { value: searchValue });\n return;\n }\n\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n ${this.searchEnabled\n ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>`\n : html``}\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.hasSlotController.test('menu__footer')\n ? html` <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>`\n : null}\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"],"names":["NileMenu","h","this","searchValue","searchWidth","searchEnabled","customSearch","showNoResults","noResultsMessage","hasSlotController","HasSlotController","_this","_inherits","_r","_createClass","key","value","connectedCallback","super","setAttribute","handleClick","event","item","target","closest","hasSubMenu","disabled","type","checked","emit","handleKeyDown","tagName","isContentEditable","getCurrentItem","preventDefault","click","includes","items","getAllItems","activeItem","index","indexOf","length","setCurrentItem","focus","handleMouseDown","isMenuItem","handleSlotChange","_e$getAttribute","toLowerCase","getAttribute","_toConsumableArray","defaultSlot","assignedElements","flatten","filter","el","find","i","forEach","handleSearchChange","e","counter","map","curr_item","Math","max","offsetWidth","innerText","style","display","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","_templateObject4","stopPropagation","test","_templateObject5","NileElement","styles","__decorate","state","prototype","property","Boolean","reflect","String","query","customElement"],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{__decorate as e}from"tslib";import{html as t}from"lit";import{state as s,property as i,query as n,customElement as o}from"lit/decorators.js";import{N as r}from"../internal/nile-element.esm.js";import{s as l}from"./nile-menu.css.esm.js";import{H as a}from"../internal/slot.esm.js";let h=class extends r{constructor(){super(...arguments),this.searchValue="",this.searchWidth=0,this.searchEnabled=!1,this.customSearch=!1,this.showNoResults=!1,this.noResultsMessage="No results found",this.hasSlotController=new a(this,"menu__footer","menu__header")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu")}handleClick(e){const t=e.target.closest("nile-menu-item");t?.hasSubMenu||t&&!t.disabled&&("checkbox"===t.type&&(t.checked=!t.checked),this.emit("nile-select",{value:t.value}))}handleKeyDown(e){if("Enter"===e.key){const t=this.getCurrentItem();e.preventDefault(),t?.click()}if(" "===e.key&&e.preventDefault(),["ArrowDown","ArrowUp","Home","End"].includes(e.key)){const t=this.getAllItems(),s=this.getCurrentItem();let i=s?t.indexOf(s):0;t.length>0&&(e.preventDefault(),"ArrowDown"===e.key?i++:"ArrowUp"===e.key?i--:"Home"===e.key?i=0:"End"===e.key&&(i=t.length-1),i<0&&(i=t.length-1),i>t.length-1&&(i=0),this.setCurrentItem(t[i]),t[i].focus())}}handleMouseDown(e){const t=e.target;this.isMenuItem(t)&&this.setCurrentItem(t)}handleSlotChange(){const e=this.getAllItems();e.length>0&&this.setCurrentItem(e[0])}isMenuItem(e){return"nile-menu-item"===e.tagName.toLowerCase()||["menuitem","menuitemcheckbox","menuitemradio"].includes(e.getAttribute("role")??"")}getAllItems(){return[...this.defaultSlot.assignedElements({flatten:!0})].filter((e=>!!this.isMenuItem(e)))}getCurrentItem(){return this.getAllItems().find((e=>"0"===e.getAttribute("tabindex")))}setCurrentItem(e){this.getAllItems().forEach((t=>{t.setAttribute("tabindex",t===e?"0":"-1")}))}handleSearchChange(e){let t=this.getAllItems(),s=e.target.value;if(this.customSearch)return void this.emit("nile-search-value",{value:s});let i=0;t.map((t=>{this.searchWidth=Math.max(this.searchWidth,t.offsetWidth),t.innerText.toLowerCase().includes(e.target.value.toLowerCase())?(t.style.display="block",i++):t.style.display="none"})),this.showNoResults=0===i}render(){return t`
|
1
|
+
import{__decorate as e}from"tslib";import{html as t}from"lit";import{state as s,property as i,query as n,customElement as o}from"lit/decorators.js";import{N as r}from"../internal/nile-element.esm.js";import{s as l}from"./nile-menu.css.esm.js";import{H as a}from"../internal/slot.esm.js";let h=class extends r{constructor(){super(...arguments),this.searchValue="",this.searchWidth=0,this.searchEnabled=!1,this.customSearch=!1,this.showNoResults=!1,this.noResultsMessage="No results found",this.hasSlotController=new a(this,"menu__footer","menu__header")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu")}handleClick(e){const t=e.target.closest("nile-menu-item");t?.hasSubMenu||t&&!t.disabled&&("checkbox"===t.type&&(t.checked=!t.checked),this.emit("nile-select",{value:t.value}))}handleKeyDown(e){const t=e.target;if(!t.closest("nile-input")&&"INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&!t.isContentEditable){if("Enter"===e.key){const t=this.getCurrentItem();e.preventDefault(),t?.click()}if(" "===e.key&&e.preventDefault(),["ArrowDown","ArrowUp","Home","End"].includes(e.key)){const t=this.getAllItems(),s=this.getCurrentItem();let i=s?t.indexOf(s):0;t.length>0&&(e.preventDefault(),"ArrowDown"===e.key?i++:"ArrowUp"===e.key?i--:"Home"===e.key?i=0:"End"===e.key&&(i=t.length-1),i<0&&(i=t.length-1),i>t.length-1&&(i=0),this.setCurrentItem(t[i]),t[i].focus())}}}handleMouseDown(e){const t=e.target;this.isMenuItem(t)&&this.setCurrentItem(t)}handleSlotChange(){const e=this.getAllItems();e.length>0&&this.setCurrentItem(e[0])}isMenuItem(e){return"nile-menu-item"===e.tagName.toLowerCase()||["menuitem","menuitemcheckbox","menuitemradio"].includes(e.getAttribute("role")??"")}getAllItems(){return[...this.defaultSlot.assignedElements({flatten:!0})].filter((e=>!!this.isMenuItem(e)))}getCurrentItem(){return this.getAllItems().find((e=>"0"===e.getAttribute("tabindex")))}setCurrentItem(e){this.getAllItems().forEach((t=>{t.setAttribute("tabindex",t===e?"0":"-1")}))}handleSearchChange(e){let t=this.getAllItems(),s=e.target.value;if(this.customSearch)return void this.emit("nile-search-value",{value:s});let i=0;t.map((t=>{this.searchWidth=Math.max(this.searchWidth,t.offsetWidth),t.innerText.toLowerCase().includes(e.target.value.toLowerCase())?(t.style.display="block",i++):t.style.display="none"})),this.showNoResults=0===i}render(){return t`
|
2
2
|
${this.searchEnabled?t`<div class="search__wrapper" part="search__wrapper">
|
3
3
|
<nile-input
|
4
4
|
size="medium"
|
@@ -47,42 +47,40 @@ let NileMenu = class NileMenu extends NileElement {
|
|
47
47
|
this.emit('nile-select', { value: item.value });
|
48
48
|
}
|
49
49
|
handleKeyDown(event) {
|
50
|
+
const target = event.target;
|
51
|
+
// Only handle keyboard shortcuts if NOT inside input, textarea, or contenteditable
|
52
|
+
if (target.closest('nile-input') || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
|
53
|
+
return; // Ignore handling space, arrows, etc.
|
54
|
+
}
|
50
55
|
// Make a selection when pressing enter
|
51
56
|
if (event.key === 'Enter') {
|
52
57
|
const item = this.getCurrentItem();
|
53
58
|
event.preventDefault();
|
54
|
-
// Simulate a click to support @click handlers on menu items that also work with the keyboard
|
55
59
|
item?.click();
|
56
60
|
}
|
57
|
-
// Prevent scrolling when space is pressed
|
61
|
+
// Prevent scrolling when space is pressed (ONLY if not typing)
|
58
62
|
if (event.key === ' ') {
|
59
63
|
event.preventDefault();
|
60
64
|
}
|
61
|
-
// Move
|
65
|
+
// Move selection
|
62
66
|
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
63
67
|
const items = this.getAllItems();
|
64
68
|
const activeItem = this.getCurrentItem();
|
65
69
|
let index = activeItem ? items.indexOf(activeItem) : 0;
|
66
70
|
if (items.length > 0) {
|
67
71
|
event.preventDefault();
|
68
|
-
if (event.key === 'ArrowDown')
|
72
|
+
if (event.key === 'ArrowDown')
|
69
73
|
index++;
|
70
|
-
|
71
|
-
else if (event.key === 'ArrowUp') {
|
74
|
+
else if (event.key === 'ArrowUp')
|
72
75
|
index--;
|
73
|
-
|
74
|
-
else if (event.key === 'Home') {
|
76
|
+
else if (event.key === 'Home')
|
75
77
|
index = 0;
|
76
|
-
|
77
|
-
else if (event.key === 'End') {
|
78
|
+
else if (event.key === 'End')
|
78
79
|
index = items.length - 1;
|
79
|
-
|
80
|
-
if (index < 0) {
|
80
|
+
if (index < 0)
|
81
81
|
index = items.length - 1;
|
82
|
-
|
83
|
-
if (index > items.length - 1) {
|
82
|
+
if (index > items.length - 1)
|
84
83
|
index = 0;
|
85
|
-
}
|
86
84
|
this.setCurrentItem(items[index]);
|
87
85
|
items[index].focus();
|
88
86
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean, reflect: true }) customSearch = false;\n\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'menu__footer',\n 'menu__header'\n );\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let searchValue = e.target.value;\n if (this.customSearch) {\n this.emit('nile-search-value', { value: searchValue });\n return;\n }\n\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n ${this.searchEnabled\n ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>`\n : html``}\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.hasSlotController.test('menu__footer')\n ? html` <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>`\n : null}\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean, reflect: true }) customSearch = false;\n\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'menu__footer',\n 'menu__header'\n );\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n\n // Only handle keyboard shortcuts if NOT inside input, textarea, or contenteditable\n if (target.closest('nile-input') || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {\n return; // Ignore handling space, arrows, etc.\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n item?.click();\n }\n\n // Prevent scrolling when space is pressed (ONLY if not typing)\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move selection\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') index++;\n else if (event.key === 'ArrowUp') index--;\n else if (event.key === 'Home') index = 0;\n else if (event.key === 'End') index = items.length - 1;\n\n if (index < 0) index = items.length - 1;\n if (index > items.length - 1) index = 0;\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n}\n\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let searchValue = e.target.value;\n if (this.customSearch) {\n this.emit('nile-search-value', { value: searchValue });\n return;\n }\n\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n ${this.searchEnabled\n ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n <nile-input\n size=\"medium\"\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n part=\"menu__input\"\n clearable\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>\n </div>`\n : html``}\n <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n part=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n class=\"menu__item-wrapper\"\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.hasSlotController.test('menu__footer')\n ? html` <slot\n part=\"menu__footer\"\n name=\"menu__footer\"\n class=\"menu__footer\"\n ></slot>`\n : null}\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
|