scu-web-components 0.0.97 → 0.0.99

package/dist/chunks/chunk.3CVBVO72.js

@@ -0,0 +1,209 @@
+import{a as e,b as i,f as s}from"./chunk.CONKFFEA.js";import{a as r}from"./chunk.G2G2TPJK.js";import{f as t}from"./chunk.PE5ZEEQ2.js";var n=e`
+:host {
+  display: flex;
+}
+
+.card {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: var(--scw-spacing-2);
+  padding-right: var(--scw-spacing-2);
+  padding-top: var(--scw-spacing-4);
+  padding-bottom: var(--scw-spacing-4);
+}
+.card > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+.card .image-wrapper {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  width: 200px;
+  height: 200px;
+}
+.card .image-wrapper > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * -0.5);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * -0.5 );
+}
+.card .image-wrapper .avatar {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 1000px 1000px 1000px 1000px;
+  width: 200px;
+  height: 200px;
+}
+.card .image-wrapper .avatar .image {
+  background-color: rgba(0, 0, 0, 0);
+  width: 200px;
+  height: 200px;
+  z-index: 2;
+  position: absolute;
+  border-radius: 100px;
+  overflow: hidden;
+}
+.card .image-wrapper .avatar .initials {
+  background-color: var(--scw-color-grey-09);
+  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-1);
+  padding-bottom: var(--scw-spacing-1);
+  width: 200px;
+  height: 200px;
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-10-font);
+  color: var(--scw-color-grey-07);
+  padding: 0;
+  border-radius: 100px;
+  position: absolute;
+}
+.card .image-wrapper .avatar .initials > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+.card .image-wrapper .feature-tag {
+  width: 120px;
+  height: 30px;
+  z-index: 3;
+}
+.card .details {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  text-align: LEFT;
+  font: var(--scw-type-text-03-font);
+  color: var(--scw-color-grey-02);
+}
+.card .details > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.card .details .heading {
+  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;
+  text-align: CENTER;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-03);
+  flex: 1;
+}
+.card .details .heading > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.card .tags {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc(var(--scw-spacing-1) * 0.2);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.2);
+  justify-content: flex-start;
+  flex-grow: 1;
+}
+.card .tags > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.5);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+.card .tags .tag-wrapper {
+  background-color: rgba(0, 0, 0, 0);
+  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: var(--scw-spacing-1);
+  gap: var(--scw-spacing-0-6);
+  flex-wrap: wrap;
+}
+.card .tags .tag-wrapper > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.5);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+.card .link {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  background-color: white;
+  border-radius: 10px;
+}
+.card .link > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}`;var a=class extends s{constructor(){super();this.href="";this.employeeName="";this.initials="";this.feature="";this.element="employee-card"}static get styles(){return[super.styles,n]}render(){return r`
+      <div class="card">
+        <div class="image-wrapper">
+          <div class="avatar">
+            <div class="image"><slot name="image"></slot></div>
+            <div class="initials">${this.initials}</div>
+          </div>
+          ${this.feature?r`
+                <div class="feature-tag">
+                  <scw-tag
+                    primary
+                    value="${this.feature}"></scw-tag>
+                </div>
+              `:""}
+        </div>
+        <div class="details">
+          <div class="heading">${this.employeeName}</div>
+          <slot></slot>
+        </div>
+        <div class="tags">
+          <div class="tag-wrapper">
+            <slot name="tag"></slot>
+          </div>
+        </div>
+        ${this.ariaLabel&&this.href?r`
+              <div class="link">
+                <scw-link
+                icon="icon-chevron-right"
+                icon-side="right"
+                design="block"
+                  aria-label="${this.ariaLabel}"
+                  href="${this.href}"></scw-link>
+              </div>
+            `:""}
+      </div>
+    `}};t([i({type:String,attribute:"href",reflect:!1})],a.prototype,"href",2),t([i({type:String,attribute:"employee-name",reflect:!1})],a.prototype,"employeeName",2),t([i({type:String,attribute:"initials",reflect:!1})],a.prototype,"initials",2),t([i({type:String,attribute:"feature",reflect:!1})],a.prototype,"feature",2);export{a};

package/dist/chunks/chunk.3VZIRS3G.js

@@ -0,0 +1,135 @@
+import{a as m}from"./chunk.4SWKJDYZ.js";import{a as f,b as c,d as h,f as b}from"./chunk.CONKFFEA.js";import{a as l}from"./chunk.G2G2TPJK.js";import{f as a}from"./chunk.PE5ZEEQ2.js";var u=f`
+:host {
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+.container .nav-container {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.container .nav-container::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.container .nav-group {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-08);
+  background-color: none;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  display: flex;
+  position: relative;
+  flex: 1 1 auto;
+  position: relative;
+  flex-direction: row;
+  justify-content: center;
+}
+.container .nav-group .nav-indicator {
+  position: absolute;
+}
+
+.container.hide-border .nav-group {
+  border-color: transparent;
+}
+
+.tab-style .nav-group .nav-indicator {
+  border-bottom: solid 2px;
+  border-color: var(--scw-color-grey-02);
+  bottom: -1px;
+}
+
+.button-style .nav-group .nav-indicator {
+  background-color: var(--scw-color-grey-09);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-09);
+  align-self: center;
+}
+
+.scroll-controller .nav-btn-container {
+  position: relative;
+  padding: 0 var(--scw-spacing-2);
+}
+
+.nav-panels {
+  display: block;
+  overflow: auto;
+}
+
+.prev-link, .next-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.prev-link {
+  left: 0;
+}
+
+.next-link {
+  right: 0;
+}
+
+.prev-link:hover, .next-link:hover {
+  --scw-icon-color: var(--scw-color-grey-04);
+}`;var n=class extends b{constructor(){super();this.navItems=[];this.panels=[];this.hasScrollControls=!1;this.type="button";this.size="medium";this.tabs=!1;this.hideBorder=!1;this.element="horizontal-nav"}static get styles(){return[super.styles,u]}connectedCallback(){let t=Promise.all([customElements.whenDefined("scw-horizontal-nav-item"),customElements.whenDefined("scw-horizontal-nav-panel")]);super.connectedCallback(),this.updateComplete.then(()=>{t.then(()=>{var e;this.syncTabsAndPanels(),!1||(this.resizeObserver=new ResizeObserver(()=>{this.repositionIndicator(),this.updateScrollControls()}),(e=this.resizeObserver)==null||e.observe(this.nav),new IntersectionObserver((o,r)=>{var s;o[0].intersectionRatio>0&&(this.setActiveTab((s=this.navItems.find(v=>v.active))!=null?s:this.navItems[0]),this.setAriaLabels(),setTimeout(()=>{this.indicator.style.transition="all 300ms ease"},300),r.unobserve(o[0].target))}).observe(this.tabGroup))})})}syncTabsAndPanels(){this.navItems=this.getAllTabs(),this.navItems.forEach(t=>{this.tabs&&(t.tab=!0),this.type&&(t.type=this.type),this.size&&(t.size=this.size)}),this.panels=this.getAllPanels(),this.updateComplete.then(()=>this.updateScrollControls(!0))}setAriaLabels(){this.tabs&&this.navItems.forEach(t=>{let e=this.panels.find(i=>i.name===t.panel);e&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))})}updateScrollControls(t=!1){this.hasScrollControls=this.nav.scrollWidth>this.nav.clientWidth,this.requestUpdate();let e=this.navItems.find(o=>o.active);if(!this.hasScrollControls||!e)return;let i=this.nav.scrollLeft+this.nav.clientWidth;if(e.offsetLeft>i){let o=e.offsetLeft/this.nav.clientWidth;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth*o,behavior:t?"instant":"smooth"})}}setActiveTab(t){t!==this.activeTab&&t.ariaDisabled==="false"&&(this.activeTab=t,this.navItems.forEach(e=>e.active=e===this.activeTab),this.panels.forEach(e=>{var i;return e.active=e.name===((i=this.activeTab)==null?void 0:i.panel)}),this.syncIndicator())}syncIndicator(){this.navItems.find(e=>e.active)?(this.indicator.style.display="block",this.repositionIndicator()):this.indicator.style.display="none"}repositionIndicator(t=void 0){let e=t!=null?t:this.navItems.find(d=>d.active);if(!e)return;let i=this.type==="button"?e.link.clientWidth:e.clientWidth,o=this.navItems[0].offsetLeft;this.type==="button"&&(o+=this.size==="small"?5:10);let r=e.link.offsetHeight,s=this.getAllTabs(),y=s.slice(0,s.indexOf(e)).reduce((d,p)=>({left:d.left+p.clientWidth,top:d.top+p.clientHeight}),{left:0,top:0});this.indicator.style.width=`${i}px`,this.indicator.style.height=this.type==="button"?`${r}px`:"auto",this.indicator.style.translate=`${y.left}px`,this.indicator.style.left=`${o-(this.hasScrollControls?20:0)}px`}getAllTabs(){return[...this.shadowRoot.querySelector(".nav").assignedElements()].filter(e=>e.tagName.toLowerCase()==="scw-horizontal-nav-item")}getAllPanels(){return this.tabs?[...this.body.assignedElements()].filter(t=>t.tagName.toLowerCase()==="scw-horizontal-nav-panel"):[]}handleClick(t){let i=t.target.closest("scw-horizontal-nav-item");(i==null?void 0:i.closest("scw-horizontal-nav"))===this&&i!==null&&this.setActiveTab(i)}handleKeyDown(t){let i=t.target.closest("scw-horizontal-nav-item");if((i==null?void 0:i.closest("scw-horizontal-nav"))===this&&(["Enter"," "].includes(t.key)&&i!==null&&(this.setActiveTab(i),t.preventDefault()),["ArrowLeft","ArrowRight","Home","End"].includes(t.key))){let r=this.navItems.find(s=>s.matches(":focus"));if((r==null?void 0:r.tagName.toLowerCase())==="scw-horizontal-nav-item"){let s=this.navItems.indexOf(r);t.key==="Home"?s=0:t.key==="End"?s=this.navItems.length-1:t.key==="ArrowLeft"?s--:t.key==="ArrowRight"&&s++,s<0&&(s=this.navItems.length-1),s>this.navItems.length-1&&(s=0),this.navItems[s].focus({preventScroll:!0}),this.setActiveTab(this.navItems[s]),t.preventDefault()}}}handleScrollToStart(){this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollToEnd(){this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}handleMouseover(t){let i=t.target.closest("scw-horizontal-nav-item");(i==null?void 0:i.closest("scw-horizontal-nav"))===this&&i!==null&&(this.indicator.style.display="block",this.repositionIndicator(i))}render(){let t={small:this.size==="small",medium:this.size==="medium","button-style":this.type==="button","tab-style":this.type==="tab",tab:this.tabs,container:!0,"scroll-controller":this.hasScrollControls,"hide-border":this.hideBorder};return l`
+      <div
+        class=${m(t)}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}>
+        <div class="nav-btn-container">
+          ${this.hasScrollControls?l`
+                <scw-link
+                  design="plain"
+                  class="prev-link"
+                  aria-label="previous"
+                  @click=${this.handleScrollToStart}>
+                  <scw-icon
+                    icon="icon-chevron-left"
+                    size="20"></scw-icon>
+                </scw-link>
+              `:""}
+          <div class="nav-container">
+            <div
+              class="nav-group"
+              @mouseover="${this.handleMouseover}"
+              @mouseleave="${this.syncIndicator}"
+              ${this.tabs?'role="tablist"':""}>
+              <slot class="nav"></slot>
+              <div class="nav-indicator"></div>
+            </div>
+          </div>
+          ${this.hasScrollControls?l`
+                <scw-link
+                  design="plain"
+                  class="next-link"
+                  aria-label="next"
+                  @click=${this.handleScrollToEnd}>
+                  <scw-icon
+                    icon="icon-chevron-right"
+                    aria-label="20"
+                    size="20"></scw-icon>
+                </scw-link>
+              `:""}
+        </div>
+        ${this.tabs?l`
+        <slot
+          name="panel"
+          class="nav-panels">
+        </slot>
+          `:""}
+        
+      </div>
+    `}};a([c({type:String,attribute:"type",reflect:!1})],n.prototype,"type",2),a([c({type:String,attribute:"size",reflect:!1})],n.prototype,"size",2),a([c({type:Boolean,attribute:"tabs",reflect:!1})],n.prototype,"tabs",2),a([c({type:Boolean,attribute:"hide-border",reflect:!1})],n.prototype,"hideBorder",2),a([h(".nav-indicator")],n.prototype,"indicator",2),a([h(".nav-panels")],n.prototype,"body",2),a([h(".nav-container")],n.prototype,"nav",2),a([h(".container")],n.prototype,"tabGroup",2);export{n as a};

package/dist/chunks/chunk.46DMXTE4.js

@@ -0,0 +1,160 @@
+import{a as p}from"./chunk.4SWKJDYZ.js";import{a as s}from"./chunk.QHUZYUAT.js";import{a as c,b as o,d as i,f as l}from"./chunk.CONKFFEA.js";import{a}from"./chunk.G2G2TPJK.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var n=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: 12px 12px 12px 12px;
+  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;
+}
+.wrapper .checkbox .input-label {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+  flex: 1;
+}
+.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: 12px 12px 12px 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-03);
+}
+.checked .checkbox .box .icon {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 12px 12px 12px 12px;
+  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: 8px;
+  height: 8px;
+  opacity: 1;
+}
+.checked .checkbox .box .icon > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+
+.wrapper .checkbox .box:focus,
+.wrapper .checkbox .box:focus-visible {
+  outline: none;
+  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: 12px 12px 12px 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-07);
+  box-shadow: none;
+}
+:host([aria-disabled]) .checkbox .box .icon {
+  opacity: 0;
+}
+:host([aria-disabled]) .checkbox .input-label {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-06);
+  align-self: stretch;
+  flex: 1;
+}
+
+.box:hover {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 12px 12px 12px 12px;
+  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;
+}`;var e=class extends l{constructor(){super();this.value="";this.selected=!1;this.alignment="center";this.element="radio"}static get styles(){return[super.styles,n]}connectedCallback(){super.connectedCallback(),this.value||this.setAttribute("value",this.ariaLabel)}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}handleClick(t){t.preventDefault()}focus(){this.input.focus()}render(){let t={checked:this.selected,wrapper:!0,topAlign:this.alignment==="top"};return a`
+      <div class=${p(t)}>
+        <label class="checkbox">
+          
+          <div class="box"
+            role="radio"
+            aria-checked="${this.selected}"
+            tabindex="${this.selected?"0":"-1"}"
+            @click=${this.handleClick}>
+              <div class="icon"></div>
+          </div>
+          <div class="input-label">
+            ${this.ariaLabel}
+            <slot></slot>
+          </div>
+        </label>
+      </div>
+      `}};r([o({type:String,attribute:"value",reflect:!1})],e.prototype,"value",2),r([o({type:Boolean,attribute:"selected",reflect:!0})],e.prototype,"selected",2),r([o({type:String,reflect:!1,attribute:"alignment"})],e.prototype,"alignment",2),r([i(".box")],e.prototype,"input",2),r([s("selected")],e.prototype,"handleSelectedChange",1);export{e as a};