@ilo-org/twig 1.9.0 → 1.11.0

package/README.md

@@ -5,7 +5,6 @@ This package provides the implementation of the Design System using [Twig](https
 - [@ilo-org/themes](./packages/themes)
 - [@ilo-org/fonts](./packages/fonts)
 - [@ilo-org/styles](./packages/styles)
-- [@ilo-org/utils](./packages/utils)
 - [@ilo-org/icons](./packages/icons)
 
 ## Drupal Integration

package/dist/components/accordion/accordion.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const t={CONTROLS:"aria-controls",EXPANDED:"aria-expanded",HIDDEN:"aria-hidden",SELECTED:"aria-selected",SORT:"aria-sort"},d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  const FOCUSABLE_SELECTORS=["a","button","input","select","textarea","[tabindex]:not([tabindex='-1'])"];class Accordion{constructor(element){this.element=element;this.multipleExpanded=false;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.accordionItems=this.element.querySelectorAll(".ilo--accordion--item");this.multipleExpanded=this.element.hasAttribute("data-multipleexpanded");this.accordionPanels=this.element.querySelectorAll(".ilo--accordion--panel");this.accordionButtons=this.element.querySelectorAll(".ilo--accordion--button");return this}setupHandlers(){this.collapseSection=this.collapseSection.bind(this);this.expandSection=this.expandSection.bind(this);this.onClick=this.onClick.bind(this);this.updateAccordionItems=this.updateAccordionItems.bind(this);return this}enable(){if(this.accordionButtons.length>0){this.accordionButtons.forEach(button=>{button.addEventListener(d.CLICK,e=>this.onClick(e));});}if(this.accordionPanels.length>0){this.accordionPanels.forEach(panel=>{this.handleTabIndex(panel,"REMOVE");});}return this}onClick(e){this.updateAccordionItems(e.target);return this}updateAccordionItems(panelbutton){const panel=panelbutton.closest(".ilo--accordion--item").querySelector(".ilo--accordion--panel");const isopen=panel.classList.contains("ilo--accordion--panel__open");if(!this.multipleExpanded){this.accordionPanels.forEach(item=>{if(panel!==item){this.collapseSection(item);}});}if(!isopen){this.expandSection(panel);}else {this.collapseSection(panel);}panelbutton.blur();return this}collapseSection(element){element.classList.remove("ilo--accordion--panel__open");element.parentElement.querySelector(".ilo--accordion--button").setAttribute(t.EXPANDED,"false");element.setAttribute(t.HIDDEN,"true");this.handleTabIndex(element,"REMOVE");}expandSection(element){element.parentElement.querySelector(".ilo--accordion--button").setAttribute(t.EXPANDED,"true");element.setAttribute(t.HIDDEN,"false");element.classList.add("ilo--accordion--panel__open");this.handleTabIndex(element,"ADD");}handleTabIndex(element,mode){element.querySelectorAll(FOCUSABLE_SELECTORS.join(", ")).forEach(item=>{if(mode==="ADD"){item.removeAttribute("tabindex");return}item.setAttribute("tabindex","-1");});}}
+  const FOCUSABLE_SELECTORS=["a","button","input","select","textarea","[tabindex]:not([tabindex='-1'])"];class Accordion{constructor(element){this.element=element;this.multipleExpanded=false;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.accordionItems=this.element.querySelectorAll(".ilo--accordion--item");this.multipleExpanded=this.element.hasAttribute("data-multipleexpanded");this.accordionPanels=this.element.querySelectorAll(".ilo--accordion--panel");this.accordionButtons=this.element.querySelectorAll(".ilo--accordion--button");return this}setupHandlers(){this.collapseSection=this.collapseSection.bind(this);this.expandSection=this.expandSection.bind(this);this.onClick=this.onClick.bind(this);this.updateAccordionItems=this.updateAccordionItems.bind(this);return this}enable(){if(this.accordionButtons.length>0){this.accordionButtons.forEach(button=>{button.addEventListener("click",e=>this.onClick(e));});}if(this.accordionPanels.length>0){this.accordionPanels.forEach(panel=>{this.handleTabIndex(panel,"REMOVE");});}return this}onClick(e){this.updateAccordionItems(e.target);return this}updateAccordionItems(panelbutton){const panel=panelbutton.closest(".ilo--accordion--item").querySelector(".ilo--accordion--panel");const isopen=panel.classList.contains("ilo--accordion--panel__open");if(!this.multipleExpanded){this.accordionPanels.forEach(item=>{if(panel!==item){this.collapseSection(item);}});}if(!isopen){this.expandSection(panel);}else {this.collapseSection(panel);}panelbutton.blur();return this}collapseSection(element){element.classList.remove("ilo--accordion--panel__open");element.parentElement.querySelector(".ilo--accordion--button").setAttribute("aria-expanded","false");element.setAttribute("aria-hidden","true");this.handleTabIndex(element,"REMOVE");}expandSection(element){element.parentElement.querySelector(".ilo--accordion--button").setAttribute("aria-expanded","true");element.setAttribute("aria-hidden","false");element.classList.add("ilo--accordion--panel__open");this.handleTabIndex(element,"ADD");}handleTabIndex(element,mode){element.querySelectorAll(FOCUSABLE_SELECTORS.join(", ")).forEach(item=>{if(mode==="ADD"){item.removeAttribute("tabindex");return}item.setAttribute("tabindex","-1");});}}
 
   Drupal.behaviors.accordion={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Accordion"]`),element=>{if(!element.dataset.jsProcessed){new Accordion(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/audioplayer/audioplayer.behavior.js

@@ -0,0 +1,10 @@
+(function () {
+  'use strict';
+
+  class StatefulComponent{constructor(element,initialState={}){this.element=element;this.initialState=initialState;this.state=this.#setupState(this.initialState);this.stateHandlers=new Map;this.#init();}#init(){this.setupState=this.#setupState.bind(this);this.registerStateHandler=this.registerStateHandler.bind(this);}registerStateHandler(prop,handler){if(!this.stateHandlers.has(prop)){this.stateHandlers.set(prop,[]);}this.stateHandlers.get(prop).push(handler);}#setupState(initialState){if(initialState===void 0)initialState={};return new Proxy(initialState,{set:(target,prop,value)=>{if(value!==target[prop]){target[prop]=value;const handlers=this.stateHandlers.get(prop);if(handlers){handlers.forEach(handler=>handler(value,prop));}}return true}})}}
+
+  const getTimeString=time=>{const minutes=Math.floor(time/60).toString().padStart(2,"0");const seconds=Math.floor(time%60).toString().padStart(2,"0");return `${minutes}:${seconds}`};const getProgressPercentage=(currentTime,totalTime)=>{if(totalTime===0)return 0;return currentTime/totalTime*100};class AudioPlayer extends StatefulComponent{constructor(element){const initialState={currentTime:0,totalTime:0,playing:false,volume:1};super(element,initialState);this.prefix=this.element.dataset.prefix;this.init();}init(){this.cacheDomReferences().bindEventHandlers().registerStateHandlers();return this}cacheDomReferences(){this.audio=this.element.querySelector(`.${this.prefix}--audio-player--audio`);this.playButton=this.element.querySelector(`.${this.prefix}--audio-player--play-button`);this.skipBackwardButton=this.element.querySelector(`.${this.prefix}--audio-player--skip-backward`);this.skipForwardButton=this.element.querySelector(`.${this.prefix}--audio-player--skip-forward`);this.progressBar=this.element.querySelector(`.${this.prefix}--audio-player--progress-bar`);this.progressComplete=this.element.querySelector(`.${this.prefix}--audio-player--progress-complete`);this.volumeButton=this.element.querySelector(`.${this.prefix}--audio-player--volume-icon`);this.volumeSlider=this.element.querySelector(`.${this.prefix}--audio-player--volume-slider`);this.currentTimeDisplay=this.element.querySelector(`.${this.prefix}--audio-player--duration-played`);this.totalTimeDisplay=this.element.querySelector(`.${this.prefix}--audio-player--duration-total`);this.playIcon=this.element.querySelector(`.${this.prefix}--audio-player--play-icon`);return this}bindEventHandlers(){this.audio.addEventListener("loadedmetadata",()=>{this.state.totalTime=this.audio.duration;});this.audio.addEventListener("timeupdate",()=>{this.state.currentTime=this.audio.currentTime;});this.audio.addEventListener("play",()=>{this.state.playing=true;});this.audio.addEventListener("pause",()=>{this.state.playing=false;});this.audio.addEventListener("ended",()=>{this.state.playing=false;});this.playButton.addEventListener("click",()=>{this.state.playing=!this.state.playing;});this.skipBackwardButton.addEventListener("click",()=>{this.audio.currentTime=Math.max(this.audio.currentTime-15,0);});this.skipForwardButton.addEventListener("click",()=>{this.audio.currentTime=Math.min(this.audio.currentTime+15,this.state.totalTime);});this.volumeButton.addEventListener("click",()=>{if(this.state.volume===0){this.state.volume=1;}else {this.state.volume=0;}});this.volumeSlider.addEventListener("input",event=>{const newVolume=Number(event.target.value)/100;this.state.volume=newVolume;});this.progressBar.addEventListener("click",event=>{const rect=this.progressBar.getBoundingClientRect();const clickX=event.clientX-rect.left;const newTime=clickX/rect.width*this.state.totalTime;this.audio.currentTime=newTime;});return this}registerStateHandlers(){this.registerStateHandler("currentTime",currentTime=>{this.progressComplete.style.setProperty("--progress",`${getProgressPercentage(currentTime,this.state.totalTime)}%`);this.progressBar.setAttribute("aria-valuenow",Math.floor(currentTime));this.currentTimeDisplay.textContent=getTimeString(currentTime);});this.registerStateHandler("totalTime",totalTime=>{this.progressBar.setAttribute("aria-valuemax",Math.floor(totalTime));this.totalTimeDisplay.textContent=getTimeString(totalTime);});this.registerStateHandler("playing",playing=>{if(playing){this.audio.play();}else {this.audio.pause();}this.playButton.setAttribute("aria-label",playing?"Pause":"Play");});this.registerStateHandler("volume",volume=>{this.audio.volume=volume;this.volumeSlider.value=volume*100;this.volumeSlider.style.setProperty("--progress",`${volume*100}%`);this.volumeButton.setAttribute("aria-label",volume===0?"Unmute":"Mute");});return this}}
+
+  Drupal.behaviors.audioplayer={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="AudioPlayer"]`),element=>{if(!element.dataset.jsProcessed){new AudioPlayer(element);element.dataset.jsProcessed=true;}});}};
+
+})();

package/dist/components/audioplayer/audioplayer.component.yml

@@ -0,0 +1,34 @@
+audioplayer:
+  namespace: Components/Media
+  use: "@components/audioplayer/audioplayer.twig"
+  label: Audio Player
+  description: A component for playing audio files.
+  visibility: storybook
+  fields:
+    src:
+      type: string
+      label: Audio source
+      description: Path to the audio file
+      required: true
+      preview: "/audio/audio-example.mp3"
+    name:
+      type: string
+      label: Track name
+      description: The name of the audio track
+      required: true
+      preview: "Sample Track"
+    programme:
+      type: string
+      label: Programme
+      description: The name of the programme
+      required: true
+      preview: "Sample Programme"
+    creator:
+      type: string
+      label: Creator
+      description: The name of the creator
+      required: true
+      preview: "Sample Creator"
+  variants:
+    default:
+      label: Default

package/dist/components/audioplayer/audioplayer.twig

@@ -0,0 +1,103 @@
+{% set prefix = prefix|default('ilo') %}
+{% set base_class = 'ilo' ~ "--audio-player" %}
+
+<div class="{{base_class}}" data-loadcomponent="AudioPlayer" data-prefix="ilo">
+	<div 
+		role="progressbar"
+		tabindex="-1"
+		aria-valuenow="0"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		class="{{base_class}}--progress-bar"
+	>
+		<div
+			class="{{base_class}}--progress-complete"
+		>
+        </div>
+	</div>
+	<div class="{{base_class}}--body">
+		<div class="{{base_class}}--left">
+			<p class="{{base_class}}--track-name">{{ name }}</p>
+			<div class="{{base_class}}--track-details">
+				<span class="{{base_class}}--track-programme">{{ programme }}</span>
+				<span class="{{base_class}}--track-creator">{{ creator }}</span>
+			</div>
+		</div>
+		<div class="{{base_class}}--center">
+			<button
+				class="{{base_class}}--skip-button {{base_class}}--skip-backward"
+				aria-label="Rewind 15 seconds"
+			>
+				{% include "@components/icon/icon.twig" with {
+					name: "skip_backward15",
+					size: 24,
+					prefix: prefix
+				} only %}
+			</button>
+			<button
+				class="{{base_class}}--play-button"
+				aria-label="Play"
+			>
+				{% include "@components/icon/icon.twig" with {
+					name: "triangle_right",
+					size: 32,
+					class: base_class ~ "--play-icon",
+					prefix: prefix
+				} only %}
+				{% include "@components/icon/icon.twig" with {
+					name: "pause",
+					size: 32,
+					class: base_class ~ "--pause-icon",
+					prefix: prefix
+				} only %}
+			</button>
+			<button
+				class="{{base_class}}--skip-button {{base_class}}--skip-forward"
+				aria-label="Fast forward 15 seconds"
+			>
+				{% include "@components/icon/icon.twig" with {
+					name: "skip_forward15",
+					size: 24,
+					prefix: prefix
+				} only %}
+			</button>
+		</div>
+		<div class="{{base_class}}--right">
+			<div class="{{base_class}}--duration">
+				<p class="{{base_class}}--duration-played">00:00</p>
+				<p class="{{base_class}}--duration-total">00:00</p>
+			</div>
+			<div class="{{base_class}}--separator"></div>
+			<button
+				class="{{base_class}}--volume-icon"
+				aria-label="Mute"
+			>
+				{% include "@components/icon/icon.twig" with {
+					name: "sound_on",
+					size: 24,
+					prefix: prefix,
+					class: base_class ~ "--sound-on-icon",
+				} only %}
+				{% include "@components/icon/icon.twig" with {
+					name: "sound_off",
+					size: 24,
+					prefix: prefix,
+					class: base_class ~ "--sound-off-icon",
+				} only %}
+			</button>
+			<input
+				type="range"
+				class="{{base_class}}--volume-slider"
+				value="100"
+				min="0"
+				max="100"
+				step="10"
+			/>
+		</div>
+	</div>
+	<audio
+		class="{{base_class}}--audio"
+		src="{{ src }}"
+		preload="metadata"
+	></audio>
+</div>

package/dist/components/audioplayer/audioplayer.wingsuit.yml

@@ -0,0 +1,34 @@
+audioplayer:
+  namespace: Components/Media
+  use: "@components/audioplayer/audioplayer.twig"
+  label: Audio Player
+  description: A component for playing audio files.
+  visibility: storybook
+  fields:
+    src:
+      type: string
+      label: Audio source
+      description: Path to the audio file
+      required: true
+      preview: "/audio/audio-example.mp3"
+    name:
+      type: string
+      label: Track name
+      description: The name of the audio track
+      required: true
+      preview: "Sample Track"
+    programme:
+      type: string
+      label: Programme
+      description: The name of the programme
+      required: true
+      preview: "Sample Programme"
+    creator:
+      type: string
+      label: Creator
+      description: The name of the creator
+      required: true
+      preview: "Sample Creator"
+  variants:
+    default:
+      label: Default

package/dist/components/breadcrumb/breadcrumb.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  class Breadcrumb{constructor(element){this.element=element;this.prefix=this.element.dataset.prefix;this.init();}init(){this.cacheDomReferences().setupHandlers().enable().onResize();return this}cacheDomReferences(){this.breadcrumbsId=`${this.prefix}--breadcrumb--container`;this.contextAreaClass=`${this.prefix}--breadcrumb--context`;this.contextMenuItemsClass=`${this.prefix}--context-menu`;this.contextCollapseClass=`${this.contextAreaClass}__collapse`;this.contextButtonClass=`${this.contextAreaClass}--button`;this.contextMenuClass=`${this.contextAreaClass}--menu`;this.contextMenuVisibleClass=`${this.contextMenuClass}__visible`;this.breadcrumbs=this.element.querySelector(`#${this.breadcrumbsId}`);this.contextArea=this.element.querySelector(`.${this.contextAreaClass}`);this.contextMenu=this.element.querySelector(`.${this.contextMenuClass}`);this.contextButton=this.element.querySelector(`.${this.contextButtonClass}`);this.breadcrumbsLastLink=this.element.querySelector(`#${this.breadcrumbsId} > li:last-child a`);this.contextMenuItems=this.element.querySelector(`.${this.contextMenuItemsClass}`);this.contextMenuItemFirstLink=this.contextMenuItems.querySelector("li:first-child a");this.contextMenuItemLastLink=this.contextMenuItems.querySelector("li:last-child a");this.breadcrumbsWidth=this.breadcrumbs.offsetWidth;return this}setupHandlers(){this.onResize=this.onResize.bind(this);this.onClick=this.onClick.bind(this);this.contexMenuIsOpen=this.contexMenuIsOpen.bind(this);this.openContextMenu=this.openContextMenu.bind(this);this.closeContextMenu=this.closeContextMenu.bind(this);this.focusBreadcrumbsLastLink=this.focusBreadcrumbsLastLink.bind(this);this.focusContextMenuItemFirstLink=this.focusContextMenuItemFirstLink.bind(this);this.onKeydown=this.onKeydown.bind(this);return this}enable(){window.addEventListener(d.RESIZE,e=>this.onResize(e));if(this.contextButton){this.contextButton.addEventListener(d.CLICK,e=>this.onClick(e));this.element.addEventListener("keydown",e=>this.onKeydown(e));}return this}onClick(e){e.stopPropagation();if(this.contexMenuIsOpen()){this.closeContextMenu();}else {this.openContextMenu();window.addEventListener("click",this.closeContextMenu,{once:true});}return this}onResize(){if(this.contextArea&&this.breadcrumbsWidth){if(this.breadcrumbsWidth>=window.innerWidth/1.5){this.contextArea.classList.add(this.contextCollapseClass);}else {this.contextArea.classList.remove(this.contextCollapseClass);this.closeContextMenu();}}return this}onKeydown(e){if(e.shiftKey){if(e.key.toLowerCase()==="tab"){if(document.activeElement===this.contextMenuItemFirstLink){e.preventDefault();this.contextButton.focus();}}return this}if(e.key.toLowerCase()==="tab"){const contexMenuIsOpen=this.contexMenuIsOpen();if(contexMenuIsOpen){if(document.activeElement===this.contextButton){e.preventDefault();this.focusContextMenuItemFirstLink();return this}if(document.activeElement===this.contextMenuItemLastLink){e.preventDefault();this.focusBreadcrumbsLastLink();this.closeContextMenu();return this}}}return this}positionContextMenu(){const buttonRect=this.contextButton.getBoundingClientRect();const buttonCenterX=buttonRect.left+buttonRect.width/2;const contextMenuItemsWidth=this.contextMenuItems.offsetWidth;const navStart=buttonCenterX-contextMenuItemsWidth/2;const navTop=buttonRect.bottom+16;this.contextMenu.style.left=navStart+"px";this.contextMenu.style.top=navTop+"px";return this}openContextMenu(){this.contextMenu.classList.add(this.contextMenuVisibleClass);this.contextMenu.removeAttribute("hidden");this.contextButton.setAttribute("aria-expanded",true);this.positionContextMenu();return this}closeContextMenu(){this.contextMenu.classList.remove(this.contextMenuVisibleClass);this.contextMenu.setAttribute("hidden","hidden");this.contextButton.setAttribute("aria-expanded",false);}contexMenuIsOpen(){return this.contextMenu.classList.contains(this.contextMenuVisibleClass)}focusContextMenuItemFirstLink(){this.contextMenuItemFirstLink.focus();return this}focusBreadcrumbsLastLink(){this.breadcrumbsLastLink.focus();return this}}
+  class Breadcrumb{constructor(element){this.element=element;this.prefix=this.element.dataset.prefix;this.init();}init(){this.cacheDomReferences().setupHandlers().enable().onResize();return this}cacheDomReferences(){this.breadcrumbsId=`${this.prefix}--breadcrumb--container`;this.contextAreaClass=`${this.prefix}--breadcrumb--context`;this.contextMenuItemsClass=`${this.prefix}--context-menu`;this.contextCollapseClass=`${this.contextAreaClass}__collapse`;this.contextButtonClass=`${this.contextAreaClass}--button`;this.contextMenuClass=`${this.contextAreaClass}--menu`;this.contextMenuVisibleClass=`${this.contextMenuClass}__visible`;this.breadcrumbs=this.element.querySelector(`#${this.breadcrumbsId}`);this.contextArea=this.element.querySelector(`.${this.contextAreaClass}`);this.contextMenu=this.element.querySelector(`.${this.contextMenuClass}`);this.contextButton=this.element.querySelector(`.${this.contextButtonClass}`);this.breadcrumbsLastLink=this.element.querySelector(`#${this.breadcrumbsId} > li:last-child a`);this.contextMenuItems=this.element.querySelector(`.${this.contextMenuItemsClass}`);this.contextMenuItemFirstLink=this.contextMenuItems.querySelector("li:first-child a");this.contextMenuItemLastLink=this.contextMenuItems.querySelector("li:last-child a");this.breadcrumbsWidth=this.breadcrumbs.offsetWidth;return this}setupHandlers(){this.onResize=this.onResize.bind(this);this.onClick=this.onClick.bind(this);this.contexMenuIsOpen=this.contexMenuIsOpen.bind(this);this.openContextMenu=this.openContextMenu.bind(this);this.closeContextMenu=this.closeContextMenu.bind(this);this.focusBreadcrumbsLastLink=this.focusBreadcrumbsLastLink.bind(this);this.focusContextMenuItemFirstLink=this.focusContextMenuItemFirstLink.bind(this);this.onKeydown=this.onKeydown.bind(this);return this}enable(){window.addEventListener("resize",e=>this.onResize(e));if(this.contextButton){this.contextButton.addEventListener("click",e=>this.onClick(e));this.element.addEventListener("keydown",e=>this.onKeydown(e));}return this}onClick(e){e.stopPropagation();if(this.contexMenuIsOpen()){this.closeContextMenu();}else {this.openContextMenu();window.addEventListener("click",this.closeContextMenu,{once:true});}return this}onResize(){if(this.contextArea&&this.breadcrumbsWidth){if(this.breadcrumbsWidth>=window.innerWidth/1.5){this.contextArea.classList.add(this.contextCollapseClass);}else {this.contextArea.classList.remove(this.contextCollapseClass);this.closeContextMenu();}}return this}onKeydown(e){if(e.shiftKey){if(e.key.toLowerCase()==="tab"){if(document.activeElement===this.contextMenuItemFirstLink){e.preventDefault();this.contextButton.focus();}}return this}if(e.key.toLowerCase()==="tab"){const contexMenuIsOpen=this.contexMenuIsOpen();if(contexMenuIsOpen){if(document.activeElement===this.contextButton){e.preventDefault();this.focusContextMenuItemFirstLink();return this}if(document.activeElement===this.contextMenuItemLastLink){e.preventDefault();this.focusBreadcrumbsLastLink();this.closeContextMenu();return this}}}return this}positionContextMenu(){const buttonRect=this.contextButton.getBoundingClientRect();const buttonCenterX=buttonRect.left+buttonRect.width/2;const contextMenuItemsWidth=this.contextMenuItems.offsetWidth;const navStart=buttonCenterX-contextMenuItemsWidth/2;const navTop=buttonRect.bottom+16;this.contextMenu.style.left=navStart+"px";this.contextMenu.style.top=navTop+"px";return this}openContextMenu(){this.contextMenu.classList.add(this.contextMenuVisibleClass);this.contextMenu.removeAttribute("hidden");this.contextButton.setAttribute("aria-expanded",true);this.positionContextMenu();return this}closeContextMenu(){this.contextMenu.classList.remove(this.contextMenuVisibleClass);this.contextMenu.setAttribute("hidden","hidden");this.contextButton.setAttribute("aria-expanded",false);}contexMenuIsOpen(){return this.contextMenu.classList.contains(this.contextMenuVisibleClass)}focusContextMenuItemFirstLink(){this.contextMenuItemFirstLink.focus();return this}focusBreadcrumbsLastLink(){this.breadcrumbsLastLink.focus();return this}}
 
   Drupal.behaviors.breadcrumb={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Breadcrumb"]`),element=>{if(!element.dataset.jsProcessed){new Breadcrumb(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/callout/callout.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  class Callout{constructor(element){this.element=element;this.toggleLabel="";this.init();}init(){this.cacheDomReferences().setupHandlers().enable();if(!this.toggleOpen&&this.toggleCollapsible){this.calcHeight();}return this}cacheDomReferences(){this.toggle=this.element.querySelector(".ilo--callout--toggle");this.toggleOpen=this.element.classList.value.includes("callout--open");this.toggleCollapsible=this.element.classList.value.includes("callout--collapse");if(this.toggle){this.toggleLabel=this.toggle.querySelector(".ilo--callout--button-text");this.toggleLabelOpen=this.toggle.getAttribute("data-open");this.toggleLabelClosed=this.toggle.getAttribute("data-closed");}this.button=this.element.querySelector(".ilo--button");return this}setupHandlers(){this.onToggle=this.handleToggle.bind(this);this.onClick=this.handleClick.bind(this);return this}enable(){if(this.toggle){this.toggle.addEventListener(d.CLICK,this.onToggle);}if(this.button){this.button.addEventListener(d.CLICK,this.onClick);}return this}calcHeight(){this.header=this.element.querySelector('[class*="--header"]');this.height=this.header.offsetHeight;this.element.style.maxHeight=`${this.height+25}px`;return this}handleClick(){return this}handleToggle(e){e.preventDefault();this.toggleOpen=!this.toggleOpen;const label=this.toggleOpen?this.toggleLabelOpen:this.toggleLabelClosed;this.element.classList.toggle("ilo--callout__open");this.toggleLabel.innerText=label;return this}}
+  class Callout{constructor(element){this.element=element;this.toggleLabel="";this.init();}init(){this.cacheDomReferences().setupHandlers().enable();if(!this.toggleOpen&&this.toggleCollapsible){this.calcHeight();}return this}cacheDomReferences(){this.toggle=this.element.querySelector(".ilo--callout--toggle");this.toggleOpen=this.element.classList.value.includes("callout--open");this.toggleCollapsible=this.element.classList.value.includes("callout--collapse");if(this.toggle){this.toggleLabel=this.toggle.querySelector(".ilo--callout--button-text");this.toggleLabelOpen=this.toggle.getAttribute("data-open");this.toggleLabelClosed=this.toggle.getAttribute("data-closed");}this.button=this.element.querySelector(".ilo--button");return this}setupHandlers(){this.onToggle=this.handleToggle.bind(this);this.onClick=this.handleClick.bind(this);return this}enable(){if(this.toggle){this.toggle.addEventListener("click",this.onToggle);}if(this.button){this.button.addEventListener("click",this.onClick);}return this}calcHeight(){this.header=this.element.querySelector('[class*="--header"]');this.height=this.header.offsetHeight;this.element.style.maxHeight=`${this.height+25}px`;return this}handleClick(){return this}handleToggle(e){e.preventDefault();this.toggleOpen=!this.toggleOpen;const label=this.toggleOpen?this.toggleLabelOpen:this.toggleLabelClosed;this.element.classList.toggle("ilo--callout__open");this.toggleLabel.innerText=label;return this}}
 
   Drupal.behaviors.callout={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Callout"]`),element=>{if(!element.dataset.jsProcessed){new Callout(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/fileupload/fileupload.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  class FileUpload{constructor(element){this.element=element;this.prefix=this.element.dataset.prefix;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.container=this.element.parentElement.parentElement;this.formControl=this.container.parentElement;return this}setupHandlers(){this.onChange=this.onChange.bind(this);return this}enable(){this.element.addEventListener(d.CHANGE,e=>this.onChange(e));return this}formatBytes(bytes,decimals){if(decimals===void 0)decimals=2;if(!+bytes)return "0 Bytes";const k=1024;const dm=decimals<0?0:decimals;const sizes=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];const i=Math.floor(Math.log(bytes)/Math.log(k));return `${parseFloat((bytes/Math.pow(k,i)).toFixed(dm))} ${sizes[i]}`}onChange(){const fileListClass=`${this.prefix}--file-upload--list`;let fileList=this.formControl.querySelector(`.${fileListClass}`);if(fileList){fileList.remove();}fileList=document.createElement("ul");fileList.classList.add(fileListClass);this.formControl.appendChild(fileList);let files="";[...this.element.files].forEach(file=>{const fileSize=this.formatBytes(file.size);files+=this.template(file.name,fileSize);});fileList.innerHTML=files;return this}template(filename,filesize){return `<li class="ilo--file-upload--list-item">${filename} (${filesize})</li>`}}
+  class FileUpload{constructor(element){this.element=element;this.prefix=this.element.dataset.prefix;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.container=this.element.parentElement.parentElement;this.formControl=this.container.parentElement;return this}setupHandlers(){this.onChange=this.onChange.bind(this);return this}enable(){this.element.addEventListener("change",e=>this.onChange(e));return this}formatBytes(bytes,decimals){if(decimals===void 0)decimals=2;if(!+bytes)return "0 Bytes";const k=1024;const dm=decimals<0?0:decimals;const sizes=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];const i=Math.floor(Math.log(bytes)/Math.log(k));return `${parseFloat((bytes/Math.pow(k,i)).toFixed(dm))} ${sizes[i]}`}onChange(){const fileListClass=`${this.prefix}--file-upload--list`;let fileList=this.formControl.querySelector(`.${fileListClass}`);if(fileList){fileList.remove();}fileList=document.createElement("ul");fileList.classList.add(fileListClass);this.formControl.appendChild(fileList);let files="";[...this.element.files].forEach(file=>{const fileSize=this.formatBytes(file.size);files+=this.template(file.name,fileSize);});fileList.innerHTML=files;return this}template(filename,filesize){return `<li class="ilo--file-upload--list-item">${filename} (${filesize})</li>`}}
 
   Drupal.behaviors.fileupload={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="FileUpload"]`),element=>{new FileUpload(element);});}};