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 • 3.15 kB
Source Map (JSON)
{"version":3,"sources":["components/ui-shell/side-nav-link.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/E;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IAEH,OAAO,CAAC,uBAAuB,CAAkB;IAEjD;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAIlC;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,iBAAiB;IAOjB,MAAM;IAkBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"side-nav-link.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, query, customElement, LitElement } from 'lit-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\n\nconst { prefix } = settings;\n\n/**\n * Side nav menu item.\n * @element bx-side-nav-link\n * @slot title-icon - The icon.\n */\n@customElement(`${prefix}-side-nav-link`)\nclass BXSideNavLink extends FocusMixin(LitElement) {\n /**\n * The container for the title icon.\n */\n @query('#title-icon-container')\n private _titleIconContainerNode!: HTMLDivElement;\n\n /**\n * Handles `slotchange` event on the `<slot>` for the title icon.\n */\n private _handleSlotChangeTitleIcon({ target }) {\n this._titleIconContainerNode?.toggleAttribute('hidden', target.assignedNodes().length === 0);\n }\n\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 connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n super.connectedCallback();\n }\n\n render() {\n const { active, href, title, _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon } = this;\n const classes = classMap({\n [`${prefix}--side-nav__link`]: true,\n [`${prefix}--side-nav__link--current`]: active,\n });\n return html`\n <a class=\"${classes}\" href=\"${href}\">\n <div id=\"title-icon-container\" hidden class=\"${prefix}--side-nav__icon\">\n <slot name=\"title-icon\" @slotchange=${handleSlotChangeTitleIcon}></slot>\n </div>\n <span class=\"${prefix}--side-nav__link-text\">\n <slot>${title}</slot>\n </span>\n </a>\n `;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNavLink;\n"]}