scu-web-components 0.0.74 → 0.0.76

package/dist/chunks/chunk.6IKVQRTF.js

@@ -0,0 +1,48 @@
+import{a as o}from"./chunk.YBPGY7E7.js";import{a as d,b as f}from"./chunk.ZZNNPPOA.js";import{a as i,b as n,c as l,d as a,f as c}from"./chunk.5MDLYG3I.js";import{a as s}from"./chunk.G2G2TPJK.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var p=i`
+:host {
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.container > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 3.8);
+  --margin-right: calc( var( --scw-spacing-1 ) * 3.8 );
+}
+
+.circle {
+  background-color: var(--scw-color-grey-092);
+  border-radius: 50% 50% 50% 50%;
+  width: 10px;
+  height: 10px;
+}
+.circle.focused {
+  background-color: var(--scw-color-grey-07);
+  border-radius: 50% 50% 50% 50%;
+}
+
+.body p {
+  font-size: 42px;
+}`;var e=class extends c{constructor(){super();this.test="test";this.testState=0;this.contentRef=d();this.example="hello there";this.element="stepper"}static get styles(){return[super.styles,p]}firstUpdated(){this.attachContent()}attachContent(){let t=this.querySelector("#content");this.contentRef.value&&t&&this.contentRef.value.appendChild(t.content.cloneNode(!0))}renderStepItem(t=!1){return s`
+      <div class="circle ${t?"focused":""}"></div>
+    `}render(){let t;try{this.testJson&&(t=JSON.parse(decodeURIComponent(this.testJson)))}catch(m){console.error(m)}return s`
+      <div class="container" @click=${()=>console.log("hi")}>
+        ${this.renderStepItem()}
+        ${this.renderStepItem(!0)}
+        ${this.renderStepItem()}
+        ${o(t?JSON.stringify(t):"")}
+        ${o(this.testHtml?decodeURIComponent(this.testHtml):"")}
+        <div
+          class="body"
+          ${f(this.contentRef)}>
+        </div>
+      </div>
+    `}};r([n({type:String,attribute:"test-json",reflect:!0})],e.prototype,"testJson",2),r([n({type:String,attribute:"test-html",reflect:!0})],e.prototype,"testHtml",2),r([n({type:String,attribute:"test-attr",reflect:!0})],e.prototype,"testAttr",2),r([l()],e.prototype,"testState",2),r([a("#myBtn")],e.prototype,"first",2);export{e as a};

package/dist/chunks/chunk.6SFLXBRP.js

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

package/dist/chunks/chunk.6VGFZILX.js

@@ -0,0 +1,158 @@
+import{a as o,b as r,e as c,f as l}from"./chunk.5MDLYG3I.js";import{a as e}from"./chunk.G2G2TPJK.js";import{f as n}from"./chunk.PE5ZEEQ2.js";var s=o`
+.heading {
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.heading > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+
+.content {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.content > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+
+h3 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-08-font);
+  color: var(--scw-color-primary-03);
+  color: var(--scw-theme-color, var(--scw-color-primary-03));
+}
+
+.body {
+  background-color: rgba(0, 0, 0, 0);
+}
+.body slot {
+  text-align: LEFT;
+  font: var(--scw-type-text-06-font);
+  color: var(--scw-color-grey-02);
+  color: var(--scw-theme-body-color, var(--scw-color-grey-02));
+}
+
+.default {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-3);
+  padding-right: var(--scw-spacing-3);
+  padding-top: var(--scw-spacing-3);
+  padding-bottom: var(--scw-spacing-3);
+  background-color: var(--scw-color-primary-09);
+  border-radius: 10px 10px 10px 10px;
+  background-color: var(--scw-theme-color-light, var(--scw-color-primary-09));
+}
+.default > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.default .links {
+  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;
+}
+.default .links > *:not(:last-child) {
+  margin-right: var(--scw-spacing-2);
+  --margin-right: var( --scw-spacing-2 );
+}
+
+.alignment-center {
+  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: var(--scw-spacing-3);
+  padding-bottom: var(--scw-spacing-3);
+  background-color: var(--scw-color-primary-09);
+  border-radius: 10px 10px 10px 10px;
+  background-color: var(--scw-theme-color-light, var(--scw-color-primary-09));
+}
+.alignment-center > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.alignment-center .links {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.alignment-center .links > *:not(:last-child) {
+  margin-right: var(--scw-spacing-2);
+  --margin-right: var( --scw-spacing-2 );
+}
+.alignment-center .content {
+  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;
+}
+.alignment-center .content > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+.alignment-center .body {
+  margin: auto;
+}
+.alignment-center .body slot {
+  text-align: center;
+}
+.alignment-center .heading {
+  text-align: center;
+  margin: auto;
+}`;var t=class extends l{constructor(){super();this.element=c.callout}static get styles(){return[super.styles,s]}renderLink(i,a,d="solid"){return i&&a?e`
+        <scw-link
+          href="${a}"
+          aria-label="${i}"
+          design="${d}">
+        </scw-link>
+      `:e``}render(){return e`
+      <div class="${this.align==="center"?"alignment-center":"default"}">
+        <div class="content">
+          <h3 class="heading">${this.heading}</h3>
+          <div class="body"><slot></slot></div>
+          <div class="links">
+            ${this.renderLink(this.primaryLabel,this.primaryLink)}
+            ${this.renderLink(this.secondaryLabel,this.secondaryLink,"outlined")}
+          </div>
+        </div>
+      </div>
+    `}};n([r({type:String,attribute:"heading",reflect:!0})],t.prototype,"heading",2),n([r({type:String,attribute:"alignment",reflect:!0})],t.prototype,"align",2),n([r({type:String,attribute:"primary-cta-link",reflect:!0})],t.prototype,"primaryLink",2),n([r({type:String,attribute:"primary-cta-label",reflect:!0})],t.prototype,"primaryLabel",2),n([r({type:String,attribute:"secondary-cta-link",reflect:!0})],t.prototype,"secondaryLink",2),n([r({type:String,attribute:"secondary-cta-label",reflect:!0})],t.prototype,"secondaryLabel",2);export{t as a};

package/dist/chunks/chunk.7IO3ZXVV.js

@@ -0,0 +1,48 @@
+import{a as n,b as e,f as o}from"./chunk.5MDLYG3I.js";import{a as r,d as s}from"./chunk.G2G2TPJK.js";import{f as i}from"./chunk.PE5ZEEQ2.js";var d=n`
+:host .responsive {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}`;var t=class extends o{constructor(){super();this.preload=!1;this.eager=!1;this.element="image"}static get styles(){return[super.styles,d]}renderPreload(){if(this.preload)return r`<link
+        rel="preload"
+        as="image"
+        href="${this.src}" /> `}renderContent(){return r` ${this.renderPreload()}
+        <picture>
+          ${this.breakpointXlg&&this.srcXlg?r`
+                <source
+                  srcset="${this.srcXlg}"
+                  media="(min-width: ${this.breakpointXlg}px)" />
+              `:""}
+          ${this.breakpointLg&&this.srcLg?r`
+                <source
+                  srcset="${this.srcLg}"
+                  media="(min-width: ${this.breakpointLg}px)" />
+              `:""}
+          ${this.breakpointMd&&this.srcMd?r`
+                <source
+                  srcset="${this.srcMd}"
+                  media="(min-width: ${this.breakpointMd}px)" />
+              `:""}
+          ${this.breakpointSm&&this.srcSm?r`
+                <source
+                  srcset="${this.srcSm}"
+                  media="(min-width: ${this.breakpointSm}px)" />
+              `:""}
+          ${(this.breakpointXsm||this.breakpointXsm===0)&&this.srcXsm?r`
+                <source
+                  srcset="${this.srcXsm}"
+                  media="(min-width: ${this.breakpointXsm}px)" />
+              `:""}
+
+          <img
+            style="${this.objectFit?"object-fit:"+this.objectFit+";":""}
+            ${this.objectPosition?"object-position:"+this.objectPosition+";":""}"
+            class="${this.width||this.height?s:"responsive"}"
+            src="${this.src?this.src:!1}"
+            alt="${this.alt?this.alt:""}"
+            loading="${this.eager?"eager":"lazy"}"
+            role="${this.alt?s:"presentation"}"
+            width="${this.width?this.width:s}"
+            height="${this.height?this.height:s}" />
+        </picture>`}render(){return r` ${this.renderContent()} `}};i([e({type:String,attribute:"object-fit"})],t.prototype,"objectFit",2),i([e({type:String,attribute:"object-position"})],t.prototype,"objectPosition",2),i([e({type:String})],t.prototype,"src",2),i([e({type:String})],t.prototype,"alt",2),i([e({type:Boolean})],t.prototype,"preload",2),i([e({type:Boolean,attribute:"eager"})],t.prototype,"eager",2),i([e({type:String,attribute:"src-xsm"})],t.prototype,"srcXsm",2),i([e({type:String,attribute:"src-sm"})],t.prototype,"srcSm",2),i([e({type:String,attribute:"src-md"})],t.prototype,"srcMd",2),i([e({type:String,attribute:"src-lg"})],t.prototype,"srcLg",2),i([e({type:String,attribute:"src-xlg"})],t.prototype,"srcXlg",2),i([e({type:Number,attribute:"breakpoint-xsm"})],t.prototype,"breakpointXsm",2),i([e({type:Number,attribute:"breakpoint-sm"})],t.prototype,"breakpointSm",2),i([e({type:Number,attribute:"breakpoint-md"})],t.prototype,"breakpointMd",2),i([e({type:Number,attribute:"breakpoint-lg"})],t.prototype,"breakpointLg",2),i([e({type:Number,attribute:"breakpoint-xlg"})],t.prototype,"breakpointXlg",2),i([e({type:String,attribute:"width"})],t.prototype,"width",2),i([e({type:String,attribute:"height"})],t.prototype,"height",2);export{t as a};