teste

parent a01b03ab
.br-accordion {
background: var(--bg-color);
border-top: 1px solid var(--color-secondary-04);
}
.br-accordion .item {
border-bottom: 1px solid var(--color-secondary-04);
display: flex;
flex-direction: column;
}
.br-accordion .item[active] {
border-bottom: 0;
}
.br-accordion .item[active] .header {
font-weight: var(--font-weight-semi-bold);
}
.br-accordion .item[active] + .content {
border-bottom: 1px solid var(--color-secondary-04);
display: block;
}
.br-accordion .header {
--bg-color: transparent;
background: var(--bg-color);
border: 0;
color: var(--interactive);
display: flex;
font-size: var(--font-size-scale-up-01);
justify-content: space-between;
padding: var(--spacing-scale-2x) 0;
text-align: left;
text-decoration: none;
width: 100%;
outline: none;
}
.br-accordion .header .icon {
margin: 0 var(--spacing-scale-2x) 0 var(--spacing-scale-baseh);
}
.br-accordion .header .title {
flex: 1;
margin: 0;
}
.br-accordion .header:focus {
outline: none;
}
.br-accordion .header.focus-visible, .br-accordion .header:focus-visible {
outline-color: var(--focus-color);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
.br-accordion .header:not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-accordion .header:not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-accordion .content {
color: var(--text-color);
display: none;
font-size: var(--font-size-scale-base);
margin: 0 var(--spacing-scale-base);
padding: var(--spacing-scale-base) var(--spacing-scale-8x) var(--spacing-scale-2x);
}
.br-accordion .content *:last-child {
margin-bottom: 0;
}
.br-accordion[negative] {
--text-color: var(--color-secondary-01);
--interactive: var(--color-primary-pastel-01);
--interactive-rgb: var(--rgb-primary-pastel-01);
--visited: var(--color-secondary-04);
--hover: var(--surface-opacity-sm, 0.3);
--pressed: var(--surface-opacity-lg, 0.65);
--focus-color: var(--color-support-10);
--active: var(--color-secondary-01);
--bg-color: var(--color-primary-darken-02);
--text-color: var(--color-secondary-01);
}
/*# sourceMappingURL=accordion.css.map*/
\ No newline at end of file
{"version":3,"sources":["webpack:///./src/components/accordion/_accordion.scss","webpack:///./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA;EACE;EACA;AADF;AAEE;EACE;EACA;EACA;AAAJ;AACI;EACE;AACN;AAAM;EACE;AAER;AAAM;EACE;EACA;AAER;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAJ;AACI;EACE;AACN;AACI;EACE;EACA;AACN;ACTE;EACE;ADWJ;ACRE;EAEE;EACA;EACA;EACA;ADSJ;ACnCI;EACE;ADqCN;AChCI;EACE;ADkCN;AAXE;EACE;EACA;EACA;EACA;EACA;AAaJ;AAXM;EACE;AAaR;AATE;ECEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDPE;EACA;AAkBJ,C","file":"components/accordion/accordion.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}accordion {\n background: v(bg-color);\n border-top: 1px solid v(color-secondary-04);\n .item {\n border-bottom: 1px solid v(color-secondary-04);\n display: flex;\n flex-direction: column;\n &[active] {\n border-bottom: 0;\n .header {\n font-weight: v(font-weight-semi-bold);\n }\n & + .content {\n border-bottom: 1px solid v(color-secondary-04);\n display: block;\n }\n }\n }\n .header {\n --bg-color: transparent;\n background: v(bg-color);\n border: 0;\n color: var(--interactive);\n display: flex;\n font-size: v(font-size-scale-up-01);\n justify-content: space-between;\n padding: v(spacing-scale-2x) 0;\n text-align: left;\n text-decoration: none;\n width: 100%;\n outline: none;\n .icon {\n margin: 0 v(spacing-scale-2x) 0 v(spacing-scale-baseh);\n }\n .title {\n flex: 1;\n margin: 0;\n }\n @include focus;\n @include hover;\n }\n .content {\n color: v(text-color);\n display: none;\n font-size: v(font-size-scale-base);\n margin: 0 v(spacing-scale-base);\n padding: v(spacing-scale-base) v(spacing-scale-8x) v(spacing-scale-2x);\n * {\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &[negative] {\n @include dark-mode;\n --bg-color: var(--color-primary-darken-02);\n --text-color: var(--color-secondary-01);\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"],"sourceRoot":""}
\ No newline at end of file
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // 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 });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 106);
/******/ })
/************************************************************************/
/******/ ({
/***/ 106:
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(7);
__webpack_require__(35);
__webpack_require__(36);
__webpack_require__(107);
__webpack_require__(108);
__webpack_require__(109);
module.exports = __webpack_require__(110);
/***/ }),
/***/ 107:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-default.html");
/***/ }),
/***/ 108:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-negative.html");
/***/ }),
/***/ 109:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-single-negative.html");
/***/ }),
/***/ 110:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-single.html");
/***/ }),
/***/ 35:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 36:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples.html");
/***/ }),
/***/ 7:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
class BRAccordion {
constructor(name, component) {
this.name = name
this.component = component
this._setBehavior()
}
_setBehavior() {
for (const button of this.component.querySelectorAll('button.header')) {
button.addEventListener('click', (event) => {
this._collapse(event)
this._changeIcon(event)
})
}
}
_collapse(event) {
if (this.component.hasAttribute('single')) {
for (const field of this.component.querySelectorAll('.item')) {
if (field === event.currentTarget.parentNode) {
if (field.hasAttribute('active')) {
field.removeAttribute('active')
} else {
field.setAttribute('active', '')
}
} else {
if (field.hasAttribute('active')) {
field.removeAttribute('active')
}
}
}
} else {
for (const field of this.component.querySelectorAll('.item')) {
if (field === event.currentTarget.parentNode) {
if (field.hasAttribute('active')) {
field.removeAttribute('active')
} else {
field.setAttribute('active', '')
}
}
}
}
}
_changeIcon() {
for (const field of this.component.querySelectorAll('.item')) {
if (field.hasAttribute('active')) {
for (const icon of field.querySelectorAll('.icon')) {
icon.children[0].classList.remove('fa-angle-down')
icon.children[0].classList.add('fa-angle-up')
}
} else {
for (const icon of field.querySelectorAll('.icon')) {
icon.children[0].classList.remove('fa-angle-up')
icon.children[0].classList.add('fa-angle-down')
}
}
}
}
}
const accordionList = []
for (const brAccordion of window.document.querySelectorAll('.br-accordion')) {
accordionList.push(
Object.create(new BRAccordion('br-accordion', brAccordion))
)
}
/* harmony default export */ __webpack_exports__["default"] = (BRAccordion);
/***/ })
/******/ });
//# sourceMappingURL=accordion.js.map
\ No newline at end of file
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/accordion/examples/accordion-default.pug","webpack:///./src/components/accordion/examples/accordion-negative.pug","webpack:///./src/components/accordion/examples/accordion-single-negative.pug","webpack:///./src/components/accordion/examples/accordion-single.pug","webpack:///./src/components/accordion/_accordion.scss","webpack:///./src/components/accordion/examples.pug","webpack:///./src/components/accordion/accordion.js"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;;;;AClFA;AAAe,oFAAuB,yDAAyD,E;;;;;;;;ACA/F;AAAe,oFAAuB,0DAA0D,E;;;;;;;;ACAhG;AAAe,oFAAuB,iEAAiE,E;;;;;;;;ACAvG;AAAe,oFAAuB,wDAAwD,E;;;;;;;;ACA9F;AAAA;;;;;;;;;ACAA;AAAe,oFAAuB,uCAAuC,E;;;;;;;;ACA7E;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,0EAAW","file":"components/accordion/accordion.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 106);\n","export default __webpack_public_path__ + \"components/accordion/examples/accordion-default.html\";","export default __webpack_public_path__ + \"components/accordion/examples/accordion-negative.html\";","export default __webpack_public_path__ + \"components/accordion/examples/accordion-single-negative.html\";","export default __webpack_public_path__ + \"components/accordion/examples/accordion-single.html\";","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/accordion/examples.html\";","class BRAccordion {\n constructor(name, component) {\n this.name = name\n this.component = component\n this._setBehavior()\n }\n\n _setBehavior() {\n for (const button of this.component.querySelectorAll('button.header')) {\n button.addEventListener('click', (event) => {\n this._collapse(event)\n this._changeIcon(event)\n })\n }\n }\n\n _collapse(event) {\n if (this.component.hasAttribute('single')) {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n } else {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n }\n }\n }\n } else {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n }\n }\n }\n }\n\n _changeIcon() {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field.hasAttribute('active')) {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-down')\n icon.children[0].classList.add('fa-angle-up')\n }\n } else {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-up')\n icon.children[0].classList.add('fa-angle-down')\n }\n }\n }\n }\n}\nconst accordionList = []\nfor (const brAccordion of window.document.querySelectorAll('.br-accordion')) {\n accordionList.push(\n Object.create(new BRAccordion('br-accordion', brAccordion))\n )\n}\nexport default BRAccordion\n"],"sourceRoot":""}
\ No newline at end of file
.br-accordion{background:var(--bg-color);border-top:1px solid var(--color-secondary-04)}.br-accordion .item{border-bottom:1px solid var(--color-secondary-04);display:flex;flex-direction:column}.br-accordion .item[active]{border-bottom:0}.br-accordion .item[active] .header{font-weight:var(--font-weight-semi-bold)}.br-accordion .item[active]+.content{border-bottom:1px solid var(--color-secondary-04);display:block}.br-accordion .header{--bg-color:rgba(0,0,0,0);background:var(--bg-color);border:0;color:var(--interactive);display:flex;font-size:var(--font-size-scale-up-01);justify-content:space-between;padding:var(--spacing-scale-2x) 0;text-align:left;text-decoration:none;width:100%;outline:none}.br-accordion .header .icon{margin:0 var(--spacing-scale-2x) 0 var(--spacing-scale-baseh)}.br-accordion .header .title{flex:1;margin:0}.br-accordion .header:focus{outline:none}.br-accordion .header.focus-visible,.br-accordion .header:focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-accordion .header:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-accordion .header:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-accordion .content{color:var(--text-color);display:none;font-size:var(--font-size-scale-base);margin:0 var(--spacing-scale-base);padding:var(--spacing-scale-base) var(--spacing-scale-8x) var(--spacing-scale-2x)}.br-accordion .content :last-child{margin-bottom:0}.br-accordion[negative]{--interactive:var(--color-primary-pastel-01);--interactive-rgb:var(--rgb-primary-pastel-01);--visited:var(--color-secondary-04);--hover:var(--surface-opacity-sm,0.3);--pressed:var(--surface-opacity-lg,0.65);--focus-color:var(--color-support-10);--active:var(--color-secondary-01);--bg-color:var(--color-primary-darken-02);--text-color:var(--color-secondary-01)}
/*# sourceMappingURL=accordion.min.css.map */
\ No newline at end of file
{"version":3,"sources":["webpack://./src/components/accordion/_accordion.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA,cACE,0BAAA,CACA,8CADF,CAEE,oBACE,iDAAA,CACA,YAAA,CACA,qBAAJ,CACI,4BACE,eACN,CAAM,oCACE,wCAER,CAAM,qCACE,iDAAA,CACA,aAER,CAEE,sBACE,wBAAA,CACA,0BAAA,CACA,QAAA,CACA,wBAAA,CACA,YAAA,CACA,sCAAA,CACA,6BAAA,CACA,iCAAA,CACA,eAAA,CACA,oBAAA,CACA,UAAA,CACA,YAAJ,CACI,4BACE,6DACN,CACI,6BACE,MAAA,CACA,QACN,CCTE,4BACE,YDWJ,CCRE,wEAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCDSJ,CCnCI,2CACE,qHDqCN,CChCI,4CACE,yHDkCN,CAXE,uBACE,uBAAA,CACA,YAAA,CACA,qCAAA,CACA,kCAAA,CACA,iFAaJ,CAXM,mCACE,eAaR,CATE,wBCGA,4CAAA,CACA,8CAAA,CACA,mCAAA,CACA,qCAAA,CACA,wCAAA,CACA,qCAAA,CACA,kCAAA,CDPE,yCAAA,CACA,sCAkBJ","file":"accordion.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}accordion {\n background: v(bg-color);\n border-top: 1px solid v(color-secondary-04);\n .item {\n border-bottom: 1px solid v(color-secondary-04);\n display: flex;\n flex-direction: column;\n &[active] {\n border-bottom: 0;\n .header {\n font-weight: v(font-weight-semi-bold);\n }\n & + .content {\n border-bottom: 1px solid v(color-secondary-04);\n display: block;\n }\n }\n }\n .header {\n --bg-color: transparent;\n background: v(bg-color);\n border: 0;\n color: var(--interactive);\n display: flex;\n font-size: v(font-size-scale-up-01);\n justify-content: space-between;\n padding: v(spacing-scale-2x) 0;\n text-align: left;\n text-decoration: none;\n width: 100%;\n outline: none;\n .icon {\n margin: 0 v(spacing-scale-2x) 0 v(spacing-scale-baseh);\n }\n .title {\n flex: 1;\n margin: 0;\n }\n @include focus;\n @include hover;\n }\n .content {\n color: v(text-color);\n display: none;\n font-size: v(font-size-scale-base);\n margin: 0 v(spacing-scale-base);\n padding: v(spacing-scale-base) v(spacing-scale-8x) v(spacing-scale-2x);\n * {\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &[negative] {\n @include dark-mode;\n --bg-color: var(--color-primary-darken-02);\n --text-color: var(--color-secondary-01);\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
!function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=111)}({111:function(e,t,r){r(7),r(35),e.exports=r(36)},35:function(e,t,r){"use strict";r.r(t)},36:function(e,t,r){"use strict";r.r(t),t.default=r.p+"components/accordion/examples.html"},7:function(e,t,r){"use strict";r.r(t);class o{constructor(e,t){this.name=e,this.component=t,this._setBehavior()}_setBehavior(){for(const e of this.component.querySelectorAll("button.header"))e.addEventListener("click",(e=>{this._collapse(e),this._changeIcon(e)}))}_collapse(e){if(this.component.hasAttribute("single"))for(const t of this.component.querySelectorAll(".item"))t===e.currentTarget.parentNode?t.hasAttribute("active")?t.removeAttribute("active"):t.setAttribute("active",""):t.hasAttribute("active")&&t.removeAttribute("active");else for(const t of this.component.querySelectorAll(".item"))t===e.currentTarget.parentNode&&(t.hasAttribute("active")?t.removeAttribute("active"):t.setAttribute("active",""))}_changeIcon(){for(const e of this.component.querySelectorAll(".item"))if(e.hasAttribute("active"))for(const t of e.querySelectorAll(".icon"))t.children[0].classList.remove("fa-angle-down"),t.children[0].classList.add("fa-angle-up");else for(const t of e.querySelectorAll(".icon"))t.children[0].classList.remove("fa-angle-up"),t.children[0].classList.add("fa-angle-down")}}const n=[];for(const e of window.document.querySelectorAll(".br-accordion"))n.push(Object.create(new o("br-accordion",e)));t.default=o}});
//# sourceMappingURL=accordion.min.js.map
\ No newline at end of file
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/accordion/_accordion.scss","webpack:///./src/components/accordion/examples.pug","webpack:///./src/components/accordion/accordion.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","BRAccordion","component","this","_setBehavior","button","querySelectorAll","addEventListener","event","_collapse","_changeIcon","hasAttribute","field","currentTarget","parentNode","removeAttribute","setAttribute","icon","children","classList","remove","add","accordionList","brAccordion","window","document","push"],"mappings":"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","file":"components/accordion/accordion.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 111);\n","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/accordion/examples.html\";","class BRAccordion {\n constructor(name, component) {\n this.name = name\n this.component = component\n this._setBehavior()\n }\n\n _setBehavior() {\n for (const button of this.component.querySelectorAll('button.header')) {\n button.addEventListener('click', (event) => {\n this._collapse(event)\n this._changeIcon(event)\n })\n }\n }\n\n _collapse(event) {\n if (this.component.hasAttribute('single')) {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n } else {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n }\n }\n }\n } else {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n }\n }\n }\n }\n\n _changeIcon() {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field.hasAttribute('active')) {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-down')\n icon.children[0].classList.add('fa-angle-up')\n }\n } else {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-up')\n icon.children[0].classList.add('fa-angle-down')\n }\n }\n }\n }\n}\nconst accordionList = []\nfor (const brAccordion of window.document.querySelectorAll('.br-accordion')) {\n accordionList.push(\n Object.create(new BRAccordion('br-accordion', brAccordion))\n )\n}\nexport default BRAccordion\n"],"sourceRoot":""}
\ No newline at end of file
.br-accordion{background:var(--bg-color);border-top:1px solid var(--color-secondary-04)}.br-accordion .item{border-bottom:1px solid var(--color-secondary-04);display:flex;flex-direction:column}.br-accordion .item[active]{border-bottom:0}.br-accordion .item[active] .header{font-weight:var(--font-weight-semi-bold)}.br-accordion .item[active]+.content{border-bottom:1px solid var(--color-secondary-04);display:block}.br-accordion .header{--bg-color:rgba(0,0,0,0);background:var(--bg-color);border:0;color:var(--interactive);display:flex;font-size:var(--font-size-scale-up-01);justify-content:space-between;padding:var(--spacing-scale-2x) 0;text-align:left;text-decoration:none;width:100%;outline:none}.br-accordion .header .icon{margin:0 var(--spacing-scale-2x) 0 var(--spacing-scale-baseh)}.br-accordion .header .title{flex:1;margin:0}.br-accordion .header:focus{outline:none}.br-accordion .header.focus-visible,.br-accordion .header:focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-accordion .header:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-accordion .header:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-accordion .content{color:var(--text-color);display:none;font-size:var(--font-size-scale-base);margin:0 var(--spacing-scale-base);padding:var(--spacing-scale-base) var(--spacing-scale-8x) var(--spacing-scale-2x)}.br-accordion .content :last-child{margin-bottom:0}.br-accordion[negative]{--interactive:var(--color-primary-pastel-01);--interactive-rgb:var(--rgb-primary-pastel-01);--visited:var(--color-secondary-04);--hover:var(--surface-opacity-sm,0.3);--pressed:var(--surface-opacity-lg,0.65);--focus-color:var(--color-support-10);--active:var(--color-secondary-01);--bg-color:var(--color-primary-darken-02);--text-color:var(--color-secondary-01)}
/*# sourceMappingURL=accordion.min.min.css.map */
\ No newline at end of file
{"version":3,"sources":["webpack://./src/components/accordion/_accordion.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA,cACE,0BAAA,CACA,8CADF,CAEE,oBACE,iDAAA,CACA,YAAA,CACA,qBAAJ,CACI,4BACE,eACN,CAAM,oCACE,wCAER,CAAM,qCACE,iDAAA,CACA,aAER,CAEE,sBACE,wBAAA,CACA,0BAAA,CACA,QAAA,CACA,wBAAA,CACA,YAAA,CACA,sCAAA,CACA,6BAAA,CACA,iCAAA,CACA,eAAA,CACA,oBAAA,CACA,UAAA,CACA,YAAJ,CACI,4BACE,6DACN,CACI,6BACE,MAAA,CACA,QACN,CCTE,4BACE,YDWJ,CCRE,wEAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCDSJ,CCnCI,2CACE,qHDqCN,CChCI,4CACE,yHDkCN,CAXE,uBACE,uBAAA,CACA,YAAA,CACA,qCAAA,CACA,kCAAA,CACA,iFAaJ,CAXM,mCACE,eAaR,CATE,wBCGA,4CAAA,CACA,8CAAA,CACA,mCAAA,CACA,qCAAA,CACA,wCAAA,CACA,qCAAA,CACA,kCAAA,CDPE,yCAAA,CACA,sCAkBJ","file":"accordion.min.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}accordion {\n background: v(bg-color);\n border-top: 1px solid v(color-secondary-04);\n .item {\n border-bottom: 1px solid v(color-secondary-04);\n display: flex;\n flex-direction: column;\n &[active] {\n border-bottom: 0;\n .header {\n font-weight: v(font-weight-semi-bold);\n }\n & + .content {\n border-bottom: 1px solid v(color-secondary-04);\n display: block;\n }\n }\n }\n .header {\n --bg-color: transparent;\n background: v(bg-color);\n border: 0;\n color: var(--interactive);\n display: flex;\n font-size: v(font-size-scale-up-01);\n justify-content: space-between;\n padding: v(spacing-scale-2x) 0;\n text-align: left;\n text-decoration: none;\n width: 100%;\n outline: none;\n .icon {\n margin: 0 v(spacing-scale-2x) 0 v(spacing-scale-baseh);\n }\n .title {\n flex: 1;\n margin: 0;\n }\n @include focus;\n @include hover;\n }\n .content {\n color: v(text-color);\n display: none;\n font-size: v(font-size-scale-base);\n margin: 0 v(spacing-scale-base);\n padding: v(spacing-scale-base) v(spacing-scale-8x) v(spacing-scale-2x);\n * {\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &[negative] {\n @include dark-mode;\n --bg-color: var(--color-primary-darken-02);\n --text-color: var(--color-secondary-01);\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Accordion</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../dsgov.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<p class="h5">Comportamento padrão</p>
<div class="row">
<div class="col-md-6">
<div class="br-accordion">
<div class="item">
<button class="header" type="button" aria-controls="id1" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">O que é esse serviço?</span></button>
</div>
<div class="content" id="id1" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id2" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Quem pode utilizar esse serviço?</span></button>
</div>