@codegouvfr/react-dsfr/dsfr/component/tab/tab.module.min.js

French State Design System React integration library

/*! DSFR v1.8.5 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */
const t=window.dsfr;class s extends t.core.DisclosureButton{constructor(){super(t.core.DisclosureType.SELECT)}static get instanceClassName(){return"TabButton"}apply(t){super.apply(t),this.isPrimary&&(this.setAttribute("tabindex",t?"0":"-1"),t&&this.list&&this.list.focalize(this))}get list(){return this.element.getAscendantInstance("TabsList","TabsGroup")}}const i={TAB:t.internals.ns.selector("tabs__tab"),GROUP:t.internals.ns.selector("tabs"),PANEL:t.internals.ns.selector("tabs__panel"),LIST:t.internals.ns.selector("tabs__list"),SHADOW:t.internals.ns.selector("tabs__shadow"),SHADOW_LEFT:t.internals.ns.selector("tabs__shadow--left"),SHADOW_RIGHT:t.internals.ns.selector("tabs__shadow--right"),PANEL_START:t.internals.ns.selector("tabs__panel--direction-start"),PANEL_END:t.internals.ns.selector("tabs__panel--direction-end")},e="direction-start",n="direction-end",r="none";class o extends t.core.Disclosure{constructor(){super(t.core.DisclosureType.SELECT,i.PANEL,s,"TabsGroup"),this._direction=r,this._isPreventingTransition=!1}static get instanceClassName(){return"TabPanel"}get direction(){return this._direction}set direction(t){if(t!==this._direction){switch(this._direction){case e:this.removeClass(i.PANEL_START);break;case n:this.removeClass(i.PANEL_END);break;case r:break;default:return}switch(this._direction=t,this._direction){case e:this.addClass(i.PANEL_START);break;case n:this.addClass(i.PANEL_END)}}}get isPreventingTransition(){return this._isPreventingTransition}set isPreventingTransition(s){this._isPreventingTransition!==s&&(s?this.addClass(t.internals.motion.TransitionSelector.NONE):this.removeClass(t.internals.motion.TransitionSelector.NONE),this._isPreventingTransition=!0===s)}translate(t,s){this.isPreventingTransition=s,this.direction=t}reset(){this.group.index=0}}class a extends t.core.DisclosuresGroup{constructor(){super("TabPanel")}static get instanceClassName(){return"TabsGroup"}init(){super.init(),this.listen("transitionend",this.transitionend.bind(this)),this.listenKey(t.core.KeyCodes.RIGHT,this.pressRight.bind(this),!0,!0),this.listenKey(t.core.KeyCodes.LEFT,this.pressLeft.bind(this),!0,!0),this.listenKey(t.core.KeyCodes.HOME,this.pressHome.bind(this),!0,!0),this.listenKey(t.core.KeyCodes.END,this.pressEnd.bind(this),!0,!0),this.isRendering=!0,this.list&&this.list.apply()}get list(){return this.element.getDescendantInstances("TabsList","TabsGroup",!0)[0]}transitionend(t){this.isPreventingTransition=!0}get buttonHasFocus(){return this.members.some((t=>t.buttonHasFocus))}pressRight(){this.buttonHasFocus&&(this.index<this.length-1?this.index++:this.index=0,this.focus())}pressLeft(){this.buttonHasFocus&&(this.index>0?this.index--:this.index=this.length-1,this.focus())}pressHome(){this.buttonHasFocus&&(this.index=0,this.focus())}pressEnd(){this.buttonHasFocus&&(this.index=this.length-1,this.focus())}focus(){this.current&&this.current.focus()}apply(){for(let t=0;t<this._index;t++)this.members[t].translate(e);this.current.translate(r);for(let t=this._index+1;t<this.length;t++)this.members[t].translate(n);this.isPreventingTransition=!1}get isPreventingTransition(){return this._isPreventingTransition}set isPreventingTransition(s){this._isPreventingTransition!==s&&(s?this.addClass(t.internals.motion.TransitionSelector.NONE):this.removeClass(t.internals.motion.TransitionSelector.NONE),this._isPreventingTransition=!0===s)}render(){if(null===this.current)return;const t=Math.round(this.current.node.offsetHeight);if(this.panelHeight===t)return;this.panelHeight=t;let s=0;this.list&&(s=this.list.node.offsetHeight),this.style.setProperty("--tabs-height",this.panelHeight+s+"px")}}class l extends t.core.Instance{static get instanceClassName(){return"TabsList"}init(){this.listen("scroll",this.scroll.bind(this)),this.isResizing=!0}get group(){return this.element.getAscendantInstance("TabsGroup","TabsList")}focalize(t){const s=t.getRect(),i=this.getRect(),e=this.node.scrollLeft;s.left<i.left?this.node.scrollTo(e-i.left+s.left-16,0):s.right>i.right&&this.node.scrollTo(e-i.right+s.right+16,0)}get isScrolling(){return this._isScrolling}set isScrolling(t){this._isScrolling!==t&&(this._isScrolling=t,this.apply())}apply(){this.group&&(this._isScrolling?(this.group.addClass(i.SHADOW),this.scroll()):(this.group.removeClass(i.SHADOW_RIGHT),this.group.removeClass(i.SHADOW_LEFT),this.group.removeClass(i.SHADOW)))}scroll(){if(!this.group)return;const t=this.node.scrollLeft,s=t<=16,e=this.node.scrollWidth-this.node.clientWidth-16,n=Math.abs(t)>=e,r="rtl"===document.documentElement.getAttribute("dir"),o=r?i.SHADOW_RIGHT:i.SHADOW_LEFT,a=r?i.SHADOW_LEFT:i.SHADOW_RIGHT;s?this.group.removeClass(o):this.group.addClass(o),n?this.group.removeClass(a):this.group.addClass(a)}resize(){this.isScrolling=this.node.scrollWidth>this.node.clientWidth+16,this.setProperty("--tab-list-height",`${this.getRect().height}px`)}dispose(){this.isScrolling=!1}}t.tab={TabPanel:o,TabButton:s,TabsGroup:a,TabsList:l,TabSelector:i},t.internals.register(t.tab.TabSelector.PANEL,t.tab.TabPanel),t.internals.register(t.tab.TabSelector.GROUP,t.tab.TabsGroup),t.internals.register(t.tab.TabSelector.LIST,t.tab.TabsList);
//# sourceMappingURL=tab.module.min.js.map