carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 2.88 kB
Source Map (JSON)
{"version":3,"sources":["components/ui-shell/side-nav-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOxE;;;GAGG;AACH,cACM,iBAAkB,SAAQ,sBAAsB;IACpD;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,YAAY,CAAC,iBAAiB,KAAA;IAW9B,MAAM;IAeN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"side-nav-menu-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nconst { prefix } = settings;\n\n/**\n * Side nav menu item.\n * @element bx-side-nav-menu-item\n */\n@customElement(`${prefix}-side-nav-menu-item`)\nclass BXSideNavMenuItem extends FocusMixin(LitElement) {\n /**\n * `true` if the menu item should be active.\n */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Link `href`.\n */\n @property()\n href = '';\n\n /**\n * The title.\n */\n @property()\n title!: string;\n\n createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n shouldUpdate(changedProperties) {\n if (changedProperties.has('active') && this.active) {\n const { selectorMenu } = this.constructor as typeof BXSideNavMenuItem;\n const parent = this.closest(selectorMenu);\n if (parent) {\n (parent as BXSideNavMenu).active = true;\n }\n }\n return true;\n }\n\n render() {\n const { active, href, title } = this;\n const classes = classMap({\n [`${prefix}--side-nav__link`]: true,\n [`${prefix}--side-nav__link--current`]: active,\n });\n return html`\n <a role=\"menuitem\" class=\"${classes}\" href=\"${href}\">\n <span class=\"${prefix}--side-nav__link-text\">\n <slot>${title}</slot>\n </span>\n </a>\n `;\n }\n\n /**\n * A selector that will return the parent menu.\n */\n static get selectorMenu() {\n return `${prefix}-side-nav-menu`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNavMenuItem;\n"]}