scu-web-components 0.0.28 → 0.0.31

package/dist/chunks/chunk.DZYFST6D.js

@@ -1,207 +0,0 @@
-import{a as n}from"./chunk.MOWV5A2M.js";import{a}from"./chunk.Y3CEE6A7.js";import{a as i,b as s}from"./chunk.3GVGAXLL.js";import{a as o}from"./chunk.ZS4C3T6Z.js";import{g as e}from"./chunk.5YJY6NT6.js";var c=i`
-:host([design=main]) {
-  outline: none;
-  background-color: rgba(0, 0, 0, 0);
-  padding-left: var(--scw-spacing-1);
-  padding-right: var(--scw-spacing-1);
-  padding-top: calc(var(--scw-spacing-1) * 0.8);
-  padding-bottom: var(--scw-spacing-1);
-  display: inline-flex;
-}
-:host([design=main]) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-07-font);
-  color: var(--scw-color-grey-02);
-}
-
-:host([design=main]:focus-visible) {
-  background-color: var(--scw-color-grey-10);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: var(--scw-effect-focus-shadow);
-  padding-left: var(--scw-spacing-1);
-  padding-right: var(--scw-spacing-1);
-  padding-top: calc(var(--scw-spacing-1) * 0.8);
-  padding-bottom: var(--scw-spacing-1);
-}
-:host([design=main]:focus-visible) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-07-font);
-  color: var(--scw-color-grey-02);
-}
-
-:host([design=main]:hover) {
-  background-color: rgba(0, 0, 0, 0);
-  padding-left: var(--scw-spacing-1);
-  padding-right: var(--scw-spacing-1);
-  padding-top: calc(var(--scw-spacing-1) * 0.8);
-  padding-bottom: var(--scw-spacing-1);
-  cursor: pointer;
-}
-:host([design=main]:hover) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-07-font);
-  color: var(--scw-color-03, var(--scw-color-primary-03));
-}
-
-:host([design=main][aria-selected=true]) {
-  background-color: rgba(0, 0, 0, 0);
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: var(--scw-spacing-1);
-  padding-right: var(--scw-spacing-1);
-  padding-top: calc(var(--scw-spacing-1) * 0.8);
-  padding-bottom: 0px;
-}
-:host([design=main][aria-selected=true]) > *:not(:last-child) {
-  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
-  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
-}
-:host([design=main][aria-selected=true]) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-07-font);
-  color: var(--scw-color-grey-02);
-  align-self: stretch;
-  flex: 1;
-}
-:host([design=main][aria-selected=true]) .selected {
-  background-color: var(--scw-color-03, var(--scw-color-primary-03));
-  align-self: stretch;
-  height: 2px;
-}
-
-:host([design=main][aria-disabled=true]) {
-  background-color: rgba(0, 0, 0, 0);
-  padding-left: var(--scw-spacing-1);
-  padding-right: var(--scw-spacing-1);
-  padding-top: calc(var(--scw-spacing-1) * 0.8);
-  padding-bottom: var(--scw-spacing-1);
-  cursor: auto;
-  pointer-events: none;
-}
-:host([design=main][aria-disabled=true]) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-07-font);
-  color: var(--scw-color-grey-08);
-}
-:host([design=main][aria-disabled=true]) .icon svg {
-  fill: var(--scw-color-grey-08);
-}
-:host([design=main][aria-disabled=true]) .icon svg * {
-  fill: var(--scw-color-grey-08);
-}
-
-:host([design=utility]) .scw-link-base {
-  background-color: rgba(0, 0, 0, 0);
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: var(--scw-spacing-1);
-  padding-right: var(--scw-spacing-1);
-  padding-top: 0px;
-  padding-bottom: 0px;
-  display: inline-flex;
-}
-:host([design=utility]) .scw-link-base > *:not(:last-child) {
-  margin-right: calc(var(--scw-spacing-1) * 0.4);
-  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
-}
-:host([design=utility]) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-grey-02);
-  min-height: 19px;
-}
-:host([design=utility]) .icon {
-  width: 24px;
-  height: 24px;
-}
-:host([design=utility]) .icon svg {
-  box-sizing: border-box;
-  vertical-align: top;
-  width: 100%;
-  height: 100%;
-  fill: var(--scw-color-grey-02);
-}
-:host([design=utility]) .icon svg * {
-  fill: var(--scw-color-grey-02);
-}
-
-:host([design=utility]:focus-visible) {
-  background-color: var(--scw-color-grey-10);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: var(--scw-effect-focus-shadow);
-}
-:host([design=utility]:focus-visible) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-grey-02);
-}
-:host([design=utility]:focus-visible) .icon svg {
-  fill: var(--scw-color-grey-02);
-}
-:host([design=utility]:focus-visible) .icon svg * {
-  fill: var(--scw-color-grey-02);
-}
-
-:host([design=utility]:hover) {
-  background-color: rgba(0, 0, 0, 0);
-  cursor: pointer;
-}
-:host([design=utility]:hover) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-03, var(--scw-color-primary-03));
-}
-:host([design=utility]:hover) .icon svg {
-  fill: var(--scw-color-primary-03);
-}
-:host([design=utility]:hover) .icon svg * {
-  fill: var(--scw-color-primary-03);
-}
-
-:host([design=utility][aria-selected=true]) {
-  background-color: rgba(0, 0, 0, 0);
-  cursor: pointer;
-}
-:host([design=utility][aria-selected=true]) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-03, var(--scw-color-primary-03));
-}
-:host([design=utility][aria-selected=true]) .icon svg {
-  fill: var(--scw-color-primary-03);
-}
-:host([design=utility][aria-selected=true]) .icon svg * {
-  fill: var(--scw-color-primary-03);
-}
-
-:host([design=utility][aria-disabled=true]) {
-  cursor: auto;
-  pointer-events: none;
-  background-color: rgba(0, 0, 0, 0);
-}
-:host([design=utility][aria-disabled=true]) .label {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-grey-07);
-}
-:host([design=utility][aria-disabled=true]) .icon svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([design=utility][aria-disabled=true]) .icon svg * {
-  fill: var(--scw-color-grey-07);
-}
-
-:host {
-  white-space: nowrap;
-}
-:host .label {
-  white-space: nowrap;
-}`;var t=class extends a{constructor(){super();this.ariaSelected="false";this.element="menu-item",this.setAttribute("role","menuitem")}static get styles(){return[super.styles,c]}hasPopup(){let r=this.nextElementSibling;return!!(r&&r.nodeName.indexOf("SCW-MENU")===0)}doShowIcon(){return!!(super.doShowIcon()&&this.design!=="main")}validDesigns(){return{...super.validDesigns(),...n}}connectedCallback(){super.connectedCallback(),this.hasPopup()&&this.setAttribute("aria-haspopup","true")}renderContent(){return this.design==="main"&&this.ariaSelected==="true"?(this.setAttribute("aria-current","page"),o`
-          <div>${super.renderContent()}</div>
-          <div class="selected"></div>
-        `):(this.removeAttribute("aria-current"),super.renderContent())}render(){return this.renderLink(this.renderContent())}};e([s({type:String,attribute:"aria-selected"})],t.prototype,"ariaSelected",2);export{t as a};
-//# sourceMappingURL=chunk.DZYFST6D.js.map

package/dist/chunks/chunk.DZYFST6D.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scw-design-system-web/scw-design-system-mono/scu-web-components/src/scw-menu-item/scss/scw-menu-item.scss", "../../src/scw-menu-item/ScwMenuItem.ts"],
-  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([design=main]) {\n  outline: none;\n  background-color: rgba(0, 0, 0, 0);\n  padding-left: var(--scw-spacing-1);\n  padding-right: var(--scw-spacing-1);\n  padding-top: calc(var(--scw-spacing-1) * 0.8);\n  padding-bottom: var(--scw-spacing-1);\n  display: inline-flex;\n}\n:host([design=main]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-grey-02);\n}\n\n:host([design=main]:focus-visible) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 4px 4px 4px 4px;\n  box-shadow: var(--scw-effect-focus-shadow);\n  padding-left: var(--scw-spacing-1);\n  padding-right: var(--scw-spacing-1);\n  padding-top: calc(var(--scw-spacing-1) * 0.8);\n  padding-bottom: var(--scw-spacing-1);\n}\n:host([design=main]:focus-visible) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-grey-02);\n}\n\n:host([design=main]:hover) {\n  background-color: rgba(0, 0, 0, 0);\n  padding-left: var(--scw-spacing-1);\n  padding-right: var(--scw-spacing-1);\n  padding-top: calc(var(--scw-spacing-1) * 0.8);\n  padding-bottom: var(--scw-spacing-1);\n  cursor: pointer;\n}\n:host([design=main]:hover) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-03, var(--scw-color-primary-03));\n}\n\n:host([design=main][aria-selected=true]) {\n  background-color: rgba(0, 0, 0, 0);\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-left: var(--scw-spacing-1);\n  padding-right: var(--scw-spacing-1);\n  padding-top: calc(var(--scw-spacing-1) * 0.8);\n  padding-bottom: 0px;\n}\n:host([design=main][aria-selected=true]) > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([design=main][aria-selected=true]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-grey-02);\n  align-self: stretch;\n  flex: 1;\n}\n:host([design=main][aria-selected=true]) .selected {\n  background-color: var(--scw-color-03, var(--scw-color-primary-03));\n  align-self: stretch;\n  height: 2px;\n}\n\n:host([design=main][aria-disabled=true]) {\n  background-color: rgba(0, 0, 0, 0);\n  padding-left: var(--scw-spacing-1);\n  padding-right: var(--scw-spacing-1);\n  padding-top: calc(var(--scw-spacing-1) * 0.8);\n  padding-bottom: var(--scw-spacing-1);\n  cursor: auto;\n  pointer-events: none;\n}\n:host([design=main][aria-disabled=true]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-grey-08);\n}\n:host([design=main][aria-disabled=true]) .icon svg {\n  fill: var(--scw-color-grey-08);\n}\n:host([design=main][aria-disabled=true]) .icon svg * {\n  fill: var(--scw-color-grey-08);\n}\n\n:host([design=utility]) .scw-link-base {\n  background-color: rgba(0, 0, 0, 0);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: var(--scw-spacing-1);\n  padding-right: var(--scw-spacing-1);\n  padding-top: 0px;\n  padding-bottom: 0px;\n  display: inline-flex;\n}\n:host([design=utility]) .scw-link-base > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n:host([design=utility]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-02);\n  min-height: 19px;\n}\n:host([design=utility]) .icon {\n  width: 24px;\n  height: 24px;\n}\n:host([design=utility]) .icon svg {\n  box-sizing: border-box;\n  vertical-align: top;\n  width: 100%;\n  height: 100%;\n  fill: var(--scw-color-grey-02);\n}\n:host([design=utility]) .icon svg * {\n  fill: var(--scw-color-grey-02);\n}\n\n:host([design=utility]:focus-visible) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 4px 4px 4px 4px;\n  box-shadow: var(--scw-effect-focus-shadow);\n}\n:host([design=utility]:focus-visible) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-02);\n}\n:host([design=utility]:focus-visible) .icon svg {\n  fill: var(--scw-color-grey-02);\n}\n:host([design=utility]:focus-visible) .icon svg * {\n  fill: var(--scw-color-grey-02);\n}\n\n:host([design=utility]:hover) {\n  background-color: rgba(0, 0, 0, 0);\n  cursor: pointer;\n}\n:host([design=utility]:hover) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-03, var(--scw-color-primary-03));\n}\n:host([design=utility]:hover) .icon svg {\n  fill: var(--scw-color-primary-03);\n}\n:host([design=utility]:hover) .icon svg * {\n  fill: var(--scw-color-primary-03);\n}\n\n:host([design=utility][aria-selected=true]) {\n  background-color: rgba(0, 0, 0, 0);\n  cursor: pointer;\n}\n:host([design=utility][aria-selected=true]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-03, var(--scw-color-primary-03));\n}\n:host([design=utility][aria-selected=true]) .icon svg {\n  fill: var(--scw-color-primary-03);\n}\n:host([design=utility][aria-selected=true]) .icon svg * {\n  fill: var(--scw-color-primary-03);\n}\n\n:host([design=utility][aria-disabled=true]) {\n  cursor: auto;\n  pointer-events: none;\n  background-color: rgba(0, 0, 0, 0);\n}\n:host([design=utility][aria-disabled=true]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-07);\n}\n:host([design=utility][aria-disabled=true]) .icon svg {\n  fill: var(--scw-color-grey-07);\n}\n:host([design=utility][aria-disabled=true]) .icon svg * {\n  fill: var(--scw-color-grey-07);\n}\n\n:host {\n  white-space: nowrap;\n}\n:host .label {\n  white-space: nowrap;\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport ScwLink from '../scw-link/ScwLink';\nimport styles from './scss/scw-menu-item.scss';\nimport {ScwMenuItemDesigns} from './scw-menu-item-enums';\nimport {Components} from '../utils/enums/Components';\n\n/**\n * ScwMenuItem\n * @class\n * @tag scw-menu-item\n *\n * @slot [default=\"<a href target />\"]\n    (OPTIONAL) anchor (for SEO) will determine the label, href, and target.\n * @slot [default=\"<... />\"]\n    (OPTIONAL) random content (paired with design=\"plain\") will wrap that\n    content with a link.\n */\nexport default class ScwMenuItem extends ScwLink {\n  // ============== ScwMenuItem ================================================\n  /**\n  * (ScwMenuItem) selected state\n  * @type {Boolean}\n  */\n  @property({type: String, attribute: 'aria-selected'})\n    ariaSelected = 'false';\n\n  /**\n  * extending styles from ScwLink\n  * https://stackoverflow.com/questions/60266303/\n  *  how-to-extend-and-style-existing-litelements\n  */\n   static get styles() {\n     return [\n       super.styles,\n       styles,\n     ];\n   }\n\n  /**\n  * Constructor\n  */\n   constructor() {\n     super();\n     this.element = Components.menuItem;\n     this.setAttribute('role', 'menuitem');\n   }\n\n  /**\n   * determines if this menu item has a sub menu\n   * @return {boolean}\n   */\n  hasPopup() {\n    const next = this.nextElementSibling;\n    // if (next && next['element'] === Components.menu ) {\n    // the component may not be initialized yet...\n    if (next && next.nodeName.indexOf('SCW-MENU') === 0 ) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n  * Way to extend valid design icon types...\n  * @return {boolean}\n  */\n  doShowIcon() : boolean {\n    const superDoShowIcon = super.doShowIcon();\n    if ( superDoShowIcon &&\n    this.design !== ScwMenuItemDesigns.main\n    ) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n  * Way to extend valid design types...\n  * @return {object} object of valid designs relative to this object\n  */\n  validDesigns() : object {\n    return {\n      ...super.validDesigns(),\n      ...ScwMenuItemDesigns,\n    };\n  }\n\n  /** connectedCallback */\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (this.hasPopup() ) {\n      this.setAttribute( 'aria-haspopup', 'true' );\n    }\n  }\n\n  /**\n   * renderContent\n   * @return {object}\n   */\n  renderContent() {\n    if (\n      this.design === ScwMenuItemDesigns.main &&\n      this.ariaSelected === 'true'\n    ) {\n       this.setAttribute( 'aria-current', 'page' );\n       // protect initial flex-v...a link with icons is flex-h\n       return html`\n          <div>${super.renderContent()}</div>\n          <div class=\"selected\"></div>\n        `;\n    } else {\n        this.removeAttribute( 'aria-current' );\n       return super.renderContent();\n    }\n  }\n\n  /**\n  *\n  * @return {object}\n  */\n  render(): object {\n    return this.renderLink(\n      this.renderContent(),\n    );\n  }\n}\n"],
-  "mappings": "0MACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCiBf,mBAAyC,EAAQ,CAwB9C,aAAc,CACZ,MAAM,EAlBP,kBAAe,QAmBd,KAAK,QAAU,YACf,KAAK,aAAa,OAAQ,UAAU,CACtC,WAdW,SAAS,CAClB,MAAO,CACL,MAAM,OACN,CACF,CACF,CAeD,UAAW,CACT,GAAM,GAAO,KAAK,mBAGlB,MAAI,MAAQ,EAAK,SAAS,QAAQ,UAAU,IAAM,EAIpD,CAMA,YAAuB,CAErB,MAAK,GADmB,MAAM,WAAW,GAEzC,KAAK,SAAW,OAKlB,CAMA,cAAwB,CACtB,MAAO,IACF,MAAM,aAAa,KACnB,CACL,CACF,CAGA,mBAA0B,CACxB,MAAM,kBAAkB,EACpB,KAAK,SAAS,GAChB,KAAK,aAAc,gBAAiB,MAAO,CAE/C,CAMA,eAAgB,CACd,MACE,MAAK,SAAW,QAChB,KAAK,eAAiB,OAErB,MAAK,aAAc,eAAgB,MAAO,EAEnC;AAAA,iBACG,MAAM,cAAc;AAAA;AAAA,WAI7B,MAAK,gBAAiB,cAAe,EAC/B,MAAM,cAAc,EAEhC,CAMA,QAAiB,CACf,MAAO,MAAK,WACV,KAAK,cAAc,CACrB,CACF,CACF,EApGI,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,eAAe,CAAC,GAClD,AAPJ,EAOI",
-  "names": []
-}