UNPKG

@patternfly/pfe-collapse

Version:

Collapse element for PatternFly Elements

3 lines (2 loc) 9.83 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["exports","../../pfelement/dist/pfelement.umd.min"],t):t((e=e||self).PfeCollapse={},e.PFElement)}(this,function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),e};function a(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function o(e,t,n){null===e&&(e=Function.prototype);var i=Object.getOwnPropertyDescriptor(e,t);if(void 0!==i){if("value"in i)return i.value;i=i.get;return void 0!==i?i.call(n):void 0}if(null!==(e=Object.getPrototypeOf(e)))return o(e,t,n)}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};function s(){return Math.random().toString(36).substr(2,9)}var c=(l(d,t),n(d,[{key:"html",get:function(){return"\n<style>:host{display:block;cursor:default} /*# sourceMappingURL=pfe-collapse-toggle.min.css.map */</style>\n<slot></slot>"}},{key:"templateUrl",get:function(){return"pfe-collapse-toggle.html"}},{key:"styleUrl",get:function(){return"pfe-collapse-toggle.scss"}},{key:"expanded",get:function(){return"true"===this.getAttribute("aria-expanded")},set:function(e){e=Boolean(e);this.setAttribute("aria-expanded",e)}}],[{key:"version",get:function(){return"1.12.3"}},{key:"slots",get:function(){return{default:{title:"Default",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-collapsibe-toggle"},{$ref:"pfe-collapse-panel"}]}}}}},{key:"tag",get:function(){return"pfe-collapse-toggle"}},{key:"properties",get:function(){return{ariaExpanded:{title:"Aria expanded",type:String,prefix:!1,values:["true","false"]},ariaControls:{title:"Aria controls",type:String,prefix:!1,observer:"_ariaControlsChanged"}}}}]),n(d,[{key:"connectedCallback",value:function(){o(d.prototype.__proto__||Object.getPrototypeOf(d.prototype),"connectedCallback",this).call(this),this.expanded=!1,this.id=this.id||d.tag+"-"+s(),this.setAttribute("role","button"),this._setTabIndex&&this.setAttribute("tabindex",0),this.controlledPanel||this._connectPanel(this.getAttribute("aria-controls"))}},{key:"disconnectedCallback",value:function(){o(d.prototype.__proto__||Object.getPrototypeOf(d.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("click",this._clickHandler),this._addKeydownHandler&&this.removeEventListener("keydown",this._keydownHandler)}},{key:"_ariaControlsChanged",value:function(e,t){t&&this._connectPanel(t)}},{key:"toggle",value:function(){this.hasAttribute("disabled")||(this.expanded=!this.expanded,this.controlledPanel||this._connectPanel(this.getAttribute("aria-controls")),this.controlledPanel?(this.controlledPanel.expanded=this.expanded,this.emitEvent(h.events.change,{detail:{expanded:this.expanded,toggle:this,panel:this.controlledPanel}})):this.warn("This toggle doesn't have a panel associated with it"))}},{key:"_clickHandler",value:function(){this.toggle()}},{key:"_keydownHandler",value:function(e){switch(e.key){case" ":case"Spacebar":case"Enter":this.toggle()}}},{key:"_connectPanel",value:function(e){this.getRootNode?this.controlledPanel=this.getRootNode().querySelector("#"+e):this.controlledPanel=document.querySelector("#"+e)}}]),d);function d(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},n=t.setTabIndex,n=void 0===n||n,t=t.addKeydownHandler,t=void 0===t||t;i(this,d);e=r(this,(d.__proto__||Object.getPrototypeOf(d)).call(this,e||d));return e.controlledPanel=!1,e._setTabIndex=n,e._addKeydownHandler=t,e.addEventListener("click",e._clickHandler),t&&e.addEventListener("keydown",e._keydownHandler),e}var u=(l(p,t),n(p,[{key:"html",get:function(){return"\n<style>:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out} /*# sourceMappingURL=pfe-collapse-panel.min.css.map */</style>\n<slot></slot>"}},{key:"templateUrl",get:function(){return"pfe-collapse-panel.html"}},{key:"styleUrl",get:function(){return"pfe-collapse-panel.scss"}},{key:"animates",get:function(){return"false"!==this.animation}},{key:"expanded",get:function(){return this.hasAttribute("expanded")||this.hasAttribute("pfe-expanded")},set:function(e){var t;Boolean(e)?(this.setAttribute("pfe-expanded",""),this.setAttribute("expanded",""),this.animates&&(t=this.getBoundingClientRect().height,this._fireAnimationEvent("opening"),this._animate(0,t))):(this.hasAttribute("expanded")||this.hasAttribute("pfe-expanded"))&&(t=this.getBoundingClientRect().height,this.removeAttribute("expanded"),this.removeAttribute("pfe-expanded"),this.animates&&(this._fireAnimationEvent("closing"),this._animate(t,0)))}}],[{key:"version",get:function(){return"1.12.3"}},{key:"slots",get:function(){return{default:{title:"Default",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-collapsibe-toggle"},{$ref:"pfe-collapse-panel"}]}}}}},{key:"tag",get:function(){return"pfe-collapse-panel"}},{key:"events",get:function(){return{animationStart:this.tag+":animation-start",animationEnd:this.tag+":animation-end"}}},{key:"properties",get:function(){return{animation:{title:"Animation",type:String,values:["false"]},oldAnimation:{alias:"animation",attr:"pfe-animation"}}}}]),n(p,[{key:"connectedCallback",value:function(){o(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.expanded=!1,this.id=this.id||p.tag+"-"+s()}},{key:"_animate",value:function(e,t){var n=this;this.classList.add("animating"),this.style.height=e+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){n.style.height=t+"px",n.classList.add("animating"),n.addEventListener("transitionend",n._transitionEndHandler)})})}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler),this.emitEvent(p.events.animationEnd,{detail:{expanded:this.expanded,panel:this}})}},{key:"_fireAnimationEvent",value:function(e){this.emitEvent(p.events.animationStart,{detail:{state:e,panel:this}})}}]),p);function p(e){return i(this,p),r(this,(p.__proto__||Object.getPrototypeOf(p)).call(this,e||p))}var h=(l(f,t),n(f,[{key:"html",get:function(){return"\n<style>:host{display:block}:host([hidden]){display:none}:host(.animating),:host([expanded]){display:block} /*# sourceMappingURL=pfe-collapse.min.css.map */</style>\n<slot></slot>"}},{key:"templateUrl",get:function(){return"pfe-collapse.html"}},{key:"styleUrl",get:function(){return"pfe-collapse.scss"}},{key:"schemaUrl",get:function(){return"pfe-collapse.json"}},{key:"animates",get:function(){return"false"!==this.animation}}],[{key:"version",get:function(){return"1.12.3"}},{key:"slots",get:function(){return{default:{title:"Default",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-collapsibe-toggle"},{$ref:"pfe-collapse-panel"}]}}}}},{key:"tag",get:function(){return"pfe-collapse"}},{key:"events",get:function(){return{change:this.tag+":change"}}},{key:"properties",get:function(){return{animation:{title:"Animation",type:String,values:["false"],observer:"_animationChanged"},oldAnimation:{alias:"animation",attr:"pfe-animation"}}}}]),n(f,[{key:"connectedCallback",value:function(){var e=this;o(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"connectedCallback",this).call(this),Promise.all([customElements.whenDefined(u.tag),customElements.whenDefined(c.tag)]).then(function(){e.hasLightDOM()&&e._linkControls(),e._observer.observe(e,{childList:!0})})}},{key:"disconnectedCallback",value:function(){o(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this.removeEventListener(f.events.change,this._changeHandler),this.removeEventListener(f.events.animationStart,this._animationStartHandler),this.removeEventListener(f.events.animationEnd,this._animationEndHandler),this._observer.disconnect()}},{key:"_animationChanged",value:function(e,t){t&&("false"!==t&&"true"!==t||this._panel&&(this._panel.animation=t))}},{key:"toggle",value:function(){this._toggle.toggle()}},{key:"_linkControls",value:function(){this._toggle=this.querySelector(c.tag),this._panel=this.querySelector(u.tag),this._toggle.setAttribute("aria-controls",this._panel.id)}},{key:"_animationStartHandler",value:function(){this.classList.add("animating")}},{key:"_animationEndHandler",value:function(){this.classList.remove("animating")}},{key:"_changeHandler",value:function(e){}}]),f);function f(e){i(this,f);e=r(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,e||f));return e._toggle=null,e._panel=null,e._linkControls=e._linkControls.bind(e),e._changeHandler=e._changeHandler.bind(e),e._observer=new MutationObserver(e._linkControls),e.addEventListener(f.events.change,e._changeHandler),e.addEventListener(f.events.animationStart,e._animationStartHandler),e.addEventListener(f.events.animationEnd,e._animationEndHandler),e}t.create(h),t.create(c),t.create(u),e.PfeCollapse=h,e.PfeCollapsePanel=u,e.PfeCollapseToggle=c,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=pfe-collapse.umd.min.js.map