@kubex/zinc 1.1.60 → 1.1.62

package/dist/custom-elements.json

@@ -40826,7 +40826,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.60",
+    "version": "1.1.62",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.60",
+  "version": "1.1.62",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -2209,7 +2209,7 @@ import{a as _n,b as B2,c as ar,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var B
       <zn-datepicker
         name="${t}"
         format-time="HH:mm"
-        time-picker="${o}"
+        ?time-picker="${o}"
         class="query-builder__value"
         @zn-change="${s=>this._updateDateValue(t,s,n)}"
         >
@@ -3008,7 +3008,7 @@ ${ua(this.code(r,t))}
           <slot>${this._getLoadingState()}</slot>
         </div>
       </dialog>
-    `}};_o.styles=A(Gz),c([H()],_o.prototype,"hasFocus",2),c([H()],_o.prototype,"hasContentHeader",2),c([F("dialog")],_o.prototype,"dialogEl",2),c([p({type:Boolean,reflect:!0})],_o.prototype,"open",2),c([p()],_o.prototype,"uri",2),c([K("open",{waitUntilFirstUpdate:!0})],_o.prototype,"handleOpenChange",1);_o.define("zn-editor-dialog");var Wz=T`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px 0}.form-control-input--flush{margin:0}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height);margin-bottom:var(--zn-spacing-x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{--zn-toggle-margin:8px 0;display:block}.switch__wrapper{display:flex;flex-direction:column}.switch__wrapper label{flex:1;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer}.switch__input-wrapper{box-sizing:border-box;text-align:left;position:relative;display:inline-flex;width:42px;height:24px;flex-shrink:0;cursor:pointer;border-radius:12px;align-items:center;background-color:rgb(var(--zn-color-tab));border:0.92px solid rgb(var(--zn-color-tab));margin:var(--zn-toggle-margin);transition:color 0.2s ease-in-out,background-color 0.4s ease-in-out,border-color 0.2s ease-in-out}:host(:focus) .switch__input-wrapper{outline:rgb(var(--zn-primary)) solid 1px}:host([checked]) .switch__input-wrapper{background-color:rgb(var(--zn-color-primary));border-color:rgb(var(--zn-color-primary))}:host([checked]) .switch__input-wrapper .switch__control{left:calc(100% - 20.32px - 0.92px)}.switch{height:100%;width:100%;padding:0;margin:0;cursor:pointer}.switch-label{margin:0;color:var(--zn-input-label-color);font-size:var(--zn-input-label-font-size-medium);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height)}.switch__wrapper--small .switch-label{font-size:var(--zn-input-label-font-size-small)}.switch__description{display:none}.switch__wrapper--has-description .switch__description{display:block;color:var(--zn-input-help-text-color);font-size:var(--zn-input-font-size-small)}.switch__wrapper--small .switch__description{font-size:var(--zn-font-size-x-small)}.switch__wrapper--large .switch-label{font-size:var(--zn-input-label-font-size-large)}.switch__control{pointer-events:none;position:absolute;top:50%;left:0.92px;width:20.32px;height:20.32px;border-radius:50%;background:#fff;box-shadow:0 2px 4px 0 rgba(var(--zn-color-text),0.1);transform:translateY(-50%);transition:left 0.3s ease-in-out,background-color 0.4s ease-in-out;outline:none}.switch__input{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch__wrapper--small .switch__input-wrapper{height:20px;width:35px}.switch__wrapper--small .switch__control{width:14px;height:14px}:host([checked]) .switch__wrapper--small .switch__input-wrapper .switch__control{left:calc(100% - 14px - 0.92px)}.switch__wrapper--label-left label,.switch__wrapper--label-right label{align-items:center;justify-content:space-between;gap:8px}.switch__wrapper--label-left label{flex-direction:row}.switch__wrapper--label-right label{flex-direction:row-reverse}:host([inline]){display:inline-block}.switch__wrapper--inline label{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}.switch__wrapper--inline label .switch__input{margin-inline:1px;margin-inline-end:1px}.switch__wrapper--inline.switch__wrapper--label-right label{flex-direction:row-reverse}`;var Pt=class extends S{constructor(){super(...arguments);this.hasSlotController=new Q(this,"help-text","description");this.formControlController=new ot(this,{value:t=>t.checked?t.value||"on":void 0,defaultValue:t=>t.defaultChecked,setValue:(t,o)=>t.checked=o});this.hasFocus=!1;this.title="";this.name="";this.fallbackValue="";this.size="medium";this.disabled=!1;this.checked=!1;this.defaultChecked=!1;this.form="";this.required=!1;this.helpText="";this.triggerSubmit=!1;this.onText="";this.offText="";this.label="";this.description="";this.labelPosition="top";this.inline=!1}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(t){this.formControlController.updateValidity(),super.firstUpdated(t)}handleBlur(){this.hasFocus=!1}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("zn-input")}handleClick(){this.checked=!this.checked,this.triggerSubmit&&this.formControlController.submit()}handleFocus(){this.hasFocus=!0}handleKeyDown(t){t.key==="ArrowLeft"&&(t.preventDefault(),this.checked=!1),t.key==="ArrowRight"&&(t.preventDefault(),this.checked=!0)}click(){this.input.click()}focus(t){this.input.focus(t)}blur(){this.input.blur()}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){let t=u``;this.fallbackValue!==""&&(t=u`
+    `}};_o.styles=A(Gz),c([H()],_o.prototype,"hasFocus",2),c([H()],_o.prototype,"hasContentHeader",2),c([F("dialog")],_o.prototype,"dialogEl",2),c([p({type:Boolean,reflect:!0})],_o.prototype,"open",2),c([p()],_o.prototype,"uri",2),c([K("open",{waitUntilFirstUpdate:!0})],_o.prototype,"handleOpenChange",1);_o.define("zn-editor-dialog");var Wz=T`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px 0}.form-control-input--flush{margin:0}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height);margin-bottom:var(--zn-spacing-x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{--zn-toggle-margin:8px 0;display:block}.switch__wrapper{display:flex;flex-direction:column}.switch__wrapper label{flex:1;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer}.switch__input-wrapper{box-sizing:border-box;text-align:left;position:relative;display:inline-flex;width:42px;height:24px;flex-shrink:0;cursor:pointer;border-radius:12px;align-items:center;background-color:rgb(var(--zn-color-tab));border:0.92px solid rgb(var(--zn-color-tab));margin:var(--zn-toggle-margin);transition:color 0.2s ease-in-out,background-color 0.4s ease-in-out,border-color 0.2s ease-in-out}:host(:focus) .switch__input-wrapper{outline:rgb(var(--zn-primary)) solid 1px}:host([checked]) .switch__input-wrapper{background-color:rgb(var(--zn-color-primary));border-color:rgb(var(--zn-color-primary))}:host([checked]) .switch__input-wrapper .switch__control{left:calc(100% - 20.32px - 0.92px)}.switch{height:100%;width:100%;padding:0;margin:0;cursor:pointer}.switch-label{font-family:var(--zn-font-sans);font-size:var(--zn-text-input-label-font-size);font-weight:var(--zn-text-input-label-font-weight);line-height:var(--zn-text-input-label-line-height);color:var(--zn-text-input-label-color);text-transform:var(--zn-text-input-label-transform);margin:0}.switch__wrapper--small .switch-label{font-size:var(--zn-input-label-font-size-small)}.switch__description{display:none;margin-top:var(--zn-spacing-2x-small)}.switch__wrapper--has-description .switch__description{font-family:var(--zn-font-sans);font-size:var(--zn-text-paragraph-font-size);font-weight:var(--zn-text-paragraph-font-weight);line-height:var(--zn-text-paragraph-line-height);color:var(--zn-text-paragraph-color);text-transform:var(--zn-text-paragraph-transform);display:block;color:rgb(var(--zn-color-muted-text))}.switch__wrapper--small .switch__description{font-size:var(--zn-font-size-x-small)}.switch__wrapper--large .switch-label{font-size:var(--zn-input-label-font-size-large)}.switch__control{pointer-events:none;position:absolute;top:50%;left:0.92px;width:20.32px;height:20.32px;border-radius:50%;background:#fff;box-shadow:0 2px 4px 0 rgba(var(--zn-color-text),0.1);transform:translateY(-50%);transition:left 0.3s ease-in-out,background-color 0.4s ease-in-out;outline:none}.switch__input{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch__wrapper--small .switch__input-wrapper{height:20px;width:35px}.switch__wrapper--small .switch__control{width:14px;height:14px}:host([checked]) .switch__wrapper--small .switch__input-wrapper .switch__control{left:calc(100% - 14px - 0.92px)}.switch__wrapper--label-left label,.switch__wrapper--label-right label{align-items:center;justify-content:space-between;gap:8px}.switch__wrapper--label-left label{flex-direction:row}.switch__wrapper--label-right label{flex-direction:row-reverse}:host([inline]){display:inline-block}.switch__wrapper--inline label{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}.switch__wrapper--inline label .switch__input{margin-inline:1px;margin-inline-end:1px}.switch__wrapper--inline.switch__wrapper--label-right label{flex-direction:row-reverse}`;var Pt=class extends S{constructor(){super(...arguments);this.hasSlotController=new Q(this,"help-text","description");this.formControlController=new ot(this,{value:t=>t.checked?t.value||"on":void 0,defaultValue:t=>t.defaultChecked,setValue:(t,o)=>t.checked=o});this.hasFocus=!1;this.title="";this.name="";this.fallbackValue="";this.size="medium";this.disabled=!1;this.checked=!1;this.defaultChecked=!1;this.form="";this.required=!1;this.helpText="";this.triggerSubmit=!1;this.onText="";this.offText="";this.label="";this.description="";this.labelPosition="top";this.inline=!1}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(t){this.formControlController.updateValidity(),super.firstUpdated(t)}handleBlur(){this.hasFocus=!1}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("zn-input")}handleClick(){this.checked=!this.checked,this.triggerSubmit&&this.formControlController.submit()}handleFocus(){this.hasFocus=!0}handleKeyDown(t){t.key==="ArrowLeft"&&(t.preventDefault(),this.checked=!1),t.key==="ArrowRight"&&(t.preventDefault(),this.checked=!0)}click(){this.input.click()}focus(t){this.input.focus(t)}blur(){this.input.blur()}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){let t=u``;this.fallbackValue!==""&&(t=u`
         <input type="hidden"
                name=${this.name}
                value=${this.fallbackValue}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.60",
+  "version": "1.1.62",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/query-builder/query-builder.component.ts

@@ -398,7 +398,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
       <zn-datepicker
         name="${uniqueId}"
         format-time="HH:mm"
-        time-picker="${hasTime}"
+        ?time-picker="${hasTime}"
         class="query-builder__value"
         @zn-change="${(e: ZnChangeEvent) => this._updateDateValue(uniqueId, e, submitFormat)}"
         >

package/src/components/toggle/toggle.scss

@@ -58,11 +58,9 @@
 }
 
 .switch-label {
+  @include wc.text-style(input-label);
+
   margin: 0;
-  color: var(--zn-input-label-color);
-  font-size: var(--zn-input-label-font-size-medium);
-  font-weight: var(--zn-input-label-font-weight);
-  line-height: var(--zn-input-label-line-height);
 }
 
 .switch__wrapper--small .switch-label {
@@ -71,12 +69,14 @@
 
 .switch__description {
   display: none;
+  margin-top: var(--zn-spacing-2x-small);
 }
 
 .switch__wrapper--has-description .switch__description {
+  @include wc.text-style(paragraph);
+
   display: block;
-  color: var(--zn-input-help-text-color);
-  font-size: var(--zn-input-font-size-small);
+  color: rgb(var(--zn-color-muted-text));
 }
 
 .switch__wrapper--small .switch__description {