UNPKG

@ouds/web

Version:

OUDS Web is a Bootstrap based, Orange branded accessible and ergonomic components library.

1,539 lines (1,409 loc) 161 kB
/*! * OUDS Web v0.4.0 (https://web.unified-design-system.orange.com/) * Copyright 2015-2025 The OUDS Web Authors * Copyright 2015-2025 Orange * Licensed under MIT (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/ouds/main/LICENSE) * This a fork of Bootstrap : Initial license below * Bootstrap v0.4.0 (https://web.unified-design-system.orange.com/) * Copyright 2011-2025 The OUDS Web Authors (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/graphs/contributors) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ import * as Popper from '@popperjs/core'; (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory() : typeof define === 'function' && define.amd ? define(factory) : (factory()); }(undefined, (function () { /** * Applies the :focus-visible polyfill at the given scope. * A scope in this case is either the top-level Document or a Shadow Root. * * @param {(Document|ShadowRoot)} scope * @see https://github.com/WICG/focus-visible */ function applyFocusVisiblePolyfill(scope) { var hadKeyboardEvent = true; var hadFocusVisibleRecently = false; var hadFocusVisibleRecentlyTimeout = null; var inputTypesAllowlist = { text: true, search: true, url: true, tel: true, email: true, password: true, number: true, date: true, month: true, week: true, time: true, datetime: true, 'datetime-local': true }; /** * Helper function for legacy browsers and iframes which sometimes focus * elements like document, body, and non-interactive SVG. * @param {Element} el */ function isValidFocusTarget(el) { if ( el && el !== document && el.nodeName !== 'HTML' && el.nodeName !== 'BODY' && 'classList' in el && 'contains' in el.classList ) { return true; } return false; } /** * Computes whether the given element should automatically trigger the * `focus-visible` class being added, i.e. whether it should always match * `:focus-visible` when focused. * @param {Element} el * @return {boolean} */ function focusTriggersKeyboardModality(el) { var type = el.type; var tagName = el.tagName; if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) { return true; } if (tagName === 'TEXTAREA' && !el.readOnly) { return true; } if (el.isContentEditable) { return true; } return false; } /** * Add the `focus-visible` class to the given element if it was not added by * the author. * @param {Element} el */ function addFocusVisibleClass(el) { if (el.classList.contains('focus-visible')) { return; } el.classList.add('focus-visible'); el.setAttribute('data-focus-visible-added', ''); } /** * Remove the `focus-visible` class from the given element if it was not * originally added by the author. * @param {Element} el */ function removeFocusVisibleClass(el) { if (!el.hasAttribute('data-focus-visible-added')) { return; } el.classList.remove('focus-visible'); el.removeAttribute('data-focus-visible-added'); } /** * If the most recent user interaction was via the keyboard; * and the key press did not include a meta, alt/option, or control key; * then the modality is keyboard. Otherwise, the modality is not keyboard. * Apply `focus-visible` to any current active element and keep track * of our keyboard modality state with `hadKeyboardEvent`. * @param {KeyboardEvent} e */ function onKeyDown(e) { if (e.metaKey || e.altKey || e.ctrlKey) { return; } if (isValidFocusTarget(scope.activeElement)) { addFocusVisibleClass(scope.activeElement); } hadKeyboardEvent = true; } /** * If at any point a user clicks with a pointing device, ensure that we change * the modality away from keyboard. * This avoids the situation where a user presses a key on an already focused * element, and then clicks on a different element, focusing it with a * pointing device, while we still think we're in keyboard modality. * @param {Event} e */ function onPointerDown(e) { hadKeyboardEvent = false; } /** * On `focus`, add the `focus-visible` class to the target if: * - the target received focus as a result of keyboard navigation, or * - the event target is an element that will likely require interaction * via the keyboard (e.g. a text box) * @param {Event} e */ function onFocus(e) { // Prevent IE from focusing the document or HTML element. if (!isValidFocusTarget(e.target)) { return; } if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) { addFocusVisibleClass(e.target); } } /** * On `blur`, remove the `focus-visible` class from the target. * @param {Event} e */ function onBlur(e) { if (!isValidFocusTarget(e.target)) { return; } if ( e.target.classList.contains('focus-visible') || e.target.hasAttribute('data-focus-visible-added') ) { // To detect a tab/window switch, we look for a blur event followed // rapidly by a visibility change. // If we don't see a visibility change within 100ms, it's probably a // regular focus change. hadFocusVisibleRecently = true; window.clearTimeout(hadFocusVisibleRecentlyTimeout); hadFocusVisibleRecentlyTimeout = window.setTimeout(function() { hadFocusVisibleRecently = false; }, 100); removeFocusVisibleClass(e.target); } } /** * If the user changes tabs, keep track of whether or not the previously * focused element had .focus-visible. * @param {Event} e */ function onVisibilityChange(e) { if (document.visibilityState === 'hidden') { // If the tab becomes active again, the browser will handle calling focus // on the element (Safari actually calls it twice). // If this tab change caused a blur on an element with focus-visible, // re-apply the class when the user switches back to the tab. if (hadFocusVisibleRecently) { hadKeyboardEvent = true; } addInitialPointerMoveListeners(); } } /** * Add a group of listeners to detect usage of any pointing devices. * These listeners will be added when the polyfill first loads, and anytime * the window is blurred, so that they are active when the window regains * focus. */ function addInitialPointerMoveListeners() { document.addEventListener('mousemove', onInitialPointerMove); document.addEventListener('mousedown', onInitialPointerMove); document.addEventListener('mouseup', onInitialPointerMove); document.addEventListener('pointermove', onInitialPointerMove); document.addEventListener('pointerdown', onInitialPointerMove); document.addEventListener('pointerup', onInitialPointerMove); document.addEventListener('touchmove', onInitialPointerMove); document.addEventListener('touchstart', onInitialPointerMove); document.addEventListener('touchend', onInitialPointerMove); } function removeInitialPointerMoveListeners() { document.removeEventListener('mousemove', onInitialPointerMove); document.removeEventListener('mousedown', onInitialPointerMove); document.removeEventListener('mouseup', onInitialPointerMove); document.removeEventListener('pointermove', onInitialPointerMove); document.removeEventListener('pointerdown', onInitialPointerMove); document.removeEventListener('pointerup', onInitialPointerMove); document.removeEventListener('touchmove', onInitialPointerMove); document.removeEventListener('touchstart', onInitialPointerMove); document.removeEventListener('touchend', onInitialPointerMove); } /** * When the polfyill first loads, assume the user is in keyboard modality. * If any event is received from a pointing device (e.g. mouse, pointer, * touch), turn off keyboard modality. * This accounts for situations where focus enters the page from the URL bar. * @param {Event} e */ function onInitialPointerMove(e) { // Work around a Safari quirk that fires a mousemove on <html> whenever the // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯ if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') { return; } hadKeyboardEvent = false; removeInitialPointerMoveListeners(); } // For some kinds of state, we are interested in changes at the global scope // only. For example, global pointer input, global key presses and global // visibility change should affect the state at every scope: document.addEventListener('keydown', onKeyDown, true); document.addEventListener('mousedown', onPointerDown, true); document.addEventListener('pointerdown', onPointerDown, true); document.addEventListener('touchstart', onPointerDown, true); document.addEventListener('visibilitychange', onVisibilityChange, true); addInitialPointerMoveListeners(); // For focus and blur, we specifically care about state changes in the local // scope. This is because focus / blur events that originate from within a // shadow root are not re-dispatched from the host element if it was already // the active element in its own scope: scope.addEventListener('focus', onFocus, true); scope.addEventListener('blur', onBlur, true); // We detect that a node is a ShadowRoot by ensuring that it is a // DocumentFragment and also has a host property. This check covers native // implementation and polyfill implementation transparently. If we only cared // about the native implementation, we could just check if the scope was // an instance of a ShadowRoot. if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) { // Since a ShadowRoot is a special kind of DocumentFragment, it does not // have a root element to add a class to. So, we add this attribute to the // host element instead: scope.host.setAttribute('data-js-focus-visible', ''); } else if (scope.nodeType === Node.DOCUMENT_NODE) { document.documentElement.classList.add('js-focus-visible'); document.documentElement.setAttribute('data-js-focus-visible', ''); } } // It is important to wrap all references to global window and document in // these checks to support server-side rendering use cases // @see https://github.com/WICG/focus-visible/issues/199 if (typeof window !== 'undefined' && typeof document !== 'undefined') { // Make the polyfill helper globally available. This can be used as a signal // to interested libraries that wish to coordinate with the polyfill for e.g., // applying the polyfill to a shadow root: window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill; // Notify interested libraries of the polyfill's presence, in case the // polyfill was loaded lazily: var event; try { event = new CustomEvent('focus-visible-polyfill-ready'); } catch (error) { // IE11 does not support using CustomEvent as a constructor directly: event = document.createEvent('CustomEvent'); event.initCustomEvent('focus-visible-polyfill-ready', false, false, {}); } window.dispatchEvent(event); } if (typeof document !== 'undefined') { // Apply the polyfill to the global document, so that no JavaScript // coordination is required to use the polyfill in the top-level document: applyFocusVisiblePolyfill(document); } }))); /** * -------------------------------------------------------------------------- * Bootstrap dom/data.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const elementMap = new Map(); const Data = { set(element, key, instance) { if (!elementMap.has(element)) { elementMap.set(element, new Map()); } const instanceMap = elementMap.get(element); // make it clear we only want one instance per element // can be removed later when multiple key/instances are fine to be used if (!instanceMap.has(key) && instanceMap.size !== 0) { // eslint-disable-next-line no-console console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`); return; } instanceMap.set(key, instance); }, get(element, key) { if (elementMap.has(element)) { return elementMap.get(element).get(key) || null; } return null; }, remove(element, key) { if (!elementMap.has(element)) { return; } const instanceMap = elementMap.get(element); instanceMap.delete(key); // free up element references if there are no instances left for an element if (instanceMap.size === 0) { elementMap.delete(element); } } }; /** * -------------------------------------------------------------------------- * Bootstrap util/index.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ const MAX_UID = 1000000; const MILLISECONDS_MULTIPLIER = 1000; const TRANSITION_END = 'transitionend'; /** * Properly escape IDs selectors to handle weird IDs * @param {string} selector * @returns {string} */ const parseSelector = selector => { if (selector && window.CSS && window.CSS.escape) { // document.querySelector needs escaping to handle IDs (html5+) containing for instance / selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`); } return selector; }; // Shout-out AngusCroll (https://goo.gl/pxwQGp) const toType = object => { if (object === null || object === undefined) { return `${object}`; } return Object.prototype.toString.call(object).match(/\s([a-z]+)/i)[1].toLowerCase(); }; /** * Public Util API */ const getUID = prefix => { do { prefix += Math.floor(Math.random() * MAX_UID); } while (document.getElementById(prefix)); return prefix; }; const getTransitionDurationFromElement = element => { if (!element) { return 0; } // Get transition-duration of the element let { transitionDuration, transitionDelay } = window.getComputedStyle(element); const floatTransitionDuration = Number.parseFloat(transitionDuration); const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found if (!floatTransitionDuration && !floatTransitionDelay) { return 0; } // If multiple durations are defined, take the first transitionDuration = transitionDuration.split(',')[0]; transitionDelay = transitionDelay.split(',')[0]; return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER; }; const triggerTransitionEnd = element => { element.dispatchEvent(new Event(TRANSITION_END)); }; const isElement = object => { if (!object || typeof object !== 'object') { return false; } if (typeof object.jquery !== 'undefined') { object = object[0]; } return typeof object.nodeType !== 'undefined'; }; const getElement = object => { // it's a jQuery object or a node element if (isElement(object)) { return object.jquery ? object[0] : object; } if (typeof object === 'string' && object.length > 0) { return document.querySelector(parseSelector(object)); } return null; }; const isVisible = element => { if (!isElement(element) || element.getClientRects().length === 0) { return false; } const elementIsVisible = getComputedStyle(element).getPropertyValue('visibility') === 'visible'; // Handle `details` element as its content may falsie appear visible when it is closed const closedDetails = element.closest('details:not([open])'); if (!closedDetails) { return elementIsVisible; } if (closedDetails !== element) { const summary = element.closest('summary'); if (summary && summary.parentNode !== closedDetails) { return false; } if (summary === null) { return false; } } return elementIsVisible; }; const isDisabled = element => { if (!element || element.nodeType !== Node.ELEMENT_NODE) { return true; } if (element.classList.contains('disabled')) { return true; } if (typeof element.disabled !== 'undefined') { return element.disabled; } return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'; }; const findShadowRoot = element => { if (!document.documentElement.attachShadow) { return null; } // Can find the shadow root otherwise it'll return the document if (typeof element.getRootNode === 'function') { const root = element.getRootNode(); return root instanceof ShadowRoot ? root : null; } if (element instanceof ShadowRoot) { return element; } // when we don't find a shadow root if (!element.parentNode) { return null; } return findShadowRoot(element.parentNode); }; const noop = () => {}; /** * Trick to restart an element's animation * * @param {HTMLElement} element * @return void * * @see https://www.harrytheo.com/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation */ const reflow = element => { element.offsetHeight; // eslint-disable-line no-unused-expressions }; const getjQuery = () => { if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return window.jQuery; } return null; }; const DOMContentLoadedCallbacks = []; const onDOMContentLoaded = callback => { if (document.readyState === 'loading') { // add listener on the first call when the document is in loading state if (!DOMContentLoadedCallbacks.length) { document.addEventListener('DOMContentLoaded', () => { for (const callback of DOMContentLoadedCallbacks) { callback(); } }); } DOMContentLoadedCallbacks.push(callback); } else { callback(); } }; const isRTL = () => document.documentElement.dir === 'rtl'; const defineJQueryPlugin = plugin => { onDOMContentLoaded(() => { const $ = getjQuery(); /* istanbul ignore if */ if ($) { const name = plugin.NAME; const JQUERY_NO_CONFLICT = $.fn[name]; $.fn[name] = plugin.jQueryInterface; $.fn[name].Constructor = plugin; $.fn[name].noConflict = () => { $.fn[name] = JQUERY_NO_CONFLICT; return plugin.jQueryInterface; }; } }); }; const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => { return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue; }; const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => { if (!waitForTransition) { execute(callback); return; } const durationPadding = 5; const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding; let called = false; const handler = ({ target }) => { if (target !== transitionElement) { return; } called = true; transitionElement.removeEventListener(TRANSITION_END, handler); execute(callback); }; transitionElement.addEventListener(TRANSITION_END, handler); setTimeout(() => { if (!called) { triggerTransitionEnd(transitionElement); } }, emulatedDuration); }; /** * Return the previous/next element of a list. * * @param {array} list The list of elements * @param activeElement The active element * @param shouldGetNext Choose to get next or previous element * @param isCycleAllowed * @return {Element|elem} The proper element */ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => { const listLength = list.length; let index = list.indexOf(activeElement); // if the element does not exist in the list return an element // depending on the direction and if cycle is allowed if (index === -1) { return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]; } index += shouldGetNext ? 1 : -1; if (isCycleAllowed) { index = (index + listLength) % listLength; } return list[Math.max(0, Math.min(index, listLength - 1))]; }; /** * -------------------------------------------------------------------------- * Bootstrap dom/event-handler.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const namespaceRegex = /[^.]*(?=\..*)\.|.*/; const stripNameRegex = /\..*/; const stripUidRegex = /::\d+$/; const eventRegistry = {}; // Events storage let uidEvent = 1; const customEvents = { mouseenter: 'mouseover', mouseleave: 'mouseout' }; const nativeEvents = new Set(['click', 'dblclick', 'mouseup', 'mousedown', 'contextmenu', 'mousewheel', 'DOMMouseScroll', 'mouseover', 'mouseout', 'mousemove', 'selectstart', 'selectend', 'keydown', 'keypress', 'keyup', 'orientationchange', 'touchstart', 'touchmove', 'touchend', 'touchcancel', 'pointerdown', 'pointermove', 'pointerup', 'pointerleave', 'pointercancel', 'gesturestart', 'gesturechange', 'gestureend', 'focus', 'blur', 'change', 'reset', 'select', 'submit', 'focusin', 'focusout', 'load', 'unload', 'beforeunload', 'resize', 'move', 'DOMContentLoaded', 'readystatechange', 'error', 'abort', 'scroll']); /** * Private methods */ function makeEventUid(element, uid) { return uid && `${uid}::${uidEvent++}` || element.uidEvent || uidEvent++; } function getElementEvents(element) { const uid = makeEventUid(element); element.uidEvent = uid; eventRegistry[uid] = eventRegistry[uid] || {}; return eventRegistry[uid]; } function bootstrapHandler(element, fn) { return function handler(event) { hydrateObj(event, { delegateTarget: element }); if (handler.oneOff) { EventHandler.off(element, event.type, fn); } return fn.apply(element, [event]); }; } function bootstrapDelegationHandler(element, selector, fn) { return function handler(event) { const domElements = element.querySelectorAll(selector); for (let { target } = event; target && target !== this; target = target.parentNode) { for (const domElement of domElements) { if (domElement !== target) { continue; } hydrateObj(event, { delegateTarget: target }); if (handler.oneOff) { EventHandler.off(element, event.type, selector, fn); } return fn.apply(target, [event]); } } }; } function findHandler(events, callable, delegationSelector = null) { return Object.values(events).find(event => event.callable === callable && event.delegationSelector === delegationSelector); } function normalizeParameters(originalTypeEvent, handler, delegationFunction) { const isDelegated = typeof handler === 'string'; // TODO: tooltip passes `false` instead of selector, so we need to check const callable = isDelegated ? delegationFunction : handler || delegationFunction; let typeEvent = getTypeEvent(originalTypeEvent); if (!nativeEvents.has(typeEvent)) { typeEvent = originalTypeEvent; } return [isDelegated, callable, typeEvent]; } function addHandler(element, originalTypeEvent, handler, delegationFunction, oneOff) { if (typeof originalTypeEvent !== 'string' || !element) { return; } let [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction); // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position // this prevents the handler from being dispatched the same way as mouseover or mouseout does if (originalTypeEvent in customEvents) { const wrapFunction = fn => { return function (event) { if (!event.relatedTarget || event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget)) { return fn.call(this, event); } }; }; callable = wrapFunction(callable); } const events = getElementEvents(element); const handlers = events[typeEvent] || (events[typeEvent] = {}); const previousFunction = findHandler(handlers, callable, isDelegated ? handler : null); if (previousFunction) { previousFunction.oneOff = previousFunction.oneOff && oneOff; return; } const uid = makeEventUid(callable, originalTypeEvent.replace(namespaceRegex, '')); const fn = isDelegated ? bootstrapDelegationHandler(element, handler, callable) : bootstrapHandler(element, callable); fn.delegationSelector = isDelegated ? handler : null; fn.callable = callable; fn.oneOff = oneOff; fn.uidEvent = uid; handlers[uid] = fn; element.addEventListener(typeEvent, fn, isDelegated); } function removeHandler(element, events, typeEvent, handler, delegationSelector) { const fn = findHandler(events[typeEvent], handler, delegationSelector); if (!fn) { return; } element.removeEventListener(typeEvent, fn, Boolean(delegationSelector)); delete events[typeEvent][fn.uidEvent]; } function removeNamespacedHandlers(element, events, typeEvent, namespace) { const storeElementEvent = events[typeEvent] || {}; for (const [handlerKey, event] of Object.entries(storeElementEvent)) { if (handlerKey.includes(namespace)) { removeHandler(element, events, typeEvent, event.callable, event.delegationSelector); } } } function getTypeEvent(event) { // allow to get the native events from namespaced events ('click.bs.button' --> 'click') event = event.replace(stripNameRegex, ''); return customEvents[event] || event; } const EventHandler = { on(element, event, handler, delegationFunction) { addHandler(element, event, handler, delegationFunction, false); }, one(element, event, handler, delegationFunction) { addHandler(element, event, handler, delegationFunction, true); }, off(element, originalTypeEvent, handler, delegationFunction) { if (typeof originalTypeEvent !== 'string' || !element) { return; } const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction); const inNamespace = typeEvent !== originalTypeEvent; const events = getElementEvents(element); const storeElementEvent = events[typeEvent] || {}; const isNamespace = originalTypeEvent.startsWith('.'); if (typeof callable !== 'undefined') { // Simplest case: handler is passed, remove that listener ONLY. if (!Object.keys(storeElementEvent).length) { return; } removeHandler(element, events, typeEvent, callable, isDelegated ? handler : null); return; } if (isNamespace) { for (const elementEvent of Object.keys(events)) { removeNamespacedHandlers(element, events, elementEvent, originalTypeEvent.slice(1)); } } for (const [keyHandlers, event] of Object.entries(storeElementEvent)) { const handlerKey = keyHandlers.replace(stripUidRegex, ''); if (!inNamespace || originalTypeEvent.includes(handlerKey)) { removeHandler(element, events, typeEvent, event.callable, event.delegationSelector); } } }, trigger(element, event, args) { if (typeof event !== 'string' || !element) { return null; } const $ = getjQuery(); const typeEvent = getTypeEvent(event); const inNamespace = event !== typeEvent; let jQueryEvent = null; let bubbles = true; let nativeDispatch = true; let defaultPrevented = false; if (inNamespace && $) { jQueryEvent = $.Event(event, args); $(element).trigger(jQueryEvent); bubbles = !jQueryEvent.isPropagationStopped(); nativeDispatch = !jQueryEvent.isImmediatePropagationStopped(); defaultPrevented = jQueryEvent.isDefaultPrevented(); } const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args); if (defaultPrevented) { evt.preventDefault(); } if (nativeDispatch) { element.dispatchEvent(evt); } if (evt.defaultPrevented && jQueryEvent) { jQueryEvent.preventDefault(); } return evt; } }; function hydrateObj(obj, meta = {}) { for (const [key, value] of Object.entries(meta)) { try { obj[key] = value; } catch (_unused) { Object.defineProperty(obj, key, { configurable: true, get() { return value; } }); } } return obj; } /** * -------------------------------------------------------------------------- * Bootstrap dom/manipulator.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ function normalizeData(value) { if (value === 'true') { return true; } if (value === 'false') { return false; } if (value === Number(value).toString()) { return Number(value); } if (value === '' || value === 'null') { return null; } if (typeof value !== 'string') { return value; } try { return JSON.parse(decodeURIComponent(value)); } catch (_unused) { return value; } } function normalizeDataKey(key) { return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`); } const Manipulator = { setDataAttribute(element, key, value) { element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value); }, removeDataAttribute(element, key) { element.removeAttribute(`data-bs-${normalizeDataKey(key)}`); }, getDataAttributes(element) { if (!element) { return {}; } const attributes = {}; const bsKeys = Object.keys(element.dataset).filter(key => key.startsWith('bs') && !key.startsWith('bsConfig')); for (const key of bsKeys) { let pureKey = key.replace(/^bs/, ''); pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length); attributes[pureKey] = normalizeData(element.dataset[key]); } return attributes; }, getDataAttribute(element, key) { return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`)); } }; /** * -------------------------------------------------------------------------- * Bootstrap util/config.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Class definition */ class Config { // Getters static get Default() { return {}; } static get DefaultType() { return {}; } static get NAME() { throw new Error('You have to implement the static method "NAME", for each component!'); } _getConfig(config) { config = this._mergeConfigObj(config); config = this._configAfterMerge(config); this._typeCheckConfig(config); return config; } _configAfterMerge(config) { return config; } _mergeConfigObj(config, element) { const jsonConfig = isElement(element) ? Manipulator.getDataAttribute(element, 'config') : {}; // try to parse return { ...this.constructor.Default, ...(typeof jsonConfig === 'object' ? jsonConfig : {}), ...(isElement(element) ? Manipulator.getDataAttributes(element) : {}), ...(typeof config === 'object' ? config : {}) }; } _typeCheckConfig(config, configTypes = this.constructor.DefaultType) { for (const [property, expectedTypes] of Object.entries(configTypes)) { const value = config[property]; const valueType = isElement(value) ? 'element' : toType(value); if (!new RegExp(expectedTypes).test(valueType)) { throw new TypeError(`${this.constructor.NAME.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`); } } } } /** * -------------------------------------------------------------------------- * Bootstrap base-component.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const VERSION = '0.4.0'; /** * Class definition */ class BaseComponent extends Config { constructor(element, config) { super(); element = getElement(element); if (!element) { return; } this._element = element; this._config = this._getConfig(config); Data.set(this._element, this.constructor.DATA_KEY, this); } // Public dispose() { Data.remove(this._element, this.constructor.DATA_KEY); EventHandler.off(this._element, this.constructor.EVENT_KEY); for (const propertyName of Object.getOwnPropertyNames(this)) { this[propertyName] = null; } } _queueCallback(callback, element, isAnimated = true) { executeAfterTransition(callback, element, isAnimated); } _getConfig(config) { config = this._mergeConfigObj(config, this._element); config = this._configAfterMerge(config); this._typeCheckConfig(config); return config; } // Static static getInstance(element) { return Data.get(getElement(element), this.DATA_KEY); } static getOrCreateInstance(element, config = {}) { return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null); } static get VERSION() { return VERSION; } static get DATA_KEY() { return `bs.${this.NAME}`; } static get EVENT_KEY() { return `.${this.DATA_KEY}`; } static eventName(name) { return `${name}${this.EVENT_KEY}`; } } /** * -------------------------------------------------------------------------- * Bootstrap dom/selector-engine.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ const getSelector = element => { let selector = element.getAttribute('data-bs-target'); if (!selector || selector === '#') { let hrefAttribute = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes, // so everything starting with `#` or `.`. If a "real" URL is used as the selector, // `document.querySelector` will rightfully complain it is invalid. // See https://github.com/twbs/bootstrap/issues/32273 if (!hrefAttribute || !hrefAttribute.includes('#') && !hrefAttribute.startsWith('.')) { return null; } // Just in case some CMS puts out a full URL with the anchor appended if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) { hrefAttribute = `#${hrefAttribute.split('#')[1]}`; } selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null; } return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null; }; const SelectorEngine = { find(selector, element = document.documentElement) { return [].concat(...Element.prototype.querySelectorAll.call(element, selector)); }, findOne(selector, element = document.documentElement) { return Element.prototype.querySelector.call(element, selector); }, children(element, selector) { return [].concat(...element.children).filter(child => child.matches(selector)); }, parents(element, selector) { const parents = []; let ancestor = element.parentNode.closest(selector); while (ancestor) { parents.push(ancestor); ancestor = ancestor.parentNode.closest(selector); } return parents; }, prev(element, selector) { let previous = element.previousElementSibling; while (previous) { if (previous.matches(selector)) { return [previous]; } previous = previous.previousElementSibling; } return []; }, // TODO: this is now unused; remove later along with prev() next(element, selector) { let next = element.nextElementSibling; while (next) { if (next.matches(selector)) { return [next]; } next = next.nextElementSibling; } return []; }, focusableChildren(element) { const focusables = ['a', 'button', 'input', 'textarea', 'select', 'details', '[tabindex]', '[contenteditable="true"]'].map(selector => `${selector}:not([tabindex^="-"])`).join(','); return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el)); }, getSelectorFromElement(element) { const selector = getSelector(element); if (selector) { return SelectorEngine.findOne(selector) ? selector : null; } return null; }, getElementFromSelector(element) { const selector = getSelector(element); return selector ? SelectorEngine.findOne(selector) : null; }, getMultipleElementsFromSelector(element) { const selector = getSelector(element); return selector ? SelectorEngine.find(selector) : []; } }; /** * -------------------------------------------------------------------------- * Bootstrap util/component-functions.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ const enableDismissTrigger = (component, method = 'hide') => { const clickEvent = `click.dismiss${component.EVENT_KEY}`; const name = component.NAME; EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) { if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); } if (isDisabled(this)) { return; } const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`); const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method instance[method](); }); }; /** * -------------------------------------------------------------------------- * Bootstrap alert.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const NAME$h = 'alert'; const DATA_KEY$c = 'bs.alert'; const EVENT_KEY$d = `.${DATA_KEY$c}`; const EVENT_CLOSE = `close${EVENT_KEY$d}`; const EVENT_CLOSED = `closed${EVENT_KEY$d}`; const CLASS_NAME_FADE$5 = 'fade'; const CLASS_NAME_SHOW$8 = 'show'; /** * Class definition */ class Alert extends BaseComponent { // Getters static get NAME() { return NAME$h; } // Public close() { const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE); if (closeEvent.defaultPrevented) { return; } this._element.classList.remove(CLASS_NAME_SHOW$8); const isAnimated = this._element.classList.contains(CLASS_NAME_FADE$5); this._queueCallback(() => this._destroyElement(), this._element, isAnimated); } // Private _destroyElement() { this._element.remove(); EventHandler.trigger(this._element, EVENT_CLOSED); this.dispose(); } // Static static jQueryInterface(config) { return this.each(function () { const data = Alert.getOrCreateInstance(this); if (typeof config !== 'string') { return; } if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { throw new TypeError(`No method named "${config}"`); } data[config](this); }); } } /** * Data API implementation */ enableDismissTrigger(Alert, 'close'); /** * jQuery */ defineJQueryPlugin(Alert); /** * -------------------------------------------------------------------------- * Bootstrap button.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const NAME$g = 'button'; const DATA_KEY$b = 'bs.button'; const EVENT_KEY$c = `.${DATA_KEY$b}`; const DATA_API_KEY$8 = '.data-api'; const CLASS_NAME_ACTIVE$3 = 'active'; const SELECTOR_DATA_TOGGLE$5 = '[data-bs-toggle="button"]'; const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$c}${DATA_API_KEY$8}`; /** * Class definition */ class Button extends BaseComponent { // Getters static get NAME() { return NAME$g; } // Public toggle() { // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE$3)); } // Static static jQueryInterface(config) { return this.each(function () { const data = Button.getOrCreateInstance(this); if (config === 'toggle') { data[config](); } }); } } /** * Data API implementation */ EventHandler.on(document, EVENT_CLICK_DATA_API$7, SELECTOR_DATA_TOGGLE$5, event => { event.preventDefault(); const button = event.target.closest(SELECTOR_DATA_TOGGLE$5); const data = Button.getOrCreateInstance(button); data.toggle(); }); /** * jQuery */ defineJQueryPlugin(Button); /** * -------------------------------------------------------------------------- * Bootstrap util/swipe.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const NAME$f = 'swipe'; const EVENT_KEY$b = '.bs.swipe'; const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$b}`; const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$b}`; const EVENT_TOUCHEND = `touchend${EVENT_KEY$b}`; const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$b}`; const EVENT_POINTERUP = `pointerup${EVENT_KEY$b}`; const POINTER_TYPE_TOUCH = 'touch'; const POINTER_TYPE_PEN = 'pen'; const CLASS_NAME_POINTER_EVENT = 'pointer-event'; const SWIPE_THRESHOLD = 40; const Default$c = { endCallback: null, leftCallback: null, rightCallback: null }; const DefaultType$c = { endCallback: '(function|null)', leftCallback: '(function|null)', rightCallback: '(function|null)' }; /** * Class definition */ class Swipe extends Config { constructor(element, config) { super(); this._element = element; if (!element || !Swipe.isSupported()) { return; } this._config = this._getConfig(config); this._deltaX = 0; this._supportPointerEvents = Boolean(window.PointerEvent); this._initEvents(); } // Getters static get Default() { return Default$c; } static get DefaultType() { return DefaultType$c; } static get NAME() { return NAME$f; } // Public dispose() { EventHandler.off(this._element, EVENT_KEY$b); } // Private _start(event) { if (!this._supportPointerEvents) { this._deltaX = event.touches[0].clientX; return; } if (this._eventIsPointerPenTouch(event)) { this._deltaX = event.clientX; } } _end(event) { if (this._eventIsPointerPenTouch(event)) { this._deltaX = event.clientX - this._deltaX; } this._handleSwipe(); execute(this._config.endCallback); } _move(event) { this._deltaX = event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this._deltaX; } _handleSwipe() { const absDeltaX = Math.abs(this._deltaX); if (absDeltaX <= SWIPE_THRESHOLD) { return; } const direction = absDeltaX / this._deltaX; this._deltaX = 0; if (!direction) { return; } execute(direction > 0 ? this._config.rightCallback : this._config.leftCallback); } _initEvents() { if (this._supportPointerEvents) { EventHandler.on(this._element, EVENT_POINTERDOWN, event => this._start(event)); EventHandler.on(this._element, EVENT_POINTERUP, event => this._end(event)); this._element.classList.add(CLASS_NAME_POINTER_EVENT); } else { EventHandler.on(this._element, EVENT_TOUCHSTART, event => this._start(event)); EventHandler.on(this._element, EVENT_TOUCHMOVE, event => this._move(event)); EventHandler.on(this._element, EVENT_TOUCHEND, event => this._end(event)); } } _eventIsPointerPenTouch(event) { return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH); } // Static static isSupported() { return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0; } } /** * -------------------------------------------------------------------------- * Bootstrap carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Constants */ const NAME$e = 'carousel'; const DATA_KEY$a = 'bs.carousel'; const EVENT_KEY$a = `.${DATA_KEY$a}`; const DATA_API_KEY$7 = '.data-api'; const ARROW_LEFT_KEY$1 = 'ArrowLeft'; const ARROW_RIGHT_KEY$1 = 'ArrowRight'; const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch const ORDER_NEXT = 'next'; const ORDER_PREV = 'prev'; const DIRECTION_LEFT = 'left'; const DIRECTION_RIGHT = 'right'; const EVENT_SLIDE = `slide${EVENT_KEY$a}`; const EVENT_SLID = `slid${EVENT_KEY$a}`; const EVENT_KEYDOWN$1 = `keydown${EVENT_KEY$a}`; const EVENT_MOUSEENTER$1 = `mouseenter${EVENT_KEY$a}`; const EVENT_MOUSELEAVE$1 = `mouseleave${EVENT_KEY$a}`; const EVENT_DRAG_START = `dragstart${EVENT_KEY$a}`; const EVENT_LOAD_DATA_API$5 = `load${EVENT_KEY$a}${DATA_API_KEY$7}`; const EVENT_CLICK_DATA_API$6 = `click${EVENT_KEY$a}${DATA_API_KEY$7}`; const CLASS_NAME_CAROUSEL = 'carousel'; const CLASS_NAME_ACTIVE$2 = 'active'; const CLASS_NAME_SLIDE = 'slide'; const CLASS_NAME_END = 'carousel-item-end'; const CLASS_NAME_START = 'carousel-item-start'; const CLASS_NAME_NEXT = 'carousel-item-next'; const CLASS_NAME_PREV = 'carousel-item-prev'; const CLASS_NAME_PAUSED = 'is-paused'; // OUDS mod: used for progress indicators const CLASS_NAME_DONE = 'is-done'; // OUDS mod: used for progress indicators const CLASS_NAME_PAUSE = 'pause'; // OUDS mod: used for pause button const CLASS_NAME_PLAY = 'play'; // OUDS mod: used for play button const SELECTOR_ACTIVE = '.active'; const SELECTOR_ITEM = '.carousel-item'; const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM; const SELECTOR_ITEM_IMG = '.carousel-item img'; const SELECTOR_INDICATORS = '.carousel-indicators'; const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'; const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'; const SELECTOR_CONTROL_PREV = '.carousel-control-prev'; // OUDS mod const SELECTOR_CONTROL_NEXT = '.carousel-control-next'; // OUDS mod const SELECTOR_CONTROL_PAUSE = '.carousel-control-play-pause'; // OUDS mod const SELECTOR_CAROUSEL_TO_PAUSE = 'data-bs-target'; // OUDS mod const SELECTOR_CAROUSEL_PLAY_TEXT = 'data-bs-play-text'; // OUDS mod const SELECTOR_CAROUSEL_PAUSE_TEXT = 'data-bs-pause-text'; // OUDS mod const SELECTOR_CAROUSEL_DEFAULT_PLAY_TEXT = 'Play Carousel'; // OUDS mod const SELECTOR_CAROUSEL_DEFAULT_PAUSE_TEXT = 'Pause Carousel'; // OUDS mod const PREFIX_CUSTOM_PROPS = 'bs-'; // OUDS mod: should match `$prefix` in scss/_variables.scss const KEY_TO_DIRECTION = { [ARROW_LEFT_KEY$1]: DIRECTION_RIGHT, [ARROW_RIGHT_KEY$1]: DIRECTION_LEFT }; const Default$b = { interval: 5000, keyboard: true, pause: 'hover', ride: false, touch: true, wrap: true }; const DefaultType$b = { interval: '(number|boolean)', // TODO:v6 remove boolean support keyboard: 'boolean', pause: '(string|boolean)', ride: '(boolean|string)', touch: 'boolean', wrap: 'boolean' }; /** * Class definition */ class Carousel extends BaseComponent { constructor(element, config) { super(element, config); this._interval = null; this._activeElement = null; this._isSliding = false; this.touchTimeout = null; this._swipeHelper = null; this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element); this._playPauseButton = SelectorEngine.findOne(`${SELECTOR_CONTROL_PAUSE}[${SELECTOR_CAROUSEL_TO_PAUSE}="#${this._element.id}"]`); // OUDS mod this._addEventListeners(); if (this._config.ride === CLASS_NAME_CAROUSEL) { this.cycle(); } else if (this._indicatorsElement) { // OUDS mod: set the animation properly on progress indicator this._element.classList.add(CLASS_NAME_PAUSED); } // End mod } // Getters static get Default() { return Default$b; } static get DefaultType() { return DefaultType$b; } static get NAME() { return NAME$e; } // Public next() { this._slide(ORDER_NEXT); } nextWhenVisible() { // FIXME TODO use `document.visibilityState` // Don't call next when the page isn't visible // or the carousel or its parent isn't visible if (!document.hidden && isVisible(this._element)) { this.next(); } } prev() { this._slide(ORDER_PREV); } pause() { // OUDS mod: reset the animation on progress indicator if (this._indicatorsElement) { this._element.classList.add(CLASS_NAME_PAUSED); } // End mod // OUDS mod: if a play-pause button is present, set the button to play if (this._playPauseButton !== null && this._playPauseButton.classList.contains(CLASS_NAME_PAUSE)) { this._playPauseButton.classList.remove(CLASS_NAME_PAUSE); this._playPauseButton.classList.add(CLASS_NAME_PLAY); if (this._playPauseButton.getAttribute(SELECTOR_C