@kubex/zinc 1.1.71 → 1.1.72

package/dist/custom-elements.json

@@ -43877,7 +43877,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.71",
+    "version": "1.1.72",
     "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.71",
+  "version": "1.1.72",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -1658,7 +1658,7 @@ import{a as En,b as c_,c as pr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var Z
           </div>
         </div>
       </div>
-    `}};Ce.styles=[jo.styles,E(wv)],Ce.dependencies={"zn-button":Ct,"zn-copy-button":$h,"zn-expanding-action":Xh,"zn-icon":ct,"zn-navbar":aa,"zn-tab":Qh},c([p()],Ce.prototype,"caption",2),c([p({attribute:"entity-id"})],Ce.prototype,"entityId",2),c([p({attribute:"entity-id-show",type:Boolean})],Ce.prototype,"entityIdShow",2),c([p({attribute:"full-location"})],Ce.prototype,"fullLocation",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"modal",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"nested",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"primary",2),c([p({attribute:"previous-path"})],Ce.prototype,"previousPath",2),c([p({attribute:"previous-target"})],Ce.prototype,"previousTarget",2),c([p()],Ce.prototype,"summary",2),c([O()],Ce.prototype,"scrolled",2),c([O()],Ce.prototype,"tabDefinitions",2),c([O()],Ce.prototype,"hasExpandingActions",2);var z3=Ce;Ce.define("zn-page");var _v=S`@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{display:block}.form-control-input{display:flex;align-items:center;gap:var(--zn-spacing-x-small)}zn-dialog{--width:min(80vw,900px);--icon-color:rgb(var(--zn-text))}.icon-picker__dialog-layout{display:flex;gap:var(--zn-spacing-large);height:40vh}.icon-picker__dialog-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.icon-picker__dialog-sidebar{width:180px;flex-shrink:0}@media (max-width:640px){zn-dialog{--width:100vw}zn-dialog::part(base){max-width:100%;max-height:100%;margin:0;border-radius:0;height:100dvh;width:100vw}.icon-picker__dialog-layout{height:calc(100dvh - 8rem);flex-direction:column}.icon-picker__dialog-sidebar{width:100%;flex-shrink:0}}.icon-picker__mode-switch{display:flex;gap:var(--zn-spacing-x-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__upload{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--zn-spacing-small);border:dashed 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__upload-preview{max-width:100%;max-height:160px;-o-object-fit:contain;object-fit:contain;border-radius:var(--zn-border-radius)}.icon-picker__upload-filename{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted));word-break:break-all}.icon-picker__dialog-controls{display:flex;gap:var(--zn-spacing-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__library-select{flex:1;min-width:0}.icon-picker__color-input{width:140px;flex-shrink:0}.icon-picker__icon-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__search{margin-bottom:var(--zn-spacing-small)}.icon-picker__free-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__grid{display:flex;flex-wrap:wrap;gap:var(--zn-spacing-x-small);flex:1;overflow-y:auto;align-content:flex-start;border:solid 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-x-small)}.icon-picker__grid-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:var(--zn-border-radius);background:transparent;color:var(--zn-text-color);cursor:pointer;transition:var(--zn-transition-fast) background-color,var(--zn-transition-fast) border-color}.icon-picker__grid-item:hover{background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__grid-item--selected{border-color:rgb(var(--zn-color-primary));background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__no-results{width:100%;text-align:center;padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__preview{display:flex;flex-direction:column;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-medium);background-color:rgba(var(--zn-panel-secondary),0.5);border-radius:var(--zn-border-radius);text-align:center}.icon-picker__preview--empty{color:rgb(var(--zn-text-muted))}.icon-picker__preview-name{font-size:var(--zn-font-size-medium);font-family:var(--zn-font-mono);word-break:break-all}.icon-picker__preview-library{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__preview-hint{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}`;var zt=class zt extends C{constructor(){super(...arguments);this.formControlController=new ot(this,{assumeInteractionOn:["zn-change"],value:t=>t._file??t.icon});this.name="";this.icon="";this.label="";this.library="material-symbols-outlined";this.color="";this.noColor=!1;this.noLibrary=!1;this.helpText="";this.disabled=!1;this.required=!1;this.triggerSubmit=!1;this.allowUpload=!1;this.accept="image/*";this.defaultValue="";this._dialogOpen=!1;this._searchQuery="";this._iconList=[];this._filteredIcons=[];this._pendingIcon="";this._pendingLibrary="";this._pendingColor="";this._pendingFile=null;this._pendingFileUrl=null;this._mode="icon";this._file=null;this._fileUrl=null}get value(){return this.icon}set value(t){this.icon=t}get file(){return this._file}get isImageValue(){return!!this._file||this.icon.includes("/")}get validity(){return this.required&&!this.icon&&!this._file?{valid:!1,valueMissing:!0,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}:{valid:!0,valueMissing:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}}get validationMessage(){return this.required&&!this.icon&&!this._file?"Please select an icon.":""}checkValidity(){return this.validity.valid}getForm(){return this.formControlController.getForm()}reportValidity(){return this.checkValidity()}setCustomValidity(t){this.formControlController.updateValidity()}isFreeInputLibrary(t){return zt.freeInputLibraries.has(t)}async getIconsForLibrary(t){try{switch(t){case"brands":return(await import("./chunks/zn.CU5HCKLN.js")).brandIcons;case"line":return(await import("./chunks/zn.7VCR5ZZL.js")).lineIcons;default:{let r=await import("./chunks/zn.NKUIXDNI.js");switch(t){case"material-outlined":return r.material_outlinedIcons;case"material-round":return r.material_roundIcons;case"material-sharp":return r.material_sharpIcons;case"material-two-tone":return r.material_two_toneIcons;case"material-symbols-outlined":return r.material_symbols_outlinedIcons;default:return r.materialIcons}}}}catch{return[]}}async openDialog(){this._pendingIcon=this.isImageValue?"":this.icon,this._pendingLibrary=this.library,this._pendingColor=this.color,this._searchQuery="",this._mode=this.allowUpload&&this.isImageValue?"upload":"icon",this._iconList=await this.getIconsForLibrary(this.library),this._filteredIcons=this._iconList.slice(0,200),this._dialogOpen=!0,await this.updateComplete,this._dialog.show()}closeDialog(){this.discardPendingFile(),this._dialog.hide(),this._dialogOpen=!1}handleConfirm(){this._mode==="upload"?this._pendingFile&&(this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=this._pendingFile,this._fileUrl=this._pendingFileUrl,this._pendingFile=null,this._pendingFileUrl=null,this.icon=""):(this.icon=this._pendingIcon,this.library=this._pendingLibrary,this.color=this._pendingColor,this.clearFile()),this.closeDialog(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}handleCancel(){this.closeDialog()}handleFileSelect(t){let r=t.target,n=r.files?.[0]??null;n&&(this.discardPendingFile(),this._pendingFile=n,this._pendingFileUrl=URL.createObjectURL(n),r.value="")}discardPendingFile(){this._pendingFileUrl&&URL.revokeObjectURL(this._pendingFileUrl),this._pendingFile=null,this._pendingFileUrl=null}clearFile(){this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=null,this._fileUrl=null}disconnectedCallback(){super.disconnectedCallback(),this.discardPendingFile(),this._fileUrl&&URL.revokeObjectURL(this._fileUrl)}handleSearchInput(t){let r=t.target;this._searchQuery=r.value.toLowerCase(),this.filterIcons()}filterIcons(){this._searchQuery?this._filteredIcons=this._iconList.filter(t=>t.includes(this._searchQuery)).slice(0,200):this._filteredIcons=this._iconList.slice(0,200)}handleIconSelect(t){this._pendingIcon=t}async handleLibraryChange(t){let r=t.target,n=this.isFreeInputLibrary(this._pendingLibrary);this._pendingLibrary=r.value;let a=this.isFreeInputLibrary(this._pendingLibrary);n!==a&&(this._pendingIcon=""),a||(this._iconList=await this.getIconsForLibrary(this._pendingLibrary),this.filterIcons())}handleColorInput(t){let r=t.target;this._pendingColor=r.value}handleFreeInput(t){let r=t.target;this._pendingIcon=r.value}handleClear(t){t.stopPropagation(),this.icon="",this.color="",this.clearFile(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}_handleTriggerClick(){this.disabled||this.openDialog()}render(){let t=!!this.label,r=!!this.helpText,n=!!this.icon||!!this._file,a=this._fileUrl??this.icon,s=n&&!this.isImageValue?this.library:V,l=this._pendingFileUrl??(this.isImageValue&&!this._file?this.icon:this._fileUrl);return u`
+    `}};Ce.styles=[jo.styles,E(wv)],Ce.dependencies={"zn-button":Ct,"zn-copy-button":$h,"zn-expanding-action":Xh,"zn-icon":ct,"zn-navbar":aa,"zn-tab":Qh},c([p()],Ce.prototype,"caption",2),c([p({attribute:"entity-id"})],Ce.prototype,"entityId",2),c([p({attribute:"entity-id-show",type:Boolean})],Ce.prototype,"entityIdShow",2),c([p({attribute:"full-location"})],Ce.prototype,"fullLocation",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"modal",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"nested",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"primary",2),c([p({attribute:"previous-path"})],Ce.prototype,"previousPath",2),c([p({attribute:"previous-target"})],Ce.prototype,"previousTarget",2),c([p()],Ce.prototype,"summary",2),c([O()],Ce.prototype,"scrolled",2),c([O()],Ce.prototype,"tabDefinitions",2),c([O()],Ce.prototype,"hasExpandingActions",2);var z3=Ce;Ce.define("zn-page");var _v=S`@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{display:block}.form-control-input{display:flex;align-items:center;gap:var(--zn-spacing-x-small)}zn-dialog{--width:min(80vw,900px);--icon-color:rgb(var(--zn-text))}.icon-picker__dialog-layout{display:flex;gap:var(--zn-spacing-large);height:40vh}.icon-picker__dialog-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.icon-picker__dialog-sidebar{width:180px;flex-shrink:0}@media (max-width:640px){zn-dialog{--width:100vw}zn-dialog::part(base){max-width:100%;max-height:100%;margin:0;border-radius:0;height:100dvh;width:100vw}.icon-picker__dialog-layout{height:calc(100dvh - 8rem);flex-direction:column}.icon-picker__dialog-sidebar{width:100%;flex-shrink:0}}.icon-picker__mode-switch{display:flex;gap:var(--zn-spacing-x-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__upload{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--zn-spacing-small);border:dashed 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__upload-preview{max-width:100%;max-height:160px;-o-object-fit:contain;object-fit:contain;border-radius:var(--zn-border-radius)}.icon-picker__upload-filename{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted));word-break:break-all}.icon-picker__dialog-controls{display:flex;gap:var(--zn-spacing-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__library-select{flex:1;min-width:0}.icon-picker__color-input{width:140px;flex-shrink:0}.icon-picker__icon-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__search{margin-bottom:var(--zn-spacing-small)}.icon-picker__free-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__grid{display:flex;flex-wrap:wrap;gap:var(--zn-spacing-x-small);flex:1;overflow-y:auto;align-content:flex-start;border:solid 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-x-small)}.icon-picker__grid-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:var(--zn-border-radius);background:transparent;color:var(--zn-text-color);cursor:pointer;transition:var(--zn-transition-fast) background-color,var(--zn-transition-fast) border-color}.icon-picker__grid-item:hover{background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__grid-item--selected{border-color:rgb(var(--zn-color-primary));background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__no-results{width:100%;text-align:center;padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__preview{display:flex;flex-direction:column;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-medium);background-color:rgba(var(--zn-panel-secondary),0.5);border-radius:var(--zn-border-radius);text-align:center}.icon-picker__preview--empty{color:rgb(var(--zn-text-muted))}.icon-picker__preview-name{font-size:var(--zn-font-size-medium);font-family:var(--zn-font-mono);word-break:break-all}.icon-picker__preview-library{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__preview-hint{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--zn-spacing-small);--icon-color:currentColor}`;var zt=class zt extends C{constructor(){super(...arguments);this.formControlController=new ot(this,{assumeInteractionOn:["zn-change"],value:t=>t._file??t.icon});this.name="";this.icon="";this.label="";this.library="material-symbols-outlined";this.color="";this.noColor=!1;this.noLibrary=!1;this.helpText="";this.disabled=!1;this.required=!1;this.triggerSubmit=!1;this.allowUpload=!1;this.accept="image/*";this.defaultValue="";this._dialogOpen=!1;this._searchQuery="";this._iconList=[];this._filteredIcons=[];this._pendingIcon="";this._pendingLibrary="";this._pendingColor="";this._pendingFile=null;this._pendingFileUrl=null;this._mode="icon";this._file=null;this._fileUrl=null}get value(){return this.icon}set value(t){this.icon=t}get file(){return this._file}get isImageValue(){return!!this._file||this.icon.includes("/")}get validity(){return this.required&&!this.icon&&!this._file?{valid:!1,valueMissing:!0,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}:{valid:!0,valueMissing:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}}get validationMessage(){return this.required&&!this.icon&&!this._file?"Please select an icon.":""}checkValidity(){return this.validity.valid}getForm(){return this.formControlController.getForm()}reportValidity(){return this.checkValidity()}setCustomValidity(t){this.formControlController.updateValidity()}isFreeInputLibrary(t){return zt.freeInputLibraries.has(t)}async getIconsForLibrary(t){try{switch(t){case"brands":return(await import("./chunks/zn.CU5HCKLN.js")).brandIcons;case"line":return(await import("./chunks/zn.7VCR5ZZL.js")).lineIcons;default:{let r=await import("./chunks/zn.NKUIXDNI.js");switch(t){case"material-outlined":return r.material_outlinedIcons;case"material-round":return r.material_roundIcons;case"material-sharp":return r.material_sharpIcons;case"material-two-tone":return r.material_two_toneIcons;case"material-symbols-outlined":return r.material_symbols_outlinedIcons;default:return r.materialIcons}}}}catch{return[]}}async openDialog(){this._pendingIcon=this.isImageValue?"":this.icon,this._pendingLibrary=this.library,this._pendingColor=this.color,this._searchQuery="",this._mode=this.allowUpload&&this.isImageValue?"upload":"icon",this._iconList=await this.getIconsForLibrary(this.library),this._filteredIcons=this._iconList.slice(0,200),this._dialogOpen=!0,await this.updateComplete,this._dialog.show()}closeDialog(){this.discardPendingFile(),this._dialog.hide(),this._dialogOpen=!1}handleConfirm(){this._mode==="upload"?this._pendingFile&&(this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=this._pendingFile,this._fileUrl=this._pendingFileUrl,this._pendingFile=null,this._pendingFileUrl=null,this.icon=""):(this.icon=this._pendingIcon,this.library=this._pendingLibrary,this.color=this._pendingColor,this.clearFile()),this.closeDialog(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}handleCancel(){this.closeDialog()}handleFileSelect(t){let r=t.target,n=r.files?.[0]??null;n&&(this.discardPendingFile(),this._pendingFile=n,this._pendingFileUrl=URL.createObjectURL(n),r.value="")}discardPendingFile(){this._pendingFileUrl&&URL.revokeObjectURL(this._pendingFileUrl),this._pendingFile=null,this._pendingFileUrl=null}clearFile(){this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=null,this._fileUrl=null}disconnectedCallback(){super.disconnectedCallback(),this.discardPendingFile(),this._fileUrl&&URL.revokeObjectURL(this._fileUrl)}handleSearchInput(t){let r=t.target;this._searchQuery=r.value.toLowerCase(),this.filterIcons()}filterIcons(){this._searchQuery?this._filteredIcons=this._iconList.filter(t=>t.includes(this._searchQuery)).slice(0,200):this._filteredIcons=this._iconList.slice(0,200)}handleIconSelect(t){this._pendingIcon=t}async handleLibraryChange(t){let r=t.target,n=this.isFreeInputLibrary(this._pendingLibrary);this._pendingLibrary=r.value;let a=this.isFreeInputLibrary(this._pendingLibrary);n!==a&&(this._pendingIcon=""),a||(this._iconList=await this.getIconsForLibrary(this._pendingLibrary),this.filterIcons())}handleColorInput(t){let r=t.target;this._pendingColor=r.value}handleFreeInput(t){let r=t.target;this._pendingIcon=r.value}handleClear(t){t.stopPropagation(),this.icon="",this.color="",this.clearFile(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}_handleTriggerClick(){this.disabled||this.openDialog()}render(){let t=!!this.label,r=!!this.helpText,n=!!this.icon||!!this._file,a=this._fileUrl??this.icon,s=n&&!this.isImageValue?this.library:V,l=this._pendingFileUrl??(this.isImageValue&&!this._file?this.icon:this._fileUrl);return u`
       <div part="form-control"
            class="form-control ${t?"form-control--has-label":""} ${r?"form-control--has-help-text":""}">
 
@@ -1853,11 +1853,11 @@ import{a as En,b as c_,c as pr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var Z
               </div>
             </div>
 
-            <div slot="footer">
-              <zn-button color="default" @click=${this.handleCancel}>Cancel</zn-button>
-              <zn-button color="primary" @click=${this.handleConfirm}
+            <div slot="footer" class="icon-picker__footer">
+              <zn-button panel-bg icon="close" @click=${this.handleCancel}>Cancel</zn-button>
+              <zn-button color="primary" icon="check" @click=${this.handleConfirm}
                          ?disabled=${this._mode==="upload"?!this._pendingFile&&!this.isImageValue:!this._pendingIcon}>
-                Confirm
+                Save
               </zn-button>
             </div>
           </zn-dialog>

package/package.json

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

package/src/components/icon-picker/icon-picker.component.ts

@@ -508,11 +508,11 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
               </div>
             </div>
 
-            <div slot="footer">
-              <zn-button color="default" @click=${this.handleCancel}>Cancel</zn-button>
-              <zn-button color="primary" @click=${this.handleConfirm}
+            <div slot="footer" class="icon-picker__footer">
+              <zn-button panel-bg icon="close" @click=${this.handleCancel}>Cancel</zn-button>
+              <zn-button color="primary" icon="check" @click=${this.handleConfirm}
                          ?disabled=${this._mode === 'upload' ? !this._pendingFile && !this.isImageValue : !this._pendingIcon}>
-                Confirm
+                Save
               </zn-button>
             </div>
           </zn-dialog>

package/src/components/icon-picker/icon-picker.scss

@@ -195,3 +195,14 @@ zn-dialog {
   color: rgb(var(--zn-text-muted));
 }
 
+// Mirrors the global .form-actions layout, which isn't available in the
+// shadow DOM. currentColor undoes the dialog-wide --icon-color override so
+// button icons match their button's text colour.
+.icon-picker__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  --icon-color: currentColor;
+}
+