scu-web-components 0.0.97 → 0.0.99

package/dist/chunks/chunk.LTVTK2TD.js

@@ -0,0 +1,220 @@
+import{a as s}from"./chunk.QHUZYUAT.js";import{a as n,b as o,d as i,f as c}from"./chunk.CONKFFEA.js";import{a as r}from"./chunk.G2G2TPJK.js";import{f as e}from"./chunk.PE5ZEEQ2.js";var l=n`
+:host([type=button]) {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+}
+:host([type=button]) > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+:host([type=button]) .container {
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+}
+:host([type=button]) .container .wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host([type=button]) .container .wrapper > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+:host([type=button]) .container .label {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.8);
+  padding-right: calc(var(--scw-spacing-1) * 1.8);
+  padding-top: var(--scw-spacing-1);
+  padding-bottom: var(--scw-spacing-1);
+  text-align: CENTER;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+}
+:host([type=button]) .container .label > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.4);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+:host([type=button]) .container .image {
+  --scw-icon-color: var(--scw-color-grey-02);
+}
+:host([type=button]) .container:focus,
+:host([type=button]) .container:focus-visible {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-095);
+}
+
+:host([type=button][size=small]) {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 0.5);
+  padding-right: calc(var(--scw-spacing-1) * 0.5);
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+}
+:host([type=button][size=small]) > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+:host([type=button][size=small]) .container {
+  background-color: rgba(0, 0, 0, 0);
+}
+:host([type=button][size=small]) .container .label {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.4);
+  padding-right: calc(var(--scw-spacing-1) * 1.4);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.8);
+  text-align: CENTER;
+  font: var(--scw-type-text-03-font);
+  color: var(--scw-color-grey-02);
+}
+:host([type=button][size=small]) .container .label > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+
+:host([type=button][active]) .container {
+  background-color: var(--scw-color-grey-03);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-03);
+}
+:host([type=button][active]) .container .label {
+  color: var(--scw-color-grey-10);
+}
+:host([type=button][active]) .container .image {
+  --scw-icon-color: var(--scw-color-grey-092);
+}
+
+:host([type=tab]) {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding: 2px 0;
+}
+:host([type=tab]) > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+:host([type=tab]) .container {
+  background-color: rgba(0, 0, 0, 0);
+}
+:host([type=tab]) .container .wrapper {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host([type=tab]) .container .wrapper > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+:host([type=tab]) .container .label {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: var(--scw-spacing-3);
+  padding-right: var(--scw-spacing-3);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  text-align: CENTER;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+}
+:host([type=tab]) .container .label > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.4);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+:host([type=tab]) .container .image {
+  --scw-icon-color: var(--scw-color-grey-02);
+}
+:host([type=tab]) .container:focus,
+:host([type=tab]) .container:focus-visible {
+  background-color: var(--scw-color-grey-095);
+  box-shadow: var(--scw-effect-focus-shadow);
+}
+
+:host([type=tab][active]) .container .label {
+  text-align: CENTER;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-02);
+}
+
+:host([type=tab][size=small]) .container .label {
+  text-align: CENTER;
+  font: var(--scw-type-text-03-font);
+  color: var(--scw-color-grey-02);
+}
+
+:host([type=tab][active][size=small]) .container .label {
+  text-align: CENTER;
+  font: var(--scw-type-text-semibold-03-font);
+  color: var(--scw-color-grey-02);
+}
+
+:host([image]) .container {
+  height: auto;
+}
+:host([image]) .container .wrapper .label {
+  font: inherit;
+  color: var(--scw-color-grey-03);
+}
+:host([image]) .container .wrapper .image {
+  display: block;
+}
+
+.label {
+  white-space: nowrap;
+}`;var d=0,t=class extends c{constructor(){super();this.attrId=++d;this.componentId=`scw-horizontal-nav-item-${this.attrId}`;this.href="";this.type="button";this.size="medium";this.tab=!1;this.active=!1;this.panel="";this.element="horizontal-nav-item"}static get styles(){return[super.styles,l]}connectedCallback(){super.connectedCallback(),this.tab&&this.setAttribute("role","tab")}firstUpdated(){this.href.includes(window.location.pathname)&&(this.active=!0)}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}focus(a){this.link.focus(a)}blur(){this.link.blur()}handleClick(a){this.tab&&a.preventDefault()}render(){!1||(this.id=this.id.length>0?this.id:this.componentId);let a=r` <div class="label">${this.ariaLabel}</div>`;return r`
+            <scw-link
+              @click=${this.handleClick}
+              class="container"
+              design="plain"
+              href="${this.href}">
+              <div class="wrapper">
+                <slot class="image"></slot>
+                ${a}
+                </div>
+            </scw-link>
+          `}};e([o({type:String,attribute:"href",reflect:!0})],t.prototype,"href",2),e([o({type:String,attribute:"type",reflect:!0})],t.prototype,"type",2),e([o({type:String,attribute:"size",reflect:!0})],t.prototype,"size",2),e([o({type:Boolean,attribute:"tab",reflect:!0})],t.prototype,"tab",2),e([o({type:Boolean,attribute:"active",reflect:!0})],t.prototype,"active",2),e([o({reflect:!0})],t.prototype,"panel",2),e([i("scw-link")],t.prototype,"link",2),e([s("active")],t.prototype,"handleActiveChange",1);export{t as a};

package/dist/chunks/chunk.LWLEHEQY.js

@@ -0,0 +1,171 @@
+import{a as n}from"./chunk.4SWKJDYZ.js";import{c as l}from"./chunk.R7SOOULM.js";import{a as i}from"./chunk.X4CHYX5J.js";import{a as t}from"./chunk.KILRDKGP.js";import{a as d}from"./chunk.QHUZYUAT.js";import{a as c,b as o,d as s}from"./chunk.CONKFFEA.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var p=c`
+.wrapper {
+  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;
+}
+.wrapper > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.5);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+.wrapper .checkbox {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  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;
+  cursor: pointer;
+}
+.wrapper .checkbox > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.wrapper .checkbox .box {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-07);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  width: 20px;
+  height: 20px;
+  transition: color 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
+}
+.wrapper .checkbox .box > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.wrapper .checkbox .box .icon {
+  transition: color 350ms ease, opacity 350ms ease;
+  opacity: 0;
+  --scw-icon-color:var(--scw-color-grey-10) ;
+}
+.wrapper .checkbox .input-label {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-02);
+}
+.wrapper .input-feedback {
+  text-align: LEFT;
+  font: var(--scw-type-text-03-font);
+  color: var(--scw-color-grey-04);
+}
+
+.checked .checkbox .box {
+  background-color: var(--scw-color-grey-03);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-03);
+}
+.checked .checkbox .box .icon {
+  opacity: 1;
+}
+
+.invalid .checkbox .box {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-error);
+}
+.invalid .input-feedback {
+  text-align: LEFT;
+  font: var(--scw-type-text-03-font);
+  color: var(--scw-color-error);
+}
+
+.focused .checkbox .box {
+  border-color: var(--scw-color-credit-cards);
+  box-shadow: var(--scw-effect-focus-shadow);
+}
+
+:host([aria-disabled]) .checkbox {
+  cursor: default;
+}
+:host([aria-disabled]) .checkbox .box {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-07);
+  box-shadow: none;
+}
+:host([aria-disabled]) .checkbox .box .icon {
+  --scw-icon-color: var(
+    state-disabled-checkbox-box-icon-vector-vars.\$background-color
+  );
+}
+:host([aria-disabled]) .checkbox .input-label {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-06);
+}
+
+.box:hover {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-03);
+}
+
+.topAlign .checkbox {
+  align-items: flex-start;
+}
+.topAlign .checkbox .box {
+  position: relative;
+  top: 5px;
+}
+
+#functional-checkbox {
+  position: absolute;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}`;var e=class extends l{constructor(){super();this.selected=!1;this.hideFeedback=!1;this.defaultFeedback="";this.alignment="center";this.element="input"}static get styles(){return[super.styles,p]}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}valueChangeHandler(){this.input.checked?this.value="true":this.value="",this.selected=this.input.checked,this.validate(),t("scw-value-change",this,{value:this.value,name:this.name,selected:this.selected})}invalidHandler(a){a.preventDefault()}blurHandler(){t("scw-blur",this),this.focused=!1,this.validate()}focusHandler(){this.focused=!0,t("scw-focus",this)}render(){let a={focused:this.focused,invalid:this.invalid,checked:this.selected,wrapper:!0,topAlign:this.alignment==="top"};return i`<div class=${n(a)}>
+        <label class="checkbox">
+          
+          <div class="box">
+            <input
+              id="functional-checkbox"
+              ?checked=${this.selected}
+              ?disabled="${this.ariaDisabled==="true"}"
+              type="checkbox"
+              name=${this.name}
+              @input=${this.valueChangeHandler}
+              @blur=${this.blurHandler}
+              @focus=${this.focusHandler}
+              @invalid=${this.invalidHandler} />
+              <scw-icon class="icon" icon="icon-check" size="20"></scw-icon>
+          </div>
+          <div class="input-label">
+            ${this.ariaLabel}
+            <slot></slot>
+          </div>
+  </label>
+
+        ${this.hideFeedback?"":i` <div class="input-feedback">
+              ${this.feedback?this.feedback:this.defaultFeedback}&nbsp;
+            </div>`}
+      </div>
+      <slot name="validation"></slot> `}};r([o({type:Boolean,reflect:!0})],e.prototype,"selected",2),r([o({type:Boolean,reflect:!0,attribute:"hide-feedback"})],e.prototype,"hideFeedback",2),r([o({type:String,reflect:!0,attribute:"default-feedback"})],e.prototype,"defaultFeedback",2),r([o({type:String,reflect:!1,attribute:"alignment"})],e.prototype,"alignment",2),r([s("input")],e.prototype,"input",2),r([d("selected")],e.prototype,"handleSelectedChange",1);export{e as a};