scu-web-components 0.0.30 → 0.0.33

package/dist/chunks/chunk.ZNGMONRM.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": ["ScwFormComponentTypes", "ScwFormComponentSubmitTypes", "ScwFormComponent", "ScwComponent", "formData", "rules", "child", "validation", "results", "getSuffix", "rule", "validationRules", "type", "feedbackOverride", "$", "__decorateClass", "e", "t"]
+}

package/dist/chunks/chunk.ZXC2VJKR.js

@@ -0,0 +1,183 @@
+import{a as o}from"./chunk.B7II36CO.js";import{a,b as r,e as d}from"./chunk.YITG6YRY.js";import{a as c}from"./chunk.IHVBWZ57.js";import{g as i}from"./chunk.5YJY6NT6.js";var s=a`
+:host {
+  background-color: rgb(255, 255, 255);
+  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%;
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL3Njb3R0cm91c2UvV29ya3NwYWNlL3Njdy1kZXNpZ24tc3lzdGVtLXdlYi9zY3ctZGVzaWduLXN5c3RlbS1tb25vL3NjdS13ZWItY29tcG9uZW50cy9zcmMvc2N3LXNpbmdsZS1pbnB1dC1sYXlvdXQvc2NzcyIsInNvdXJjZXMiOlsic2N3LXNpbmdsZS1pbnB1dC5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0L19mZWVkYmFjay1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC9fZmVlZGJhY2staW5wdXQtZmVlZGJhY2stbWl4aW5zLnNjc3MiLCIuLi8uLi8uLi9kaXN0L3Rva2Vucy9zZWdtZW50cy9jb21wLXNjdy1pbnB1dC1mZWVkYmFjay1iYXNlL19kZWZhdWx0LXNjdy1pbnB1dC1mZWVkYmFjay1taXhpbnMuc2NzcyIsInNjdy1zaW5nbGUtaW5wdXQtZmllbGQuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC1maWVsZC12Mi9fbGVmdC1pY29uLXJpZ2h0LWFjdGlvbi1yaWdodC1pY29uLXJpZ2h0LWljb24tMi1jb250ZW50LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLXYyL19sZWZ0LWljb24tcmlnaHQtYWN0aW9uLXJpZ2h0LWljb24tcmlnaHQtaWNvbi0yLWNvbnRlbnQtbGVmdC1pY29uLW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLXYyL19sZWZ0LWljb24tcmlnaHQtYWN0aW9uLXJpZ2h0LWljb24tcmlnaHQtaWNvbi0yLWNvbnRlbnQtbGVmdC1pY29uLWljb24tbWl4aW5zLnNjc3MiLCIuLi8uLi8uLi9kaXN0L3Rva2Vucy9zZWdtZW50cy9jb21wLXNjdy1zaW5nbGUtaW5wdXQtZmllbGQtdjIvX2xlZnQtaWNvbi1yaWdodC1hY3Rpb24tcmlnaHQtaWNvbi1yaWdodC1pY29uLTItY29udGVudC1pbnB1dC10ZXh0LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLXYyL19sZWZ0LWljb24tcmlnaHQtYWN0aW9uLXJpZ2h0LWljb24tcmlnaHQtaWNvbi0yLWNvbnRlbnQtcmlnaHQtYWN0aW9uLW1peGlucy5zY3NzIiwic2N3LXNpbmdsZS1pbnB1dC1maWVsZC1iZy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLWJnL19kZWZhdWx0LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLWJnL19kaXNhYmxlZC1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC1maWVsZC1iZy9faW52YWxpZC1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC1maWVsZC1iZy9fZm9jdXNlZC1taXhpbnMuc2NzcyIsInNjdy1zaW5nbGUtaW5wdXQtbGF5b3V0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUE7RUNJSTtFQXlCRjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUNBO0VBQ007RUFDQTs7QURuQ047RUFFRTs7QUFHRjtFRUxFO0VBRUY7RUNOQTtFQUNBO0VBRUU7OztBQ0NKO0VDQUk7RUF5QkY7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFRDdCQTtFQUNBOztBQzZCQTtFQUNNO0VBQ0E7O0FEN0JOO0VFTkU7RUFFRjtFQUNBO0VBd0JBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDTTtFQUNBOztBRjNCSjtFR1ZBOztBSGVGO0VJZkU7RUFFRjs7QUppQkE7RUFDRTs7QUFHRjtFQUNFOztBQUdGO0VLN0JFO0VBSUY7RUFDQTtFQXdCQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VMSkU7O0FLS0Y7RUFDTTtFQUNBOzs7QUN6Q047RUNJRTtFQUVGO0VBQ0E7RUFDQTtFQUVFO0VBSUY7OztBRFJBO0VFRkU7RUFFRjtFQUNBO0VBQ0E7RUFJRTtFQUVGOzs7QUZGQTtFR1JFO0VBRUY7RUFDQTtFQUNBO0VBRUU7RUFJRjs7O0FISUE7RUlkRTtFQUVGO0VBQ0E7RUFDQTtFQUVFO0VBSUY7RUFDQTs7O0FDZkY7RUFDRSJ9 */`;var e=(l=>(l.rightIcon="right-icon",l.right2Icon="right-2-icon",l.rightAction="right-action",l))(e||{}),t=class extends d{constructor(){super();this.hideFeedback=!1;this.element="single-input-layout"}static get styles(){return[super.styles,s]}_right2ClickHandler(n){n.stopPropagation(),o("scw-action",this,{action:"right-2-icon"})}_rightClickHandler(n){n.stopPropagation(),o("scw-action",this,{action:"right-icon"})}_rightActionClickHandler(n){n.stopPropagation(),o("scw-action",this,{action:"right-action"})}render(){return c`
+      <div class="input-field">
+        ${this.leftActionIcon?c`
+            <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?c`
+            <scw-icon
+              class="right-icon-2"
+              .icon="${this.right2Icon}"
+              size="30"
+              aria-label="Clear Input"
+              link
+              @click=${this._right2ClickHandler}>
+            </scw-icon>`:""}
+        ${this.rightIcon?c`
+            <scw-icon
+              class="right-icon"
+              .icon="${this.rightIcon}"
+              size="30"
+              aria-label="Show Password"
+              link
+              @click=${this._rightClickHandler}>
+            </scw-icon>`:""}
+        ${this.rightActionIcon?c`
+            <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?"":c`
+          <div class="input-feedback">
+            ${this.feedback}&nbsp;
+          </div>`}
+    `}};i([r({type:String})],t.prototype,"feedback",2),i([r({type:String,attribute:"hide-feedback"})],t.prototype,"hideFeedback",2),i([r({type:String,attribute:"left-action-icon"})],t.prototype,"leftActionIcon",2),i([r({type:String,attribute:"right-action-icon"})],t.prototype,"rightActionIcon",2),i([r({type:String,attribute:"right-icon"})],t.prototype,"rightIcon",2),i([r({type:String,attribute:"right-2-icon"})],t.prototype,"right2Icon",2);export{e as a,t as b};
+//# sourceMappingURL=chunk.ZXC2VJKR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../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: rgb(255, 255, 255);\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/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL3Njb3R0cm91c2UvV29ya3NwYWNlL3Njdy1kZXNpZ24tc3lzdGVtLXdlYi9zY3ctZGVzaWduLXN5c3RlbS1tb25vL3NjdS13ZWItY29tcG9uZW50cy9zcmMvc2N3LXNpbmdsZS1pbnB1dC1sYXlvdXQvc2NzcyIsInNvdXJjZXMiOlsic2N3LXNpbmdsZS1pbnB1dC5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0L19mZWVkYmFjay1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC9fZmVlZGJhY2staW5wdXQtZmVlZGJhY2stbWl4aW5zLnNjc3MiLCIuLi8uLi8uLi9kaXN0L3Rva2Vucy9zZWdtZW50cy9jb21wLXNjdy1pbnB1dC1mZWVkYmFjay1iYXNlL19kZWZhdWx0LXNjdy1pbnB1dC1mZWVkYmFjay1taXhpbnMuc2NzcyIsInNjdy1zaW5nbGUtaW5wdXQtZmllbGQuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC1maWVsZC12Mi9fbGVmdC1pY29uLXJpZ2h0LWFjdGlvbi1yaWdodC1pY29uLXJpZ2h0LWljb24tMi1jb250ZW50LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLXYyL19sZWZ0LWljb24tcmlnaHQtYWN0aW9uLXJpZ2h0LWljb24tcmlnaHQtaWNvbi0yLWNvbnRlbnQtbGVmdC1pY29uLW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLXYyL19sZWZ0LWljb24tcmlnaHQtYWN0aW9uLXJpZ2h0LWljb24tcmlnaHQtaWNvbi0yLWNvbnRlbnQtbGVmdC1pY29uLWljb24tbWl4aW5zLnNjc3MiLCIuLi8uLi8uLi9kaXN0L3Rva2Vucy9zZWdtZW50cy9jb21wLXNjdy1zaW5nbGUtaW5wdXQtZmllbGQtdjIvX2xlZnQtaWNvbi1yaWdodC1hY3Rpb24tcmlnaHQtaWNvbi1yaWdodC1pY29uLTItY29udGVudC1pbnB1dC10ZXh0LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLXYyL19sZWZ0LWljb24tcmlnaHQtYWN0aW9uLXJpZ2h0LWljb24tcmlnaHQtaWNvbi0yLWNvbnRlbnQtcmlnaHQtYWN0aW9uLW1peGlucy5zY3NzIiwic2N3LXNpbmdsZS1pbnB1dC1maWVsZC1iZy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLWJnL19kZWZhdWx0LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctc2luZ2xlLWlucHV0LWZpZWxkLWJnL19kaXNhYmxlZC1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC1maWVsZC1iZy9faW52YWxpZC1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LXNpbmdsZS1pbnB1dC1maWVsZC1iZy9fZm9jdXNlZC1taXhpbnMuc2NzcyIsInNjdy1zaW5nbGUtaW5wdXQtbGF5b3V0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUE7RUNJSTtFQXlCRjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUNBO0VBQ007RUFDQTs7QURuQ047RUFFRTs7QUFHRjtFRUxFO0VBRUY7RUNOQTtFQUNBO0VBRUU7OztBQ0NKO0VDQUk7RUF5QkY7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFRDdCQTtFQUNBOztBQzZCQTtFQUNNO0VBQ0E7O0FEN0JOO0VFTkU7RUFFRjtFQUNBO0VBd0JBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDTTtFQUNBOztBRjNCSjtFR1ZBOztBSGVGO0VJZkU7RUFFRjs7QUppQkE7RUFDRTs7QUFHRjtFQUNFOztBQUdGO0VLN0JFO0VBSUY7RUFDQTtFQXdCQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VMSkU7O0FLS0Y7RUFDTTtFQUNBOzs7QUN6Q047RUNJRTtFQUVGO0VBQ0E7RUFDQTtFQUVFO0VBSUY7OztBRFJBO0VFRkU7RUFFRjtFQUNBO0VBQ0E7RUFJRTtFQUVGOzs7QUZGQTtFR1JFO0VBRUY7RUFDQTtFQUNBO0VBRUU7RUFJRjs7O0FISUE7RUlkRTtFQUVGO0VBQ0E7RUFDQTtFQUVFO0VBSUY7RUFDQTs7O0FDZkY7RUFDRSJ9 */`;\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": "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",
+  "names": ["scw_single_input_layout_default", "r", "ScwSingleInputLayoutActions", "ScwSingleInputLayout", "ScwComponent", "scw_single_input_layout_default", "evt", "emit", "$", "__decorateClass", "e"]
+}

package/dist/chunks/chunk.ZXOV72OC.js

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

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

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

package/dist/chunks/chunk.ZZBWYWN6.js

@@ -0,0 +1,2 @@
+import{a as t}from"./chunk.QH3KZOJC.js";customElements.define("scw-button",t);
+//# sourceMappingURL=chunk.ZZBWYWN6.js.map

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

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