kempo 2.12.0 → 2.12.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"
|
|
1
|
+
import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol("clickHandler");export default class Collapsible extends Component{constructor(e=!1){super(),this[clickHandler]=()=>{this.toggle()},this.registerAttributes({opened:e})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&dispatchEvent(this,"openedchanged "+("true"===t?"open":"close"))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"openedtoggled")}get shadowTemplate(){return`\n <div id="labelContainer">\n <div id="label">\n <slot name="label"></slot>\n </div>\n <div id="labelIcon">\n <slot name="labelIcon">\n <k-icon name="chevron-right"></k-icon>\n </slot>\n </div>\n </div>\n <div id="content">\n ${super.shadowTemplate}\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n }\n #labelContainer {\n display: flex;\n cursor: pointer;\n }\n #label {\n flex: 1 1 auto;\n }\n #labelIcon {\n flex: 0 0 none;\n opacity: 0.5;\n transform: rotate(90deg);\n transition: transform var(--animation_ms, 256ms);\n }\n #labelContainer:hover #labelIcon {\n opacity: 1;\n }\n :host([opened="true"]) #labelIcon {\n transform: rotate(-90deg);\n }\n :host(:not([opened="true"])) #content {\n display: none;\n }\n `}static observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-collapsible",Collapsible);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"
|
|
1
|
+
import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol("clickHandler");export default class Collapsible extends Component{constructor(e=!1){super(),this[clickHandler]=()=>{this.toggle()},this.registerAttributes({opened:e})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("label"),"click",this[clickHandler])}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===e&&n!==t&&dispatchEvent(this,"openedchanged "+("true"===t?"open":"close"))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"openedtoggled")}get shadowTemplate(){return`\n <div id="labelContainer">\n <div id="label">\n <slot name="label"></slot>\n </div>\n <div id="labelIcon">\n <slot name="labelIcon">\n <k-icon name="chevron-right"></k-icon>\n </slot>\n </div>\n </div>\n <div id="content">\n ${super.shadowTemplate}\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n }\n #labelContainer {\n display: flex;\n cursor: pointer;\n }\n #label {\n flex: 1 1 auto;\n }\n #labelIcon {\n flex: 0 0 none;\n opacity: 0.5;\n transform: rotate(90deg);\n transition: transform var(--animation_ms, 256ms);\n }\n #labelContainer:hover #labelIcon {\n opacity: 1;\n }\n :host([opened="true"]) #labelIcon {\n transform: rotate(-90deg);\n }\n :host(:not([opened="true"])) #content {\n display: none;\n }\n `}static observedAttributes=[...super.observedAttributes,"opened"]}window.customElements.define("k-collapsible",Collapsible);
|
package/package.json
CHANGED