JezK

Edit File: sc-menu-item2.js.map

{"file":"sc-menu-item2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,6pDAA6pD,CAAC;AACprD,yBAAe,aAAa;;MCOf,UAAU;;;;;wBAKO,KAAK;;;uBASW,KAAK;qBAGR,EAAE;wBAGE,KAAK;;;IAIlD,MAAM,QAAQ,CAAC,OAAsB;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC9B;;IAID,MAAM,OAAO;QACX,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;QACpC,QACE,EAAC,GAAG,qDACF,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAC9C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,mBAAmB,EAAE,KAAK,EAAE;aAC7B,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,SAAS,EAC1C,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACtC,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,SAAS,EAAE,CAAC;gBACV,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBAC9D,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;iBACvB;aACF,gBACW,IAAI,CAAC,EAAE,CAAC,SAAS,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,6DAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,kBAAkB,IAChD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,WAAW,IACxH,6DAAM,CAAC,EAAC,wJAAwJ,GAAQ,CACpK,CACD,EACP,6DAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,IAC3C,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACP,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,kBAAkB,IACzC,8DAAa,CACR,EACP,6DAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,IAC3C,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ui/menu-item/sc-menu-item.scss?tag=sc-menu-item&encapsulation=shadow","src/components/ui/menu-item/sc-menu-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-family: var(--sc-font-sans);\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-normal);\n line-height: var(--sc-menu-item-line-height, var(--sc-line-height-normal));\n letter-spacing: var(--sc-letter-spacing-normal);\n text-align: left;\n color: var(--sc-menu-item-color, var(--sc-color-gray-700));\n padding: var(--sc-spacing-xx-small) var(--sc-spacing-x-large);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) fill, var(--sc-input-transition, var(--sc-transition-medium)) background-color;\n user-select: none;\n white-space: var(--sc-menu-item-white-space, nowrap);\n text-wrap: auto;\n cursor: pointer;\n text-decoration: none;\n\n &.menu-item--focused:not(.menu-item--disabled) {\n outline: none;\n background-color: var(--sc-menu-item-background-focused, var(--sc-color-primary-500));\n color: var(--sc-color-white);\n }\n\n &.menu-item--disabled {\n outline: none;\n color: var(--sc-color-gray-400);\n cursor: not-allowed;\n }\n\n .menu-item__label {\n flex: 1 1 auto;\n }\n\n .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(*) {\n display: inline-flex;\n margin-right: var(--sc-spacing-small);\n }\n }\n\n .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(*) {\n margin-left: var(--sc-spacing-x-small);\n text-align: right;\n }\n }\n}\n\n.menu-item .menu-item__check {\n display: flex;\n position: absolute;\n left: 0.5em;\n top: 0.6em;\n visibility: hidden;\n align-items: center;\n font-size: inherit;\n}\n\n.menu-item--checked .menu-item__check {\n visibility: visible;\n}\n\n.menu-item--is-rtl {\n &.menu-item {\n text-align: right;\n\n .menu-item__check {\n left: auto;\n right: 0.5em;\n }\n }\n}\n","import { Component, Prop, State, h, Method, Element } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n@Component({\n tag: 'sc-menu-item',\n styleUrl: 'sc-menu-item.scss',\n shadow: true,\n})\nexport class ScMenuItem {\n @Element() el: HTMLScMenuItemElement;\n\n private menuItem: HTMLElement;\n\n @State() private hasFocus = false;\n\n /** Optional link to follow. */\n @Prop() href: string;\n\n /** The target of the link. */\n @Prop() target: string;\n\n /** Draws the item in a checked state. */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n @Prop({ reflect: true }) value: string = '';\n\n /** Draws the menu item in a disabled state. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Sets focus on the button. */\n @Method('setFocus')\n async setFocus(options?: FocusOptions) {\n this.menuItem.focus(options);\n }\n\n /** Removes focus from the button. */\n @Method('setBlur')\n async setBlur() {\n this.menuItem.blur();\n }\n\n handleBlur() {\n this.hasFocus = false;\n }\n\n handleFocus() {\n this.hasFocus = true;\n }\n\n render() {\n const Tag = this.href ? 'a' : 'div';\n return (\n <Tag\n ref={el => (this.menuItem = el as HTMLElement)}\n part=\"base\"\n class={{\n 'menu-item': true,\n 'menu-item--checked': this.checked,\n 'menu-item--disabled': this.disabled,\n 'menu-item--focused': this.hasFocus,\n 'menu-item--is-rtl': isRtl(),\n }}\n href={this.href}\n role=\"menuitem\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-checked={this.checked ? 'true' : 'false'}\n tabindex={!this.disabled ? '0' : undefined}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n onMouseEnter={() => this.handleFocus()}\n onMouseLeave={() => this.handleBlur()}\n onKeyDown={e => {\n if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n this.menuItem.click();\n }\n }}\n aria-label={this.el.innerText}\n target={this.target}\n >\n <span part=\"checked-icon\" class=\"menu-item__check\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-check\" viewBox=\"0 0 16 16\">\n <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\"></path>\n </svg>\n </span>\n <span part=\"prefix\" class=\"menu-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"menu-item__label\">\n <slot></slot>\n </span>\n <span part=\"suffix\" class=\"menu-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n </Tag>\n );\n }\n}\n"],"version":3}