@kubex/zinc 1.1.47 → 1.1.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +11 -1
- package/dist/web-types.json +1 -1
- package/dist/zn.d.ts +1 -0
- package/dist/zn.min.js +7 -5
- package/package.json +1 -1
- package/src/components/channel-tile/channel-tile.component.ts +14 -2
- package/src/components/channel-tile/channel-tile.scss +2 -2
- package/src/components/file/file.component.ts +16 -8
- package/src/components/file/file.test.ts +27 -3
- package/src/components/textarea/textarea.scss +6 -0
|
@@ -2873,6 +2873,16 @@
|
|
|
2873
2873
|
}
|
|
2874
2874
|
}
|
|
2875
2875
|
},
|
|
2876
|
+
{
|
|
2877
|
+
"kind": "method",
|
|
2878
|
+
"name": "_remainingSeconds",
|
|
2879
|
+
"privacy": "private",
|
|
2880
|
+
"return": {
|
|
2881
|
+
"type": {
|
|
2882
|
+
"text": "number | null"
|
|
2883
|
+
}
|
|
2884
|
+
}
|
|
2885
|
+
},
|
|
2876
2886
|
{
|
|
2877
2887
|
"kind": "field",
|
|
2878
2888
|
"name": "_handleReject",
|
|
@@ -40314,7 +40324,7 @@
|
|
|
40314
40324
|
"package": {
|
|
40315
40325
|
"name": "@kubex/zinc",
|
|
40316
40326
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
40317
|
-
"version": "1.1.
|
|
40327
|
+
"version": "1.1.48",
|
|
40318
40328
|
"author": "",
|
|
40319
40329
|
"license": "MIT"
|
|
40320
40330
|
}
|
package/dist/web-types.json
CHANGED
package/dist/zn.d.ts
CHANGED
|
@@ -3980,6 +3980,7 @@ declare module "components/channel-tile/channel-tile.component" {
|
|
|
3980
3980
|
private _accept;
|
|
3981
3981
|
private _reservedUntilMs;
|
|
3982
3982
|
private _countdownPercent;
|
|
3983
|
+
private _remainingSeconds;
|
|
3983
3984
|
private _handleReject;
|
|
3984
3985
|
private _handleClick;
|
|
3985
3986
|
protected render(): unknown;
|
package/dist/zn.min.js
CHANGED
|
@@ -1121,7 +1121,7 @@ import{a as _n,b as R1,c as ir,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var H
|
|
|
1121
1121
|
<p part="caption" class="tile__caption">${this.caption}</p>
|
|
1122
1122
|
<slot part="description" class="tile__description">${this.description}</slot>
|
|
1123
1123
|
</div>
|
|
1124
|
-
</div>`}};nn.styles=T(jb),c([p({attribute:"caption",reflect:!0})],nn.prototype,"caption",2),c([p({attribute:"description",reflect:!0})],nn.prototype,"description",2),c([p({attribute:"icon",reflect:!0})],nn.prototype,"icon",2);var DS=nn;nn.define("zn-tile-property");var Gb=A`:host{--channel-tile-color:var(--zn-color-border);flex:1 1 280px;width:280px;min-width:180px;max-width:320px;display:block}.channel-tile{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;cursor:pointer;border-right:1px solid rgb(var(--zn-border-color));background-color:rgb(var(--zn-body));transition:background-color 0.15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.channel-tile:focus-visible{outline:2px solid rgb(var(--zn-primary));outline-offset:-2px}:host(.active) .channel-tile{background-color:rgb(var(--zn-panel));cursor:default}:host(:not(.active)) .channel-tile--active:hover{background-color:rgb(var(--zn-panel))}.channel-tile--incoming{background-color:rgba(var(--zn-color-success),0.15)}.channel-tile--incoming:hover{background-color:rgba(var(--zn-color-success),0.22)}.channel-tile--disabled .channel-tile__body{opacity:0.6}.channel-tile__header{display:flex;align-items:center;flex-shrink:0;height:24px;padding:0 var(--zn-spacing-small);background-color:rgb(var(--zn-color-tab))}.channel-tile__header h3{margin:0;font-size:var(--zn-text-h3-font-size);line-height:var(--zn-text-h3-line-height);font-weight:var(--zn-text-h3-font-weight);color:rgb(var(--zn-text-heading));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.channel-tile__overlay{position:absolute;top:
|
|
1124
|
+
</div>`}};nn.styles=T(jb),c([p({attribute:"caption",reflect:!0})],nn.prototype,"caption",2),c([p({attribute:"description",reflect:!0})],nn.prototype,"description",2),c([p({attribute:"icon",reflect:!0})],nn.prototype,"icon",2);var DS=nn;nn.define("zn-tile-property");var Gb=A`:host{--channel-tile-color:var(--zn-color-border);flex:1 1 280px;width:280px;min-width:180px;max-width:320px;display:block}.channel-tile{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;cursor:pointer;border-right:1px solid rgb(var(--zn-border-color));background-color:rgb(var(--zn-body));transition:background-color 0.15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.channel-tile:focus-visible{outline:2px solid rgb(var(--zn-primary));outline-offset:-2px}:host(.active) .channel-tile{background-color:rgb(var(--zn-panel));cursor:default}:host(:not(.active)) .channel-tile--active:hover{background-color:rgb(var(--zn-panel))}.channel-tile--incoming{background-color:rgba(var(--zn-color-success),0.15)}.channel-tile--incoming:hover{background-color:rgba(var(--zn-color-success),0.22)}.channel-tile--disabled .channel-tile__body{opacity:0.6}.channel-tile__header{display:flex;align-items:center;flex-shrink:0;height:24px;padding:0 var(--zn-spacing-small);background-color:rgb(var(--zn-color-tab))}.channel-tile__header h3{margin:0;font-size:var(--zn-text-h3-font-size);line-height:var(--zn-text-h3-line-height);font-weight:var(--zn-text-h3-font-weight);color:rgb(var(--zn-text-heading));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.channel-tile__overlay{position:absolute;top:24px;left:0;bottom:0;width:0;background-color:rgb(154,232,162);transition:width 0.2s linear;pointer-events:none;z-index:0}.channel-tile__body{position:relative;flex:1;display:flex;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-x-small) var(--zn-spacing-small);width:100%;overflow:hidden;z-index:1}.channel-tile__content{display:flex;flex-direction:column;flex-grow:1;gap:4px;overflow:hidden}@container (max-width:200px){.channel-tile__content{display:none}}.channel-tile__title{margin:0;font-size:var(--zn-text-heading-section-font-size);line-height:var(--zn-text-heading-section-line-height);font-weight:var(--zn-text-heading-section-font-weight);color:var(--zn-text-heading-section-color);text-transform:var(--zn-text-heading-section-transform);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.channel-tile__subtitle{margin:0;font-size:var(--zn-text-subheading-small-font-size);line-height:var(--zn-text-subheading-small-line-height);font-weight:var(--zn-text-subheading-small-font-weight);color:var(--zn-text-subheading-small-color);text-transform:var(--zn-text-subheading-small-transform);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.channel-tile__footer{display:flex;align-items:center;align-self:flex-start;gap:var(--zn-spacing-small)}.channel-tile__reject{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;padding:0;margin:0;background-color:rgb(var(--zn-panel));color:rgb(var(--zn-color-error));cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,0.15)}.channel-tile__reject:hover{background-color:rgba(var(--zn-color-error),0.1)}.channel-tile__bar{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:rgba(var(--zn-shadow),0.2);overflow:hidden;z-index:1}.channel-tile__bar-fill{height:100%;width:0;transition:width 0.5s linear,background-color 0.5s ease}.channel-tile--primary{--channel-tile-color:var(--zn-color-primary)}.channel-tile--info{--channel-tile-color:var(--zn-color-info)}.channel-tile--success{--channel-tile-color:var(--zn-color-success)}.channel-tile--warning{--channel-tile-color:var(--zn-color-warning)}.channel-tile--error{--channel-tile-color:var(--zn-color-error)}.channel-tile--disabled{--channel-tile-color:var(--zn-color-disabled,204,204,204)}`;var Pt=class extends C{constructor(){super(...arguments);this.available=!1;this.incoming=!1;this.variant="";this.header="";this.icon="";this.color="default";this.title="";this.subtitle="";this.progress=0;this.progressColor="";this.itemId="";this.acceptUri="";this.reservedUntil=0;this.autoAcceptDelay=0;this.rejectable=!1;this.acceptIcon="plus@lu";this.acceptGaid="";this.rejectIcon="call_end";this.rejectLabel="Reject";this._autoAcceptFired="";this._handleReject=t=>{t.preventDefault(),t.stopPropagation(),this.emit("zn-reject",{detail:{itemId:this.itemId,variant:this.variant}})};this._handleClick=t=>{!this._isCountingDown()||!this.acceptUri||t.defaultPrevented||(t.preventDefault(),t.stopPropagation(),this._accept())}}firstUpdated(t){super.firstUpdated(t),this._startTicker()}disconnectedCallback(){this._stopTicker(),super.disconnectedCallback()}updated(t){super.updated(t),t.has("itemId")&&this.itemId!==this._autoAcceptFired&&(this._autoAcceptFired="")}_isCountingDown(){return this.available&&this.incoming}_startTicker(){this._tickInterval===void 0&&(this._tickInterval=window.setInterval(()=>{this._isCountingDown()&&(this.requestUpdate(),this._maybeAutoAccept())},200))}_stopTicker(){this._tickInterval!==void 0&&(clearInterval(this._tickInterval),this._tickInterval=void 0)}_maybeAutoAccept(){if(!this._isCountingDown()||!this.acceptUri||!this.autoAcceptDelay||!this.reservedUntil||this._autoAcceptFired===this.itemId)return;let t=this._reservedUntilMs();!t||Date.now()<t||(this._autoAcceptFired=this.itemId,this._accept())}_accept(){this.emit("zn-accept",{cancelable:!0,detail:{itemId:this.itemId,acceptUri:this.acceptUri}}).defaultPrevented||!this.acceptUri||fetch(this.acceptUri,{credentials:"same-origin"}).catch(r=>{console.error("Error accepting interaction",r)})}_reservedUntilMs(){return this.reservedUntil?this.reservedUntil.toString().length===10?this.reservedUntil*1e3:this.reservedUntil:0}_countdownPercent(){let t=this._reservedUntilMs();if(!t||!this.autoAcceptDelay)return 0;let r=this.autoAcceptDelay,n=Math.max(0,t-Date.now()),a=Math.max(0,r-n);return Math.min(100,Math.max(0,a/r*100))}_remainingSeconds(){let t=this._reservedUntilMs();return!t||!this.autoAcceptDelay?null:Math.max(0,Math.ceil((t-Date.now())/1e3))}render(){let t=this.title||(this.available?"Available":""),r=this._isCountingDown()?this._countdownPercent():null,n=this._isCountingDown()?this._remainingSeconds():null;return u`
|
|
1125
1125
|
<div
|
|
1126
1126
|
part="base"
|
|
1127
1127
|
class=${N({"channel-tile":!0,"channel-tile--available":this.available,"channel-tile--active":!this.available,"channel-tile--incoming":this.available&&this.incoming,[`channel-tile--${this.color}`]:!0})}
|
|
@@ -1134,8 +1134,10 @@ import{a as _n,b as R1,c as ir,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var H
|
|
|
1134
1134
|
<div class="channel-tile__body">
|
|
1135
1135
|
${this._renderLeading()}
|
|
1136
1136
|
<div class="channel-tile__content">
|
|
1137
|
-
|
|
1138
|
-
|
|
1137
|
+
${n!==null?u`
|
|
1138
|
+
<h3 class="channel-tile__title">${this.subtitle} (${n}s)</h3>`:u`
|
|
1139
|
+
<h3 class="channel-tile__title"><slot name="title">${t}</slot></h3>
|
|
1140
|
+
<p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>`}
|
|
1139
1141
|
</div>
|
|
1140
1142
|
<slot name="footer" class="channel-tile__footer"></slot>
|
|
1141
1143
|
</div>
|
|
@@ -2612,7 +2614,7 @@ ${ua(this.code(o,t))}
|
|
|
2612
2614
|
<button type="button" class="ai-tooltip">
|
|
2613
2615
|
<zn-icon src="stylus" size="18"></zn-icon>
|
|
2614
2616
|
<span class="label">Refine</span>
|
|
2615
|
-
</button>`}};Ai.styles=T(Ow),c([p({type:Boolean,reflect:!0})],Ai.prototype,"open",2);Ai.define("zn-ai-tooltip");var Pw=A`@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{display:flex;flex-direction:column;height:100%}.textarea{display:flex;align-items:center;position:relative;width:100%;box-shadow:var(--zn-shadow-x-small);font-family:var(--zn-input-font-family);font-weight:var(--zn-input-font-weight);line-height:var(--zn-line-height-normal);letter-spacing:var(--zn-input-letter-spacing);vertical-align:middle;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) box-shadow,var(--zn-transition-fast) background-color;cursor:text}.textarea--standard{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--zn-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus);color:var(--zn-input-color-focus);box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--zn-input-color-focus)}.textarea--standard.textarea--disabled{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.textarea--standard.textarea--disabled .textarea__control{color:var(--zn-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::-moz-placeholder{color:var(--zn-input-placeholder-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--zn-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--zn-input-color);border:none;background:none;box-shadow:var(--zn-shadow-x-small);cursor:inherit;-webkit-appearance:none;height:100%}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::-moz-placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.textarea__control::placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--zn-input-spacing-small)}.textarea--medium{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium)}.textarea--medium .textarea__control{padding:var(--zn-input-spacing-small)}.textarea--large{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large)}.textarea--large .textarea__control{padding:0.75em var(--zn-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none;overflow-y:hidden}.textarea--transparent{background-color:transparent;box-shadow:none !important;border:none !important}.textarea--transparent:hover{background-color:transparent !important}.textarea--transparent.textarea--focused{border:none !important;background-color:transparent !important}`;var ft=class extends C{constructor(){super(...arguments);this.formControlController=new it(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new J(this,"help-text","label");this.resizeObserver=new Zt(this,{target:null,callback:()=>this.setTextareaHeight()});this._didInitFromContent=!1;this.hasFocus=!1;this.title="";this.name="";this.value="";this.size="medium";this.label="";this.labelTooltip="";this.contextNote="";this.helpText="";this.placeholder="";this.rows=4;this.resize="vertical";this.disabled=!1;this.readonly=!1;this.form="";this.flush=!1;this.required=!1;this.spellcheck=!0;this.defaultValue="";this.transparent=!1}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}connectedCallback(){if(super.connectedCallback(),!this._didInitFromContent){this._didInitFromContent=!0;let t=this.hasAttribute("value"),r=typeof this.value=="string"&&this.value.length>0;if(!t&&!r){let n=Array.from(this.childNodes).filter(l=>l.nodeType===Node.TEXT_NODE),s=n.map(l=>l.textContent??"").join("").replace(/\r\n/g,`
|
|
2617
|
+
</button>`}};Ai.styles=T(Ow),c([p({type:Boolean,reflect:!0})],Ai.prototype,"open",2);Ai.define("zn-ai-tooltip");var Pw=A`@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{display:flex;flex-direction:column;height:100%}.textarea{display:flex;align-items:center;position:relative;width:100%;box-shadow:var(--zn-shadow-x-small);font-family:var(--zn-input-font-family);font-weight:var(--zn-input-font-weight);line-height:var(--zn-line-height-normal);letter-spacing:var(--zn-input-letter-spacing);vertical-align:middle;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) box-shadow,var(--zn-transition-fast) background-color;cursor:text}.textarea--standard{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--zn-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus);color:var(--zn-input-color-focus);box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--zn-input-color-focus)}.textarea--standard.textarea--disabled{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.textarea--standard.textarea--disabled .textarea__control{color:var(--zn-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::-moz-placeholder{color:var(--zn-input-placeholder-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--zn-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--zn-input-color);border:none;background:none;box-shadow:var(--zn-shadow-x-small);cursor:inherit;-webkit-appearance:none;height:100%}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::-moz-placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.textarea__control::placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--zn-input-spacing-small)}.textarea--medium{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium)}.textarea--medium .textarea__control{padding:var(--zn-input-spacing-small)}.textarea--large{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large)}.textarea--large .textarea__control{padding:0.75em var(--zn-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none;overflow-y:hidden}.textarea--transparent{background-color:transparent;box-shadow:none !important;border:none !important}.textarea--transparent:hover{background-color:transparent !important}.textarea--transparent.textarea--focused{border:none !important;background-color:transparent !important}.textarea--transparent .textarea__control{background-color:transparent;box-shadow:none;border:none}`;var ft=class extends C{constructor(){super(...arguments);this.formControlController=new it(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new J(this,"help-text","label");this.resizeObserver=new Zt(this,{target:null,callback:()=>this.setTextareaHeight()});this._didInitFromContent=!1;this.hasFocus=!1;this.title="";this.name="";this.value="";this.size="medium";this.label="";this.labelTooltip="";this.contextNote="";this.helpText="";this.placeholder="";this.rows=4;this.resize="vertical";this.disabled=!1;this.readonly=!1;this.form="";this.flush=!1;this.required=!1;this.spellcheck=!0;this.defaultValue="";this.transparent=!1}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}connectedCallback(){if(super.connectedCallback(),!this._didInitFromContent){this._didInitFromContent=!0;let t=this.hasAttribute("value"),r=typeof this.value=="string"&&this.value.length>0;if(!t&&!r){let n=Array.from(this.childNodes).filter(l=>l.nodeType===Node.TEXT_NODE),s=n.map(l=>l.textContent??"").join("").replace(/\r\n/g,`
|
|
2616
2618
|
`).trim();s.length>0&&(this.value=s,this.defaultValue=s,n.forEach(l=>{(l.textContent??"").trim().length>0&&l.parentNode?.removeChild(l)}))}}this.updateComplete.then(()=>{this.resizeObserver.observe(this.input),this.formControl.style.display="flex",this.formControl.style.flexGrow="1"})}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("zn-blur")}handleChange(){this.value=this.input.value,this.setTextareaHeight(),this.emit("zn-change")}handleFocus(){this.hasFocus=!0,this.emit("zn-focus")}handleInput(){this.value=this.input.value,this.emit("zn-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleKeyDown(t){t.key==="Escape"&&(this.input.blur(),t.stopPropagation())}setTextareaHeight(){this.resize==="auto"?(this.input.style.height="auto",this.input.style.height=`${this.input.scrollHeight}px`):this.input.style.height=void 0,this.formControl.style.height=this.input.style.height,this.formControl.style.height!==""&&(this.formControl.style.flexGrow="0")}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity(),this.setTextareaHeight()}focus(t){this.input.focus(t)}blur(){this.input.blur()}select(){this.input.select()}scrollPosition(t){if(t){typeof t.top=="number"&&(this.input.scrollTop=t.top),typeof t.left=="number"&&(this.input.scrollLeft=t.left);return}return{top:this.input.scrollTop,left:this.input.scrollLeft}}setSelectionRange(t,r,n="none"){this.input.setSelectionRange(t,r,n)}setRangeText(t,r,n,a="preserve"){let s=r??this.input.selectionStart,l=n??this.input.selectionEnd;this.input.setRangeText(t,s,l,a),this.value!==this.input.value&&(this.value=this.input.value,this.setTextareaHeight())}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=this.hasSlotController.test("label"),r=this.hasSlotController.test("label-tooltip"),n=this.hasSlotController.test("context-note"),a=this.hasSlotController.test("help-text"),s=this.label?!0:t,l=this.labelTooltip?!0:r,d=this.contextNote?!0:n,h=this.helpText?!0:a;return u`
|
|
2617
2619
|
<div
|
|
2618
2620
|
part="form-control"
|
|
@@ -3401,7 +3403,7 @@ ${ua(this.code(o,t))}
|
|
|
3401
3403
|
<slot name="help-text">${this.helpText}</slot>
|
|
3402
3404
|
</div>
|
|
3403
3405
|
</fieldset>
|
|
3404
|
-
`}};de.styles=T(t_),c([V("slot:not([name])")],de.prototype,"defaultSlot",2),c([V(".radio-group__validation-input")],de.prototype,"validationInput",2),c([H()],de.prototype,"errorMessage",2),c([H()],de.prototype,"defaultValue",2),c([p()],de.prototype,"label",2),c([p({attribute:"label-tooltip"})],de.prototype,"labelTooltip",2),c([p({attribute:"help-text"})],de.prototype,"helpText",2),c([p()],de.prototype,"name",2),c([p({reflect:!0})],de.prototype,"value",2),c([p({reflect:!0})],de.prototype,"size",2),c([p({type:Boolean,reflect:!0})],de.prototype,"horizontal",2),c([p({type:Boolean,reflect:!0})],de.prototype,"contained",2),c([p({reflect:!0})],de.prototype,"form",2),c([p({type:Boolean,reflect:!0})],de.prototype,"required",2),c([K("size",{waitUntilFirstUpdate:!0})],de.prototype,"handleSizeChange",1),c([K("value")],de.prototype,"handleValueChange",1);var b6=de;de.define("zn-radio-group");var e_=(i,o,t)=>{let r=new Map;for(let n=o;n<=t;n++)r.set(i[n],n);return r},$i=ie(class extends Ue{constructor(i){if(super(i),i.type!==Qe.CHILD)throw Error("repeat() can only be used in text expressions")}dt(i,o,t){let r;t===void 0?t=o:o!==void 0&&(r=o);let n=[],a=[],s=0;for(let l of i)n[s]=r?r(l,s):s,a[s]=t(l,s),s++;return{values:a,keys:n}}render(i,o,t){return this.dt(i,o,t).values}update(i,[o,t,r]){let n=pg(i),{values:a,keys:s}=this.dt(o,t,r);if(!Array.isArray(n))return this.ut=s,a;let l=this.ut??(this.ut=[]),d=[],h,m,f=0,b=n.length-1,g=0,v=a.length-1;for(;f<=b&&g<=v;)if(n[f]===null)f++;else if(n[b]===null)b--;else if(l[f]===s[g])d[g]=ei(n[f],a[g]),f++,g++;else if(l[b]===s[v])d[v]=ei(n[b],a[v]),b--,v--;else if(l[f]===s[v])d[v]=ei(n[f],a[v]),Aa(i,d[v+1],n[f]),f++,v--;else if(l[b]===s[g])d[g]=ei(n[b],a[g]),Aa(i,n[f],n[b]),b--,g++;else if(h===void 0&&(h=e_(s,g,v),m=e_(l,f,b)),h.has(l[f]))if(h.has(l[b])){let x=m.get(s[g]),k=x!==void 0?n[x]:null;if(k===null){let _=Aa(i,n[f]);ei(_,a[g]),d[g]=_}else d[g]=ei(k,a[g]),Aa(i,n[f],k),n[x]=null;g++}else qc(n[b]),b--;else qc(n[f]),f++;for(;g<=v;){let x=Aa(i,d[v+1]);ei(x,a[g]),d[g++]=x}for(;f<=b;){let x=n[f++];x!==null&&qc(x)}return this.ut=s,$a(i,d),ne}});var r_=A`@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}.input__control{border:0;clip-path:inset(50%);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.form-control--droparea .input__control{left:50%}.form-control-input{position:relative}.button__wrapper{align-items:center;display:flex;gap:var(--zn-input-spacing-medium)}.form-control--small .button__wrapper{gap:var(--zn-input-spacing-small)}:host([size=large]) .button__wrapper{gap:var(--zn-input-spacing-large)}.input__value{display:inline-flex;justify-content:center;align-items:center;gap:var(--zn-spacing-small);color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__value.input__value--hidden{display:none}.input__delete{cursor:pointer;color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__delete:hover{color:var(--zn-color-primary-600)}.input__value--placeholder{color:var(--zn-input-help-text-color)}.form-control--small .input__value{font-size:var(--zn-input-label-font-size-small)}.form-control--large .input__value{font-size:var(--zn-input-label-font-size-large)}.form-control--user-dragging:not([disabled]) .button::part(base){background:none;border-color:var(--zn-color-primary-900);color:var(--zn-color-primary-900)}.droparea{--highlight-color:var(--zn-color-primary-600);position:relative;border:1px solid var(--zn-input-border-color);border-radius:var(--zn-border-radius);font:var(--zn-font-size-medium);min-height:180px;transition:var(--zn-transition-medium) background,var(--zn-transition-medium) border-color}.droparea:focus-visible{border-color:var(--zn-color-primary-600);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}:host([disabled]) .droparea{--highlight-color:var(--zn-color-neutral-600)}:host([disabled]) .input__value{display:none}.droparea__background{align-items:center;display:flex;justify-content:center;gap:var(--zn-spacing-x-small);padding:var(--zn-spacing-large) var(--zn-spacing-medium);width:100%;height:100%;min-height:inherit;box-sizing:border-box}.droparea__clear{position:absolute;top:var(--zn-spacing-small);right:var(--zn-spacing-small);z-index:1}.droparea__upload{text-transform:uppercase;letter-spacing:0.02em}.droparea--has-preview .droparea__background{--zn-droparea-checker-size:12px;--zn-droparea-checker-a:var(--zn-color-neutral-50);--zn-droparea-checker-b:var(--zn-color-neutral-100);background-color:var(--zn-droparea-checker-a);background-image:linear-gradient(45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--zn-droparea-checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--zn-droparea-checker-b) 75%);background-size:var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);background-position:0 0,0 calc(var(--zn-droparea-checker-size) / 2),calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),calc(var(--zn-droparea-checker-size) / -2) 0;border-radius:calc(var(--zn-border-radius) - 1px)}.droparea__preview{display:block;position:relative;z-index:1;width:100%;height:150px;max-width:100%;-o-object-fit:contain;object-fit:contain;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;text-align:center;font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-input-color)}.droparea__filename{color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium);font-weight:var(--zn-font-weight-medium);word-break:break-all;text-align:center;padding:0 var(--zn-spacing-3x-large)}.file-wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.form-control--small .droparea{font:var(--zn-font-size-small);min-height:140px}.form-control--small .droparea__preview{height:110px}.form-control--large .droparea{font:var(--zn-font-size-large);min-height:220px}.form-control--large .droparea__preview{height:190px}:host([disabled]) .droparea,:host([disabled]) .input__value{cursor:not-allowed;opacity:0.5}:host(:not([disabled])) .form-control--user-dragging .droparea{background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-600);cursor:pointer}:host(:not([disabled])) .droparea:not(:focus-visible):hover{--highlight-color:var(--zn-color-primary-800);border-color:var(--zn-color-primary-700);cursor:pointer}:host(:not([disabled])) .droparea:hover .droparea__upload::part(base),:host(:not([disabled])) .droparea__upload:hover::part(base),:host(:not([disabled])) .form-control--user-dragging .droparea__upload::part(base){background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-700);color:var(--zn-color-primary-800)}.droparea__upload::part(icon){pointer-events:none}:host([data-user-invalid]:not([disabled])) .droparea{border-color:var(--zn-color-error)}.clear-confirm__text{margin:0;color:var(--zn-input-color)}.form-control__link{display:inline-block;margin-top:var(--zn-spacing-x-small);font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-color-primary-700);word-break:break-all;text-decoration:none;max-width:100%}.form-control__link:hover{color:var(--zn-color-primary-800);text-decoration:underline}`;var vt=class extends C{constructor(){super(...arguments);this.formControlController=new it(this,{assumeInteractionOn:["zn-change"],value:t=>t.files});this.hasSlotController=new J(this,"help-text","label");this.localize=new Ke(this);this.userIsDragging=!1;this.fileObjectUrl=null;this.name="";this.defaultValue="";this.size="medium";this.label="";this.clearable=!1;this.helpText="";this.disabled=!1;this.droparea=!1;this.accept="";this.multiple=!1;this.webkitdirectory=!1;this.form="";this.required=!1;this.hideValue=!1;this.src="";this.triggerSubmit=!1;this.showLink=!1;this.handleInvalid=t=>{this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)};this.handleDragOver=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!0};this.handleDragLeave=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!1};this.handleDrop=async t=>{if(t.preventDefault(),t.stopPropagation(),!t.dataTransfer)return;let r=await this.handleTransferItems(t.dataTransfer.items);if(this.userIsDragging=!1,!r)return;if(!this.multiple&&!this.webkitdirectory&&r.length>1){this.emit("zn-error");return}if(this.hasSlotController.test("trigger"))this.handleFiles(r);else{let a=cn(this.inputChosen,"file.text.disappear",{dir:this.localize.dir()}),s=cn(this.inputChosen,"file.text.appear",{dir:this.localize.dir()});if(this.droparea){let l=cn(this.dropareaIcon,"file.iconDrop",{dir:this.localize.dir()});sn(this.dropareaIcon,l.keyframes,l.options)}await sn(this.inputChosen,a.keyframes,a.options),this.handleFiles(r),await sn(this.inputChosen,s.keyframes,s.options)}this.input.dispatchEvent(new Event("change"))};this.removeFile=t=>{t.preventDefault(),t.stopPropagation();let r=Array.from(this.files||[]),n=t.target.parentElement?.getAttribute("data-file-name"),a=r.findIndex(l=>l.name===n);a!==-1&&r.splice(a,1);let s=new DataTransfer;r.forEach(l=>s.items.add(l)),this.files=s.files,this.input.dispatchEvent(new Event("change"))};this.handleClearClick=t=>{t.preventDefault(),t.stopPropagation(),this.clearConfirmDialog?.show()};this.confirmClear=()=>{let t=(this.files?.length??0)>0;this.input.value="",this.files=null,t||(this.src=""),this.clearConfirmDialog?.hide(),this.input.dispatchEvent(new Event("change")),this.emit("zn-clear")}}set files(t){this.input&&(this.input.files=t,this.updatePreview())}get files(){return this.input?.files}set value(t){this.input&&(this.input.value=t)}get value(){return this.input?.value}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){if(this.droparea){this.dropareaWrapper?.focus(t);return}this.button?.focus(t)}blur(){if(this.droparea){this.dropareaWrapper?.blur();return}this.button?.blur()}handleFiles(t){if(!t){this.value="";return}this.files=t}async handleTransferItems(t){if(!t)return this.value="",new Promise((d,h)=>{h(new Error("No proper items found"))});let n=Array.from(t).map(d=>d.webkitGetAsEntry()).map(d=>this.getFilesFromEntry(d)),s=(await Promise.all(n)).flat(),l=new DataTransfer;return Array.from(s).forEach(d=>l.items.add(d)),l.files}async getFilesFromEntry(t){return t?t.isFile?new Promise((r,n)=>{t.file(a=>r([a]),n)}):t.isDirectory?new Promise((r,n)=>{t.createReader().readEntries(s=>{Promise.all(s.map(l=>this.getFilesFromEntry(l))).then(l=>{r(l.flat())}).catch(n)})}):[]:[]}handleClick(t){t.preventDefault(),this.input.click()}handleChange(t){t.preventDefault(),t.stopPropagation(),this.updatePreview(),this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}handleFocus(){this.emit("zn-focus")}handleBlur(){this.emit("zn-blur")}updatePreview(){this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null);let t=this.files?.[0];t&&t.type.startsWith("image/")&&(this.fileObjectUrl=URL.createObjectURL(t))}get previewSrc(){return this.fileObjectUrl??this.src??""}disconnectedCallback(){super.disconnectedCallback(),this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null)}renderFileValueWithDelete(){let t=Array.from(this.files||[]),r=this.clearable,n=this.localize.term("numFilesSelected",0,this.webkitdirectory);return u`
|
|
3406
|
+
`}};de.styles=T(t_),c([V("slot:not([name])")],de.prototype,"defaultSlot",2),c([V(".radio-group__validation-input")],de.prototype,"validationInput",2),c([H()],de.prototype,"errorMessage",2),c([H()],de.prototype,"defaultValue",2),c([p()],de.prototype,"label",2),c([p({attribute:"label-tooltip"})],de.prototype,"labelTooltip",2),c([p({attribute:"help-text"})],de.prototype,"helpText",2),c([p()],de.prototype,"name",2),c([p({reflect:!0})],de.prototype,"value",2),c([p({reflect:!0})],de.prototype,"size",2),c([p({type:Boolean,reflect:!0})],de.prototype,"horizontal",2),c([p({type:Boolean,reflect:!0})],de.prototype,"contained",2),c([p({reflect:!0})],de.prototype,"form",2),c([p({type:Boolean,reflect:!0})],de.prototype,"required",2),c([K("size",{waitUntilFirstUpdate:!0})],de.prototype,"handleSizeChange",1),c([K("value")],de.prototype,"handleValueChange",1);var b6=de;de.define("zn-radio-group");var e_=(i,o,t)=>{let r=new Map;for(let n=o;n<=t;n++)r.set(i[n],n);return r},$i=ie(class extends Ue{constructor(i){if(super(i),i.type!==Qe.CHILD)throw Error("repeat() can only be used in text expressions")}dt(i,o,t){let r;t===void 0?t=o:o!==void 0&&(r=o);let n=[],a=[],s=0;for(let l of i)n[s]=r?r(l,s):s,a[s]=t(l,s),s++;return{values:a,keys:n}}render(i,o,t){return this.dt(i,o,t).values}update(i,[o,t,r]){let n=pg(i),{values:a,keys:s}=this.dt(o,t,r);if(!Array.isArray(n))return this.ut=s,a;let l=this.ut??(this.ut=[]),d=[],h,m,f=0,b=n.length-1,g=0,v=a.length-1;for(;f<=b&&g<=v;)if(n[f]===null)f++;else if(n[b]===null)b--;else if(l[f]===s[g])d[g]=ei(n[f],a[g]),f++,g++;else if(l[b]===s[v])d[v]=ei(n[b],a[v]),b--,v--;else if(l[f]===s[v])d[v]=ei(n[f],a[v]),Aa(i,d[v+1],n[f]),f++,v--;else if(l[b]===s[g])d[g]=ei(n[b],a[g]),Aa(i,n[f],n[b]),b--,g++;else if(h===void 0&&(h=e_(s,g,v),m=e_(l,f,b)),h.has(l[f]))if(h.has(l[b])){let x=m.get(s[g]),k=x!==void 0?n[x]:null;if(k===null){let _=Aa(i,n[f]);ei(_,a[g]),d[g]=_}else d[g]=ei(k,a[g]),Aa(i,n[f],k),n[x]=null;g++}else qc(n[b]),b--;else qc(n[f]),f++;for(;g<=v;){let x=Aa(i,d[v+1]);ei(x,a[g]),d[g++]=x}for(;f<=b;){let x=n[f++];x!==null&&qc(x)}return this.ut=s,$a(i,d),ne}});var r_=A`@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}.input__control{border:0;clip-path:inset(50%);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.form-control--droparea .input__control{left:50%}.form-control-input{position:relative}.button__wrapper{align-items:center;display:flex;gap:var(--zn-input-spacing-medium)}.form-control--small .button__wrapper{gap:var(--zn-input-spacing-small)}:host([size=large]) .button__wrapper{gap:var(--zn-input-spacing-large)}.input__value{display:inline-flex;justify-content:center;align-items:center;gap:var(--zn-spacing-small);color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__value.input__value--hidden{display:none}.input__delete{cursor:pointer;color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__delete:hover{color:var(--zn-color-primary-600)}.input__value--placeholder{color:var(--zn-input-help-text-color)}.form-control--small .input__value{font-size:var(--zn-input-label-font-size-small)}.form-control--large .input__value{font-size:var(--zn-input-label-font-size-large)}.form-control--user-dragging:not([disabled]) .button::part(base){background:none;border-color:var(--zn-color-primary-900);color:var(--zn-color-primary-900)}.droparea{--highlight-color:var(--zn-color-primary-600);position:relative;border:1px solid var(--zn-input-border-color);border-radius:var(--zn-border-radius);font:var(--zn-font-size-medium);min-height:180px;transition:var(--zn-transition-medium) background,var(--zn-transition-medium) border-color}.droparea:focus-visible{border-color:var(--zn-color-primary-600);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}:host([disabled]) .droparea{--highlight-color:var(--zn-color-neutral-600)}:host([disabled]) .input__value{display:none}.droparea__background{align-items:center;display:flex;justify-content:center;gap:var(--zn-spacing-x-small);padding:var(--zn-spacing-large) var(--zn-spacing-medium);width:100%;height:100%;min-height:inherit;box-sizing:border-box}.droparea__clear{position:absolute;top:var(--zn-spacing-small);right:var(--zn-spacing-small);z-index:1}.droparea__upload{text-transform:uppercase;letter-spacing:0.02em}.droparea--has-preview .droparea__background{--zn-droparea-checker-size:12px;--zn-droparea-checker-a:var(--zn-color-neutral-50);--zn-droparea-checker-b:var(--zn-color-neutral-100);background-color:var(--zn-droparea-checker-a);background-image:linear-gradient(45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--zn-droparea-checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--zn-droparea-checker-b) 75%);background-size:var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);background-position:0 0,0 calc(var(--zn-droparea-checker-size) / 2),calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),calc(var(--zn-droparea-checker-size) / -2) 0;border-radius:calc(var(--zn-border-radius) - 1px)}.droparea__preview{display:block;position:relative;z-index:1;width:100%;height:150px;max-width:100%;-o-object-fit:contain;object-fit:contain;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;text-align:center;font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-input-color)}.droparea__filename{color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium);font-weight:var(--zn-font-weight-medium);word-break:break-all;text-align:center;padding:0 var(--zn-spacing-3x-large)}.file-wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.form-control--small .droparea{font:var(--zn-font-size-small);min-height:140px}.form-control--small .droparea__preview{height:110px}.form-control--large .droparea{font:var(--zn-font-size-large);min-height:220px}.form-control--large .droparea__preview{height:190px}:host([disabled]) .droparea,:host([disabled]) .input__value{cursor:not-allowed;opacity:0.5}:host(:not([disabled])) .form-control--user-dragging .droparea{background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-600);cursor:pointer}:host(:not([disabled])) .droparea:not(:focus-visible):hover{--highlight-color:var(--zn-color-primary-800);border-color:var(--zn-color-primary-700);cursor:pointer}:host(:not([disabled])) .droparea:hover .droparea__upload::part(base),:host(:not([disabled])) .droparea__upload:hover::part(base),:host(:not([disabled])) .form-control--user-dragging .droparea__upload::part(base){background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-700);color:var(--zn-color-primary-800)}.droparea__upload::part(icon){pointer-events:none}:host([data-user-invalid]:not([disabled])) .droparea{border-color:var(--zn-color-error)}.clear-confirm__text{margin:0;color:var(--zn-input-color)}.form-control__link{display:inline-block;margin-top:var(--zn-spacing-x-small);font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-color-primary-700);word-break:break-all;text-decoration:none;max-width:100%}.form-control__link:hover{color:var(--zn-color-primary-800);text-decoration:underline}`;var vt=class extends C{constructor(){super(...arguments);this.formControlController=new it(this,{assumeInteractionOn:["zn-change"],value:t=>t.files});this.hasSlotController=new J(this,"help-text","label");this.localize=new Ke(this);this.userIsDragging=!1;this.fileObjectUrl=null;this.name="";this.defaultValue="";this.size="medium";this.label="";this.clearable=!1;this.helpText="";this.disabled=!1;this.droparea=!1;this.accept="";this.multiple=!1;this.webkitdirectory=!1;this.form="";this.required=!1;this.hideValue=!1;this.src="";this.triggerSubmit=!1;this.showLink=!1;this.handleInvalid=t=>{this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)};this.handleDragOver=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!0};this.handleDragLeave=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!1};this.handleDrop=async t=>{if(t.preventDefault(),t.stopPropagation(),!t.dataTransfer)return;let r=await this.handleTransferItems(t.dataTransfer.items);if(this.userIsDragging=!1,!r)return;if(!this.multiple&&!this.webkitdirectory&&r.length>1){this.emit("zn-error");return}if(this.hasSlotController.test("trigger"))this.handleFiles(r);else{let a=this.inputChosen,s=this.dropareaIcon;if(this.droparea&&s){let l=cn(s,"file.iconDrop",{dir:this.localize.dir()});sn(s,l.keyframes,l.options)}if(a){let l=cn(a,"file.text.disappear",{dir:this.localize.dir()});await sn(a,l.keyframes,l.options)}if(this.handleFiles(r),a){let l=cn(a,"file.text.appear",{dir:this.localize.dir()});await sn(a,l.keyframes,l.options)}}this.input.dispatchEvent(new Event("change"))};this.removeFile=t=>{t.preventDefault(),t.stopPropagation();let r=Array.from(this.files||[]),n=t.target.parentElement?.getAttribute("data-file-name"),a=r.findIndex(l=>l.name===n);a!==-1&&r.splice(a,1);let s=new DataTransfer;r.forEach(l=>s.items.add(l)),this.files=s.files,this.input.dispatchEvent(new Event("change"))};this.handleClearClick=t=>{t.preventDefault(),t.stopPropagation(),this.clearConfirmDialog?.show()};this.confirmClear=()=>{let t=(this.files?.length??0)>0;this.input.value="",this.files=null,t||(this.src=""),this.clearConfirmDialog?.hide(),this.input.dispatchEvent(new Event("change")),this.emit("zn-clear")}}set files(t){this.input&&(this.input.files=t,this.updatePreview())}get files(){return this.input?.files}set value(t){this.input&&(this.input.value=t)}get value(){return this.input?.value}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){if(this.droparea){this.dropareaWrapper?.focus(t);return}this.button?.focus(t)}blur(){if(this.droparea){this.dropareaWrapper?.blur();return}this.button?.blur()}handleFiles(t){if(!t){this.value="";return}this.files=t}async handleTransferItems(t){if(!t)return this.value="",new Promise((d,h)=>{h(new Error("No proper items found"))});let n=Array.from(t).map(d=>d.webkitGetAsEntry()).map(d=>this.getFilesFromEntry(d)),s=(await Promise.all(n)).flat(),l=new DataTransfer;return Array.from(s).forEach(d=>l.items.add(d)),l.files}async getFilesFromEntry(t){return t?t.isFile?new Promise((r,n)=>{t.file(a=>r([a]),n)}):t.isDirectory?new Promise((r,n)=>{t.createReader().readEntries(s=>{Promise.all(s.map(l=>this.getFilesFromEntry(l))).then(l=>{r(l.flat())}).catch(n)})}):[]:[]}handleClick(t){t.preventDefault(),this.input.click()}handleChange(t){t.preventDefault(),t.stopPropagation(),this.updatePreview(),this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}handleFocus(){this.emit("zn-focus")}handleBlur(){this.emit("zn-blur")}updatePreview(){this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null);let t=this.files?.[0];t&&t.type.startsWith("image/")&&(this.fileObjectUrl=URL.createObjectURL(t))}get previewSrc(){return this.fileObjectUrl??this.src??""}disconnectedCallback(){super.disconnectedCallback(),this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null)}renderFileValueWithDelete(){let t=Array.from(this.files||[]),r=this.clearable,n=this.localize.term("numFilesSelected",0,this.webkitdirectory);return u`
|
|
3405
3407
|
${t?u`
|
|
3406
3408
|
<div class="file_wrapper">
|
|
3407
3409
|
${$i(t,a=>u`
|
package/package.json
CHANGED
|
@@ -176,6 +176,13 @@ export default class ZnChannelTile extends ZincElement {
|
|
|
176
176
|
return Math.min(100, Math.max(0, (elapsed / total) * 100));
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
+
private _remainingSeconds(): number | null {
|
|
180
|
+
// Only surfaced for auto-accept countdowns, not plain reservation windows.
|
|
181
|
+
const until = this._reservedUntilMs();
|
|
182
|
+
if (!until || !this.autoAcceptDelay) return null;
|
|
183
|
+
return Math.max(0, Math.ceil((until - Date.now()) / 1000));
|
|
184
|
+
}
|
|
185
|
+
|
|
179
186
|
private _handleReject = (e: MouseEvent) => {
|
|
180
187
|
e.preventDefault();
|
|
181
188
|
e.stopPropagation();
|
|
@@ -193,6 +200,7 @@ export default class ZnChannelTile extends ZincElement {
|
|
|
193
200
|
protected render(): unknown {
|
|
194
201
|
const title = this.title || (this.available ? 'Available' : '');
|
|
195
202
|
const countdown = this._isCountingDown() ? this._countdownPercent() : null;
|
|
203
|
+
const remaining = this._isCountingDown() ? this._remainingSeconds() : null;
|
|
196
204
|
|
|
197
205
|
return html`
|
|
198
206
|
<div
|
|
@@ -215,8 +223,12 @@ export default class ZnChannelTile extends ZincElement {
|
|
|
215
223
|
<div class="channel-tile__body">
|
|
216
224
|
${this._renderLeading()}
|
|
217
225
|
<div class="channel-tile__content">
|
|
218
|
-
|
|
219
|
-
|
|
226
|
+
${remaining !== null
|
|
227
|
+
? html`
|
|
228
|
+
<h3 class="channel-tile__title">${this.subtitle} (${remaining}s)</h3>`
|
|
229
|
+
: html`
|
|
230
|
+
<h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
|
|
231
|
+
<p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>`}
|
|
220
232
|
</div>
|
|
221
233
|
<slot name="footer" class="channel-tile__footer"></slot>
|
|
222
234
|
</div>
|
|
@@ -69,11 +69,11 @@
|
|
|
69
69
|
|
|
70
70
|
.channel-tile__overlay {
|
|
71
71
|
position: absolute;
|
|
72
|
-
top:
|
|
72
|
+
top: 24px; // sit below the header strip (fixed 24px)
|
|
73
73
|
left: 0;
|
|
74
74
|
bottom: 0;
|
|
75
75
|
width: 0;
|
|
76
|
-
background-color:
|
|
76
|
+
background-color: rgb(154, 232, 162);
|
|
77
77
|
transition: width 0.2s linear;
|
|
78
78
|
pointer-events: none;
|
|
79
79
|
z-index: 0;
|
|
@@ -421,18 +421,26 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
|
|
|
421
421
|
// Use the transferred file list from the drag drop interface
|
|
422
422
|
const hasTrigger = this.hasSlotController.test('trigger');
|
|
423
423
|
if (!hasTrigger) {
|
|
424
|
-
const
|
|
425
|
-
const
|
|
424
|
+
const inputChosen = this.inputChosen;
|
|
425
|
+
const dropareaIcon = this.dropareaIcon;
|
|
426
426
|
|
|
427
|
-
if (this.droparea) {
|
|
428
|
-
const dropIconAnimation = getAnimation(
|
|
427
|
+
if (this.droparea && dropareaIcon) {
|
|
428
|
+
const dropIconAnimation = getAnimation(dropareaIcon, 'file.iconDrop', {dir: this.localize.dir()});
|
|
429
429
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
430
|
-
animateTo(
|
|
430
|
+
animateTo(dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);
|
|
431
431
|
}
|
|
432
|
-
|
|
433
|
-
|
|
432
|
+
|
|
433
|
+
if (inputChosen) {
|
|
434
|
+
const disappearAnimation = getAnimation(inputChosen, 'file.text.disappear', {dir: this.localize.dir()});
|
|
435
|
+
await animateTo(inputChosen, disappearAnimation.keyframes, disappearAnimation.options);
|
|
436
|
+
}
|
|
437
|
+
|
|
434
438
|
this.handleFiles(files);
|
|
435
|
-
|
|
439
|
+
|
|
440
|
+
if (inputChosen) {
|
|
441
|
+
const appearAnimation = getAnimation(inputChosen, 'file.text.appear', {dir: this.localize.dir()});
|
|
442
|
+
await animateTo(inputChosen, appearAnimation.keyframes, appearAnimation.options);
|
|
443
|
+
}
|
|
436
444
|
} else {
|
|
437
445
|
this.handleFiles(files);
|
|
438
446
|
}
|
|
@@ -1,10 +1,34 @@
|
|
|
1
1
|
import '../../../dist/zn.min.js';
|
|
2
|
-
import {
|
|
2
|
+
import {expect, fixture, html, oneEvent} from '@open-wc/testing';
|
|
3
|
+
import type ZnFile from './file.component';
|
|
3
4
|
|
|
4
|
-
describe('<zn-
|
|
5
|
+
describe('<zn-file>', () => {
|
|
5
6
|
it('should render a component', async () => {
|
|
6
|
-
const el = await fixture(html
|
|
7
|
+
const el = await fixture(html`<zn-file></zn-file>`);
|
|
7
8
|
|
|
8
9
|
expect(el).to.exist;
|
|
9
10
|
});
|
|
11
|
+
|
|
12
|
+
for (const droparea of [false, true]) {
|
|
13
|
+
it(`accepts a drop when the ${droparea ? 'droparea' : 'standard input'} has no animation target`, async () => {
|
|
14
|
+
const el = await fixture<ZnFile>(html`<zn-file ?droparea=${droparea}></zn-file>`);
|
|
15
|
+
const dataTransfer = new DataTransfer();
|
|
16
|
+
dataTransfer.items.add(new File(['content'], 'example.txt', {type: 'text/plain'}));
|
|
17
|
+
const dropHandler = el as unknown as {
|
|
18
|
+
handleTransferItems: (items: DataTransferItemList | null) => Promise<FileList>;
|
|
19
|
+
};
|
|
20
|
+
dropHandler.handleTransferItems = () => Promise.resolve(dataTransfer.files);
|
|
21
|
+
|
|
22
|
+
const changed = oneEvent(el, 'zn-change');
|
|
23
|
+
el.shadowRoot!.querySelector<HTMLElement>('.form-control')!.dispatchEvent(new DragEvent('drop', {
|
|
24
|
+
bubbles: true,
|
|
25
|
+
cancelable: true,
|
|
26
|
+
dataTransfer
|
|
27
|
+
}));
|
|
28
|
+
await changed;
|
|
29
|
+
|
|
30
|
+
expect(el.files).to.have.length(1);
|
|
31
|
+
expect(el.files![0].name).to.equal('example.txt');
|
|
32
|
+
});
|
|
33
|
+
}
|
|
10
34
|
});
|