kemet-ui 1.3.0 → 1.3.1
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/custom-elements.json +333 -325
- package/dist/components/kemet-combo/kemet-combo.js +6 -1
- package/dist/kemet-components.cjs +153 -148
- package/dist/kemet-components.js +153 -148
- package/dist/kemet-components.min.js +55 -55
- package/package.json +1 -1
|
@@ -76,7 +76,44 @@ var W,J;null==K||K(U,q),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:glo
|
|
|
76
76
|
:host {
|
|
77
77
|
display: block;
|
|
78
78
|
}
|
|
79
|
-
`]}static get properties(){return{currentPanel:{type:Number},togglePanels:{type:Boolean,attribute:"toggle-panels"}}}constructor(){super(),this.togglePanels=!1,this.currentPanel=void 0,this.addEventListener("kemet-accordion-panel-opened",this.handlePanelOpened.bind(this))}firstUpdated(){this.onKeyDown=t=>this.handleKeyDown(t)}render(){return I`<slot @slotchange=${t=>this.handleSlotChange(t)}></slot>`}handleSlotChange(){this.panels=this.querySelectorAll("kemet-accordion-panel"),this.panels.forEach((t=>{t.removeEventListener("keydown",this.onKeyDown),t.addEventListener("keydown",this.onKeyDown)}))}handlePanelOpened(t){this.togglePanels&&this.panels.forEach((e=>{e!==t.detail&&(e.opened=!1)}))}navigatePanels(t){switch(t){case"home":this.currentPanel=0;break;case"end":this.currentPanel=this.panels.length-1;break;case"next":this.currentPanel+=1;break;case"prev":this.currentPanel-=1;break;default:this.currentPanelFocus=0}this.currentPanel>this.panels.length-1&&(this.currentPanel=0),this.currentPanel<0&&(this.currentPanel=this.panels.length-1),this.panels[this.currentPanel].shadowRoot.querySelector("button").focus()}handleKeyDown(t){switch(t.key){case"Enter":case"Space":t.preventDefault(),t.target.click();break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),this.navigatePanels("prev");break;case"ArrowRight":case"ArrowDown":t.preventDefault(),this.navigatePanels("next");break;case"End":t.preventDefault(),this.navigatePanels("end");break;case"Home":t.preventDefault(),this.navigatePanels("home")}}expandAll(){this.panels.forEach((t=>{t.opened=!0}))}collapseAll(){this.panels.forEach((t=>{t.opened=!1}))}});
|
|
79
|
+
`]}static get properties(){return{currentPanel:{type:Number},togglePanels:{type:Boolean,attribute:"toggle-panels"}}}constructor(){super(),this.togglePanels=!1,this.currentPanel=void 0,this.addEventListener("kemet-accordion-panel-opened",this.handlePanelOpened.bind(this))}firstUpdated(){this.onKeyDown=t=>this.handleKeyDown(t)}render(){return I`<slot @slotchange=${t=>this.handleSlotChange(t)}></slot>`}handleSlotChange(){this.panels=this.querySelectorAll("kemet-accordion-panel"),this.panels.forEach((t=>{t.removeEventListener("keydown",this.onKeyDown),t.addEventListener("keydown",this.onKeyDown)}))}handlePanelOpened(t){this.togglePanels&&this.panels.forEach((e=>{e!==t.detail&&(e.opened=!1)}))}navigatePanels(t){switch(t){case"home":this.currentPanel=0;break;case"end":this.currentPanel=this.panels.length-1;break;case"next":this.currentPanel+=1;break;case"prev":this.currentPanel-=1;break;default:this.currentPanelFocus=0}this.currentPanel>this.panels.length-1&&(this.currentPanel=0),this.currentPanel<0&&(this.currentPanel=this.panels.length-1),this.panels[this.currentPanel].shadowRoot.querySelector("button").focus()}handleKeyDown(t){switch(t.key){case"Enter":case"Space":t.preventDefault(),t.target.click();break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),this.navigatePanels("prev");break;case"ArrowRight":case"ArrowDown":t.preventDefault(),this.navigatePanels("next");break;case"End":t.preventDefault(),this.navigatePanels("end");break;case"Home":t.preventDefault(),this.navigatePanels("home")}}expandAll(){this.panels.forEach((t=>{t.opened=!0}))}collapseAll(){this.panels.forEach((t=>{t.opened=!1}))}});customElements.get("kemet-badge")||customElements.define("kemet-badge",class extends Z{static get styles(){return[r`
|
|
80
|
+
:host {
|
|
81
|
+
display: inline-flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
padding: var(--kemet-badge-padding, 10px);
|
|
85
|
+
line-height: 1;
|
|
86
|
+
color: var(--kemet-color-white);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host([status='primary']) {
|
|
90
|
+
background-color: var(--kemet-color-primary);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
:host([status='success']) {
|
|
94
|
+
background-color: var(--kemet-color-success);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([status='standard']) {
|
|
98
|
+
background-color: var(--kemet-color-gray6);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([status='warning']) {
|
|
102
|
+
background-color: var(--kemet-color-warning);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
:host([status='error']) {
|
|
106
|
+
background-color: var(--kemet-color-error);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:host([circle]) {
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:host([pill]) {
|
|
114
|
+
border-radius: 99rem;
|
|
115
|
+
}
|
|
116
|
+
`]}static get properties(){return{status:{type:String,reflect:!0},circle:{type:Boolean,reflect:!0},pill:{type:Boolean,reflect:!0},circlePadding:{type:Number,attribute:"circle-padding"}}}constructor(){super(),this.status="primary",this.pill=!1,this.circle=!1,this.circlePadding=0}render(){return I`<slot @slotchange=${()=>this.handleSlotChange()}></slot>`}handleSlotChange(){this.circle&&(this.style.height=`${this.offsetWidth+this.circlePadding}px`,this.style.width=`${this.offsetWidth+this.circlePadding}px`)}});class Q{host;form;options;constructor(t,e){(this.host=t).addController(this),this.options={form:t=>t.closest("form"),name:t=>t.name,value:t=>t.value,disabled:t=>t.disabled,checkValidity:t=>"function"!=typeof t.checkValidity||t.checkValidity(),...e},this.handleFormData=this.handleFormData.bind(this),this.handleFormSubmit=this.handleFormSubmit.bind(this)}hostConnected(){this.form=this.options.form(this.host),this.form&&(this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit))}hostDisconnected(){this.form&&(this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form=void 0)}handleFormData(t){const e=this.options.disabled(this.host),s=this.options.name(this.host),i=this.options.value(this.host);e||"string"!=typeof s||void 0===i||(Array.isArray(i)?i.forEach((e=>{t.formData?.append(s,e.toString())})):t.formData?.append(s,i.toString()))}handleFormSubmit(t){const e=this.options.disabled(this.host),s=this.options.checkValidity;if(this.form=this.options.form(this.host),this.form&&!this.form.noValidate&&!e&&!s(this.host)){t.preventDefault(),t.stopImmediatePropagation();this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios").forEach((t=>{t.checkValidity(),t.checkValidity()||(t.status="error",t.invalid=!0,t.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:t.validity?t.validity:{},element:t}}))),t.checkLimitValidity&&!t.checkLimitValidity()&&(t.status="error",t.invalid=!0,t.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:{passedLimit:!0},element:t}})))}))}}submit(){const t=document.createElement("button");this.form&&(t.type="submit",t.style.position="absolute",t.style.width="0",t.style.height="0",t.style.clip="rect(0 0 0 0)",t.style.clipPath="inset(50%)",t.style.overflow="hidden",t.style.whiteSpace="nowrap",this.form.append(t),t.click(),t.remove())}}customElements.get("kemet-button")||customElements.define("kemet-button",class extends Z{static get styles(){return[r`
|
|
80
117
|
:host {
|
|
81
118
|
cursor: pointer;
|
|
82
119
|
display: inline-flex;
|
|
@@ -157,44 +194,7 @@ var W,J;null==K||K(U,q),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:glo
|
|
|
157
194
|
<slot></slot>
|
|
158
195
|
<slot name="right"></slot>
|
|
159
196
|
</button>
|
|
160
|
-
`}handleMouseOver(){this.hover=!0}handleMouseOut(){this.hover=!1}handleClick(){this.hover=!1,this.active=!0,setTimeout((()=>{this.active=!1}),300),this.shadowRoot.querySelector("button")&&this.formSubmitController.submit(this)}handleBlur(){this.focused=!1,this.active=!1,this.hover=!1}handleKeyUp(t){"Tab"===t.key&&(this.focused=!0)}});
|
|
161
|
-
:host {
|
|
162
|
-
display: inline-flex;
|
|
163
|
-
align-items: center;
|
|
164
|
-
justify-content: center;
|
|
165
|
-
padding: var(--kemet-badge-padding, 10px);
|
|
166
|
-
line-height: 1;
|
|
167
|
-
color: var(--kemet-color-white);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
:host([status='primary']) {
|
|
171
|
-
background-color: var(--kemet-color-primary);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
:host([status='success']) {
|
|
175
|
-
background-color: var(--kemet-color-success);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
:host([status='standard']) {
|
|
179
|
-
background-color: var(--kemet-color-gray6);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
:host([status='warning']) {
|
|
183
|
-
background-color: var(--kemet-color-warning);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
:host([status='error']) {
|
|
187
|
-
background-color: var(--kemet-color-error);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
:host([circle]) {
|
|
191
|
-
border-radius: 50%;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
:host([pill]) {
|
|
195
|
-
border-radius: 99rem;
|
|
196
|
-
}
|
|
197
|
-
`]}static get properties(){return{status:{type:String,reflect:!0},circle:{type:Boolean,reflect:!0},pill:{type:Boolean,reflect:!0},circlePadding:{type:Number,attribute:"circle-padding"}}}constructor(){super(),this.status="primary",this.pill=!1,this.circle=!1,this.circlePadding=0}render(){return I`<slot @slotchange=${()=>this.handleSlotChange()}></slot>`}handleSlotChange(){this.circle&&(this.style.height=`${this.offsetWidth+this.circlePadding}px`,this.style.width=`${this.offsetWidth+this.circlePadding}px`)}});
|
|
197
|
+
`}handleMouseOver(){this.hover=!0}handleMouseOut(){this.hover=!1}handleClick(){this.hover=!1,this.active=!0,setTimeout((()=>{this.active=!1}),300),this.shadowRoot.querySelector("button")&&this.formSubmitController.submit(this)}handleBlur(){this.focused=!1,this.active=!1,this.hover=!1}handleKeyUp(t){"Tab"===t.key&&(this.focused=!0)}});
|
|
198
198
|
/**
|
|
199
199
|
* @license
|
|
200
200
|
* Copyright 2018 Google LLC
|
|
@@ -370,7 +370,19 @@ const tt=t=>null!=t?t:T
|
|
|
370
370
|
<span tabindex="0" @keyup=${()=>this.last()} @click=${()=>this.last()}>
|
|
371
371
|
<slot></slot>
|
|
372
372
|
</span>
|
|
373
|
-
`}last(){this.disabled||this.dispatchEvent(new CustomEvent("kemet-carousel-last",{bubbles:!0,composed:!0,detail:this}))}}customElements.get("kemet-carousel-last")||customElements.define("kemet-carousel-last",ct);
|
|
373
|
+
`}last(){this.disabled||this.dispatchEvent(new CustomEvent("kemet-carousel-last",{bubbles:!0,composed:!0,detail:this}))}}customElements.get("kemet-carousel-last")||customElements.define("kemet-carousel-last",ct);class pt extends Z{static get styles(){return[r`
|
|
374
|
+
:host {
|
|
375
|
+
cursor: pointer;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
:host([disabled]) {
|
|
379
|
+
cursor: not-allowed;
|
|
380
|
+
}
|
|
381
|
+
`]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
|
|
382
|
+
<span tabindex="0" @keyup=${()=>this.prev()} @click=${()=>this.prev()}>
|
|
383
|
+
<slot></slot>
|
|
384
|
+
</span>
|
|
385
|
+
`}prev(){this.disabled||this.dispatchEvent(new CustomEvent("kemet-carousel-prev",{bubbles:!0,composed:!0,detail:this}))}}customElements.get("kemet-carousel-prev")||customElements.define("kemet-carousel-prev",pt);customElements.get("kemet-carousel-link")||customElements.define("kemet-carousel-link",class extends Z{static get properties(){return{slide:{type:Number,reflect:!0},selected:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}}}static get styles(){return[r`
|
|
374
386
|
:host([selected]) {
|
|
375
387
|
color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
|
|
376
388
|
}
|
|
@@ -398,19 +410,7 @@ const tt=t=>null!=t?t:T
|
|
|
398
410
|
<span tabindex="0" @keyup=${()=>this.next()} @click=${()=>this.next()}>
|
|
399
411
|
<slot></slot>
|
|
400
412
|
</span>
|
|
401
|
-
`}next(){this.disabled||this.dispatchEvent(new CustomEvent("kemet-carousel-next",{bubbles:!0,composed:!0,detail:this}))}});class
|
|
402
|
-
:host {
|
|
403
|
-
cursor: pointer;
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
:host([disabled]) {
|
|
407
|
-
cursor: not-allowed;
|
|
408
|
-
}
|
|
409
|
-
`]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
|
|
410
|
-
<span tabindex="0" @keyup=${()=>this.prev()} @click=${()=>this.prev()}>
|
|
411
|
-
<slot></slot>
|
|
412
|
-
</span>
|
|
413
|
-
`}prev(){this.disabled||this.dispatchEvent(new CustomEvent("kemet-carousel-prev",{bubbles:!0,composed:!0,detail:this}))}}customElements.get("kemet-carousel-prev")||customElements.define("kemet-carousel-prev",pt);customElements.get("kemet-carousel-slide")||customElements.define("kemet-carousel-slide",class extends Z{static get styles(){return[r`
|
|
413
|
+
`}next(){this.disabled||this.dispatchEvent(new CustomEvent("kemet-carousel-next",{bubbles:!0,composed:!0,detail:this}))}});customElements.get("kemet-carousel-slide")||customElements.define("kemet-carousel-slide",class extends Z{static get styles(){return[r`
|
|
414
414
|
:host,
|
|
415
415
|
:host *,
|
|
416
416
|
:host *::before,
|
|
@@ -554,7 +554,7 @@ const tt=t=>null!=t?t:T
|
|
|
554
554
|
outline: none;
|
|
555
555
|
background-color: var(--kemet-combo-hover-background-color, var(--kemet-color-primary));
|
|
556
556
|
}
|
|
557
|
-
`]}static get properties(){return{slug:{type:String},options:{type:Array},filteredOptions:{type:Array},show:{type:Boolean,reflect:!0}}}firstUpdated(){this.field=this.closest("kemet-field"),this.input=this.field.querySelector('[slot="input"]'),this.slug=this.field.slug||"slug",this.input.addEventListener("kemet-input-input",this.handleInput.bind(this)),this.input.addEventListener("keydown",(t=>this.handleInputKeyDown(t)))}render(){return I`
|
|
557
|
+
`]}static get properties(){return{slug:{type:String},options:{type:Array},filteredOptions:{type:Array},show:{type:Boolean,reflect:!0}}}constructor(){super(),this.options=[]}firstUpdated(){this.field=this.closest("kemet-field"),this.input=this.field.querySelector('[slot="input"]'),this.slug=this.field.slug||"slug",this.input.addEventListener("kemet-input-input",this.handleInput.bind(this)),this.input.addEventListener("keydown",(t=>this.handleInputKeyDown(t)))}render(){return I`
|
|
558
558
|
<div
|
|
559
559
|
role="combobox"
|
|
560
560
|
aria-expanded=${this.show}
|
|
@@ -567,7 +567,7 @@ const tt=t=>null!=t?t:T
|
|
|
567
567
|
${this.makeOptions()}
|
|
568
568
|
</ul>
|
|
569
569
|
</div>
|
|
570
|
-
`}makeOptions(){if(this.input){this.filteredOptions=this.options.filter((t=>-1!==t.toLowerCase().indexOf(this.input.value
|
|
570
|
+
`}makeOptions(){if(this.input){this.filteredOptions=this.options.filter((t=>-1!==t.toLowerCase().indexOf(this.input.value?.toLowerCase())));return this.filteredOptions.map(((t,e)=>I`<li
|
|
571
571
|
id="${this.slug}-option-${e}"
|
|
572
572
|
role="option"
|
|
573
573
|
tabindex="0"
|