@cargosense/cargo-design-system 1.0.9 → 1.0.11

package/dist/molecules/index.cjs.js

@@ -114,7 +114,7 @@
       outline: none;
     }
 
-    `;static properties={variant:{type:String,reflect:!0,converter:t=>["classic","secondary","primary"].includes(t)?t:"classic"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},disabled:{type:Boolean,reflect:!0,attribute:"disabled"},link:{type:String,reflect:!0,attribute:"link"},target:{type:String,reflect:!0,attribute:"target",converter:t=>["_blank","_self","_parent","_top"].includes(t)?t:"_self"},expand:{type:Boolean,reflect:!0,attribute:"full-width",converter:t=>t==""?"expand":""},value:{type:String,reflect:!0,attribute:"value",defaultValue:""},type:{type:String,reflect:!0,attribute:"type",converter:t=>["button","submit","reset"].includes(t)?t:"button"},square:{type:Boolean,reflect:!0,attribute:"square",converter:t=>t===""?"square":""},form:{type:String,reflect:!0,attribute:"form"}};firstUpdated(){const t=document.getElementById(this.form);this.shadowRoot.querySelector("button").addEventListener("click",()=>{t instanceof HTMLFormElement&&(console.log("Form found, submitting..."),t.requestSubmit())})}constructor(){super(),this.link=void 0,this.target=void 0,this.disabled=!1,this.size="md",this.expand="",this._variant="primary",this.name=void 0,this.button="button",this.form=void 0,this.square=""}render(){return e.x`
+    `;static properties={variant:{type:String,reflect:!0,converter:t=>["classic","secondary","primary"].includes(t)?t:"classic"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},disabled:{type:Boolean,reflect:!0,attribute:"disabled"},link:{type:String,reflect:!0,attribute:"link"},target:{type:String,reflect:!0,attribute:"target",converter:t=>["_blank","_self","_parent","_top"].includes(t)?t:"_self"},expand:{type:Boolean,reflect:!0,attribute:"full-width",converter:t=>t==""?"expand":""},value:{type:String,reflect:!0,attribute:"value",defaultValue:""},type:{type:String,reflect:!0,attribute:"type",converter:t=>["button","submit","reset"].includes(t)?t:"button"},square:{type:Boolean,reflect:!0,attribute:"square",converter:t=>t===""?"square":""},form:{type:String,reflect:!0,attribute:"form"}};firstUpdated(){const t=document.getElementById(this.form);this.shadowRoot.querySelector("button").addEventListener("click",()=>{t instanceof HTMLFormElement&&t.requestSubmit()})}constructor(){super(),this.link=void 0,this.target=void 0,this.disabled=!1,this.size="md",this.expand="",this._variant="primary",this.name=void 0,this.button="button",this.form=void 0,this.square=""}render(){return e.x`
     <a href='${e.o(this.link)}' target="${e.o(this.target)}" tabindex="-1" class="${this.expand}">
       <button form="${this.form}" type="${this.button}" class="button ${this.square} ${this.variant} ${this.size} ${this.expand} ${this.disabled?"disabled":""}" .name="${this.name}" tabindex="${this.disabled?"-1":0}" @click='${this.handleClick}'>
        <slot name='start'></slot> <slot></slot> <slot name='end'></slot>
@@ -298,7 +298,7 @@
     `;static properties={name:{type:String,reflect:!0},type:{type:String,reflect:!0,converter:t=>["text","date","time","number","tel","url","phone","email","password"].includes(t)?t:"text"},disabled:{type:Boolean,reflect:!0},placeholder:{type:String,reflect:!0},readOnly:{type:Boolean,reflect:!0,attribute:"read-only"},required:{type:Boolean,reflect:!0},pattern:{type:String},error:{type:Boolean,reflect:!0},value:{type:String,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0},size:{type:String,reflect:!0,converter:t=>["sm","md","lg"].includes(t)?t:"md"},iconLeft:{type:String,reflect:!0,attribute:"icon-left"},iconRight:{type:String,reflect:!0,attribute:"icon-right"}};handleKeyPress(t){return this.dispatchEvent(new CustomEvent("keypress",{detail:{value:t.target.value,key:t.keyCode}})),t.key==="Enter"&&this.dispatchEvent(new CustomEvent("onenter",{detail:{value:t.target.value}})),this.dispatchEvent(new CustomEvent("onkeyup",{detail:{value:t.target.value,key:t.keyCode}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleInput(t){return this.dispatchEvent(new CustomEvent("input",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleChange(t){return this.dispatchEvent(new CustomEvent("onchange",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleFocus(t){return this.dispatchEvent(new CustomEvent("onblur",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target}constructor(){super(),this.value="",this.placeholder="",this.pattern="",this.variant="solid",this.size="md",this._internals=this.attachInternals()}render(){return e.x`
       ${this.iconLeft?e.x`<span class="icon-left-container"><cd-icon name="${this.iconLeft}" size="sm" class="icon-left"></cd-icon></span>`:""}
       <input id='${this.name}' class="${this.iconLeft?"icon-spacing-left":""} ${this.iconRight?" icon-spacing-right":""}  ${this.disabled?" disabled":""} ${this.error?" input-error":""} ${this.fullWidth?" full-width":""} ${this.variant==="dashed"?" dashed":this.variant=="dotted"?" dotted":""} ${this.size}" type="${this.type}" placeholder="${this.placeholder}" ?required=${this.required} .value="${this.value}"  ?readonly=${this.readOnly} ?disabled=${this.disabled} .pattern="${this.pattern}" @input="${this.handleInput}" @change="${this.handleChange}" @blur="${this.handleFocus}" @keypress=${this.handleKeyPress}/>
-      ${this.iconRight?e.x`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right" color='${ifDefined(this.error?"var(--input-error-border-color)":void 0)}'></cd-icon></span>`:""}
+      ${this.iconRight?e.x`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right" color='${e.o(this.error?"var(--input-error-border-color)":void 0)}'></cd-icon></span>`:""}
       `}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("input").focus()}}function k(){typeof window<"u"&&!customElements.get("cd-input")&&customElements.define("cd-input",s)}e.registerNavImage();class l extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
@@ -901,7 +901,7 @@
         ${this.iconRight||this.collapsed?e.x`<span @click="${this.expandInput}" class="${this.collapsed?"icon-collapsed-container":"icon-right-container"}"><cd-icon name="search" class="${this.collapsed?"icon-collapsed "+this.size:"icon-right"}" variant="light-slate"></cd-icon></span>`:""}
         ${this.closeIcon?e.x`<span class="${this.collapsed?"hidden":"active"}" id='closeIcon' tabindex='0'><cd-icon name="exit" id="close-icon" class="icon close ${this.collapsed?"hidden-icon":"active-icon"}" @click="${this.collapseInput}"></cd-icon></span>`:""}
       </div>
-    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM is not available.");return}this.shadowRoot.querySelector(".active")&&(console.log("Adding event listener to active element"),this.shadowRoot.querySelector(".active").addEventListener("keydown",t=>{console.log("test"),t.keyCode===13&&this.collapseInput()}))}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("#search-input").focus()}expandInput(){this.collapsed&&(this.collapsed=!1,this.shadowRoot.querySelector("#search-input").focus(),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"),this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("active"),this.requestUpdate(),this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown",t=>{t.key==="Enter"&&this.collapseInput()}))}collapseInput(){this.collapsed||(this.collapsed=!0,this.value="",this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("hidden"),this.shadowRoot.querySelector("#close-icon").classList.remove("active"),this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"),this.dispatchEvent(new CustomEvent("collapsed",{detail:{closed:!0},bubbles:!0,composed:!0})),this.requestUpdate())}}function T(){typeof window<"u"&&!customElements.get("cd-search")&&customElements.define("cd-search",v)}e.registerIcon();class b extends e.i{static styles=e.i$1`
+    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM is not available.");return}this.shadowRoot.querySelector(".active")&&this.shadowRoot.querySelector(".active").addEventListener("keydown",t=>{t.keyCode===13&&this.collapseInput()})}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("#search-input").focus()}expandInput(){this.collapsed&&(this.collapsed=!1,this.shadowRoot.querySelector("#search-input").focus(),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"),this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("active"),this.requestUpdate(),this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown",t=>{t.key==="Enter"&&this.collapseInput()}))}collapseInput(){this.collapsed||(this.collapsed=!0,this.value="",this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("hidden"),this.shadowRoot.querySelector("#close-icon").classList.remove("active"),this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"),this.dispatchEvent(new CustomEvent("collapsed",{detail:{closed:!0},bubbles:!0,composed:!0})),this.requestUpdate())}}function T(){typeof window<"u"&&!customElements.get("cd-search")&&customElements.define("cd-search",v)}e.registerIcon();class b extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -1138,7 +1138,7 @@
       color: var(--input-error-border-color);
     }
 
-  `;static properties={value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
+  `;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
     <div class='container'>
       <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='date' id='${this.name|"date"}' name='${this.name|"date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
       ${this.shortcut?e.x`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>`:""}
@@ -1241,12 +1241,12 @@
       height: 36px;
       padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
     }
-  `;static properties={value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.error=!1,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
+  `;static properties={name:{type:String,reflect:!0},value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.error=!1,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
     <div class='container'>
       <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='time' id='${this.name|"time"}' name='${this.name|"time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
       ${this.shortcut?e.x`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>`:""}
     </div>
-    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM not available, TimeComponent may not render correctly.");return}this.shadowRoot.querySelector("cd-button")&&this.shadowRoot.querySelector("cd-button").addEventListener("button-click",()=>{this.setValue(this.timeNow()),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})}timeNow(){console.log(this.timezone);let t=new Date().toLocaleString("en-US",{timeZone:this.timezone||"America/New_York"});if(console.log(t),console.log(t.split(" ")[2]),t.split(" ")[2]==="PM"){let o=t.split(" ");console.log(o),t=Number(o[1].split(":")[0])+12+":"+o[1].split(":")[1]+":"+o[1].split(":")[2]}else t=t.split(" ")[1];return t}setValue(t){this.value=t,this._internals.setFormValue(t),this.requestUpdate()}setError(t){if(typeof t!="error"){console.warn("Error text must be a string");return}this.error=t,this._internals.setValidity({customError:t}),this.requestUpdate()}setDisabled(t){this.disabled=t,this._internals.setValidity({customError:t}),this.requestUpdate()}}function L(){typeof window<"u"&&!customElements.get("cd-time")&&customElements.define("cd-time",m)}e.registerIcon();class x extends e.i{static styles=e.i$1`
+    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM not available, TimeComponent may not render correctly.");return}this.shadowRoot.querySelector("cd-button")&&this.shadowRoot.querySelector("cd-button").addEventListener("button-click",()=>{this.setValue(this.timeNow()),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})}timeNow(){let t=new Date().toLocaleString("en-US",{timeZone:this.timezone||"America/New_York"});if(t.split(" ")[2]==="PM"){let o=t.split(" ");t=Number(o[1].split(":")[0])+12+":"+o[1].split(":")[1]+":"+o[1].split(":")[2]}else t=t.split(" ")[1];return t}setValue(t){this.value=t,this._internals.setFormValue(t),this.requestUpdate()}setError(t){if(typeof t!="error"){console.warn("Error text must be a string");return}this.error=t,this._internals.setValidity({customError:t}),this.requestUpdate()}setDisabled(t){this.disabled=t,this._internals.setValidity({customError:t}),this.requestUpdate()}}function L(){typeof window<"u"&&!customElements.get("cd-time")&&customElements.define("cd-time",m)}e.registerIcon();class x extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'GeistMono';
       src: url(${e.r(e.fontURL$1)}) format('woff');