diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js index 127f8926..7f656894 100644 --- a/docs/js/pico.docs.js +++ b/docs/js/pico.docs.js @@ -6,12 +6,12 @@ */ // Imports -import { aside } from './components/aside.js'; -import { themeSwitcher } from './components/theme-switcher.js'; -import { materialDesignColors } from './components/material-design-colors.js'; -import { colorPicker } from './components/color-picker.js'; -import { grid } from './components/grid.js'; -import { scrollspy } from './components/scrollspy.js'; +import { aside } from './src/aside.js'; +import { themeSwitcher } from './src/theme-switcher.js'; +import { materialDesignColors } from './src/material-design-colors.js'; +import { colorPicker } from './src/color-picker.js'; +import { grid } from './src/grid.js'; +import { scrollspy } from './src/scrollspy.js'; // Aside initial state aside.init(); diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index 00db6387..875516b7 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1,812 +1 @@ -/******/ (function() { // webpackBootstrap -/******/ "use strict"; -/******/ var __webpack_modules__ = ([ -/* 0 */, -/* 1 */ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "aside": function() { return /* binding */ aside; } -/* harmony export */ }); -/* - * Aside adjustment - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ -var aside = { - // Config - _minWidth: '992px', - _targets: { - nav: 'aside nav', - details: 'aside details' - }, - // Init - init: function init() { - if (window.matchMedia('(min-width: ' + this._minWidth + ')').matches) { - var nav = document.querySelector(this._targets.nav); - var details = document.querySelectorAll(this._targets.details); - - if (nav.clientHeight < nav.scrollHeight) { - details.forEach(function (detail) { - detail.removeAttribute("open"); - }); - } - } - } -}; - -/***/ }), -/* 2 */ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "themeSwitcher": function() { return /* binding */ themeSwitcher; } -/* harmony export */ }); -/* - * Theme switcher - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ -var themeSwitcher = { - // Config - _change: { - light: 'Turn on dark mode', - dark: 'Turn off dark mode' - }, - _buttonsTarget: '.theme-switcher', - _scheme: 'auto', - // Init - init: function init() { - this.scheme = this._scheme; - this.initSwitchers(); - }, - - // Prefered color scheme - get preferedColorScheme() { - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - return 'dark'; - } else { - return 'light'; - } - }, - - // Init switchers - initSwitchers: function initSwitchers() { - var buttons = document.querySelectorAll(this._buttonsTarget); - buttons.forEach(function (button) { - button.addEventListener('click', function (event) { - if (this._scheme == 'dark') { - this.scheme = 'light'; - } else { - this.scheme = 'dark'; - } - }.bind(this), false); - }.bind(this)); - }, - // Add new button - addButton: function addButton(config) { - // Insert Switcher - var button = document.createElement(config.tag); - button.className = config.class; - document.querySelector(config.target).appendChild(button); - }, - - // Set scheme - set scheme(scheme) { - if (scheme == 'auto') { - if (this.preferedColorScheme == 'dark') { - this._scheme = 'dark'; - } else { - this._scheme = 'light'; - } - } // Set to Dark - else if (scheme == 'dark' || scheme == 'light') { - this._scheme = scheme; - } // Set to Apply theme - - - this.applyScheme(); - }, - - // Apply scheme - applyScheme: function applyScheme() { - // Root attribute - document.querySelector('html').setAttribute('data-theme', this._scheme); // Buttons text - - var buttons = document.querySelectorAll(this._buttonsTarget); - var text; - buttons.forEach(function (button) { - if (this._scheme == 'dark') { - text = this._change.dark; - } else { - text = this._change.light; - } - - button.innerHTML = text; - button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, '')); - }.bind(this)); - } -}; - -/***/ }), -/* 3 */ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "materialDesignColors": function() { return /* binding */ materialDesignColors; } -/* harmony export */ }); -// Source: https://material.io/design/color/the-color-system.html -var materialDesignColors = { - red: { - 50: "#ffebee", - 100: "#ffcdd2", - 200: "#ef9a9a", - 300: "#e57373", - 400: "#ef5350", - 500: "#f44336", - 600: "#e53935", - 700: "#d32f2f", - 800: "#c62828", - 900: "#b71c1c", - a100: "#ff8a80", - a200: "#ff5252", - a400: "#ff1744", - a700: "#d50000", - inverse: "#FFF" - }, - pink: { - 50: "#fce4ec", - 100: "#f8bbd0", - 200: "#f48fb1", - 300: "#f06292", - 400: "#ec407a", - 500: "#e91e63", - 600: "#d81b60", - 700: "#c2185b", - 800: "#ad1457", - 900: "#880e4f", - a100: "#ff80ab", - a200: "#ff4081", - a400: "#f50057", - a700: "#c51162", - inverse: "#FFF" - }, - purple: { - 50: "#f3e5f5", - 100: "#e1bee7", - 200: "#ce93d8", - 300: "#ba68c8", - 400: "#ab47bc", - 500: "#9c27b0", - 600: "#8e24aa", - 700: "#7b1fa2", - 800: "#6a1b9a", - 900: "#4a148c", - a100: "#ea80fc", - a200: "#e040fb", - a400: "#d500f9", - a700: "#aa00ff", - inverse: "#FFF" - }, - "deep-purple": { - 50: "#ede7f6", - 100: "#d1c4e9", - 200: "#b39ddb", - 300: "#9575cd", - 400: "#7e57c2", - 500: "#673ab7", - 600: "#5e35b1", - 700: "#512da8", - 800: "#4527a0", - 900: "#311b92", - a100: "#b388ff", - a200: "#7c4dff", - a400: "#651fff", - a700: "#6200ea", - inverse: "#FFF" - }, - indigo: { - 50: "#e8eaf6", - 100: "#c5cae9", - 200: "#9fa8da", - 300: "#7986cb", - 400: "#5c6bc0", - 500: "#3f51b5", - 600: "#3949ab", - 700: "#303f9f", - 800: "#283593", - 900: "#1a237e", - a100: "#8c9eff", - a200: "#536dfe", - a400: "#3d5afe", - a700: "#304ffe", - inverse: "#FFF" - }, - blue: { - 50: "#e3f2fd", - 100: "#bbdefb", - 200: "#90caf9", - 300: "#64b5f6", - 400: "#42a5f5", - 500: "#2196f3", - 600: "#1e88e5", - 700: "#1976d2", - 800: "#1565c0", - 900: "#0d47a1", - a100: "#82b1ff", - a200: "#448aff", - a400: "#2979ff", - a700: "#2962ff", - inverse: "#FFF" - }, - "light-blue": { - 50: "#e1f5fe", - 100: "#b3e5fc", - 200: "#81d4fa", - 300: "#4fc3f7", - 400: "#29b6f6", - 500: "#03a9f4", - 600: "#039be5", - 700: "#0288d1", - 800: "#0277bd", - 900: "#01579b", - a100: "#80d8ff", - a200: "#40c4ff", - a400: "#00b0ff", - a700: "#0091ea", - inverse: "#FFF" - }, - cyan: { - 50: "#e0f7fa", - 100: "#b2ebf2", - 200: "#80deea", - 300: "#4dd0e1", - 400: "#26c6da", - 500: "#00bcd4", - 600: "#00acc1", - 700: "#0097a7", - 800: "#00838f", - 900: "#006064", - a100: "#84ffff", - a200: "#18ffff", - a400: "#00e5ff", - a700: "#00b8d4", - inverse: "#FFF" - }, - teal: { - 50: "#e0f2f1", - 100: "#b2dfdb", - 200: "#80cbc4", - 300: "#4db6ac", - 400: "#26a69a", - 500: "#009688", - 600: "#00897b", - 700: "#00796b", - 800: "#00695c", - 900: "#004d40", - a100: "#a7ffeb", - a200: "#64ffda", - a400: "#1de9b6", - a700: "#00bfa5", - inverse: "#FFF" - }, - green: { - 50: "#e8f5e9", - 100: "#c8e6c9", - 200: "#a5d6a7", - 300: "#81c784", - 400: "#66bb6a", - 500: "#4caf50", - 600: "#43a047", - 700: "#388e3c", - 800: "#2e7d32", - 900: "#1b5e20", - a100: "#b9f6ca", - a200: "#69f0ae", - a400: "#00e676", - a700: "#00c853", - inverse: "#FFF" - }, - "light-green": { - 50: "#f1f8e9", - 100: "#dcedc8", - 200: "#c5e1a5", - 300: "#aed581", - 400: "#9ccc65", - 500: "#8bc34a", - 600: "#7cb342", - 700: "#689f38", - 800: "#558b2f", - 900: "#33691e", - a100: "#ccff90", - a200: "#b2ff59", - a400: "#76ff03", - a700: "#64dd17", - inverse: "#FFF" - }, - lime: { - 50: "#f9fbe7", - 100: "#f0f4c3", - 200: "#e6ee9c", - 300: "#dce775", - 400: "#d4e157", - 500: "#cddc39", - 600: "#c0ca33", - 700: "#afb42b", - 800: "#9e9d24", - 900: "#827717", - a100: "#f4ff81", - a200: "#eeff41", - a400: "#c6ff00", - a700: "#aeea00", - inverse: "rgba(0, 0, 0, 0.75)" - }, - yellow: { - 50: "#fffde7", - 100: "#fff9c4", - 200: "#fff59d", - 300: "#fff176", - 400: "#ffee58", - 500: "#ffeb3b", - 600: "#fdd835", - 700: "#fbc02d", - 800: "#f9a825", - 900: "#f57f17", - a100: "#ffff8d", - a200: "#ffff00", - a400: "#ffea00", - a700: "#ffd600", - inverse: "rgba(0, 0, 0, 0.75)" - }, - amber: { - 50: "#fff8e1", - 100: "#ffecb3", - 200: "#ffe082", - 300: "#ffd54f", - 400: "#ffca28", - 500: "#ffc107", - 600: "#ffb300", - 700: "#ffa000", - 800: "#ff8f00", - 900: "#ff6f00", - a100: "#ffe57f", - a200: "#ffd740", - a400: "#ffc400", - a700: "#ffab00", - inverse: "rgba(0, 0, 0, 0.75)" - }, - orange: { - 50: "#fff3e0", - 100: "#ffe0b2", - 200: "#ffcc80", - 300: "#ffb74d", - 400: "#ffa726", - 500: "#ff9800", - 600: "#fb8c00", - 700: "#f57c00", - 800: "#ef6c00", - 900: "#e65100", - a100: "#ffd180", - a200: "#ffab40", - a400: "#ff9100", - a700: "#ff6d00", - inverse: "#FFF" - }, - "deep-orange": { - 50: "#fbe9e7", - 100: "#ffccbc", - 200: "#ffab91", - 300: "#ff8a65", - 400: "#ff7043", - 500: "#ff5722", - 600: "#f4511e", - 700: "#e64a19", - 800: "#d84315", - 900: "#bf360c", - a100: "#ff9e80", - a200: "#ff6e40", - a400: "#ff3d00", - a700: "#dd2c00", - inverse: "#FFF" - }, - grey: { - 50: "#fafafa", - 100: "#f5f5f5", - 200: "#eeeeee", - 300: "#e0e0e0", - 400: "#bdbdbd", - 500: "#9e9e9e", - 600: "#757575", - 700: "#616161", - 800: "#424242", - 900: "#212121", - inverse: "#FFF" - }, - "blue-grey": { - 50: "#eceff1", - 100: "#cfd8dc", - 200: "#b0bec5", - 300: "#90a4ae", - 400: "#78909c", - 500: "#607d8b", - 600: "#546e7a", - 700: "#455a64", - 800: "#37474f", - 900: "#263238", - inverse: "#FFF" - } -}; - -/***/ }), -/* 4 */ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "colorPicker": function() { return /* binding */ colorPicker; } -/* harmony export */ }); -/* - * Color Picker - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ -var colorPicker = { - // Config - _colors: null, - _buttonsTarget: '#customization article[data-theme="generated"]', - _selectorButton: '#customization button[data-color]', - _selectorSection: '#customization', - _buttons: null, - _generatedStyles: null, - - // Set colors - set colors(colors) { - this._colors = colors; - }, - - // Init - init: function init() { - this.generateButtons(); - this.setActiveButton('pink'); - this.generateTheme('pink'); - }, - // Generate Buttons - generateButtons: function generateButtons() { - // Init - var innerButtons = ''; - var innerStyles = ''; // Loop colors - - for (var color in this._colors) { - // Buttons - innerButtons += ''; // Styles - - innerStyles += "\n button[data-color=\"".concat(color, "\"] {\n background-color: ").concat(this._colors[color]['600'], ";\n }\n [data-theme=\"light\"] button[data-color=\"").concat(color, "\"]:hover,\n [data-theme=\"light\"] button[data-color=\"").concat(color, "\"]:active,\n [data-theme=\"light\"] button[data-color=\"").concat(color, "\"]:focus {\n background-color: ").concat(this._colors[color]['700'], "; '\n }\n [data-theme=\"dark\"] button[data-color=\"").concat(color, "\"]:hover,\n [data-theme=\"dark\"] button[data-color=\"").concat(color, "\"]:active,\n [data-theme=\"dark\"] button[data-color=\"").concat(color, "\"]:focus {\n background-color: ").concat(this._colors[color]['500'], ";\n }"); - } // Insert buttons - - - var containerButtons = document.createElement('FIGURE'); - containerButtons.innerHTML = innerButtons; - document.querySelector(this._buttonsTarget).before(containerButtons); // Buttons listeners - - this._buttons = document.querySelectorAll(this._selectorButton); - - this._buttons.forEach(function (button) { - button.addEventListener('click', function (event) { - var color = event.target.getAttribute('data-color'); - this.setActiveButton(color); - this.generateTheme(color); - }.bind(this), false); - }.bind(this)); // Insert CSS Styles - - - var containerStyles = document.createElement('STYLE'); - containerStyles.setAttribute('title', 'color-picker'); - this._generatedStyles = this.minifyCSS(innerStyles); - containerStyles.innerHTML = this._generatedStyles; - document.querySelector('head').appendChild(containerStyles); - }, - // Set active button - setActiveButton: function setActiveButton(color) { - // Remove all active states - this._buttons.forEach(function (button) { - button.removeAttribute('class'); - }.bind(this)); // Set active state - - - var buttonPicked = document.querySelector(this._selectorButton + '[data-color="' + color + '"]'); - buttonPicked.setAttribute('class', 'picked'); - }, - // Set active button - generateTheme: function generateTheme(color) { - var name = color; - var data = this._colors[color]; // 1. Update name and colors in demo code - - var swaps = { - '.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ', - '.c500': data[500], - '.c600': data[600], - '.c700': data[700], - '.c600-outline-light': this.hexToRgbA(data[600], .125), - '.c600-outline-dark': this.hexToRgbA(data[600], .25), - '.inverse': data['inverse'] - }; - Object.keys(swaps).forEach(function (swap) { - var targets = document.querySelectorAll(this._selectorSection + ' ' + swap); - targets.forEach(function (target) { - target.innerHTML = swaps[swap]; - }.bind(this)); - }.bind(this)); // 2. Update CSS Styles - - var innerStyles = "\n [data-theme=\"generated\"] {\n --h4-color: ".concat(data[700], ";\n --primary: ").concat(data[600], ";\n --primary-hover: ").concat(data[700], ";\n --primary-focus: ").concat(this.hexToRgbA(data[600], .125), ";\n --primary-inverse: ").concat(data['inverse'], ";\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) [data-theme=\"generated\"] {\n --h4-color: ").concat(data[400], ";\n --primary: ").concat(data[600], ";\n --primary-hover: ").concat(data[500], ";\n --primary-focus: ").concat(this.hexToRgbA(data[600], .25), ";\n --primary-inverse: ").concat(data['inverse'], ";\n }\n }\n [data-theme=\"dark\"] [data-theme=\"generated\"] {\n --h4-color: ").concat(data[500], ";\n --primary: ").concat(data[600], ";\n --primary-hover: ").concat(data[500], ";\n --primary-focus: ").concat(this.hexToRgbA(data[600], .25), ";\n --primary-inverse: ").concat(data['inverse'], ";\n }\n [data-theme=\"generated\"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }"); - document.querySelector('style[title="color-picker"]').innerHTML = this._generatedStyles + this.minifyCSS(innerStyles); - }, - // Minify CSS - minifyCSS: function minifyCSS(css) { - return css.replace(/^ +/gm, ''); - }, - // Hexadecimal to Rgba - hexToRgbA: function hexToRgbA(hex, alpha) { - var c; - - if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { - c = hex.substring(1).split(''); - - if (c.length == 3) { - c = [c[0], c[0], c[1], c[1], c[2], c[2]]; - } - - c = '0x' + c.join(''); - return 'rgba(' + [c >> 16 & 255, c >> 8 & 255, c & 255].join(', ') + ', ' + alpha + ')'; - } - - throw new Error('Bad Hex'); - } -}; - -/***/ }), -/* 5 */ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "grid": function() { return /* binding */ grid; } -/* harmony export */ }); -/* - * Grid Interaction - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ -var grid = { - // Config - _buttons: { - text: { - add: 'Add column', - remove: 'Remove column' - }, - target: '#grids article' - }, - _grid: { - current: 4, - min: 1, - max: 12, - gridTarget: '#grids .grid', - codeTarget: '#grids pre code' - }, - // Init - init: function init() { - this.addButtons(); - this.generateGrid(); - }, - // Add buttons - addButtons: function addButtons() { - // Insert buttons - var buttons = document.createElement('P'); - buttons.innerHTML = "\n \n\n "); - document.querySelector(this._buttons.target).before(buttons); // Add button listener - - document.querySelector('#grids button.add').addEventListener('click', function () { - this.addColumn(); - }.bind(this), false); // Remove button listener - - document.querySelector('#grids button.remove').addEventListener('click', function () { - this.removeColumn(); - }.bind(this), false); - }, - // Generate grid - generateGrid: function generateGrid() { - // Config - var htmlInner = ''; - var codeInner = '<div class="grid">\n'; // Build - - for (var col = 0; col < this._grid.current; col++) { - htmlInner += '
' + (col + 1) + '
'; - codeInner += ' <div>' + (col + 1) + '</div>\n'; - } // Display - - - codeInner += '</div>'; - document.querySelector(this._grid.gridTarget).innerHTML = htmlInner; - document.querySelector(this._grid.codeTarget).innerHTML = codeInner; - }, - // Add column - addColumn: function addColumn() { - if (this._grid.current < this._grid.max) { - this._grid.current++; - this.generateGrid(); - } - }, - // Remove column - removeColumn: function removeColumn() { - if (this._grid.current > this._grid.min) { - this._grid.current--; - this.generateGrid(); - } - } -}; - -/***/ }), -/* 6 */ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "scrollspy": function() { return /* binding */ scrollspy; } -/* harmony export */ }); -/* - * Scrollspy - * Automatically update nav targets based on scroll position - * - * Require `most-visible.js` (https://github.com/andyexeter/most-visible) - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ -var scrollspy = { - // Config - _minWidth: '992px', - _interval: 75, - _targets: { - sections: '[role="document"] > section', - nav: 'main aside nav', - active: 'active' - }, - // Init - init: function init() { - if (window.matchMedia('(min-width: ' + this._minWidth + ')').matches) { - this.setActiveNav(); - this.scrollStop(); - } - }, - // Set active section in nav - setActiveNav: function setActiveNav() { - // Get active section - var currentSection = mostVisible(this._targets.sections).getAttribute('id'); // Remove all active states - - var links = document.querySelectorAll(this._targets.nav + ' a.' + this._targets.active); - links.forEach(function (link) { - link.classList.remove(this._targets.active); - }.bind(this)); // Set active state - - var activeLink = document.querySelector(this._targets.nav + ' a[href="#' + currentSection + '"]'); - activeLink.classList.add(this._targets.active); // Open details parent - - activeLink.closest('details').setAttribute('open', ''); - }, - // Scroll stop - scrollStop: function scrollStop() { - var isScrolling; - window.addEventListener('scroll', function (event) { - window.clearTimeout(isScrolling); - isScrolling = setTimeout(function () { - this.setActiveNav(); - }.bind(this), this._interval); - }.bind(this), false); - } -}; - -/***/ }) -/******/ ]); -/************************************************************************/ -/******/ // The module cache -/******/ var __webpack_module_cache__ = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ // Check if module is in cache -/******/ var cachedModule = __webpack_module_cache__[moduleId]; -/******/ if (cachedModule !== undefined) { -/******/ return cachedModule.exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = __webpack_module_cache__[moduleId] = { -/******/ // no module.id needed -/******/ // no module.loaded needed -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/************************************************************************/ -/******/ /* webpack/runtime/define property getters */ -/******/ !function() { -/******/ // define getter functions for harmony exports -/******/ __webpack_require__.d = function(exports, definition) { -/******/ for(var key in definition) { -/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { -/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); -/******/ } -/******/ } -/******/ }; -/******/ }(); -/******/ -/******/ /* webpack/runtime/hasOwnProperty shorthand */ -/******/ !function() { -/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } -/******/ }(); -/******/ -/******/ /* webpack/runtime/make namespace object */ -/******/ !function() { -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ }(); -/******/ -/************************************************************************/ -var __webpack_exports__ = {}; -// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk. -!function() { -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _components_aside_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); -/* harmony import */ var _components_theme_switcher_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); -/* harmony import */ var _components_material_design_colors_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3); -/* harmony import */ var _components_color_picker_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4); -/* harmony import */ var _components_grid_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5); -/* harmony import */ var _components_scrollspy_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6); -/* - * Add some magic to Pico docs - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ -// Imports - - - - - - // Aside initial state - -_components_aside_js__WEBPACK_IMPORTED_MODULE_0__.aside.init(); // Theme switcher - -_components_theme_switcher_js__WEBPACK_IMPORTED_MODULE_1__.themeSwitcher.addButton({ - tag: 'BUTTON', - class: 'contrast switcher theme-switcher', - target: 'body' -}); -_components_theme_switcher_js__WEBPACK_IMPORTED_MODULE_1__.themeSwitcher.init(); // Color Picker - -_components_color_picker_js__WEBPACK_IMPORTED_MODULE_3__.colorPicker.colors = _components_material_design_colors_js__WEBPACK_IMPORTED_MODULE_2__.materialDesignColors; -_components_color_picker_js__WEBPACK_IMPORTED_MODULE_3__.colorPicker.init(); // Grid Interaction - -_components_grid_js__WEBPACK_IMPORTED_MODULE_4__.grid.init(); // Scrollspy - -_components_scrollspy_js__WEBPACK_IMPORTED_MODULE_5__.scrollspy.init(); -}(); -/******/ })() -; \ No newline at end of file +!function(){"use strict";var e=[,function(e,t,n){n.r(t),n.d(t,{aside:function(){return r}});var r={_minWidth:"992px",_targets:{nav:"aside nav",details:"aside details"},init:function(){if(window.matchMedia("(min-width: "+this._minWidth+")").matches){var e=document.querySelector(this._targets.nav),t=document.querySelectorAll(this._targets.details);e.clientHeightTurn on dark mode",dark:"Turn off dark mode"},_buttonsTarget:".theme-switcher",_scheme:"auto",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this._buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this._scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this._scheme),document.querySelectorAll(this._buttonsTarget).forEach(function(t){e="dark"==this._scheme?this._change.dark:this._change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}}},function(e,t,n){n.r(t),n.d(t,{materialDesignColors:function(){return r}});var r={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}},function(e,t,n){n.r(t),n.d(t,{colorPicker:function(){return r}});var r={_colors:null,_buttonsTarget:'#customization article[data-theme="generated"]',_selectorButton:"#customization button[data-color]",_selectorSection:"#customization",_buttons:null,_generatedStyles:null,set colors(e){this._colors=e},init:function(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons:function(){var e="",t="";for(var n in this._colors)e+='',t+='\n button[data-color="'.concat(n,'"] {\n background-color: ').concat(this._colors[n][600],';\n }\n [data-theme="light"] button[data-color="').concat(n,'"]:hover,\n [data-theme="light"] button[data-color="').concat(n,'"]:active,\n [data-theme="light"] button[data-color="').concat(n,'"]:focus {\n background-color: ').concat(this._colors[n][700],'; \'\n }\n [data-theme="dark"] button[data-color="').concat(n,'"]:hover,\n [data-theme="dark"] button[data-color="').concat(n,'"]:active,\n [data-theme="dark"] button[data-color="').concat(n,'"]:focus {\n background-color: ').concat(this._colors[n][500],";\n }");var r=document.createElement("FIGURE");r.innerHTML=e,document.querySelector(this._buttonsTarget).before(r),this._buttons=document.querySelectorAll(this._selectorButton),this._buttons.forEach(function(e){e.addEventListener("click",function(e){var t=e.target.getAttribute("data-color");this.setActiveButton(t),this.generateTheme(t)}.bind(this),!1)}.bind(this));var a=document.createElement("STYLE");a.setAttribute("title","color-picker"),this._generatedStyles=this.minifyCSS(t),a.innerHTML=this._generatedStyles,document.querySelector("head").appendChild(a)},setActiveButton:function(e){this._buttons.forEach(function(e){e.removeAttribute("class")}.bind(this)),document.querySelector(this._selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme:function(e){var t=e,n=this._colors[e],r={".name":t.charAt(0).toUpperCase()+t.substring(1)+" ",".c500":n[500],".c600":n[600],".c700":n[700],".c600-outline-light":this.hexToRgbA(n[600],.125),".c600-outline-dark":this.hexToRgbA(n[600],.25),".inverse":n.inverse};Object.keys(r).forEach(function(e){document.querySelectorAll(this._selectorSection+" "+e).forEach(function(t){t.innerHTML=r[e]}.bind(this))}.bind(this));var a='\n [data-theme="generated"] {\n --h4-color: '.concat(n[700],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[700],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.125),";\n --primary-inverse: ").concat(n.inverse,';\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) [data-theme="generated"] {\n --h4-color: ').concat(n[400],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[500],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.25),";\n --primary-inverse: ").concat(n.inverse,';\n }\n }\n [data-theme="dark"] [data-theme="generated"] {\n --h4-color: ').concat(n[500],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[500],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.25),";\n --primary-inverse: ").concat(n.inverse,';\n }\n [data-theme="generated"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }');document.querySelector('style[title="color-picker"]').innerHTML=this._generatedStyles+this.minifyCSS(a)},minifyCSS:function(e){return e.replace(/^ +/gm,"")},hexToRgbA:function(e,t){var n;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return 3==(n=e.substring(1).split("")).length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),"rgba("+[(n="0x"+n.join(""))>>16&255,n>>8&255,255&n].join(", ")+", "+t+")";throw new Error("Bad Hex")}}},function(e,t,n){n.r(t),n.d(t,{grid:function(){return r}});var r={_buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grids article"},_grid:{current:4,min:1,max:12,gridTarget:"#grids .grid",codeTarget:"#grids pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var e=document.createElement("P");e.innerHTML='\n \n\n "),document.querySelector(this._buttons.target).before(e),document.querySelector("#grids button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grids button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var e="",t='<div class="grid">\n',n=0;n"+(n+1)+"",t+=" <div>"+(n+1)+"</div>\n";t+="</div>",document.querySelector(this._grid.gridTarget).innerHTML=e,document.querySelector(this._grid.codeTarget).innerHTML=t},addColumn:function(){this._grid.currentthis._grid.min&&(this._grid.current--,this.generateGrid())}}},function(e,t,n){n.r(t),n.d(t,{scrollspy:function(){return r}});var r={_minWidth:"992px",_interval:75,_targets:{sections:'[role="document"] > section',nav:"main aside nav",active:"active"},init:function(){window.matchMedia("(min-width: "+this._minWidth+")").matches&&(this.setActiveNav(),this.scrollStop())},setActiveNav:function(){var e=mostVisible(this._targets.sections).getAttribute("id");document.querySelectorAll(this._targets.nav+" a."+this._targets.active).forEach(function(e){e.classList.remove(this._targets.active)}.bind(this));var t=document.querySelector(this._targets.nav+' a[href="#'+e+'"]');t.classList.add(this._targets.active),t.closest("details").setAttribute("open","")},scrollStop:function(){var e;window.addEventListener("scroll",function(t){window.clearTimeout(e),e=setTimeout(function(){this.setActiveNav()}.bind(this),this._interval)}.bind(this),!1)}}}],t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};!function(){n.r(r);var e=n(1),t=n(2),a=n(3),i=n(4),c=n(5),o=n(6);e.aside.init(),t.themeSwitcher.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.themeSwitcher.init(),i.colorPicker.colors=a.materialDesignColors,i.colorPicker.init(),c.grid.init(),o.scrollspy.init()}()}(); \ No newline at end of file diff --git a/docs/js/components/aside.js b/docs/js/src/aside.js similarity index 100% rename from docs/js/components/aside.js rename to docs/js/src/aside.js diff --git a/docs/js/components/color-picker.js b/docs/js/src/color-picker.js similarity index 100% rename from docs/js/components/color-picker.js rename to docs/js/src/color-picker.js diff --git a/docs/js/components/grid.js b/docs/js/src/grid.js similarity index 100% rename from docs/js/components/grid.js rename to docs/js/src/grid.js diff --git a/docs/js/components/material-design-colors.js b/docs/js/src/material-design-colors.js similarity index 100% rename from docs/js/components/material-design-colors.js rename to docs/js/src/material-design-colors.js diff --git a/docs/js/components/scrollspy.js b/docs/js/src/scrollspy.js similarity index 100% rename from docs/js/components/scrollspy.js rename to docs/js/src/scrollspy.js diff --git a/docs/js/components/theme-switcher.js b/docs/js/src/theme-switcher.js similarity index 100% rename from docs/js/components/theme-switcher.js rename to docs/js/src/theme-switcher.js