@openeuropa/bcl-bootstrap 0.28.0 → 1.0.0

package/legacy/dependency/manipulator.js

@@ -0,0 +1,80 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): dom/manipulator.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+ function normalizeData(val) {
+  if (val === 'true') {
+    return true
+  }
+
+  if (val === 'false') {
+    return false
+  }
+
+  if (val === Number(val).toString()) {
+    return Number(val)
+  }
+
+  if (val === '' || val === 'null') {
+    return null
+  }
+
+  return val
+}
+
+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 = {}
+
+    Object.keys(element.dataset)
+      .filter(key => key.startsWith('bs'))
+      .forEach(key => {
+        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)}`))
+  },
+
+  offset(element) {
+    const rect = element.getBoundingClientRect()
+
+    return {
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset
+    }
+  },
+
+  position(element) {
+    return {
+      top: element.offsetTop,
+      left: element.offsetLeft
+    }
+  }
+}
+
+export default Manipulator

package/legacy/scrollspy-legacy.js

@@ -0,0 +1,294 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): scrollspy.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+// Old versions
+import Manipulator from './dependency/manipulator'
+
+ import {
+  defineJQueryPlugin,
+  getElement,
+  getSelectorFromElement,
+} from './util/index'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const NAME = 'scrollspy'
+const DATA_KEY = 'bs.scrollspy'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const Default = {
+  offset: 10,
+  method: 'auto',
+  target: ''
+}
+
+const DefaultType = {
+  offset: 'number',
+  method: 'string',
+  target: '(string|element)'
+}
+
+const EVENT_ACTIVATE = `activate${EVENT_KEY}`
+const EVENT_SCROLL = `scroll${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
+const CLASS_NAME_ACTIVE = 'active'
+
+const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
+const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
+const SELECTOR_NAV_LINKS = '.nav-link'
+const SELECTOR_NAV_ITEMS = '.nav-item'
+const SELECTOR_LIST_ITEMS = '.list-group-item'
+const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
+const SELECTOR_DROPDOWN = '.dropdown'
+const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
+
+const METHOD_OFFSET = 'offset'
+const METHOD_POSITION = 'position'
+
+/**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+
+class ScrollSpy extends BaseComponent {
+  constructor(element, config) {
+    super(element)
+    this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
+    this._config = this._getConfig(config)
+    this._offsets = []
+    this._targets = []
+    this._activeTarget = null
+    this._scrollHeight = 0
+
+    EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
+
+    this.refresh()
+    this._process()
+  }
+
+  // Getters
+
+  static get Default() {
+    return Default
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+
+  refresh() {
+    const autoMethod = this._scrollElement === this._scrollElement.window ?
+      METHOD_OFFSET :
+      METHOD_POSITION
+
+    const offsetMethod = this._config.method === 'auto' ?
+      autoMethod :
+      this._config.method
+
+    const offsetBase = offsetMethod === METHOD_POSITION ?
+      this._getScrollTop() :
+      0
+
+    this._offsets = []
+    this._targets = []
+    this._scrollHeight = this._getScrollHeight()
+
+    const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
+
+    targets.map(element => {
+      const targetSelector = getSelectorFromElement(element)
+      const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
+
+      if (target) {
+        const targetBCR = target.getBoundingClientRect()
+        if (targetBCR.width || targetBCR.height) {
+          return [
+            Manipulator[offsetMethod](target).top + offsetBase,
+            targetSelector
+          ]
+        }
+      }
+
+      return null
+    })
+      .filter(item => item)
+      .sort((a, b) => a[0] - b[0])
+      .forEach(item => {
+        this._offsets.push(item[0])
+        this._targets.push(item[1])
+      })
+  }
+
+  dispose() {
+    EventHandler.off(this._scrollElement, EVENT_KEY)
+    super.dispose()
+  }
+
+  // Private
+
+  _getConfig(config) {
+    config = {
+      ...Default,
+      ...Manipulator.getDataAttributes(this._element),
+      ...(typeof config === 'object' && config ? config : {})
+    }
+
+    config.target = getElement(config.target) || document.documentElement
+
+    return config
+  }
+
+  _getScrollTop() {
+    return this._scrollElement === window ?
+      this._scrollElement.pageYOffset :
+      this._scrollElement.scrollTop
+  }
+
+  _getScrollHeight() {
+    return this._scrollElement.scrollHeight || Math.max(
+      document.body.scrollHeight,
+      document.documentElement.scrollHeight
+    )
+  }
+
+  _getOffsetHeight() {
+    return this._scrollElement === window ?
+      window.innerHeight :
+      this._scrollElement.getBoundingClientRect().height
+  }
+
+  _process() {
+    const scrollTop = this._getScrollTop() + this._config.offset
+    const scrollHeight = this._getScrollHeight()
+    const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight()
+
+    if (this._scrollHeight !== scrollHeight) {
+      this.refresh()
+    }
+
+    if (scrollTop >= maxScroll) {
+      const target = this._targets[this._targets.length - 1]
+
+      if (this._activeTarget !== target) {
+        this._activate(target)
+      }
+
+      return
+    }
+
+    if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
+      this._activeTarget = null
+      this._clear()
+      return
+    }
+
+    for (let i = this._offsets.length; i--;) {
+      const isActiveTarget = this._activeTarget !== this._targets[i] &&
+          scrollTop >= this._offsets[i] &&
+          (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1])
+
+      if (isActiveTarget) {
+        this._activate(this._targets[i])
+      }
+    }
+  }
+
+  _activate(target) {
+    this._activeTarget = target
+
+    this._clear()
+
+    const queries = SELECTOR_LINK_ITEMS.split(',')
+      .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)
+
+    const link = SelectorEngine.findOne(queries.join(','), this._config.target)
+
+    link.classList.add(CLASS_NAME_ACTIVE)
+    if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
+      SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
+        .classList.add(CLASS_NAME_ACTIVE)
+    } else {
+      SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)
+        .forEach(listGroup => {
+          // Set triggered links parents as active
+          // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
+          SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)
+            .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
+
+          // Handle special case when .nav-link is inside .nav-item
+          SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)
+            .forEach(navItem => {
+              SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)
+                .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
+            })
+        })
+    }
+
+    EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
+      relatedTarget: target
+    })
+  }
+
+  _clear() {
+    SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
+      .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
+      .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
+  }
+
+  // Static
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = ScrollSpy.getOrCreateInstance(this, config)
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (typeof data[config] === 'undefined') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    })
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
+
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+  SelectorEngine.find(SELECTOR_DATA_SPY)
+    .forEach(spy => new ScrollSpy(spy))
+})
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .ScrollSpy to jQuery only if jQuery is present
+ */
+
+defineJQueryPlugin(ScrollSpy)
+
+export default ScrollSpy

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-bootstrap",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.28.0",
+  "version": "1.0.0",
   "description": "OE - BCL bootstrap 5 sources",
   "bin": {
     "plugins-builder": "./bin/build-plugins.js"
@@ -11,15 +11,15 @@
     "build-plugins": "bin/build-plugins.js",
     "clean": "rimraf js plugins scss",
     "copy-sass": "copyfiles -u 3 \"./node_modules/bootstrap/scss/*\" \"./node_modules/bootstrap/scss/**/*\" scss",
-    "copy-js": "copyfiles -u 3 \"./node_modules/bootstrap/js/**/*\" js",
+    "copy-js": "copyfiles -u 3 \"./node_modules/bootstrap/js/**/*\" js && copyfiles -u 1 \"./legacy/**/*\" js/src",
     "copy-icons": "copyfiles -f ./node_modules/bootstrap-icons/bootstrap-icons.svg ../bootstrap",
     "copy-icons-svg": "copyfiles -f ./node_modules/bootstrap-icons/icons/* ../bootstrap/icons/",
     "prepublish": "npm-run-all clean copy-* build-plugins"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "5.3.1",
-    "bootstrap": "5.2.1",
-    "bootstrap-icons": "1.9.1",
+    "@rollup/plugin-babel": "6.0.3",
+    "bootstrap": "5.2.3",
+    "bootstrap-icons": "1.10.3",
     "copyfiles": "2.4.1",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2"
@@ -41,5 +41,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "9ceb916258c8c7331f37bbb7c4380a2121440e12"
+  "gitHead": "16b986722345644e83a37dc8091c07eecbdf4c8c"
 }

package/scss/_buttons.scss

@@ -40,14 +40,20 @@
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
-  :not(.btn-check) + &:hover,
-  &:first-child:hover {
+  &:hover {
     color: var(--#{$prefix}btn-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
+  .btn-check + &:hover {
+    // override for the checkbox/radio buttons
+    color: var(--#{$prefix}btn-color);
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
+  }
+
   &:focus-visible {
     color: var(--#{$prefix}btn-hover-color);
     @include gradient-bg(var(--#{$prefix}btn-hover-bg));

package/scss/_carousel.scss

@@ -42,7 +42,6 @@
   display: block;
 }
 
-/* rtl:begin:ignore */
 .carousel-item-next:not(.carousel-item-start),
 .active.carousel-item-end {
   transform: translateX(100%);
@@ -53,8 +52,6 @@
   transform: translateX(-100%);
 }
 
-/* rtl:end:ignore */
-
 
 //
 // Alternate transitions

package/scss/_functions.scss

@@ -198,7 +198,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions

package/scss/_toasts.scss

@@ -38,6 +38,8 @@
 }
 
 .toast-container {
+  --#{$prefix}toast-zindex: #{$zindex-toast};
+
   position: absolute;
   z-index: var(--#{$prefix}toast-zindex);
   width: max-content;

package/scss/_variables.scss

@@ -1256,7 +1256,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-color:                         $body-color !default; // Sass variable because of $accordion-button-icon
 $accordion-bg:                            $body-bg !default;
 $accordion-border-width:                  $border-width !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;

package/scss/bootstrap-utilities.scss

@@ -8,6 +8,9 @@
 @import "mixins";
 @import "utilities";
 
+// Layout & components
+@import "root";
+
 // Helpers
 @import "helpers";
 

package/scss/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * Bootstrap #{$file} v5.2.1 (https://getbootstrap.com/)
+   * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
    * Copyright 2011-2022 The Bootstrap Authors
    * Copyright 2011-2022 Twitter, Inc.
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

package/scss/mixins/_table-variants.scss

@@ -5,11 +5,11 @@
     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-    $border-color: mix($color, $background, percentage($table-border-factor));
+    $table-border-color: mix($color, $background, percentage($table-border-factor));
 
     --#{$prefix}table-color: #{$color};
     --#{$prefix}table-bg: #{$background};
-    --#{$prefix}table-border-color: #{$border-color};
+    --#{$prefix}table-border-color: #{$table-border-color};
     --#{$prefix}table-striped-bg: #{$striped-bg};
     --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
     --#{$prefix}table-active-bg: #{$active-bg};