scu-web-components 0.0.67 → 0.0.69

package/dist/chunks/chunk.V2IKBE65.js

@@ -0,0 +1,245 @@
+import{a as s}from"./chunk.NRBAPPP6.js";import{a as r,b as o}from"./chunk.K5LAHA72.js";import{a as c}from"./chunk.4AJTBTEU.js";import{a as l,b as i,e as a}from"./chunk.KX2Y5SBY.js";import{f as t}from"./chunk.PE5ZEEQ2.js";var d=l`
+: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: 36.4734299517%;
+    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: 151px;
+}
+: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-mortgage-04);
+  align-self: stretch;
+}
+:host .super-heading.savings {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: 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-student-04);
+  align-self: stretch;
+}
+:host .super-heading.investments {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: 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-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-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: 330px;
+}
+: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: 37px;
+}
+
+: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 e=class extends a{constructor(){super();this.preload=!1;this.size="large";this.action="none";this.element="card",this.clickHandler=this.clickHandler.bind(this);let n=c();this.headerNodeName=r(`scw-${"heading"}${n}`),this.imageNodeName=r(`scw-${"image"}${n}`),this.linkNodeName=r(`scw-${"link"}${n}`)}static get styles(){return[super.styles,d]}clickHandler(n){n.stopPropagation(),this.click()}warn(n){this.heading=`error: ${n}`,a.prototype.warn.call(this,n)}renderImage(){if((this.src||this.srcset)&&this.alt)return o`
+        <scw-image
+          class="image-box"
+          src="${s(this.src)}"
+          srcset="${s(this.srcset)}"
+          alt="${this.alt}"
+          preload="${s(this.preload?"true":void 0)}"
+          object-fit="cover">
+        </scw-image>
+      `}renderButton(){return this.action==="link"?o`
+        <scw-link
+          aria-label="${this.linkLabel?this.linkLabel:"no label"}" 
+          @click="${this.clickHandler}">
+        </scw-link>`:null}getSizeStringForHeader(){switch(this.size){case"large":return"h1";case"medium":return"h2";case"small":return"h3"}}renderBody(){return o`
+       ${this.renderImage()}
+       ${this.superHeading?o`
+          <div class="super-heading">
+            ${this.superHeading}
+          </div>`:""}
+       <scw-heading
+          style="--scw-color-04: var( --scw-color-grey-02 );"
+          dynamic class="heading"
+          aria-label="${s(this.heading)}"
+          size="${this.getSizeStringForHeader()}">
+        </scw-heading>
+       ${this.description?o`
+          <div class="description">
+            ${this.description}
+          </div>`:""}`}render(){return this.action==="whole"?this.renderBody():o`
+        ${this.renderBody()}
+        ${this.renderButton()}`}};t([i()],e.prototype,"src",2),t([i()],e.prototype,"srcset",2),t([i()],e.prototype,"alt",2),t([i()],e.prototype,"heading",2),t([i()],e.prototype,"superHeading",2),t([i()],e.prototype,"description",2),t([i()],e.prototype,"linkLabel",2),t([i({type:Boolean})],e.prototype,"preload",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:String,reflect:!0})],e.prototype,"action",2);export{e as a};

package/dist/chunks/chunk.V7AYBOSE.js

@@ -0,0 +1,37 @@
+import{a as d,b as h}from"./chunk.ZZNNPPOA.js";import{a as m}from"./chunk.FNZZPMTC.js";import{a as c}from"./chunk.QHUZYUAT.js";import{c as l}from"./chunk.HZLIIBNH.js";import{a as r,b as s}from"./chunk.K5LAHA72.js";import{a as n}from"./chunk.4AJTBTEU.js";import{a as u}from"./chunk.WKH73SBC.js";import{a,b as o}from"./chunk.KX2Y5SBY.js";import{f as i}from"./chunk.PE5ZEEQ2.js";var p=a`
+:host {
+  display: block;
+}`;var f=(t=>(t.search="search",t.email="email",t))(f||{}),e=class extends l{constructor(){super();this.scwInputRef=d();this.type="search";this.method="get";this.element="single-input";let t=n();this.scwInputField=r(`scw-${"input-field"}${t}`),this.scwSingleInputLayout=r(`scw-${"single-input-layout"}${t}`),this.scwForm=r(`scw-${"form"}${t}`)}static get styles(){return[super.styles,p]}typeWatcher(t,y){y==="email"?(this.createAndAddValidationRule("required"),this.createAndAddValidationRule("email")):(this.removeValidationRule("email"),this.removeValidationRule("required"))}_focusHandler(){this.focused=!0}_blurHandler(){this.focused=!1,this.validate()}_valueChangeHandler(t){this.value=t.detail.value}_layoutActionHandler(t){if(t.detail.action==="right-icon"){this.value="",t.stopPropagation();return}if(t.detail.action==="right-action"){t.stopPropagation(),this.submit();return}}checkForSubmit(t){t.key==="Enter"&&this.submit()}submit(){this.action&&m(this.action,{keys:this.value},this.method),u("scw-submit",this,{validation:this.validate(),data:{value:this.value}})}renderInputField(){return s`
+      <${this.scwInputField}
+        ${h(this.scwInputRef)}
+        .value=${this.value}
+        .placeholder=${this.placeholder}
+        .name=${this.type}
+        @keyup=${this.checkForSubmit}
+        @scw-focus=${this._focusHandler}
+        @scw-blur=${this._blurHandler}
+        @scw-value-change=${this._valueChangeHandler}>
+      </${this.scwInputField}>
+    `}renderEmail(){return s`
+      <${this.scwSingleInputLayout}
+        .feedback="${this.feedback}"
+        right-action-icon="icon-placeholder"
+        left-action-icon="icon-placeholder"
+        ?focused=${this.focused}
+        ?invalid=${this.invalid}
+        @scw-action=${this._layoutActionHandler}>
+        ${this.renderInputField()}
+      </${this.scwSingleInputLayout}>
+      <slot name="validation"></slot>
+    `}renderSearch(){return s`
+      <${this.scwSingleInputLayout}
+        .feedback="${this.feedback}"
+        right-action-icon="icon-search"
+        right-icon="icon-clear"
+        ?focused=${this.focused}
+        ?invalid=${this.invalid}
+        @scw-action=${this._layoutActionHandler}>
+        ${this.renderInputField()}
+      </${this.scwSingleInputLayout}>
+      <slot name="validation"></slot>
+    `}render(){return this.type==="email"?s`${this.renderEmail()}`:this.renderSearch()}};i([o({type:f})],e.prototype,"type",2),i([o({type:String})],e.prototype,"action",2),i([o({type:String})],e.prototype,"method",2),i([c("type")],e.prototype,"typeWatcher",1);export{e as a};

package/dist/chunks/chunk.WKH73SBC.js

@@ -0,0 +1 @@
+function a(t,o,u={},n){let e=new CustomEvent(t,{bubbles:!0,cancelable:!1,composed:!0,detail:u,...n});return o.dispatchEvent(e),e}export{a};

package/dist/chunks/chunk.WN6SIABA.js

@@ -0,0 +1,29 @@
+import{a as e,b as i,e as t}from"./chunk.KX2Y5SBY.js";import{a as o}from"./chunk.G2G2TPJK.js";import{f as s}from"./chunk.PE5ZEEQ2.js";var n=e`
+:host {
+  display: block;
+}
+:host .scw-link-base {
+  display: block;
+  background-color: var(--scw-color-error-light);
+  padding-left: var(--scw-spacing-2);
+  padding-right: var(--scw-spacing-2);
+  padding-top: var(--scw-spacing-1);
+  padding-bottom: var(--scw-spacing-1);
+  text-align: center;
+}
+:host .message {
+  text-align: CENTER;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-error-dark);
+  flex: 1;
+}
+:host .description {
+  text-align: CENTER;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-error-dark);
+  flex: 1;
+}`;var r=class extends t{constructor(){super();this.description="";this.element="alert",!1||this.addEventListener("click",()=>console.log("hi"))}static get styles(){return[t.styles,n]}render(){return o`
+      <span class="message">${this.description}</span>
+      <span class="description">${this.description}</span>
+      ${JSON.stringify(t.styles)}
+    `}};s([i({type:String})],r.prototype,"description",2);export{r as a};