scu-web-components 0.0.18 → 0.0.19

package/dist/chunks/chunk.GAUGNKEW.js

@@ -0,0 +1,255 @@
+import{a as n,b as e}from"./chunk.RGGLFZST.js";import{a as g}from"./chunk.SIYIAYTY.js";import{c}from"./chunk.OXJR2CBC.js";import{a as r,b as a,c as s,e as l}from"./chunk.HCMPRDIX.js";import{a as d}from"./chunk.UM2EZXNH.js";import{g as i}from"./chunk.5YJY6NT6.js";var h=r`
+:host {
+  /* scw element */
+  position: relative;
+  box-sizing: border-box;
+  --margin-right: initial;
+  --margin-bottom: initial;
+  --gap-h-int: initial;
+  --gap-v-int: initial;
+  margin-right: var(--margin-right, var(--gap-h-int, initial));
+  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
+  display: block;
+}
+
+:host([warning]) {
+  outline: 2px solid red !important;
+}
+
+:host([size=medium]) {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.image-box {
+    width: 100%;
+    padding-bottom: 38.8888888889%;
+    position: relative;
+  }*/
+  /*.image {
+    @include size-medium-image-mixins.box;
+
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+  }*/
+  /*.action {
+    @include size-medium-action-mixins.box;
+    @include size-medium-action-mixins.sizing;
+  }*/
+}
+:host([size=medium]) > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host([size=medium]) .image-box {
+  height: 161px;
+}
+:host([size=medium]) .description {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+
+:host([size=small]) {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.image-box {
+    width: 100%;
+    padding-bottom: 88.9473684211%;
+    position: relative;
+  }*/
+  /*.image {
+    @include size-small-image-mixins.box;
+
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+  }*/
+}
+:host([size=small]) > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host([size=small]) .image-box {
+  height: 169px;
+}
+:host([size=small]) .description {
+  display: none;
+}
+:host([size=small]) .action {
+  display: none;
+}
+
+:host .super-heading.mortgage {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-mortgage-04));
+  align-self: stretch;
+}
+:host .super-heading.savings {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-savings-04));
+  align-self: stretch;
+}
+:host .super-heading.student {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-student-04));
+  align-self: stretch;
+}
+:host .super-heading.investments {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-investments-04));
+  align-self: stretch;
+}
+:host .super-heading.checking {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-checking-04));
+  align-self: stretch;
+}
+:host .super-heading.credit-cards {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-credit-cards-04));
+  align-self: stretch;
+}
+
+:host {
+  display: block;
+  background-color: var(--scw-color, rgba(0, 0, 0, 0));
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.image {
+    @include default-image-mixins.box;
+
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+  }*/
+}
+:host > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host .image-box {
+  background-color: var(--scw-color-09, var(--scw-color-grey-09));
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  flex: 1;
+  flex: initial;
+  overflow: hidden;
+  height: 345px;
+}
+:host .heading {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+}
+:host .super-heading {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-03, var(--scw-color-primary-03));
+  align-self: stretch;
+}
+:host .description {
+  text-align: LEFT;
+  font: var(--scw-type-text-06-font);
+  color: var(--scw-color-02, var(--scw-color-grey-02));
+  align-self: stretch;
+}
+:host .action {
+  width: 83px;
+  height: 32px;
+}
+
+:host([action=none]) {
+  pointer-events: none;
+}
+
+:host([action=whole]) {
+  pointer-events: all;
+}
+
+:host([action=whole]:hover) {
+  cursor: pointer;
+}
+
+:host([action=whole]:focus-visible) {
+  outline: none;
+  box-shadow: var(--scw-effect-focus-shadow);
+  border-radius: 10px 10px 4px 4px;
+}
+
+:host([action=link]) {
+  pointer-events: none;
+}
+:host([action=link]) scw-link {
+  pointer-events: all;
+}`;var t=class extends c{constructor(){super();this.size="large";this.action="none";this.element="card",this.clickHandler=this.clickHandler.bind(this);let o=g();this.headerNodeName=n(`scw-${"heading"}${o}`),this.imageNodeName=n(`scw-${"image"}${o}`),this.linkNodeName=n(`scw-${"link"}${o}`)}static get styles(){return[super.styles,h]}parseAndValidateLightDom(){d(this),super.parseAndValidateLightDom()}clickHandler(o){o.stopPropagation(),this.click()}warn(o){this._heading=`error: ${o}`,l.prototype.warn.call(this,o)}renderImage(){if((this.src||this.srcset)&&this.alt)return e`
+        <${this.imageNodeName}
+            class="image-box"
+            src="${this.src}"
+            srcset="${this.srcset}"
+            aria-label="${this.alt}"
+            object-fit="cover">
+        </${this.imageNodeName}>
+      `}renderHeading(){return e`
+      <${this.headerNodeName}
+        dynamic class="heading">
+        <h1>${this._heading}</h1>
+      </${this.headerNodeName}>`}renderButton(){return this.action==="link"?e`
+        <${this.linkNodeName}
+          aria-label="${this._linkLabel?this._linkLabel:"no label"}" 
+          @click="${this.clickHandler}">
+        </${this.linkNodeName}>`:null}renderBody(){return e`
+       ${this.renderImage()}
+       ${this._superHeading?e`
+          <div class="super-heading">
+            ${this._superHeading}
+          </div>`:""}
+       <${this.headerNodeName}
+          dynamic class="heading">
+          ${this.size==="large"?e`
+            <h1>${this._heading}</h1>
+          `:""}
+          ${this.size==="medium"?e`
+            <h2>${this._heading}</h2>
+          `:""}
+          ${this.size==="small"?e`
+            <h3>${this._heading}</h3>
+          `:""}
+        </${this.headerNodeName}>
+       ${this._description?e`
+          <div class="description">
+            ${this._description}
+          </div>`:""}`}render(){return this.action==="whole"?this.renderBody():e`
+        ${this.renderBody()}
+        ${this.renderButton()}`}};i([s()],t.prototype,"src",2),i([s()],t.prototype,"srcset",2),i([s()],t.prototype,"alt",2),i([s()],t.prototype,"_heading",2),i([s()],t.prototype,"_superHeading",2),i([s()],t.prototype,"_description",2),i([s()],t.prototype,"_linkLabel",2),i([a({type:String,reflect:!0})],t.prototype,"size",2),i([a({type:String,reflect:!0})],t.prototype,"action",2);export{t as a};
+//# sourceMappingURL=chunk.GAUGNKEW.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-card/scss/scw-card.scss", "../../src/scw-card/ScwCard.ts"],
+  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  /* scw element */\n  position: relative;\n  box-sizing: border-box;\n  --margin-right: initial;\n  --margin-bottom: initial;\n  --gap-h-int: initial;\n  --gap-v-int: initial;\n  margin-right: var(--margin-right, var(--gap-h-int, initial));\n  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));\n  display: block;\n}\n\n:host([warning]) {\n  outline: 2px solid red !important;\n}\n\n:host([size=medium]) {\n  display: block;\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: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  /*.image-box {\n    width: 100%;\n    padding-bottom: 38.8888888889%;\n    position: relative;\n  }*/\n  /*.image {\n    @include size-medium-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n  /*.action {\n    @include size-medium-action-mixins.box;\n    @include size-medium-action-mixins.sizing;\n  }*/\n}\n:host([size=medium]) > *: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([size=medium]) .image-box {\n  height: 161px;\n}\n:host([size=medium]) .description {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-02);\n  align-self: stretch;\n}\n\n:host([size=small]) {\n  display: block;\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: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  /*.image-box {\n    width: 100%;\n    padding-bottom: 88.9473684211%;\n    position: relative;\n  }*/\n  /*.image {\n    @include size-small-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n}\n:host([size=small]) > *: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([size=small]) .image-box {\n  height: 169px;\n}\n:host([size=small]) .description {\n  display: none;\n}\n:host([size=small]) .action {\n  display: none;\n}\n\n:host .super-heading.mortgage {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-04, var(--scw-color-mortgage-04));\n  align-self: stretch;\n}\n:host .super-heading.savings {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-04, var(--scw-color-savings-04));\n  align-self: stretch;\n}\n:host .super-heading.student {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-04, var(--scw-color-student-04));\n  align-self: stretch;\n}\n:host .super-heading.investments {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-04, var(--scw-color-investments-04));\n  align-self: stretch;\n}\n:host .super-heading.checking {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-04, var(--scw-color-checking-04));\n  align-self: stretch;\n}\n:host .super-heading.credit-cards {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-04, var(--scw-color-credit-cards-04));\n  align-self: stretch;\n}\n\n:host {\n  display: block;\n  background-color: var(--scw-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: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  /*.image {\n    @include default-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n}\n:host > *: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 .image-box {\n  background-color: var(--scw-color-09, var(--scw-color-grey-09));\n  border-radius: 10px 10px 10px 10px;\n  align-self: stretch;\n  flex: 1;\n  flex: initial;\n  overflow: hidden;\n  height: 345px;\n}\n:host .heading {\n  background-color: rgba(0, 0, 0, 0);\n  align-self: stretch;\n}\n:host .super-heading {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-03, var(--scw-color-primary-03));\n  align-self: stretch;\n}\n:host .description {\n  text-align: LEFT;\n  font: var(--scw-type-text-06-font);\n  color: var(--scw-color-02, var(--scw-color-grey-02));\n  align-self: stretch;\n}\n:host .action {\n  width: 83px;\n  height: 32px;\n}\n\n:host([action=none]) {\n  pointer-events: none;\n}\n\n:host([action=whole]) {\n  pointer-events: all;\n}\n\n:host([action=whole]:hover) {\n  cursor: pointer;\n}\n\n:host([action=whole]:focus-visible) {\n  outline: none;\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 10px 10px 4px 4px;\n}\n\n:host([action=link]) {\n  pointer-events: none;\n}\n:host([action=link]) scw-link {\n  pointer-events: all;\n}`;\n", "import {property, state} from 'lit/decorators.js';\nimport {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport styles from './scss/scw-card.scss';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {ScwCardSizes, ScwCardActions} from './scw-card-enums';\nimport parseLightDomCard from './scw-card-light-dom';\nimport ScwLinkBase from '../scw-link-base/ScwLinkBase';\nimport {Components} from '../utils/enums/Components';\nimport getSuffix from '../utils/suffix';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n *\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p />\"]\n    The parts of scw-card are configured via nested html elements.\n    img defines the image, heading the main heading, sup the category heading,\n    and p the descriptive text. Only headings is required (with src, srcset,\n    and alt attributes).\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p /><a />\"]\n    Adding an anchor will show a link.\n * @slot [default=\"<a><img src alt /><h1, h2, h3 /><sup /><p /></a>\"]\n    Wrapping the entire content in an anchor will make it interactive\n */\nexport default class ScwCard extends ScwLinkBase {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwCard ====================================================\n  /** (ScwCard) The src of the image within the card */\n  @state() src: string | undefined;\n\n  /** (ScwCard) The srcset of the image within the card */\n  @state() srcset: string | undefined;\n\n  /** (ScwCard) Alternative description of the image. */\n  @state() alt: string | undefined;\n\n  /** (ScwCard) Main title or header of the card (determined by\n  * <h1, h2, h3> content) */\n  @state() _heading: string | undefined;\n\n  /** (ScwCard) Super title, describing a category or area pertaining to title\n  * (determined by <sup> content) */\n  @state() _superHeading: string | undefined;\n\n  /** (ScwCard) Fuller description of what the card is about (determined by\n  * <p> content) */\n  @state() _description: string | undefined;\n\n  /** (ScwCard) Label on the link */\n  @state() _linkLabel : string | undefined;\n\n  // ----------- END STATES ----------------------------------------------------\n  /** (ScwCard) Readonly - Size of the card. This\n  * is determined by the nested html content (h1  = large,\n  * h2 = medium, h3 = small). */\n  @property({type: String, reflect: true})\n    size: ScwCardSizes = ScwCardSizes.large;\n\n  /** (ScwCard) Readonly - The type of action (whole card, link, or none).\n   * This is determined by the use of an anchor tag. */\n  @property({type: String, reflect: true})\n    action: ScwCardActions = ScwCardActions.none;\n\n  /** scw-header with versioning suffix */\n  headerNodeName : any;\n\n  /** scw-image with versioning suffix */\n  imageNodeName : any;\n\n  /** scw-link with versioning suffix */\n  linkNodeName : any;\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.card;\n    this.clickHandler = this.clickHandler.bind(this);\n\n    const suffix = getSuffix();\n    this.headerNodeName = unsafeStatic(`scw-${Components.heading}${suffix}`);\n    this.imageNodeName = unsafeStatic(`scw-${Components.image}${suffix}`);\n    this.linkNodeName = unsafeStatic(`scw-${Components.link}${suffix}`);\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    parseLightDomCard(this);\n    super.parseAndValidateLightDom();\n  }\n\n  /**\n  * Handle click event from link so it doesn't trigger twice\n  * @param {Event} evt\n  */\n  clickHandler(evt : Event) {\n    evt.stopPropagation();\n    this.click();\n  }\n\n  /**\n  * change the main heading to be the error.\n  * @param {string} message describing warning\n  */\n  warn( message: string ) {\n    this._heading = `error: ${message}`;\n    ScwComponent.prototype.warn.call(this, message );\n  }\n\n  /**\n  * Render image area\n  * @return {object} component DOM\n  */\n  renderImage() {\n    if (\n      ( this.src || this.srcset ) &&\n      this.alt ) {\n      return html`\n        <${this.imageNodeName}\n            class=\"image-box\"\n            src=\"${this.src}\"\n            srcset=\"${this.srcset}\"\n            aria-label=\"${this.alt}\"\n            object-fit=\"cover\">\n        </${this.imageNodeName}>\n      `;\n    }\n  }\n\n  /**\n  * Render heading area\n  * @return {object} component DOM\n  */\n  renderHeading() {\n    return html`\n      <${this.headerNodeName}\n        dynamic class=\"heading\">\n        <h1>${this._heading}</h1>\n      </${this.headerNodeName}>`;\n  }\n\n  /**\n  * Render link area\n  * @return {object} component DOM\n  */\n  renderButton() {\n    if ( this.action === ScwCardActions.link) {\n      return html`\n        <${this.linkNodeName}\n          aria-label=\"${this._linkLabel ? this._linkLabel : 'no label'}\" \n          @click=\"${this.clickHandler}\">\n        </${this.linkNodeName}>`;\n    }\n    return null;\n  }\n\n  /**\n  * render body\n  * @return {object} component DOM\n  */\n  renderBody() : object {\n    return html`\n       ${this.renderImage()}\n       ${this._superHeading ?\n          html`\n          <div class=\"super-heading\">\n            ${this._superHeading}\n          </div>` : ''\n        }\n       <${this.headerNodeName}\n          dynamic class=\"heading\">\n          ${(this.size === ScwCardSizes.large) ? html`\n            <h1>${this._heading}</h1>\n          ` : ''}\n          ${(this.size === ScwCardSizes.medium) ? html`\n            <h2>${this._heading}</h2>\n          ` : ''}\n          ${(this.size === ScwCardSizes.small) ? html`\n            <h3>${this._heading}</h3>\n          ` : ''}\n        </${this.headerNodeName}>\n       ${this._description ?\n          html`\n          <div class=\"description\">\n            ${this._description}\n          </div>` : ''\n        }`;\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render() : object {\n    if (this.action === ScwCardActions.whole) {\n      return this.renderBody();\n    } else {\n      return html`\n        ${this.renderBody()}\n        ${this.renderButton()}`;\n    };\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/chunk.GEHNDSAW.js

@@ -0,0 +1,4 @@
+import{a as u}from"./chunk.T3QMCSC3.js";import{b as n,c as r,e as f}from"./chunk.6ITKITRF.js";import{a as o}from"./chunk.ZS4C3T6Z.js";import{g as a}from"./chunk.5YJY6NT6.js";var c=(e=>(e.text="text",e.boolean="boolean",e.submit="submit",e))(c||{}),h=(i=>(i.submit="submit",i.cancel="cancel",i))(h||{}),t=class extends f{constructor(){super(...arguments);this.formType="text";this.value="";this.placeholder="";this.selected=!1;this.readOnly=!1;this.required=!1;this.requiredLabel=" *";this.focused=!1;this.invalid=!1}connectedCallback(){super.connectedCallback(),this.required&&this.createAndAddValidationRule("required",this.requiredFeedback)}decorateValues(i){if(!this.name){this.warn(`${this.element} didn't find a name`);return}this.formType==="boolean"?i[this.name]=this.selected:i[this.name]=this.value}findIfRequired(){let i=this.findValidationRules();return i?i.isRequired():!1}findValidationRules(){return Array.from(this.children).find(l=>l.nodeName.indexOf("SCW-VALIDATION")===0)}validate(){let i=this.findValidationRules(),e=[];return i&&(e=i.validate(this.value)),this.invalid=e.length>0,this.invalid?this.feedback=e[0].feedback:this.feedback="",e}createValidateRule(){return document.createElement(`scw-${"validate"}${u()}`)}addValidationRule(i){let e=this.findValidationRules();e||(e=document.createElement(`scw-${"validation"}${u()}`),this.prepend(e)),Array.from(e.children).find(s=>s.getAttribute("type")===i.type)||e.appendChild(i)}createAndAddValidationRule(i,e){let l=this.createValidateRule();l.setAttribute("type",i),e&&l.setAttribute("feedback",e),this.addValidationRule(l)}removeValidationRule(i){let e=this.findValidationRules();if(!e)return;let d=Array.from(e.children).find(s=>s.type===i);d&&d.parentNode&&d.parentNode.removeChild(d)}render(){return o`
+      scw-form-component
+    `}};a([n({type:c,reflect:!0,attribute:"form-type"})],t.prototype,"formType",2),a([n({type:String})],t.prototype,"name",2),a([n({type:String})],t.prototype,"value",2),a([n({type:String})],t.prototype,"placeholder",2),a([n({type:String})],t.prototype,"selected",2),a([n({type:Boolean,attribute:"read-only"})],t.prototype,"readOnly",2),a([n({type:Boolean})],t.prototype,"required",2),a([n({type:String,attribute:"required-label"})],t.prototype,"requiredLabel",2),a([n({type:String,attribute:"required-feedback"})],t.prototype,"requiredFeedback",2),a([r()],t.prototype,"feedback",2),a([r()],t.prototype,"focused",2),a([r()],t.prototype,"invalid",2);export{c as a,h as b,t as c};
+//# sourceMappingURL=chunk.GEHNDSAW.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/scw-form-component/scw-form-component.ts"],
+  "sourcesContent": ["import {html} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {Components} from '../utils/enums/Components';\nimport ScwValidate from '../scw-validate/scw-validate';\nimport ScwValidation from '../scw-validation/scw-validation';\nimport {ValidationResult, ValidationTypes}\n  from '../scw-validate/validationTypes';\nimport getSuffix from '../utils/suffix';\n\nexport enum ScwFormComponentTypes {\n  text = 'text',\n  boolean = 'boolean',\n  submit = 'submit'\n}\n\nexport enum ScwFormComponentSubmitTypes {\n  submit = 'submit',\n  cancel = 'cancel'\n}\n\n/**\n * ScwFormComponent\n * @class\n * @tag scw-form-component\n */\nexport default class ScwFormComponent extends ScwComponent {\n  // ============== ScwFormComponent ===========================================\n  /** (ScwFormComponent) the usage in a form (& scw-form a query target) */\n  @property({\n    type: ScwFormComponentTypes,\n    reflect: true,\n    attribute: 'form-type',\n  })\n    formType: ScwFormComponentTypes = ScwFormComponentTypes.text;\n\n  /** (ScwFormComponent) name to identify form element and attach data */\n  @property({type: String})\n    name: string | undefined;\n\n  /** (ScwFormComponent) name to identify form element and attach data */\n  @property({type: String})\n    value: string = '';\n\n  /** (ScwFormComponent) text showing when there is no value */\n  @property({type: String})\n    placeholder: string = '';\n\n  /** (ScwFormComponent) name to identify form element and attach data */\n  @property({type: String})\n    selected: boolean = false;\n\n  /** (ScwFormComponent) read-only state management */\n  @property({type: Boolean, attribute: 'read-only'})\n    readOnly: boolean = false;\n\n  /** (ScwFormComponent) required state management */\n  @property({type: Boolean})\n    required: boolean = false;\n\n  /** (ScwFormComponent) label indicator for required */\n  @property({type: String, attribute: 'required-label'})\n    requiredLabel: string = ' *';\n\n  /** (ScwFormComponent) label indicator for required */\n  @property({type: String, attribute: 'required-feedback'})\n    requiredFeedback?: string;\n\n  // ===== STATE ===============================================================\n  /** the text to use for feedback */\n  @state() feedback: string | undefined;\n\n  /** determines whether the input is focused or not */\n  @state() focused : boolean = false;\n\n  /** whether this form element is valid, passed validation */\n  @state() invalid: boolean = false;\n\n  /** connectedCallback */\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (this.required) {\n      this.createAndAddValidationRule(\n        ValidationTypes.required,\n        this.requiredFeedback,\n      );\n    }\n  }\n\n  /** (ScwFormComponent) each form element to decorates the final data object\n  * @param {Object} formData\n  */\n  decorateValues(formData: {}): void {\n    if (!this.name) {\n      this.warn(`${this.element} didn't find a name`);\n      return;\n    }\n    if (this.formType === ScwFormComponentTypes.boolean) {\n      formData[this.name] = this.selected;// ? 'true' : 'false';\n    } else {\n      formData[this.name] = this.value;\n    }\n  }\n\n  /**\n  * Check to see if form element is required w/o knowing if there is validation\n  * @return {boolean}\n  */\n  findIfRequired() : boolean {\n    const rules = this.findValidationRules();\n    if (rules) {\n      return rules.isRequired();\n    }\n    return false;\n  }\n\n  /**\n  * Find validation child if there...\n  * @return {ScwValidation | undefined}\n  */\n  findValidationRules() : ScwValidation | undefined {\n    const childrenArr = Array.from(this.children);\n    const validation = childrenArr.find((child: any) => {\n      // component may not be initialized yet...\n      return child.nodeName.indexOf('SCW-VALIDATION') === 0;\n      // return child.element === Components.validation;\n    });\n    return validation as unknown as ScwValidation;\n  }\n\n  /**\n  *  run the validation rules if there...\n  * @param {string} value\n  * @return {ValidationResult[]}\n  */\n  validate() : ValidationResult[] {\n    const validation = this.findValidationRules();\n    let results : ValidationResult[] = [];\n    if (validation) {\n      results = validation.validate(this.value);\n    }\n    this.invalid = ( results.length > 0);\n    if (this.invalid ) {\n      this.feedback = results[0].feedback;\n    } else {\n      this.feedback = '';\n    }\n    return results;\n  }\n\n\n  /**\n  * create a validation rule from scratch\n  * @return {ScwValidate}\n  */\n  createValidateRule() : ScwValidate {\n    return document.createElement(\n      `scw-${Components.validate}${getSuffix()}`,\n    ) as unknown as ScwValidate;\n  }\n\n  /**\n  * add validation to to child validation (create if not there)\n  * @param {ScwValidate} rule\n  */\n  addValidationRule(rule: ScwValidate ) {\n    let validationRules = this.findValidationRules();\n    if (!validationRules) {\n      validationRules = document.createElement(\n        `scw-${Components.validation}${getSuffix()}`,\n      ) as unknown as ScwValidation;\n      this.prepend( validationRules );\n    }\n    // Check for dups?\n    const children = Array.from(validationRules.children);\n    const existingRule = children.find((child : any) => {\n      return child.getAttribute('type') === rule.type;\n    });\n    if ( !existingRule ) {\n      validationRules.appendChild(rule);\n    }\n  }\n\n  /**\n  * create a validation of a certain type...\n  * @param {ValidationTypes} type\n  * @param {string} feedbackOverride\n  */\n  createAndAddValidationRule(\n    type: ValidationTypes,\n    feedbackOverride?: string,\n  ) {\n    const rule = this.createValidateRule();\n    rule.setAttribute('type', type );// .type = type;\n    if (feedbackOverride) {\n      rule.setAttribute('feedback', feedbackOverride );\n    }\n    this.addValidationRule( rule );\n  }\n\n  /**\n  *\n  * @param {ValidationTypes} type\n  */\n  removeValidationRule(\n    type: ValidationTypes,\n  ) {\n    const validationRules = this.findValidationRules();\n    if (!validationRules) return;\n    const children = Array.from(validationRules.children);\n    const child = children.find(\n      (child : any) => child.type === type,\n    ) as unknown as HTMLElement;\n    if ( child && child.parentNode ) child.parentNode.removeChild(child);\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return html`\n      scw-form-component\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/chunk.GIA75VWA.js

@@ -0,0 +1,2 @@
+import{a as c}from"./chunk.MVHRFH3Q.js";customElements.define("scw-card",c);
+//# sourceMappingURL=chunk.GIA75VWA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/scw-card/scw-card.ts"],
+  "sourcesContent": ["import ScwCard from './ScwCard';\ncustomElements.define('scw-card', ScwCard );\n"],
+  "mappings": "wCACA,eAAe,OAAO,WAAY,CAAQ",
+  "names": []
+}

package/dist/chunks/chunk.GLLPHPHR.js

@@ -0,0 +1,2 @@
+import{a as e}from"./chunk.DVKR3IU2.js";customElements.define("scw-image",e);
+//# sourceMappingURL=chunk.GLLPHPHR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/scw-image/scw-image.ts"],
+  "sourcesContent": ["import ScwImage from './ScwImage.js';\ncustomElements.define('scw-image', ScwImage );\n"],
+  "mappings": "wCACA,eAAe,OAAO,YAAa,CAAS",
+  "names": []
+}

package/dist/chunks/chunk.GT2ISAKW.js

@@ -0,0 +1,2 @@
+import{a as c}from"./chunk.Y6CNGJBQ.js";customElements.define("scw-card",c);
+//# sourceMappingURL=chunk.GT2ISAKW.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/scw-card/scw-card.ts"],
+  "sourcesContent": ["import ScwCard from './ScwCard';\ncustomElements.define('scw-card', ScwCard );\n"],
+  "mappings": "wCACA,eAAe,OAAO,WAAY,CAAQ",
+  "names": []
+}

package/dist/chunks/chunk.H5P26UZX.js

@@ -0,0 +1,182 @@
+import{a as n}from"./chunk.2VW3SHYK.js";import{a,b as o,e as s}from"./chunk.HCMPRDIX.js";import{a as r}from"./chunk.ZS4C3T6Z.js";import{g as t}from"./chunk.5YJY6NT6.js";var l=a`
+:host {
+  background-color: white;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.6);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+}
+:host .input-field-single {
+  flex: 1;
+}
+:host .input-feedback {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color, var(--scw-color-error));
+}
+
+.input-field {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  align-self: stretch;
+  padding: 0;
+}
+.input-field > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.input-field .left-icon {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 4px 0px 0px 4px;
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.input-field .left-icon > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.input-field .left-icon .icon {
+  background-color: rgba(0, 0, 0, 0);
+}
+.input-field .input-text {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+}
+.input-field .right-icon-2 {
+  align-self: center;
+}
+.input-field .right-icon {
+  align-self: center;
+}
+.input-field .right-action {
+  background-color: var(--scw-color-03, var(--scw-color-primary-03));
+  border-radius: 0px 4px 4px 0px;
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 0.4);
+  padding-right: calc(var(--scw-spacing-1) * 0.4);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border-radius: 0;
+}
+.input-field .right-action > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+
+:host .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color-03, var(--scw-color-primary-03));
+  align-self: stretch;
+}
+
+:host([aria-disabled]) .input-field {
+  background-color: var(--scw-color-grey-092);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-08);
+  align-self: stretch;
+}
+
+:host([invalid]) .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color, var(--scw-color-error));
+  align-self: stretch;
+}
+
+:host([focused]) .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color-03, var(--scw-color-primary-03));
+  box-shadow: var(--scw-effect-focus-shadow);
+  align-self: stretch;
+}
+
+::slotted(*) {
+  width: 100%;
+}`;var d=(e=>(e.rightIcon="right-icon",e.right2Icon="right-2-icon",e.rightAction="right-action",e))(d||{}),i=class extends s{constructor(){super();this.hideFeedback=!1;this.element="single-input-layout"}static get styles(){return[super.styles,l]}_right2ClickHandler(c){c.stopPropagation(),n("scw-action",this,{action:"right-2-icon"})}_rightClickHandler(c){c.stopPropagation(),n("scw-action",this,{action:"right-icon"})}_rightActionClickHandler(c){c.stopPropagation(),n("scw-action",this,{action:"right-action"})}render(){return r`
+      <div class="input-field">
+        ${this.leftActionIcon?r`
+            <div class="left-icon">
+              <scw-icon
+                class="icon"
+                .icon="${this.leftActionIcon}"
+                size="30">
+              </scw-icon>
+            </div>`:""}
+        <div class="input-field-single">
+          <slot></slot>
+        </div>
+        ${this.right2Icon?r`
+            <scw-icon
+              class="right-icon-2"
+              .icon="${this.right2Icon}"
+              size="30"
+              aria-label="Clear Input"
+              link
+              @click=${this._right2ClickHandler}>
+            </scw-icon>`:""}
+        ${this.rightIcon?r`
+            <scw-icon
+              class="right-icon"
+              .icon="${this.rightIcon}"
+              size="30"
+              aria-label="Show Password"
+              link
+              @click=${this._rightClickHandler}>
+            </scw-icon>`:""}
+        ${this.rightActionIcon?r`
+            <div class="right-action">
+              <scw-icon
+                class="icon-right-action"
+                .icon="${this.rightActionIcon}"
+                color="white"
+                size="30"
+                aria-label="Submit Search"
+                link
+                @click=${this._rightActionClickHandler}>
+              </scw-icon>
+            </div>`:""}
+      </div>
+      ${this.hideFeedback?"":r`
+          <div class="input-feedback">
+            ${this.feedback}&nbsp;
+          </div>`}
+    `}};t([o({type:String})],i.prototype,"feedback",2),t([o({type:String,attribute:"hide-feedback"})],i.prototype,"hideFeedback",2),t([o({type:String,attribute:"left-action-icon"})],i.prototype,"leftActionIcon",2),t([o({type:String,attribute:"right-action-icon"})],i.prototype,"rightActionIcon",2),t([o({type:String,attribute:"right-icon"})],i.prototype,"rightIcon",2),t([o({type:String,attribute:"right-2-icon"})],i.prototype,"right2Icon",2);export{d as a,i as b};
+//# sourceMappingURL=chunk.H5P26UZX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-single-input-layout/scss/scw-single-input-layout.scss", "../../src/scw-single-input-layout/scw-single-input-layout.ts"],
+  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  background-color: white;\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n:host > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.6);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );\n}\n:host .input-field-single {\n  flex: 1;\n}\n:host .input-feedback {\n  background-color: rgba(0, 0, 0, 0);\n  align-self: stretch;\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color, var(--scw-color-error));\n}\n\n.input-field {\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: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  align-self: stretch;\n  padding: 0;\n}\n.input-field > *:not(:last-child) {\n  margin-right: 0px;\n  --margin-right: 0px;\n}\n.input-field .left-icon {\n  background-color: var(--scw-color-grey-095);\n  border-radius: 4px 0px 0px 4px;\n  align-self: stretch;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.input-field .left-icon > *:not(:last-child) {\n  margin-right: var(--scw-spacing-1);\n  --margin-right: var( --scw-spacing-1 );\n}\n.input-field .left-icon .icon {\n  background-color: rgba(0, 0, 0, 0);\n}\n.input-field .input-text {\n  background-color: rgba(0, 0, 0, 0);\n  flex: 1;\n}\n.input-field .right-icon-2 {\n  align-self: center;\n}\n.input-field .right-icon {\n  align-self: center;\n}\n.input-field .right-action {\n  background-color: var(--scw-color-03, var(--scw-color-primary-03));\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 0.4);\n  padding-right: calc(var(--scw-spacing-1) * 0.4);\n  padding-top: 0px;\n  padding-bottom: 0px;\n  border-radius: 0;\n}\n.input-field .right-action > *:not(:last-child) {\n  margin-right: var(--scw-spacing-1);\n  --margin-right: var( --scw-spacing-1 );\n}\n\n:host .input-field {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-03, var(--scw-color-primary-03));\n  align-self: stretch;\n}\n\n:host([aria-disabled]) .input-field {\n  background-color: var(--scw-color-grey-092);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-grey-08);\n  align-self: stretch;\n}\n\n:host([invalid]) .input-field {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color, var(--scw-color-error));\n  align-self: stretch;\n}\n\n:host([focused]) .input-field {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-03, var(--scw-color-primary-03));\n  box-shadow: var(--scw-effect-focus-shadow);\n  align-self: stretch;\n}\n\n::slotted(*) {\n  width: 100%;\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {Components} from '../utils/enums/Components';\nimport styles from './scss/scw-single-input-layout.scss';\nimport {emit, ScwEvents} from '../utils/events/event';\n\n\nexport enum ScwSingleInputLayoutActions {\n  rightIcon = 'right-icon',\n  right2Icon = 'right-2-icon',\n  rightAction = 'right-action'\n}\n\n/**\n * ScwSingleInputLayout\n * @class\n * @tag scw-single-input-layout\n * @status new\n * @since 0.0.5\n *\n * @event scw-action - This fires when one of the various icons or submit\n *  button is clicked. detail is {action:\n * 'right-icon'|'right-2-icon'|'right-action'}\n */\nexport default class ScwSingleInputLayout extends ScwComponent {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  /** constructor */\n  constructor() {\n    super();\n    this.element = Components.singleInputLayout;\n  }\n\n  // ============== ScwSingleInputLayout =======================================\n  /** (ScwSingleInputLayout) the text to use for feedback */\n  @property({type: String})\n    feedback: string | undefined;\n\n  /** (ScwSingleInputLayout) hides the feedback label */\n  @property({type: String, attribute: 'hide-feedback'})\n   hideFeedback: boolean = false;\n\n  /** (ScwSingleInputLayout) shows left action section and determines what icon\n  * is used within the left action. */\n  @property({type: String, attribute: 'left-action-icon'})\n    leftActionIcon: string | undefined;\n\n  /** (ScwSingleInputLayout) shows right action section and determines what icon\n  * is used within the right action. */\n  @property({type: String, attribute: 'right-action-icon'})\n   rightActionIcon: string | undefined;\n\n  /** (ScwSingleInputLayout) shows first right icon and determines the icon\n  * svg. */\n  @property({type: String, attribute: 'right-icon'})\n   rightIcon: string | undefined;\n\n  /** (ScwSingleInputLayout) shows second right icon and determines the icon\n  * svg. */\n  @property({type: String, attribute: 'right-2-icon'})\n    right2Icon: string | undefined;\n\n  /**\n  * Handle click from right 2 icon.\n  * @param {Event} evt\n  */\n  _right2ClickHandler(evt : Event) {\n    evt.stopPropagation();\n    emit(\n      ScwEvents.action, this,\n      {action: ScwSingleInputLayoutActions.right2Icon},\n    );\n  }\n\n  /**\n  * Handle click from right icon.\n  * @param {Event} evt\n  */\n  _rightClickHandler(evt : Event) {\n    evt.stopPropagation();\n    emit(\n      ScwEvents.action, this,\n      {action: ScwSingleInputLayoutActions.rightIcon},\n    );\n  }\n\n  /**\n  * Handle click from right action icon.\n  * @param {Event} evt\n  */\n  _rightActionClickHandler(evt : Event) {\n    evt.stopPropagation();\n    emit(\n      ScwEvents.action, this,\n      {action: ScwSingleInputLayoutActions.rightAction},\n    );\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return html`\n      <div class=\"input-field\">\n        ${this.leftActionIcon ?\n    html`\n            <div class=\"left-icon\">\n              <scw-icon\n                class=\"icon\"\n                .icon=\"${this.leftActionIcon}\"\n                size=\"30\">\n              </scw-icon>\n            </div>` : ''}\n        <div class=\"input-field-single\">\n          <slot></slot>\n        </div>\n        ${this.right2Icon ?\n    html`\n            <scw-icon\n              class=\"right-icon-2\"\n              .icon=\"${this.right2Icon}\"\n              size=\"30\"\n              aria-label=\"Clear Input\"\n              link\n              @click=${this._right2ClickHandler}>\n            </scw-icon>` : '' }\n        ${this.rightIcon ?\n    html`\n            <scw-icon\n              class=\"right-icon\"\n              .icon=\"${this.rightIcon}\"\n              size=\"30\"\n              aria-label=\"Show Password\"\n              link\n              @click=${this._rightClickHandler}>\n            </scw-icon>` : '' }\n        ${this.rightActionIcon ?\n    html`\n            <div class=\"right-action\">\n              <scw-icon\n                class=\"icon-right-action\"\n                .icon=\"${this.rightActionIcon}\"\n                color=\"white\"\n                size=\"30\"\n                aria-label=\"Submit Search\"\n                link\n                @click=${this._rightActionClickHandler}>\n              </scw-icon>\n            </div>` : '' }\n      </div>\n      ${!this.hideFeedback ?\n    html`\n          <div class=\"input-feedback\">\n            ${this.feedback}&nbsp;\n          </div>` : ''}\n    `;\n  }\n}\n\n"],
+  "mappings": "yKACA,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;GCOR,GAAK,GAAL,CAAK,GACV,aAAY,aACZ,aAAa,eACb,cAAc,eAHJ,WAiBZ,eAAkD,EAAa,CAY7D,aAAc,CACZ,MAAM,EAWP,kBAAwB,GAVvB,KAAK,QAAU,qBACjB,WAXY,SAAS,CACnB,MAAO,CACL,MAAM,OACN,CACF,CACF,CAyCA,oBAAoB,EAAa,CAC/B,EAAI,gBAAgB,EACpB,EACE,aAAkB,KAClB,CAAC,OAAQ,cAAsC,CACjD,CACF,CAMA,mBAAmB,EAAa,CAC9B,EAAI,gBAAgB,EACpB,EACE,aAAkB,KAClB,CAAC,OAAQ,YAAqC,CAChD,CACF,CAMA,yBAAyB,EAAa,CACpC,EAAI,gBAAgB,EACpB,EACE,aAAkB,KAClB,CAAC,OAAQ,cAAuC,CAClD,CACF,CAMA,QAAiB,CACf,MAAO;AAAA;AAAA,UAED,KAAK,eACX;AAAA;AAAA;AAAA;AAAA,yBAIqB,KAAK;AAAA;AAAA;AAAA,oBAGR;AAAA;AAAA;AAAA;AAAA,UAIZ,KAAK,WACX;AAAA;AAAA;AAAA,uBAGmB,KAAK;AAAA;AAAA;AAAA;AAAA,uBAIL,KAAK;AAAA,yBACD;AAAA,UACjB,KAAK,UACX;AAAA;AAAA;AAAA,uBAGmB,KAAK;AAAA;AAAA;AAAA;AAAA,uBAIL,KAAK;AAAA,yBACD;AAAA,UACjB,KAAK,gBACX;AAAA;AAAA;AAAA;AAAA,yBAIqB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKL,KAAK;AAAA;AAAA,oBAER;AAAA;AAAA,QAEd,AAAC,KAAK,aAIM,GAHhB;AAAA;AAAA,cAEU,KAAK;AAAA;AAAA,KAGjB,CACF,EA1HI,GADF,AAAC,EAAS,CAAC,KAAM,MAAM,CAAC,GACtB,AApBJ,EAoBI,wBAID,GADD,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,eAAe,CAAC,GACnD,AAxBH,EAwBG,4BAKC,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,kBAAkB,CAAC,GACrD,AA7BJ,EA6BI,8BAKD,GADD,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,mBAAmB,CAAC,GACvD,AAlCH,EAkCG,+BAKA,GADD,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,YAAY,CAAC,GAChD,AAvCH,EAuCG,yBAKC,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,cAAc,CAAC,GACjD,AA5CJ,EA4CI",
+  "names": []
+}

package/dist/chunks/chunk.HCMPRDIX.js

@@ -0,0 +1,35 @@
+import{a as O}from"./chunk.BK6PO2CX.js";import{a as k}from"./chunk.WWTEGHW5.js";import{a as A,c as U,e as R}from"./chunk.ZS4C3T6Z.js";import{g as u}from"./chunk.5YJY6NT6.js";var f=window.ShadowRoot&&(window.ShadyCSS===void 0||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,g=Symbol(),L=new Map,m=class{constructor(t,e){if(this._$cssResult$=!0,e!==g)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=L.get(this.cssText);return f&&t===void 0&&(L.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}},T=i=>new m(typeof i=="string"?i:i+"",g),E=(i,...t)=>{let e=i.length===1?i[0]:t.reduce((r,o,s)=>r+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+i[s+1],i[0]);return new m(e,g)},b=(i,t)=>{f?i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{let r=document.createElement("style"),o=window.litNonce;o!==void 0&&r.setAttribute("nonce",o),r.textContent=e.cssText,i.appendChild(r)})},v=f?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return T(e)})(i):i;var S,M=window.trustedTypes,B=M?M.emptyScript:"",q=window.reactiveElementPolyfillSupport,$={toAttribute(i,t){switch(t){case Boolean:i=i?B:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch{e=null}}return e}},D=(i,t)=>t!==i&&(t==t||i==i),_={attribute:!0,type:String,converter:$,reflect:!1,hasChanged:D},a=class extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;(e=this.l)!==null&&e!==void 0||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();let t=[];return this.elementProperties.forEach((e,r)=>{let o=this._$Eh(r,e);o!==void 0&&(this._$Eu.set(o,r),t.push(o))}),t}static createProperty(t,e=_){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){let r=typeof t=="symbol"?Symbol():"__"+t,o=this.getPropertyDescriptor(t,r,e);o!==void 0&&Object.defineProperty(this.prototype,t,o)}}static getPropertyDescriptor(t,e,r){return{get(){return this[e]},set(o){let s=this[t];this[e]=o,this.requestUpdate(t,s,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||_}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;let t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){let e=this.properties,r=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(let o of r)this.createProperty(o,e[o])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let o of r)e.unshift(v(o))}else t!==void 0&&e.push(v(t));return e}static _$Eh(t,e){let r=e.attribute;return r===!1?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Em(),this.requestUpdate(),(t=this.constructor.l)===null||t===void 0||t.forEach(e=>e(this))}addController(t){var e,r;((e=this._$Eg)!==null&&e!==void 0?e:this._$Eg=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((r=t.hostConnected)===null||r===void 0||r.call(t))}removeController(t){var e;(e=this._$Eg)===null||e===void 0||e.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;let e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return b(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$Eg)===null||t===void 0||t.forEach(e=>{var r;return(r=e.hostConnected)===null||r===void 0?void 0:r.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$Eg)===null||t===void 0||t.forEach(e=>{var r;return(r=e.hostDisconnected)===null||r===void 0?void 0:r.call(e)})}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$ES(t,e,r=_){var o,s;let n=this.constructor._$Eh(t,r);if(n!==void 0&&r.reflect===!0){let l=((s=(o=r.converter)===null||o===void 0?void 0:o.toAttribute)!==null&&s!==void 0?s:$.toAttribute)(e,r.type);this._$Ei=t,l==null?this.removeAttribute(n):this.setAttribute(n,l),this._$Ei=null}}_$AK(t,e){var r,o,s;let n=this.constructor,l=n._$Eu.get(t);if(l!==void 0&&this._$Ei!==l){let x=n.getPropertyOptions(l),y=x.converter,V=(s=(o=(r=y)===null||r===void 0?void 0:r.fromAttribute)!==null&&o!==void 0?o:typeof y=="function"?y:null)!==null&&s!==void 0?s:$.fromAttribute;this._$Ei=l,this[l]=V(e,x.type),this._$Ei=null}}requestUpdate(t,e,r){let o=!0;t!==void 0&&(((r=r||this.constructor.getPropertyOptions(t)).hasChanged||D)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),r.reflect===!0&&this._$Ei!==t&&(this._$EC===void 0&&(this._$EC=new Map),this._$EC.set(t,r))):o=!1),!this.isUpdatePending&&o&&(this._$Ep=this._$E_())}async _$E_(){this.isUpdatePending=!0;try{await this._$Ep}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach((o,s)=>this[s]=o),this._$Et=void 0);let e=!1,r=this._$AL;try{e=this.shouldUpdate(r),e?(this.willUpdate(r),(t=this._$Eg)===null||t===void 0||t.forEach(o=>{var s;return(s=o.hostUpdate)===null||s===void 0?void 0:s.call(o)}),this.update(r)):this._$EU()}catch(o){throw e=!1,this._$EU(),o}e&&this._$AE(r)}willUpdate(t){}_$AE(t){var e;(e=this._$Eg)===null||e===void 0||e.forEach(r=>{var o;return(o=r.hostUpdated)===null||o===void 0?void 0:o.call(r)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return!0}update(t){this._$EC!==void 0&&(this._$EC.forEach((e,r)=>this._$ES(r,this[r],e)),this._$EC=void 0),this._$EU()}updated(t){}firstUpdated(t){}};a.finalized=!0,a.elementProperties=new Map,a.elementStyles=[],a.shadowRootOptions={mode:"open"},q==null||q({ReactiveElement:a}),((S=globalThis.reactiveElementVersions)!==null&&S!==void 0?S:globalThis.reactiveElementVersions=[]).push("1.3.0");var w,C;var d=class extends a{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;let r=super.createRenderRoot();return(t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=r.firstChild),r}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=R(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!1)}render(){return U}};d.finalized=!0,d._$litElement$=!0,(w=globalThis.litElementHydrateSupport)===null||w===void 0||w.call(globalThis,{LitElement:d});var z=globalThis.litElementPolyfillSupport;z==null||z({LitElement:d});((C=globalThis.litElementVersions)!==null&&C!==void 0?C:globalThis.litElementVersions=[]).push("3.2.0");var K=(i,t)=>t.kind==="method"&&t.descriptor&&!("value"in t.descriptor)?{...t,finisher(e){e.createProperty(t.key,i)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){typeof t.initializer=="function"&&(this[t.key]=t.initializer.call(this))},finisher(e){e.createProperty(t.key,i)}};function h(i){return(t,e)=>e!==void 0?((r,o,s)=>{o.constructor.createProperty(s,r)})(i,t,e):K(i,t)}function j(i){return h({...i,state:!0})}var p=({finisher:i,descriptor:t})=>(e,r)=>{var o;if(r===void 0){let s=(o=e.originalKey)!==null&&o!==void 0?o:e.key,n=t!=null?{kind:"method",placement:"prototype",key:s,descriptor:t(e.key)}:{...e,key:s};return i!=null&&(n.finisher=function(l){i(l,s)}),n}{let s=e.constructor;t!==void 0&&Object.defineProperty(e,r,t(r)),i==null||i(s,r)}};function pt(i,t){return p({descriptor:e=>{let r={get(){var o,s;return(s=(o=this.renderRoot)===null||o===void 0?void 0:o.querySelector(i))!==null&&s!==void 0?s:null},enumerable:!0,configurable:!0};if(t){let o=typeof e=="symbol"?Symbol():"__"+e;r.get=function(){var s,n;return this[o]===void 0&&(this[o]=(n=(s=this.renderRoot)===null||s===void 0?void 0:s.querySelector(i))!==null&&n!==void 0?n:null),this[o]}}return r}})}var P,gt=((P=window.HTMLSlotElement)===null||P===void 0?void 0:P.prototype.assignedElements)!=null?(i,t)=>i.assignedElements(t):(i,t)=>i.assignedNodes(t).filter(e=>e.nodeType===Node.ELEMENT_NODE);var N=E`
+:host {
+  /* scw element */
+  position: relative;
+  box-sizing: border-box;
+  --margin-right: initial;
+  --margin-bottom: initial;
+  --gap-h-int: initial;
+  --gap-v-int: initial;
+  margin-right: var(--margin-right, var(--gap-h-int, initial));
+  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
+  display: block;
+}
+
+:host([warning]) {
+  outline: 2px solid red !important;
+}`;var c=class extends d{constructor(){super(...arguments);this.responsive=!1;this.dynamic=!1;this.element="component"}connectedCallback(){super.connectedCallback(),this.responsive===!0&&(this.responsiveElement=new O(this))}disconnectedCallback(){super.disconnectedCallback(),this.responsiveElement&&this.responsiveElement.disconnect()}firstUpdated(e){super.firstUpdated(e),this.parseAndValidateLightDom(),this.dynamic&&(this._lightDomMutationObserver=new k(this,()=>{this.parseAndValidateLightDom()}))}parseAndValidateLightDom(){}warn(e){this._lastWarning||(this._lastWarning=e,this.setAttribute("warning",e),this.setAttribute("title",`[ERROR]: ${e}`))}render(){return A`
+      <slot></slot>
+    `}};c.styles=N,u([h({type:Boolean})],c.prototype,"responsive",2),u([h({type:Boolean})],c.prototype,"dynamic",2),u([h({type:String,reflect:!0})],c.prototype,"element",2),u([j()],c.prototype,"_lastWarning",2);export{E as a,h as b,j as c,pt as d,c as e};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+//# sourceMappingURL=chunk.HCMPRDIX.js.map