kempo-ui 0.0.15 → 0.0.16

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.
Files changed (9) hide show
  1. package/dist/src/components/Accordion.js +40 -9
  2. package/dist/src/components/Tabs.js +9 -8
  3. package/docs/kempo-ui/src/components/Accordion.js +40 -9
  4. package/docs/kempo-ui/src/components/Tabs.js +9 -8
  5. package/package.json +1 -1
  6. package/dist/src/components/Collapsible.js +0 -41
  7. package/dist/src/components/PersistantCollapsible.js +0 -1
  8. package/docs/kempo-ui/src/components/Collapsible.js +0 -41
  9. package/docs/kempo-ui/src/components/PersistantCollapsible.js +0 -1
package/dist/src/components/Accordion.js CHANGED
@@ -1,28 +1,59 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={};getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const o=this.getPanel(e);if(o){o.active=!0,o.transitioning=!0,setTimeout(()=>{o.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}}))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}}))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists,boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
2
2
  :host {
3
3
  display: block;
4
- border: 1px solid var(--c_border);
4
+ border: 1px solid var(--c_border, #ccc);
5
5
  border-radius: var(--radius);
6
6
  }
7
7
  ::slotted(k-accordion-header) {
8
- border-top: 1px solid var(--c_border);
8
+ border-top: 1px solid var(--c_border, #ccc);
9
9
  }
10
- ::slotted(k-accordion-header[active="true"]) {
11
- border-bottom: 1px solid var(--c_border);
10
+ ::slotted(k-accordion-header) {
11
+ position: relative;
12
+ }
13
+ ::slotted(k-accordion-header)::after {
14
+ content: '';
15
+ display: block;
16
+ position: absolute;
17
+ left: var(--spacer_h, 0.5rem);
18
+ right: var(--spacer_h, 0.5rem);
19
+ bottom: 0;
20
+ height: 0;
21
+ width: calc(100% - var(--spacer, 1rem));
22
+ border-bottom: 1px solid var(--c_border, #ccc);
23
+ opacity: 0;
24
+ transition: opacity var(--animation_ms, 256ms);
25
+ pointer-events: none;
26
+ }
27
+ ::slotted(k-accordion-header[active])::after {
28
+ opacity: 0.4;
12
29
  }
13
30
  ::slotted(k-accordion-header:first-of-type) {
14
31
  border-top: 0;
15
32
  }
16
- ::slotted(k-accordion-header:last-of-type:not([active="true"])) {
33
+ ::slotted(k-accordion-header:last-of-type:not([active])) {
17
34
  border-bottom: 0;
18
35
  }
19
- `;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}static styles=css`
36
+ `;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}render(){return html`
37
+ <slot name="left-icon">
38
+ <k-icon id="icon" name="chevron-right"></k-icon>
39
+ </slot>
40
+ <slot></slot>
41
+ <slot name="right-icon"></slot>
42
+ `}static styles=css`
20
43
  :host {
21
44
  display: block;
22
45
  padding: 1rem;
23
46
  cursor: pointer;
24
47
  }
25
- `;render(){return html`<slot></slot>`}}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolTrueFalse},transitioning:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
48
+ #icon {
49
+ will-change: trnasform;
50
+ transition: transform var(--animation_ms, 256ms);
51
+ transform: rotate(0deg);
52
+ }
53
+ :host([active]) #icon {
54
+ transform: rotate(90deg);
55
+ }
56
+ `}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolExists},transitioning:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
26
57
  :host {
27
58
  display: block;
28
59
  interpolate-size: allow-keywords;
@@ -30,7 +61,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
30
61
  overflow: hidden;
31
62
  transition: height var(--animation_ms, 256ms) ease-in-out;
32
63
  }
33
- :host([active="true"]) {
64
+ :host([active]) {
34
65
  height: max-content;
35
66
  }
36
67
  `;render(){return html`<slot></slot>`}}customElements.define("k-accordion",Accordion),customElements.define("k-accordion-header",AccordionHeader),customElements.define("k-accordion-panel",AccordionPanel);
package/dist/src/components/Tabs.js CHANGED
@@ -99,7 +99,11 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
99
99
  <slot></slot>
100
100
  </div>
101
101
  </div>
102
- `}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
102
+ `}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`
103
+ <button id="button" @click=${this.handleClick}>
104
+ <slot></slot>
105
+ </button>
106
+ `}static styles=css`
103
107
  :host {
104
108
  margin-bottom: -1px;
105
109
  flex: 0 0 auto;
@@ -120,24 +124,21 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
120
124
  }
121
125
 
122
126
  :host([active]) {
123
- border-bottom: 2px solid var(--c_primary);
127
+ border-bottom: 3px solid var(--c_primary);
124
128
  margin-bottom: -1px;
125
129
  }
126
130
 
127
131
  :host([active]) #button {
128
132
  color: var(--tc_primary);
129
133
  }
130
- `;render(){return html`
131
- <button id="button" @click=${this.handleClick}>
132
- <slot></slot>
133
- </button>
134
- `}}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
134
+ `}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`<slot></slot>`}static styles=css`
135
135
  :host {
136
136
  display: block;
137
137
  height: 100%;
138
138
  max-height: 100%;
139
139
  flex: 1 1 auto;
140
140
  overflow: auto;
141
+ padding-top: var(--spacer, 1rem);
141
142
  }
142
143
 
143
144
  :host([active]) {
@@ -147,7 +148,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
147
148
  :host(:not([active])) {
148
149
  display: none;
149
150
  }
150
- `;render(){return html`<slot></slot>`}}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
151
+ `}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
151
152
  :host {
152
153
  flex: 1 1 auto !important;
153
154
  height: 1px;
package/docs/kempo-ui/src/components/Accordion.js CHANGED
@@ -1,28 +1,59 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={};getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const o=this.getPanel(e);if(o){o.active=!0,o.transitioning=!0,setTimeout(()=>{o.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}}))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}}))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists,boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
2
2
  :host {
3
3
  display: block;
4
- border: 1px solid var(--c_border);
4
+ border: 1px solid var(--c_border, #ccc);
5
5
  border-radius: var(--radius);
6
6
  }
7
7
  ::slotted(k-accordion-header) {
8
- border-top: 1px solid var(--c_border);
8
+ border-top: 1px solid var(--c_border, #ccc);
9
9
  }
10
- ::slotted(k-accordion-header[active="true"]) {
11
- border-bottom: 1px solid var(--c_border);
10
+ ::slotted(k-accordion-header) {
11
+ position: relative;
12
+ }
13
+ ::slotted(k-accordion-header)::after {
14
+ content: '';
15
+ display: block;
16
+ position: absolute;
17
+ left: var(--spacer_h, 0.5rem);
18
+ right: var(--spacer_h, 0.5rem);
19
+ bottom: 0;
20
+ height: 0;
21
+ width: calc(100% - var(--spacer, 1rem));
22
+ border-bottom: 1px solid var(--c_border, #ccc);
23
+ opacity: 0;
24
+ transition: opacity var(--animation_ms, 256ms);
25
+ pointer-events: none;
26
+ }
27
+ ::slotted(k-accordion-header[active])::after {
28
+ opacity: 0.4;
12
29
  }
13
30
  ::slotted(k-accordion-header:first-of-type) {
14
31
  border-top: 0;
15
32
  }
16
- ::slotted(k-accordion-header:last-of-type:not([active="true"])) {
33
+ ::slotted(k-accordion-header:last-of-type:not([active])) {
17
34
  border-bottom: 0;
18
35
  }
19
- `;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}static styles=css`
36
+ `;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}render(){return html`
37
+ <slot name="left-icon">
38
+ <k-icon id="icon" name="chevron-right"></k-icon>
39
+ </slot>
40
+ <slot></slot>
41
+ <slot name="right-icon"></slot>
42
+ `}static styles=css`
20
43
  :host {
21
44
  display: block;
22
45
  padding: 1rem;
23
46
  cursor: pointer;
24
47
  }
25
- `;render(){return html`<slot></slot>`}}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolTrueFalse},transitioning:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
48
+ #icon {
49
+ will-change: trnasform;
50
+ transition: transform var(--animation_ms, 256ms);
51
+ transform: rotate(0deg);
52
+ }
53
+ :host([active]) #icon {
54
+ transform: rotate(90deg);
55
+ }
56
+ `}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolExists},transitioning:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
26
57
  :host {
27
58
  display: block;
28
59
  interpolate-size: allow-keywords;
@@ -30,7 +61,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
30
61
  overflow: hidden;
31
62
  transition: height var(--animation_ms, 256ms) ease-in-out;
32
63
  }
33
- :host([active="true"]) {
64
+ :host([active]) {
34
65
  height: max-content;
35
66
  }
36
67
  `;render(){return html`<slot></slot>`}}customElements.define("k-accordion",Accordion),customElements.define("k-accordion-header",AccordionHeader),customElements.define("k-accordion-panel",AccordionPanel);
package/docs/kempo-ui/src/components/Tabs.js CHANGED
@@ -99,7 +99,11 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
99
99
  <slot></slot>
100
100
  </div>
101
101
  </div>
102
- `}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
102
+ `}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`
103
+ <button id="button" @click=${this.handleClick}>
104
+ <slot></slot>
105
+ </button>
106
+ `}static styles=css`
103
107
  :host {
104
108
  margin-bottom: -1px;
105
109
  flex: 0 0 auto;
@@ -120,24 +124,21 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
120
124
  }
121
125
 
122
126
  :host([active]) {
123
- border-bottom: 2px solid var(--c_primary);
127
+ border-bottom: 3px solid var(--c_primary);
124
128
  margin-bottom: -1px;
125
129
  }
126
130
 
127
131
  :host([active]) #button {
128
132
  color: var(--tc_primary);
129
133
  }
130
- `;render(){return html`
131
- <button id="button" @click=${this.handleClick}>
132
- <slot></slot>
133
- </button>
134
- `}}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
134
+ `}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`<slot></slot>`}static styles=css`
135
135
  :host {
136
136
  display: block;
137
137
  height: 100%;
138
138
  max-height: 100%;
139
139
  flex: 1 1 auto;
140
140
  overflow: auto;
141
+ padding-top: var(--spacer, 1rem);
141
142
  }
142
143
 
143
144
  :host([active]) {
@@ -147,7 +148,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
147
148
  :host(:not([active])) {
148
149
  display: none;
149
150
  }
150
- `;render(){return html`<slot></slot>`}}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
151
+ `}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
151
152
  :host {
152
153
  flex: 1 1 auto !important;
153
154
  height: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-ui",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "type": "module",
5
5
  "description": "A Lit based web-component library",
6
6
  "main": "index.js",
package/dist/src/components/Collapsible.js DELETED
@@ -1,41 +0,0 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./Icon.js";export default class Collapsible extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.opened=!1}handleLabelClick=()=>{this.toggle()};updated(e){super.updated(e),e.has("opened")&&(this.dispatchEvent(new CustomEvent("openedchanged",{detail:this.opened?"open":"close"})),this.dispatchEvent(new CustomEvent(this.opened?"open":"close")))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,this.dispatchEvent(new CustomEvent("openedtoggled"))}static styles=css`
2
- :host {
3
- display: block;
4
- }
5
- #labelContainer {
6
- display: flex;
7
- cursor: pointer;
8
- }
9
- #label {
10
- flex: 1 1 auto;
11
- }
12
- #labelIcon {
13
- flex: 0 0 none;
14
- opacity: 0.5;
15
- transform: rotate(90deg);
16
- transition: transform var(--animation_ms, 256ms);
17
- }
18
- #labelContainer:hover #labelIcon {
19
- opacity: 1;
20
- }
21
- :host([opened="true"]) #labelIcon {
22
- transform: rotate(-90deg);
23
- }
24
- :host(:not([opened="true"])) #content {
25
- display: none;
26
- }
27
- `;render(){return html`
28
- <div id="labelContainer" @click=${this.handleLabelClick}>
29
- <div id="label">
30
- <slot name="label"></slot>
31
- </div>
32
- <div id="labelIcon">
33
- <slot name="labelIcon">
34
- <k-icon name="chevron-right"></k-icon>
35
- </slot>
36
- </div>
37
- </div>
38
- <div id="content">
39
- <slot></slot>
40
- </div>
41
- `}}customElements.define("k-collapsible",Collapsible);
package/dist/src/components/PersistantCollapsible.js DELETED
@@ -1 +0,0 @@
1
- import Collapsible from"./Collapsible.js";export default class PersistantCollapsible extends Collapsible{constructor(){super(),this.storageKey=""}connectedCallback(){super.connectedCallback(),this.updateStorageKey(),this.loadFromStorage(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}updated(e){super.updated(e),e.has("opened")&&this.saveToStorage(),e.has("id")&&(this.updateStorageKey(),this.loadFromStorage())}handleStorageChange=e=>{e.key===this.storageKey&&this.loadFromStorage()};updateStorageKey(){this.storageKey=this.id?`PersistantCollapsible-${this.id}`:""}loadFromStorage(){if(this.storageKey){const e=localStorage.getItem(this.storageKey);null!==e&&(this.opened="true"===e)}}saveToStorage(){this.storageKey&&localStorage.setItem(this.storageKey,this.opened.toString())}}customElements.define("k-p-collapsible",PersistantCollapsible);
package/docs/kempo-ui/src/components/Collapsible.js DELETED
@@ -1,41 +0,0 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./Icon.js";export default class Collapsible extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.opened=!1}handleLabelClick=()=>{this.toggle()};updated(e){super.updated(e),e.has("opened")&&(this.dispatchEvent(new CustomEvent("openedchanged",{detail:this.opened?"open":"close"})),this.dispatchEvent(new CustomEvent(this.opened?"open":"close")))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,this.dispatchEvent(new CustomEvent("openedtoggled"))}static styles=css`
2
- :host {
3
- display: block;
4
- }
5
- #labelContainer {
6
- display: flex;
7
- cursor: pointer;
8
- }
9
- #label {
10
- flex: 1 1 auto;
11
- }
12
- #labelIcon {
13
- flex: 0 0 none;
14
- opacity: 0.5;
15
- transform: rotate(90deg);
16
- transition: transform var(--animation_ms, 256ms);
17
- }
18
- #labelContainer:hover #labelIcon {
19
- opacity: 1;
20
- }
21
- :host([opened="true"]) #labelIcon {
22
- transform: rotate(-90deg);
23
- }
24
- :host(:not([opened="true"])) #content {
25
- display: none;
26
- }
27
- `;render(){return html`
28
- <div id="labelContainer" @click=${this.handleLabelClick}>
29
- <div id="label">
30
- <slot name="label"></slot>
31
- </div>
32
- <div id="labelIcon">
33
- <slot name="labelIcon">
34
- <k-icon name="chevron-right"></k-icon>
35
- </slot>
36
- </div>
37
- </div>
38
- <div id="content">
39
- <slot></slot>
40
- </div>
41
- `}}customElements.define("k-collapsible",Collapsible);
package/docs/kempo-ui/src/components/PersistantCollapsible.js DELETED
@@ -1 +0,0 @@
1
- import Collapsible from"./Collapsible.js";export default class PersistantCollapsible extends Collapsible{constructor(){super(),this.storageKey=""}connectedCallback(){super.connectedCallback(),this.updateStorageKey(),this.loadFromStorage(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}updated(e){super.updated(e),e.has("opened")&&this.saveToStorage(),e.has("id")&&(this.updateStorageKey(),this.loadFromStorage())}handleStorageChange=e=>{e.key===this.storageKey&&this.loadFromStorage()};updateStorageKey(){this.storageKey=this.id?`PersistantCollapsible-${this.id}`:""}loadFromStorage(){if(this.storageKey){const e=localStorage.getItem(this.storageKey);null!==e&&(this.opened="true"===e)}}saveToStorage(){this.storageKey&&localStorage.setItem(this.storageKey,this.opened.toString())}}customElements.define("k-p-collapsible",PersistantCollapsible);