@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
51 lines (50 loc) • 4.37 kB
JavaScript
"use strict";const s=require("./element-6DBpyGQm.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),c=require("./state-DPobt-Yz.cjs"),l=require("./ref-iJtiv3o2.cjs"),$=require("./class-map-BBG2gMX4.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-BBbxqP2W.cjs"),x=require("./input-element-C4xJoM-X.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const g=a.e(class extends a.i{constructor(r){if(super(r),r.type!==a.t.PROPERTY&&r.type!==a.t.ATTRIBUTE&&r.type!==a.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!d.f(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===s.T||e===s.E)return e;const i=r.element,t=r.name;if(r.type===a.t.PROPERTY){if(e===i[t])return s.T}else if(r.type===a.t.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return s.T}else if(r.type===a.t.ATTRIBUTE&&i.getAttribute(t)===e+"")return s.T;return d.m(r),e}});var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(r,e,i,t)=>{for(var n=t>1?void 0:t?f(e,i):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&v(e,i,n),n};exports.PktTextarea=class extends x.PktInputElement{constructor(){super(),this.inputRef=l.e(),this.helptextSlot=l.e(),this.value="",this.autocomplete="off",this.rows=null,this.counterCurrent=0,this.slotController=new T.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}updated(e){var i;super.updated(e),e.has("value")&&(this.counterCurrent=((i=this.value)==null?void 0:i.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const e=$.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),i=this.ariaLabelledby||`${this.id}-input-label`;return s.x`<pkt-input-wrapper
label=${this.label}
?counter=${this.counter}
?disabled=${this.disabled}
?hasError=${this.hasError}
?inline=${this.inline}
?optionalTag=${this.optionalTag}
?required=${this.required}
?requiredTag=${this.requiredTag}
?useWrapper=${this.useWrapper}
.ariaDescribedBy=${this.ariaDescribedBy}
.counterCurrent=${this.counterCurrent}
.counterMaxLength=${this.counterMaxLength}
.errorMessage=${this.errorMessage}
.forId="${this.id+"-input"}"
.helptext=${this.helptext}
.helptextDropdown=${this.helptextDropdown}
.helptextDropdownButton=${this.helptextDropdownButton}
.optionalText=${this.optionalText}
.requiredText=${this.requiredText}
.tagText=${this.tagText}
class="pkt-textarea"
>
<div class="pkt-contents" ${l.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
<textarea
${l.n(this.inputRef)}
class=${e}
id=${this.id+"-input"}
name=${(this.name||this.id)+"-input"}
placeholder=${p.o(this.placeholder)}
.value=${g(this.value)}
minlength=${p.o(this.minlength)}
maxlength=${p.o(this.maxlength)}
?readonly=${this.readonly}
autocomplete=${this.autocomplete}
aria-labelledby=${i}
aria-invalid=${this.hasError}
aria-errormessage=${`${this.id}-error`}
rows=${this.rows}
?disabled=${this.disabled}
=${t=>{this.value=t.target.value,this.onInput(),t.stopImmediatePropagation()}}
=${t=>{t.stopImmediatePropagation()}}
=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
=${t=>{this.value=t.target.value,this.onBlur(),t.stopImmediatePropagation()}}
></textarea>
</pkt-input-wrapper>`}};o([s.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);o([s.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);o([s.n({type:Number})],exports.PktTextarea.prototype,"rows",2);o([c.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=o([s.t("pkt-textarea")],exports.PktTextarea);