From d3f987dd456873f0186bf23082cbc771de8359e1 Mon Sep 17 00:00:00 2001 From: Maxw Morgan Date: Fri, 8 Sep 2023 10:30:34 -0400 Subject: [PATCH] Install prettier and format repository --- .github/ISSUE_TEMPLATE/bug_report.md | 18 +- .github/ISSUE_TEMPLATE/custom.md | 3 - .github/ISSUE_TEMPLATE/feature_request.md | 1 - .prettierignore | 8 + .prettierrc.json | 4 + .storybook/CODTheme.js | 81 +- .storybook/main.js | 25 +- .storybook/manager-head.html | 11 +- .storybook/manager.js | 12 +- .storybook/preview.js | 4 +- CHANGELOG.md | 1 - README.md | 57 +- babel.config.js | 62 +- cypress.json | 16 +- package.json | 1 + postcss.config.js | 9 +- .../atoms/AccordionBody/AccordionBody.js | 99 +- .../atoms/AccordionBody/cod-accordion-body.js | 4 +- .../atoms/AccordionHeader/AccordionHeader.js | 157 +- .../AccordionHeader/cod-accordion-header.js | 4 +- .../atoms/AccordionItem/AccordionItem.js | 212 +- .../atoms/AccordionItem/cod-accordion-item.js | 4 +- src/components/atoms/Alert/Alert.css | 6 +- src/components/atoms/Alert/Alert.js | 168 +- src/components/atoms/Alert/cod-alert.js | 4 +- src/components/atoms/Badge/Badge.css | 6 +- src/components/atoms/Badge/Badge.js | 105 +- src/components/atoms/Badge/cod-badge.js | 4 +- src/components/atoms/Breadcrumb/Breadcrumb.js | 118 +- .../atoms/Breadcrumb/cod-breadcrumb.js | 4 +- src/components/atoms/Button/Button.css | 153 +- src/components/atoms/Button/Button.js | 46 +- src/components/atoms/Button/cod-button.js | 2 +- src/components/atoms/CardBody/CardBody.css | 6 +- src/components/atoms/CardBody/CardBody.js | 80 +- .../atoms/CardBody/cod-card-body.js | 4 +- .../atoms/CardFooter/CardFooter.css | 6 +- src/components/atoms/CardFooter/CardFooter.js | 80 +- .../atoms/CardFooter/cod-card-footer.js | 4 +- .../atoms/CardHeader/CardHeader.css | 6 +- src/components/atoms/CardHeader/CardHeader.js | 80 +- .../atoms/CardHeader/cod-card-header.js | 4 +- .../atoms/CardOverlay/CardOverlay.css | 6 +- .../atoms/CardOverlay/CardOverlay.js | 80 +- .../atoms/CardOverlay/cod-card-overlay.js | 4 +- .../atoms/CarouselCaption/CarouselCaption.js | 100 +- .../CarouselCaption/cod-carousel-caption.js | 4 +- .../atoms/CarouselItem/CarouselItem.js | 80 +- .../atoms/CarouselItem/cod-carousel-item.js | 4 +- src/components/atoms/Container/Container.css | 152 +- src/components/atoms/Container/Container.js | 96 +- .../atoms/Container/cod-container.js | 4 +- .../atoms/DropdownMenu/DropdownMenu.js | 142 +- .../atoms/DropdownMenu/cod-dropdown-menu.js | 4 +- src/components/atoms/FormCheck/FormCheck.js | 99 +- .../atoms/FormCheck/cod-formcheck.js | 4 +- .../atoms/FormControl/FormControl.css | 6 +- .../atoms/FormControl/FormControl.js | 407 +- .../atoms/FormControl/cod-formcontrol.js | 4 +- src/components/atoms/FormLabel/FormLabel.css | 8 +- src/components/atoms/FormLabel/FormLabel.js | 98 +- .../atoms/FormLabel/cod-formlabel.js | 4 +- .../atoms/FormSelect/FormSelect.css | 6 +- src/components/atoms/FormSelect/FormSelect.js | 365 +- .../atoms/FormSelect/cod-formselect.js | 4 +- src/components/atoms/Icon/Icon.js | 254 +- src/components/atoms/Icon/cod-icon.js | 4 +- src/components/atoms/Image/Image.js | 76 +- src/components/atoms/Image/cod-image.js | 4 +- .../atoms/ListGroupItem/ListGroupItem.css | 24 +- .../atoms/ListGroupItem/ListGroupItem.js | 218 +- .../atoms/ListGroupItem/cod-listgroup-item.js | 4 +- src/components/atoms/Loader/Loader.css | 630 +- src/components/atoms/Loader/Loader.js | 78 +- src/components/atoms/Loader/cod-loader.js | 2 +- src/components/atoms/ModalBody/ModalBody.js | 100 +- .../atoms/ModalBody/cod-modal-body.js | 4 +- .../atoms/ModalFooter/ModalFooter.js | 138 +- .../atoms/ModalFooter/cod-modal-footer.js | 4 +- .../atoms/ModalHeader/ModalHeader.js | 148 +- .../atoms/ModalHeader/cod-modal-header.js | 4 +- .../atoms/NavbarBrand/NavbarBrand.css | 8 +- .../atoms/NavbarBrand/NavbarBrand.js | 127 +- .../atoms/NavbarBrand/cod-navbar-brand.js | 4 +- .../atoms/NavbarCollapse/NavbarCollapse.js | 74 +- .../NavbarCollapse/cod-navbar-collapse.js | 4 +- .../atoms/NavbarOffcanvas/NavbarOffcanvas.js | 233 +- .../NavbarOffcanvas/cod-navbar-offcanvas.js | 4 +- .../atoms/NavbarToggle/NavbarToggle.css | 8 +- .../atoms/NavbarToggle/NavbarToggle.js | 123 +- .../atoms/NavbarToggle/cod-navbar-toggle.js | 4 +- .../atoms/OffcanvasBody/OffcanvasBody.js | 100 +- .../atoms/OffcanvasBody/cod-offcanvas-body.js | 4 +- .../atoms/OffcanvasHeader/OffcanvasHeader.js | 148 +- .../OffcanvasHeader/cod-offcanvas-header.js | 4 +- .../atoms/PaginationItem/PaginationItem.js | 183 +- .../PaginationItem/cod-pagination-item.js | 4 +- src/components/atoms/Progress/Progress.js | 153 +- src/components/atoms/Progress/cod-progress.js | 4 +- src/components/atoms/Range/Range.js | 94 +- src/components/atoms/Range/cod-range.js | 4 +- src/components/atoms/Spinner/Spinner.js | 94 +- src/components/atoms/Spinner/cod-spinner.js | 4 +- src/components/atoms/TableBody/TableBody.js | 102 +- .../atoms/TableBody/cod-table-body.js | 4 +- src/components/atoms/TableCell/TableCell.css | 31 +- src/components/atoms/TableCell/TableCell.js | 120 +- .../atoms/TableCell/cod-table-cell.js | 4 +- .../atoms/TableCellHeader/TableCellHeader.css | 32 +- .../atoms/TableCellHeader/TableCellHeader.js | 122 +- .../TableCellHeader/cod-table-cell-header.js | 4 +- .../atoms/TableHeader/TableHeader.js | 94 +- .../atoms/TableHeader/cod-table-header.js | 4 +- src/components/atoms/TableRow/TableRow.css | 67 +- src/components/atoms/TableRow/TableRow.js | 120 +- .../atoms/TableRow/cod-table-row.js | 4 +- .../molecules/Accordion/Accordion.js | 138 +- .../molecules/Accordion/cod-accordion.js | 4 +- .../molecules/ButtonGroup/ButtonGroup.js | 131 +- .../molecules/ButtonGroup/cod-button-group.js | 4 +- src/components/molecules/Dropdown/Dropdown.js | 168 +- .../molecules/Dropdown/cod-dropdown.js | 4 +- .../FormCheckGroup/FormCheckGroup.js | 62 +- .../FormCheckGroup/cod-form-check-group.js | 4 +- .../molecules/ListGroup/ListGroup.js | 177 +- .../molecules/ListGroup/cod-listgroup.js | 4 +- src/components/molecules/Nav/Nav.css | 6 +- src/components/molecules/Nav/Nav.js | 142 +- src/components/molecules/Nav/cod-nav.js | 4 +- .../molecules/Pagination/Pagination.js | 148 +- .../molecules/Pagination/cod-pagination.js | 4 +- src/components/organisms/Card/Card.js | 206 +- src/components/organisms/Card/cod-card.js | 4 +- src/components/organisms/Carousel/Carousel.js | 437 +- .../organisms/Carousel/cod-carousel.js | 4 +- src/components/organisms/Form/Form.js | 118 +- src/components/organisms/Form/cod-form.js | 4 +- .../organisms/Geocoder/Geocoder.css | 12 +- src/components/organisms/Geocoder/Geocoder.js | 490 +- .../organisms/Geocoder/cod-geocoder.js | 4 +- src/components/organisms/Map/Map.css | 46 +- src/components/organisms/Map/Map.js | 353 +- src/components/organisms/Map/cod-map.js | 4 +- src/components/organisms/Map/style.json | 27215 ++++++---------- src/components/organisms/Modal/Modal.css | 6 +- src/components/organisms/Modal/Modal.js | 280 +- src/components/organisms/Modal/cod-modal.js | 4 +- src/components/organisms/Navbar/Navbar.css | 6 +- src/components/organisms/Navbar/Navbar.js | 285 +- src/components/organisms/Navbar/cod-navbar.js | 4 +- .../organisms/Offcanvas/Offcanvas.js | 237 +- .../organisms/Offcanvas/cod-offcanvas.js | 4 +- src/components/organisms/Table/Table.js | 176 +- src/components/organisms/Table/cod-table.js | 4 +- src/index.js | 110 +- src/scss/_host.scss | 6 +- src/scss/themed-bootstrap.scss | 36 +- src/shared/themed-bootstrap.css | 1138 +- src/shared/variables.css | 22 +- src/stories/Introduction.stories.mdx | 24 +- src/stories/Setup.stories.mdx | 111 +- src/stories/Styles.stories.mdx | 94 +- src/stories/accordion.stories.js | 394 +- src/stories/alert.stories.js | 163 +- src/stories/badge.stories.js | 177 +- src/stories/breadcrumb.stories.js | 88 +- src/stories/button.stories.js | 83 +- src/stories/buttongroup.stories.js | 367 +- src/stories/card.stories.js | 909 +- src/stories/carousel.stories.js | 401 +- src/stories/container.stories.js | 142 +- src/stories/dropdown.stories.js | 345 +- src/stories/form.stories.js | 164 +- src/stories/formcheck.stories.js | 447 +- src/stories/formcheckgroup.stories.js | 155 +- src/stories/formcontrol.stories.js | 243 +- src/stories/formlabel.stories.js | 103 +- src/stories/formselect.stories.js | 194 +- src/stories/geocoder.stories.js | 16 +- src/stories/icon.stories.js | 80 +- src/stories/image.stories.js | 91 +- src/stories/listgroup.stories.js | 530 +- src/stories/loader.stories.js | 18 +- src/stories/modal.stories.js | 362 +- src/stories/nav.stories.js | 290 +- src/stories/navbar.stories.js | 905 +- src/stories/offcanvas.stories.js | 413 +- src/stories/pagination.stories.js | 259 +- src/stories/progress.stories.js | 175 +- src/stories/range.stories.js | 96 +- src/stories/spinner.stories.js | 77 +- src/stories/table.stories.js | 674 +- webpack.config.js | 288 +- yarn.lock | 10 + 194 files changed, 21873 insertions(+), 26375 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.json diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea78..b5c68e55 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md index 48d5f81f..96a47352 100644 --- a/.github/ISSUE_TEMPLATE/custom.md +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -4,7 +4,4 @@ about: Describe this issue template's purpose here. title: '' labels: '' assignees: '' - --- - - diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d..2f28cead 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..548ef98d --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ +# Ignore artifacts: +.yarn/ +build +node_modules +public + +# Ignore yml files for now +*.yml diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..217337ea --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "tabWidth": 2 +} diff --git a/.storybook/CODTheme.js b/.storybook/CODTheme.js index 22e053bd..0f90d47f 100644 --- a/.storybook/CODTheme.js +++ b/.storybook/CODTheme.js @@ -1,40 +1,41 @@ -import { create } from '@storybook/theming'; - -export default create({ - base: 'light', - - colorPrimary: 'white', - colorSecondary: '#004445', - - // UI - appBg: 'white', - appContentBg: '#e6e6e6', - appBorderColor: '#004445', - appBorderRadius: 6, - - // Typography - fontBase: '"Montserrat", sans-serif', - fontCode: '"Montserrat", monospace', - - // Text colors - textColor: 'black', - textInverseColor: 'white', - textMutedColor: '#666666', - - // Toolbar default and active colors - barTextColor: 'white', - barSelectedColor: '#9FD5B3', - barBg: '#004445', - - // Form colors - inputBg: 'white', - inputBorder: '#004445', - inputTextColor: 'black', - inputBorderRadius: 4, - - // Brand assets - brandTitle: 'City of Detroit', - brandUrl: 'https://detroitmi.gov', - brandImage: 'https://detroitmi.gov/sites/detroitmi.localhost/files/2023-05/city-of-detroit-logo-1.png', - brandTarget: '_self', -}); \ No newline at end of file +import { create } from '@storybook/theming'; + +export default create({ + base: 'light', + + colorPrimary: 'white', + colorSecondary: '#004445', + + // UI + appBg: 'white', + appContentBg: '#e6e6e6', + appBorderColor: '#004445', + appBorderRadius: 6, + + // Typography + fontBase: '"Montserrat", sans-serif', + fontCode: '"Montserrat", monospace', + + // Text colors + textColor: 'black', + textInverseColor: 'white', + textMutedColor: '#666666', + + // Toolbar default and active colors + barTextColor: 'white', + barSelectedColor: '#9FD5B3', + barBg: '#004445', + + // Form colors + inputBg: 'white', + inputBorder: '#004445', + inputTextColor: 'black', + inputBorderRadius: 4, + + // Brand assets + brandTitle: 'City of Detroit', + brandUrl: 'https://detroitmi.gov', + brandImage: + 'https://detroitmi.gov/sites/detroitmi.localhost/files/2023-05/city-of-detroit-logo-1.png', + brandTarget: '_self', +}); diff --git a/.storybook/main.js b/.storybook/main.js index 563df7f1..011b4821 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,15 +1,22 @@ module.exports = { - "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], - "addons": ["@storybook/addon-links", "@storybook/addon-essentials", '@storybook/addon-a11y', '@storybook/addon-coverage', '@storybook/addon-interactions', "@storybook/addon-mdx-gfm"], - "framework": { - name: "@storybook/web-components-webpack5", - options: {} + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-a12y', + '@storybook/addon-coverage', + '@storybook/addon-interactions', + '@storybook/addon-mdx-gfm', + ], + framework: { + name: '@storybook/web-components-webpack5', + options: {}, }, features: { - interactionsDebugger: true + interactionsDebugger: true, }, staticDirs: ['../public'], docs: { - autodocs: true - } -}; \ No newline at end of file + autodocs: true, + }, +}; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 6e818711..75da2a18 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,4 +1,7 @@ - - - - \ No newline at end of file + + + + diff --git a/.storybook/manager.js b/.storybook/manager.js index db988df1..63a5a045 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,6 +1,6 @@ -import CODTheme from './CODTheme'; -import { addons } from '@storybook/addons'; - -addons.setConfig({ - theme: CODTheme, -}); \ No newline at end of file +import CODTheme from './CODTheme'; +import { addons } from '@storybook/addons'; + +addons.setConfig({ + theme: CODTheme, +}); diff --git a/.storybook/preview.js b/.storybook/preview.js index 1ace89e5..86076a44 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,11 +2,11 @@ import 'bootstrap/dist/css/bootstrap.min.css'; export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, -} \ No newline at end of file +}; diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c4279ae..bc6f19c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -118,7 +118,6 @@ - Moving image sources to slot. [#8](https://github.com/jedgar1mx/COD-Design-System/pull/8) ([@jedgar1mx](https://github.com/jedgar1mx)) - GitHub.actions [#1](https://github.com/jedgar1mx/COD-Design-System/pull/1) ([@jedgar1mx](https://github.com/jedgar1mx)) - #### 📝 Documentation - Issue.49 [#50](https://github.com/jedgar1mx/COD-Design-System/pull/50) ([@jedgar1mx](https://github.com/jedgar1mx)) diff --git a/README.md b/README.md index 918d652f..d285ff99 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,50 @@ # COD-Design-System + Design System proof of concept ## Getting Started This project was created using: - - [Webpack](https://webpack.js.org/) as a web application bundler. - - [Yarn](https://classic.yarnpkg.com/en/) to manage project dependencies. - - [MapLibre](https://maplibre.org/) for map framework. - - [Storybook](https://storybook.js.org/) for UI component management. + +- [Webpack](https://webpack.js.org/) as a web application bundler. +- [Yarn](https://classic.yarnpkg.com/en/) to manage project dependencies. +- [MapLibre](https://maplibre.org/) for map framework. +- [Storybook](https://storybook.js.org/) for UI component management. ## Using in Your Project + 1. Load package into your project - ``` - yarn add @cityofdetroit/cod-design-system - ``` - ``` - npm i @cityofdetroit/cod-design-system - ``` + ``` + yarn add @cityofdetroit/cod-design-system + ``` + ``` + npm i @cityofdetroit/cod-design-system + ``` -## Contributing +## Contributing ### Setup Local Environment 1. Download the repo. - ``` - $ git clone git@github.com:jedgar1mx/COD-Design-System.git - ``` + ``` + $ git clone git@github.com:jedgar1mx/COD-Design-System.git + ``` 2. Install node dependencies. - ``` - $ yarn - ``` + + ``` + $ yarn + ``` 3. Run local instance. - ``` - $ yarn storybook - ``` + + ``` + $ yarn storybook + ``` 4. Build storybook. - ``` - $ yarn build-storybook - ``` + ``` + $ yarn build-storybook + ``` ### Testing @@ -48,6 +53,6 @@ Use Storybooks [built-in test-runner](https://storybook.js.org/docs/react/writin 1. Run a local instance of storybook in one process. 2. Invoke the test runner in another. Note: depending on the power of you machine, you may have to reduce concurrent workers to avoid test timeout failures. Use `--maxWorkers=2` to limit the workers to two. - ``` - $ yarn test-storybook - ``` \ No newline at end of file + ``` + $ yarn test-storybook + ``` diff --git a/babel.config.js b/babel.config.js index 86f64afe..c5e23fe9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,31 +1,31 @@ -module.exports = { - presets: [ - [ - "@babel/preset-env", - { - modules: false - } - ], - "@babel/preset-react" - ], - plugins: [ - "@babel/plugin-transform-runtime", - "@babel/plugin-syntax-dynamic-import", - "@babel/plugin-proposal-class-properties" - ], - env: { - production: { - only: ["src"], - plugins: [ - [ - "transform-react-remove-prop-types", - { - removeImport: true - } - ], - "@babel/plugin-transform-react-inline-elements", - "@babel/plugin-transform-react-constant-elements" - ] - } - } -}; \ No newline at end of file +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + modules: false, + }, + ], + '@babel/preset-react', + ], + plugins: [ + '@babel/plugin-transform-runtime', + '@babel/plugin-syntax-dynamic-import', + '@babel/plugin-proposal-class-properties', + ], + env: { + production: { + only: ['src'], + plugins: [ + [ + 'transform-react-remove-prop-types', + { + removeImport: true, + }, + ], + '@babel/plugin-transform-react-inline-elements', + '@babel/plugin-transform-react-constant-elements', + ], + }, + }, +}; diff --git a/cypress.json b/cypress.json index fbee6bbc..b1dae77a 100644 --- a/cypress.json +++ b/cypress.json @@ -1,9 +1,9 @@ { - "baseUrl": "http://localhost:3000", - "defaultCommandTimeout": 100000, - "projectId": "local-services-lookup", - "pageLoadTimeout": 100000, - "video": false, - "videoUploadOnPasses": false, - "includeShadowDom": true - } \ No newline at end of file + "baseUrl": "http://localhost:3000", + "defaultCommandTimeout": 100000, + "projectId": "local-services-lookup", + "pageLoadTimeout": 100000, + "video": false, + "videoUploadOnPasses": false, + "includeShadowDom": true +} diff --git a/package.json b/package.json index 23ad1817..d9b721a1 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "postcss": "^8.4.21", "postcss-loader": "^7.0.2", "postcss-preset-env": "^8.0.1", + "prettier": "^3.0.3", "raw-loader": "^4.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/postcss.config.js b/postcss.config.js index f4a1ae72..859b96e5 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,3 @@ -module.exports = { - plugins: [ - require('autoprefixer'), - require('postcss-nested') - ] - } \ No newline at end of file +module.exports = { + plugins: [require('autoprefixer'), require('postcss-nested')], +}; diff --git a/src/components/atoms/AccordionBody/AccordionBody.js b/src/components/atoms/AccordionBody/AccordionBody.js index 7013751d..00da08f1 100644 --- a/src/components/atoms/AccordionBody/AccordionBody.js +++ b/src/components/atoms/AccordionBody/AccordionBody.js @@ -1,49 +1,50 @@ -import styles from '!!raw-loader!./AccordionBody.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class AccordionBody extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.accordionBody = document.createElement('div'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.accordionBody.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let extraClasses = this.getAttribute('data-extra-classes'); - let accordionBodyClasses = ['accordion-body']; - (extraClasses != undefined && extraClasses != null) ? accordionBodyClasses.push(extraClasses): 0; - this.accordionBody.className = accordionBodyClasses.join(' '); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.accordionBody); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./AccordionBody.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class AccordionBody extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.accordionBody = document.createElement('div'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.accordionBody.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let extraClasses = this.getAttribute('data-extra-classes'); + let accordionBodyClasses = ['accordion-body']; + extraClasses != undefined && extraClasses != null + ? accordionBodyClasses.push(extraClasses) + : 0; + this.accordionBody.className = accordionBodyClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.accordionBody); + } + } +} diff --git a/src/components/atoms/AccordionBody/cod-accordion-body.js b/src/components/atoms/AccordionBody/cod-accordion-body.js index c04240c9..752785be 100644 --- a/src/components/atoms/AccordionBody/cod-accordion-body.js +++ b/src/components/atoms/AccordionBody/cod-accordion-body.js @@ -1,2 +1,2 @@ -import AccordionBody from './AccordionBody'; -customElements.define('cod-accordion-body', AccordionBody); \ No newline at end of file +import AccordionBody from './AccordionBody'; +customElements.define('cod-accordion-body', AccordionBody); diff --git a/src/components/atoms/AccordionHeader/AccordionHeader.js b/src/components/atoms/AccordionHeader/AccordionHeader.js index 5800a82f..d5e5d86e 100644 --- a/src/components/atoms/AccordionHeader/AccordionHeader.js +++ b/src/components/atoms/AccordionHeader/AccordionHeader.js @@ -1,78 +1,79 @@ -import styles from '!!raw-loader!./AccordionHeader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class AccordionHeader extends HTMLElement { - static get observedAttributes() { - return ['data-expanded']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.accordionHeader = document.createElement('div'); - this.accordionBtn = document.createElement('button'); - this.accordionHeader.appendChild(this.accordionBtn); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.accordionBtn.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - this.accordionBtn.setAttribute('aria-expanded', newValue); - let tempClasses = this.accordionBtn.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'collapsed') ? tempClasses.push(popValue) : 0; - if(newValue == 'false'){ - tempClasses.push('collapsed'); - } - this.accordionBtn.className = tempClasses.join(' '); - } - - connectedCallback() { - // Nav attributes - let parentID = this.getAttribute('data-parent-id'); - let expanded = this.getAttribute('data-expanded'); - let extraClasses = this.getAttribute('data-extra-classes'); - let accordionBtnClasses = ['accordion-button']; - this.accordionBtn.setAttribute('type', 'button'); - this.accordionBtn.setAttribute('data-bs-toggle', 'collapse'); - this.accordionBtn.setAttribute('aria-controls', parentID); - this.accordionBtn.setAttribute('data-bs-target', `#${parentID}`); - if(expanded == 'true'){ - this.accordionBtn.setAttribute('aria-expanded', 'true'); - }else{ - accordionBtnClasses.push('collapsed'); - this.accordionBtn.setAttribute('aria-expanded', 'false'); - } - (extraClasses != undefined && extraClasses != null) ? accordionBtnClasses.push(extraClasses): 0; - this.accordionBtn.className = accordionBtnClasses.join(' '); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.accordionHeader); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./AccordionHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class AccordionHeader extends HTMLElement { + static get observedAttributes() { + return ['data-expanded']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.accordionHeader = document.createElement('div'); + this.accordionBtn = document.createElement('button'); + this.accordionHeader.appendChild(this.accordionBtn); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.accordionBtn.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + this.accordionBtn.setAttribute('aria-expanded', newValue); + let tempClasses = this.accordionBtn.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'collapsed' ? tempClasses.push(popValue) : 0; + if (newValue == 'false') { + tempClasses.push('collapsed'); + } + this.accordionBtn.className = tempClasses.join(' '); + } + + connectedCallback() { + // Nav attributes + let parentID = this.getAttribute('data-parent-id'); + let expanded = this.getAttribute('data-expanded'); + let extraClasses = this.getAttribute('data-extra-classes'); + let accordionBtnClasses = ['accordion-button']; + this.accordionBtn.setAttribute('type', 'button'); + this.accordionBtn.setAttribute('data-bs-toggle', 'collapse'); + this.accordionBtn.setAttribute('aria-controls', parentID); + this.accordionBtn.setAttribute('data-bs-target', `#${parentID}`); + if (expanded == 'true') { + this.accordionBtn.setAttribute('aria-expanded', 'true'); + } else { + accordionBtnClasses.push('collapsed'); + this.accordionBtn.setAttribute('aria-expanded', 'false'); + } + extraClasses != undefined && extraClasses != null + ? accordionBtnClasses.push(extraClasses) + : 0; + this.accordionBtn.className = accordionBtnClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.accordionHeader); + } + } +} diff --git a/src/components/atoms/AccordionHeader/cod-accordion-header.js b/src/components/atoms/AccordionHeader/cod-accordion-header.js index ebaa779e..97b2271f 100644 --- a/src/components/atoms/AccordionHeader/cod-accordion-header.js +++ b/src/components/atoms/AccordionHeader/cod-accordion-header.js @@ -1,2 +1,2 @@ -import AccordionHeader from './AccordionHeader'; -customElements.define('cod-accordion-header', AccordionHeader); \ No newline at end of file +import AccordionHeader from './AccordionHeader'; +customElements.define('cod-accordion-header', AccordionHeader); diff --git a/src/components/atoms/AccordionItem/AccordionItem.js b/src/components/atoms/AccordionItem/AccordionItem.js index df672ec2..0ee64304 100644 --- a/src/components/atoms/AccordionItem/AccordionItem.js +++ b/src/components/atoms/AccordionItem/AccordionItem.js @@ -1,97 +1,115 @@ -import styles from '!!raw-loader!./AccordionItem.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - -export default class AccordionItem extends HTMLElement { - static get observedAttributes() { - return ['data-expanded']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.accordionHeader = document.createElement('div'); - this.accordionBody = document.createElement('div'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - node.setAttribute('data-parent-id', `${this.getAttribute('data-parent-id')}-${this.getAttribute('data-index')}`); - (this.getAttribute('data-expanded') == 'true') ? node.setAttribute('data-expanded', true) : 0; - if(node.tagName == 'COD-ACCORDION-HEADER'){ - this.accordionHeader.append(node); - }else{ - this.accordionBody.append(node); - } - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - this.accordionHeader.querySelector('cod-accordion-header').setAttribute('data-expanded', newValue); - this.accordionBody.querySelector('cod-accordion-body').setAttribute('data-expanded', newValue); - let tempClasses = this.accordionBody.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - if(newValue == 'true'){ - tempClasses.push('show'); - } - this.accordionBody.className = tempClasses.join(' '); - } - - connectedCallback() { - // Nav attributes - let parentID = this.getAttribute('data-parent-id'); - let index = this.getAttribute('data-index'); - let expanded = this.getAttribute('data-expanded'); - let alwaysOpen = this.getAttribute('data-always-open'); - let headerExtraClasses = this.getAttribute('data-header-extra-classes'); - let bodyExtraClasses = this.getAttribute('data-body-extra-classes'); - let accordionHeaderClasses = ['accordion-header']; - let accordionBodyClasses = ['accordion-collapse collapse']; - (expanded == 'true') ? accordionBodyClasses.push('show'): 0; - (headerExtraClasses != undefined && headerExtraClasses != null) ? accordionHeaderClasses.push(headerExtraClasses): 0; - (bodyExtraClasses != undefined && bodyExtraClasses != null) ? accordionBodyClasses.push(bodyExtraClasses): 0; - this.accordionBody.id = `${parentID}-${index}`; - this.accordionHeader.className = accordionHeaderClasses.join(' '); - this.accordionBody.className = accordionBodyClasses.join(' '); - if(this.querySelector('cod-accordion-header')){ - this.querySelector('cod-accordion-header').addEventListener('click', this._onClick); - } - if(!this.shadowRoot.querySelector('ul')){ - this.shadowRoot.appendChild(this.accordionHeader); - this.shadowRoot.appendChild(this.accordionBody); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - if(e.target.getAttribute('data-expanded') == 'true'){ - this.getRootNode().host.setAttribute('data-expanded', 'false'); - }else{ - this.getRootNode().host.setAttribute('data-expanded', 'true'); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./AccordionItem.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class AccordionItem extends HTMLElement { + static get observedAttributes() { + return ['data-expanded']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.accordionHeader = document.createElement('div'); + this.accordionBody = document.createElement('div'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + node.setAttribute( + 'data-parent-id', + `${this.getAttribute('data-parent-id')}-${this.getAttribute( + 'data-index', + )}`, + ); + this.getAttribute('data-expanded') == 'true' + ? node.setAttribute('data-expanded', true) + : 0; + if (node.tagName == 'COD-ACCORDION-HEADER') { + this.accordionHeader.append(node); + } else { + this.accordionBody.append(node); + } + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + this.accordionHeader + .querySelector('cod-accordion-header') + .setAttribute('data-expanded', newValue); + this.accordionBody + .querySelector('cod-accordion-body') + .setAttribute('data-expanded', newValue); + let tempClasses = this.accordionBody.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'show' ? tempClasses.push(popValue) : 0; + if (newValue == 'true') { + tempClasses.push('show'); + } + this.accordionBody.className = tempClasses.join(' '); + } + + connectedCallback() { + // Nav attributes + let parentID = this.getAttribute('data-parent-id'); + let index = this.getAttribute('data-index'); + let expanded = this.getAttribute('data-expanded'); + let alwaysOpen = this.getAttribute('data-always-open'); + let headerExtraClasses = this.getAttribute('data-header-extra-classes'); + let bodyExtraClasses = this.getAttribute('data-body-extra-classes'); + let accordionHeaderClasses = ['accordion-header']; + let accordionBodyClasses = ['accordion-collapse collapse']; + expanded == 'true' ? accordionBodyClasses.push('show') : 0; + headerExtraClasses != undefined && headerExtraClasses != null + ? accordionHeaderClasses.push(headerExtraClasses) + : 0; + bodyExtraClasses != undefined && bodyExtraClasses != null + ? accordionBodyClasses.push(bodyExtraClasses) + : 0; + this.accordionBody.id = `${parentID}-${index}`; + this.accordionHeader.className = accordionHeaderClasses.join(' '); + this.accordionBody.className = accordionBodyClasses.join(' '); + if (this.querySelector('cod-accordion-header')) { + this.querySelector('cod-accordion-header').addEventListener( + 'click', + this._onClick, + ); + } + if (!this.shadowRoot.querySelector('ul')) { + this.shadowRoot.appendChild(this.accordionHeader); + this.shadowRoot.appendChild(this.accordionBody); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + if (e.target.getAttribute('data-expanded') == 'true') { + this.getRootNode().host.setAttribute('data-expanded', 'false'); + } else { + this.getRootNode().host.setAttribute('data-expanded', 'true'); + } + } +} diff --git a/src/components/atoms/AccordionItem/cod-accordion-item.js b/src/components/atoms/AccordionItem/cod-accordion-item.js index dae13f0f..d39a94e8 100644 --- a/src/components/atoms/AccordionItem/cod-accordion-item.js +++ b/src/components/atoms/AccordionItem/cod-accordion-item.js @@ -1,2 +1,2 @@ -import AccordionItem from './AccordionItem'; -customElements.define('cod-accordion-item', AccordionItem); \ No newline at end of file +import AccordionItem from './AccordionItem'; +customElements.define('cod-accordion-item', AccordionItem); diff --git a/src/components/atoms/Alert/Alert.css b/src/components/atoms/Alert/Alert.css index 7c9a9705..b532f33d 100644 --- a/src/components/atoms/Alert/Alert.css +++ b/src/components/atoms/Alert/Alert.css @@ -1,3 +1,3 @@ -.alert { - font-family: var(--font-family); -} \ No newline at end of file +.alert { + font-family: var(--font-family); +} diff --git a/src/components/atoms/Alert/Alert.js b/src/components/atoms/Alert/Alert.js index 33fcdb61..9cdb5940 100644 --- a/src/components/atoms/Alert/Alert.js +++ b/src/components/atoms/Alert/Alert.js @@ -1,79 +1,89 @@ -import styles from '!!raw-loader!./Alert.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -import bootstrapIcons from '!!raw-loader!bootstrap-icons/font/bootstrap-icons.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - -export default class Alert extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.alert = document.createElement('div'); - const alertContent = document.createElement('div'); - alertContent.id="alert-content"; - this.alert.appendChild(alertContent); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.alert.querySelector('#alert-content').append(node); - }) - }); - } - - connectedCallback() { - const bootIcons = document.createElement('style'); - bootIcons.textContent = bootstrapIcons; - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const alertStyles = document.createElement('style'); - alertStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(bootIcons); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(alertStyles); - // alert attributes - let icon = this.getAttribute('data-icon'); - let iconOrder = this.getAttribute('data-icon-order'); - let iconSize = this.getAttribute('data-icon-size'); - let backgroundColor = this.getAttribute('data-background-color'); - let extraClasses = this.getAttribute('data-extra-classes'); - this.alert.role = 'alert'; - let iconClass = ''; - if (icon != undefined && icon != null) { - this.alert.querySelector('#alert-content').className = 'col'; - let activeIcon = document.createElement('cod-icon'); - activeIcon.setAttribute('data-icon', icon); - activeIcon.setAttribute('data-size', iconSize); - let iconContainer = document.createElement('div'); - iconContainer.appendChild(activeIcon); - iconClass = 'd-flex'; - switch (iconOrder) { - case 'left': - iconContainer.className = 'pe-2 m-0' - this.alert.insertBefore(iconContainer, this.alert.querySelector('#alert-content')) - break; - - case 'right': - iconContainer.className = 'ps-2 m-0' - this.alert.appendChild(iconContainer); - break; - - default: - break; - } - } - this.alert.className = ['alert', `alert-${backgroundColor || ''}`, `${extraClasses || ''}`, iconClass].join(' '); - this.shadowRoot.appendChild(this.alert); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Alert.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +import bootstrapIcons from '!!raw-loader!bootstrap-icons/font/bootstrap-icons.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Alert extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.alert = document.createElement('div'); + const alertContent = document.createElement('div'); + alertContent.id = 'alert-content'; + this.alert.appendChild(alertContent); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.alert.querySelector('#alert-content').append(node); + }); + }); + } + + connectedCallback() { + const bootIcons = document.createElement('style'); + bootIcons.textContent = bootstrapIcons; + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const alertStyles = document.createElement('style'); + alertStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(bootIcons); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(alertStyles); + // alert attributes + let icon = this.getAttribute('data-icon'); + let iconOrder = this.getAttribute('data-icon-order'); + let iconSize = this.getAttribute('data-icon-size'); + let backgroundColor = this.getAttribute('data-background-color'); + let extraClasses = this.getAttribute('data-extra-classes'); + this.alert.role = 'alert'; + let iconClass = ''; + if (icon != undefined && icon != null) { + this.alert.querySelector('#alert-content').className = 'col'; + let activeIcon = document.createElement('cod-icon'); + activeIcon.setAttribute('data-icon', icon); + activeIcon.setAttribute('data-size', iconSize); + let iconContainer = document.createElement('div'); + iconContainer.appendChild(activeIcon); + iconClass = 'd-flex'; + switch (iconOrder) { + case 'left': + iconContainer.className = 'pe-2 m-0'; + this.alert.insertBefore( + iconContainer, + this.alert.querySelector('#alert-content'), + ); + break; + + case 'right': + iconContainer.className = 'ps-2 m-0'; + this.alert.appendChild(iconContainer); + break; + + default: + break; + } + } + this.alert.className = [ + 'alert', + `alert-${backgroundColor || ''}`, + `${extraClasses || ''}`, + iconClass, + ].join(' '); + this.shadowRoot.appendChild(this.alert); + } +} diff --git a/src/components/atoms/Alert/cod-alert.js b/src/components/atoms/Alert/cod-alert.js index e35a5199..1f231528 100644 --- a/src/components/atoms/Alert/cod-alert.js +++ b/src/components/atoms/Alert/cod-alert.js @@ -1,2 +1,2 @@ -import Alert from './Alert'; -customElements.define('cod-alert', Alert); \ No newline at end of file +import Alert from './Alert'; +customElements.define('cod-alert', Alert); diff --git a/src/components/atoms/Badge/Badge.css b/src/components/atoms/Badge/Badge.css index 4a775bd6..f54a6c83 100644 --- a/src/components/atoms/Badge/Badge.css +++ b/src/components/atoms/Badge/Badge.css @@ -1,3 +1,3 @@ -.badge { - font-family: var(--font-family); -} \ No newline at end of file +.badge { + font-family: var(--font-family); +} diff --git a/src/components/atoms/Badge/Badge.js b/src/components/atoms/Badge/Badge.js index 7d9f7f84..31b86979 100644 --- a/src/components/atoms/Badge/Badge.js +++ b/src/components/atoms/Badge/Badge.js @@ -1,50 +1,55 @@ -import styles from '!!raw-loader!./Badge.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -export default class Badge extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const badgeStyles = document.createElement('style'); - badgeStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(badgeStyles); - // badge attributes - let tag = this.getAttribute('data-tag'); - let backgroundColor = this.getAttribute('data-background-color'); - let text = this.getAttribute('data-text'); - let hiddenText = this.getAttribute('data-hidden-text'); - let pill = this.getAttribute('data-pill'); - let url = this.getAttribute('data-url'); - let extraClasses = this.getAttribute('data-extra-classes'); - let badge = null; - (pill == 'true') ? pill = 'rounded-pill' : pill = ''; - if(url != undefined || url != null){ - badge = document.createElement('a'); - badge.href = url; - }else{ - badge = document.createElement(tag); - } - badge.innerText = text; - if(hiddenText != undefined || hiddenText != null){ - const hiddenBadge = document.createElement('span'); - hiddenBadge.className = 'visually-hidden'; - hiddenBadge.innerText = hiddenText; - badge.appendChild(hiddenBadge); - } - badge.className = ['badge', `text-bg-${backgroundColor || ''}`, `${pill || ''}`, `${extraClasses || ''}`].join(' '); - if(!this.shadowRoot.querySelector(tag)){ - this.shadowRoot.appendChild(badge); - } - } - }; \ No newline at end of file +import styles from '!!raw-loader!./Badge.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +export default class Badge extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const badgeStyles = document.createElement('style'); + badgeStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(badgeStyles); + // badge attributes + let tag = this.getAttribute('data-tag'); + let backgroundColor = this.getAttribute('data-background-color'); + let text = this.getAttribute('data-text'); + let hiddenText = this.getAttribute('data-hidden-text'); + let pill = this.getAttribute('data-pill'); + let url = this.getAttribute('data-url'); + let extraClasses = this.getAttribute('data-extra-classes'); + let badge = null; + pill == 'true' ? (pill = 'rounded-pill') : (pill = ''); + if (url != undefined || url != null) { + badge = document.createElement('a'); + badge.href = url; + } else { + badge = document.createElement(tag); + } + badge.innerText = text; + if (hiddenText != undefined || hiddenText != null) { + const hiddenBadge = document.createElement('span'); + hiddenBadge.className = 'visually-hidden'; + hiddenBadge.innerText = hiddenText; + badge.appendChild(hiddenBadge); + } + badge.className = [ + 'badge', + `text-bg-${backgroundColor || ''}`, + `${pill || ''}`, + `${extraClasses || ''}`, + ].join(' '); + if (!this.shadowRoot.querySelector(tag)) { + this.shadowRoot.appendChild(badge); + } + } +} diff --git a/src/components/atoms/Badge/cod-badge.js b/src/components/atoms/Badge/cod-badge.js index 60476f19..a07493ba 100644 --- a/src/components/atoms/Badge/cod-badge.js +++ b/src/components/atoms/Badge/cod-badge.js @@ -1,2 +1,2 @@ -import Badge from './Badge'; -customElements.define('cod-badge', Badge); \ No newline at end of file +import Badge from './Badge'; +customElements.define('cod-badge', Badge); diff --git a/src/components/atoms/Breadcrumb/Breadcrumb.js b/src/components/atoms/Breadcrumb/Breadcrumb.js index c3ac012e..5900f724 100644 --- a/src/components/atoms/Breadcrumb/Breadcrumb.js +++ b/src/components/atoms/Breadcrumb/Breadcrumb.js @@ -1,59 +1,59 @@ -import styles from '!!raw-loader!./Breadcrumb.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - - -`; - -export default class Container extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.nav = shadow.querySelector('nav'); - this.breadcrumb = shadow.querySelector('ol'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - let nodeClasses = node.className.split(' '); - if(nodeClasses.includes('no-wc')){ - node.remove(); - }else{ - let crumb = this.querySelector( 'li' ); - crumb && this.breadcrumb.append( crumb ); - } - }); - }); - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const breadcrumbStyles = document.createElement('style'); - breadcrumbStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(breadcrumbStyles); - } - - connectedCallback() { - // Breadcrumb attributes - let noDivider = this.getAttribute('data-no-divider'); - let svg = this.getAttribute('data-svg-divider'); - if(noDivider == 'true'){ - this.nav.style.cssText = "--bs-breadcrumb-divider: '';" - } - if(svg != undefined || svg != null){ - this.nav.style.cssText = `--bs-breadcrumb-divider: url(${svg});` - } - this.shadowRoot.appendChild(this.nav); - } - }; \ No newline at end of file +import styles from '!!raw-loader!./Breadcrumb.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + + +`; + +export default class Container extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.nav = shadow.querySelector('nav'); + this.breadcrumb = shadow.querySelector('ol'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + let nodeClasses = node.className.split(' '); + if (nodeClasses.includes('no-wc')) { + node.remove(); + } else { + let crumb = this.querySelector('li'); + crumb && this.breadcrumb.append(crumb); + } + }); + }); + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const breadcrumbStyles = document.createElement('style'); + breadcrumbStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(breadcrumbStyles); + } + + connectedCallback() { + // Breadcrumb attributes + let noDivider = this.getAttribute('data-no-divider'); + let svg = this.getAttribute('data-svg-divider'); + if (noDivider == 'true') { + this.nav.style.cssText = "--bs-breadcrumb-divider: '';"; + } + if (svg != undefined || svg != null) { + this.nav.style.cssText = `--bs-breadcrumb-divider: url(${svg});`; + } + this.shadowRoot.appendChild(this.nav); + } +} diff --git a/src/components/atoms/Breadcrumb/cod-breadcrumb.js b/src/components/atoms/Breadcrumb/cod-breadcrumb.js index f6aa078c..96de77bf 100644 --- a/src/components/atoms/Breadcrumb/cod-breadcrumb.js +++ b/src/components/atoms/Breadcrumb/cod-breadcrumb.js @@ -1,2 +1,2 @@ -import Breadcrumb from './Breadcrumb'; -customElements.define('cod-breadcrumb', Breadcrumb); \ No newline at end of file +import Breadcrumb from './Breadcrumb'; +customElements.define('cod-breadcrumb', Breadcrumb); diff --git a/src/components/atoms/Button/Button.css b/src/components/atoms/Button/Button.css index 96e4c6d7..d558ae22 100644 --- a/src/components/atoms/Button/Button.css +++ b/src/components/atoms/Button/Button.css @@ -1,75 +1,78 @@ -.btn { - font-family: var(--font-family); - border-radius: 0; -} - -.cod-button--xsmall.cod-button--fluid { - font-size: .85em; - padding: .25em; -} - -.cod-button--small.cod-button--fluid { - font-size: 1em; - padding: .8em 1.1em; -} - -.cod-button--medium.cod-button--fluid { - font-size: 1.1em; - padding: .75em 1.25em; -} - -.cod-button--large.cod-button--fluid { - font-size: 1.2em; - padding: 1em 2em; -} - -.btn.cod-button--square { - font-size: 1.1em; - height: 2.5em; - width: 2.5em; -} - -.btn.cod-button--square.close { - --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e); - background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat; -} - -.btn-sm.cod-button--square { - font-size: 1em; - height: 2em; - width: 2em; -} - -.btn-lg.cod-button--square { - font-size: 1.2em; - height: 3em; - width: 3em; -} - -.cod-button--img { - display: flex; -} - -.cod-button--square.cod-button--img { - padding: 1px 6px; -} - -.cod-button--img img { - height: 1em; - margin-left: .5em; - position: relative; - top: 0.1em; -} - -.cod-button--square.cod-button--img img { - height: auto; - max-width: 100%; - margin: auto; - top: 0; -} - -cod-icon { - position: relative; - top: .1em; - margin: 0 .5em; -} \ No newline at end of file +.btn { + font-family: var(--font-family); + border-radius: 0; +} + +.cod-button--xsmall.cod-button--fluid { + font-size: 0.85em; + padding: 0.25em; +} + +.cod-button--small.cod-button--fluid { + font-size: 1em; + padding: 0.8em 1.1em; +} + +.cod-button--medium.cod-button--fluid { + font-size: 1.1em; + padding: 0.75em 1.25em; +} + +.cod-button--large.cod-button--fluid { + font-size: 1.2em; + padding: 1em 2em; +} + +.btn.cod-button--square { + font-size: 1.1em; + height: 2.5em; + width: 2.5em; +} + +.btn.cod-button--square.close { + --bs-btn-close-bg: url( + data:image/svg + xml, + %3csvgxmlns='http://www.w3.org/2000/svg'viewBox='0 0 16 16'fill='%23000'%3e%3cpathd='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e + ); + background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat; +} + +.btn-sm.cod-button--square { + font-size: 1em; + height: 2em; + width: 2em; +} + +.btn-lg.cod-button--square { + font-size: 1.2em; + height: 3em; + width: 3em; +} + +.cod-button--img { + display: flex; +} + +.cod-button--square.cod-button--img { + padding: 1px 6px; +} + +.cod-button--img img { + height: 1em; + margin-left: 0.5em; + position: relative; + top: 0.1em; +} + +.cod-button--square.cod-button--img img { + height: auto; + max-width: 100%; + margin: auto; + top: 0; +} + +cod-icon { + position: relative; + top: 0.1em; + margin: 0 0.5em; +} diff --git a/src/components/atoms/Button/Button.js b/src/components/atoms/Button/Button.js index 4cd72ed0..43a06e27 100644 --- a/src/components/atoms/Button/Button.js +++ b/src/components/atoms/Button/Button.js @@ -25,7 +25,7 @@ export default class Button extends HTMLElement { let hiddenLabel = this.getAttribute('data-hidden-label'); let imgSrc = this.getAttribute('data-img'); let imgAlt = this.getAttribute('data-img-alt'); - let img = (imgAlt != '') ? 'img' : 'not-img'; + let img = imgAlt != '' ? 'img' : 'not-img'; let size = this.getAttribute('data-size'); let extraClasses = this.getAttribute('data-extra-classes'); let label = this.getAttribute('data-label'); @@ -34,24 +34,30 @@ export default class Button extends HTMLElement { const btn = document.createElement('button'); let btnClasses = ['btn']; btn.type = 'button'; - if(btnID != null && btnID != undefined){ + if (btnID != null && btnID != undefined) { btn.id = btnID; } - (disableStatus == 'true') ? btn.disabled = true : btn.disabled = false; + disableStatus == 'true' ? (btn.disabled = true) : (btn.disabled = false); btn.setAttribute('aria-label', `${ariaLabel || ''}`); - if(primary == 'true'){ + if (primary == 'true') { btnClasses.push(`btn-${backgroundColor}`); - }else if(primary == 'false'){ + } else if (primary == 'false') { btnClasses.push(`btn-outline-${backgroundColor}`); } - (shape == 'square') ? btnClasses.push('cod-button--square') : btnClasses.push('cod-button-fluid'); - (size != undefined && size != null) ? btnClasses.push(`btn-${size}`) : 0; - (extraClasses != undefined && extraClasses != null) ? btnClasses.push(extraClasses) : 0; - (imgAlt != '') ? btnClasses.push('cod-button--img') : btnClasses.push('cod-button--not-img'); - (close == 'true') ? btnClasses.push('btn-close') : 0; + shape == 'square' + ? btnClasses.push('cod-button--square') + : btnClasses.push('cod-button-fluid'); + size != undefined && size != null ? btnClasses.push(`btn-${size}`) : 0; + extraClasses != undefined && extraClasses != null + ? btnClasses.push(extraClasses) + : 0; + imgAlt != '' + ? btnClasses.push('cod-button--img') + : btnClasses.push('cod-button--not-img'); + close == 'true' ? btnClasses.push('btn-close') : 0; btn.className = btnClasses.join(' '); - if(icon != ''){ + if (icon != '') { // Loading icon let iconContainer = document.createElement('span'); let activeIcon = document.createElement('cod-icon'); @@ -59,29 +65,29 @@ export default class Button extends HTMLElement { activeIcon.setAttribute('data-size', iconSize); iconContainer.appendChild(activeIcon); btn.innerText = label; - if(iconOrder == 'left'){ + if (iconOrder == 'left') { btn.insertBefore(iconContainer, btn.firstChild); - }else{ + } else { btn.appendChild(iconContainer); } - }else if(imgAlt != ''){ + } else if (imgAlt != '') { // Loading image btn.innerText = label; const btnIcon = document.createElement('img'); btnIcon.src = imgSrc; btnIcon.setAttribute('alt', imgAlt); btn.appendChild(btnIcon); - }else{ + } else { btn.innerText = label; } // Create hidden label - if(hiddenLabel != undefined && hiddenLabel != null){ + if (hiddenLabel != undefined && hiddenLabel != null) { let hLabel = document.createElement('span'); hLabel.className = 'visually-hidden'; hLabel.innerText = hiddenLabel; btn.appendChild(hLabel); } - if(!this.shadowRoot.querySelector('button')){ + if (!this.shadowRoot.querySelector('button')) { // Inserting styles const bootStyles = document.createElement('style'); bootStyles.textContent = bootstrapStyles; @@ -92,11 +98,11 @@ export default class Button extends HTMLElement { const btnStyles = document.createElement('style'); btnStyles.textContent = styles; this.shadowRoot.appendChild(btnStyles); - if(link == undefined || link == null){ + if (link == undefined || link == null) { this.shadowRoot.appendChild(btn); let ghostBtn = this.appendChild(document.createElement('button')); this.onclick = () => ghostBtn.click(); - }else{ + } else { const btnLink = document.createElement('a'); btnLink.href = link; btnLink.appendChild(btn); @@ -104,4 +110,4 @@ export default class Button extends HTMLElement { } } } -}; \ No newline at end of file +} diff --git a/src/components/atoms/Button/cod-button.js b/src/components/atoms/Button/cod-button.js index 6af7c90c..4a143fe3 100644 --- a/src/components/atoms/Button/cod-button.js +++ b/src/components/atoms/Button/cod-button.js @@ -1,2 +1,2 @@ import Button from './Button'; -customElements.define('cod-button', Button); \ No newline at end of file +customElements.define('cod-button', Button); diff --git a/src/components/atoms/CardBody/CardBody.css b/src/components/atoms/CardBody/CardBody.css index e695c293..73c7a037 100644 --- a/src/components/atoms/CardBody/CardBody.css +++ b/src/components/atoms/CardBody/CardBody.css @@ -1,3 +1,3 @@ -div{ - font-family: var(--font-family); -} \ No newline at end of file +div { + font-family: var(--font-family); +} diff --git a/src/components/atoms/CardBody/CardBody.js b/src/components/atoms/CardBody/CardBody.js index 7da76df5..973ad771 100644 --- a/src/components/atoms/CardBody/CardBody.js +++ b/src/components/atoms/CardBody/CardBody.js @@ -1,41 +1,39 @@ -import styles from '!!raw-loader!./CardBody.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class CardBody extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.cardBody = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.cardBody.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.cardBody); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./CardBody.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class CardBody extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.cardBody = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.cardBody.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.cardBody); + } +} diff --git a/src/components/atoms/CardBody/cod-card-body.js b/src/components/atoms/CardBody/cod-card-body.js index c0eddd84..d176116e 100644 --- a/src/components/atoms/CardBody/cod-card-body.js +++ b/src/components/atoms/CardBody/cod-card-body.js @@ -1,2 +1,2 @@ -import CardBody from './CardBody'; -customElements.define('cod-card-body', CardBody); \ No newline at end of file +import CardBody from './CardBody'; +customElements.define('cod-card-body', CardBody); diff --git a/src/components/atoms/CardFooter/CardFooter.css b/src/components/atoms/CardFooter/CardFooter.css index e695c293..73c7a037 100644 --- a/src/components/atoms/CardFooter/CardFooter.css +++ b/src/components/atoms/CardFooter/CardFooter.css @@ -1,3 +1,3 @@ -div{ - font-family: var(--font-family); -} \ No newline at end of file +div { + font-family: var(--font-family); +} diff --git a/src/components/atoms/CardFooter/CardFooter.js b/src/components/atoms/CardFooter/CardFooter.js index 46119818..4483bdf1 100644 --- a/src/components/atoms/CardFooter/CardFooter.js +++ b/src/components/atoms/CardFooter/CardFooter.js @@ -1,41 +1,39 @@ -import styles from '!!raw-loader!./CardFooter.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class CardFooter extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.cardFooter = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.cardFooter.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.cardFooter); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./CardFooter.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class CardFooter extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.cardFooter = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.cardFooter.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.cardFooter); + } +} diff --git a/src/components/atoms/CardFooter/cod-card-footer.js b/src/components/atoms/CardFooter/cod-card-footer.js index 01dc629d..6ac17453 100644 --- a/src/components/atoms/CardFooter/cod-card-footer.js +++ b/src/components/atoms/CardFooter/cod-card-footer.js @@ -1,2 +1,2 @@ -import CardFooter from './CardFooter'; -customElements.define('cod-card-footer', CardFooter); \ No newline at end of file +import CardFooter from './CardFooter'; +customElements.define('cod-card-footer', CardFooter); diff --git a/src/components/atoms/CardHeader/CardHeader.css b/src/components/atoms/CardHeader/CardHeader.css index e695c293..73c7a037 100644 --- a/src/components/atoms/CardHeader/CardHeader.css +++ b/src/components/atoms/CardHeader/CardHeader.css @@ -1,3 +1,3 @@ -div{ - font-family: var(--font-family); -} \ No newline at end of file +div { + font-family: var(--font-family); +} diff --git a/src/components/atoms/CardHeader/CardHeader.js b/src/components/atoms/CardHeader/CardHeader.js index 9b2d4f0f..29e3c21a 100644 --- a/src/components/atoms/CardHeader/CardHeader.js +++ b/src/components/atoms/CardHeader/CardHeader.js @@ -1,41 +1,39 @@ -import styles from '!!raw-loader!./CardHeader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class CardHeader extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.cardHeader = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.cardHeader.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.cardHeader); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./CardHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class CardHeader extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.cardHeader = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.cardHeader.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.cardHeader); + } +} diff --git a/src/components/atoms/CardHeader/cod-card-header.js b/src/components/atoms/CardHeader/cod-card-header.js index 5a362dad..87fae192 100644 --- a/src/components/atoms/CardHeader/cod-card-header.js +++ b/src/components/atoms/CardHeader/cod-card-header.js @@ -1,2 +1,2 @@ -import CardHeader from './CardHeader'; -customElements.define('cod-card-header', CardHeader); \ No newline at end of file +import CardHeader from './CardHeader'; +customElements.define('cod-card-header', CardHeader); diff --git a/src/components/atoms/CardOverlay/CardOverlay.css b/src/components/atoms/CardOverlay/CardOverlay.css index e695c293..73c7a037 100644 --- a/src/components/atoms/CardOverlay/CardOverlay.css +++ b/src/components/atoms/CardOverlay/CardOverlay.css @@ -1,3 +1,3 @@ -div{ - font-family: var(--font-family); -} \ No newline at end of file +div { + font-family: var(--font-family); +} diff --git a/src/components/atoms/CardOverlay/CardOverlay.js b/src/components/atoms/CardOverlay/CardOverlay.js index f9512e22..98731210 100644 --- a/src/components/atoms/CardOverlay/CardOverlay.js +++ b/src/components/atoms/CardOverlay/CardOverlay.js @@ -1,41 +1,39 @@ -import styles from '!!raw-loader!./CardOverlay.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class CardOverlay extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.cardOverlay = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.cardOverlay.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.cardOverlay); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./CardOverlay.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class CardOverlay extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.cardOverlay = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.cardOverlay.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.cardOverlay); + } +} diff --git a/src/components/atoms/CardOverlay/cod-card-overlay.js b/src/components/atoms/CardOverlay/cod-card-overlay.js index 5e98b023..d899f7a6 100644 --- a/src/components/atoms/CardOverlay/cod-card-overlay.js +++ b/src/components/atoms/CardOverlay/cod-card-overlay.js @@ -1,2 +1,2 @@ -import CardOverlay from './CardOverlay'; -customElements.define('cod-card-overlay', CardOverlay); \ No newline at end of file +import CardOverlay from './CardOverlay'; +customElements.define('cod-card-overlay', CardOverlay); diff --git a/src/components/atoms/CarouselCaption/CarouselCaption.js b/src/components/atoms/CarouselCaption/CarouselCaption.js index 93bc86e4..77c85c81 100644 --- a/src/components/atoms/CarouselCaption/CarouselCaption.js +++ b/src/components/atoms/CarouselCaption/CarouselCaption.js @@ -1,50 +1,50 @@ -import styles from '!!raw-loader!./CarouselCaption.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class CarouselCaption extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.carouselCaption = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.carouselCaption.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Modal attributes - let extraClasses = this.getAttribute('data-extra-classes'); - let carouselCaptionClasses = ['carousel-caption d-none d-md-block']; - (extraClasses != undefined && extraClasses != null) ? carouselCaptionClasses.push(extraClasses) : 0; - this.carouselCaption.className = carouselCaptionClasses.join(' '); - if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.carouselCaption); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./CarouselCaption.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class CarouselCaption extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.carouselCaption = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.carouselCaption.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Modal attributes + let extraClasses = this.getAttribute('data-extra-classes'); + let carouselCaptionClasses = ['carousel-caption d-none d-md-block']; + extraClasses != undefined && extraClasses != null + ? carouselCaptionClasses.push(extraClasses) + : 0; + this.carouselCaption.className = carouselCaptionClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.carouselCaption); + } + } +} diff --git a/src/components/atoms/CarouselCaption/cod-carousel-caption.js b/src/components/atoms/CarouselCaption/cod-carousel-caption.js index 618ee4ee..2dcb653a 100644 --- a/src/components/atoms/CarouselCaption/cod-carousel-caption.js +++ b/src/components/atoms/CarouselCaption/cod-carousel-caption.js @@ -1,2 +1,2 @@ -import CarouselCaption from './CarouselCaption'; -customElements.define('cod-carousel-caption', CarouselCaption); \ No newline at end of file +import CarouselCaption from './CarouselCaption'; +customElements.define('cod-carousel-caption', CarouselCaption); diff --git a/src/components/atoms/CarouselItem/CarouselItem.js b/src/components/atoms/CarouselItem/CarouselItem.js index 6a3719d2..3774a5b6 100644 --- a/src/components/atoms/CarouselItem/CarouselItem.js +++ b/src/components/atoms/CarouselItem/CarouselItem.js @@ -1,41 +1,39 @@ -import styles from '!!raw-loader!./CarouselItem.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class CarouselItem extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.carouselItem = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.carouselItem.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.carouselItem); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./CarouselItem.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class CarouselItem extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.carouselItem = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.carouselItem.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.carouselItem); + } +} diff --git a/src/components/atoms/CarouselItem/cod-carousel-item.js b/src/components/atoms/CarouselItem/cod-carousel-item.js index e21097bd..10f28e4c 100644 --- a/src/components/atoms/CarouselItem/cod-carousel-item.js +++ b/src/components/atoms/CarouselItem/cod-carousel-item.js @@ -1,2 +1,2 @@ -import CarouselItem from './CarouselItem'; -customElements.define('cod-carousel-item', CarouselItem); \ No newline at end of file +import CarouselItem from './CarouselItem'; +customElements.define('cod-carousel-item', CarouselItem); diff --git a/src/components/atoms/Container/Container.css b/src/components/atoms/Container/Container.css index 40ec1bea..988a5d61 100644 --- a/src/components/atoms/Container/Container.css +++ b/src/components/atoms/Container/Container.css @@ -1,76 +1,76 @@ -.container.color-1, -.container-fluid.color-1, -.container-xxl.color-1, -.container-xl.color-1, -.container-lg.color-1, -.container-md.color-1, -.container-sm.color-1 { - background-color: var(--color-1); - color: var(--color-light) -} - -.container.color-2, -.container-fluid.color-2, -.container-xxl.color-2, -.container-xl.color-2, -.container-lg.color-2, -.container-md.color-2, -.container-sm.color-2 { - background-color: var(--color-2); - color: var(--color-1) -} - -.container.color-3, -.container-fluid.color-3, -.container-xxl.color-3, -.container-xl.color-3, -.container-lg.color-3, -.container-md.color-3, -.container-sm.color-3 { - background-color: var(--color-3); - color: var(--color-dark) -} - -.container.color-4, -.container-fluid.color-4, -.container-xxl.color-4, -.container-xl.color-4, -.container-lg.color-4, -.container-md.color-4, -.container-sm.color-4 { - background-color: var(--color-4); - color: var(--color-light) -} - -.container.color-5, -.container-fluid.color-5, -.container-xxl.color-5, -.container-xl.color-5, -.container-lg.color-5, -.container-md.color-5, -.container-sm.color-5 { - background-color: var(--color-5); - color: var(--color-dark) -} - -.container.color-light, -.container-fluid.color-light, -.container-xxl.color-light, -.container-xl.color-light, -.container-lg.color-light, -.container-md.color-light, -.container-sm.color-light { - background-color: var(--color-light); - color: var(--color-dark) -} - -.container.color-dark, -.container-fluid.color-dark, -.container-xxl.color-dark, -.container-xl.color-dark, -.container-lg.color-dark, -.container-md.color-dark, -.container-sm.color-dark { - background-color: var(--color-dark); - color: var(--color-light) -} \ No newline at end of file +.container.color-1, +.container-fluid.color-1, +.container-xxl.color-1, +.container-xl.color-1, +.container-lg.color-1, +.container-md.color-1, +.container-sm.color-1 { + background-color: var(--color-1); + color: var(--color-light); +} + +.container.color-2, +.container-fluid.color-2, +.container-xxl.color-2, +.container-xl.color-2, +.container-lg.color-2, +.container-md.color-2, +.container-sm.color-2 { + background-color: var(--color-2); + color: var(--color-1); +} + +.container.color-3, +.container-fluid.color-3, +.container-xxl.color-3, +.container-xl.color-3, +.container-lg.color-3, +.container-md.color-3, +.container-sm.color-3 { + background-color: var(--color-3); + color: var(--color-dark); +} + +.container.color-4, +.container-fluid.color-4, +.container-xxl.color-4, +.container-xl.color-4, +.container-lg.color-4, +.container-md.color-4, +.container-sm.color-4 { + background-color: var(--color-4); + color: var(--color-light); +} + +.container.color-5, +.container-fluid.color-5, +.container-xxl.color-5, +.container-xl.color-5, +.container-lg.color-5, +.container-md.color-5, +.container-sm.color-5 { + background-color: var(--color-5); + color: var(--color-dark); +} + +.container.color-light, +.container-fluid.color-light, +.container-xxl.color-light, +.container-xl.color-light, +.container-lg.color-light, +.container-md.color-light, +.container-sm.color-light { + background-color: var(--color-light); + color: var(--color-dark); +} + +.container.color-dark, +.container-fluid.color-dark, +.container-xxl.color-dark, +.container-xl.color-dark, +.container-lg.color-dark, +.container-md.color-dark, +.container-sm.color-dark { + background-color: var(--color-dark); + color: var(--color-light); +} diff --git a/src/components/atoms/Container/Container.js b/src/components/atoms/Container/Container.js index 2ea15452..a80aa14d 100644 --- a/src/components/atoms/Container/Container.js +++ b/src/components/atoms/Container/Container.js @@ -1,46 +1,50 @@ -import styles from '!!raw-loader!./Container.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - -export default class Container extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.container = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.container.append(node); - }) - }); - } - - connectedCallback() { - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const containerStyles = document.createElement('style'); - containerStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(containerStyles); - // container attributes - let type = this.getAttribute('data-type'); - let text = this.getAttribute('data-text'); - let backgroundColor = this.getAttribute('data-background-color'); - let extraClasses = this.getAttribute('data-extra-classes'); - this.container.className = [type, `${backgroundColor || ''}`, `${extraClasses || ''}`].join(' '); - this.container.innerText = text; - this.shadowRoot.appendChild(this.container); - } - }; \ No newline at end of file +import styles from '!!raw-loader!./Container.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Container extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.container = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.container.append(node); + }); + }); + } + + connectedCallback() { + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const containerStyles = document.createElement('style'); + containerStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(containerStyles); + // container attributes + let type = this.getAttribute('data-type'); + let text = this.getAttribute('data-text'); + let backgroundColor = this.getAttribute('data-background-color'); + let extraClasses = this.getAttribute('data-extra-classes'); + this.container.className = [ + type, + `${backgroundColor || ''}`, + `${extraClasses || ''}`, + ].join(' '); + this.container.innerText = text; + this.shadowRoot.appendChild(this.container); + } +} diff --git a/src/components/atoms/Container/cod-container.js b/src/components/atoms/Container/cod-container.js index 62cd9934..ccd7c481 100644 --- a/src/components/atoms/Container/cod-container.js +++ b/src/components/atoms/Container/cod-container.js @@ -1,2 +1,2 @@ -import Container from './Container'; -customElements.define('cod-container', Container); \ No newline at end of file +import Container from './Container'; +customElements.define('cod-container', Container); diff --git a/src/components/atoms/DropdownMenu/DropdownMenu.js b/src/components/atoms/DropdownMenu/DropdownMenu.js index 35ceca17..1e58eb81 100644 --- a/src/components/atoms/DropdownMenu/DropdownMenu.js +++ b/src/components/atoms/DropdownMenu/DropdownMenu.js @@ -1,71 +1,71 @@ -import styles from '!!raw-loader!./DropdownMenu.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class DropdownMenu extends HTMLElement { - - static get observedAttributes() { - return ['data-show']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.dropdownMenu = document.createElement('ul'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.dropdownMenu.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - console.log(newValue); - let tempClasses = this.dropdownMenu.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - console.log(tempClasses); - if(newValue == 'true'){ - tempClasses.push('show'); - } - this.dropdownMenu.className = tempClasses.join(' '); - } - - connectedCallback() { - // badge attributes - let darkMode = this.getAttribute('data-dark-mode'); - let alignment = this.getAttribute('data-alignment'); - let show = this.getAttribute('data-show'); - let classList = ['dropdown-menu']; - (darkMode == 'true') ? classList.push('dropdown-menu-dark') : 0; - (alignment != undefined && alignment != null) ? classList.push(`dropdown-menu-${alignment}`) : 0; - (show == 'true') ? classList.push('show') : 0; - this.dropdownMenu.className = classList.join(' '); - - if(!this.shadowRoot.querySelector('ul')){ - this.shadowRoot.appendChild(this.dropdownMenu); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./DropdownMenu.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class DropdownMenu extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.dropdownMenu = document.createElement('ul'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.dropdownMenu.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + console.log(newValue); + let tempClasses = this.dropdownMenu.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'show' ? tempClasses.push(popValue) : 0; + console.log(tempClasses); + if (newValue == 'true') { + tempClasses.push('show'); + } + this.dropdownMenu.className = tempClasses.join(' '); + } + + connectedCallback() { + // badge attributes + let darkMode = this.getAttribute('data-dark-mode'); + let alignment = this.getAttribute('data-alignment'); + let show = this.getAttribute('data-show'); + let classList = ['dropdown-menu']; + darkMode == 'true' ? classList.push('dropdown-menu-dark') : 0; + alignment != undefined && alignment != null + ? classList.push(`dropdown-menu-${alignment}`) + : 0; + show == 'true' ? classList.push('show') : 0; + this.dropdownMenu.className = classList.join(' '); + + if (!this.shadowRoot.querySelector('ul')) { + this.shadowRoot.appendChild(this.dropdownMenu); + } + } +} diff --git a/src/components/atoms/DropdownMenu/cod-dropdown-menu.js b/src/components/atoms/DropdownMenu/cod-dropdown-menu.js index eaf21be6..9e842c99 100644 --- a/src/components/atoms/DropdownMenu/cod-dropdown-menu.js +++ b/src/components/atoms/DropdownMenu/cod-dropdown-menu.js @@ -1,2 +1,2 @@ -import DropdownMenu from './DropdownMenu'; -customElements.define('cod-dropdown-menu', DropdownMenu); \ No newline at end of file +import DropdownMenu from './DropdownMenu'; +customElements.define('cod-dropdown-menu', DropdownMenu); diff --git a/src/components/atoms/FormCheck/FormCheck.js b/src/components/atoms/FormCheck/FormCheck.js index e14ebf70..c73216b0 100644 --- a/src/components/atoms/FormCheck/FormCheck.js +++ b/src/components/atoms/FormCheck/FormCheck.js @@ -12,7 +12,7 @@ export default class FormCheck extends HTMLElement { // Always call super first in constructor super(); // Create a shadow root - const shadow = this.attachShadow({ mode: 'open'}); + const shadow = this.attachShadow({ mode: 'open' }); this.internals = this.attachInternals(); this.container = document.createElement('div'); this.formCheck = document.createElement('input'); @@ -24,7 +24,7 @@ export default class FormCheck extends HTMLElement { attributeChangedCallback(name, oldValue, newValue) { let tempClasses = this.formCheck.className.split(' '); let popValue = tempClasses.pop(); - (popValue != 'is-invalid') ? tempClasses.push(popValue) : 0; + popValue != 'is-invalid' ? tempClasses.push(popValue) : 0; switch (newValue) { case 'true': @@ -36,19 +36,19 @@ export default class FormCheck extends HTMLElement { case 'data-checked': this.formCheck.checked = true; - this.formCheck.setAttribute('aria-checked', "true"); + this.formCheck.setAttribute('aria-checked', 'true'); break; case 'data-required': this.formCheck.required = true; this.validateInput(); break; - + default: break; } break; - + case 'false': switch (name) { case 'data-invalid': @@ -57,23 +57,22 @@ export default class FormCheck extends HTMLElement { case 'data-checked': this.formCheck.checked = false; - this.formCheck.setAttribute('aria-checked', "false"); + this.formCheck.setAttribute('aria-checked', 'false'); break; case 'data-required': this.formCheck.required = false; this.validateInput(); break; - + default: break; } break; - + default: break; } - } connectedCallback() { @@ -97,29 +96,29 @@ export default class FormCheck extends HTMLElement { this.formCheck.value = value; this.formCheck.name = checkName; this.formCheck.setAttribute('autocomplete', 'off'); - if(required == 'true'){ + if (required == 'true') { this.formCheck.setAttribute('required', true); } - if(checked == 'true'){ + if (checked == 'true') { this.formCheck.checked = true; - this.formCheck.setAttribute('aria-checked', "true"); - }else{ - this.formCheck.setAttribute('aria-checked', "false"); + this.formCheck.setAttribute('aria-checked', 'true'); + } else { + this.formCheck.setAttribute('aria-checked', 'false'); } - if(disabled == 'true'){ - this.formCheck.setAttribute('disabled', true); + if (disabled == 'true') { + this.formCheck.setAttribute('disabled', true); } - if(mode == 'switch'){ + if (mode == 'switch') { this.formCheck.setAttribute('role', mode); } - if(mode == 'btn' || mode == 'btn-outline'){ + if (mode == 'btn' || mode == 'btn-outline') { this.formCheck.className = 'btn-check'; mode = null; - } else{ + } else { this.formCheck.className = 'form-check-input'; } - if(!this.shadowRoot.querySelector('div')){ + if (!this.shadowRoot.querySelector('div')) { // setting up styles const bootStyles = document.createElement('style'); bootStyles.textContent = bootstrapStyles; @@ -130,18 +129,28 @@ export default class FormCheck extends HTMLElement { this.shadowRoot.appendChild(bootStyles); this.shadowRoot.appendChild(variableStyles); this.shadowRoot.appendChild(formCheckStyles); - + // Set checkbox/radio mode - this.container.className = ['form-check', `form-${mode || ''}`, `bg-${backgroundColor || ''}`, `${extraClasses || ''}`].join(' '); + this.container.className = [ + 'form-check', + `form-${mode || ''}`, + `bg-${backgroundColor || ''}`, + `${extraClasses || ''}`, + ].join(' '); this.container.appendChild(this.formCheck); - - // Adding label to check/radio - if(noLabel != 'true'){ + + // Adding label to check/radio + if (noLabel != 'true') { const checkLabel = document.createElement('label'); checkLabel.setAttribute('for', id); checkLabel.innerText = labelTxt; - if(this.getAttribute('data-mode') == 'btn' || this.getAttribute('data-mode') == 'btn-outline'){ - checkLabel.className = `btn ${this.getAttribute('data-mode')}-${btnColor}`; + if ( + this.getAttribute('data-mode') == 'btn' || + this.getAttribute('data-mode') == 'btn-outline' + ) { + checkLabel.className = `btn ${this.getAttribute( + 'data-mode', + )}-${btnColor}`; } this.container.appendChild(checkLabel); } @@ -150,12 +159,12 @@ export default class FormCheck extends HTMLElement { this.shadowRoot.appendChild(this.container); } this.formCheck.addEventListener('change', (e) => { - // we also want to dispatch a `change` event from + // we also want to dispatch a `change` event from // our custom element this.setAttribute('data-invalid', false); const clone = new e.constructor(e.type, e); this.dispatchEvent(clone); - // set the element’s validity whenever the value of the + // set the element’s validity whenever the value of the // changes this.validateInput(); }); @@ -164,9 +173,9 @@ export default class FormCheck extends HTMLElement { this.invalid = true; this.pristine = false; this.setAttribute('data-invalid', true); - // when a custom error needs to be displayed, + // when a custom error needs to be displayed, // prevent the native error from showing - if(this.customErrorDisplay) { + if (this.customErrorDisplay) { e.preventDefault(); } }); @@ -194,7 +203,7 @@ export default class FormCheck extends HTMLElement { checkValidity() { return this.internals.checkValidity(); } - + reportValidity() { return this.internals.reportValidity(); } @@ -206,40 +215,40 @@ export default class FormCheck extends HTMLElement { this.invalid = false; // if the input is invalid, show the correct error - if(!validState.valid) { + if (!validState.valid) { // loop through the error reasons - for(let state in validState) { + for (let state in validState) { // get the name of the data attribute that holds the //error message const attr = `data-${state.toString()}`; // if there is an error and corresponding attribute holding // the message - if(validState[state]) { + if (validState[state]) { this.validationError = state.toString(); this.invalid = !this.pristine && !validState.valid; // get the correct error message - const errorMessage = this.hasAttribute(attr) ? - this.getAttribute(attr) : this.formCheck.validationMessage; + const errorMessage = this.hasAttribute(attr) + ? this.getAttribute(attr) + : this.formCheck.validationMessage; // set the validity error reason and the corresponding // message this.internals.setValidity( - {[this.validationError]: true}, - errorMessage + { [this.validationError]: true }, + errorMessage, ); - // when a custom error needs to be displayed, + // when a custom error needs to be displayed, // dispatch the 'invalid' event manually so consuming code - // can use this as a hook to get the correct error message + // can use this as a hook to get the correct error message // and display it - if(this.invalid && this.customErrorDisplay) { + if (this.invalid && this.customErrorDisplay) { this.dispatchEvent(new Event('invalid')); } } } - } - else { + } else { this.internals.setValidity({}); this.setAttribute('data-invalid', false); } } -}; \ No newline at end of file +} diff --git a/src/components/atoms/FormCheck/cod-formcheck.js b/src/components/atoms/FormCheck/cod-formcheck.js index 87de2b95..afeb83bc 100644 --- a/src/components/atoms/FormCheck/cod-formcheck.js +++ b/src/components/atoms/FormCheck/cod-formcheck.js @@ -1,2 +1,2 @@ -import FormCheck from './FormCheck'; -customElements.define('cod-form-check', FormCheck); \ No newline at end of file +import FormCheck from './FormCheck'; +customElements.define('cod-form-check', FormCheck); diff --git a/src/components/atoms/FormControl/FormControl.css b/src/components/atoms/FormControl/FormControl.css index 470d723f..4530bf20 100644 --- a/src/components/atoms/FormControl/FormControl.css +++ b/src/components/atoms/FormControl/FormControl.css @@ -1,3 +1,3 @@ -.form-control{ - border-radius: 0; -} \ No newline at end of file +.form-control { + border-radius: 0; +} diff --git a/src/components/atoms/FormControl/FormControl.js b/src/components/atoms/FormControl/FormControl.js index dc200a4d..e0987da1 100644 --- a/src/components/atoms/FormControl/FormControl.js +++ b/src/components/atoms/FormControl/FormControl.js @@ -1,201 +1,206 @@ -import styles from '!!raw-loader!./FormControl.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -export default class FormControl extends HTMLElement { - static formAssociated = true; - - static get observedAttributes() { - return ['data-invalid']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open'}); - this.internals = this.attachInternals(); - this.formControl = null; - this.invalid = false; - this.pristine = true; - } - - attributeChangedCallback(name, oldValue, newValue) { - let tempClasses = this.formControl.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'is-invalid') ? tempClasses.push(popValue) : 0; - - switch (newValue) { - case 'true': - console.log('invalid input'); - tempClasses.push('is-invalid'); - this.formControl.className = tempClasses.join(' '); - break; - - case 'false': - this.formControl.className = tempClasses.join(' '); - break; - - default: - break; - } - - } - - connectedCallback() { - // progress attributes - let inputType = this.getAttribute('data-tag') - let dataType = this.getAttribute('data-type'); - let id = this.getAttribute('data-id'); - let minlength = this.getAttribute('data-minlength'); - let maxlength = this.getAttribute('data-maxlength'); - let pattern = this.getAttribute('data-pattern'); - let placeholderTxt = this.getAttribute('data-placeholder-txt'); - let readOnly = this.getAttribute('data-read-only'); - let disabled = this.getAttribute('data-disabled'); - let plainText = this.getAttribute('data-plain-txt'); - let required = this.getAttribute('data-required'); - let rows = this.getAttribute('data-rows'); - let size = this.getAttribute('data-size'); - let value = this.getAttribute('data-value'); - let backgroundColor = this.getAttribute('data-background-color'); - const formControl = document.createElement(inputType); - formControl.id = id; - formControl.placeholder = placeholderTxt; - if(required == 'true'){ - formControl.setAttribute('required', true); - } - if(inputType != 'textarea'){ - formControl.type = dataType; - } - if(minlength != undefined && minlength != null){ - formControl.setAttribute('minlength', minlength); - } - if(maxlength != undefined && maxlength != null){ - formControl.setAttribute('maxlength', maxlength); - } - if(pattern != undefined && pattern != null){ - formControl.setAttribute('pattern', pattern); - } - if(rows != undefined && rows != null){ - formControl.setAttribute('rows', rows); - } - if(value != undefined && value != null){ - formControl.value = value; - } - if(readOnly == 'true'){ - formControl.setAttribute('readonly', true); - } - if(disabled == 'true'){ - formControl.setAttribute('disabled', true); - } - let colorPicker; - (dataType == 'color') ? colorPicker = dataType : colorPicker = ''; - formControl.className = ['form-control', `form-control-${size || ''}`, `form-control-${colorPicker || ''}`, `bg-${backgroundColor || ''}`, `form-control-${plainText || ''}`].join(' '); - - formControl.addEventListener('change', (e) => { - // we also want to dispatch a `change` event from - // our custom element - this.setAttribute('data-invalid', false); - const clone = new e.constructor(e.type, e); - this.dispatchEvent(clone); - // set the element’s validity whenever the value of the - // changes - this.validateInput(); - }); - - this.addEventListener('invalid', (e) => { - this.invalid = true; - this.pristine = false; - this.setAttribute('data-invalid', true); - // when a custom error needs to be displayed, - // prevent the native error from showing - if(this.customErrorDisplay) { - e.preventDefault(); - } - }); - - this.addEventListener('focus', () => formControl.focus()); - if (!this.hasAttribute('tabindex')) { - this.setAttribute('tabindex', '0'); - } - - if(!this.shadowRoot.querySelector(inputType)){ - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const formControlsStyles = document.createElement('style'); - formControlsStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(formControlsStyles); - - // Loading formcontrol to dom - this.shadowRoot.appendChild(formControl); - this.formControl = formControl; - } - - this.validateInput(); - } - - get validity() { - return this.internals.validity; - } - get validationMessage() { - return this.internals.validationMessage; - } - get willValidate() { - return this.internals.willValidate; - } - checkValidity() { - return this.internals.checkValidity(); - } - reportValidity() { - return this.internals.reportValidity(); - } - - validateInput() { - // get the validity of the internal - const validState = this.formControl.validity; - - // reset this.invalid before validating again - this.invalid = false; - - // if the input is invalid, show the correct error - if(!validState.valid) { - // loop through the error reasons - for(let state in validState) { - // get the name of the data attribute that holds the - //error message - const attr = `data-${state.toString()}`; - // if there is an error and corresponding attribute holding - // the message - if(validState[state]) { - this.validationError = state.toString(); - this.invalid = !this.pristine && !validState.valid; - - // get the correct error message - const errorMessage = this.hasAttribute(attr) ? - this.getAttribute(attr) : this.formControl.validationMessage; - // set the validity error reason and the corresponding - // message - this.internals.setValidity( - {[this.validationError]: true}, - errorMessage - ); - // when a custom error needs to be displayed, - // dispatch the 'invalid' event manually so consuming code - // can use this as a hook to get the correct error message - // and display it - if(this.invalid && this.customErrorDisplay) { - this.dispatchEvent(new Event('invalid')); - } - } - } - } - else { - this.internals.setValidity({}); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./FormControl.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +export default class FormControl extends HTMLElement { + static formAssociated = true; + + static get observedAttributes() { + return ['data-invalid']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + this.internals = this.attachInternals(); + this.formControl = null; + this.invalid = false; + this.pristine = true; + } + + attributeChangedCallback(name, oldValue, newValue) { + let tempClasses = this.formControl.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'is-invalid' ? tempClasses.push(popValue) : 0; + + switch (newValue) { + case 'true': + console.log('invalid input'); + tempClasses.push('is-invalid'); + this.formControl.className = tempClasses.join(' '); + break; + + case 'false': + this.formControl.className = tempClasses.join(' '); + break; + + default: + break; + } + } + + connectedCallback() { + // progress attributes + let inputType = this.getAttribute('data-tag'); + let dataType = this.getAttribute('data-type'); + let id = this.getAttribute('data-id'); + let minlength = this.getAttribute('data-minlength'); + let maxlength = this.getAttribute('data-maxlength'); + let pattern = this.getAttribute('data-pattern'); + let placeholderTxt = this.getAttribute('data-placeholder-txt'); + let readOnly = this.getAttribute('data-read-only'); + let disabled = this.getAttribute('data-disabled'); + let plainText = this.getAttribute('data-plain-txt'); + let required = this.getAttribute('data-required'); + let rows = this.getAttribute('data-rows'); + let size = this.getAttribute('data-size'); + let value = this.getAttribute('data-value'); + let backgroundColor = this.getAttribute('data-background-color'); + const formControl = document.createElement(inputType); + formControl.id = id; + formControl.placeholder = placeholderTxt; + if (required == 'true') { + formControl.setAttribute('required', true); + } + if (inputType != 'textarea') { + formControl.type = dataType; + } + if (minlength != undefined && minlength != null) { + formControl.setAttribute('minlength', minlength); + } + if (maxlength != undefined && maxlength != null) { + formControl.setAttribute('maxlength', maxlength); + } + if (pattern != undefined && pattern != null) { + formControl.setAttribute('pattern', pattern); + } + if (rows != undefined && rows != null) { + formControl.setAttribute('rows', rows); + } + if (value != undefined && value != null) { + formControl.value = value; + } + if (readOnly == 'true') { + formControl.setAttribute('readonly', true); + } + if (disabled == 'true') { + formControl.setAttribute('disabled', true); + } + let colorPicker; + dataType == 'color' ? (colorPicker = dataType) : (colorPicker = ''); + formControl.className = [ + 'form-control', + `form-control-${size || ''}`, + `form-control-${colorPicker || ''}`, + `bg-${backgroundColor || ''}`, + `form-control-${plainText || ''}`, + ].join(' '); + + formControl.addEventListener('change', (e) => { + // we also want to dispatch a `change` event from + // our custom element + this.setAttribute('data-invalid', false); + const clone = new e.constructor(e.type, e); + this.dispatchEvent(clone); + // set the element’s validity whenever the value of the + // changes + this.validateInput(); + }); + + this.addEventListener('invalid', (e) => { + this.invalid = true; + this.pristine = false; + this.setAttribute('data-invalid', true); + // when a custom error needs to be displayed, + // prevent the native error from showing + if (this.customErrorDisplay) { + e.preventDefault(); + } + }); + + this.addEventListener('focus', () => formControl.focus()); + if (!this.hasAttribute('tabindex')) { + this.setAttribute('tabindex', '0'); + } + + if (!this.shadowRoot.querySelector(inputType)) { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const formControlsStyles = document.createElement('style'); + formControlsStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(formControlsStyles); + + // Loading formcontrol to dom + this.shadowRoot.appendChild(formControl); + this.formControl = formControl; + } + + this.validateInput(); + } + + get validity() { + return this.internals.validity; + } + get validationMessage() { + return this.internals.validationMessage; + } + get willValidate() { + return this.internals.willValidate; + } + checkValidity() { + return this.internals.checkValidity(); + } + reportValidity() { + return this.internals.reportValidity(); + } + + validateInput() { + // get the validity of the internal + const validState = this.formControl.validity; + + // reset this.invalid before validating again + this.invalid = false; + + // if the input is invalid, show the correct error + if (!validState.valid) { + // loop through the error reasons + for (let state in validState) { + // get the name of the data attribute that holds the + //error message + const attr = `data-${state.toString()}`; + // if there is an error and corresponding attribute holding + // the message + if (validState[state]) { + this.validationError = state.toString(); + this.invalid = !this.pristine && !validState.valid; + + // get the correct error message + const errorMessage = this.hasAttribute(attr) + ? this.getAttribute(attr) + : this.formControl.validationMessage; + // set the validity error reason and the corresponding + // message + this.internals.setValidity( + { [this.validationError]: true }, + errorMessage, + ); + // when a custom error needs to be displayed, + // dispatch the 'invalid' event manually so consuming code + // can use this as a hook to get the correct error message + // and display it + if (this.invalid && this.customErrorDisplay) { + this.dispatchEvent(new Event('invalid')); + } + } + } + } else { + this.internals.setValidity({}); + } + } +} diff --git a/src/components/atoms/FormControl/cod-formcontrol.js b/src/components/atoms/FormControl/cod-formcontrol.js index e64cdec5..5d8650f9 100644 --- a/src/components/atoms/FormControl/cod-formcontrol.js +++ b/src/components/atoms/FormControl/cod-formcontrol.js @@ -1,2 +1,2 @@ -import FormControl from './FormControl'; -customElements.define('cod-form-control', FormControl); \ No newline at end of file +import FormControl from './FormControl'; +customElements.define('cod-form-control', FormControl); diff --git a/src/components/atoms/FormLabel/FormLabel.css b/src/components/atoms/FormLabel/FormLabel.css index 7c1ea374..3b9e07ff 100644 --- a/src/components/atoms/FormLabel/FormLabel.css +++ b/src/components/atoms/FormLabel/FormLabel.css @@ -1,4 +1,4 @@ -label.required-field:after{ - color: var(--bs-danger); - content: " *"; -} \ No newline at end of file +label.required-field:after { + color: var(--bs-danger); + content: ' *'; +} diff --git a/src/components/atoms/FormLabel/FormLabel.js b/src/components/atoms/FormLabel/FormLabel.js index d033ab61..8a42cb87 100644 --- a/src/components/atoms/FormLabel/FormLabel.js +++ b/src/components/atoms/FormLabel/FormLabel.js @@ -1,46 +1,52 @@ -import styles from '!!raw-loader!./FormLabel.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -export default class FormLabel extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - // progress attributes - let inputID = this.getAttribute('data-input-id') - let hidden = this.getAttribute('data-hidden'); - let textColor = this.getAttribute('data-color'); - let required = this.getAttribute('data-required'); - let text = this.getAttribute('data-text'); - let extraClasses = this.getAttribute('data-extra-classes'); - if(hidden == 'true') { - hidden = 'visually-hidden'; - }else{ - hidden = ''; - } - if(required == 'true') { - required = 'required-field'; - } - const label = document.createElement('label'); - label.innerText = text; - label.setAttribute('for', inputID); - label.className = ['form-label', hidden, required, `${extraClasses || ''}`, `text-${textColor || ''}`].join(' '); - if(!this.shadowRoot.querySelector('label')){ - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const formLabelStyles = document.createElement('style'); - formLabelStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(formLabelStyles); - this.shadowRoot.appendChild(label); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./FormLabel.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +export default class FormLabel extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + // progress attributes + let inputID = this.getAttribute('data-input-id'); + let hidden = this.getAttribute('data-hidden'); + let textColor = this.getAttribute('data-color'); + let required = this.getAttribute('data-required'); + let text = this.getAttribute('data-text'); + let extraClasses = this.getAttribute('data-extra-classes'); + if (hidden == 'true') { + hidden = 'visually-hidden'; + } else { + hidden = ''; + } + if (required == 'true') { + required = 'required-field'; + } + const label = document.createElement('label'); + label.innerText = text; + label.setAttribute('for', inputID); + label.className = [ + 'form-label', + hidden, + required, + `${extraClasses || ''}`, + `text-${textColor || ''}`, + ].join(' '); + if (!this.shadowRoot.querySelector('label')) { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const formLabelStyles = document.createElement('style'); + formLabelStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(formLabelStyles); + this.shadowRoot.appendChild(label); + } + } +} diff --git a/src/components/atoms/FormLabel/cod-formlabel.js b/src/components/atoms/FormLabel/cod-formlabel.js index 169cceda..ef1b929f 100644 --- a/src/components/atoms/FormLabel/cod-formlabel.js +++ b/src/components/atoms/FormLabel/cod-formlabel.js @@ -1,2 +1,2 @@ -import FormLabel from './FormLabel'; -customElements.define('cod-form-label', FormLabel); \ No newline at end of file +import FormLabel from './FormLabel'; +customElements.define('cod-form-label', FormLabel); diff --git a/src/components/atoms/FormSelect/FormSelect.css b/src/components/atoms/FormSelect/FormSelect.css index b6f005d7..f3013996 100644 --- a/src/components/atoms/FormSelect/FormSelect.css +++ b/src/components/atoms/FormSelect/FormSelect.css @@ -1,3 +1,3 @@ -.form-select{ - border-radius: 0; -} \ No newline at end of file +.form-select { + border-radius: 0; +} diff --git a/src/components/atoms/FormSelect/FormSelect.js b/src/components/atoms/FormSelect/FormSelect.js index 132a454b..9a713809 100644 --- a/src/components/atoms/FormSelect/FormSelect.js +++ b/src/components/atoms/FormSelect/FormSelect.js @@ -1,181 +1,184 @@ -import styles from '!!raw-loader!./FormSelect.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - - -`; - -export default class FormSelect extends HTMLElement { - static formAssociated = true; - - static get observedAttributes() { - return ['data-invalid']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.internals = this.attachInternals(); - // Create select and move options from slot to select - this.select = shadow.querySelector('select'); - shadow.addEventListener( 'slotchange', ev => { - let node = this.querySelector( 'option' ) - node && this.select.append( node ) - }); - } - - attributeChangedCallback(name, oldValue, newValue) { - let tempClasses = this.select.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'is-invalid') ? tempClasses.push(popValue) : 0; - - switch (newValue) { - case 'true': - tempClasses.push('is-invalid'); - this.select.className = tempClasses.join(' '); - break; - - case 'false': - this.select.className = tempClasses.join(' '); - break; - - default: - break; - } - - } - - connectedCallback() { - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const formSelectStyles = document.createElement('style'); - formSelectStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(formSelectStyles); - // progress attributes - let id = this.getAttribute('data-id') - let size = this.getAttribute('data-size'); - let multiple = this.getAttribute('data-multiple'); - let displayMultiple = this.getAttribute('data-display-multiple'); - let disabled = this.getAttribute('data-disabled'); - let required = this.getAttribute('data-required'); - let ariaLabel = this.getAttribute('data-aria-label'); - let extraClasses = this.getAttribute('data-extra-classes'); - - this.select.addEventListener('change', (e) => { - // we also want to dispatch a `change` event from - // our custom element - this.setAttribute('data-invalid', false); - const clone = new e.constructor(e.type, e); - this.dispatchEvent(clone); - // set the element’s validity whenever the value of the - // changes - this.validateSelect(); - }); - - this.addEventListener('invalid', (e) => { - this.invalid = true; - this.pristine = false; - this.setAttribute('data-invalid', true); - // when a custom error needs to be displayed, - // prevent the native error from showing - if(this.customErrorDisplay) { - e.preventDefault(); - } - }); - - this.addEventListener('focus', () => this.select.focus()); - if (!this.hasAttribute('tabindex')) { - this.setAttribute('tabindex', '0'); - } - - if(required == 'true') { - this.select.setAttribute('required', true); - } - if(disabled == 'true') { - this.select.setAttribute('disabled', true); - } - if(multiple == 'true') { - this.select.setAttribute('multiple', true); - } - if(displayMultiple != undefined && displayMultiple != null){ - this.select.setAttribute('size', displayMultiple); - } - this.select.setAttribute('aria-label', ariaLabel); - this.select.id = id; - this.select.className = ['form-select', `${extraClasses || ''}`, `form-select-${size || ''}`].join(' '); - // this.buildOptions(JSON.parse(options), this.select); - this.validateSelect(); - } - - get validity() { - return this.internals.validity; - } - get validationMessage() { - return this.internals.validationMessage; - } - get willValidate() { - return this.internals.willValidate; - } - checkValidity() { - return this.internals.checkValidity(); - } - reportValidity() { - return this.internals.reportValidity(); - } - - validateSelect() { - // get the validity of the internal - const validState = this.select.validity; - - // reset this.invalid before validating again - this.invalid = false; - - // if the input is invalid, show the correct error - if(!validState.valid) { - // loop through the error reasons - for(let state in validState) { - // get the name of the data attribute that holds the - //error message - const attr = `data-${state.toString()}`; - // if there is an error and corresponding attribute holding - // the message - if(validState[state]) { - this.validationError = state.toString(); - this.invalid = !this.pristine && !validState.valid; - - // get the correct error message - const errorMessage = this.hasAttribute(attr) ? - this.getAttribute(attr) : this.select.validationMessage; - // set the validity error reason and the corresponding - // message - this.internals.setValidity( - {[this.validationError]: true}, - errorMessage - ); - // when a custom error needs to be displayed, - // dispatch the 'invalid' event manually so consuming code - // can use this as a hook to get the correct error message - // and display it - if(this.invalid && this.customErrorDisplay) { - this.dispatchEvent(new Event('invalid')); - } - } - } - } - else { - this.internals.setValidity({}); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./FormSelect.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + + +`; + +export default class FormSelect extends HTMLElement { + static formAssociated = true; + + static get observedAttributes() { + return ['data-invalid']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.internals = this.attachInternals(); + // Create select and move options from slot to select + this.select = shadow.querySelector('select'); + shadow.addEventListener('slotchange', (ev) => { + let node = this.querySelector('option'); + node && this.select.append(node); + }); + } + + attributeChangedCallback(name, oldValue, newValue) { + let tempClasses = this.select.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'is-invalid' ? tempClasses.push(popValue) : 0; + + switch (newValue) { + case 'true': + tempClasses.push('is-invalid'); + this.select.className = tempClasses.join(' '); + break; + + case 'false': + this.select.className = tempClasses.join(' '); + break; + + default: + break; + } + } + + connectedCallback() { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const formSelectStyles = document.createElement('style'); + formSelectStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(formSelectStyles); + // progress attributes + let id = this.getAttribute('data-id'); + let size = this.getAttribute('data-size'); + let multiple = this.getAttribute('data-multiple'); + let displayMultiple = this.getAttribute('data-display-multiple'); + let disabled = this.getAttribute('data-disabled'); + let required = this.getAttribute('data-required'); + let ariaLabel = this.getAttribute('data-aria-label'); + let extraClasses = this.getAttribute('data-extra-classes'); + + this.select.addEventListener('change', (e) => { + // we also want to dispatch a `change` event from + // our custom element + this.setAttribute('data-invalid', false); + const clone = new e.constructor(e.type, e); + this.dispatchEvent(clone); + // set the element’s validity whenever the value of the + // changes + this.validateSelect(); + }); + + this.addEventListener('invalid', (e) => { + this.invalid = true; + this.pristine = false; + this.setAttribute('data-invalid', true); + // when a custom error needs to be displayed, + // prevent the native error from showing + if (this.customErrorDisplay) { + e.preventDefault(); + } + }); + + this.addEventListener('focus', () => this.select.focus()); + if (!this.hasAttribute('tabindex')) { + this.setAttribute('tabindex', '0'); + } + + if (required == 'true') { + this.select.setAttribute('required', true); + } + if (disabled == 'true') { + this.select.setAttribute('disabled', true); + } + if (multiple == 'true') { + this.select.setAttribute('multiple', true); + } + if (displayMultiple != undefined && displayMultiple != null) { + this.select.setAttribute('size', displayMultiple); + } + this.select.setAttribute('aria-label', ariaLabel); + this.select.id = id; + this.select.className = [ + 'form-select', + `${extraClasses || ''}`, + `form-select-${size || ''}`, + ].join(' '); + // this.buildOptions(JSON.parse(options), this.select); + this.validateSelect(); + } + + get validity() { + return this.internals.validity; + } + get validationMessage() { + return this.internals.validationMessage; + } + get willValidate() { + return this.internals.willValidate; + } + checkValidity() { + return this.internals.checkValidity(); + } + reportValidity() { + return this.internals.reportValidity(); + } + + validateSelect() { + // get the validity of the internal + const validState = this.select.validity; + + // reset this.invalid before validating again + this.invalid = false; + + // if the input is invalid, show the correct error + if (!validState.valid) { + // loop through the error reasons + for (let state in validState) { + // get the name of the data attribute that holds the + //error message + const attr = `data-${state.toString()}`; + // if there is an error and corresponding attribute holding + // the message + if (validState[state]) { + this.validationError = state.toString(); + this.invalid = !this.pristine && !validState.valid; + + // get the correct error message + const errorMessage = this.hasAttribute(attr) + ? this.getAttribute(attr) + : this.select.validationMessage; + // set the validity error reason and the corresponding + // message + this.internals.setValidity( + { [this.validationError]: true }, + errorMessage, + ); + // when a custom error needs to be displayed, + // dispatch the 'invalid' event manually so consuming code + // can use this as a hook to get the correct error message + // and display it + if (this.invalid && this.customErrorDisplay) { + this.dispatchEvent(new Event('invalid')); + } + } + } + } else { + this.internals.setValidity({}); + } + } +} diff --git a/src/components/atoms/FormSelect/cod-formselect.js b/src/components/atoms/FormSelect/cod-formselect.js index 97c140e5..dad28e51 100644 --- a/src/components/atoms/FormSelect/cod-formselect.js +++ b/src/components/atoms/FormSelect/cod-formselect.js @@ -1,2 +1,2 @@ -import FormSelect from './FormSelect'; -customElements.define('cod-form-select', FormSelect); \ No newline at end of file +import FormSelect from './FormSelect'; +customElements.define('cod-form-select', FormSelect); diff --git a/src/components/atoms/Icon/Icon.js b/src/components/atoms/Icon/Icon.js index 07c4bae4..91ff2a66 100644 --- a/src/components/atoms/Icon/Icon.js +++ b/src/components/atoms/Icon/Icon.js @@ -1,127 +1,127 @@ -export default class Icon extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - // Icon attributes - let icon = this.getAttribute('data-icon'); - let size = this.getAttribute('data-size'); - switch (size) { - case 'small': - size = '16'; - break; - - case 'medium': - size = '24'; - break; - - case 'large': - size = '36'; - break; - - case 'x-large': - size = '54'; - break; - - default: - break; - } - const iconContainer = document.createElement('span'); - iconContainer.innerHTML = this.getIcon(icon,size); - this.shadowRoot.appendChild(iconContainer); - } - - getIcon(icon, size) { - switch (icon) { - case 'house': - return ` - - - `; - break; - - case 'house-fill': - return ` - - - - `; - break; - - case 'exclamation-circle': - return ` - - - - `; - break; - - case 'exclamation-circle-fill': - return ` - - - `; - break; - - case 'exclamation-triangle': - return ` - - - - `; - break; - - case 'check-circle': - return ` - - - - `; - break; - - case 'check-circle-fill': - return ` - - - `; - break; - - case 'calendar': - return ` - - - `; - break; - - case 'calendar-fill': - return ` - - - `; - break; - - case 'calendar-date': - return ` - - - - `; - break; - - case 'calendar-date-fill': - return ` - - - - `; - break; - - default: - break; - } - } -}; \ No newline at end of file +export default class Icon extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + // Icon attributes + let icon = this.getAttribute('data-icon'); + let size = this.getAttribute('data-size'); + switch (size) { + case 'small': + size = '16'; + break; + + case 'medium': + size = '24'; + break; + + case 'large': + size = '36'; + break; + + case 'x-large': + size = '54'; + break; + + default: + break; + } + const iconContainer = document.createElement('span'); + iconContainer.innerHTML = this.getIcon(icon, size); + this.shadowRoot.appendChild(iconContainer); + } + + getIcon(icon, size) { + switch (icon) { + case 'house': + return ` + + + `; + break; + + case 'house-fill': + return ` + + + + `; + break; + + case 'exclamation-circle': + return ` + + + + `; + break; + + case 'exclamation-circle-fill': + return ` + + + `; + break; + + case 'exclamation-triangle': + return ` + + + + `; + break; + + case 'check-circle': + return ` + + + + `; + break; + + case 'check-circle-fill': + return ` + + + `; + break; + + case 'calendar': + return ` + + + `; + break; + + case 'calendar-fill': + return ` + + + `; + break; + + case 'calendar-date': + return ` + + + + `; + break; + + case 'calendar-date-fill': + return ` + + + + `; + break; + + default: + break; + } + } +} diff --git a/src/components/atoms/Icon/cod-icon.js b/src/components/atoms/Icon/cod-icon.js index 70a021c0..f76b55a9 100644 --- a/src/components/atoms/Icon/cod-icon.js +++ b/src/components/atoms/Icon/cod-icon.js @@ -1,2 +1,2 @@ -import Icon from './Icon'; -customElements.define('cod-icon', Icon); \ No newline at end of file +import Icon from './Icon'; +customElements.define('cod-icon', Icon); diff --git a/src/components/atoms/Image/Image.js b/src/components/atoms/Image/Image.js index 5b9be0a2..2e12462c 100644 --- a/src/components/atoms/Image/Image.js +++ b/src/components/atoms/Image/Image.js @@ -1,38 +1,38 @@ -import styles from '!!raw-loader!./Image.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - - -`; - -export default class Image extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - // Create select and move options from slot to select - this.picture = shadow.querySelector('picture'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.picture.append(node); - }) - }); - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const imageStyles = document.createElement('style'); - imageStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(imageStyles); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Image.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + + +`; + +export default class Image extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + // Create select and move options from slot to select + this.picture = shadow.querySelector('picture'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.picture.append(node); + }); + }); + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const imageStyles = document.createElement('style'); + imageStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(imageStyles); + } +} diff --git a/src/components/atoms/Image/cod-image.js b/src/components/atoms/Image/cod-image.js index 1ab4ed68..c287090e 100644 --- a/src/components/atoms/Image/cod-image.js +++ b/src/components/atoms/Image/cod-image.js @@ -1,2 +1,2 @@ -import Image from './Image'; -customElements.define('cod-image', Image); \ No newline at end of file +import Image from './Image'; +customElements.define('cod-image', Image); diff --git a/src/components/atoms/ListGroupItem/ListGroupItem.css b/src/components/atoms/ListGroupItem/ListGroupItem.css index cb824858..e00a31c6 100644 --- a/src/components/atoms/ListGroupItem/ListGroupItem.css +++ b/src/components/atoms/ListGroupItem/ListGroupItem.css @@ -1,12 +1,12 @@ -.list-group-item.first { - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} - -.list-group-flush.list-group-item { - border-width: 0 0 var(--bs-list-group-border-width); -} - -.list-group-flush.list-group-item.last{ - border-bottom-width: 0; -} \ No newline at end of file +.list-group-item.first { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.list-group-flush.list-group-item { + border-width: 0 0 var(--bs-list-group-border-width); +} + +.list-group-flush.list-group-item.last { + border-bottom-width: 0; +} diff --git a/src/components/atoms/ListGroupItem/ListGroupItem.js b/src/components/atoms/ListGroupItem/ListGroupItem.js index a66bfaba..23030ffb 100644 --- a/src/components/atoms/ListGroupItem/ListGroupItem.js +++ b/src/components/atoms/ListGroupItem/ListGroupItem.js @@ -1,107 +1,111 @@ -import styles from '!!raw-loader!./ListGroupItem.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class ListGroupItem extends HTMLElement { - - static get observedAttributes() { - return ['data-order', 'data-parent-classes', 'data-order-index']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.listGroupItem = null; - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - switch (name) { - case 'data-order': - if(newValue != null){ - this.listGroupItem.className = `${this.listGroupItem.className} ${newValue}`; - } - break; - - case 'data-parent-classes': - if(newValue != null){ - this.listGroupItem.className = `${this.listGroupItem.className} ${newValue}`; - } - break; - - case 'data-order-index': - console.log(newValue); - if(newValue != null){ - this.listGroupItem.innerHTML = `${newValue}. ${this.listGroupItem.innerHTML}`; - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.listGroupItem.append(node); - }); - } - break; - - default: - break; - } - - } - - connectedCallback() { - // badge attributes - let tag = this.getAttribute('data-tag'); - let backgroundColor = this.getAttribute('data-background-color'); - let current = this.getAttribute('data-current'); - let disabled = this.getAttribute('data-disabled'); - let text = this.getAttribute('data-text'); - let extraClasses = this.getAttribute('data-extra-classes'); - let url = this.getAttribute('data-url'); - this.listGroupItem = document.createElement(tag); - let actionItem = ''; - (tag == 'a' || tag == 'button') ? actionItem = 'list-group-item-action' : 0; - if(text != undefined || text != null){ - this.listGroupItem.innerText = text; - } - if(url != undefined || url != null){ - this.listGroupItem.href = url; - } - if(current == 'true'){ - this.listGroupItem.setAttribute('aria-current', 'true'); - current = 'active' - } - if(disabled == 'true'){ - this.listGroupItem.setAttribute('aria-disabled', 'true'); - disabled = 'disabled' - } - this.listGroupItem.className = ['list-group-item', `list-group-item-${backgroundColor || ''}`, `${current || ''}`, `${disabled || ''}`, `${actionItem || ''}`, `${extraClasses || ''}`].join(' '); - - if(!this.shadowRoot.querySelector(tag)){ - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.listGroupItem.append(node); - }); - }); - this.shadowRoot.appendChild(this.listGroupItem); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./ListGroupItem.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class ListGroupItem extends HTMLElement { + static get observedAttributes() { + return ['data-order', 'data-parent-classes', 'data-order-index']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.listGroupItem = null; + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'data-order': + if (newValue != null) { + this.listGroupItem.className = `${this.listGroupItem.className} ${newValue}`; + } + break; + + case 'data-parent-classes': + if (newValue != null) { + this.listGroupItem.className = `${this.listGroupItem.className} ${newValue}`; + } + break; + + case 'data-order-index': + console.log(newValue); + if (newValue != null) { + this.listGroupItem.innerHTML = `${newValue}. ${this.listGroupItem.innerHTML}`; + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.listGroupItem.append(node); + }); + } + break; + + default: + break; + } + } + + connectedCallback() { + // badge attributes + let tag = this.getAttribute('data-tag'); + let backgroundColor = this.getAttribute('data-background-color'); + let current = this.getAttribute('data-current'); + let disabled = this.getAttribute('data-disabled'); + let text = this.getAttribute('data-text'); + let extraClasses = this.getAttribute('data-extra-classes'); + let url = this.getAttribute('data-url'); + this.listGroupItem = document.createElement(tag); + let actionItem = ''; + tag == 'a' || tag == 'button' ? (actionItem = 'list-group-item-action') : 0; + if (text != undefined || text != null) { + this.listGroupItem.innerText = text; + } + if (url != undefined || url != null) { + this.listGroupItem.href = url; + } + if (current == 'true') { + this.listGroupItem.setAttribute('aria-current', 'true'); + current = 'active'; + } + if (disabled == 'true') { + this.listGroupItem.setAttribute('aria-disabled', 'true'); + disabled = 'disabled'; + } + this.listGroupItem.className = [ + 'list-group-item', + `list-group-item-${backgroundColor || ''}`, + `${current || ''}`, + `${disabled || ''}`, + `${actionItem || ''}`, + `${extraClasses || ''}`, + ].join(' '); + + if (!this.shadowRoot.querySelector(tag)) { + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.listGroupItem.append(node); + }); + }); + this.shadowRoot.appendChild(this.listGroupItem); + } + } +} diff --git a/src/components/atoms/ListGroupItem/cod-listgroup-item.js b/src/components/atoms/ListGroupItem/cod-listgroup-item.js index 5d6a8969..a90c4081 100644 --- a/src/components/atoms/ListGroupItem/cod-listgroup-item.js +++ b/src/components/atoms/ListGroupItem/cod-listgroup-item.js @@ -1,2 +1,2 @@ -import ListGroupItem from './ListGroupItem'; -customElements.define('cod-listgroup-item', ListGroupItem); \ No newline at end of file +import ListGroupItem from './ListGroupItem'; +customElements.define('cod-listgroup-item', ListGroupItem); diff --git a/src/components/atoms/Loader/Loader.css b/src/components/atoms/Loader/Loader.css index c3ac35c2..9dde15ea 100644 --- a/src/components/atoms/Loader/Loader.css +++ b/src/components/atoms/Loader/Loader.css @@ -1,295 +1,335 @@ -.loader-box { - display: flex; - width: 100%; - height: 100%; - background-color: rgba(255, 255, 255, .75); - position: absolute; - left: -0.2em; - top: -0.2em; -} - -.cod-loader-container { - display: flex; - margin: auto; -} - -.cod-loader-container article { - margin: auto; -} - -.cod-loader-container article p { - text-align: center; - font-family: var(--font-family); - margin-left: 0.5em; -} - -.cod-loader-bars { - position: relative; - width: 75px; - height: 100px; -} - -.cod-loader.cod-loader--color-1 .cod-loader-container article .cod-loader-bars .cod-loader__bar { - background: var(--color-1); -} - -.cod-loader.cod-loader--color-2 .cod-loader-container article .cod-loader-bars .cod-loader__bar { - background: var(--color-2); -} - -.cod-loader.cod-loader--color-3 .cod-loader-container article .cod-loader-bars .cod-loader__bar { - background: var(--color-3); -} - -.cod-loader.cod-loader--color-4 .cod-loader-container article .cod-loader-bars .cod-loader__bar { - background: var(--color-4); -} - -.cod-loader.cod-loader--color-5 .cod-loader-container article .cod-loader-bars .cod-loader__bar { - background: var(--color-5); -} - -.cod-loader__bar { - position: absolute; - bottom: 0; - width: 10px; - height: 50%; - transform-origin: center bottom; - box-shadow: 1px 1px 0 rgba(0, 0, 0, .2); -} - -.cod-loader__bar:nth-child(1) { - left: 0px; - transform: scale(1, 0.2); - animation: barUp1 4s infinite; -} - -.cod-loader__bar:nth-child(2) { - left: 20px; - transform: scale(1, 0.4); - animation: barUp2 4s infinite; -} - -.cod-loader__bar:nth-child(3) { - left: 40px; - transform: scale(1, 0.6); - animation: barUp3 4s infinite; -} - -.cod-loader__bar:nth-child(4) { - left: 60px; - transform: scale(1, 0.8); - animation: barUp4 4s infinite; -} - -.cod-loader__bar:nth-child(5) { - left: 80px; - transform: scale(1, 1); - animation: barUp5 4s infinite; -} - -.cod-loader__ball { - position: absolute; - bottom: 10px; - left: 0; - width: 10px; - height: 10px; - border-radius: 50%; - animation: ball 4s infinite; -} - -.cod-loader.cod-loader--color-1 .cod-loader-container article .cod-loader-bars .cod-loader__ball { - background: var(--color-1); -} - -.cod-loader.cod-loader--color-2 .cod-loader-container article .cod-loader-bars .cod-loader__ball { - background: var(--color-2); -} - -.cod-loader.cod-loader--color-3 .cod-loader-container article .cod-loader-bars .cod-loader__ball { - background: var(--color-3); -} - -.cod-loader.cod-loader--color-4 .cod-loader-container article .cod-loader-bars .cod-loader__ball { - background: var(--color-4); -} - -.cod-loader.cod-loader--color-5 .cod-loader-container article .cod-loader-bars .cod-loader__ball { - background: var(--color-5); -} - -@keyframes ball { - 0% { - transform: translate(0, 0); - } - - 5% { - transform: translate(10px, -14px); - } - - 10% { - transform: translate(20px, -10px); - } - - 17% { - transform: translate(30px, -24px); - } - - 20% { - transform: translate(40px, -20px); - } - - 27% { - transform: translate(50px, -34px); - } - - 30% { - transform: translate(60px, -30px); - } - - 37% { - transform: translate(70px, -44px); - } - - 40% { - transform: translate(80px, -40px); - } - - 50% { - transform: translate(80px, 0); - } - - 57% { - transform: translate(70px, -14px); - } - - 60% { - transform: translate(60px, -10px); - } - - 67% { - transform: translate(50px, -24px); - } - - 70% { - transform: translate(40px, -20px); - } - - 77% { - transform: translate(30px, -34px); - } - - 80% { - transform: translate(20px, -30px); - } - - 87% { - transform: translate(10px, -44px); - } - - 90% { - transform: translate(0, -40px); - } - - 100% { - transform: translate(0, 0); - } -} - -@keyframes barUp1 { - 0% { - transform: scale(1, 0.2); - } - - 40% { - transform: scale(1, 0.2); - } - - 50% { - transform: scale(1, 1); - } - - 90% { - transform: scale(1, 1); - } - - 100% { - transform: scale(1, 0.2); - } -} - -@keyframes barUp2 { - 0% { - transform: scale(1, 0.4); - } - - 40% { - transform: scale(1, 0.4); - } - - 50% { - transform: scale(1, 0.8); - } - - 90% { - transform: scale(1, 0.8); - } - - 100% { - transform: scale(1, 0.4); - } -} - -@keyframes barUp3 { - 0% { - transform: scale(1, 0.6); - } - - 100% { - transform: scale(1, 0.6); - } -} - -@keyframes barUp4 { - 0% { - transform: scale(1, 0.8); - } - - 40% { - transform: scale(1, 0.8); - } - - 50% { - transform: scale(1, 0.4); - } - - 90% { - transform: scale(1, 0.4); - } - - 100% { - transform: scale(1, 0.8); - } -} - -@keyframes barUp5 { - 0% { - transform: scale(1, 1); - } - - 40% { - transform: scale(1, 1); - } - - 50% { - transform: scale(1, 0.2); - } - - 90% { - transform: scale(1, 0.2); - } - - 100% { - transform: scale(1, 1); - } -} \ No newline at end of file +.loader-box { + display: flex; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.75); + position: absolute; + left: -0.2em; + top: -0.2em; +} + +.cod-loader-container { + display: flex; + margin: auto; +} + +.cod-loader-container article { + margin: auto; +} + +.cod-loader-container article p { + text-align: center; + font-family: var(--font-family); + margin-left: 0.5em; +} + +.cod-loader-bars { + position: relative; + width: 75px; + height: 100px; +} + +.cod-loader.cod-loader--color-1 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__bar { + background: var(--color-1); +} + +.cod-loader.cod-loader--color-2 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__bar { + background: var(--color-2); +} + +.cod-loader.cod-loader--color-3 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__bar { + background: var(--color-3); +} + +.cod-loader.cod-loader--color-4 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__bar { + background: var(--color-4); +} + +.cod-loader.cod-loader--color-5 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__bar { + background: var(--color-5); +} + +.cod-loader__bar { + position: absolute; + bottom: 0; + width: 10px; + height: 50%; + transform-origin: center bottom; + box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); +} + +.cod-loader__bar:nth-child(1) { + left: 0px; + transform: scale(1, 0.2); + animation: barUp1 4s infinite; +} + +.cod-loader__bar:nth-child(2) { + left: 20px; + transform: scale(1, 0.4); + animation: barUp2 4s infinite; +} + +.cod-loader__bar:nth-child(3) { + left: 40px; + transform: scale(1, 0.6); + animation: barUp3 4s infinite; +} + +.cod-loader__bar:nth-child(4) { + left: 60px; + transform: scale(1, 0.8); + animation: barUp4 4s infinite; +} + +.cod-loader__bar:nth-child(5) { + left: 80px; + transform: scale(1, 1); + animation: barUp5 4s infinite; +} + +.cod-loader__ball { + position: absolute; + bottom: 10px; + left: 0; + width: 10px; + height: 10px; + border-radius: 50%; + animation: ball 4s infinite; +} + +.cod-loader.cod-loader--color-1 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__ball { + background: var(--color-1); +} + +.cod-loader.cod-loader--color-2 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__ball { + background: var(--color-2); +} + +.cod-loader.cod-loader--color-3 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__ball { + background: var(--color-3); +} + +.cod-loader.cod-loader--color-4 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__ball { + background: var(--color-4); +} + +.cod-loader.cod-loader--color-5 + .cod-loader-container + article + .cod-loader-bars + .cod-loader__ball { + background: var(--color-5); +} + +@keyframes ball { + 0% { + transform: translate(0, 0); + } + + 5% { + transform: translate(10px, -14px); + } + + 10% { + transform: translate(20px, -10px); + } + + 17% { + transform: translate(30px, -24px); + } + + 20% { + transform: translate(40px, -20px); + } + + 27% { + transform: translate(50px, -34px); + } + + 30% { + transform: translate(60px, -30px); + } + + 37% { + transform: translate(70px, -44px); + } + + 40% { + transform: translate(80px, -40px); + } + + 50% { + transform: translate(80px, 0); + } + + 57% { + transform: translate(70px, -14px); + } + + 60% { + transform: translate(60px, -10px); + } + + 67% { + transform: translate(50px, -24px); + } + + 70% { + transform: translate(40px, -20px); + } + + 77% { + transform: translate(30px, -34px); + } + + 80% { + transform: translate(20px, -30px); + } + + 87% { + transform: translate(10px, -44px); + } + + 90% { + transform: translate(0, -40px); + } + + 100% { + transform: translate(0, 0); + } +} + +@keyframes barUp1 { + 0% { + transform: scale(1, 0.2); + } + + 40% { + transform: scale(1, 0.2); + } + + 50% { + transform: scale(1, 1); + } + + 90% { + transform: scale(1, 1); + } + + 100% { + transform: scale(1, 0.2); + } +} + +@keyframes barUp2 { + 0% { + transform: scale(1, 0.4); + } + + 40% { + transform: scale(1, 0.4); + } + + 50% { + transform: scale(1, 0.8); + } + + 90% { + transform: scale(1, 0.8); + } + + 100% { + transform: scale(1, 0.4); + } +} + +@keyframes barUp3 { + 0% { + transform: scale(1, 0.6); + } + + 100% { + transform: scale(1, 0.6); + } +} + +@keyframes barUp4 { + 0% { + transform: scale(1, 0.8); + } + + 40% { + transform: scale(1, 0.8); + } + + 50% { + transform: scale(1, 0.4); + } + + 90% { + transform: scale(1, 0.4); + } + + 100% { + transform: scale(1, 0.8); + } +} + +@keyframes barUp5 { + 0% { + transform: scale(1, 1); + } + + 40% { + transform: scale(1, 1); + } + + 50% { + transform: scale(1, 0.2); + } + + 90% { + transform: scale(1, 0.2); + } + + 100% { + transform: scale(1, 1); + } +} diff --git a/src/components/atoms/Loader/Loader.js b/src/components/atoms/Loader/Loader.js index 03950ce5..7d13db57 100644 --- a/src/components/atoms/Loader/Loader.js +++ b/src/components/atoms/Loader/Loader.js @@ -1,38 +1,40 @@ -import styles from '!!raw-loader!./Loader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -export default class Loader extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - this.shadowRoot.appendChild(variableStyles); - const loaderStyles = document.createElement('style'); - loaderStyles.textContent = styles; - // Loader attributes - this.shadowRoot.appendChild(loaderStyles); - const loader = document.createElement('article'); - let color = this.getAttribute('data-color'); - loader.className = ['cod-loader', `cod-loader--${color || 'color-1'}`].join(' '); - loader.innerHTML = ` -
-
-
-
-
-
-
-
-
-
-

LOADING

-
-
`; - this.shadowRoot.appendChild(loader); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Loader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +export default class Loader extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + this.shadowRoot.appendChild(variableStyles); + const loaderStyles = document.createElement('style'); + loaderStyles.textContent = styles; + // Loader attributes + this.shadowRoot.appendChild(loaderStyles); + const loader = document.createElement('article'); + let color = this.getAttribute('data-color'); + loader.className = ['cod-loader', `cod-loader--${color || 'color-1'}`].join( + ' ', + ); + loader.innerHTML = ` +
+
+
+
+
+
+
+
+
+
+

LOADING

+
+
`; + this.shadowRoot.appendChild(loader); + } +} diff --git a/src/components/atoms/Loader/cod-loader.js b/src/components/atoms/Loader/cod-loader.js index 199a24a8..2d948ced 100644 --- a/src/components/atoms/Loader/cod-loader.js +++ b/src/components/atoms/Loader/cod-loader.js @@ -1,2 +1,2 @@ import Loader from './Loader'; -customElements.define('cod-loader', Loader); \ No newline at end of file +customElements.define('cod-loader', Loader); diff --git a/src/components/atoms/ModalBody/ModalBody.js b/src/components/atoms/ModalBody/ModalBody.js index aef59bc8..0f6c3a27 100644 --- a/src/components/atoms/ModalBody/ModalBody.js +++ b/src/components/atoms/ModalBody/ModalBody.js @@ -1,50 +1,50 @@ -import styles from '!!raw-loader!./ModalBody.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class ModalBody extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.body = document.createElement('div'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.body.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // OffcanvasBody attributes - let extraClasses = this.getAttribute('data-extra-classes'); - let bodyClasses = ['modal-body']; - (extraClasses != undefined && extraClasses != null) ? bodyClasses.push(extraClasses): 0; - this.body.className = bodyClasses.join(' '); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.body); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./ModalBody.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class ModalBody extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.body = document.createElement('div'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.body.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // OffcanvasBody attributes + let extraClasses = this.getAttribute('data-extra-classes'); + let bodyClasses = ['modal-body']; + extraClasses != undefined && extraClasses != null + ? bodyClasses.push(extraClasses) + : 0; + this.body.className = bodyClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.body); + } + } +} diff --git a/src/components/atoms/ModalBody/cod-modal-body.js b/src/components/atoms/ModalBody/cod-modal-body.js index 0b2bff52..c6e907fb 100644 --- a/src/components/atoms/ModalBody/cod-modal-body.js +++ b/src/components/atoms/ModalBody/cod-modal-body.js @@ -1,2 +1,2 @@ -import ModalBody from './ModalBody'; -customElements.define('cod-modal-body', ModalBody); \ No newline at end of file +import ModalBody from './ModalBody'; +customElements.define('cod-modal-body', ModalBody); diff --git a/src/components/atoms/ModalFooter/ModalFooter.js b/src/components/atoms/ModalFooter/ModalFooter.js index e82df1fe..5c876bf4 100644 --- a/src/components/atoms/ModalFooter/ModalFooter.js +++ b/src/components/atoms/ModalFooter/ModalFooter.js @@ -1,67 +1,71 @@ -import styles from '!!raw-loader!./ModalFooter.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class ModalFooter extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.modalFooter = document.createElement('div'); - this.closeBtn = document.createElement('cod-button'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.modalFooter.appendChild(node); - }); - }); - this.modalFooter.appendChild(this.closeBtn); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let btnExtraClasses = this.getAttribute('data-button-extra-classes'); - let extraClasses = this.getAttribute('data-extra-classes'); - let modalFooterClasses = ['modal-footer']; - this.closeBtn.setAttribute('data-img-alt', ''); - this.closeBtn.setAttribute('data-icon', ''); - this.closeBtn.setAttribute('data-label', 'Close'); - this.closeBtn.setAttribute('data-bs-dismiss', 'modal'); - (extraClasses != undefined && extraClasses != null) ? modalFooterClasses.push(extraClasses): 0; - (btnExtraClasses != undefined && btnExtraClasses != null) ? this.closeBtn.setAttribute('data-extra-classes', btnExtraClasses): 0; - this.modalFooter.className = modalFooterClasses.join(' '); - this.closeBtn.addEventListener('click', this._onClick); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.modalFooter); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.getRootNode().host.setAttribute('data-show', 'false'); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./ModalFooter.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class ModalFooter extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.modalFooter = document.createElement('div'); + this.closeBtn = document.createElement('cod-button'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.modalFooter.appendChild(node); + }); + }); + this.modalFooter.appendChild(this.closeBtn); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let btnExtraClasses = this.getAttribute('data-button-extra-classes'); + let extraClasses = this.getAttribute('data-extra-classes'); + let modalFooterClasses = ['modal-footer']; + this.closeBtn.setAttribute('data-img-alt', ''); + this.closeBtn.setAttribute('data-icon', ''); + this.closeBtn.setAttribute('data-label', 'Close'); + this.closeBtn.setAttribute('data-bs-dismiss', 'modal'); + extraClasses != undefined && extraClasses != null + ? modalFooterClasses.push(extraClasses) + : 0; + btnExtraClasses != undefined && btnExtraClasses != null + ? this.closeBtn.setAttribute('data-extra-classes', btnExtraClasses) + : 0; + this.modalFooter.className = modalFooterClasses.join(' '); + this.closeBtn.addEventListener('click', this._onClick); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.modalFooter); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode() + .host.getRootNode() + .host.setAttribute('data-show', 'false'); + } +} diff --git a/src/components/atoms/ModalFooter/cod-modal-footer.js b/src/components/atoms/ModalFooter/cod-modal-footer.js index e7ac8949..b9936f2f 100644 --- a/src/components/atoms/ModalFooter/cod-modal-footer.js +++ b/src/components/atoms/ModalFooter/cod-modal-footer.js @@ -1,2 +1,2 @@ -import ModalFooter from './ModalFooter'; -customElements.define('cod-modal-footer', ModalFooter); \ No newline at end of file +import ModalFooter from './ModalFooter'; +customElements.define('cod-modal-footer', ModalFooter); diff --git a/src/components/atoms/ModalHeader/ModalHeader.js b/src/components/atoms/ModalHeader/ModalHeader.js index 050ee054..f4f21a42 100644 --- a/src/components/atoms/ModalHeader/ModalHeader.js +++ b/src/components/atoms/ModalHeader/ModalHeader.js @@ -1,72 +1,76 @@ -import styles from '!!raw-loader!./ModalHeader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class ModalHeader extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.modalHeader = document.createElement('div'); - this.modalTitle = document.createElement('div'); - this.closeBtn = document.createElement('cod-button'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.modalTitle.appendChild(node); - }); - }); - this.modalHeader.appendChild(this.modalTitle); - this.modalHeader.appendChild(this.closeBtn); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let parentID = this.getAttribute('data-parent-id'); - let btnDark = this.getAttribute('data-button-dark'); - let extraClasses = this.getAttribute('data-extra-classes'); - let modalHeaderClasses = ['modal-header']; - this.modalTitle.className = 'modal-title'; - this.modalTitle.id = `${parentID}-label`; - this.closeBtn.setAttribute('data-img-alt', ''); - this.closeBtn.setAttribute('data-icon', ''); - this.closeBtn.setAttribute('data-close', 'true'); - this.closeBtn.setAttribute('data-bs-dismiss', 'modal'); - (extraClasses != undefined && extraClasses != null) ? modalHeaderClasses.push(extraClasses): 0; - (btnDark == 'true') ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white'): 0; - this.modalHeader.className = modalHeaderClasses.join(' '); - this.closeBtn.addEventListener('click', this._onClick); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.modalHeader); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.getRootNode().host.setAttribute('data-show', 'false'); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./ModalHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class ModalHeader extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.modalHeader = document.createElement('div'); + this.modalTitle = document.createElement('div'); + this.closeBtn = document.createElement('cod-button'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.modalTitle.appendChild(node); + }); + }); + this.modalHeader.appendChild(this.modalTitle); + this.modalHeader.appendChild(this.closeBtn); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let parentID = this.getAttribute('data-parent-id'); + let btnDark = this.getAttribute('data-button-dark'); + let extraClasses = this.getAttribute('data-extra-classes'); + let modalHeaderClasses = ['modal-header']; + this.modalTitle.className = 'modal-title'; + this.modalTitle.id = `${parentID}-label`; + this.closeBtn.setAttribute('data-img-alt', ''); + this.closeBtn.setAttribute('data-icon', ''); + this.closeBtn.setAttribute('data-close', 'true'); + this.closeBtn.setAttribute('data-bs-dismiss', 'modal'); + extraClasses != undefined && extraClasses != null + ? modalHeaderClasses.push(extraClasses) + : 0; + btnDark == 'true' + ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white') + : 0; + this.modalHeader.className = modalHeaderClasses.join(' '); + this.closeBtn.addEventListener('click', this._onClick); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.modalHeader); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode() + .host.getRootNode() + .host.setAttribute('data-show', 'false'); + } +} diff --git a/src/components/atoms/ModalHeader/cod-modal-header.js b/src/components/atoms/ModalHeader/cod-modal-header.js index a8d53a56..aefdb894 100644 --- a/src/components/atoms/ModalHeader/cod-modal-header.js +++ b/src/components/atoms/ModalHeader/cod-modal-header.js @@ -1,2 +1,2 @@ -import ModalHeader from './ModalHeader'; -customElements.define('cod-modal-header', ModalHeader); \ No newline at end of file +import ModalHeader from './ModalHeader'; +customElements.define('cod-modal-header', ModalHeader); diff --git a/src/components/atoms/NavbarBrand/NavbarBrand.css b/src/components/atoms/NavbarBrand/NavbarBrand.css index 1b5db9fa..cd163912 100644 --- a/src/components/atoms/NavbarBrand/NavbarBrand.css +++ b/src/components/atoms/NavbarBrand/NavbarBrand.css @@ -1,4 +1,4 @@ -a{ - text-decoration: none; - font-family: var(--font-family); -} \ No newline at end of file +a { + text-decoration: none; + font-family: var(--font-family); +} diff --git a/src/components/atoms/NavbarBrand/NavbarBrand.js b/src/components/atoms/NavbarBrand/NavbarBrand.js index cd1392fc..ddfa6886 100644 --- a/src/components/atoms/NavbarBrand/NavbarBrand.js +++ b/src/components/atoms/NavbarBrand/NavbarBrand.js @@ -1,60 +1,67 @@ -import styles from '!!raw-loader!./NavbarBrand.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -export default class NavbarBrand extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Navbar Brand attributes - let url = this.getAttribute('data-url'); - let text = this.getAttribute('data-text'); - let brandImgURL = this.getAttribute('data-img'); - let brandImgAlt = this.getAttribute('data-img-alt'); - let textClasses = this.getAttribute('data-text-classes'); - let imgClasses = this.getAttribute('data-img-classes'); - let imgSize = this.getAttribute('data-img-size'); - let extraClasses = this.getAttribute('data-extra-classes'); - let brandClasses = ['']; - let brandLink = document.createElement('a'); - let cleanURL = encodeURI(url); - brandLink.href = decodeURI(cleanURL); - if(brandImgURL != undefined && brandImgURL != null){ - let brandImg = document.createElement('img'); - let cleanImgURL = encodeURI(brandImgURL); - brandImg.src = decodeURI(cleanImgURL); - (imgSize != undefined && imgSize != null) ? brandImg.setAttribute('width', imgSize) : 0; - (imgClasses != undefined && imgClasses != null) ? brandImg.className = imgClasses : 0; - brandImg.setAttribute('alt', brandImgAlt); - brandLink.appendChild(brandImg); - } - if(text != undefined && text != null){ - let brandText = document.createElement('span'); - (textClasses != undefined && textClasses != null) ? brandText.className = textClasses : 0; - brandText.innerText = text; - brandLink.appendChild(brandText); - } - (extraClasses != undefined && extraClasses != null) ? brandClasses.push(extraClasses): 0; - brandLink.className = brandClasses.join(' '); - if(!this.shadowRoot.querySelector('a')){ - this.shadowRoot.appendChild(brandLink); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./NavbarBrand.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +export default class NavbarBrand extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Navbar Brand attributes + let url = this.getAttribute('data-url'); + let text = this.getAttribute('data-text'); + let brandImgURL = this.getAttribute('data-img'); + let brandImgAlt = this.getAttribute('data-img-alt'); + let textClasses = this.getAttribute('data-text-classes'); + let imgClasses = this.getAttribute('data-img-classes'); + let imgSize = this.getAttribute('data-img-size'); + let extraClasses = this.getAttribute('data-extra-classes'); + let brandClasses = ['']; + let brandLink = document.createElement('a'); + let cleanURL = encodeURI(url); + brandLink.href = decodeURI(cleanURL); + if (brandImgURL != undefined && brandImgURL != null) { + let brandImg = document.createElement('img'); + let cleanImgURL = encodeURI(brandImgURL); + brandImg.src = decodeURI(cleanImgURL); + imgSize != undefined && imgSize != null + ? brandImg.setAttribute('width', imgSize) + : 0; + imgClasses != undefined && imgClasses != null + ? (brandImg.className = imgClasses) + : 0; + brandImg.setAttribute('alt', brandImgAlt); + brandLink.appendChild(brandImg); + } + if (text != undefined && text != null) { + let brandText = document.createElement('span'); + textClasses != undefined && textClasses != null + ? (brandText.className = textClasses) + : 0; + brandText.innerText = text; + brandLink.appendChild(brandText); + } + extraClasses != undefined && extraClasses != null + ? brandClasses.push(extraClasses) + : 0; + brandLink.className = brandClasses.join(' '); + if (!this.shadowRoot.querySelector('a')) { + this.shadowRoot.appendChild(brandLink); + } + } +} diff --git a/src/components/atoms/NavbarBrand/cod-navbar-brand.js b/src/components/atoms/NavbarBrand/cod-navbar-brand.js index 42282790..092f4fe7 100644 --- a/src/components/atoms/NavbarBrand/cod-navbar-brand.js +++ b/src/components/atoms/NavbarBrand/cod-navbar-brand.js @@ -1,2 +1,2 @@ -import NavbarBrand from './NavbarBrand'; -customElements.define('cod-navbar-brand', NavbarBrand); \ No newline at end of file +import NavbarBrand from './NavbarBrand'; +customElements.define('cod-navbar-brand', NavbarBrand); diff --git a/src/components/atoms/NavbarCollapse/NavbarCollapse.js b/src/components/atoms/NavbarCollapse/NavbarCollapse.js index 71b98c29..2ad37d83 100644 --- a/src/components/atoms/NavbarCollapse/NavbarCollapse.js +++ b/src/components/atoms/NavbarCollapse/NavbarCollapse.js @@ -1,38 +1,36 @@ -import styles from '!!raw-loader!./NavbarCollapse.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Navbar extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - shadow.appendChild(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./NavbarCollapse.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Navbar extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + shadow.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } +} diff --git a/src/components/atoms/NavbarCollapse/cod-navbar-collapse.js b/src/components/atoms/NavbarCollapse/cod-navbar-collapse.js index 2ea1a397..e7c17273 100644 --- a/src/components/atoms/NavbarCollapse/cod-navbar-collapse.js +++ b/src/components/atoms/NavbarCollapse/cod-navbar-collapse.js @@ -1,2 +1,2 @@ -import NavbarCollapse from './NavbarCollapse'; -customElements.define('cod-navbar-collapse', NavbarCollapse); \ No newline at end of file +import NavbarCollapse from './NavbarCollapse'; +customElements.define('cod-navbar-collapse', NavbarCollapse); diff --git a/src/components/atoms/NavbarOffcanvas/NavbarOffcanvas.js b/src/components/atoms/NavbarOffcanvas/NavbarOffcanvas.js index 5f4ab86e..5238ac3d 100644 --- a/src/components/atoms/NavbarOffcanvas/NavbarOffcanvas.js +++ b/src/components/atoms/NavbarOffcanvas/NavbarOffcanvas.js @@ -1,111 +1,122 @@ -import styles from '!!raw-loader!./NavbarOffcanvas.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class NavbarOffcanvas extends HTMLElement { - static get observedAttributes() { - return ['data-show']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.offcanvas = document.createElement('div'); - this.offcanvasBackdrop = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - (this.getAttribute('data-show') == 'true') ? node.setAttribute('data-show', true) : 0; - if(node.tagName == 'COD-OFFCANVAS-HEADER'){ - (this.getAttribute('data-button-dark') == 'true') ? node.setAttribute('data-button-dark', true) : 0; - node.setAttribute('data-parent-id', this.getAttribute('data-id')); - } - this.offcanvas.appendChild(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - let tempClasses = this.offcanvas.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - if(newValue == 'true'){ - tempClasses.push('show'); - if(this.getAttribute('data-backdrop') != 'false'){ - if(this.getAttribute('data-static') != 'true'){ - this.offcanvasBackdrop.addEventListener('click', this._onClick); - } - this.shadowRoot.appendChild(this.offcanvasBackdrop); - } - }else{ - if(this.shadowRoot.querySelector('div.offcanvas-backdrop')){ - this.shadowRoot.removeChild(this.offcanvasBackdrop); - } - } - this.offcanvas.className = tempClasses.join(' '); - } - - connectedCallback() { - // Offcanvas attributes - let show = this.getAttribute('data-show'); - let placement = this.getAttribute('data-placement'); - let id = this.getAttribute('data-id'); - let backdrop = this.getAttribute('data-backdrop'); - let backdropExtraClasses = this.getAttribute('data-backdrop-extra-classes'); - let scroll = this.getAttribute('data-scroll'); - let bStatic = this.getAttribute('data-static'); - let extraClasses = this.getAttribute('data-extra-classes'); - let offcanvasClasses = ['offcanvas']; - let backdropClasses = ['offcanvas-backdrop fade show']; - (show == 'true') ? offcanvasClasses.push('show'): 0; - (backdrop == 'false') ? this.offcanvas.setAttribute('data-bs-backdrop', false) : 0; - (scroll == 'true') ? this.offcanvas.setAttribute('data-bs-scroll', true) : 0; - (bStatic == 'true') ? this.offcanvas.setAttribute('data-bs-backdrop', 'static') : 0; - (backdropExtraClasses != undefined && backdropExtraClasses != null) ? backdropClasses.push(backdropExtraClasses): 0; - (extraClasses != undefined && extraClasses != null) ? offcanvasClasses.push(extraClasses): 0; - if(placement != undefined && placement != null){ - offcanvasClasses.push(`offcanvas-${placement}`); - }else{ - offcanvasClasses.push('offcanvas-start'); - } - if(id != undefined && id != null){ - this.offcanvas.id = id; - this.offcanvas.setAttribute('aria-labelledby', `${id}-label`); - } - this.offcanvas.setAttribute('tabindex', -1); - this.offcanvas.className = offcanvasClasses.join(' '); - this.offcanvasBackdrop.className = backdropClasses.join(' '); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.offcanvas); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.setAttribute('data-show', 'false'); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./NavbarOffcanvas.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class NavbarOffcanvas extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.offcanvas = document.createElement('div'); + this.offcanvasBackdrop = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.getAttribute('data-show') == 'true' + ? node.setAttribute('data-show', true) + : 0; + if (node.tagName == 'COD-OFFCANVAS-HEADER') { + this.getAttribute('data-button-dark') == 'true' + ? node.setAttribute('data-button-dark', true) + : 0; + node.setAttribute('data-parent-id', this.getAttribute('data-id')); + } + this.offcanvas.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + let tempClasses = this.offcanvas.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'show' ? tempClasses.push(popValue) : 0; + if (newValue == 'true') { + tempClasses.push('show'); + if (this.getAttribute('data-backdrop') != 'false') { + if (this.getAttribute('data-static') != 'true') { + this.offcanvasBackdrop.addEventListener('click', this._onClick); + } + this.shadowRoot.appendChild(this.offcanvasBackdrop); + } + } else { + if (this.shadowRoot.querySelector('div.offcanvas-backdrop')) { + this.shadowRoot.removeChild(this.offcanvasBackdrop); + } + } + this.offcanvas.className = tempClasses.join(' '); + } + + connectedCallback() { + // Offcanvas attributes + let show = this.getAttribute('data-show'); + let placement = this.getAttribute('data-placement'); + let id = this.getAttribute('data-id'); + let backdrop = this.getAttribute('data-backdrop'); + let backdropExtraClasses = this.getAttribute('data-backdrop-extra-classes'); + let scroll = this.getAttribute('data-scroll'); + let bStatic = this.getAttribute('data-static'); + let extraClasses = this.getAttribute('data-extra-classes'); + let offcanvasClasses = ['offcanvas']; + let backdropClasses = ['offcanvas-backdrop fade show']; + show == 'true' ? offcanvasClasses.push('show') : 0; + backdrop == 'false' + ? this.offcanvas.setAttribute('data-bs-backdrop', false) + : 0; + scroll == 'true' ? this.offcanvas.setAttribute('data-bs-scroll', true) : 0; + bStatic == 'true' + ? this.offcanvas.setAttribute('data-bs-backdrop', 'static') + : 0; + backdropExtraClasses != undefined && backdropExtraClasses != null + ? backdropClasses.push(backdropExtraClasses) + : 0; + extraClasses != undefined && extraClasses != null + ? offcanvasClasses.push(extraClasses) + : 0; + if (placement != undefined && placement != null) { + offcanvasClasses.push(`offcanvas-${placement}`); + } else { + offcanvasClasses.push('offcanvas-start'); + } + if (id != undefined && id != null) { + this.offcanvas.id = id; + this.offcanvas.setAttribute('aria-labelledby', `${id}-label`); + } + this.offcanvas.setAttribute('tabindex', -1); + this.offcanvas.className = offcanvasClasses.join(' '); + this.offcanvasBackdrop.className = backdropClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.offcanvas); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode().host.setAttribute('data-show', 'false'); + } +} diff --git a/src/components/atoms/NavbarOffcanvas/cod-navbar-offcanvas.js b/src/components/atoms/NavbarOffcanvas/cod-navbar-offcanvas.js index d3f0c025..a70dff0f 100644 --- a/src/components/atoms/NavbarOffcanvas/cod-navbar-offcanvas.js +++ b/src/components/atoms/NavbarOffcanvas/cod-navbar-offcanvas.js @@ -1,2 +1,2 @@ -import NavbarOffcanvas from './NavbarOffcanvas'; -customElements.define('cod-navbar-offcanvas', NavbarOffcanvas); \ No newline at end of file +import NavbarOffcanvas from './NavbarOffcanvas'; +customElements.define('cod-navbar-offcanvas', NavbarOffcanvas); diff --git a/src/components/atoms/NavbarToggle/NavbarToggle.css b/src/components/atoms/NavbarToggle/NavbarToggle.css index b42ebd7c..30b57a75 100644 --- a/src/components/atoms/NavbarToggle/NavbarToggle.css +++ b/src/components/atoms/NavbarToggle/NavbarToggle.css @@ -1,4 +1,4 @@ -.navbar-toggler-icon{ - border: none; - background-color: transparent; -} \ No newline at end of file +.navbar-toggler-icon { + border: none; + background-color: transparent; +} diff --git a/src/components/atoms/NavbarToggle/NavbarToggle.js b/src/components/atoms/NavbarToggle/NavbarToggle.js index 46c241ac..40105375 100644 --- a/src/components/atoms/NavbarToggle/NavbarToggle.js +++ b/src/components/atoms/NavbarToggle/NavbarToggle.js @@ -1,57 +1,66 @@ -import styles from '!!raw-loader!./NavbarToggle.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -export default class NavbarToggle extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Navbar Brand attributes - let darkBtn = this.getAttribute('data-button-dark'); - let mode = this.getAttribute('data-mode'); - let extraClasses = this.getAttribute('data-extra-classes'); - let toggleBtn = document.createElement('button'); - let navbarToggleClasses = ['']; - if(mode == 'default'){ - (darkBtn == 'true') ? toggleBtn.setAttribute('data-bs-theme', 'dark') : 0; - let toggleIcon = document.createElement('span'); - navbarToggleClasses.push('navbar-toggler-icon'); - toggleBtn.appendChild(toggleIcon); - } - (extraClasses != undefined && extraClasses != null) ? navbarToggleClasses.push(extraClasses): 0; - toggleBtn.className = navbarToggleClasses.join(' '); - if(!this.shadowRoot.querySelector('button')){ - toggleBtn.addEventListener('click', this._onClick.bind(this)); - this.shadowRoot.appendChild(toggleBtn); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - if(this.getAttribute('data-show') == 'true'){ - (this.getAttribute('data-target-toggle') == 'offcanvas') ? this.getRootNode().querySelector('cod-offcanvas').setAttribute('data-show', 'false') : this.getRootNode().host.setAttribute('data-show', 'false'); - }else{ - (this.getAttribute('data-target-toggle') == 'offcanvas') ? this.getRootNode().querySelector('cod-offcanvas').setAttribute('data-show', 'true') : this.getRootNode().host.setAttribute('data-show', 'true'); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./NavbarToggle.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +export default class NavbarToggle extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Navbar Brand attributes + let darkBtn = this.getAttribute('data-button-dark'); + let mode = this.getAttribute('data-mode'); + let extraClasses = this.getAttribute('data-extra-classes'); + let toggleBtn = document.createElement('button'); + let navbarToggleClasses = ['']; + if (mode == 'default') { + darkBtn == 'true' ? toggleBtn.setAttribute('data-bs-theme', 'dark') : 0; + let toggleIcon = document.createElement('span'); + navbarToggleClasses.push('navbar-toggler-icon'); + toggleBtn.appendChild(toggleIcon); + } + extraClasses != undefined && extraClasses != null + ? navbarToggleClasses.push(extraClasses) + : 0; + toggleBtn.className = navbarToggleClasses.join(' '); + if (!this.shadowRoot.querySelector('button')) { + toggleBtn.addEventListener('click', this._onClick.bind(this)); + this.shadowRoot.appendChild(toggleBtn); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + if (this.getAttribute('data-show') == 'true') { + this.getAttribute('data-target-toggle') == 'offcanvas' + ? this.getRootNode() + .querySelector('cod-offcanvas') + .setAttribute('data-show', 'false') + : this.getRootNode().host.setAttribute('data-show', 'false'); + } else { + this.getAttribute('data-target-toggle') == 'offcanvas' + ? this.getRootNode() + .querySelector('cod-offcanvas') + .setAttribute('data-show', 'true') + : this.getRootNode().host.setAttribute('data-show', 'true'); + } + } +} diff --git a/src/components/atoms/NavbarToggle/cod-navbar-toggle.js b/src/components/atoms/NavbarToggle/cod-navbar-toggle.js index c5f56111..32a3fd88 100644 --- a/src/components/atoms/NavbarToggle/cod-navbar-toggle.js +++ b/src/components/atoms/NavbarToggle/cod-navbar-toggle.js @@ -1,2 +1,2 @@ -import NavbarToggle from './NavbarToggle'; -customElements.define('cod-navbar-toggle', NavbarToggle); \ No newline at end of file +import NavbarToggle from './NavbarToggle'; +customElements.define('cod-navbar-toggle', NavbarToggle); diff --git a/src/components/atoms/OffcanvasBody/OffcanvasBody.js b/src/components/atoms/OffcanvasBody/OffcanvasBody.js index 018fd98d..c40406b1 100644 --- a/src/components/atoms/OffcanvasBody/OffcanvasBody.js +++ b/src/components/atoms/OffcanvasBody/OffcanvasBody.js @@ -1,50 +1,50 @@ -import styles from '!!raw-loader!./OffcanvasBody.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class OffcanvasBody extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.body = document.createElement('div'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.body.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // OffcanvasBody attributes - let extraClasses = this.getAttribute('data-extra-classes'); - let bodyClasses = ['offcanvas-body']; - (extraClasses != undefined && extraClasses != null) ? bodyClasses.push(extraClasses): 0; - this.body.className = bodyClasses.join(' '); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.body); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./OffcanvasBody.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class OffcanvasBody extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.body = document.createElement('div'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.body.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // OffcanvasBody attributes + let extraClasses = this.getAttribute('data-extra-classes'); + let bodyClasses = ['offcanvas-body']; + extraClasses != undefined && extraClasses != null + ? bodyClasses.push(extraClasses) + : 0; + this.body.className = bodyClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.body); + } + } +} diff --git a/src/components/atoms/OffcanvasBody/cod-offcanvas-body.js b/src/components/atoms/OffcanvasBody/cod-offcanvas-body.js index da8ac1ed..c757036f 100644 --- a/src/components/atoms/OffcanvasBody/cod-offcanvas-body.js +++ b/src/components/atoms/OffcanvasBody/cod-offcanvas-body.js @@ -1,2 +1,2 @@ -import OffcanvasBody from './OffcanvasBody'; -customElements.define('cod-offcanvas-body', OffcanvasBody); \ No newline at end of file +import OffcanvasBody from './OffcanvasBody'; +customElements.define('cod-offcanvas-body', OffcanvasBody); diff --git a/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js b/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js index e2008525..a0ce6718 100644 --- a/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js +++ b/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js @@ -1,72 +1,76 @@ -import styles from '!!raw-loader!./OffcanvasHeader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class OffcanvasHeader extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.offcanvasHeader = document.createElement('div'); - this.offcanvasTitle = document.createElement('div'); - this.closeBtn = document.createElement('cod-button'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.offcanvasTitle.appendChild(node); - }); - }); - this.offcanvasHeader.appendChild(this.offcanvasTitle); - this.offcanvasHeader.appendChild(this.closeBtn); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let parentID = this.getAttribute('data-parent-id'); - let btnDark = this.getAttribute('data-button-dark'); - let extraClasses = this.getAttribute('data-extra-classes'); - let offcanvasHeaderClasses = ['offcanvas-header']; - this.offcanvasTitle.className = 'offcanvas-title'; - this.offcanvasTitle.id = `${parentID}-label`; - this.closeBtn.setAttribute('data-img-alt', ''); - this.closeBtn.setAttribute('data-icon', ''); - this.closeBtn.setAttribute('data-close', 'true'); - this.closeBtn.setAttribute('data-bs-dismiss', parentID); - (extraClasses != undefined && extraClasses != null) ? offcanvasHeaderClasses.push(extraClasses): 0; - (btnDark == 'true') ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white'): 0; - this.offcanvasHeader.className = offcanvasHeaderClasses.join(' '); - this.closeBtn.addEventListener('click', this._onClick); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.offcanvasHeader); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.getRootNode().host.setAttribute('data-show', 'false'); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./OffcanvasHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class OffcanvasHeader extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.offcanvasHeader = document.createElement('div'); + this.offcanvasTitle = document.createElement('div'); + this.closeBtn = document.createElement('cod-button'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.offcanvasTitle.appendChild(node); + }); + }); + this.offcanvasHeader.appendChild(this.offcanvasTitle); + this.offcanvasHeader.appendChild(this.closeBtn); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let parentID = this.getAttribute('data-parent-id'); + let btnDark = this.getAttribute('data-button-dark'); + let extraClasses = this.getAttribute('data-extra-classes'); + let offcanvasHeaderClasses = ['offcanvas-header']; + this.offcanvasTitle.className = 'offcanvas-title'; + this.offcanvasTitle.id = `${parentID}-label`; + this.closeBtn.setAttribute('data-img-alt', ''); + this.closeBtn.setAttribute('data-icon', ''); + this.closeBtn.setAttribute('data-close', 'true'); + this.closeBtn.setAttribute('data-bs-dismiss', parentID); + extraClasses != undefined && extraClasses != null + ? offcanvasHeaderClasses.push(extraClasses) + : 0; + btnDark == 'true' + ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white') + : 0; + this.offcanvasHeader.className = offcanvasHeaderClasses.join(' '); + this.closeBtn.addEventListener('click', this._onClick); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.offcanvasHeader); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode() + .host.getRootNode() + .host.setAttribute('data-show', 'false'); + } +} diff --git a/src/components/atoms/OffcanvasHeader/cod-offcanvas-header.js b/src/components/atoms/OffcanvasHeader/cod-offcanvas-header.js index 3c91c471..f2351d1e 100644 --- a/src/components/atoms/OffcanvasHeader/cod-offcanvas-header.js +++ b/src/components/atoms/OffcanvasHeader/cod-offcanvas-header.js @@ -1,2 +1,2 @@ -import OffcanvasHeader from './OffcanvasHeader'; -customElements.define('cod-offcanvas-header', OffcanvasHeader); \ No newline at end of file +import OffcanvasHeader from './OffcanvasHeader'; +customElements.define('cod-offcanvas-header', OffcanvasHeader); diff --git a/src/components/atoms/PaginationItem/PaginationItem.js b/src/components/atoms/PaginationItem/PaginationItem.js index a3522fdf..9525f547 100644 --- a/src/components/atoms/PaginationItem/PaginationItem.js +++ b/src/components/atoms/PaginationItem/PaginationItem.js @@ -1,89 +1,94 @@ -import styles from '!!raw-loader!./PaginationItem.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -export default class PaginationItem extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let url = this.getAttribute('data-url'); - let special = this.getAttribute('data-special'); - let label = this.getAttribute('data-label'); - let text = this.getAttribute('data-text'); - let disabled = this.getAttribute('data-disabled'); - let active = this.getAttribute('data-active'); - let extraClasses = this.getAttribute('data-extra-classes'); - let paginationItemClasses = ['page-link']; - let paginationItem = null; - let tag = null; - if(url != undefined && url != null){ - if(disabled == 'true'){ - paginationItemClasses.push('disabled'); - paginationItem = document.createElement('span'); - tag = 'span'; - }else{ - paginationItem = document.createElement('a'); - let cleanURL = encodeURI(url); - paginationItem.href = decodeURI(cleanURL); - tag = 'a'; - } - }else{ - paginationItem = document.createElement('span'); - tag = 'span'; - } - (active == 'true') ? paginationItemClasses.push('active') : 0; - (extraClasses != undefined && extraClasses != null) ? paginationItemClasses.push(extraClasses): 0; - (special != undefined && special != null) ? this.setSpecialItem(special, paginationItem): 0; - (text != undefined && text != null) ? paginationItem.innerText = text : 0; - (label != undefined && label != null) ? paginationItem.setAttribute('aria-label', label) : 0; - paginationItem.className = paginationItemClasses.join(' '); - if(!this.shadowRoot.querySelector(tag)){ - this.shadowRoot.appendChild(paginationItem); - } - } - - setSpecialItem(special, paginationItem){ - switch (special) { - case 'first': - paginationItem.innerHTML = ``; - break; - - case 'previous': - paginationItem.innerHTML = ``; - break; - - case 'next': - paginationItem.innerHTML = ``; - break; - - case 'last': - paginationItem.innerHTML = ``; - break; - - case 'ellipsiss': - paginationItem.innerHTML = ``; - break; - - default: - break; - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./PaginationItem.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +export default class PaginationItem extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let url = this.getAttribute('data-url'); + let special = this.getAttribute('data-special'); + let label = this.getAttribute('data-label'); + let text = this.getAttribute('data-text'); + let disabled = this.getAttribute('data-disabled'); + let active = this.getAttribute('data-active'); + let extraClasses = this.getAttribute('data-extra-classes'); + let paginationItemClasses = ['page-link']; + let paginationItem = null; + let tag = null; + if (url != undefined && url != null) { + if (disabled == 'true') { + paginationItemClasses.push('disabled'); + paginationItem = document.createElement('span'); + tag = 'span'; + } else { + paginationItem = document.createElement('a'); + let cleanURL = encodeURI(url); + paginationItem.href = decodeURI(cleanURL); + tag = 'a'; + } + } else { + paginationItem = document.createElement('span'); + tag = 'span'; + } + active == 'true' ? paginationItemClasses.push('active') : 0; + extraClasses != undefined && extraClasses != null + ? paginationItemClasses.push(extraClasses) + : 0; + special != undefined && special != null + ? this.setSpecialItem(special, paginationItem) + : 0; + text != undefined && text != null ? (paginationItem.innerText = text) : 0; + label != undefined && label != null + ? paginationItem.setAttribute('aria-label', label) + : 0; + paginationItem.className = paginationItemClasses.join(' '); + if (!this.shadowRoot.querySelector(tag)) { + this.shadowRoot.appendChild(paginationItem); + } + } + + setSpecialItem(special, paginationItem) { + switch (special) { + case 'first': + paginationItem.innerHTML = ``; + break; + + case 'previous': + paginationItem.innerHTML = ``; + break; + + case 'next': + paginationItem.innerHTML = ``; + break; + + case 'last': + paginationItem.innerHTML = ``; + break; + + case 'ellipsiss': + paginationItem.innerHTML = ``; + break; + + default: + break; + } + } +} diff --git a/src/components/atoms/PaginationItem/cod-pagination-item.js b/src/components/atoms/PaginationItem/cod-pagination-item.js index eb2976e9..34980767 100644 --- a/src/components/atoms/PaginationItem/cod-pagination-item.js +++ b/src/components/atoms/PaginationItem/cod-pagination-item.js @@ -1,2 +1,2 @@ -import PaginationItem from './PaginationItem'; -customElements.define('cod-pagination-item', PaginationItem); \ No newline at end of file +import PaginationItem from './PaginationItem'; +customElements.define('cod-pagination-item', PaginationItem); diff --git a/src/components/atoms/Progress/Progress.js b/src/components/atoms/Progress/Progress.js index bc3f1a83..89c18f17 100644 --- a/src/components/atoms/Progress/Progress.js +++ b/src/components/atoms/Progress/Progress.js @@ -1,71 +1,82 @@ -import styles from '!!raw-loader!./Progress.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -export default class Progress extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const progressStyles = document.createElement('style'); - progressStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(progressStyles); - // progress attributes - let striped = this.getAttribute('data-type'); - let label = this.getAttribute('data-label'); - let ariaLabel = this.getAttribute('data-aria-label'); - let animated = this.getAttribute('data-animated'); - let value = this.getAttribute('data-value'); - let backgroundColor = this.getAttribute('data-background-color'); - let stacked = this.getAttribute('data-multi-bars'); - const progressContainer = document.createElement('div'); - if(stacked == 'undefined' || stacked == 'null'){ - const bar = document.createElement('div'); - bar.role = 'progressbar'; - bar.setAttribute('aria-label', ariaLabel); - bar.setAttribute('aria-valuenow', value); - bar.className = 'progress'; - const barBody = document.createElement('div'); - barBody.style =`width: ${value}%`; - if(label != 'undefined' && label != 'null'){ - barBody.innerText = label; - } - barBody.className = ['progress-bar', `progress-bar-${animated || ''}`, `progress-bar-${striped || ''}`, `bg-${backgroundColor || ''}`].join(' '); - bar.appendChild(barBody); - progressContainer.appendChild(bar); - }else{ - progressContainer.className = 'progress-stacked'; - this.buildBar(JSON.parse(stacked), progressContainer); - - } - this.shadowRoot.appendChild(progressContainer); - } - - buildBar(bars , barContainer) { - bars.forEach(bar => { - let tempBar = document.createElement('div'); - tempBar.role = 'progressbar'; - tempBar.setAttribute('aria-label', bar.ariaLabel); - tempBar.setAttribute('aria-valuenow', bar.value); - tempBar.setAttribute('aria-valuemin', '0'); - tempBar.setAttribute('aria-valuemax', '100'); - tempBar.className = 'progress'; - const barBody = document.createElement('div'); - tempBar.style =`width: ${bar.value}%`; - (bar.label == undefined || bar.label == null) ? '' : barBody.innerText = bar.label; - barBody.className = ['progress-bar', `progress-bar-${bar.animated || ''}`, `progress-bar-${bar.striped || ''}`, `bg-${bar.backgroundColor || ''}`].join(' '); - tempBar.appendChild(barBody); - barContainer.appendChild(tempBar); - }); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Progress.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +export default class Progress extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const progressStyles = document.createElement('style'); + progressStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(progressStyles); + // progress attributes + let striped = this.getAttribute('data-type'); + let label = this.getAttribute('data-label'); + let ariaLabel = this.getAttribute('data-aria-label'); + let animated = this.getAttribute('data-animated'); + let value = this.getAttribute('data-value'); + let backgroundColor = this.getAttribute('data-background-color'); + let stacked = this.getAttribute('data-multi-bars'); + const progressContainer = document.createElement('div'); + if (stacked == 'undefined' || stacked == 'null') { + const bar = document.createElement('div'); + bar.role = 'progressbar'; + bar.setAttribute('aria-label', ariaLabel); + bar.setAttribute('aria-valuenow', value); + bar.className = 'progress'; + const barBody = document.createElement('div'); + barBody.style = `width: ${value}%`; + if (label != 'undefined' && label != 'null') { + barBody.innerText = label; + } + barBody.className = [ + 'progress-bar', + `progress-bar-${animated || ''}`, + `progress-bar-${striped || ''}`, + `bg-${backgroundColor || ''}`, + ].join(' '); + bar.appendChild(barBody); + progressContainer.appendChild(bar); + } else { + progressContainer.className = 'progress-stacked'; + this.buildBar(JSON.parse(stacked), progressContainer); + } + this.shadowRoot.appendChild(progressContainer); + } + + buildBar(bars, barContainer) { + bars.forEach((bar) => { + let tempBar = document.createElement('div'); + tempBar.role = 'progressbar'; + tempBar.setAttribute('aria-label', bar.ariaLabel); + tempBar.setAttribute('aria-valuenow', bar.value); + tempBar.setAttribute('aria-valuemin', '0'); + tempBar.setAttribute('aria-valuemax', '100'); + tempBar.className = 'progress'; + const barBody = document.createElement('div'); + tempBar.style = `width: ${bar.value}%`; + bar.label == undefined || bar.label == null + ? '' + : (barBody.innerText = bar.label); + barBody.className = [ + 'progress-bar', + `progress-bar-${bar.animated || ''}`, + `progress-bar-${bar.striped || ''}`, + `bg-${bar.backgroundColor || ''}`, + ].join(' '); + tempBar.appendChild(barBody); + barContainer.appendChild(tempBar); + }); + } +} diff --git a/src/components/atoms/Progress/cod-progress.js b/src/components/atoms/Progress/cod-progress.js index 01821be2..0775ab75 100644 --- a/src/components/atoms/Progress/cod-progress.js +++ b/src/components/atoms/Progress/cod-progress.js @@ -1,2 +1,2 @@ -import Progress from './Progress'; -customElements.define('cod-progress', Progress); \ No newline at end of file +import Progress from './Progress'; +customElements.define('cod-progress', Progress); diff --git a/src/components/atoms/Range/Range.js b/src/components/atoms/Range/Range.js index 135aef9d..8bec9219 100644 --- a/src/components/atoms/Range/Range.js +++ b/src/components/atoms/Range/Range.js @@ -1,47 +1,47 @@ -import styles from '!!raw-loader!./Range.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -export default class Range extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const rangeStyles = document.createElement('style'); - rangeStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(rangeStyles); - // progress attributes - let id = this.getAttribute('data-id'); - let disabled = this.getAttribute('data-disabled'); - let min = this.getAttribute('data-min'); - let max = this.getAttribute('data-max'); - let step = this.getAttribute('data-step'); - const range = document.createElement('input'); - range.type = 'range'; - range.className = 'form-range'; - if(disabled == 'true'){ - range.disabled = true; - } - console.log(min); - if(min != undefined || min != null){ - range.setAttribute('min', min); - } - if(max != undefined || max != null){ - range.setAttribute('max', max); - } - if(step != undefined || step != null){ - range.setAttribute('step', step); - } - this.shadowRoot.appendChild(range); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Range.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +export default class Range extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const rangeStyles = document.createElement('style'); + rangeStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(rangeStyles); + // progress attributes + let id = this.getAttribute('data-id'); + let disabled = this.getAttribute('data-disabled'); + let min = this.getAttribute('data-min'); + let max = this.getAttribute('data-max'); + let step = this.getAttribute('data-step'); + const range = document.createElement('input'); + range.type = 'range'; + range.className = 'form-range'; + if (disabled == 'true') { + range.disabled = true; + } + console.log(min); + if (min != undefined || min != null) { + range.setAttribute('min', min); + } + if (max != undefined || max != null) { + range.setAttribute('max', max); + } + if (step != undefined || step != null) { + range.setAttribute('step', step); + } + this.shadowRoot.appendChild(range); + } +} diff --git a/src/components/atoms/Range/cod-range.js b/src/components/atoms/Range/cod-range.js index 9947c4f1..f3c46fe5 100644 --- a/src/components/atoms/Range/cod-range.js +++ b/src/components/atoms/Range/cod-range.js @@ -1,2 +1,2 @@ -import Range from './Range'; -customElements.define('cod-range', Range); \ No newline at end of file +import Range from './Range'; +customElements.define('cod-range', Range); diff --git a/src/components/atoms/Spinner/Spinner.js b/src/components/atoms/Spinner/Spinner.js index d510d2ed..6557f679 100644 --- a/src/components/atoms/Spinner/Spinner.js +++ b/src/components/atoms/Spinner/Spinner.js @@ -1,44 +1,50 @@ -import styles from '!!raw-loader!./Spinner.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; -export default class Image extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const spinnerStyles = document.createElement('style'); - spinnerStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(spinnerStyles); - // image attributes - let spinnerType = this.getAttribute('data-type'); - let spinnerSize = this.getAttribute('data-size'); - let backgroundColor = this.getAttribute('data-background-color'); - let displayType = this.getAttribute('data-display-type'); - let spinnerSizeClass; - if(spinnerSize == 'sm'){ - spinnerSizeClass = `spinner-${spinnerType}-${spinnerSize}`; - }else{ - spinnerSizeClass = ''; - } - let spinner; - (displayType == 'inline') ? spinner = document.createElement('span') : spinner = document.createElement('div'); - spinner.className = [`spinner-${spinnerType || ''}`, spinnerSizeClass, `text-${backgroundColor || ''}`].join(' '); - spinner.role = 'status'; - let pLoading = document.createElement('span'); - pLoading.innerText = 'Loading...'; - pLoading.className = 'visually-hidden'; - spinner.appendChild(pLoading); - this.shadowRoot.appendChild(spinner); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Spinner.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; +export default class Image extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const spinnerStyles = document.createElement('style'); + spinnerStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(spinnerStyles); + // image attributes + let spinnerType = this.getAttribute('data-type'); + let spinnerSize = this.getAttribute('data-size'); + let backgroundColor = this.getAttribute('data-background-color'); + let displayType = this.getAttribute('data-display-type'); + let spinnerSizeClass; + if (spinnerSize == 'sm') { + spinnerSizeClass = `spinner-${spinnerType}-${spinnerSize}`; + } else { + spinnerSizeClass = ''; + } + let spinner; + displayType == 'inline' + ? (spinner = document.createElement('span')) + : (spinner = document.createElement('div')); + spinner.className = [ + `spinner-${spinnerType || ''}`, + spinnerSizeClass, + `text-${backgroundColor || ''}`, + ].join(' '); + spinner.role = 'status'; + let pLoading = document.createElement('span'); + pLoading.innerText = 'Loading...'; + pLoading.className = 'visually-hidden'; + spinner.appendChild(pLoading); + this.shadowRoot.appendChild(spinner); + } +} diff --git a/src/components/atoms/Spinner/cod-spinner.js b/src/components/atoms/Spinner/cod-spinner.js index 39180ba2..806f1f2f 100644 --- a/src/components/atoms/Spinner/cod-spinner.js +++ b/src/components/atoms/Spinner/cod-spinner.js @@ -1,2 +1,2 @@ -import Spinner from './Spinner'; -customElements.define('cod-spinner', Spinner); \ No newline at end of file +import Spinner from './Spinner'; +customElements.define('cod-spinner', Spinner); diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js index e91534a2..e149cb53 100644 --- a/src/components/atoms/TableBody/TableBody.js +++ b/src/components/atoms/TableBody/TableBody.js @@ -1,47 +1,55 @@ -import styles from '!!raw-loader!./TableBody.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class TableBody extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.tableBody = document.createElement('div'); - this.tableBody.role = 'rowgroup'; - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node, index)=>{ - (this.getAttribute('data-striped-row') == 'true' && (index % 2 == 0)) ? node.setAttribute('data-striped-row', 'true') : 0; - (this.getAttribute('data-hover') == 'true') ? node.setAttribute('data-hover', 'true') : 0; - (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; - (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; - (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; - this.tableBody.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.tableBody); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./TableBody.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class TableBody extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableBody = document.createElement('div'); + this.tableBody.role = 'rowgroup'; + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node, index) => { + this.getAttribute('data-striped-row') == 'true' && index % 2 == 0 + ? node.setAttribute('data-striped-row', 'true') + : 0; + this.getAttribute('data-hover') == 'true' + ? node.setAttribute('data-hover', 'true') + : 0; + this.getAttribute('data-striped-col') == 'true' + ? node.setAttribute('data-striped-col', 'true') + : 0; + this.getAttribute('data-vertical-align') == 'true' + ? node.setAttribute('data-vertical-align', 'true') + : 0; + this.getAttribute('data-legacy-responsive') == 'true' + ? node.setAttribute('data-legacy-responsive', 'true') + : 0; + this.tableBody.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableBody); + } +} diff --git a/src/components/atoms/TableBody/cod-table-body.js b/src/components/atoms/TableBody/cod-table-body.js index 09d6c762..9c217ea4 100644 --- a/src/components/atoms/TableBody/cod-table-body.js +++ b/src/components/atoms/TableBody/cod-table-body.js @@ -1,2 +1,2 @@ -import TableBody from './TableBody'; -customElements.define('cod-table-body', TableBody); \ No newline at end of file +import TableBody from './TableBody'; +customElements.define('cod-table-body', TableBody); diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css index 62c0acaa..5b981115 100644 --- a/src/components/atoms/TableCell/TableCell.css +++ b/src/components/atoms/TableCell/TableCell.css @@ -1,15 +1,16 @@ -.table-cell{ - padding: 0.5rem 0.5rem; - background-color: var(--bs-table-bg); - border-bottom: solid var(--bs-border-width) var(--bs-secondary); - box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); - height: 100%; -} - -.table-cell.table-striped, .table-cell.table-striped-columns{ - --bs-table-accent-bg: var(--bs-table-striped-bg); -} - -.table-cell.table-legacy-responsive{ - width: 5em; -} \ No newline at end of file +.table-cell { + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom: solid var(--bs-border-width) var(--bs-secondary); + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); + height: 100%; +} + +.table-cell.table-striped, +.table-cell.table-striped-columns { + --bs-table-accent-bg: var(--bs-table-striped-bg); +} + +.table-cell.table-legacy-responsive { + width: 5em; +} diff --git a/src/components/atoms/TableCell/TableCell.js b/src/components/atoms/TableCell/TableCell.js index 481fe87a..7df1131f 100644 --- a/src/components/atoms/TableCell/TableCell.js +++ b/src/components/atoms/TableCell/TableCell.js @@ -1,58 +1,62 @@ -import styles from '!!raw-loader!./TableCell.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class TableCell extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.tableCell = document.createElement('div'); - this.tableCell.role = 'cell'; - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.childNodes); - tempElements.forEach((node)=>{ - this.tableCell.appendChild(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.tableCell); - } - - connectedCallback() { - // TableCell attributes - let stripedRow = this.getAttribute('data-striped-row'); - let stripedCol = this.getAttribute('data-striped-col'); - let legacyResponsive = this.getAttribute('data-legacy-responsive'); - let verticalAlign = this.getAttribute('data-vertical-align'); - let extraClasses = this.getAttribute('data-extra-classes'); - let tableCellClasses = ['table-cell']; - (verticalAlign != undefined && verticalAlign != null) ? tableCellClasses.push(verticalAlign) : 0; - (legacyResponsive == 'true') ? tableCellClasses.push('table-legacy-responsive') : 0; - (stripedRow == 'true') ? tableCellClasses.push('table-striped') : 0; - (stripedCol == 'true') ? tableCellClasses.push('table-striped-columns') : 0; - (extraClasses != undefined && extraClasses != null) ? tableCellClasses.push(extraClasses) : 0; - this.tableCell.className = tableCellClasses.join(' '); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./TableCell.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class TableCell extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableCell = document.createElement('div'); + this.tableCell.role = 'cell'; + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.childNodes); + tempElements.forEach((node) => { + this.tableCell.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableCell); + } + + connectedCallback() { + // TableCell attributes + let stripedRow = this.getAttribute('data-striped-row'); + let stripedCol = this.getAttribute('data-striped-col'); + let legacyResponsive = this.getAttribute('data-legacy-responsive'); + let verticalAlign = this.getAttribute('data-vertical-align'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableCellClasses = ['table-cell']; + verticalAlign != undefined && verticalAlign != null + ? tableCellClasses.push(verticalAlign) + : 0; + legacyResponsive == 'true' + ? tableCellClasses.push('table-legacy-responsive') + : 0; + stripedRow == 'true' ? tableCellClasses.push('table-striped') : 0; + stripedCol == 'true' ? tableCellClasses.push('table-striped-columns') : 0; + extraClasses != undefined && extraClasses != null + ? tableCellClasses.push(extraClasses) + : 0; + this.tableCell.className = tableCellClasses.join(' '); + } +} diff --git a/src/components/atoms/TableCell/cod-table-cell.js b/src/components/atoms/TableCell/cod-table-cell.js index a36ffaa8..9ddf1aa9 100644 --- a/src/components/atoms/TableCell/cod-table-cell.js +++ b/src/components/atoms/TableCell/cod-table-cell.js @@ -1,2 +1,2 @@ -import TableCell from './TableCell'; -customElements.define('cod-table-cell', TableCell); \ No newline at end of file +import TableCell from './TableCell'; +customElements.define('cod-table-cell', TableCell); diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.css b/src/components/atoms/TableCellHeader/TableCellHeader.css index 6e4bc0bb..bd94d983 100644 --- a/src/components/atoms/TableCellHeader/TableCellHeader.css +++ b/src/components/atoms/TableCellHeader/TableCellHeader.css @@ -1,16 +1,16 @@ -.table-cell-header{ - padding: 0.5rem 0.5rem; - background-color: var(--bs-table-bg); - border-bottom: solid var(--bs-border-width) var(--bs-secondary); - box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); - font-weight: bold; - height: 100%; -} - -.table-cell-header.table-striped-columns{ - --bs-table-accent-bg: var(--bs-table-striped-bg); -} - -.table-cell-header.table-legacy-responsive{ - width: 5em; -} \ No newline at end of file +.table-cell-header { + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom: solid var(--bs-border-width) var(--bs-secondary); + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); + font-weight: bold; + height: 100%; +} + +.table-cell-header.table-striped-columns { + --bs-table-accent-bg: var(--bs-table-striped-bg); +} + +.table-cell-header.table-legacy-responsive { + width: 5em; +} diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.js b/src/components/atoms/TableCellHeader/TableCellHeader.js index b7bf5e06..9c4a0dff 100644 --- a/src/components/atoms/TableCellHeader/TableCellHeader.js +++ b/src/components/atoms/TableCellHeader/TableCellHeader.js @@ -1,58 +1,64 @@ -import styles from '!!raw-loader!./TableCellHeader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class TableCellHeader extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.tableCellHeader = document.createElement('div'); - this.tableCellHeader.role = 'columnheader'; - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.childNodes); - tempElements.forEach((node)=>{ - this.tableCellHeader.appendChild(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.tableCellHeader); - } - - connectedCallback() { - // tableCellHeader attributes - let stripedRow = this.getAttribute('data-striped-row'); - let stripedCol = this.getAttribute('data-striped-col'); - let legacyResponsive = this.getAttribute('data-legacy-responsive'); - let verticalAlign = this.getAttribute('data-vertical-align'); - let extraClasses = this.getAttribute('data-extra-classes'); - let tableCellHeaderClasses = ['table-cell-header']; - (verticalAlign != undefined && verticalAlign != null) ? tableCellHeaderClasses.push(verticalAlign) : 0; - (legacyResponsive == 'true') ? tableCellHeaderClasses.push('table-legacy-responsive') : 0; - (stripedRow == 'true') ? tableCellHeaderClasses.push('table-striped') : 0; - (stripedCol == 'true') ? tableCellHeaderClasses.push('table-striped-columns') : 0; - (extraClasses != undefined && extraClasses != null) ? tableCellHeaderClasses.push(extraClasses) : 0; - this.tableCellHeader.className = tableCellHeaderClasses.join(' '); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./TableCellHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class TableCellHeader extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableCellHeader = document.createElement('div'); + this.tableCellHeader.role = 'columnheader'; + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.childNodes); + tempElements.forEach((node) => { + this.tableCellHeader.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableCellHeader); + } + + connectedCallback() { + // tableCellHeader attributes + let stripedRow = this.getAttribute('data-striped-row'); + let stripedCol = this.getAttribute('data-striped-col'); + let legacyResponsive = this.getAttribute('data-legacy-responsive'); + let verticalAlign = this.getAttribute('data-vertical-align'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableCellHeaderClasses = ['table-cell-header']; + verticalAlign != undefined && verticalAlign != null + ? tableCellHeaderClasses.push(verticalAlign) + : 0; + legacyResponsive == 'true' + ? tableCellHeaderClasses.push('table-legacy-responsive') + : 0; + stripedRow == 'true' ? tableCellHeaderClasses.push('table-striped') : 0; + stripedCol == 'true' + ? tableCellHeaderClasses.push('table-striped-columns') + : 0; + extraClasses != undefined && extraClasses != null + ? tableCellHeaderClasses.push(extraClasses) + : 0; + this.tableCellHeader.className = tableCellHeaderClasses.join(' '); + } +} diff --git a/src/components/atoms/TableCellHeader/cod-table-cell-header.js b/src/components/atoms/TableCellHeader/cod-table-cell-header.js index ef6d46f0..7d49242a 100644 --- a/src/components/atoms/TableCellHeader/cod-table-cell-header.js +++ b/src/components/atoms/TableCellHeader/cod-table-cell-header.js @@ -1,2 +1,2 @@ -import TableCellHeader from './TableCellHeader'; -customElements.define('cod-table-cell-header', TableCellHeader); \ No newline at end of file +import TableCellHeader from './TableCellHeader'; +customElements.define('cod-table-cell-header', TableCellHeader); diff --git a/src/components/atoms/TableHeader/TableHeader.js b/src/components/atoms/TableHeader/TableHeader.js index f4acc946..46bc3bbe 100644 --- a/src/components/atoms/TableHeader/TableHeader.js +++ b/src/components/atoms/TableHeader/TableHeader.js @@ -1,45 +1,49 @@ -import styles from '!!raw-loader!./TableHeader.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class TableHeader extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.tableHeader = document.createElement('div'); - this.tableHeader.role="rowgroup"; - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; - (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; - (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; - this.tableHeader.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.tableHeader); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./TableHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class TableHeader extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableHeader = document.createElement('div'); + this.tableHeader.role = 'rowgroup'; + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.getAttribute('data-striped-col') == 'true' + ? node.setAttribute('data-striped-col', 'true') + : 0; + this.getAttribute('data-vertical-align') == 'true' + ? node.setAttribute('data-vertical-align', 'true') + : 0; + this.getAttribute('data-legacy-responsive') == 'true' + ? node.setAttribute('data-legacy-responsive', 'true') + : 0; + this.tableHeader.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableHeader); + } +} diff --git a/src/components/atoms/TableHeader/cod-table-header.js b/src/components/atoms/TableHeader/cod-table-header.js index 52f031e5..3d5410e1 100644 --- a/src/components/atoms/TableHeader/cod-table-header.js +++ b/src/components/atoms/TableHeader/cod-table-header.js @@ -1,2 +1,2 @@ -import TableHeader from './TableHeader'; -customElements.define('cod-table-header', TableHeader); \ No newline at end of file +import TableHeader from './TableHeader'; +customElements.define('cod-table-header', TableHeader); diff --git a/src/components/atoms/TableRow/TableRow.css b/src/components/atoms/TableRow/TableRow.css index f5cf6c7a..376bb8dd 100644 --- a/src/components/atoms/TableRow/TableRow.css +++ b/src/components/atoms/TableRow/TableRow.css @@ -1,31 +1,36 @@ -.table-row{ - border-color: inherit; - border-style: solid; - border-width: 0; - display: flex; - align-items: stretch; -} - -.table-row cod-table-cell, .table-row cod-table-cell-header{ - flex: 1; -} - -.table-row cod-table-cell[colspan="2"], .table-row cod-table-cell-header[colspan="2"]{ - flex: 2; -} - -.table-row cod-table-cell[colspan="3"], .table-row cod-table-cell-header[colspan="3"]{ - flex: 3; -} - -.table-row cod-table-cell[colspan="4"], .table-row cod-table-cell-header[colspan="4"]{ - flex: 4; -} - -.table-row cod-table-cell[colspan="5"], .table-row cod-table-cell-header[colspan="5"]{ - flex: 5; -} - -.table-row.table-hover:hover{ - --bs-table-accent-bg: var(--bs-table-hover-bg); -} \ No newline at end of file +.table-row { + border-color: inherit; + border-style: solid; + border-width: 0; + display: flex; + align-items: stretch; +} + +.table-row cod-table-cell, +.table-row cod-table-cell-header { + flex: 1; +} + +.table-row cod-table-cell[colspan='2'], +.table-row cod-table-cell-header[colspan='2'] { + flex: 2; +} + +.table-row cod-table-cell[colspan='3'], +.table-row cod-table-cell-header[colspan='3'] { + flex: 3; +} + +.table-row cod-table-cell[colspan='4'], +.table-row cod-table-cell-header[colspan='4'] { + flex: 4; +} + +.table-row cod-table-cell[colspan='5'], +.table-row cod-table-cell-header[colspan='5'] { + flex: 5; +} + +.table-row.table-hover:hover { + --bs-table-accent-bg: var(--bs-table-hover-bg); +} diff --git a/src/components/atoms/TableRow/TableRow.js b/src/components/atoms/TableRow/TableRow.js index 85785dc9..4660f42d 100644 --- a/src/components/atoms/TableRow/TableRow.js +++ b/src/components/atoms/TableRow/TableRow.js @@ -1,56 +1,64 @@ -import styles from '!!raw-loader!./TableRow.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class TableBody extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.tableRow = document.createElement('div'); - this.tableRow.role = 'row'; - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node, index)=>{ - (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0; - (this.getAttribute('data-striped-col') == 'true' && (index % 2 != 0)) ? node.setAttribute('data-striped-col', 'true') : 0; - (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; - (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; - this.tableRow.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - - shadow.appendChild(this.tableRow); - } - - connectedCallback() { - // TableRow attributes - let extraClasses = this.getAttribute('data-extra-classes'); - let hover = this.getAttribute('data-hover'); - let tableRowClasses = ['table-row']; - (hover == 'true') ? tableRowClasses.push('table-hover') : 0; - (extraClasses != undefined && extraClasses != null) ? tableRowClasses.push(extraClasses) : 0; - this.tableRow.className = tableRowClasses.join(' '); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./TableRow.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class TableBody extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableRow = document.createElement('div'); + this.tableRow.role = 'row'; + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node, index) => { + this.getAttribute('data-striped-row') == 'true' + ? node.setAttribute('data-striped-row', 'true') + : 0; + this.getAttribute('data-striped-col') == 'true' && index % 2 != 0 + ? node.setAttribute('data-striped-col', 'true') + : 0; + this.getAttribute('data-vertical-align') == 'true' + ? node.setAttribute('data-vertical-align', 'true') + : 0; + this.getAttribute('data-legacy-responsive') == 'true' + ? node.setAttribute('data-legacy-responsive', 'true') + : 0; + this.tableRow.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableRow); + } + + connectedCallback() { + // TableRow attributes + let extraClasses = this.getAttribute('data-extra-classes'); + let hover = this.getAttribute('data-hover'); + let tableRowClasses = ['table-row']; + hover == 'true' ? tableRowClasses.push('table-hover') : 0; + extraClasses != undefined && extraClasses != null + ? tableRowClasses.push(extraClasses) + : 0; + this.tableRow.className = tableRowClasses.join(' '); + } +} diff --git a/src/components/atoms/TableRow/cod-table-row.js b/src/components/atoms/TableRow/cod-table-row.js index 5a2bfa36..45978d10 100644 --- a/src/components/atoms/TableRow/cod-table-row.js +++ b/src/components/atoms/TableRow/cod-table-row.js @@ -1,2 +1,2 @@ -import TableRow from './TableRow'; -customElements.define('cod-table-row', TableRow); \ No newline at end of file +import TableRow from './TableRow'; +customElements.define('cod-table-row', TableRow); diff --git a/src/components/molecules/Accordion/Accordion.js b/src/components/molecules/Accordion/Accordion.js index f82b3bbe..ef3dc183 100644 --- a/src/components/molecules/Accordion/Accordion.js +++ b/src/components/molecules/Accordion/Accordion.js @@ -1,68 +1,70 @@ -import styles from '!!raw-loader!./Accordion.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Accordion extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.accordion = document.createElement('div'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node, index)=>{ - switch (node.tagName) { - case 'COD-ACCORDION-ITEM': - let accordionItem = document.createElement('div'); - accordionItem.className = 'accordion-item'; - node.setAttribute('data-parent-id', this.getAttribute('data-id')); - node.setAttribute('data-index', index); - accordionItem.appendChild(node); - this.accordion.append(accordionItem); - break; - - default: - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.card.appendChild(node); - break; - } - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let flush = this.getAttribute('data-flush'); - let id = this.getAttribute('data-id'); - let extraClasses = this.getAttribute('data-extra-classes'); - let accordionClasses = ['accordion']; - (flush == 'true') ? accordionClasses.push('accordion-flush'): 0; - (extraClasses != undefined && extraClasses != null) ? accordionClasses.push(extraClasses): 0; - this.accordion.className = accordionClasses.join(' '); - this.accordion.id = id; - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.accordion); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Accordion.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Accordion extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.accordion = document.createElement('div'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node, index) => { + switch (node.tagName) { + case 'COD-ACCORDION-ITEM': + let accordionItem = document.createElement('div'); + accordionItem.className = 'accordion-item'; + node.setAttribute('data-parent-id', this.getAttribute('data-id')); + node.setAttribute('data-index', index); + accordionItem.appendChild(node); + this.accordion.append(accordionItem); + break; + + default: + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.card.appendChild(node); + break; + } + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let flush = this.getAttribute('data-flush'); + let id = this.getAttribute('data-id'); + let extraClasses = this.getAttribute('data-extra-classes'); + let accordionClasses = ['accordion']; + flush == 'true' ? accordionClasses.push('accordion-flush') : 0; + extraClasses != undefined && extraClasses != null + ? accordionClasses.push(extraClasses) + : 0; + this.accordion.className = accordionClasses.join(' '); + this.accordion.id = id; + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.accordion); + } + } +} diff --git a/src/components/molecules/Accordion/cod-accordion.js b/src/components/molecules/Accordion/cod-accordion.js index 3e2e1d20..b865ead3 100644 --- a/src/components/molecules/Accordion/cod-accordion.js +++ b/src/components/molecules/Accordion/cod-accordion.js @@ -1,2 +1,2 @@ -import Accordion from './Accordion'; -customElements.define('cod-accordion', Accordion); \ No newline at end of file +import Accordion from './Accordion'; +customElements.define('cod-accordion', Accordion); diff --git a/src/components/molecules/ButtonGroup/ButtonGroup.js b/src/components/molecules/ButtonGroup/ButtonGroup.js index 04a1ce80..b733b7f7 100644 --- a/src/components/molecules/ButtonGroup/ButtonGroup.js +++ b/src/components/molecules/ButtonGroup/ButtonGroup.js @@ -1,63 +1,68 @@ -import styles from '!!raw-loader!./ButtonGroup.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` -
- -`; - -export default class FormCheckGroup extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.btnGroup = shadow.querySelector('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.btnGroup.append(node); - }); - }); - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const formSelectStyles = document.createElement('style'); - formSelectStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(formSelectStyles); - } - - connectedCallback() { - // setting up styles - let type = this.getAttribute('data-type'); - let label = this.getAttribute('data-label'); - let size = this.getAttribute('data-size'); - let vertical = this.getAttribute('data-vertical'); - let extraClasses = this.getAttribute('data-extra-classes'); - if(type == 'group'){ - this.btnGroup.role = 'group'; - }else{ - this.btnGroup.role = 'toolbar'; - } - if(size != undefined && size != null){ - size = `btn-group-${size}`; - } - if(vertical == 'true'){ - vertical = 'btn-group-vertical'; - } - this.btnGroup.setAttribute('aria-label', label); - this.btnGroup.className = [`btn-${type}`, `${size || ''}`, `${vertical || ''}`, `${extraClasses || ''}`].join(' '); - } - - }; \ No newline at end of file +import styles from '!!raw-loader!./ButtonGroup.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` +
+ +`; + +export default class FormCheckGroup extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.btnGroup = shadow.querySelector('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.btnGroup.append(node); + }); + }); + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const formSelectStyles = document.createElement('style'); + formSelectStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(formSelectStyles); + } + + connectedCallback() { + // setting up styles + let type = this.getAttribute('data-type'); + let label = this.getAttribute('data-label'); + let size = this.getAttribute('data-size'); + let vertical = this.getAttribute('data-vertical'); + let extraClasses = this.getAttribute('data-extra-classes'); + if (type == 'group') { + this.btnGroup.role = 'group'; + } else { + this.btnGroup.role = 'toolbar'; + } + if (size != undefined && size != null) { + size = `btn-group-${size}`; + } + if (vertical == 'true') { + vertical = 'btn-group-vertical'; + } + this.btnGroup.setAttribute('aria-label', label); + this.btnGroup.className = [ + `btn-${type}`, + `${size || ''}`, + `${vertical || ''}`, + `${extraClasses || ''}`, + ].join(' '); + } +} diff --git a/src/components/molecules/ButtonGroup/cod-button-group.js b/src/components/molecules/ButtonGroup/cod-button-group.js index ee919e2d..b6837bca 100644 --- a/src/components/molecules/ButtonGroup/cod-button-group.js +++ b/src/components/molecules/ButtonGroup/cod-button-group.js @@ -1,2 +1,2 @@ -import ButtonGroup from './ButtonGroup'; -customElements.define('cod-button-group', ButtonGroup); \ No newline at end of file +import ButtonGroup from './ButtonGroup'; +customElements.define('cod-button-group', ButtonGroup); diff --git a/src/components/molecules/Dropdown/Dropdown.js b/src/components/molecules/Dropdown/Dropdown.js index 1cd5669f..f2a1a944 100644 --- a/src/components/molecules/Dropdown/Dropdown.js +++ b/src/components/molecules/Dropdown/Dropdown.js @@ -1,81 +1,87 @@ -import styles from '!!raw-loader!./Dropdown.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Dropdown extends HTMLElement { - - static get observedAttributes() { - return ['data-show']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.dropdown = document.createElement('div'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.dropdown.append(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - console.log(newValue); - console.log(this.dropdownMenu); - } - - connectedCallback() { - // badge attributes - let show = this.getAttribute('data-show'); - let split = this.getAttribute('data-split'); - (split == 'true') ? split = 'btn-group' : split = 'dropdown'; - this.dropdown.className = split; - if(this.querySelector('cod-button[data-bs-toggle="dropdown"]')){ - this.querySelector('cod-button[data-bs-toggle="dropdown"]').addEventListener('click', this._onClick) - } - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.dropdown); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - console.log(this.parentElement.querySelector('cod-dropdown-menu')); - if (e.target.getAttribute('data-bs-toggle') === 'dropdown') { - console.log('changing dropdown state'); - if(this.getAttribute('aria-expanded') == 'true'){ - this.setAttribute('aria-expanded', 'false'); - this.parentElement.querySelector('cod-dropdown-menu').setAttribute('data-show', 'false'); - }else{ - this.setAttribute('aria-expanded', 'true'); - this.parentElement.querySelector('cod-dropdown-menu').setAttribute('data-show', 'true'); - } - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Dropdown.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Dropdown extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.dropdown = document.createElement('div'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.dropdown.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + console.log(newValue); + console.log(this.dropdownMenu); + } + + connectedCallback() { + // badge attributes + let show = this.getAttribute('data-show'); + let split = this.getAttribute('data-split'); + split == 'true' ? (split = 'btn-group') : (split = 'dropdown'); + this.dropdown.className = split; + if (this.querySelector('cod-button[data-bs-toggle="dropdown"]')) { + this.querySelector( + 'cod-button[data-bs-toggle="dropdown"]', + ).addEventListener('click', this._onClick); + } + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.dropdown); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + console.log(this.parentElement.querySelector('cod-dropdown-menu')); + if (e.target.getAttribute('data-bs-toggle') === 'dropdown') { + console.log('changing dropdown state'); + if (this.getAttribute('aria-expanded') == 'true') { + this.setAttribute('aria-expanded', 'false'); + this.parentElement + .querySelector('cod-dropdown-menu') + .setAttribute('data-show', 'false'); + } else { + this.setAttribute('aria-expanded', 'true'); + this.parentElement + .querySelector('cod-dropdown-menu') + .setAttribute('data-show', 'true'); + } + } + } +} diff --git a/src/components/molecules/Dropdown/cod-dropdown.js b/src/components/molecules/Dropdown/cod-dropdown.js index c2059f43..7cef37c7 100644 --- a/src/components/molecules/Dropdown/cod-dropdown.js +++ b/src/components/molecules/Dropdown/cod-dropdown.js @@ -1,2 +1,2 @@ -import Dropdown from './Dropdown'; -customElements.define('cod-dropdown', Dropdown); \ No newline at end of file +import Dropdown from './Dropdown'; +customElements.define('cod-dropdown', Dropdown); diff --git a/src/components/molecules/FormCheckGroup/FormCheckGroup.js b/src/components/molecules/FormCheckGroup/FormCheckGroup.js index eedba906..70b0061a 100644 --- a/src/components/molecules/FormCheckGroup/FormCheckGroup.js +++ b/src/components/molecules/FormCheckGroup/FormCheckGroup.js @@ -1,4 +1,4 @@ -const template = document.createElement("template"); +const template = document.createElement('template'); template.innerHTML = ` @@ -20,17 +20,17 @@ export default class FormCheckGroup extends HTMLElement { super(); // Create a shadow root // Create a shadow root - const shadow = this.attachShadow({ mode: "open" }); + const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); } connectedCallback() { // setting up styles - if (!this.hasAttribute("role")) { - if (this.getAttribute("data-type") == "radio") { - this.setAttribute("role", "radiogroup"); + if (!this.hasAttribute('role')) { + if (this.getAttribute('data-type') == 'radio') { + this.setAttribute('role', 'radiogroup'); } else { - this.setAttribute("role", "group"); + this.setAttribute('role', 'group'); } } let firstFormCheck = this.checkedFormCheck; @@ -38,16 +38,16 @@ export default class FormCheckGroup extends HTMLElement { this._uncheckAll(); this._checkNode(firstFormCheck); } else { - this.querySelector("cod-form-check").setAttribute("tabindex", 0); + this.querySelector('cod-form-check').setAttribute('tabindex', 0); } - this.addEventListener("keydown", this._onKeyDown); - this.addEventListener("click", this._onClick); + this.addEventListener('keydown', this._onKeyDown); + this.addEventListener('click', this._onClick); } disconnectedCallback() { - this.removeEventListener("keydown", this._onKeyDown); - this.removeEventListener("click", this._onClick); + this.removeEventListener('keydown', this._onKeyDown); + this.removeEventListener('click', this._onClick); } _onKeyDown(e) { @@ -76,7 +76,7 @@ export default class FormCheckGroup extends HTMLElement { case KEYCODE.SPACE: e.preventDefault(); - if (e.target.tagName.toLowerCase() === "cod-form-check") { + if (e.target.tagName.toLowerCase() === 'cod-form-check') { this._setChecked(e.target); } break; @@ -91,19 +91,19 @@ export default class FormCheckGroup extends HTMLElement { } get firstFormCheck() { - return this.querySelector("cod-form-check:first-of-type"); + return this.querySelector('cod-form-check:first-of-type'); } get lastFormCheck() { - return this.querySelector("cod-form-check:last-of-type"); + return this.querySelector('cod-form-check:last-of-type'); } _prevFormCheck(node) { let prev = node.previousElementSibling; while (prev) { if ( - prev.getAttribute("data-type") === "radio" || - prev.getAttribute("data-type") === "checkbox" + prev.getAttribute('data-type') === 'radio' || + prev.getAttribute('data-type') === 'checkbox' ) { return prev; } @@ -116,8 +116,8 @@ export default class FormCheckGroup extends HTMLElement { let next = node.nextElementSibling; while (next) { if ( - next.getAttribute("data-type") === "radio" || - prev.getAttribute("data-type") === "checkbox" + next.getAttribute('data-type') === 'radio' || + prev.getAttribute('data-type') === 'checkbox' ) { return next; } @@ -151,17 +151,17 @@ export default class FormCheckGroup extends HTMLElement { } _uncheckAll() { - const formCheck = this.querySelectorAll("cod-form-check"); + const formCheck = this.querySelectorAll('cod-form-check'); for (let i = 0; i < formCheck.length; i++) { let btn = formCheck[i]; - btn.setAttribute("data-checked", "false"); - btn.setAttribute("data-required", "false"); + btn.setAttribute('data-checked', 'false'); + btn.setAttribute('data-required', 'false'); btn.tabIndex = -1; } } _validateRequired() { - const formCheck = this.querySelectorAll("cod-form-check"); + const formCheck = this.querySelectorAll('cod-form-check'); let isValid = false; for (let i = 0; i < formCheck.length; i++) { let checkbox = formCheck[i]; @@ -171,24 +171,24 @@ export default class FormCheckGroup extends HTMLElement { } _requiredAll() { - const formCheck = this.querySelectorAll("cod-form-check"); + const formCheck = this.querySelectorAll('cod-form-check'); for (let i = 0; i < formCheck.length; i++) { let btn = formCheck[i]; - btn.setAttribute("data-required", "true"); + btn.setAttribute('data-required', 'true'); } } _unRequiredAll() { - const formCheck = this.querySelectorAll("cod-form-check"); + const formCheck = this.querySelectorAll('cod-form-check'); for (let i = 0; i < formCheck.length; i++) { let btn = formCheck[i]; - btn.setAttribute("data-required", "false"); + btn.setAttribute('data-required', 'false'); } } _checkNode(node) { - node.setAttribute("data-checked", "true"); - node.setAttribute("data-required", "true"); + node.setAttribute('data-checked', 'true'); + node.setAttribute('data-required', 'true'); node.tabIndex = 0; } @@ -197,11 +197,11 @@ export default class FormCheckGroup extends HTMLElement { } _onClick(e) { - if (e.target.getAttribute("data-type") === "radio") { + if (e.target.getAttribute('data-type') === 'radio') { this._setChecked(e.target); } - if (e.target.getAttribute("data-type") === "checkbox") { - if (this.getAttribute("data-required") == "true") { + if (e.target.getAttribute('data-type') === 'checkbox') { + if (this.getAttribute('data-required') == 'true') { this._validateRequired(e.target); } } diff --git a/src/components/molecules/FormCheckGroup/cod-form-check-group.js b/src/components/molecules/FormCheckGroup/cod-form-check-group.js index 6e5fa7a1..2269c35a 100644 --- a/src/components/molecules/FormCheckGroup/cod-form-check-group.js +++ b/src/components/molecules/FormCheckGroup/cod-form-check-group.js @@ -1,2 +1,2 @@ -import Form from './FormCheckGroup'; -customElements.define('cod-form-check-group', Form); \ No newline at end of file +import Form from './FormCheckGroup'; +customElements.define('cod-form-check-group', Form); diff --git a/src/components/molecules/ListGroup/ListGroup.js b/src/components/molecules/ListGroup/ListGroup.js index 26e6fc89..ec1e9c72 100644 --- a/src/components/molecules/ListGroup/ListGroup.js +++ b/src/components/molecules/ListGroup/ListGroup.js @@ -1,84 +1,93 @@ -import styles from '!!raw-loader!./ListGroup.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - -export default class FormCheckGroup extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.listGroup = null; - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const listGroupStyles = document.createElement('style'); - listGroupStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(listGroupStyles); - } - - connectedCallback() { - // setting up styles - let tag = this.getAttribute('data-tag'); - let flushed = this.getAttribute('data-flushed'); - let numbered = this.getAttribute('data-numbered'); - let horizontal = this.getAttribute('data-horizontal'); - let extraClasses = this.getAttribute('data-extra-classes'); - this.listGroup = document.createElement(tag); - (flushed == 'true') ? flushed = 'list-group-flush' : flushed = null; - (numbered == 'true') ? numbered = 'list-group-numbered' : numbered = null; - (horizontal == 'true') ? horizontal = 'list-group-horizontal' : horizontal = null; - this.listGroup.className = [`list-group`, `${flushed || ''}`, `${numbered || ''}`, `${horizontal || ''}`, `${extraClasses || ''}`].join(' '); - - if (!this.shadowRoot.querySelector(tag)) { - this.shadowRoot.addEventListener('slotchange', ev => { - let tempElements = Array.from(this.children); - let tempLength = tempElements.length; - tempElements.forEach((node, index) => { - let pClasses = null; - switch (index) { - case 0: - node.setAttribute('data-order', 'first'); - break; - - case (tempLength - 1): - node.setAttribute('data-order', 'last'); - break; - - default: - node.setAttribute('data-order', 'middle'); - break; - } - if (flushed) { - pClasses = `${flushed} `; - } - if (numbered) { - pClasses = `${numbered} `; - node.setAttribute('data-order-index', (index + 1)); - } - if (horizontal) { - pClasses = `${horizontal} `; - } - if (pClasses) { - node.setAttribute('data-parent-classes', pClasses); - } - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.listGroup.append(node); - }); - }); - this.shadowRoot.appendChild(this.listGroup); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./ListGroup.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class FormCheckGroup extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.listGroup = null; + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const listGroupStyles = document.createElement('style'); + listGroupStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(listGroupStyles); + } + + connectedCallback() { + // setting up styles + let tag = this.getAttribute('data-tag'); + let flushed = this.getAttribute('data-flushed'); + let numbered = this.getAttribute('data-numbered'); + let horizontal = this.getAttribute('data-horizontal'); + let extraClasses = this.getAttribute('data-extra-classes'); + this.listGroup = document.createElement(tag); + flushed == 'true' ? (flushed = 'list-group-flush') : (flushed = null); + numbered == 'true' ? (numbered = 'list-group-numbered') : (numbered = null); + horizontal == 'true' + ? (horizontal = 'list-group-horizontal') + : (horizontal = null); + this.listGroup.className = [ + `list-group`, + `${flushed || ''}`, + `${numbered || ''}`, + `${horizontal || ''}`, + `${extraClasses || ''}`, + ].join(' '); + + if (!this.shadowRoot.querySelector(tag)) { + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + let tempLength = tempElements.length; + tempElements.forEach((node, index) => { + let pClasses = null; + switch (index) { + case 0: + node.setAttribute('data-order', 'first'); + break; + + case tempLength - 1: + node.setAttribute('data-order', 'last'); + break; + + default: + node.setAttribute('data-order', 'middle'); + break; + } + if (flushed) { + pClasses = `${flushed} `; + } + if (numbered) { + pClasses = `${numbered} `; + node.setAttribute('data-order-index', index + 1); + } + if (horizontal) { + pClasses = `${horizontal} `; + } + if (pClasses) { + node.setAttribute('data-parent-classes', pClasses); + } + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.listGroup.append(node); + }); + }); + this.shadowRoot.appendChild(this.listGroup); + } + } +} diff --git a/src/components/molecules/ListGroup/cod-listgroup.js b/src/components/molecules/ListGroup/cod-listgroup.js index 80a8d6ee..71408a9f 100644 --- a/src/components/molecules/ListGroup/cod-listgroup.js +++ b/src/components/molecules/ListGroup/cod-listgroup.js @@ -1,2 +1,2 @@ -import ListGroup from './ListGroup'; -customElements.define('cod-listgroup', ListGroup); \ No newline at end of file +import ListGroup from './ListGroup'; +customElements.define('cod-listgroup', ListGroup); diff --git a/src/components/molecules/Nav/Nav.css b/src/components/molecules/Nav/Nav.css index 01d94e1d..740932d3 100644 --- a/src/components/molecules/Nav/Nav.css +++ b/src/components/molecules/Nav/Nav.css @@ -1,3 +1,3 @@ -.nav-item{ - font-family: var(--font-family); -} \ No newline at end of file +.nav-item { + font-family: var(--font-family); +} diff --git a/src/components/molecules/Nav/Nav.js b/src/components/molecules/Nav/Nav.js index 07e7ccef..137abe83 100644 --- a/src/components/molecules/Nav/Nav.js +++ b/src/components/molecules/Nav/Nav.js @@ -1,69 +1,73 @@ -import styles from '!!raw-loader!./Nav.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Nav extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.nav = document.createElement('ul'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - let navItem = document.createElement('li'); - navItem.className = 'nav-item'; - navItem.appendChild(node); - this.nav.append(navItem); - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.nav.append(navItem); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let vertical = this.getAttribute('data-vertical'); - let hAlignment = this.getAttribute('data-horizontal-alignment'); - let tabs = this.getAttribute('data-tabs'); - let pills = this.getAttribute('data-pills'); - let underline = this.getAttribute('data-underline'); - let fill = this.getAttribute('data-fill'); - let justified = this.getAttribute('data-justified'); - let extraClasses = this.getAttribute('data-extra-classes'); - let navClasses = ['nav']; - (vertical == 'true') ? navClasses.push('flex-column'): 0; - (tabs == 'true') ? navClasses.push('nav-tabs'): 0; - (pills == 'true') ? navClasses.push('nav-pills'): 0; - (underline == 'true') ? navClasses.push('nav-underline'): 0; - (fill == 'true') ? navClasses.push('nav-fill'): 0; - (justified == 'true') ? navClasses.push('nav-justified'): 0; - (hAlignment != undefined && hAlignment != null) ? navClasses.push(`justify-content-${hAlignment}`): 0; - (extraClasses != undefined && extraClasses != null) ? navClasses.push(extraClasses): 0; - this.nav.className = navClasses.join(' '); - if(!this.shadowRoot.querySelector('ul')){ - this.shadowRoot.appendChild(this.nav); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Nav.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Nav extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.nav = document.createElement('ul'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + let navItem = document.createElement('li'); + navItem.className = 'nav-item'; + navItem.appendChild(node); + this.nav.append(navItem); + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.nav.append(navItem); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let vertical = this.getAttribute('data-vertical'); + let hAlignment = this.getAttribute('data-horizontal-alignment'); + let tabs = this.getAttribute('data-tabs'); + let pills = this.getAttribute('data-pills'); + let underline = this.getAttribute('data-underline'); + let fill = this.getAttribute('data-fill'); + let justified = this.getAttribute('data-justified'); + let extraClasses = this.getAttribute('data-extra-classes'); + let navClasses = ['nav']; + vertical == 'true' ? navClasses.push('flex-column') : 0; + tabs == 'true' ? navClasses.push('nav-tabs') : 0; + pills == 'true' ? navClasses.push('nav-pills') : 0; + underline == 'true' ? navClasses.push('nav-underline') : 0; + fill == 'true' ? navClasses.push('nav-fill') : 0; + justified == 'true' ? navClasses.push('nav-justified') : 0; + hAlignment != undefined && hAlignment != null + ? navClasses.push(`justify-content-${hAlignment}`) + : 0; + extraClasses != undefined && extraClasses != null + ? navClasses.push(extraClasses) + : 0; + this.nav.className = navClasses.join(' '); + if (!this.shadowRoot.querySelector('ul')) { + this.shadowRoot.appendChild(this.nav); + } + } +} diff --git a/src/components/molecules/Nav/cod-nav.js b/src/components/molecules/Nav/cod-nav.js index 1ad9ca46..714ec921 100644 --- a/src/components/molecules/Nav/cod-nav.js +++ b/src/components/molecules/Nav/cod-nav.js @@ -1,2 +1,2 @@ -import Nav from './Nav'; -customElements.define('cod-nav', Nav); \ No newline at end of file +import Nav from './Nav'; +customElements.define('cod-nav', Nav); diff --git a/src/components/molecules/Pagination/Pagination.js b/src/components/molecules/Pagination/Pagination.js index fe8f85da..12ae3fb1 100644 --- a/src/components/molecules/Pagination/Pagination.js +++ b/src/components/molecules/Pagination/Pagination.js @@ -1,72 +1,76 @@ -import styles from '!!raw-loader!./Pagination.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Pagination extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.paginationContainer = document.createElement('nav'); - this.pagination = document.createElement('ul'); - this.shadowRoot.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node, index)=>{ - let paginationItem = document.createElement('li'); - let paginationItemClasses = ['page-item']; - if(node.getAttribute('data-active') == 'true'){ - paginationItemClasses.push('active'); - paginationItem.setAttribute('aria-current', 'page'); - } - if(node.getAttribute('data-disabled') == 'true'){ - paginationItemClasses.push('disabled'); - paginationItem.setAttribute('tabindex', '-1'); - } - paginationItem.className = paginationItemClasses.join(' '); - node.setAttribute('data-index', index); - paginationItem.appendChild(node); - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.pagination.append(paginationItem); - }); - }); - this.paginationContainer.appendChild(this.pagination); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Nav attributes - let label = this.getAttribute('data-label'); - let id = this.getAttribute('data-id'); - let size = this.getAttribute('data-size'); - let extraClasses = this.getAttribute('data-extra-classes'); - let paginationClasses = ['pagination']; - (size != undefined && size != null) ? paginationClasses.push(`pagination-${size}`): 0; - (extraClasses != undefined && extraClasses != null) ? paginationClasses.push(extraClasses): 0; - (id != undefined && id != null) ? this.paginationContainer.id = id : 0; - this.paginationContainer.setAttribute('aria-label', label); - this.pagination.className = paginationClasses.join(' '); - if(!this.shadowRoot.querySelector('nav')){ - this.shadowRoot.appendChild(this.paginationContainer); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Pagination.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Pagination extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.paginationContainer = document.createElement('nav'); + this.pagination = document.createElement('ul'); + this.shadowRoot.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node, index) => { + let paginationItem = document.createElement('li'); + let paginationItemClasses = ['page-item']; + if (node.getAttribute('data-active') == 'true') { + paginationItemClasses.push('active'); + paginationItem.setAttribute('aria-current', 'page'); + } + if (node.getAttribute('data-disabled') == 'true') { + paginationItemClasses.push('disabled'); + paginationItem.setAttribute('tabindex', '-1'); + } + paginationItem.className = paginationItemClasses.join(' '); + node.setAttribute('data-index', index); + paginationItem.appendChild(node); + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.pagination.append(paginationItem); + }); + }); + this.paginationContainer.appendChild(this.pagination); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Nav attributes + let label = this.getAttribute('data-label'); + let id = this.getAttribute('data-id'); + let size = this.getAttribute('data-size'); + let extraClasses = this.getAttribute('data-extra-classes'); + let paginationClasses = ['pagination']; + size != undefined && size != null + ? paginationClasses.push(`pagination-${size}`) + : 0; + extraClasses != undefined && extraClasses != null + ? paginationClasses.push(extraClasses) + : 0; + id != undefined && id != null ? (this.paginationContainer.id = id) : 0; + this.paginationContainer.setAttribute('aria-label', label); + this.pagination.className = paginationClasses.join(' '); + if (!this.shadowRoot.querySelector('nav')) { + this.shadowRoot.appendChild(this.paginationContainer); + } + } +} diff --git a/src/components/molecules/Pagination/cod-pagination.js b/src/components/molecules/Pagination/cod-pagination.js index 782e6631..04a9c77d 100644 --- a/src/components/molecules/Pagination/cod-pagination.js +++ b/src/components/molecules/Pagination/cod-pagination.js @@ -1,2 +1,2 @@ -import Pagination from './Pagination'; -customElements.define('cod-pagination', Pagination); \ No newline at end of file +import Pagination from './Pagination'; +customElements.define('cod-pagination', Pagination); diff --git a/src/components/organisms/Card/Card.js b/src/components/organisms/Card/Card.js index 0ab44015..4de4a8c4 100644 --- a/src/components/organisms/Card/Card.js +++ b/src/components/organisms/Card/Card.js @@ -1,96 +1,110 @@ -import styles from '!!raw-loader!./Card.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Card extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.card = document.createElement('div'); - - shadow.addEventListener('slotchange', e => { - let tempElements = Array.from(this.children); - tempElements.forEach((node) => { - switch (node.tagName) { - case 'COD-CARD-HEADER': - let tempHeader = document.createElement('div'); - let tempHeaderClasses = ['card-header']; - (node.getAttribute('data-extra-classes') != undefined && node.getAttribute('data-extra-classes') != null) ? tempHeaderClasses.push(node.getAttribute('data-extra-classes')) : 0; - tempHeader.className = tempHeaderClasses.join(' '); - tempHeader.appendChild(node); - this.card.appendChild(tempHeader); - break; - - case 'COD-CARD-BODY': - let tempBody = document.createElement('div'); - let tempBodyClasses = ['card-body']; - (node.getAttribute('data-extra-classes') != undefined && node.getAttribute('data-extra-classes') != null) ? tempHeaderClasses.push(node.getAttribute('data-extra-classes')) : 0; - tempBody.className = tempBodyClasses.join(' '); - tempBody.appendChild(node); - this.card.appendChild(tempBody); - break; - - case 'COD-CARD-FOOTER': - let tempFooter = document.createElement('div'); - let tempFooterClasses = ['card-footer']; - (node.getAttribute('data-extra-classes') != undefined && node.getAttribute('data-extra-classes') != null) ? tempFooterClasses.push(node.getAttribute('data-extra-classes')) : 0; - tempFooter.className = tempFooterClasses.join(' '); - tempFooter.appendChild(node); - this.card.appendChild(tempFooter); - break; - - case 'COD-CARD-OVERLAY': - let tempOverlay = document.createElement('div'); - let tempOverlayClasses = ['card-img-overlay']; - (node.getAttribute('data-extra-classes') != undefined && node.getAttribute('data-extra-classes') != null) ? tempOverlayClasses.push(node.getAttribute('data-extra-classes')) : 0; - tempOverlay.className = tempOverlayClasses.join(' '); - tempOverlay.appendChild(node); - this.card.appendChild(tempOverlay); - break; - - default: - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.card.appendChild(node); - break; - } - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Card attributes - let width = this.getAttribute('data-width'); - let id = this.getAttribute('data-id'); - let extraClasses = this.getAttribute('data-extra-classes'); - let cardClasses = ['card']; - (extraClasses != undefined && extraClasses != null) ? cardClasses.push(extraClasses) : 0; - (width != undefined && width != null) ? this.card.style.width = width : 0; - (id != undefined && id != null) ? this.card.id = id : 0; - this.card.className = cardClasses.join(' '); - if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.card); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Card.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Card extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.card = document.createElement('div'); + + shadow.addEventListener('slotchange', (e) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + switch (node.tagName) { + case 'COD-CARD-HEADER': + let tempHeader = document.createElement('div'); + let tempHeaderClasses = ['card-header']; + node.getAttribute('data-extra-classes') != undefined && + node.getAttribute('data-extra-classes') != null + ? tempHeaderClasses.push(node.getAttribute('data-extra-classes')) + : 0; + tempHeader.className = tempHeaderClasses.join(' '); + tempHeader.appendChild(node); + this.card.appendChild(tempHeader); + break; + + case 'COD-CARD-BODY': + let tempBody = document.createElement('div'); + let tempBodyClasses = ['card-body']; + node.getAttribute('data-extra-classes') != undefined && + node.getAttribute('data-extra-classes') != null + ? tempHeaderClasses.push(node.getAttribute('data-extra-classes')) + : 0; + tempBody.className = tempBodyClasses.join(' '); + tempBody.appendChild(node); + this.card.appendChild(tempBody); + break; + + case 'COD-CARD-FOOTER': + let tempFooter = document.createElement('div'); + let tempFooterClasses = ['card-footer']; + node.getAttribute('data-extra-classes') != undefined && + node.getAttribute('data-extra-classes') != null + ? tempFooterClasses.push(node.getAttribute('data-extra-classes')) + : 0; + tempFooter.className = tempFooterClasses.join(' '); + tempFooter.appendChild(node); + this.card.appendChild(tempFooter); + break; + + case 'COD-CARD-OVERLAY': + let tempOverlay = document.createElement('div'); + let tempOverlayClasses = ['card-img-overlay']; + node.getAttribute('data-extra-classes') != undefined && + node.getAttribute('data-extra-classes') != null + ? tempOverlayClasses.push(node.getAttribute('data-extra-classes')) + : 0; + tempOverlay.className = tempOverlayClasses.join(' '); + tempOverlay.appendChild(node); + this.card.appendChild(tempOverlay); + break; + + default: + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.card.appendChild(node); + break; + } + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Card attributes + let width = this.getAttribute('data-width'); + let id = this.getAttribute('data-id'); + let extraClasses = this.getAttribute('data-extra-classes'); + let cardClasses = ['card']; + extraClasses != undefined && extraClasses != null + ? cardClasses.push(extraClasses) + : 0; + width != undefined && width != null ? (this.card.style.width = width) : 0; + id != undefined && id != null ? (this.card.id = id) : 0; + this.card.className = cardClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.card); + } + } +} diff --git a/src/components/organisms/Card/cod-card.js b/src/components/organisms/Card/cod-card.js index 2626f633..589ec5d6 100644 --- a/src/components/organisms/Card/cod-card.js +++ b/src/components/organisms/Card/cod-card.js @@ -1,2 +1,2 @@ -import Card from './Card'; -customElements.define('cod-card', Card); \ No newline at end of file +import Card from './Card'; +customElements.define('cod-card', Card); diff --git a/src/components/organisms/Carousel/Carousel.js b/src/components/organisms/Carousel/Carousel.js index d3b8abf8..749bd55a 100644 --- a/src/components/organisms/Carousel/Carousel.js +++ b/src/components/organisms/Carousel/Carousel.js @@ -1,193 +1,244 @@ -import styles from '!!raw-loader!./Carousel.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Carousel extends HTMLElement { - static get observedAttributes() { - return ['data-active-item']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.carousel = document.createElement('div'); - this.carouselIndicators = document.createElement('div'); - this.carouselIndicators.className = 'carousel-indicators'; - this.carouselInner = document.createElement('div'); - this.carouselInner.className = 'carousel-inner'; - this.carouselPrev = document.createElement('button'); - this.carouselNext = document.createElement('button'); - if (this.getAttribute('data-no-controls') != 'true') { - if (this.getAttribute('data-external-controls') == 'true'){ - this.carouselPrev.className = 'carousel-control-prev position-relative'; - this.carouselNext.className = 'carousel-control-next position-relative'; - }else{ - this.carouselPrev.className = 'carousel-control-prev'; - this.carouselNext.className = 'carousel-control-next'; - } - this.carouselPrev.type = 'button'; - this.carouselPrev.setAttribute('data-bs-target', `#${this.getAttribute('data-id')}`); - this.carouselPrev.setAttribute('data-bs-slide', 'prev'); - let prevIcon = document.createElement('span'); - prevIcon.className = 'carousel-control-prev-icon'; - prevIcon.setAttribute('aria-hidden', 'true'); - this.carouselPrev.appendChild(prevIcon); - let prevText = document.createElement('span'); - prevText.className = 'visually-hidden'; - prevText.innerText = 'Previous'; - this.carouselPrev.appendChild(prevText); - this.carouselNext.type = 'button'; - this.carouselNext.setAttribute('data-bs-target', `#${this.getAttribute('data-id')}`); - this.carouselNext.setAttribute('data-bs-slide', 'next'); - let nextIcon = document.createElement('span'); - nextIcon.className = 'carousel-control-next-icon'; - nextIcon.setAttribute('aria-hidden', 'true'); - this.carouselNext.appendChild(nextIcon); - let nextText = document.createElement('span'); - nextText.className = 'visually-hidden'; - nextText.innerText = 'Next'; - this.carouselNext.appendChild(nextText); - - // Adding event listener to controls - this.carouselPrev.addEventListener('click', this._onClick); - this.carouselNext.addEventListener('click', this._onClick); - this.carousel.appendChild(this.carouselPrev); - this.carousel.appendChild(this.carouselInner); - this.carousel.appendChild(this.carouselNext); - }else{ - this.carousel.appendChild(this.carouselInner); - } - - shadow.addEventListener('slotchange', e => { - let tempElements = Array.from(this.children); - let tempElementsCount = 0; - tempElements.forEach((node, index) => { - if (node.tagName == 'COD-CAROUSEL-ITEM') { - tempElementsCount += 1; - let tempItem = document.createElement('div'); - tempItem.setAttribute('data-index', index); - if (node.getAttribute('data-active') == 'true') { - tempItem.className = 'carousel-item active'; - this.setAttribute('data-active-item', index); - } else { - tempItem.className = 'carousel-item'; - } - (node.getAttribute('data-interval') != undefined && node.getAttribute('data-interval') != null) ? tempItem.setAttribute('data-bs-interval', node.getAttribute('data-interval')) : 0; - tempItem.appendChild(node); - this.carouselInner.appendChild(tempItem); - if (this.getAttribute('data-indicator') == 'true') { - let tempIndicator = document.createElement('button'); - tempIndicator.type = 'button'; - tempIndicator.setAttribute('data-bs-target', `#${this.getAttribute('data-id')}`); - tempIndicator.setAttribute('data-bs-slide-to', index); - tempIndicator.setAttribute('aria-label', `Slide ${index}`); - if (node.getAttribute('data-active') == 'true') { - tempIndicator.className = 'active'; - tempIndicator.setAttribute('aria-current', 'true'); - } - tempIndicator.addEventListener('click', this._onClick); - this.carouselIndicators.appendChild(tempIndicator); - this.carousel.appendChild(this.carouselIndicators); - } - } - (tempElementsCount) ? this.setAttribute('data-total-items', tempElementsCount) : 0; - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : 0; - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue != null) { - let oldItem = this.carouselInner.querySelector(`[data-index="${oldValue}"`); - let newItem = this.carouselInner.querySelector(`[data-index="${newValue}"`); - if (this.getAttribute('data-indicator') == 'true') { - this.carouselIndicators.querySelector(`[data-bs-slide-to="${oldValue}"`).className = ''; - this.carouselIndicators.querySelector(`[data-bs-slide-to="${newValue}"`).className = 'active'; - } - if (this.getAttribute('data-direction') == 'next') { - oldItem.className = 'carousel-item active carousel-item-start'; - newItem.className = 'carousel-item carousel-item-next carousel-item-start'; - } else { - oldItem.className = 'carousel-item active carousel-item-end'; - newItem.className = 'carousel-item carousel-item-prev carousel-item-end'; - } - setTimeout(() => { - oldItem.className = 'carousel-item'; - newItem.className = 'carousel-item active'; - }, 500); - } - } - - connectedCallback() { - // Modal attributes - let id = this.getAttribute('data-id'); - let crossfade = this.getAttribute('data-crossfade'); - let autoplay = this.getAttribute('data-autoplay'); - let noTouch = this.getAttribute('data-no-touch'); - let extraClasses = this.getAttribute('data-extra-classes'); - let externalControls = this.getAttribute('data-external-controls'); - let carouselClasses = ['carousel slide']; - (extraClasses != undefined && extraClasses != null) ? carouselClasses.push(extraClasses) : 0; - (crossfade == 'true') ? carouselClasses.push('carousel-fade') : 0; - (externalControls == 'true') ? carouselClasses.push('d-flex') : 0; - (noTouch == 'false') ? this.carousel.setAttribute('data-bs-touch', 'false') : 0; - if (autoplay != undefined && autoplay != null) { - (autoplay == 'true') ? this.carousel.setAttribute('data-bs-ride', autoplay) : this.carousel.setAttribute('data-bs-ride', 'carousel'); - } - (id != undefined && id != null) ? this.carousel.id = id : 0; - this.carousel.className = carouselClasses.join(' '); - if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.carousel); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - let activeItem = this.getRootNode().host.getAttribute('data-active-item'); - let totalItems = this.getRootNode().host.getAttribute('data-total-items'); - if (this.getAttribute('data-bs-slide') == undefined) { - if (this.getAttribute('data-bs-slide-to') > activeItem) { - this.getRootNode().host.setAttribute('data-direction', 'prev'); - this.getRootNode().host.setAttribute('data-active-item', this.getAttribute('data-bs-slide-to')); - } else { - this.getRootNode().host.setAttribute('data-direction', 'next'); - this.getRootNode().host.setAttribute('data-active-item', this.getAttribute('data-bs-slide-to')); - } - } else { - let activeItem = this.getRootNode().host.getAttribute('data-active-item'); - let totalItems = this.getRootNode().host.getAttribute('data-total-items'); - if (this.getAttribute('data-bs-slide') == 'prev') { - this.getRootNode().host.setAttribute('data-direction', 'prev'); - ((parseInt(activeItem) - 1) >= 0) ? this.getRootNode().host.setAttribute('data-active-item', (parseInt(activeItem) - 1)) : this.getRootNode().host.setAttribute('data-active-item', (parseInt(totalItems) - 1)); - } else { - this.getRootNode().host.setAttribute('data-direction', 'next'); - ((parseInt(activeItem) + 1) < parseInt(totalItems)) ? this.getRootNode().host.setAttribute('data-active-item', (parseInt(activeItem) + 1)) : this.getRootNode().host.setAttribute('data-active-item', 0); - } - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Carousel.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Carousel extends HTMLElement { + static get observedAttributes() { + return ['data-active-item']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.carousel = document.createElement('div'); + this.carouselIndicators = document.createElement('div'); + this.carouselIndicators.className = 'carousel-indicators'; + this.carouselInner = document.createElement('div'); + this.carouselInner.className = 'carousel-inner'; + this.carouselPrev = document.createElement('button'); + this.carouselNext = document.createElement('button'); + if (this.getAttribute('data-no-controls') != 'true') { + if (this.getAttribute('data-external-controls') == 'true') { + this.carouselPrev.className = 'carousel-control-prev position-relative'; + this.carouselNext.className = 'carousel-control-next position-relative'; + } else { + this.carouselPrev.className = 'carousel-control-prev'; + this.carouselNext.className = 'carousel-control-next'; + } + this.carouselPrev.type = 'button'; + this.carouselPrev.setAttribute( + 'data-bs-target', + `#${this.getAttribute('data-id')}`, + ); + this.carouselPrev.setAttribute('data-bs-slide', 'prev'); + let prevIcon = document.createElement('span'); + prevIcon.className = 'carousel-control-prev-icon'; + prevIcon.setAttribute('aria-hidden', 'true'); + this.carouselPrev.appendChild(prevIcon); + let prevText = document.createElement('span'); + prevText.className = 'visually-hidden'; + prevText.innerText = 'Previous'; + this.carouselPrev.appendChild(prevText); + this.carouselNext.type = 'button'; + this.carouselNext.setAttribute( + 'data-bs-target', + `#${this.getAttribute('data-id')}`, + ); + this.carouselNext.setAttribute('data-bs-slide', 'next'); + let nextIcon = document.createElement('span'); + nextIcon.className = 'carousel-control-next-icon'; + nextIcon.setAttribute('aria-hidden', 'true'); + this.carouselNext.appendChild(nextIcon); + let nextText = document.createElement('span'); + nextText.className = 'visually-hidden'; + nextText.innerText = 'Next'; + this.carouselNext.appendChild(nextText); + + // Adding event listener to controls + this.carouselPrev.addEventListener('click', this._onClick); + this.carouselNext.addEventListener('click', this._onClick); + this.carousel.appendChild(this.carouselPrev); + this.carousel.appendChild(this.carouselInner); + this.carousel.appendChild(this.carouselNext); + } else { + this.carousel.appendChild(this.carouselInner); + } + + shadow.addEventListener('slotchange', (e) => { + let tempElements = Array.from(this.children); + let tempElementsCount = 0; + tempElements.forEach((node, index) => { + if (node.tagName == 'COD-CAROUSEL-ITEM') { + tempElementsCount += 1; + let tempItem = document.createElement('div'); + tempItem.setAttribute('data-index', index); + if (node.getAttribute('data-active') == 'true') { + tempItem.className = 'carousel-item active'; + this.setAttribute('data-active-item', index); + } else { + tempItem.className = 'carousel-item'; + } + node.getAttribute('data-interval') != undefined && + node.getAttribute('data-interval') != null + ? tempItem.setAttribute( + 'data-bs-interval', + node.getAttribute('data-interval'), + ) + : 0; + tempItem.appendChild(node); + this.carouselInner.appendChild(tempItem); + if (this.getAttribute('data-indicator') == 'true') { + let tempIndicator = document.createElement('button'); + tempIndicator.type = 'button'; + tempIndicator.setAttribute( + 'data-bs-target', + `#${this.getAttribute('data-id')}`, + ); + tempIndicator.setAttribute('data-bs-slide-to', index); + tempIndicator.setAttribute('aria-label', `Slide ${index}`); + if (node.getAttribute('data-active') == 'true') { + tempIndicator.className = 'active'; + tempIndicator.setAttribute('aria-current', 'true'); + } + tempIndicator.addEventListener('click', this._onClick); + this.carouselIndicators.appendChild(tempIndicator); + this.carousel.appendChild(this.carouselIndicators); + } + } + tempElementsCount + ? this.setAttribute('data-total-items', tempElementsCount) + : 0; + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') ? node.remove() : 0; + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue != null) { + let oldItem = this.carouselInner.querySelector( + `[data-index="${oldValue}"`, + ); + let newItem = this.carouselInner.querySelector( + `[data-index="${newValue}"`, + ); + if (this.getAttribute('data-indicator') == 'true') { + this.carouselIndicators.querySelector( + `[data-bs-slide-to="${oldValue}"`, + ).className = ''; + this.carouselIndicators.querySelector( + `[data-bs-slide-to="${newValue}"`, + ).className = 'active'; + } + if (this.getAttribute('data-direction') == 'next') { + oldItem.className = 'carousel-item active carousel-item-start'; + newItem.className = + 'carousel-item carousel-item-next carousel-item-start'; + } else { + oldItem.className = 'carousel-item active carousel-item-end'; + newItem.className = + 'carousel-item carousel-item-prev carousel-item-end'; + } + setTimeout(() => { + oldItem.className = 'carousel-item'; + newItem.className = 'carousel-item active'; + }, 500); + } + } + + connectedCallback() { + // Modal attributes + let id = this.getAttribute('data-id'); + let crossfade = this.getAttribute('data-crossfade'); + let autoplay = this.getAttribute('data-autoplay'); + let noTouch = this.getAttribute('data-no-touch'); + let extraClasses = this.getAttribute('data-extra-classes'); + let externalControls = this.getAttribute('data-external-controls'); + let carouselClasses = ['carousel slide']; + extraClasses != undefined && extraClasses != null + ? carouselClasses.push(extraClasses) + : 0; + crossfade == 'true' ? carouselClasses.push('carousel-fade') : 0; + externalControls == 'true' ? carouselClasses.push('d-flex') : 0; + noTouch == 'false' + ? this.carousel.setAttribute('data-bs-touch', 'false') + : 0; + if (autoplay != undefined && autoplay != null) { + autoplay == 'true' + ? this.carousel.setAttribute('data-bs-ride', autoplay) + : this.carousel.setAttribute('data-bs-ride', 'carousel'); + } + id != undefined && id != null ? (this.carousel.id = id) : 0; + this.carousel.className = carouselClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.carousel); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + let activeItem = this.getRootNode().host.getAttribute('data-active-item'); + let totalItems = this.getRootNode().host.getAttribute('data-total-items'); + if (this.getAttribute('data-bs-slide') == undefined) { + if (this.getAttribute('data-bs-slide-to') > activeItem) { + this.getRootNode().host.setAttribute('data-direction', 'prev'); + this.getRootNode().host.setAttribute( + 'data-active-item', + this.getAttribute('data-bs-slide-to'), + ); + } else { + this.getRootNode().host.setAttribute('data-direction', 'next'); + this.getRootNode().host.setAttribute( + 'data-active-item', + this.getAttribute('data-bs-slide-to'), + ); + } + } else { + let activeItem = this.getRootNode().host.getAttribute('data-active-item'); + let totalItems = this.getRootNode().host.getAttribute('data-total-items'); + if (this.getAttribute('data-bs-slide') == 'prev') { + this.getRootNode().host.setAttribute('data-direction', 'prev'); + parseInt(activeItem) - 1 >= 0 + ? this.getRootNode().host.setAttribute( + 'data-active-item', + parseInt(activeItem) - 1, + ) + : this.getRootNode().host.setAttribute( + 'data-active-item', + parseInt(totalItems) - 1, + ); + } else { + this.getRootNode().host.setAttribute('data-direction', 'next'); + parseInt(activeItem) + 1 < parseInt(totalItems) + ? this.getRootNode().host.setAttribute( + 'data-active-item', + parseInt(activeItem) + 1, + ) + : this.getRootNode().host.setAttribute('data-active-item', 0); + } + } + } +} diff --git a/src/components/organisms/Carousel/cod-carousel.js b/src/components/organisms/Carousel/cod-carousel.js index 5a41aec7..0c073a4e 100644 --- a/src/components/organisms/Carousel/cod-carousel.js +++ b/src/components/organisms/Carousel/cod-carousel.js @@ -1,2 +1,2 @@ -import Carousel from './Carousel'; -customElements.define('cod-carousel', Carousel); \ No newline at end of file +import Carousel from './Carousel'; +customElements.define('cod-carousel', Carousel); diff --git a/src/components/organisms/Form/Form.js b/src/components/organisms/Form/Form.js index e0e212f6..a9e4b8d7 100644 --- a/src/components/organisms/Form/Form.js +++ b/src/components/organisms/Form/Form.js @@ -1,58 +1,60 @@ -import styles from '!!raw-loader!./Form.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - - -`; - - -export default class Form extends HTMLElement { - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.form = document.createElement('form'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - if(tempElements.length){ - tempElements.forEach((node)=>{ - this.form.append(node); - }) - } - - }); - } - - connectedCallback() { - // setting up styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const formStyles = document.createElement('style'); - formStyles.textContent = styles; - this.shadowRoot.appendChild(bootStyles); - this.shadowRoot.appendChild(variableStyles); - this.shadowRoot.appendChild(formStyles); - // form attributes - let id = this.getAttribute('data-id'); - let customValidation = this.getAttribute('data-custom-validate'); - let backgroundColor = this.getAttribute('data-background-color'); - let extraClasses = this.getAttribute('data-extra-classes'); - this.form.id = id; - if(customValidation == 'true'){ - this.form.novalidate = true; - customValidation = 'needs-validation'; - }else{ - customValidation = ''; - } - this.form.className = [customValidation, `bg-${backgroundColor || ''}`, `${extraClasses || ''}`].join(' '); - this.shadowRoot.appendChild(this.form); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Form.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + + +`; + +export default class Form extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.form = document.createElement('form'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + if (tempElements.length) { + tempElements.forEach((node) => { + this.form.append(node); + }); + } + }); + } + + connectedCallback() { + // setting up styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const formStyles = document.createElement('style'); + formStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(formStyles); + // form attributes + let id = this.getAttribute('data-id'); + let customValidation = this.getAttribute('data-custom-validate'); + let backgroundColor = this.getAttribute('data-background-color'); + let extraClasses = this.getAttribute('data-extra-classes'); + this.form.id = id; + if (customValidation == 'true') { + this.form.novalidate = true; + customValidation = 'needs-validation'; + } else { + customValidation = ''; + } + this.form.className = [ + customValidation, + `bg-${backgroundColor || ''}`, + `${extraClasses || ''}`, + ].join(' '); + this.shadowRoot.appendChild(this.form); + } +} diff --git a/src/components/organisms/Form/cod-form.js b/src/components/organisms/Form/cod-form.js index 4242a1e4..905e7ec9 100644 --- a/src/components/organisms/Form/cod-form.js +++ b/src/components/organisms/Form/cod-form.js @@ -1,2 +1,2 @@ -import Form from './Form'; -customElements.define('cod-form', Form); \ No newline at end of file +import Form from './Form'; +customElements.define('cod-form', Form); diff --git a/src/components/organisms/Geocoder/Geocoder.css b/src/components/organisms/Geocoder/Geocoder.css index 9df5123f..82028092 100644 --- a/src/components/organisms/Geocoder/Geocoder.css +++ b/src/components/organisms/Geocoder/Geocoder.css @@ -1,3 +1,9 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); -#geocoder {width: 100%} -input {width: calc(100% - 2em); padding: 1em; border:.1em solid #e6e6e6;} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); +#geocoder { + width: 100%; +} +input { + width: calc(100% - 2em); + padding: 1em; + border: 0.1em solid #e6e6e6; +} diff --git a/src/components/organisms/Geocoder/Geocoder.js b/src/components/organisms/Geocoder/Geocoder.js index 662f341b..5bc99832 100644 --- a/src/components/organisms/Geocoder/Geocoder.js +++ b/src/components/organisms/Geocoder/Geocoder.js @@ -1,268 +1,282 @@ 'use strict'; import styles from '!!raw-loader!./Geocoder.css'; export default class Geocoder extends HTMLElement { + static get observedAttributes() { + return ['form', 'parcelStatus', 'user']; + } - static get observedAttributes() { - return ['form', 'parcelStatus', 'user']; - } - - constructor() { - // Always call super first in constructor - super(); + constructor() { + // Always call super first in constructor + super(); - // Set Attributes - this.form = null; - this.parcelStatus = 'Invalid'; - this.user = null; - this.styles = document.createElement('style'); - this.styles.textContent = styles; + // Set Attributes + this.form = null; + this.parcelStatus = 'Invalid'; + this.user = null; + this.styles = document.createElement('style'); + this.styles.textContent = styles; - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); - // Create geocoder section - shadow.appendChild(this.styles); - const geocoderWraper = document.createElement('article'); - geocoderWraper.id = 'geocoder'; - let form = document.createElement('form'); - let label = document.createElement('label'); - label.style.fontFamily = 'Montserrat, sans-serif'; - label.style.fontWeight = 'bold'; - let input = document.createElement('input'); - let suggestions = document.createElement('ul'); - let list = document.createElement('datalist'); - let icon = document.createElement('i'); - form.addEventListener('submit', (ev) => { - this.submit(ev, this); - }); - icon.className = 'fas fa-map-marker-alt'; - // Get label text - const app = document.getElementsByTagName('my-home-info'); - label.innerText = "Property Address:"; - try { - if (app[0].getAttribute('data-geocoder-label')){ - if(app[0].getAttribute('data-geocoder-label') != ''){ - label.innerText = app[0].getAttribute('data-geocoder-label'); - } - } - } catch (error) { - + // Create geocoder section + shadow.appendChild(this.styles); + const geocoderWraper = document.createElement('article'); + geocoderWraper.id = 'geocoder'; + let form = document.createElement('form'); + let label = document.createElement('label'); + label.style.fontFamily = 'Montserrat, sans-serif'; + label.style.fontWeight = 'bold'; + let input = document.createElement('input'); + let suggestions = document.createElement('ul'); + let list = document.createElement('datalist'); + let icon = document.createElement('i'); + form.addEventListener('submit', (ev) => { + this.submit(ev, this); + }); + icon.className = 'fas fa-map-marker-alt'; + // Get label text + const app = document.getElementsByTagName('my-home-info'); + label.innerText = 'Property Address:'; + try { + if (app[0].getAttribute('data-geocoder-label')) { + if (app[0].getAttribute('data-geocoder-label') != '') { + label.innerText = app[0].getAttribute('data-geocoder-label'); } - label.setAttribute("for", "geocoder-input"); - input.type = 'text'; - input.setAttribute('list', 'addresses-list'); - input.placeholder = 'Enter address'; - input.setAttribute('id', 'geocoder-input'); - input.setAttribute('autocomplete', 'off'); - input.addEventListener('keyup', (ev) => { - this.inputChange(ev, this); - }); - list.setAttribute('id', 'addresses-list'); + } + } catch (error) {} + label.setAttribute('for', 'geocoder-input'); + input.type = 'text'; + input.setAttribute('list', 'addresses-list'); + input.placeholder = 'Enter address'; + input.setAttribute('id', 'geocoder-input'); + input.setAttribute('autocomplete', 'off'); + input.addEventListener('keyup', (ev) => { + this.inputChange(ev, this); + }); + list.setAttribute('id', 'addresses-list'); + form.appendChild(label); + form.appendChild(input); + form.appendChild(icon); + // form.appendChild(suggestions); + form.appendChild(list); + this.form = form; + geocoderWraper.appendChild(form); + shadow.appendChild(geocoderWraper); + } - form.appendChild(label); - form.appendChild(input); - form.appendChild(icon); - // form.appendChild(suggestions); - form.appendChild(list); - this.form = form; - geocoderWraper.appendChild(form); - shadow.appendChild(geocoderWraper); - } - - supplementGeocoder(address, geocoder, type) { - const app = document.getElementsByTagName('my-home-info'); - let tempAddr = address.split(","); - tempAddr = tempAddr[0]; - tempAddr = tempAddr.split(" "); - let newTempAddr = ''; - let size = tempAddr.length; - tempAddr.forEach(function (item, index) { - newTempAddr += item; - ((index < size) && (index + 1) !== size) ? newTempAddr += '+' : 0; - }); - let url = `https://opengis.detroitmi.gov/opengis/rest/services/BaseUnits/BaseUnitGeocoder/GeocodeServer/findAddressCandidates?Address=&Address2=&Address3=&Neighborhood=&City=&Subregion=&Region=&Postal=&PostalExt=&CountryCode=&SingleLine=${newTempAddr}&outFields=*&maxLocations=&matchOutOfRange=true&langCode=&locationType=&sourceCountry=&category=&location=&distance=&searchExtent=&outSR=&magicKey=&f=json`; + supplementGeocoder(address, geocoder, type) { + const app = document.getElementsByTagName('my-home-info'); + let tempAddr = address.split(','); + tempAddr = tempAddr[0]; + tempAddr = tempAddr.split(' '); + let newTempAddr = ''; + let size = tempAddr.length; + tempAddr.forEach(function (item, index) { + newTempAddr += item; + index < size && index + 1 !== size ? (newTempAddr += '+') : 0; + }); + let url = `https://opengis.detroitmi.gov/opengis/rest/services/BaseUnits/BaseUnitGeocoder/GeocodeServer/findAddressCandidates?Address=&Address2=&Address3=&Neighborhood=&City=&Subregion=&Region=&Postal=&PostalExt=&CountryCode=&SingleLine=${newTempAddr}&outFields=*&maxLocations=&matchOutOfRange=true&langCode=&locationType=&sourceCountry=&category=&location=&distance=&searchExtent=&outSR=&magicKey=&f=json`; - try { - fetch(url) - .then((resp) => resp.json()) // Transform the data into json - .then(function (data) { - // console.log(data); - if (type === 'suggestions') { - data.candidates.forEach((item) => { - let sugg = document.createElement('option'); - if (item.attributes.parcel_id === '') { - sugg.value = item.address; - sugg.setAttribute('data-parsel', 'no-parcel'); - } else { - sugg.value = `${item.address} RECOMMENDED`; - sugg.setAttribute('data-parsel', item.attributes.parcel_id); - } + try { + fetch(url) + .then((resp) => resp.json()) // Transform the data into json + .then(function (data) { + // console.log(data); + if (type === 'suggestions') { + data.candidates.forEach((item) => { + let sugg = document.createElement('option'); + if (item.attributes.parcel_id === '') { + sugg.value = item.address; + sugg.setAttribute('data-parsel', 'no-parcel'); + } else { + sugg.value = `${item.address} RECOMMENDED`; + sugg.setAttribute('data-parsel', item.attributes.parcel_id); + } - sugg.onclick = (ev) => { - geocoder.selectSuggestion(ev, geocoder); - } - geocoder.form.childNodes[3].appendChild(sugg); - }); - } else { - if (data.candidates.length) { - let url = `https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/City_of_Detroit_Boundary/FeatureServer/0/query?where=&objectIds=&time=&geometry=${data.candidates[0].location.x}%2C+${data.candidates[0].location.y}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=4326&returnGeometry=true&returnCentroid=false&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=geojson&token=`; - try { - fetch(url) - .then((resp) => resp.json()) // Transform the data into json - .then(function (city) { - if (city.features.length) { - let parcel = null; - let location; - data.candidates.forEach((item) => { - if (item.attributes.parcel_id !== '') { - if (geocoder.checkParcelValid(item.attributes.parcel_id)) { - parcel = item; - } - } - }); - (parcel == null) ? location = data.candidates[0].location : location = null; - if (parcel === null) { - geocoder.parcelStatus = 'Invalid'; - geocoder.needGeocode(address, geocoder, location); - geocoder.clearSuggestions(geocoder); - app[0].setAttribute('data-parcel-id', JSON.stringify(data.candidates[0])); - // geocoder.controller.panel.loaderToggle(true); - // geocoder.controller.panel.clearPanel(); - // geocoder.controller.dataManager.buildData(data.candidates[0], geocoder.controller); - } else { - geocoder.parcelStatus = 'Valid'; - geocoder.needGeocode(address, geocoder, location); - geocoder.clearSuggestions(geocoder); - app[0].setAttribute('data-parcel-id', JSON.stringify(parcel)); - // geocoder.controller.panel.loaderToggle(true); - // geocoder.controller.panel.clearPanel(); - // geocoder.controller.dataManager.buildData(parcel, geocoder.controller); - } - } else { - geocoder.parcelStatus = 'Invalid'; - geocoder.needGeocode(address, geocoder, location); - geocoder.clearSuggestions(geocoder); - app[0].setAttribute('data-app-state', 'error'); - } - }); - } catch (error) { - geocoder.parcelStatus = 'Invalid'; - geocoder.needGeocode(address, geocoder, location); - geocoder.clearSuggestions(geocoder); - app[0].setAttribute('data-app-state', 'error'); - } - } else { - geocoder.parcelStatus = 'Invalid'; - geocoder.needGeocode(address, geocoder, location); - geocoder.clearSuggestions(geocoder); - app[0].setAttribute('data-app-state', 'error'); + sugg.onclick = (ev) => { + geocoder.selectSuggestion(ev, geocoder); + }; + geocoder.form.childNodes[3].appendChild(sugg); + }); + } else { + if (data.candidates.length) { + let url = `https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/City_of_Detroit_Boundary/FeatureServer/0/query?where=&objectIds=&time=&geometry=${data.candidates[0].location.x}%2C+${data.candidates[0].location.y}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=4326&returnGeometry=true&returnCentroid=false&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=geojson&token=`; + try { + fetch(url) + .then((resp) => resp.json()) // Transform the data into json + .then(function (city) { + if (city.features.length) { + let parcel = null; + let location; + data.candidates.forEach((item) => { + if (item.attributes.parcel_id !== '') { + if ( + geocoder.checkParcelValid(item.attributes.parcel_id) + ) { + parcel = item; + } } + }); + parcel == null + ? (location = data.candidates[0].location) + : (location = null); + if (parcel === null) { + geocoder.parcelStatus = 'Invalid'; + geocoder.needGeocode(address, geocoder, location); + geocoder.clearSuggestions(geocoder); + app[0].setAttribute( + 'data-parcel-id', + JSON.stringify(data.candidates[0]), + ); + // geocoder.controller.panel.loaderToggle(true); + // geocoder.controller.panel.clearPanel(); + // geocoder.controller.dataManager.buildData(data.candidates[0], geocoder.controller); + } else { + geocoder.parcelStatus = 'Valid'; + geocoder.needGeocode(address, geocoder, location); + geocoder.clearSuggestions(geocoder); + app[0].setAttribute( + 'data-parcel-id', + JSON.stringify(parcel), + ); + // geocoder.controller.panel.loaderToggle(true); + // geocoder.controller.panel.clearPanel(); + // geocoder.controller.dataManager.buildData(parcel, geocoder.controller); + } + } else { + geocoder.parcelStatus = 'Invalid'; + geocoder.needGeocode(address, geocoder, location); + geocoder.clearSuggestions(geocoder); + app[0].setAttribute('data-app-state', 'error'); } - }); - } catch (error) { - geocoder.parcelStatus = 'Invalid'; - geocoder.needGeocode(address, geocoder, location); - geocoder.clearSuggestions(geocoder); - app[0].setAttribute('data-app-state', 'error'); - } + }); + } catch (error) { + geocoder.parcelStatus = 'Invalid'; + geocoder.needGeocode(address, geocoder, location); + geocoder.clearSuggestions(geocoder); + app[0].setAttribute('data-app-state', 'error'); + } + } else { + geocoder.parcelStatus = 'Invalid'; + geocoder.needGeocode(address, geocoder, location); + geocoder.clearSuggestions(geocoder); + app[0].setAttribute('data-app-state', 'error'); + } + } + }); + } catch (error) { + geocoder.parcelStatus = 'Invalid'; + geocoder.needGeocode(address, geocoder, location); + geocoder.clearSuggestions(geocoder); + app[0].setAttribute('data-app-state', 'error'); } + } - selectSuggestion(ev, geocoder) { - let selection = null; - if (ev.target.tagName === 'SPAN') { - selection = ev.target.parentNode; - } else { - selection = ev.target; - } - if (selection.attributes[0].value === 'no-parcel') { - geocoder.clearSuggestions(geocoder); - geocoder.supplementGeocoder(selection.innerText, geocoder, 'submit'); - } else { - geocoder.supplementGeocoder(selection.innerText, geocoder, 'submit'); - } + selectSuggestion(ev, geocoder) { + let selection = null; + if (ev.target.tagName === 'SPAN') { + selection = ev.target.parentNode; + } else { + selection = ev.target; } + if (selection.attributes[0].value === 'no-parcel') { + geocoder.clearSuggestions(geocoder); + geocoder.supplementGeocoder(selection.innerText, geocoder, 'submit'); + } else { + geocoder.supplementGeocoder(selection.innerText, geocoder, 'submit'); + } + } - inputChange(ev, geocoder) { - switch (ev.key) { - case 'Enter': - (ev.target.value != '' && ev.target.value != undefined) ? geocoder.supplementGeocoder(ev.target.value, geocoder, 'submit') : 0; - break; - - case 'ArrowDown': - - break; - - case 'ArrowUp': - - break; + inputChange(ev, geocoder) { + switch (ev.key) { + case 'Enter': + ev.target.value != '' && ev.target.value != undefined + ? geocoder.supplementGeocoder(ev.target.value, geocoder, 'submit') + : 0; + break; - case 'ArrowRight': + case 'ArrowDown': + break; - break; + case 'ArrowUp': + break; - case 'ArrowLeft': + case 'ArrowRight': + break; - break; + case 'ArrowLeft': + break; - case undefined: - (ev.target.value != '' && ev.target.value != undefined) ? geocoder.supplementGeocoder(ev.target.value, geocoder, 'submit') : 0; - break; + case undefined: + ev.target.value != '' && ev.target.value != undefined + ? geocoder.supplementGeocoder(ev.target.value, geocoder, 'submit') + : 0; + break; - default: - geocoder.clearSuggestions(geocoder); - geocoder.supplementGeocoder(ev.target.value, geocoder, 'suggestions'); - break; - } + default: + geocoder.clearSuggestions(geocoder); + geocoder.supplementGeocoder(ev.target.value, geocoder, 'suggestions'); + break; } + } - clearSuggestions(geocoder) { - while (geocoder.form.childNodes[3].firstChild) { - geocoder.form.childNodes[3].removeChild(geocoder.form.childNodes[3].firstChild); - } + clearSuggestions(geocoder) { + while (geocoder.form.childNodes[3].firstChild) { + geocoder.form.childNodes[3].removeChild( + geocoder.form.childNodes[3].firstChild, + ); } + } - needGeocode(address, geocoder, location) { - fetch('https://us-central1-local-services-loopkup.cloudfunctions.net/getToken') - .then((resp) => resp.json()) // Transform the data into json - .then(function (data) { - let cleanAddress = address.split(' RECOMMENDED')[0]; - let params = [ - { - "attributes": { - "valid_parcel_status": geocoder.parcelStatus, - "user_input": cleanAddress - }, - "geometry": { - "x": 0, - "y": 0 - } - } - ]; - if (location != null) { - params[0].geometry.x = location.x; - params[0].geometry.y = location.y; - } - let request = new Request(`https://services2.arcgis.com/qvkbeam7Wirps6zC/ArcGIS/rest/services/addressvalidator/FeatureServer/0/addFeatures?token=${data.access_token}&features=${encodeURIComponent(JSON.stringify(params))}&f=json`, { - method: 'POST', - body: '', - headers: new Headers(), - mode: 'cors', - cache: 'default' - }); - fetch(request) - .then((res) => { - // console.log(res); - }); - }); - } + needGeocode(address, geocoder, location) { + fetch( + 'https://us-central1-local-services-loopkup.cloudfunctions.net/getToken', + ) + .then((resp) => resp.json()) // Transform the data into json + .then(function (data) { + let cleanAddress = address.split(' RECOMMENDED')[0]; + let params = [ + { + attributes: { + valid_parcel_status: geocoder.parcelStatus, + user_input: cleanAddress, + }, + geometry: { + x: 0, + y: 0, + }, + }, + ]; + if (location != null) { + params[0].geometry.x = location.x; + params[0].geometry.y = location.y; + } + let request = new Request( + `https://services2.arcgis.com/qvkbeam7Wirps6zC/ArcGIS/rest/services/addressvalidator/FeatureServer/0/addFeatures?token=${ + data.access_token + }&features=${encodeURIComponent(JSON.stringify(params))}&f=json`, + { + method: 'POST', + body: '', + headers: new Headers(), + mode: 'cors', + cache: 'default', + }, + ); + fetch(request).then((res) => { + // console.log(res); + }); + }); + } - checkParcelValid(parcel){ - return /\d/.test(parcel); - } + checkParcelValid(parcel) { + return /\d/.test(parcel); + } - submit(ev, geocoder) { - ev.preventDefault(); - geocoder.supplementGeocoder(ev.target['0'].value, geocoder, 'submit'); - } -} \ No newline at end of file + submit(ev, geocoder) { + ev.preventDefault(); + geocoder.supplementGeocoder(ev.target['0'].value, geocoder, 'submit'); + } +} diff --git a/src/components/organisms/Geocoder/cod-geocoder.js b/src/components/organisms/Geocoder/cod-geocoder.js index 1ac824c7..6b60cfc2 100644 --- a/src/components/organisms/Geocoder/cod-geocoder.js +++ b/src/components/organisms/Geocoder/cod-geocoder.js @@ -1,2 +1,2 @@ -import Geocoder from './Geocoder'; -customElements.define('cod-geocoder', Geocoder); \ No newline at end of file +import Geocoder from './Geocoder'; +customElements.define('cod-geocoder', Geocoder); diff --git a/src/components/organisms/Map/Map.css b/src/components/organisms/Map/Map.css index 78cc781a..a0f322b6 100644 --- a/src/components/organisms/Map/Map.css +++ b/src/components/organisms/Map/Map.css @@ -1,23 +1,23 @@ -#map-wrapper { - position: relative; -} - -#map { - width: 100%; - min-height: 50em; -} - -cod-button { - position: absolute; - bottom: 0; - right: 0; -} - -@media all and (min-width: 1024px) { - cod-button { - top: 0; - left: 0; - bottom: auto; - right: auto; - } -} \ No newline at end of file +#map-wrapper { + position: relative; +} + +#map { + width: 100%; + min-height: 50em; +} + +cod-button { + position: absolute; + bottom: 0; + right: 0; +} + +@media all and (min-width: 1024px) { + cod-button { + top: 0; + left: 0; + bottom: auto; + right: auto; + } +} diff --git a/src/components/organisms/Map/Map.js b/src/components/organisms/Map/Map.js index 6831dadf..bc1468a2 100644 --- a/src/components/organisms/Map/Map.js +++ b/src/components/organisms/Map/Map.js @@ -1,172 +1,181 @@ -'use strict'; -import maplibregl from 'maplibre-gl'; -import mapStyle from './style.json'; -import styles from '!!raw-loader!./Map.css'; -import maplibreStyles from '!!raw-loader!../../../../node_modules/maplibre-gl/dist/maplibre-gl.css'; -export default class Map extends HTMLElement { - static get observedAttributes() { - return ['data-map-state']; - } - - constructor() { - // Always call super first in constructor - super(); - - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - - // Creating styles - this.styles = document.createElement('style'); - this.styles.textContent = styles; - // Adding maplibre styles - this.maplibreStyles = document.createElement("style"); - this.maplibreStyles.textContent = maplibreStyles; - shadow.appendChild(this.maplibreStyles); - shadow.appendChild(this.styles); - - // Attach the created element to the shadow DOM - const app = document.getElementsByTagName('my-home-info'); - const mapWrapper = document.createElement('section'); - mapWrapper.id = 'map-wrapper'; - const mapContainer = document.createElement('article'); - mapContainer.id = 'map'; - mapWrapper.appendChild(mapContainer); - const closeMapBtn = document.createElement('cod-button'); - closeMapBtn.addEventListener('click', (ev)=>{ - app[0].setAttribute('data-app-state', 'results'); - }); - closeMapBtn.setAttribute('data-primary', true); - closeMapBtn.setAttribute('data-label', 'x'); - closeMapBtn.setAttribute('data-size', 'large'); - closeMapBtn.setAttribute('data-hover', false); - closeMapBtn.setAttribute('data-background-color', 'color-3'); - closeMapBtn.setAttribute('data-img', ''); - closeMapBtn.setAttribute('data-img-alt', ''); - closeMapBtn.setAttribute('data-icon', ''); - closeMapBtn.setAttribute('data-shape', 'square'); - shadow.appendChild(mapWrapper); - mapWrapper.appendChild(closeMapBtn); - this.map = new maplibregl.Map({ - container: mapContainer, - style: mapStyle, - center: [-83.1, 42.36], - zoom: 9 - }); - app[0].setAttribute('data-map-state', 'init'); - } - - attributeChangedCallback(name, oldValue, newValue) { - const app = document.getElementsByTagName('my-home-info'); - const parcel = JSON.parse(app[0].getAttribute('data-parcel-id')); - const coord = [parcel.location.x, parcel.location.y]; - switch (name) { - case 'data-map-state': - this.map.addControl(new maplibregl.NavigationControl()); - this.map.on('style.load', () => { - this.map.resize(); - const marker = new maplibregl.Marker() - .setLngLat(coord) - .addTo(this.map); - this.map.flyTo({ - // These options control the ending camera position: centered at - // the target, at zoom level 9, and north up. - center: coord, - zoom: 12, - bearing: 0, - - // These options control the flight curve, making it move - // slowly and zoom out almost completely before starting - // to pan. - speed: 1.5, // make the flying slow - curve: 1, // change the speed at which it zooms out - - // This can be any easing function: it takes a number between - // 0 and 1 and returns another number between 0 and 1. - easing: function (t) { - return t; - }, - - // this animation is considered essential with respect to prefers-reduced-motion - essential: true - }); - const app = document.getElementsByTagName('my-home-info'); - const apiData = JSON.parse(app[0].getAttribute('data-api-active-datasets')); - const mapData = app[0].getAttribute('data-map-active-data'); - this.map.addSource("data-points", { - type: "geojson", - data: apiData[mapData].data - }); - this.map.addLayer({ - id: "data-points", - type: "circle", - source: "data-points", - paint: { - "circle-radius": { - base: 5, - stops: [ - [12, 5], - [22, 120], - ], - }, - "circle-color": "#004544", - }, - }); - }); - // Creating this temp variable for workaround with dealing with "this" encapsulation - const tempMap = this; - this.map.on('click', 'data-points', function (e) { - const app = document.getElementsByTagName('my-home-info'); - const mapData = app[0].getAttribute('data-map-active-data'); - tempMap.buildPointData(mapData, e.features[0], tempMap, e); - - }); - this.map.on('mouseenter', 'data-points', function () { - tempMap.map.getCanvas().style.cursor = 'pointer'; - }); - - // Change it back to a pointer when it leaves. - this.map.on('mouseleave', 'data-points', function () { - tempMap.map.getCanvas().style.cursor = ''; - }); - break; - - default: - break; - } - } - - buildPointData(dataType, data, map, e) { - switch (dataType) { - case 'schools': - new maplibregl.Popup() - .setLngLat(e.lngLat) - .setHTML(`School Name: ${e.features[0].properties.EntityOfficialName}`) - .addTo(map.map); - break; - - case 'demos-data': - new maplibregl.Popup() - .setLngLat(e.lngLat) - .setHTML(`Demo Address: ${e.features[0].properties.address}`) - .addTo(map.map); - break; - - case 'stabilization-data': - new maplibregl.Popup() - .setLngLat(e.lngLat) - .setHTML(`Stabilization Address: ${e.features[0].properties.address}`) - .addTo(map.map); - break; - - case 'improve-det': - new maplibregl.Popup() - .setLngLat(e.lngLat) - .setHTML(`Issue type: ${e.features[0].properties.request_type_title}`) - .addTo(map.map); - break; - - default: - break; - } - } -} +'use strict'; +import maplibregl from 'maplibre-gl'; +import mapStyle from './style.json'; +import styles from '!!raw-loader!./Map.css'; +import maplibreStyles from '!!raw-loader!../../../../node_modules/maplibre-gl/dist/maplibre-gl.css'; +export default class Map extends HTMLElement { + static get observedAttributes() { + return ['data-map-state']; + } + + constructor() { + // Always call super first in constructor + super(); + + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + + // Creating styles + this.styles = document.createElement('style'); + this.styles.textContent = styles; + // Adding maplibre styles + this.maplibreStyles = document.createElement('style'); + this.maplibreStyles.textContent = maplibreStyles; + shadow.appendChild(this.maplibreStyles); + shadow.appendChild(this.styles); + + // Attach the created element to the shadow DOM + const app = document.getElementsByTagName('my-home-info'); + const mapWrapper = document.createElement('section'); + mapWrapper.id = 'map-wrapper'; + const mapContainer = document.createElement('article'); + mapContainer.id = 'map'; + mapWrapper.appendChild(mapContainer); + const closeMapBtn = document.createElement('cod-button'); + closeMapBtn.addEventListener('click', (ev) => { + app[0].setAttribute('data-app-state', 'results'); + }); + closeMapBtn.setAttribute('data-primary', true); + closeMapBtn.setAttribute('data-label', 'x'); + closeMapBtn.setAttribute('data-size', 'large'); + closeMapBtn.setAttribute('data-hover', false); + closeMapBtn.setAttribute('data-background-color', 'color-3'); + closeMapBtn.setAttribute('data-img', ''); + closeMapBtn.setAttribute('data-img-alt', ''); + closeMapBtn.setAttribute('data-icon', ''); + closeMapBtn.setAttribute('data-shape', 'square'); + shadow.appendChild(mapWrapper); + mapWrapper.appendChild(closeMapBtn); + this.map = new maplibregl.Map({ + container: mapContainer, + style: mapStyle, + center: [-83.1, 42.36], + zoom: 9, + }); + app[0].setAttribute('data-map-state', 'init'); + } + + attributeChangedCallback(name, oldValue, newValue) { + const app = document.getElementsByTagName('my-home-info'); + const parcel = JSON.parse(app[0].getAttribute('data-parcel-id')); + const coord = [parcel.location.x, parcel.location.y]; + switch (name) { + case 'data-map-state': + this.map.addControl(new maplibregl.NavigationControl()); + this.map.on('style.load', () => { + this.map.resize(); + const marker = new maplibregl.Marker() + .setLngLat(coord) + .addTo(this.map); + this.map.flyTo({ + // These options control the ending camera position: centered at + // the target, at zoom level 9, and north up. + center: coord, + zoom: 12, + bearing: 0, + + // These options control the flight curve, making it move + // slowly and zoom out almost completely before starting + // to pan. + speed: 1.5, // make the flying slow + curve: 1, // change the speed at which it zooms out + + // This can be any easing function: it takes a number between + // 0 and 1 and returns another number between 0 and 1. + easing: function (t) { + return t; + }, + + // this animation is considered essential with respect to prefers-reduced-motion + essential: true, + }); + const app = document.getElementsByTagName('my-home-info'); + const apiData = JSON.parse( + app[0].getAttribute('data-api-active-datasets'), + ); + const mapData = app[0].getAttribute('data-map-active-data'); + this.map.addSource('data-points', { + type: 'geojson', + data: apiData[mapData].data, + }); + this.map.addLayer({ + id: 'data-points', + type: 'circle', + source: 'data-points', + paint: { + 'circle-radius': { + base: 5, + stops: [ + [12, 5], + [22, 120], + ], + }, + 'circle-color': '#004544', + }, + }); + }); + // Creating this temp variable for workaround with dealing with "this" encapsulation + const tempMap = this; + this.map.on('click', 'data-points', function (e) { + const app = document.getElementsByTagName('my-home-info'); + const mapData = app[0].getAttribute('data-map-active-data'); + tempMap.buildPointData(mapData, e.features[0], tempMap, e); + }); + this.map.on('mouseenter', 'data-points', function () { + tempMap.map.getCanvas().style.cursor = 'pointer'; + }); + + // Change it back to a pointer when it leaves. + this.map.on('mouseleave', 'data-points', function () { + tempMap.map.getCanvas().style.cursor = ''; + }); + break; + + default: + break; + } + } + + buildPointData(dataType, data, map, e) { + switch (dataType) { + case 'schools': + new maplibregl.Popup() + .setLngLat(e.lngLat) + .setHTML( + `School Name: ${e.features[0].properties.EntityOfficialName}`, + ) + .addTo(map.map); + break; + + case 'demos-data': + new maplibregl.Popup() + .setLngLat(e.lngLat) + .setHTML( + `Demo Address: ${e.features[0].properties.address}`, + ) + .addTo(map.map); + break; + + case 'stabilization-data': + new maplibregl.Popup() + .setLngLat(e.lngLat) + .setHTML( + `Stabilization Address: ${e.features[0].properties.address}`, + ) + .addTo(map.map); + break; + + case 'improve-det': + new maplibregl.Popup() + .setLngLat(e.lngLat) + .setHTML( + `Issue type: ${e.features[0].properties.request_type_title}`, + ) + .addTo(map.map); + break; + + default: + break; + } + } +} diff --git a/src/components/organisms/Map/cod-map.js b/src/components/organisms/Map/cod-map.js index cfe300a4..89b47018 100644 --- a/src/components/organisms/Map/cod-map.js +++ b/src/components/organisms/Map/cod-map.js @@ -1,2 +1,2 @@ -import Map from './Map'; -customElements.define('app-map', Map); \ No newline at end of file +import Map from './Map'; +customElements.define('app-map', Map); diff --git a/src/components/organisms/Map/style.json b/src/components/organisms/Map/style.json index e0b7ec4b..b6b3a932 100644 --- a/src/components/organisms/Map/style.json +++ b/src/components/organisms/Map/style.json @@ -1,17110 +1,10365 @@ { - "version": 8, - "sprite": "https://cdn.arcgis.com/sharing/rest/content/items/273bf8d5c8ac400183fc24e109d20bcf/resources/styles/../sprites/sprite", - "glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf", - "sources": { - "esri": { - "type": "vector", - "tiles": ["https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"] - }, - "parcels": { - "type": "vector", - "tiles": ["https://tiles.arcgis.com/tiles/qvkbeam7Wirps6zC/arcgis/rest/services/parcels/VectorTileServer/tile/{z}/{y}/{x}.pbf"] - }, - "mapillary": { - "type": "geojson", - "data": { - "type": "FeatureCollection", - "features": [] - } - }, - "mly": { - "type": "vector", - "tiles": ["https://tiles.mapillary.com/maps/vtp/mly1_computed_public/2/{z}/{x}/{y}?access_token=MLY|4690399437648324|de87555bb6015affa20c3df794ebab15"], - "maxzoom": 14, - "minzoom": 14 - } - }, - "layers": [ - { - "id": "Land/Not ice", - "type": "fill", - "source": "esri", - "source-layer": "Land", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 0, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 0, - "#dce0ca" - ], - [ - 10, - "#E6E5D6" - ], - [ - 15, - "#f2eee9" - ] - ] - } - } - }, - { - "id": "Land/Ice", - "type": "fill", - "source": "esri", - "source-layer": "Land", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 0, - "layout": {}, - "paint": { - "fill-color": "#E6E5D6" - } - }, - { - "id": "Urban area", - "type": "fill", - "source": "esri", - "source-layer": "Urban area", - "minzoom": 5, - "maxzoom": 15, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#e3dfdc" - ], - [ - 10, - "#ECE8E3" - ], - [ - 15, - "#f2eee9" - ] - ] - }, - "fill-antialias": false - } - }, - { - "id": "Parcel/fill", - "type": "fill", - "source": "esri", - "source-layer": "Parcel", - "minzoom": 18, - "layout": {}, - "paint": { - "fill-color": "#f0ebe5" - } - }, - { - "id": "Parcel/line", - "type": "line", - "source": "esri", - "source-layer": "Parcel", - "minzoom": 17, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#dddbd8", - "line-width": { - "base": 1.2, - "stops": [ - [ - 17, - 0.6 - ], - [ - 22, - 5 - ] - ] - } - } - }, - { - "id": "Vegetation small scale/High density", - "type": "fill", - "source": "esri", - "source-layer": "Vegetation small scale", - "filter": [ - "==", - "_symbol", - 0 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": "#c2e699", - "fill-opacity": { - "stops": [ - [ - 0, - 0.3 - ], - [ - 5, - 0.28 - ], - [ - 7, - 0.18 - ], - [ - 10, - 0.08 - ] - ] - }, - "fill-antialias": false - } - }, - { - "id": "Vegetation small scale/Low density", - "type": "fill", - "source": "esri", - "source-layer": "Vegetation small scale", - "filter": [ - "==", - "_symbol", - 1 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": "#9ad666", - "fill-opacity": { - "stops": [ - [ - 0, - 0.3 - ], - [ - 5, - 0.28 - ], - [ - 7, - 0.18 - ], - [ - 10, - 0.08 - ] - ] - }, - "fill-antialias": false - } - }, - { - "id": "Indigenous", - "type": "fill", - "source": "esri", - "source-layer": "Indigenous", - "minzoom": 6, - "layout": {}, - "paint": { - "fill-color": "#dbd5bd", - "fill-outline-color": "#d6d4c8", - "fill-opacity": 0.35 - } - }, - { - "id": "Openspace or forest", - "type": "fill", - "source": "esri", - "source-layer": "Openspace or forest", - "minzoom": 9, - "layout": {}, - "paint": { - "fill-color": "#CDDFB3", - "fill-antialias": false - } - }, - { - "id": "Admin0 forest or park", - "type": "fill", - "source": "esri", - "source-layer": "Admin0 forest or park", - "minzoom": 6, - "layout": {}, - "paint": { - "fill-color": "#CDDFB3", - "fill-opacity": { - "stops": [ - [ - 6, - 0.4 - ], - [ - 8, - 1 - ] - ] - }, - "fill-antialias": false - } - }, - { - "id": "Admin0 forest or park/line2", - "type": "line", - "source": "esri", - "source-layer": "Admin0 forest or park", - "minzoom": 6, - "layout": {}, - "paint": { - "line-color": "#c0d3a5", - "line-opacity": 0.3, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.6 - ], - [ - 15, - 15 - ] - ] - } - } - }, - { - "id": "Admin0 forest or park/line", - "type": "line", - "source": "esri", - "source-layer": "Admin0 forest or park", - "minzoom": 6, - "layout": {}, - "paint": { - "line-color": "#c0d3a5", - "line-opacity": { - "stops": [ - [ - 6, - 0.4 - ], - [ - 8, - 1 - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.6 - ], - [ - 9, - 1.1 - ] - ] - } - } - }, - { - "id": "Admin1 forest or park", - "type": "fill", - "source": "esri", - "source-layer": "Admin1 forest or park", - "minzoom": 7, - "layout": {}, - "paint": { - "fill-color": "#CDDFB3", - "fill-opacity": { - "stops": [ - [ - 6, - 0.4 - ], - [ - 8, - 1 - ] - ] - }, - "fill-antialias": false - } - }, - { - "id": "Admin1 forest or park/line2", - "type": "line", - "source": "esri", - "source-layer": "Admin1 forest or park", - "minzoom": 7, - "layout": {}, - "paint": { - "line-color": "#c0d3a5", - "line-opacity": 0.3, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.6 - ], - [ - 15, - 15 - ] - ] - } - } - }, - { - "id": "Admin1 forest or park/line", - "type": "line", - "source": "esri", - "source-layer": "Admin1 forest or park", - "minzoom": 7, - "layout": {}, - "paint": { - "line-color": "#c0d3a5", - "line-opacity": { - "stops": [ - [ - 6, - 0.4 - ], - [ - 8, - 1 - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.6 - ], - [ - 9, - 1.1 - ] - ] - } + "version": 8, + "sprite": "https://cdn.arcgis.com/sharing/rest/content/items/273bf8d5c8ac400183fc24e109d20bcf/resources/styles/../sprites/sprite", + "glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf", + "sources": { + "esri": { + "type": "vector", + "tiles": [ + "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf" + ] + }, + "parcels": { + "type": "vector", + "tiles": [ + "https://tiles.arcgis.com/tiles/qvkbeam7Wirps6zC/arcgis/rest/services/parcels/VectorTileServer/tile/{z}/{y}/{x}.pbf" + ] + }, + "mapillary": { + "type": "geojson", + "data": { + "type": "FeatureCollection", + "features": [] + } + }, + "mly": { + "type": "vector", + "tiles": [ + "https://tiles.mapillary.com/maps/vtp/mly1_computed_public/2/{z}/{x}/{y}?access_token=MLY|4690399437648324|de87555bb6015affa20c3df794ebab15" + ], + "maxzoom": 14, + "minzoom": 14 + } + }, + "layers": [ + { + "id": "Land/Not ice", + "type": "fill", + "source": "esri", + "source-layer": "Land", + "filter": ["==", "_symbol", 0], + "minzoom": 0, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [0, "#dce0ca"], + [10, "#E6E5D6"], + [15, "#f2eee9"] + ] } - }, - { - "id": "Zoo", - "type": "fill", - "source": "esri", - "source-layer": "Zoo", - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#CDDFB3" - ], - [ - 17, - "#A5C187" - ] - ] - } + } + }, + { + "id": "Land/Ice", + "type": "fill", + "source": "esri", + "source-layer": "Land", + "filter": ["==", "_symbol", 1], + "minzoom": 0, + "layout": {}, + "paint": { + "fill-color": "#E6E5D6" + } + }, + { + "id": "Urban area", + "type": "fill", + "source": "esri", + "source-layer": "Urban area", + "minzoom": 5, + "maxzoom": 15, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#e3dfdc"], + [10, "#ECE8E3"], + [15, "#f2eee9"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Parcel/fill", + "type": "fill", + "source": "esri", + "source-layer": "Parcel", + "minzoom": 18, + "layout": {}, + "paint": { + "fill-color": "#f0ebe5" + } + }, + { + "id": "Parcel/line", + "type": "line", + "source": "esri", + "source-layer": "Parcel", + "minzoom": 17, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#dddbd8", + "line-width": { + "base": 1.2, + "stops": [ + [17, 0.6], + [22, 5] + ] } - }, - { - "id": "Military", - "type": "fill", - "source": "esri", - "source-layer": "Military", - "minzoom": 6, - "layout": {}, - "paint": { - "fill-color": "#d9d9d9", - "fill-opacity": 0.5, - "fill-antialias": false + } + }, + { + "id": "Vegetation small scale/High density", + "type": "fill", + "source": "esri", + "source-layer": "Vegetation small scale", + "filter": ["==", "_symbol", 0], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": "#c2e699", + "fill-opacity": { + "stops": [ + [0, 0.3], + [5, 0.28], + [7, 0.18], + [10, 0.08] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Vegetation small scale/Low density", + "type": "fill", + "source": "esri", + "source-layer": "Vegetation small scale", + "filter": ["==", "_symbol", 1], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": "#9ad666", + "fill-opacity": { + "stops": [ + [0, 0.3], + [5, 0.28], + [7, 0.18], + [10, 0.08] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Indigenous", + "type": "fill", + "source": "esri", + "source-layer": "Indigenous", + "minzoom": 6, + "layout": {}, + "paint": { + "fill-color": "#dbd5bd", + "fill-outline-color": "#d6d4c8", + "fill-opacity": 0.35 + } + }, + { + "id": "Openspace or forest", + "type": "fill", + "source": "esri", + "source-layer": "Openspace or forest", + "minzoom": 9, + "layout": {}, + "paint": { + "fill-color": "#CDDFB3", + "fill-antialias": false + } + }, + { + "id": "Admin0 forest or park", + "type": "fill", + "source": "esri", + "source-layer": "Admin0 forest or park", + "minzoom": 6, + "layout": {}, + "paint": { + "fill-color": "#CDDFB3", + "fill-opacity": { + "stops": [ + [6, 0.4], + [8, 1] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Admin0 forest or park/line2", + "type": "line", + "source": "esri", + "source-layer": "Admin0 forest or park", + "minzoom": 6, + "layout": {}, + "paint": { + "line-color": "#c0d3a5", + "line-opacity": 0.3, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.6], + [15, 15] + ] } - }, - { - "id": "Port", - "type": "fill", - "source": "esri", - "source-layer": "Port", - "minzoom": 12, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 13, - "#d9d2c8" - ], - [ - 15, - "#E6E0D9" - ], - [ - 19, - "#ECE7E1" - ] - ] - } + } + }, + { + "id": "Admin0 forest or park/line", + "type": "line", + "source": "esri", + "source-layer": "Admin0 forest or park", + "minzoom": 6, + "layout": {}, + "paint": { + "line-color": "#c0d3a5", + "line-opacity": { + "stops": [ + [6, 0.4], + [8, 1] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.6], + [9, 1.1] + ] } - }, - { - "id": "Transportation", - "type": "fill", - "source": "esri", - "source-layer": "Transportation", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 13, - "#ddd3c5" - ], - [ - 15, - "#E8E1D7" - ], - [ - 19, - "#EDE7E0" - ] - ] - } + } + }, + { + "id": "Admin1 forest or park", + "type": "fill", + "source": "esri", + "source-layer": "Admin1 forest or park", + "minzoom": 7, + "layout": {}, + "paint": { + "fill-color": "#CDDFB3", + "fill-opacity": { + "stops": [ + [6, 0.4], + [8, 1] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Admin1 forest or park/line2", + "type": "line", + "source": "esri", + "source-layer": "Admin1 forest or park", + "minzoom": 7, + "layout": {}, + "paint": { + "line-color": "#c0d3a5", + "line-opacity": 0.3, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.6], + [15, 15] + ] } - }, - { - "id": "Industry", - "type": "fill", - "source": "esri", - "source-layer": "Industry", - "minzoom": 12, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 13, - "#d9d2c8" - ], - [ - 15, - "#E2DCD4" - ], - [ - 19, - "#ECE7E1" - ] - ] - } + } + }, + { + "id": "Admin1 forest or park/line", + "type": "line", + "source": "esri", + "source-layer": "Admin1 forest or park", + "minzoom": 7, + "layout": {}, + "paint": { + "line-color": "#c0d3a5", + "line-opacity": { + "stops": [ + [6, 0.4], + [8, 1] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.6], + [9, 1.1] + ] } - }, - { - "id": "Golf course", - "type": "fill", - "source": "esri", - "source-layer": "Golf course", - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": "#D6E6C3" + } + }, + { + "id": "Zoo", + "type": "fill", + "source": "esri", + "source-layer": "Zoo", + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#CDDFB3"], + [17, "#A5C187"] + ] } - }, - { - "id": "Airport/Airport property", - "type": "fill", - "source": "esri", - "source-layer": "Airport", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 9, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 9, - "#d9d6d2" - ], - [ - 11, - "#e3e1df" - ], - [ - 15, - "#EAE7E4" - ] - ] - }, - "fill-outline-color": "#DDDBD9" + } + }, + { + "id": "Military", + "type": "fill", + "source": "esri", + "source-layer": "Military", + "minzoom": 6, + "layout": {}, + "paint": { + "fill-color": "#d9d9d9", + "fill-opacity": 0.5, + "fill-antialias": false + } + }, + { + "id": "Port", + "type": "fill", + "source": "esri", + "source-layer": "Port", + "minzoom": 12, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [13, "#d9d2c8"], + [15, "#E6E0D9"], + [19, "#ECE7E1"] + ] } - }, - { - "id": "Airport/Airport runway", - "type": "fill", - "source": "esri", - "source-layer": "Airport", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#dddbd9" - ], - [ - 22, - "#8D8C8A" - ] - ] - } + } + }, + { + "id": "Transportation", + "type": "fill", + "source": "esri", + "source-layer": "Transportation", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [13, "#ddd3c5"], + [15, "#E8E1D7"], + [19, "#EDE7E0"] + ] } - }, - { - "id": "Retail", - "type": "fill", - "source": "esri", - "source-layer": "Retail", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#f7c2b5" - ], - [ - 15, - "#F5D8CF" - ], - [ - 19, - "#F3E8E2" - ] - ] - } + } + }, + { + "id": "Industry", + "type": "fill", + "source": "esri", + "source-layer": "Industry", + "minzoom": 12, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [13, "#d9d2c8"], + [15, "#E2DCD4"], + [19, "#ECE7E1"] + ] } - }, - { - "id": "Water and wastewater", - "type": "fill", - "source": "esri", - "source-layer": "Water and wastewater", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 13, - "#ddd3c5" - ], - [ - 15, - "#E8E1D7" - ], - [ - 19, - "#EDE7E0" - ] - ] - } + } + }, + { + "id": "Golf course", + "type": "fill", + "source": "esri", + "source-layer": "Golf course", + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": "#D6E6C3" + } + }, + { + "id": "Airport/Airport property", + "type": "fill", + "source": "esri", + "source-layer": "Airport", + "filter": ["==", "_symbol", 1], + "minzoom": 9, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [9, "#d9d6d2"], + [11, "#e3e1df"], + [15, "#EAE7E4"] + ] + }, + "fill-outline-color": "#DDDBD9" + } + }, + { + "id": "Airport/Airport runway", + "type": "fill", + "source": "esri", + "source-layer": "Airport", + "filter": ["==", "_symbol", 0], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#dddbd9"], + [22, "#8D8C8A"] + ] } - }, - { - "id": "Freight", - "type": "fill", - "source": "esri", - "source-layer": "Freight", - "minzoom": 12, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 13, - "#d9d2c8" - ], - [ - 15, - "#E2DCD4" - ], - [ - 19, - "#EDE7E0" - ] - ] - } + } + }, + { + "id": "Retail", + "type": "fill", + "source": "esri", + "source-layer": "Retail", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#f7c2b5"], + [15, "#F5D8CF"], + [19, "#F3E8E2"] + ] } - }, - { - "id": "Cemetery", - "type": "fill", - "source": "esri", - "source-layer": "Cemetery", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": "#d3e6b9" + } + }, + { + "id": "Water and wastewater", + "type": "fill", + "source": "esri", + "source-layer": "Water and wastewater", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [13, "#ddd3c5"], + [15, "#E8E1D7"], + [19, "#EDE7E0"] + ] } - }, - { - "id": "Finance", - "type": "fill", - "source": "esri", - "source-layer": "Finance", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#f7c2b5" - ], - [ - 15, - "#F5D8CF" - ], - [ - 19, - "#F3E8E2" - ] - ] - } + } + }, + { + "id": "Freight", + "type": "fill", + "source": "esri", + "source-layer": "Freight", + "minzoom": 12, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [13, "#d9d2c8"], + [15, "#E2DCD4"], + [19, "#EDE7E0"] + ] } - }, - { - "id": "Government", - "type": "fill", - "source": "esri", - "source-layer": "Government", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 13, - "#ddd3c5" - ], - [ - 15, - "#E8E1D7" - ], - [ - 19, - "#EDE7E0" - ] - ] - } + } + }, + { + "id": "Cemetery", + "type": "fill", + "source": "esri", + "source-layer": "Cemetery", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": "#d3e6b9" + } + }, + { + "id": "Finance", + "type": "fill", + "source": "esri", + "source-layer": "Finance", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#f7c2b5"], + [15, "#F5D8CF"], + [19, "#F3E8E2"] + ] } - }, - { - "id": "Emergency", - "type": "fill", - "source": "esri", - "source-layer": "Emergency", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": "#E8E7E5" + } + }, + { + "id": "Government", + "type": "fill", + "source": "esri", + "source-layer": "Government", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [13, "#ddd3c5"], + [15, "#E8E1D7"], + [19, "#EDE7E0"] + ] } - }, - { - "id": "Landmark", - "type": "fill", - "source": "esri", - "source-layer": "Landmark", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 10, - "#d7ede6" - ], - [ - 15, - "#E5EEE8" - ], - [ - 19, - "#EBEEE8" - ] - ] - } + } + }, + { + "id": "Emergency", + "type": "fill", + "source": "esri", + "source-layer": "Emergency", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": "#E8E7E5" + } + }, + { + "id": "Landmark", + "type": "fill", + "source": "esri", + "source-layer": "Landmark", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [10, "#d7ede6"], + [15, "#E5EEE8"], + [19, "#EBEEE8"] + ] } - }, - { - "id": "Pedestrian", - "type": "fill", - "source": "esri", - "source-layer": "Pedestrian", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-color": "#E8E7E5", - "fill-outline-color": "#bcb7ae" + } + }, + { + "id": "Pedestrian", + "type": "fill", + "source": "esri", + "source-layer": "Pedestrian", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-color": "#E8E7E5", + "fill-outline-color": "#bcb7ae" + } + }, + { + "id": "Education", + "type": "fill", + "source": "esri", + "source-layer": "Education", + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#dde2a9"], + [15, "#E8E8C9"], + [19, "#EEEBDB"] + ] } - }, - { - "id": "Education", - "type": "fill", - "source": "esri", - "source-layer": "Education", - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#dde2a9" - ], - [ - 15, - "#E8E8C9" - ], - [ - 19, - "#EEEBDB" - ] - ] - } + } + }, + { + "id": "Medical", + "type": "fill", + "source": "esri", + "source-layer": "Medical", + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#c7dff4"], + [15, "#DDE7EF"], + [19, "#E7EAEC"] + ] } - }, - { - "id": "Medical", - "type": "fill", - "source": "esri", - "source-layer": "Medical", - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#c7dff4" - ], - [ - 15, - "#DDE7EF" - ], - [ - 19, - "#E7EAEC" - ] - ] - } + } + }, + { + "id": "Park or farming", + "type": "fill", + "source": "esri", + "source-layer": "Park or farming", + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [11, "#CDDFB3"], + [17, "#A5C187"] + ] } - }, - { - "id": "Park or farming", - "type": "fill", - "source": "esri", - "source-layer": "Park or farming", - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 11, - "#CDDFB3" - ], - [ - 17, - "#A5C187" - ] - ] - } + } + }, + { + "id": "Beach", + "type": "fill", + "source": "esri", + "source-layer": "Beach", + "minzoom": 13, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Sand" + } + }, + { + "id": "Special area of interest/Garden path", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 12], + "minzoom": 14, + "layout": { + "visibility": "none" + }, + "paint": { + "fill-color": "#f5f5f1", + "fill-outline-color": "#EBE8E8" + } + }, + { + "id": "Special area of interest/Green openspace", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 11], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [14, "#c5e0a9"], + [17, "#A5C187"] + ] } - }, - { - "id": "Beach", - "type": "fill", - "source": "esri", - "source-layer": "Beach", - "minzoom": 13, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Sand" + } + }, + { + "id": "Special area of interest/Grass", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 8], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [14, "#b4d197"], + [17, "#84A661"] + ] } - }, - { - "id": "Special area of interest/Garden path", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 12 - ], - "minzoom": 14, - "layout": { - "visibility": "none" + } + }, + { + "id": "Special area of interest/Grass/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 8], + "minzoom": 14, + "layout": {}, + "paint": { + "line-color": { + "stops": [ + [14, "#a4c683"], + [17, "#739551"] + ] }, - "paint": { - "fill-color": "#f5f5f1", - "fill-outline-color": "#EBE8E8" - } - }, - { - "id": "Special area of interest/Green openspace", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 11 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 14, - "#c5e0a9" - ], - [ - 17, - "#A5C187" - ] - ] - } + "line-width": { + "stops": [ + [15, 1.1], + [22, 10] + ] + }, + "line-blur": { + "stops": [ + [15, 1], + [22, 5] + ] } - }, - { - "id": "Special area of interest/Grass", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 8 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 14, - "#b4d197" - ], - [ - 17, - "#84A661" - ] - ] - } + } + }, + { + "id": "Special area of interest/Grass/pattern", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 8], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Grass", + "fill-opacity": 0.5 + } + }, + { + "id": "Special area of interest/Grass/pattern/1", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 8], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Small stipple" + } + }, + { + "id": "Special area of interest/Baseball field or other grounds", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 1], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": "#91a761" + } + }, + { + "id": "Special area of interest/Baseball field or other grounds/pattern", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 1], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Baseball field or other grounds" + } + }, + { + "id": "Special area of interest/Groundcover", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 13], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": "#97be82" + } + }, + { + "id": "Special area of interest/Groundcover/pattern", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 13], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Groundcover", + "fill-opacity": 0.5 + } + }, + { + "id": "Special area of interest/Field or court exterior", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 5], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": "#6E866E" + } + }, + { + "id": "Special area of interest/Football field or court", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 4], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": "#7fa57a" + } + }, + { + "id": "Special area of interest/Football field or court/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 4], + "minzoom": 14, + "layout": {}, + "paint": { + "line-color": "#e3e0da", + "line-opacity": 0.8, + "line-width": { + "base": 1.2, + "stops": [ + [15, 0.5], + [20, 4] + ] } - }, - { - "id": "Special area of interest/Grass/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 8 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "line-color": { - "stops": [ - [ - 14, - "#a4c683" - ], - [ - 17, - "#739551" - ] - ] - }, - "line-width": { - "stops": [ - [ - 15, - 1.1 - ], - [ - 22, - 10 - ] - ] - }, - "line-blur": { - "stops": [ - [ - 15, - 1 - ], - [ - 22, - 5 - ] - ] - } + } + }, + { + "id": "Special area of interest/Hardcourt", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 10], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [15, "#dddbd9"], + [22, "#8D8C8A"] + ] } - }, - { - "id": "Special area of interest/Grass/pattern", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 8 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Grass", - "fill-opacity": 0.5 + } + }, + { + "id": "Special area of interest/Hardcourt/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 10], + "minzoom": 14, + "layout": {}, + "paint": { + "line-color": "#e3e0da", + "line-opacity": 0.8, + "line-width": { + "base": 1.2, + "stops": [ + [15, 0.5], + [20, 4] + ] } - }, - { - "id": "Special area of interest/Grass/pattern/1", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 8 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Small stipple" + } + }, + { + "id": "Special area of interest/Mulch or dirt", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 14], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Mulch or dirt" + } + }, + { + "id": "Special area of interest/Mulch or dirt/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 14], + "minzoom": 14, + "layout": {}, + "paint": { + "line-color": "#c9b58b", + "line-width": { + "stops": [ + [15, 1.1], + [22, 10] + ] + }, + "line-blur": { + "stops": [ + [15, 1], + [22, 5] + ] } - }, - { - "id": "Special area of interest/Baseball field or other grounds", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": "#91a761" + } + }, + { + "id": "Special area of interest/Athletic track", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 0], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [14, "#d49a87"], + [17, "#cb7169"] + ] } - }, - { - "id": "Special area of interest/Baseball field or other grounds/pattern", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Baseball field or other grounds" + } + }, + { + "id": "Special area of interest/Athletic track/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 0], + "minzoom": 14, + "layout": {}, + "paint": { + "line-color": "#e3e0da", + "line-opacity": 0.8, + "line-width": { + "base": 1.2, + "stops": [ + [15, 0.5], + [20, 4] + ] } - }, - { - "id": "Special area of interest/Groundcover", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 13 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": "#97be82" + } + }, + { + "id": "Special area of interest/Sand", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 6], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Sand" + } + }, + { + "id": "Special area of interest/Parking/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 15], + "minzoom": 15, + "layout": {}, + "paint": { + "line-color": { + "stops": [ + [15, "#d1cfcd"], + [22, "#7c7b79"] + ] + }, + "line-opacity": 0.8, + "line-width": { + "stops": [ + [15, 1.1], + [22, 10] + ] + }, + "line-blur": { + "stops": [ + [15, 1], + [22, 5] + ] } - }, - { - "id": "Special area of interest/Groundcover/pattern", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 13 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Groundcover", - "fill-opacity": 0.5 + } + }, + { + "id": "Special area of interest/Parking", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 15], + "minzoom": 15, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [15, "#dddbd9"], + [22, "#8D8C8A"] + ] } - }, - { - "id": "Special area of interest/Field or court exterior", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 5 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": "#6E866E" + } + }, + { + "id": "Special area of interest/Parking/stipple", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 15], + "minzoom": 15, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Small stipple" + } + }, + { + "id": "Special area of interest/Rock or gravel", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 16], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Rock or gravel" + } + }, + { + "id": "Water line small scale", + "type": "line", + "source": "esri", + "source-layer": "Water line small scale", + "minzoom": 1, + "maxzoom": 5, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#B7D7D9"], + [10.6, "#6BC4F0"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [1, 0.5], + [5, 0.5] + ] } - }, - { - "id": "Special area of interest/Football field or court", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": "#7fa57a" + } + }, + { + "id": "Water line medium scale", + "type": "line", + "source": "esri", + "source-layer": "Water line medium scale", + "minzoom": 5, + "maxzoom": 7, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#B7D7D9"], + [10.6, "#6BC4F0"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [5, 0.5], + [7, 0.7] + ] } - }, - { - "id": "Special area of interest/Football field or court/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "line-color": "#e3e0da", - "line-opacity": 0.8, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 4 - ] - ] - } + } + }, + { + "id": "Water line large scale", + "type": "line", + "source": "esri", + "source-layer": "Water line large scale", + "minzoom": 7, + "maxzoom": 11, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#B7D7D9"], + [10.6, "#6BC4F0"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [7, 0.5], + [11, 0.7] + ] } - }, - { - "id": "Special area of interest/Hardcourt", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 10 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 15, - "#dddbd9" - ], - [ - 22, - "#8D8C8A" - ] - ] - } + } + }, + { + "id": "Water line/Waterfall", + "type": "line", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 5], + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#6BC4F0", + "line-width": 0.8, + "line-dasharray": [5, 5] + } + }, + { + "id": "Water line/Dam or weir", + "type": "line", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 2], + "minzoom": 11, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#afafaf", + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.7], + [14, 0.7], + [17, 2] + ] } - }, - { - "id": "Special area of interest/Hardcourt/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 10 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "line-color": "#e3e0da", - "line-opacity": 0.8, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 4 - ] - ] - } + } + }, + { + "id": "Water line/Levee/1", + "type": "line", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 3], + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#c3c3c3", + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.7], + [14, 0.7], + [20, 2.5] + ] } - }, - { - "id": "Special area of interest/Mulch or dirt", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 14 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Mulch or dirt" + } + }, + { + "id": "Water line/Levee/0", + "type": "symbol", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 3], + "minzoom": 13, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "icon-image": "Water line/Levee/0", + "symbol-spacing": 13.3, + "icon-rotation-alignment": "map", + "icon-allow-overlap": true, + "icon-padding": 1 + }, + "paint": {} + }, + { + "id": "Water line/Canal or ditch", + "type": "line", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 1], + "minzoom": 11, + "layout": { + "line-cap": "round" + }, + "paint": { + "line-color": "#6BC4F0", + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.7], + [14, 0.7], + [17, 2] + ] } - }, - { - "id": "Special area of interest/Mulch or dirt/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 14 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "line-color": "#c9b58b", - "line-width": { - "stops": [ - [ - 15, - 1.1 - ], - [ - 22, - 10 - ] - ] - }, - "line-blur": { - "stops": [ - [ - 15, - 1 - ], - [ - 22, - 5 - ] - ] - } + } + }, + { + "id": "Water line/Stream or river intermittent", + "type": "line", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 4], + "minzoom": 11, + "layout": {}, + "paint": { + "line-color": "#6BC4F0", + "line-dasharray": [7, 3], + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.7], + [14, 0.7], + [17, 2] + ] } - }, - { - "id": "Special area of interest/Athletic track", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 14, - "#d49a87" - ], - [ - 17, - "#cb7169" - ] - ] - } + } + }, + { + "id": "Water line/Stream or river", + "type": "line", + "source": "esri", + "source-layer": "Water line", + "filter": ["==", "_symbol", 0], + "minzoom": 11, + "layout": { + "line-cap": "round" + }, + "paint": { + "line-color": "#6BC4F0", + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.7], + [14, 0.7], + [17, 2] + ] } - }, - { - "id": "Special area of interest/Athletic track/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "line-color": "#e3e0da", - "line-opacity": 0.8, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 4 - ] - ] - } - } - }, - { - "id": "Special area of interest/Sand", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 6 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Sand" + } + }, + { + "id": "Marine area/1", + "type": "fill", + "source": "esri", + "source-layer": "Marine area", + "minzoom": 0, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#53B9EA"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Bathymetry/depth 2 (shallow water)", + "type": "fill", + "source": "esri", + "source-layer": "Bathymetry", + "filter": ["==", "_symbol", 0], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#5BBDEC"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Bathymetry/depth 3", + "type": "fill", + "source": "esri", + "source-layer": "Bathymetry", + "filter": ["==", "_symbol", 1], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#63C0EE"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Bathymetry/depth 4", + "type": "fill", + "source": "esri", + "source-layer": "Bathymetry", + "filter": ["==", "_symbol", 2], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#6BC4F0"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Bathymetry/depth 5", + "type": "fill", + "source": "esri", + "source-layer": "Bathymetry", + "filter": ["==", "_symbol", 3], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#72C8F1"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Bathymetry/depth 6", + "type": "fill", + "source": "esri", + "source-layer": "Bathymetry", + "filter": ["==", "_symbol", 4], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#7ACBF3"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Bathymetry/depth 7 (deep water)", + "type": "fill", + "source": "esri", + "source-layer": "Bathymetry", + "filter": ["==", "_symbol", 5], + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#82CFF5"], + [10.6, "#6BC4F0"] + ] + }, + "fill-antialias": false + } + }, + { + "id": "Water area small scale", + "type": "fill", + "source": "esri", + "source-layer": "Water area small scale", + "minzoom": 1, + "maxzoom": 5, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#53B9EA"], + [10.6, "#6BC4F0"] + ] + }, + "fill-outline-color": "#53B9EA" + } + }, + { + "id": "Water area medium scale/Lake intermittent", + "type": "fill", + "source": "esri", + "source-layer": "Water area medium scale", + "filter": ["==", "_symbol", 1], + "minzoom": 5, + "maxzoom": 7, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Lake or river intermittent" + } + }, + { + "id": "Water area medium scale/Lake or river", + "type": "fill", + "source": "esri", + "source-layer": "Water area medium scale", + "filter": ["==", "_symbol", 0], + "minzoom": 5, + "maxzoom": 7, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#53B9EA"], + [10.6, "#6BC4F0"] + ] + }, + "fill-outline-color": "#53B9EA" + } + }, + { + "id": "Water area large scale/Lake intermittent", + "type": "fill", + "source": "esri", + "source-layer": "Water area large scale", + "filter": ["==", "_symbol", 1], + "minzoom": 7, + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Lake or river intermittent" + } + }, + { + "id": "Water area large scale/Lake or river", + "type": "fill", + "source": "esri", + "source-layer": "Water area large scale", + "filter": ["==", "_symbol", 0], + "minzoom": 7, + "maxzoom": 11, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [5, "#53B9EA"], + [10.6, "#6BC4F0"] + ] + }, + "fill-outline-color": { + "stops": [ + [8, "#53B9EA"], + [9, "#6BC4F0"] + ] } - }, - { - "id": "Special area of interest/Parking/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 15 - ], - "minzoom": 15, - "layout": {}, - "paint": { - "line-color": { - "stops": [ - [ - 15, - "#d1cfcd" - ], - [ - 22, - "#7c7b79" - ] - ] - }, - "line-opacity": 0.8, - "line-width": { - "stops": [ - [ - 15, - 1.1 - ], - [ - 22, - 10 - ] - ] - }, - "line-blur": { - "stops": [ - [ - 15, - 1 - ], - [ - 22, - 5 - ] - ] - } + } + }, + { + "id": "Water area/Lake, river or bay", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 7], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": "#6BC4F0", + "fill-outline-color": "#6BC4F0" + } + }, + { + "id": "Water area/Lake or river intermittent", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 6], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Lake or river intermittent" + } + }, + { + "id": "Water area/Inundated area", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 4], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Inundated area" + } + }, + { + "id": "Water area/Swamp or marsh", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 3], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Swamp or marsh", + "fill-opacity": 0.45 + } + }, + { + "id": "Water area/Playa", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 1], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Playa" + } + }, + { + "id": "Water area/Ice mass", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 2], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-pattern": "Water area/Ice mass", + "fill-opacity": 0.5 + } + }, + { + "id": "Water area/Dam or weir", + "type": "fill", + "source": "esri", + "source-layer": "Water area", + "filter": ["==", "_symbol", 5], + "minzoom": 11, + "layout": {}, + "paint": { + "fill-color": "#e5e5dd", + "fill-outline-color": "#d9d9d1" + } + }, + { + "id": "Special area of interest/Bike, walk or pedestrian/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 2], + "minzoom": 15, + "layout": {}, + "paint": { + "line-color": "#bcb7ae", + "line-width": { + "stops": [ + [15, 1.1], + [22, 10] + ] + }, + "line-blur": { + "stops": [ + [15, 1], + [22, 5] + ] } - }, - { - "id": "Special area of interest/Parking", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 15 - ], - "minzoom": 15, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 15, - "#dddbd9" - ], - [ - 22, - "#8D8C8A" - ] - ] - } + } + }, + { + "id": "Special area of interest/Bike, walk or pedestrian", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 2], + "minzoom": 15, + "layout": {}, + "paint": { + "fill-color": "#E8E7E5", + "fill-outline-color": "#dbd9d5" + } + }, + { + "id": "Special area of interest/Bike, walk or pedestrian/pattern", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 2], + "minzoom": 15, + "layout": {}, + "paint": { + "fill-pattern": "Special area of interest/Small stipple" + } + }, + { + "id": "Special area of interest/Water", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 7], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": "#6BC4F0" + } + }, + { + "id": "Special area of interest/Water/line", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["==", "_symbol", 7], + "minzoom": 14, + "layout": {}, + "paint": { + "line-color": "#5db6e2", + "line-width": { + "stops": [ + [15, 1.1], + [22, 7] + ] + }, + "line-blur": { + "stops": [ + [15, 1], + [22, 3.5] + ] } - }, - { - "id": "Special area of interest/Parking/stipple", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 15 - ], - "minzoom": 15, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Small stipple" + } + }, + { + "id": "Ferry/Ferry", + "type": "line", + "source": "esri", + "source-layer": "Ferry", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#c1e1f0", + "line-opacity": 0.8, + "line-width": { + "base": 1.2, + "stops": [ + [11, 1.3], + [14, 1.5], + [17, 1.5] + ] + }, + "line-dasharray": [3, 4] + } + }, + { + "id": "Railroad/2", + "type": "line", + "source": "esri", + "source-layer": "Railroad", + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [11, "#dedcd9"], + [17, "#B8B1AA"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [11, 2.5], + [14, 2.5], + [17, 4] + ] } - }, - { - "id": "Special area of interest/Rock or gravel", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 16 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Rock or gravel" + } + }, + { + "id": "Railroad/1", + "type": "line", + "source": "esri", + "source-layer": "Railroad", + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-dasharray": [6, 7.5], + "line-color": { + "stops": [ + [11, "#E3E0D7"], + [17, "#DBD8CB"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.75], + [15, 0.75], + [17, 2] + ] } - }, - { - "id": "Water line small scale", - "type": "line", - "source": "esri", - "source-layer": "Water line small scale", - "minzoom": 1, - "maxzoom": 5, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#B7D7D9" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 1, - 0.5 - ], - [ - 5, - 0.5 - ] - ] - } + } + }, + { + "id": "Ferry/Rail ferry/2", + "type": "line", + "source": "esri", + "source-layer": "Ferry", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [11, "#dedcd9"], + [17, "#B8B1AA"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [11, 2.5], + [14, 2.5], + [17, 4] + ] } - }, - { - "id": "Water line medium scale", - "type": "line", - "source": "esri", - "source-layer": "Water line medium scale", - "minzoom": 5, - "maxzoom": 7, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#B7D7D9" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 5, - 0.5 - ], - [ - 7, - 0.7 - ] - ] - } + } + }, + { + "id": "Ferry/Rail ferry/1", + "type": "line", + "source": "esri", + "source-layer": "Ferry", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 11, + "layout": { + "line-join": "round" + }, + "paint": { + "line-dasharray": [6, 7.5], + "line-color": { + "stops": [ + [11, "#E3E0D7"], + [17, "#DBD8CB"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.75], + [15, 0.75], + [17, 2] + ] } - }, - { - "id": "Water line large scale", - "type": "line", - "source": "esri", - "source-layer": "Water line large scale", - "minzoom": 7, - "maxzoom": 11, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#B7D7D9" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 7, - 0.5 - ], - [ - 11, - 0.7 - ] - ] - } + } + }, + { + "id": "Special area of interest line/Sports field", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 6], + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#e3e0da", + "line-opacity": 0.8, + "line-width": { + "base": 1.2, + "stops": [ + [15, 0.5], + [20, 4] + ] } - }, - { - "id": "Water line/Waterfall", - "type": "line", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 5 - ], - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#6BC4F0", - "line-width": 0.8, - "line-dasharray": [ - 5, - 5 + } + }, + { + "id": "Road/4WD/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 10], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e3e1dc", + "line-dasharray": [2, 1], + "line-width": { + "base": 1.2, + "stops": [ + [11, 1.5], + [14, 2.3], + [17, 8.3], + [20, 50] ] } - }, - { - "id": "Water line/Dam or weir", - "type": "line", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 11, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#afafaf", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.7 - ], - [ - 14, - 0.7 - ], - [ - 17, - 2 - ] - ] - } + } + }, + { + "id": "Road/Minor, ramp or traffic circle/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 6], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#E2DFD6"], + [10, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9.9, 1], + [14, 4], + [16, 11.5], + [17, 19], + [20, 58] + ] } - }, - { - "id": "Water line/Levee/1", - "type": "line", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#c3c3c3", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.7 - ], - [ - 14, - 0.7 - ], - [ - 20, - 2.5 - ] - ] - } + } + }, + { + "id": "Road/Minor/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 5], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#E2DFD6"], + [10, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9, 1], + [10, 3.3], + [14, 5.5], + [16, 11.5], + [17, 19], + [20, 58] + ] } - }, - { - "id": "Water line/Levee/0", - "type": "symbol", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 13, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "icon-image": "Water line/Levee/0", - "symbol-spacing": 13.3, - "icon-rotation-alignment": "map", - "icon-allow-overlap": true, - "icon-padding": 1 - }, - "paint": {} - }, - { - "id": "Water line/Canal or ditch", - "type": "line", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 11, - "layout": { - "line-cap": "round" - }, - "paint": { - "line-color": "#6BC4F0", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.7 - ], - [ - 14, - 0.7 - ], - [ - 17, - 2 - ] - ] - } + } + }, + { + "id": "Road/Major, ramp or traffic circle/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 4], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9, 3.3], + [14, 7.3], + [16, 12.3], + [17, 22], + [20, 63] + ] } - }, - { - "id": "Water line/Stream or river intermittent", - "type": "line", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "line-color": "#6BC4F0", - "line-dasharray": [ - 7, - 3 - ], - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.7 - ], - [ - 14, - 0.7 - ], - [ - 17, - 2 - ] - ] - } + } + }, + { + "id": "Road/Major/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 3], ["!in", "Viz", 2]], + "minzoom": 8, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [8, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-width": { + "base": 1, + "stops": [ + [8, 3.3], + [14, 7.3], + [16, 12.3], + [17, 22], + [20, 63] + ] } - }, - { - "id": "Water line/Stream or river", - "type": "line", - "source": "esri", - "source-layer": "Water line", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 11, - "layout": { - "line-cap": "round" - }, - "paint": { - "line-color": "#6BC4F0", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.7 - ], - [ - 14, - 0.7 - ], - [ - 17, - 2 - ] - ] - } + } + }, + { + "id": "Road/Service/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 8], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#e3e1dc", + "line-width": { + "base": 1.2, + "stops": [ + [11, 2], + [14, 2.5], + [17, 10.3], + [20, 45] + ] } - }, - { - "id": "Marine area/1", - "type": "fill", - "source": "esri", - "source-layer": "Marine area", - "minzoom": 0, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#53B9EA" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + } + }, + { + "id": "Trail or path/1", + "type": "line", + "source": "esri", + "source-layer": "Trail or path", + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [15, "#dddbd5"], + [17, "#e3e1dc"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [15, 2.5], + [16, 3], + [17, 5], + [20, 20], + [22, 31] + ] } - }, - { - "id": "Bathymetry/depth 2 (shallow water)", - "type": "fill", - "source": "esri", - "source-layer": "Bathymetry", - "filter": [ - "==", - "_symbol", - 0 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#5BBDEC" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + } + }, + { + "id": "Road/Pedestrian/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 9], ["!in", "Viz", 2]], + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [15, "#dddbd5"], + [17, "#e3e1dc"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [15, 2.5], + [16, 3], + [17, 5], + [20, 20], + [22, 31] + ] } - }, - { - "id": "Bathymetry/depth 3", - "type": "fill", - "source": "esri", - "source-layer": "Bathymetry", - "filter": [ - "==", - "_symbol", - 1 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#63C0EE" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + } + }, + { + "id": "Road/Local/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 7], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#e3e1dc", + "line-width": { + "base": 1.4, + "stops": [ + [11, 1.1], + [14, 3], + [16, 8], + [17, 16], + [20, 48] + ] } + } + }, + { + "id": "Trail or path/0", + "type": "line", + "source": "esri", + "source-layer": "Trail or path", + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" }, - { - "id": "Bathymetry/depth 4", - "type": "fill", - "source": "esri", - "source-layer": "Bathymetry", - "filter": [ - "==", - "_symbol", - 2 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#6BC4F0" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + "paint": { + "line-color": { + "stops": [ + [15, "#f8f8f7"], + [18, "#ffffff"] + ] + }, + "line-dasharray": { + "stops": [ + [15, [3, 3]], + [17, [2, 2]] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [15, 1.3], + [17, 2.5] + ] } + } + }, + { + "id": "Road/Pedestrian/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 9], ["!in", "Viz", 2]], + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" }, - { - "id": "Bathymetry/depth 5", - "type": "fill", - "source": "esri", - "source-layer": "Bathymetry", - "filter": [ - "==", - "_symbol", - 3 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#72C8F1" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + "paint": { + "line-color": { + "stops": [ + [15, "#f8f8f7"], + [18, "#ffffff"] + ] + }, + "line-dasharray": { + "stops": [ + [15, [3, 3]], + [17, [2, 2]] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [15, 1.3], + [17, 2.5] + ] } - }, - { - "id": "Bathymetry/depth 6", - "type": "fill", - "source": "esri", - "source-layer": "Bathymetry", - "filter": [ - "==", - "_symbol", - 4 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#7ACBF3" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + } + }, + { + "id": "Road/4WD/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 10], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#FFFFFF", + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.75], + [14, 1.3], + [17, 7.3], + [20, 48] + ] } - }, - { - "id": "Bathymetry/depth 7 (deep water)", - "type": "fill", - "source": "esri", - "source-layer": "Bathymetry", - "filter": [ - "==", - "_symbol", - 5 - ], - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#82CFF5" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-antialias": false + } + }, + { + "id": "Road/Service/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 8], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#FFFFFF", + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.75], + [14, 1.3], + [17, 8.3], + [20, 43] + ] } - }, - { - "id": "Water area small scale", - "type": "fill", - "source": "esri", - "source-layer": "Water area small scale", - "minzoom": 1, - "maxzoom": 5, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#53B9EA" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-outline-color": "#53B9EA" + } + }, + { + "id": "Road/Local/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 7], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [12, "#fcfbf9"], + [13, "#ffffff"] + ] + }, + "line-width": { + "base": 1.4, + "stops": [ + [11, 1.1], + [14, 2], + [16, 6], + [17, 14], + [20, 45] + ] } - }, - { - "id": "Water area medium scale/Lake intermittent", - "type": "fill", - "source": "esri", - "source-layer": "Water area medium scale", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 5, - "maxzoom": 7, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Lake or river intermittent" + } + }, + { + "id": "Road/Minor, ramp or traffic circle/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 6], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9, 0.75], + [14, 2], + [16, 9.5], + [17, 17], + [20, 55] + ] } - }, - { - "id": "Water area medium scale/Lake or river", - "type": "fill", - "source": "esri", - "source-layer": "Water area medium scale", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 5, - "maxzoom": 7, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#53B9EA" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-outline-color": "#53B9EA" + } + }, + { + "id": "Road/Minor/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 5], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9, 1.3], + [14, 4.5], + [16, 9.5], + [17, 17], + [20, 55] + ] } - }, - { - "id": "Water area large scale/Lake intermittent", - "type": "fill", - "source": "esri", - "source-layer": "Water area large scale", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 7, - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Lake or river intermittent" + } + }, + { + "id": "Road/Major, ramp or traffic circle/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 4], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9, 1.3], + [14, 5.3], + [16, 10.3], + [17, 20], + [20, 60] + ] } - }, - { - "id": "Water area large scale/Lake or river", - "type": "fill", - "source": "esri", - "source-layer": "Water area large scale", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 7, - "maxzoom": 11, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 5, - "#53B9EA" - ], - [ - 10.6, - "#6BC4F0" - ] - ] - }, - "fill-outline-color": { - "stops": [ - [ - 8, - "#53B9EA" - ], - [ - 9, - "#6BC4F0" - ] - ] - } + } + }, + { + "id": "Road/Major/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 3], ["!in", "Viz", 2]], + "minzoom": 8, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [8, 1.3], + [14, 5.3], + [16, 10.3], + [17, 20], + [20, 60] + ] } - }, - { - "id": "Water area/Lake, river or bay", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": "#6BC4F0", - "fill-outline-color": "#6BC4F0" + } + }, + { + "id": "Road/Freeway Motorway, ramp or traffic circle/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 2], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round", + "line-cap": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-width": { + "base": 1.2, + "stops": [ + [9, 0.3], + [14, 8.3], + [16, 14.3], + [17, 30], + [20, 52] + ] } - }, - { - "id": "Water area/Lake or river intermittent", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 6 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Lake or river intermittent" + } + }, + { + "id": "Road/Highway/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.3], + [14, 8.3], + [16, 14.3], + [17, 30], + [20, 52] + ] } - }, - { - "id": "Water area/Inundated area", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Inundated area" + } + }, + { + "id": "Road/Freeway Motorway/1", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 5, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-width": { + "base": 1.2, + "stops": [ + [5, 0.3], + [14, 8.3], + [16, 14.3], + [17, 30], + [20, 52] + ] } - }, - { - "id": "Water area/Swamp or marsh", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Swamp or marsh", - "fill-opacity": 0.45 + } + }, + { + "id": "Road/Freeway Motorway, ramp or traffic circle/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 2], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round", + "line-cap": "round" + }, + "paint": { + "line-color": { + "stops": [ + [6, "#F6CA91"], + [8, "#F6CA91"], + [12, "#F6CA91"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [9, 0.7], + [14, 6.3], + [16, 12.3], + [17, 28], + [20, 50] + ] } - }, - { - "id": "Water area/Playa", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Playa" + } + }, + { + "id": "Road/Highway/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [6, "#F6CA91"], + [8, "#F6CA91"], + [12, "#F6CA91"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.7], + [14, 6.3], + [16, 12.3], + [17, 28], + [20, 50] + ] } - }, - { - "id": "Water area/Ice mass", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-pattern": "Water area/Ice mass", - "fill-opacity": 0.5 + } + }, + { + "id": "Road/Freeway Motorway/0", + "type": "line", + "source": "esri", + "source-layer": "Road", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 5, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#F6CA91", + "line-width": { + "base": 1.2, + "stops": [ + [5, 0.7], + [14, 6.3], + [16, 12.3], + [17, 28], + [20, 50] + ] } - }, - { - "id": "Water area/Dam or weir", - "type": "fill", - "source": "esri", - "source-layer": "Water area", - "filter": [ - "==", - "_symbol", - 5 - ], - "minzoom": 11, - "layout": {}, - "paint": { - "fill-color": "#e5e5dd", - "fill-outline-color": "#d9d9d1" + } + }, + { + "id": "Special area of interest line/Dock or pier", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 0], + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#E8E7E5", + "line-width": { + "base": 1.2, + "stops": [ + [15, 0.5], + [20, 4] + ] } - }, - { - "id": "Special area of interest/Bike, walk or pedestrian/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 15, - "layout": {}, - "paint": { - "line-color": "#bcb7ae", - "line-width": { - "stops": [ - [ - 15, - 1.1 - ], - [ - 22, - 10 - ] - ] - }, - "line-blur": { - "stops": [ - [ - 15, - 1 - ], - [ - 22, - 5 - ] - ] - } + } + }, + { + "id": "Special area of interest line/Fence (chain link)/1", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 1], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#686868", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [16, 0.7], + [20, 3] + ] } - }, - { - "id": "Special area of interest/Bike, walk or pedestrian", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 15, - "layout": {}, - "paint": { - "fill-color": "#E8E7E5", - "fill-outline-color": "#dbd9d5" + } + }, + { + "id": "Special area of interest line/Fence (chain link)/0", + "type": "symbol", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 1], + "minzoom": 16, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "icon-image": "Special area of interest line/Fence (chain link)/0", + "symbol-spacing": { + "stops": [ + [16, 7], + [22, 20] + ] + }, + "icon-rotation-alignment": "map", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.25], + [22, 1] + ] + } + }, + "paint": {} + }, + { + "id": "Special area of interest line/Fence (metal)/1", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 2], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#686868", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [16, 0.7], + [20, 3] + ] } - }, - { - "id": "Special area of interest/Bike, walk or pedestrian/pattern", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 15, - "layout": {}, - "paint": { - "fill-pattern": "Special area of interest/Small stipple" + } + }, + { + "id": "Special area of interest line/Fence (metal)/0", + "type": "symbol", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 2], + "minzoom": 16, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "icon-image": "Special area of interest line/Fence (metal)/0", + "symbol-spacing": { + "stops": [ + [16, 7], + [22, 20] + ] + }, + "icon-rotation-alignment": "map", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.2], + [22, 0.9] + ] + } + }, + "paint": {} + }, + { + "id": "Special area of interest line/Fence (wood)/1", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 3], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#CDAA66", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [16, 0.7], + [20, 3] + ] } - }, - { - "id": "Special area of interest/Water", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": "#6BC4F0" + } + }, + { + "id": "Special area of interest line/Fence (wood)/0", + "type": "symbol", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 3], + "minzoom": 16, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "icon-image": "Special area of interest line/Fence (wood)/0", + "symbol-spacing": { + "stops": [ + [16, 7], + [22, 20] + ] + }, + "icon-rotation-alignment": "map", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.2], + [22, 0.9] + ] + } + }, + "paint": {} + }, + { + "id": "Special area of interest line/Gate/2", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 4], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#686868", + "line-width": { + "base": 1.2, + "stops": [ + [16, 2], + [20, 7] + ] } - }, - { - "id": "Special area of interest/Water/line", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "line-color": "#5db6e2", - "line-width": { - "stops": [ - [ - 15, - 1.1 - ], - [ - 22, - 7 - ] - ] - }, - "line-blur": { - "stops": [ - [ - 15, - 1 - ], - [ - 22, - 3.5 - ] - ] - } + } + }, + { + "id": "Special area of interest line/Gate/1", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 4], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#E1E1E1", + "line-width": { + "base": 1.2, + "stops": [ + [16, 1], + [20, 5] + ] } - }, - { - "id": "Ferry/Ferry", - "type": "line", - "source": "esri", - "source-layer": "Ferry", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#c1e1f0", - "line-opacity": 0.8, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 1.3 - ], - [ - 14, - 1.5 - ], - [ - 17, - 1.5 - ] - ] - }, - "line-dasharray": [ - 3, - 4 + } + }, + { + "id": "Special area of interest line/Gate/0", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 4], + "minzoom": 16, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#686868", + "line-dasharray": [5, 15], + "line-width": 0.7 + } + }, + { + "id": "Special area of interest line/Wall/2", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 7], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#BCB7AE", + "line-width": { + "base": 1.2, + "stops": [ + [16, 4], + [20, 7] ] } - }, - { - "id": "Railroad/2", - "type": "line", - "source": "esri", - "source-layer": "Railroad", - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 11, - "#dedcd9" - ], - [ - 17, - "#B8B1AA" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 2.5 - ], - [ - 14, - 2.5 - ], - [ - 17, - 4 - ] - ] - } + } + }, + { + "id": "Special area of interest line/Wall/1", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 7], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e3e3e1", + "line-width": { + "base": 1.2, + "stops": [ + [16, 2], + [20, 5] + ] } - }, - { - "id": "Railroad/1", - "type": "line", - "source": "esri", - "source-layer": "Railroad", - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-dasharray": [ - 6, - 7.5 - ], - "line-color": { - "stops": [ - [ - 11, - "#E3E0D7" - ], - [ - 17, - "#DBD8CB" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.75 - ], - [ - 15, - 0.75 - ], - [ - 17, - 2 - ] - ] - } + } + }, + { + "id": "Special area of interest line/Wall/0", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 7], + "minzoom": 16, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#BCB7AE", + "line-width": 0.5 + } + }, + { + "id": "Building/1", + "type": "fill", + "source": "esri", + "source-layer": "Building", + "minzoom": 18, + "layout": {}, + "paint": { + "fill-color": "#6f6c68", + "fill-opacity": 0.15, + "fill-translate": { + "stops": [ + [18, [2, 2]], + [20, [10, 10]] + ] + }, + "fill-translate-anchor": "viewport" + } + }, + { + "id": "Building/General", + "type": "fill", + "source": "esri", + "source-layer": "Building", + "minzoom": 15, + "layout": {}, + "paint": { + "fill-color": { + "stops": [ + [15, "#ebe7e2"], + [20, "#D1C4BA"] + ] } - }, - { - "id": "Ferry/Rail ferry/2", - "type": "line", - "source": "esri", - "source-layer": "Ferry", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 11, - "#dedcd9" - ], - [ - 17, - "#B8B1AA" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 2.5 - ], - [ - 14, - 2.5 - ], - [ - 17, - 4 - ] - ] - } + } + }, + { + "id": "Building/pattern", + "type": "fill", + "source": "esri", + "source-layer": "Building", + "minzoom": 16, + "layout": {}, + "paint": { + "fill-pattern": "Building", + "fill-opacity": 0.15 + } + }, + { + "id": "Building/line", + "type": "line", + "source": "esri", + "source-layer": "Building", + "minzoom": 15, + "layout": {}, + "paint": { + "line-color": { + "stops": [ + [15, "#dbd4cb"], + [22, "#ac9c92"] + ] + }, + "line-width": { + "stops": [ + [15, 0.5], + [20, 1.5] + ] } - }, - { - "id": "Ferry/Rail ferry/1", - "type": "line", - "source": "esri", - "source-layer": "Ferry", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 11, - "layout": { - "line-join": "round" - }, - "paint": { - "line-dasharray": [ - 6, - 7.5 - ], - "line-color": { - "stops": [ - [ - 11, - "#E3E0D7" - ], - [ - 17, - "#DBD8CB" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.75 - ], - [ - 15, - 0.75 - ], - [ - 17, - 2 - ] - ] - } + } + }, + { + "id": "Special area of interest line/Parking lot", + "type": "line", + "source": "esri", + "source-layer": "Special area of interest line", + "filter": ["==", "_symbol", 5], + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#E8E7E5", + "line-width": { + "base": 1.2, + "stops": [ + [15, 0.5], + [20, 4] + ] } - }, - { - "id": "Special area of interest line/Sports field", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 6 - ], - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#e3e0da", - "line-opacity": 0.8, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 4 - ] - ] - } + } + }, + { + "id": "Road tunnel/4WD/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 10], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#e3e1dc", + "line-dasharray": [2, 1], + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [11, 1.5], + [14, 2.3], + [17, 8.3], + [20, 49] + ] } - }, - { - "id": "Road/4WD/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 10 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#e3e1dc", - "line-dasharray": [ - 2, - 1 - ], - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 1.5 - ], - [ - 14, - 2.3 - ], - [ - 17, - 8.3 - ], - [ - 20, - 50 - ] - ] - } + } + }, + { + "id": "Road tunnel/Minor, ramp or traffic circle/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 6], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#E2DFD6"], + [10, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9.9, 1], + [14, 4], + [16, 11.5], + [17, 19], + [20, 57] + ] } - }, - { - "id": "Road/Minor, ramp or traffic circle/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 6 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#E2DFD6" - ], - [ - 10, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9.9, - 1 - ], - [ - 14, - 4 - ], - [ - 16, - 11.5 - ], - [ - 17, - 19 - ], - [ - 20, - 58 - ] - ] - } - } - }, - { - "id": "Road/Minor/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#E2DFD6" - ], - [ - 10, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 1 - ], - [ - 10, - 3.3 - ], - [ - 14, - 5.5 - ], - [ - 16, - 11.5 - ], - [ - 17, - 19 - ], - [ - 20, - 58 - ] - ] - } - } - }, - { - "id": "Road/Major, ramp or traffic circle/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 3.3 - ], - [ - 14, - 7.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 22 - ], - [ - 20, - 63 - ] - ] - } - } - }, - { - "id": "Road/Major/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 8, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 8, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-width": { - "base": 1, - "stops": [ - [ - 8, - 3.3 - ], - [ - 14, - 7.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 22 - ], - [ - 20, - 63 - ] - ] - } - } - }, - { - "id": "Road/Service/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 8 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#e3e1dc", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 2 - ], - [ - 14, - 2.5 - ], - [ - 17, - 10.3 - ], - [ - 20, - 45 - ] - ] - } - } - }, - { - "id": "Trail or path/1", - "type": "line", - "source": "esri", - "source-layer": "Trail or path", - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 15, - "#dddbd5" - ], - [ - 17, - "#e3e1dc" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 2.5 - ], - [ - 16, - 3 - ], - [ - 17, - 5 - ], - [ - 20, - 20 - ], - [ - 22, - 31 - ] - ] - } - } - }, - { - "id": "Road/Pedestrian/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 9 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 15, - "#dddbd5" - ], - [ - 17, - "#e3e1dc" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 2.5 - ], - [ - 16, - 3 - ], - [ - 17, - 5 - ], - [ - 20, - 20 - ], - [ - 22, - 31 - ] - ] - } - } - }, - { - "id": "Road/Local/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#e3e1dc", - "line-width": { - "base": 1.4, - "stops": [ - [ - 11, - 1.1 - ], - [ - 14, - 3 - ], - [ - 16, - 8 - ], - [ - 17, - 16 - ], - [ - 20, - 48 - ] - ] - } - } - }, - { - "id": "Trail or path/0", - "type": "line", - "source": "esri", - "source-layer": "Trail or path", - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 15, - "#f8f8f7" - ], - [ - 18, - "#ffffff" - ] - ] - }, - "line-dasharray": { - "stops": [ - [ - 15, - [ - 3, - 3 - ] - ], - [ - 17, - [ - 2, - 2 - ] - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 1.3 - ], - [ - 17, - 2.5 - ] - ] - } - } - }, - { - "id": "Road/Pedestrian/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 9 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 15, - "#f8f8f7" - ], - [ - 18, - "#ffffff" - ] - ] - }, - "line-dasharray": { - "stops": [ - [ - 15, - [ - 3, - 3 - ] - ], - [ - 17, - [ - 2, - 2 - ] - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 1.3 - ], - [ - 17, - 2.5 - ] - ] - } - } - }, - { - "id": "Road/4WD/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 10 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#FFFFFF", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.75 - ], - [ - 14, - 1.3 - ], - [ - 17, - 7.3 - ], - [ - 20, - 48 - ] - ] - } - } - }, - { - "id": "Road/Service/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 8 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#FFFFFF", - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.75 - ], - [ - 14, - 1.3 - ], - [ - 17, - 8.3 - ], - [ - 20, - 43 - ] - ] - } - } - }, - { - "id": "Road/Local/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 12, - "#fcfbf9" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.4, - "stops": [ - [ - 11, - 1.1 - ], - [ - 14, - 2 - ], - [ - 16, - 6 - ], - [ - 17, - 14 - ], - [ - 20, - 45 - ] - ] - } - } - }, - { - "id": "Road/Minor, ramp or traffic circle/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 6 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 0.75 - ], - [ - 14, - 2 - ], - [ - 16, - 9.5 - ], - [ - 17, - 17 - ], - [ - 20, - 55 - ] - ] - } - } - }, - { - "id": "Road/Minor/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 1.3 - ], - [ - 14, - 4.5 - ], - [ - 16, - 9.5 - ], - [ - 17, - 17 - ], - [ - 20, - 55 - ] - ] - } - } - }, - { - "id": "Road/Major, ramp or traffic circle/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 1.3 - ], - [ - 14, - 5.3 - ], - [ - 16, - 10.3 - ], - [ - 17, - 20 - ], - [ - 20, - 60 - ] - ] - } - } - }, - { - "id": "Road/Major/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 8, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 8, - 1.3 - ], - [ - 14, - 5.3 - ], - [ - 16, - 10.3 - ], - [ - 17, - 20 - ], - [ - 20, - 60 - ] - ] - } - } - }, - { - "id": "Road/Freeway Motorway, ramp or traffic circle/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round", - "line-cap": "round" - }, - "paint": { - "line-color": "#ffffff", - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 0.3 - ], - [ - 14, - 8.3 - ], - [ - 16, - 14.3 - ], - [ - 17, - 30 - ], - [ - 20, - 52 - ] - ] - } - } - }, - { - "id": "Road/Highway/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#ffffff", - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.3 - ], - [ - 14, - 8.3 - ], - [ - 16, - 14.3 - ], - [ - 17, - 30 - ], - [ - 20, - 52 - ] - ] - } - } - }, - { - "id": "Road/Freeway Motorway/1", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 5, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#ffffff", - "line-width": { - "base": 1.2, - "stops": [ - [ - 5, - 0.3 - ], - [ - 14, - 8.3 - ], - [ - 16, - 14.3 - ], - [ - 17, - 30 - ], - [ - 20, - 52 - ] - ] - } - } - }, - { - "id": "Road/Freeway Motorway, ramp or traffic circle/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round", - "line-cap": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 6, - "#F6CA91" - ], - [ - 8, - "#F6CA91" - ], - [ - 12, - "#F6CA91" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 0.7 - ], - [ - 14, - 6.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 28 - ], - [ - 20, - 50 - ] - ] - } + } + }, + { + "id": "Road tunnel/Minor/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 5], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#E2DFD6"], + [10, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 1], + [10, 3.3], + [14, 5.5], + [16, 11.5], + [17, 19], + [20, 57] + ] } - }, - { - "id": "Road/Highway/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 6, - "#F6CA91" - ], - [ - 8, - "#F6CA91" - ], - [ - 12, - "#F6CA91" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.7 - ], - [ - 14, - 6.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 28 - ], - [ - 20, - 50 - ] - ] - } + } + }, + { + "id": "Road tunnel/Major, ramp or traffic circle/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 4], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 3.3], + [14, 7.3], + [16, 12.3], + [17, 22], + [20, 62] + ] } - }, - { - "id": "Road/Freeway Motorway/0", - "type": "line", - "source": "esri", - "source-layer": "Road", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 5, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#F6CA91", - "line-width": { - "base": 1.2, - "stops": [ - [ - 5, - 0.7 - ], - [ - 14, - 6.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 28 - ], - [ - 20, - 50 - ] - ] - } + } + }, + { + "id": "Road tunnel/Major/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 3], ["!in", "Viz", 2]], + "minzoom": 8, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [8, "#dedbd1"], + [12, "#e3e1dc"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1, + "stops": [ + [8, 3.3], + [14, 7.3], + [16, 12.3], + [17, 22], + [20, 62] + ] } - }, - { - "id": "Special area of interest line/Dock or pier", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#E8E7E5", - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 4 - ] - ] - } + } + }, + { + "id": "Road tunnel/Pedestrian/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 9], ["!in", "Viz", 2]], + "minzoom": 15, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#FFFFFF", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [14, 1.6], + [16, 2], + [17, 8], + [20, 45] + ] } - }, - { - "id": "Special area of interest line/Fence (chain link)/1", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#686868", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 0.7 - ], - [ - 20, - 3 - ] - ] - } + } + }, + { + "id": "Road tunnel/4WD/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 10], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#FFFFFF", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.75], + [14, 1.3], + [17, 7.3], + [20, 48] + ] } - }, - { - "id": "Special area of interest line/Fence (chain link)/0", - "type": "symbol", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 16, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "icon-image": "Special area of interest line/Fence (chain link)/0", - "symbol-spacing": { - "stops": [ - [ - 16, - 7 - ], - [ - 22, - 20 - ] - ] - }, - "icon-rotation-alignment": "map", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.25 - ], - [ - 22, - 1 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Special area of interest line/Fence (metal)/1", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#686868", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 0.7 - ], - [ - 20, - 3 - ] - ] - } + } + }, + { + "id": "Road tunnel/Service/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 8], ["!in", "Viz", 2]], + "minzoom": 13, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#FFFFFF", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [11, 0.75], + [14, 1.3], + [17, 8.3], + [20, 48] + ] } - }, - { - "id": "Special area of interest line/Fence (metal)/0", - "type": "symbol", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 16, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "icon-image": "Special area of interest line/Fence (metal)/0", - "symbol-spacing": { - "stops": [ - [ - 16, - 7 - ], - [ - 22, - 20 - ] - ] - }, - "icon-rotation-alignment": "map", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.2 - ], - [ - 22, - 0.9 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Special area of interest line/Fence (wood)/1", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#CDAA66", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 0.7 - ], - [ - 20, - 3 - ] - ] - } + } + }, + { + "id": "Road tunnel/Local/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 7], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [12, "#fcfbf9"], + [13, "#ffffff"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.4, + "stops": [ + [11, 1.1], + [14, 2], + [16, 6], + [17, 14], + [20, 55] + ] } - }, - { - "id": "Special area of interest line/Fence (wood)/0", - "type": "symbol", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 16, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "icon-image": "Special area of interest line/Fence (wood)/0", - "symbol-spacing": { - "stops": [ - [ - 16, - 7 - ], - [ - 22, - 20 - ] - ] - }, - "icon-rotation-alignment": "map", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.2 - ], - [ - 22, - 0.9 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Special area of interest line/Gate/2", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#686868", - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 2 - ], - [ - 20, - 7 - ] - ] - } + } + }, + { + "id": "Road tunnel/Minor, ramp or traffic circle/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 6], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 0.75], + [14, 2], + [16, 9.5], + [17, 17], + [20, 55] + ] } - }, - { - "id": "Special area of interest line/Gate/1", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#E1E1E1", - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 1 - ], - [ - 20, - 5 - ] - ] - } + } + }, + { + "id": "Road tunnel/Minor/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 5], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 1.3], + [14, 4.5], + [16, 9.5], + [17, 17], + [20, 55] + ] } - }, - { - "id": "Special area of interest line/Gate/0", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 16, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#686868", - "line-dasharray": [ - 5, - 15 - ], - "line-width": 0.7 + } + }, + { + "id": "Road tunnel/Major, ramp or traffic circle/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 4], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 1.3], + [14, 5.3], + [16, 10.3], + [17, 20], + [20, 60] + ] } - }, - { - "id": "Special area of interest line/Wall/2", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#BCB7AE", - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 4 - ], - [ - 20, - 7 - ] - ] - } + } + }, + { + "id": "Road tunnel/Major/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 3], ["!in", "Viz", 2]], + "minzoom": 8, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [9, "#f0efea"], + [13, "#ffffff"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [8, 1.3], + [14, 5.3], + [16, 10.3], + [17, 20], + [20, 60] + ] } - }, - { - "id": "Special area of interest line/Wall/1", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#e3e3e1", - "line-width": { - "base": 1.2, - "stops": [ - [ - 16, - 2 - ], - [ - 20, - 5 - ] - ] - } + } + }, + { + "id": "Road tunnel/Freeway Motorway, ramp or traffic circle/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 2], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round", + "line-cap": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 0.3], + [14, 8.3], + [16, 14.3], + [17, 30], + [20, 52] + ] } - }, - { - "id": "Special area of interest line/Wall/0", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 16, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#BCB7AE", - "line-width": 0.5 + } + }, + { + "id": "Road tunnel/Highway/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.3], + [14, 8.3], + [16, 14.3], + [17, 30], + [20, 52] + ] } - }, - { - "id": "Building/1", - "type": "fill", - "source": "esri", - "source-layer": "Building", - "minzoom": 18, - "layout": {}, - "paint": { - "fill-color": "#6f6c68", - "fill-opacity": 0.15, - "fill-translate": { - "stops": [ - [ - 18, - [ - 2, - 2 - ] - ], - [ - 20, - [ - 10, - 10 - ] - ] - ] - }, - "fill-translate-anchor": "viewport" + } + }, + { + "id": "Road tunnel/Freeway Motorway/1", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 5, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#ffffff", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [5, 0.3], + [14, 8.3], + [16, 14.3], + [17, 30], + [20, 52] + ] } - }, - { - "id": "Building/General", - "type": "fill", - "source": "esri", - "source-layer": "Building", - "minzoom": 15, - "layout": {}, - "paint": { - "fill-color": { - "stops": [ - [ - 15, - "#ebe7e2" - ], - [ - 20, - "#D1C4BA" - ] - ] - } + } + }, + { + "id": "Road tunnel/Freeway Motorway, ramp or traffic circle/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 2], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round", + "line-cap": "round" + }, + "paint": { + "line-color": { + "stops": [ + [6, "#F6CA91"], + [8, "#F6CA91"], + [12, "#F6CA91"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [9, 0.7], + [14, 6.3], + [16, 12.3], + [17, 28], + [20, 50] + ] } - }, - { - "id": "Building/pattern", - "type": "fill", - "source": "esri", - "source-layer": "Building", - "minzoom": 16, - "layout": {}, - "paint": { - "fill-pattern": "Building", - "fill-opacity": 0.15 + } + }, + { + "id": "Road tunnel/Highway/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 6, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [6, "#F6CA91"], + [8, "#F6CA91"], + [12, "#F6CA91"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [6, 0.7], + [14, 6.3], + [16, 12.3], + [17, 28], + [20, 50] + ] } - }, - { - "id": "Building/line", - "type": "line", - "source": "esri", - "source-layer": "Building", - "minzoom": 15, - "layout": {}, - "paint": { - "line-color": { - "stops": [ - [ - 15, - "#dbd4cb" - ], - [ - 22, - "#ac9c92" - ] - ] - }, - "line-width": { - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 1.5 - ] - ] - } + } + }, + { + "id": "Road tunnel/Freeway Motorway/0", + "type": "line", + "source": "esri", + "source-layer": "Road tunnel", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 5, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#F6CA91", + "line-opacity": 0.5, + "line-width": { + "base": 1.2, + "stops": [ + [5, 0.7], + [14, 6.3], + [16, 12.3], + [17, 28], + [20, 50] + ] } - }, - { - "id": "Special area of interest line/Parking lot", - "type": "line", - "source": "esri", - "source-layer": "Special area of interest line", - "filter": [ - "==", - "_symbol", - 5 - ], - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#E8E7E5", - "line-width": { - "base": 1.2, - "stops": [ - [ - 15, - 0.5 - ], - [ - 20, - 4 - ] - ] - } + } + }, + { + "id": "Special area of interest/Gutter", + "type": "fill", + "source": "esri", + "source-layer": "Special area of interest", + "filter": ["in", "_symbol", 9, 3], + "minzoom": 14, + "layout": {}, + "paint": { + "fill-color": "#E8E7E5", + "fill-outline-color": "#bcb7ae" + } + }, + { + "id": "Boundary line/Disputed admin2", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 8], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#f5f5f5"], + [3, "#fafafa"], + [9, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [1, 0.65], + [14, 1.3], + [17, 2.5] + ] + }, + "line-dasharray": [5, 5] + } + }, + { + "id": "Boundary line/Disputed admin1/1", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "minzoom": 3, + "filter": ["all", ["==", "_symbol", 7], ["!in", "Viz", 2]], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#c6c4b6", + "line-opacity": 0.95, + "line-width": { + "base": 1, + "stops": [ + [4, 0.5], + [14, 7], + [17, 7] + ] } - }, - { - "id": "Road tunnel/4WD/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 10 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#e3e1dc", - "line-dasharray": [ - 2, - 1 - ], - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 1.5 - ], - [ - 14, - 2.3 - ], - [ - 17, - 8.3 - ], - [ - 20, - 49 - ] - ] - } + } + }, + { + "id": "Boundary line/Disputed admin0/1", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": [ + "all", + ["==", "_symbol", 6], + ["!in", "Viz", 2], + ["!in", "DisputeID", 8, 16, 90, 96, 0] + ], + "minzoom": 1, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#c6c4b6", + "line-opacity": 0.95, + "line-width": { + "base": 1, + "stops": [ + [1, 0.5], + [14, 9.3], + [17, 9.3] + ] } - }, - { - "id": "Road tunnel/Minor, ramp or traffic circle/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 6 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#E2DFD6" - ], - [ - 10, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9.9, - 1 - ], - [ - 14, - 4 - ], - [ - 16, - 11.5 - ], - [ - 17, - 19 - ], - [ - 20, - 57 - ] - ] - } + } + }, + { + "id": "Boundary line/Disputed admin1/0", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "minzoom": 3, + "filter": ["all", ["==", "_symbol", 7], ["!in", "Viz", 2]], + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#f5f5f5"], + [3, "#fafafa"], + [9, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [1, 0.65], + [14, 1.3], + [17, 2.5] + ] + }, + "line-dasharray": [5, 5] + } + }, + { + "id": "Boundary line/Disputed admin0/0", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": [ + "all", + ["==", "_symbol", 6], + ["!in", "Viz", 2], + ["!in", "DisputeID", 8, 16, 90, 96, 0] + ], + "minzoom": 1, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#f5f5f5"], + [3, "#fafafa"], + [9, "#ffffff"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [1, 0.65], + [14, 1.3], + [17, 2.5] + ] + }, + "line-dasharray": [5, 5] + } + }, + { + "id": "Boundary line/Admin2/1", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 2], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#ede7e0", + "line-opacity": 0.6, + "line-width": { + "base": 1.2, + "stops": [ + [8, 2.3], + [14, 5.5], + [17, 7.5] + ] } - }, - { - "id": "Road tunnel/Minor/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#E2DFD6" - ], - [ - 10, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 1 - ], - [ - 10, - 3.3 - ], - [ - 14, - 5.5 - ], - [ - 16, - 11.5 - ], - [ - 17, - 19 - ], - [ - 20, - 57 - ] - ] - } + } + }, + { + "id": "Boundary line/Admin1/1", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 3, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [3, "#DEE1CC"], + [10, "#d1ceb8"] + ] + }, + "line-opacity": 0.5, + "line-width": { + "base": 1, + "stops": [ + [3, 0.5], + [14, 9], + [17, 10] + ] } - }, - { - "id": "Road tunnel/Major, ramp or traffic circle/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 3.3 - ], - [ - 14, - 7.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 22 - ], - [ - 20, - 62 - ] - ] - } + } + }, + { + "id": "Boundary line/Admin0/1", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 1, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#d1cfc2", + "line-width": { + "base": 1, + "stops": [ + [1, 0.5], + [14, 11.3], + [17, 12.3] + ] } - }, - { - "id": "Road tunnel/Major/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 8, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 8, - "#dedbd1" - ], - [ - 12, - "#e3e1dc" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1, - "stops": [ - [ - 8, - 3.3 - ], - [ - 14, - 7.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 22 - ], - [ - 20, - 62 - ] - ] - } + } + }, + { + "id": "Boundary line/Admin5", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 5], ["!in", "Viz", 2]], + "minzoom": 16, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#9C9C9C", + "line-width": { + "base": 1.2, + "stops": [ + [14, 1], + [17, 1] + ] + }, + "line-dasharray": [6, 4] + } + }, + { + "id": "Boundary line/Admin4", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 4], ["!in", "Viz", 2]], + "minzoom": 16, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#9C9C9C", + "line-width": { + "base": 1.2, + "stops": [ + [14, 1], + [17, 1] + ] + }, + "line-dasharray": [6, 4] + } + }, + { + "id": "Boundary line/Admin3", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 3], ["!in", "Viz", 2]], + "minzoom": 16, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": "#9C9C9C", + "line-width": { + "base": 1.2, + "stops": [ + [14, 1], + [17, 1] + ] + }, + "line-dasharray": [6, 4] + } + }, + { + "id": "Boundary line/Admin2/0", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 2], ["!in", "Viz", 2]], + "minzoom": 9, + "layout": { + "line-join": "round" + }, + "paint": { + "line-color": "#888577", + "line-dasharray": [7, 5], + "line-width": { + "base": 1.2, + "stops": [ + [8, 0.5], + [14, 1] + ] } - }, - { - "id": "Road tunnel/Pedestrian/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 9 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 15, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#FFFFFF", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 14, - 1.6 - ], - [ - 16, - 2 - ], - [ - 17, - 8 - ], - [ - 20, - 45 - ] - ] - } + } + }, + { + "id": "Boundary line/Admin1/0", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 1], ["!in", "Viz", 2]], + "minzoom": 3, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [3, "#c1bdb5"], + [4, "#9b9382"] + ] + }, + "line-width": { + "base": 1, + "stops": [ + [4, 0.5], + [14, 1.3], + [17, 1.3] + ] } - }, - { - "id": "Road tunnel/4WD/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 10 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#FFFFFF", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.75 - ], - [ - 14, - 1.3 - ], - [ - 17, - 7.3 - ], - [ - 20, - 48 - ] - ] - } + } + }, + { + "id": "Boundary line/Admin0/0", + "type": "line", + "source": "esri", + "source-layer": "Boundary line", + "filter": ["all", ["==", "_symbol", 0], ["!in", "Viz", 2]], + "minzoom": 1, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [1, "#b9b9b9"], + [7, "#434242"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [1, 0.5], + [14, 1.3], + [17, 2] + ] } - }, - { - "id": "Road tunnel/Service/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 8 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 13, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#FFFFFF", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 11, - 0.75 - ], - [ - 14, - 1.3 - ], - [ - 17, - 8.3 - ], - [ - 20, - 48 - ] - ] - } + } + }, + { + "id": "Coastline", + "type": "line", + "source": "esri", + "source-layer": "Coastline", + "maxzoom": 9, + "layout": { + "line-cap": "round", + "line-join": "round" + }, + "paint": { + "line-color": { + "stops": [ + [0, "#53B9EA"], + [7, "#53B9EA"], + [9, "#6BC4F0"] + ] + }, + "line-width": { + "base": 1.2, + "stops": [ + [0, 0.5], + [9, 1.3] + ] } - }, - { - "id": "Road tunnel/Local/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 12, - "#fcfbf9" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.4, - "stops": [ - [ - 11, - 1.1 - ], - [ - 14, - 2 - ], - [ - 16, - 6 - ], - [ - 17, - 14 - ], - [ - 20, - 55 - ] - ] - } + } + }, + { + "id": "Tree/Elm", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 0], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Elm", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Minor, ramp or traffic circle/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 6 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 0.75 - ], - [ - 14, - 2 - ], - [ - 16, - 9.5 - ], - [ - 17, - 17 - ], - [ - 20, - 55 - ] - ] - } + } + }, + { + "id": "Tree/Eucalyptus", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 1], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Eucalyptus", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Minor/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 1.3 - ], - [ - 14, - 4.5 - ], - [ - 16, - 9.5 - ], - [ - 17, - 17 - ], - [ - 20, - 55 - ] - ] - } + } + }, + { + "id": "Tree/Maple", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 2], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Maple", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Major, ramp or traffic circle/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 1.3 - ], - [ - 14, - 5.3 - ], - [ - 16, - 10.3 - ], - [ - 17, - 20 - ], - [ - 20, - 60 - ] - ] - } + } + }, + { + "id": "Tree/Oak", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 3], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Oak", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Major/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 8, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 9, - "#f0efea" - ], - [ - 13, - "#ffffff" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 8, - 1.3 - ], - [ - 14, - 5.3 - ], - [ - 16, - 10.3 - ], - [ - 17, - 20 - ], - [ - 20, - 60 - ] - ] - } + } + }, + { + "id": "Tree/Orange", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 4], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Orange", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Freeway Motorway, ramp or traffic circle/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round", - "line-cap": "round" - }, - "paint": { - "line-color": "#ffffff", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 0.3 - ], - [ - 14, - 8.3 - ], - [ - 16, - 14.3 - ], - [ - 17, - 30 - ], - [ - 20, - 52 - ] - ] - } + } + }, + { + "id": "Tree/Palm", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 5], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Palm", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Highway/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#ffffff", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.3 - ], - [ - 14, - 8.3 - ], - [ - 16, - 14.3 - ], - [ - 17, - 30 - ], - [ - 20, - 52 - ] - ] - } + } + }, + { + "id": "Tree/Pine", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 6], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Pine", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Freeway Motorway/1", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 5, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#ffffff", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 5, - 0.3 - ], - [ - 14, - 8.3 - ], - [ - 16, - 14.3 - ], - [ - 17, - 30 - ], - [ - 20, - 52 - ] - ] - } + } + }, + { + "id": "Tree/Spruce", + "type": "symbol", + "source": "esri", + "source-layer": "Tree", + "filter": ["==", "_symbol", 7], + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Tree/Spruce", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Freeway Motorway, ramp or traffic circle/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round", - "line-cap": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 6, - "#F6CA91" - ], - [ - 8, - "#F6CA91" - ], - [ - 12, - "#F6CA91" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 9, - 0.7 - ], - [ - 14, - 6.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 28 - ], - [ - 20, - 50 - ] - ] - } + } + }, + { + "id": "Shrub", + "type": "symbol", + "source": "esri", + "source-layer": "Shrub", + "minzoom": 16, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "Shrub", + "icon-allow-overlap": true, + "icon-padding": 1, + "icon-size": { + "stops": [ + [16, 0.07], + [17, 0.18], + [18, 0.3], + [20, 1] + ] + } + }, + "paint": { + "icon-opacity": { + "stops": [ + [16, 0.4], + [17, 0.6], + [20, 0.9] + ] } - }, - { - "id": "Road tunnel/Highway/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 6, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 6, - "#F6CA91" - ], - [ - 8, - "#F6CA91" - ], - [ - 12, - "#F6CA91" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 6, - 0.7 - ], - [ - 14, - 6.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 28 - ], - [ - 20, - 50 - ] - ] - } + } + }, + { + "id": "Pavement marking/Arrow", + "type": "symbol", + "source": "esri", + "source-layer": "Pavement marking", + "minzoom": 17, + "filter": ["==", "_symbol", 0], + "layout": { + "icon-rotation-alignment": "map", + "icon-image": "Pavement marking/Arrow", + "icon-size": { + "stops": [ + [17, 0.5], + [22, 1] + ] + }, + "icon-rotate": { + "type": "identity", + "property": "angle", + "default": 0 + }, + "icon-allow-overlap": true + }, + "paint": { + "icon-color": "#B2B2B2" + } + }, + { + "id": "Pavement marking/Handicap", + "type": "symbol", + "source": "esri", + "source-layer": "Pavement marking", + "minzoom": 18, + "filter": ["==", "_symbol", 1], + "layout": { + "icon-rotation-alignment": "map", + "icon-image": "Pavement marking/Handicap", + "icon-size": { + "stops": [ + [18, 0.5], + [20, 1], + [22, 1.25] + ] + }, + "icon-rotate": { + "type": "identity", + "property": "angle", + "default": 0 + }, + "icon-allow-overlap": true + }, + "paint": { + "icon-color": "#296AA3", + "icon-opacity": { + "stops": [ + [18, 0.65], + [20, 1] + ] } - }, - { - "id": "Road tunnel/Freeway Motorway/0", - "type": "line", - "source": "esri", - "source-layer": "Road tunnel", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 5, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#F6CA91", - "line-opacity": 0.5, - "line-width": { - "base": 1.2, - "stops": [ - [ - 5, - 0.7 - ], - [ - 14, - 6.3 - ], - [ - 16, - 12.3 - ], - [ - 17, - 28 - ], - [ - 20, - 50 - ] - ] - } - } - }, - { - "id": "Special area of interest/Gutter", - "type": "fill", - "source": "esri", - "source-layer": "Special area of interest", - "filter": [ - "in", - "_symbol", - 9, - 3 - ], - "minzoom": 14, - "layout": {}, - "paint": { - "fill-color": "#E8E7E5", - "fill-outline-color": "#bcb7ae" - } - }, - { - "id": "Boundary line/Disputed admin2", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 8 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#f5f5f5" - ], - [ - 3, - "#fafafa" - ], - [ - 9, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 1, - 0.65 - ], - [ - 14, - 1.3 - ], - [ - 17, - 2.5 - ] - ] - }, - "line-dasharray": [ - 5, - 5 - ] - } - }, - { - "id": "Boundary line/Disputed admin1/1", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "minzoom": 3, - "filter": [ - "all", - [ - "==", - "_symbol", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#c6c4b6", - "line-opacity": 0.95, - "line-width": { - "base": 1, - "stops": [ - [ - 4, - 0.5 - ], - [ - 14, - 7 - ], - [ - 17, - 7 - ] - ] - } - } - }, - { - "id": "Boundary line/Disputed admin0/1", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 6 - ], - [ - "!in", - "Viz", - 2 - ], - [ - "!in", - "DisputeID", - 8, - 16, - 90, - 96, - 0 - ] - ], - "minzoom": 1, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#c6c4b6", - "line-opacity": 0.95, - "line-width": { - "base": 1, - "stops": [ - [ - 1, - 0.5 - ], - [ - 14, - 9.3 - ], - [ - 17, - 9.3 - ] - ] - } - } - }, - { - "id": "Boundary line/Disputed admin1/0", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "minzoom": 3, - "filter": [ - "all", - [ - "==", - "_symbol", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#f5f5f5" - ], - [ - 3, - "#fafafa" - ], - [ - 9, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 1, - 0.65 - ], - [ - 14, - 1.3 - ], - [ - 17, - 2.5 - ] - ] - }, - "line-dasharray": [ - 5, - 5 - ] - } - }, - { - "id": "Boundary line/Disputed admin0/0", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 6 - ], - [ - "!in", - "Viz", - 2 - ], - [ - "!in", - "DisputeID", - 8, - 16, - 90, - 96, - 0 - ] - ], - "minzoom": 1, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#f5f5f5" - ], - [ - 3, - "#fafafa" - ], - [ - 9, - "#ffffff" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 1, - 0.65 - ], - [ - 14, - 1.3 - ], - [ - 17, - 2.5 - ] - ] - }, - "line-dasharray": [ - 5, - 5 - ] - } - }, - { - "id": "Boundary line/Admin2/1", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#ede7e0", - "line-opacity": 0.6, - "line-width": { - "base": 1.2, - "stops": [ - [ - 8, - 2.3 - ], - [ - 14, - 5.5 - ], - [ - 17, - 7.5 - ] - ] - } - } - }, - { - "id": "Boundary line/Admin1/1", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 3, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 3, - "#DEE1CC" - ], - [ - 10, - "#d1ceb8" - ] - ] - }, - "line-opacity": 0.5, - "line-width": { - "base": 1, - "stops": [ - [ - 3, - 0.5 - ], - [ - 14, - 9 - ], - [ - 17, - 10 - ] - ] - } - } - }, - { - "id": "Boundary line/Admin0/1", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 1, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#d1cfc2", - "line-width": { - "base": 1, - "stops": [ - [ - 1, - 0.5 - ], - [ - 14, - 11.3 - ], - [ - 17, - 12.3 - ] - ] - } - } - }, - { - "id": "Boundary line/Admin5", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 16, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#9C9C9C", - "line-width": { - "base": 1.2, - "stops": [ - [ - 14, - 1 - ], - [ - 17, - 1 - ] - ] - }, - "line-dasharray": [ - 6, - 4 - ] - } - }, - { - "id": "Boundary line/Admin4", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 16, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#9C9C9C", - "line-width": { - "base": 1.2, - "stops": [ - [ - 14, - 1 - ], - [ - 17, - 1 - ] - ] - }, - "line-dasharray": [ - 6, - 4 - ] - } - }, - { - "id": "Boundary line/Admin3", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 16, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": "#9C9C9C", - "line-width": { - "base": 1.2, - "stops": [ - [ - 14, - 1 - ], - [ - 17, - 1 - ] - ] - }, - "line-dasharray": [ - 6, - 4 - ] - } - }, - { - "id": "Boundary line/Admin2/0", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 9, - "layout": { - "line-join": "round" - }, - "paint": { - "line-color": "#888577", - "line-dasharray": [ - 7, - 5 - ], - "line-width": { - "base": 1.2, - "stops": [ - [ - 8, - 0.5 - ], - [ - 14, - 1 - ] - ] - } - } - }, - { - "id": "Boundary line/Admin1/0", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 3, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 3, - "#c1bdb5" - ], - [ - 4, - "#9b9382" - ] - ] - }, - "line-width": { - "base": 1, - "stops": [ - [ - 4, - 0.5 - ], - [ - 14, - 1.3 - ], - [ - 17, - 1.3 - ] - ] - } - } - }, - { - "id": "Boundary line/Admin0/0", - "type": "line", - "source": "esri", - "source-layer": "Boundary line", - "filter": [ - "all", - [ - "==", - "_symbol", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 1, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 1, - "#b9b9b9" - ], - [ - 7, - "#434242" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 1, - 0.5 - ], - [ - 14, - 1.3 - ], - [ - 17, - 2 - ] - ] - } - } - }, - { - "id": "Coastline", - "type": "line", - "source": "esri", - "source-layer": "Coastline", - "maxzoom": 9, - "layout": { - "line-cap": "round", - "line-join": "round" - }, - "paint": { - "line-color": { - "stops": [ - [ - 0, - "#53B9EA" - ], - [ - 7, - "#53B9EA" - ], - [ - 9, - "#6BC4F0" - ] - ] - }, - "line-width": { - "base": 1.2, - "stops": [ - [ - 0, - 0.5 - ], - [ - 9, - 1.3 - ] - ] - } - } - }, - { - "id": "Tree/Elm", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Elm", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Eucalyptus", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Eucalyptus", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Maple", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Maple", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Oak", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Oak", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Orange", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Orange", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Palm", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 5 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Palm", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Pine", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 6 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Pine", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Tree/Spruce", - "type": "symbol", - "source": "esri", - "source-layer": "Tree", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Tree/Spruce", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Shrub", - "type": "symbol", - "source": "esri", - "source-layer": "Shrub", - "minzoom": 16, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "Shrub", - "icon-allow-overlap": true, - "icon-padding": 1, - "icon-size": { - "stops": [ - [ - 16, - 0.07 - ], - [ - 17, - 0.18 - ], - [ - 18, - 0.3 - ], - [ - 20, - 1 - ] - ] - } - }, - "paint": { - "icon-opacity": { - "stops": [ - [ - 16, - 0.4 - ], - [ - 17, - 0.6 - ], - [ - 20, - 0.9 - ] - ] - } - } - }, - { - "id": "Pavement marking/Arrow", - "type": "symbol", - "source": "esri", - "source-layer": "Pavement marking", - "minzoom": 17, - "filter": [ - "==", - "_symbol", - 0 - ], - "layout": { - "icon-rotation-alignment": "map", - "icon-image": "Pavement marking/Arrow", - "icon-size": { - "stops": [ - [ - 17, - 0.5 - ], - [ - 22, - 1 - ] - ] - }, - "icon-rotate": { - "type": "identity", - "property": "angle", - "default": 0 - }, - "icon-allow-overlap": true - }, - "paint": { - "icon-color": "#B2B2B2" - } - }, - { - "id": "Pavement marking/Handicap", - "type": "symbol", - "source": "esri", - "source-layer": "Pavement marking", - "minzoom": 18, - "filter": [ - "==", - "_symbol", - 1 - ], - "layout": { - "icon-rotation-alignment": "map", - "icon-image": "Pavement marking/Handicap", - "icon-size": { - "stops": [ - [ - 18, - 0.5 - ], - [ - 20, - 1 - ], - [ - 22, - 1.25 - ] - ] - }, - "icon-rotate": { - "type": "identity", - "property": "angle", - "default": 0 - }, - "icon-allow-overlap": true - }, - "paint": { - "icon-color": "#296AA3", - "icon-opacity": { - "stops": [ - [ - 18, - 0.65 - ], - [ - 20, - 1 - ] - ] - } - } - }, - { - "id": "Pavement marking/Left turn", - "type": "symbol", - "source": "esri", - "source-layer": "Pavement marking", - "minzoom": 17, - "filter": [ - "==", - "_symbol", - 2 - ], - "layout": { - "icon-rotation-alignment": "map", - "icon-image": "Pavement marking/Left turn", - "icon-size": { - "stops": [ - [ - 17, - 0.5 - ], - [ - 22, - 1 - ] - ] - }, - "icon-rotate": { - "type": "identity", - "property": "angle", - "default": 0 - }, - "icon-allow-overlap": true - }, - "paint": { - "icon-color": "#B2B2B2" - } - }, - { - "id": "Pavement marking/Right turn", - "type": "symbol", - "source": "esri", - "source-layer": "Pavement marking", - "minzoom": 17, - "filter": [ - "==", - "_symbol", - 3 - ], - "layout": { - "icon-rotation-alignment": "map", - "icon-image": "Pavement marking/Right turn", - "icon-size": { - "stops": [ - [ - 17, - 0.5 - ], - [ - 22, - 1 - ] - ] - }, - "icon-rotate": { - "type": "identity", - "property": "angle", - "default": 0 - }, - "icon-allow-overlap": true - }, - "paint": { - "icon-color": "#B2B2B2" - } - }, - { - "id": "Pavement marking/Two-way left turn", - "type": "symbol", - "source": "esri", - "source-layer": "Pavement marking", - "minzoom": 17, - "filter": [ - "==", - "_symbol", - 4 - ], - "layout": { - "icon-rotation-alignment": "map", - "icon-image": "Pavement marking/Two-way left turn", - "icon-size": { - "stops": [ - [ - 17, - 0.5 - ], - [ - 22, - 1 - ] - ] - }, - "icon-rotate": { - "type": "identity", - "property": "angle", - "default": 0 - }, - "icon-allow-overlap": true - }, - "paint": { - "icon-color": "#B2B2B2" - } - }, - { - "id": "Pavement marking/U-turn", - "type": "symbol", - "source": "esri", - "source-layer": "Pavement marking", - "minzoom": 17, - "filter": [ - "==", - "_symbol", - 5 - ], - "layout": { - "icon-rotation-alignment": "map", - "icon-image": "Pavement marking/U-turn", - "icon-size": { - "stops": [ - [ - 17, - 0.5 - ], - [ - 22, - 1 - ] - ] - }, - "icon-rotate": { - "type": "identity", - "property": "angle", - "default": 0 - }, - "icon-allow-overlap": true - }, - "paint": { - "icon-color": "#B2B2B2" - } - }, - { - "id": "Water point/Sea or ocean", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 15.5 - ] - ] - }, - "text-letter-spacing": 0.3, - "text-line-height": 1.6, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Water point/Island", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 7 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#595959", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1 - } - }, - { - "id": "Water point/Dam or weir", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 5 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#171310", - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.7, - "text-halo-blur": 1 - } - }, - { - "id": "Water point/Playa", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 6 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#171310", - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.7, - "text-halo-blur": 1 - } - }, - { - "id": "Water point/Canal or ditch", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 4 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.13, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1 - } - }, - { - "id": "Water point/Stream or river", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 3 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water point/Lake or reservoir", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 2 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#FFFFFF", - "text-halo-width": 0.5 - } - }, - { - "id": "Water point/Bay or inlet", - "type": "symbol", - "source": "esri", - "source-layer": "Water point", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Ferry/label/Ferry", - "type": "symbol", - "source": "esri", - "source-layer": "Ferry/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 10, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 30 - }, - "paint": { - "text-color": "#ffffff", - "text-halo-width": 1.2, - "text-halo-color": "#6BC4F0", - "text-halo-blur": 1 - } - }, - { - "id": "Water line/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water line/label", - "minzoom": 11, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.5, - "text-letter-spacing": 0.07, - "text-max-width": 8, - "text-max-angle": 35, - "text-field": "{_name_global}", - "text-padding": 1, - "text-offset": [ - 0, - -0.5 - ], - "symbol-spacing": 800 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water line large scale/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water line large scale/label", - "minzoom": 7, - "maxzoom": 11, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.3, - "text-letter-spacing": 0.01, - "text-max-width": 8, - "text-max-angle": { - "stops": [ - [ - 7, - 25 - ], - [ - 11, - 35 - ] - ] - }, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0, - -0.5 - ], - "symbol-spacing": 800 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water line medium scale/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water line medium scale/label", - "minzoom": 5, - "maxzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.3, - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-max-angle": { - "stops": [ - [ - 5, - 15 - ], - [ - 6, - 25 - ] - ] - }, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0, - -0.5 - ], - "symbol-spacing": 800 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water line small scale/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water line small scale/label", - "minzoom": 4, - "maxzoom": 5, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 8.5, - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-max-angle": 18, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0, - -0.5 - ], - "symbol-spacing": 800 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Marine park/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Marine park/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#3a7795" - } - }, - { - "id": "Water area/label/Dam or weir", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 8 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.5, - "text-letter-spacing": 0.08, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#171310", - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5, - "text-halo-blur": 1 - } - }, - { - "id": "Water area/label/Playa", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 9 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.5, - "text-letter-spacing": 0.08, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#171310", - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5, - "text-halo-blur": 1 - } - }, - { - "id": "Water area/label/Canal or ditch", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 2 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "symbol-placement": "line", - "symbol-spacing": 1000, - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-max-width": 5 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area/label/Small river", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 7 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "symbol-placement": "line", - "symbol-spacing": 1000, - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-max-width": 8 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area/label/Large river", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 4 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "symbol-placement": "line", - "symbol-spacing": 1000, - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-max-width": 8 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area/label/Small lake or reservoir", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 6 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-line-height": 1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area/label/Large lake or reservoir", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 3 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-line-height": 1.5, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area/label/Bay or inlet", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-line-height": 1.5, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area/label/Small island", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 11, - "layout": { - "text-size": 10.5, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ] - }, - "paint": { - "text-color": "#595959", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1 - } - }, - { - "id": "Water area/label/Large island", - "type": "symbol", - "source": "esri", - "source-layer": "Water area/label", - "filter": [ - "==", - "_label_class", - 5 - ], - "minzoom": 11, - "layout": { - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-line-height": 1.5, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ] - }, - "paint": { - "text-color": "#595959", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1 - } - }, - { - "id": "Water area large scale/label/River", - "type": "symbol", - "source": "esri", - "source-layer": "Water area large scale/label", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 7, - "maxzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "symbol-placement": "line", - "symbol-spacing": 1000, - "text-size": 9.3, - "text-letter-spacing": 0.1, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-max-width": 4 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area large scale/label/Lake or lake intermittent", - "type": "symbol", - "source": "esri", - "source-layer": "Water area large scale/label", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 7, - "maxzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.3, - "text-letter-spacing": 0.1, - "text-max-width": 4, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area medium scale/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water area medium scale/label", - "minzoom": 5, - "maxzoom": 7, - "layout": { - "text-max-width": 4, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-letter-spacing": 0.08, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.3 - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Water area small scale/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water area small scale/label", - "minzoom": 1, - "maxzoom": 5, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.3, - "text-letter-spacing": 0.08, - "text-max-width": 4, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.5 - } - }, - { - "id": "Marine area/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Marine area/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 10.5, - "text-letter-spacing": 0.13, - "text-line-height": 1.5, - "text-max-width": 4, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 1 - } - }, - { - "id": "Marine waterbody/label/small", - "type": "symbol", - "source": "esri", - "source-layer": "Marine waterbody/label", - "filter": [ - "==", - "_label_class", - 4 - ], - "minzoom": 1, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-letter-spacing": { - "stops": [ - [ - 1, - 0.12 - ], - [ - 10, - 0.25 - ] - ] - }, - "text-line-height": 1.5, - "text-max-width": 6, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 1, - 8 - ], - [ - 6, - 9.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 1, - "#0d6c9a" - ], - [ - 6, - "#0d6c9a" - ] - ] - }, - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 0.5 - } - }, - { - "id": "Marine waterbody/label/medium", - "type": "symbol", - "source": "esri", - "source-layer": "Marine waterbody/label", - "filter": [ - "==", - "_label_class", - 3 - ], - "minzoom": 1, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-letter-spacing": { - "stops": [ - [ - 1, - 0.15 - ], - [ - 10, - 0.3 - ] - ] - }, - "text-line-height": 1.5, - "text-max-width": 6, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 1, - 8 - ], - [ - 6, - 9.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 1, - "#0d6c9a" - ], - [ - 6, - "#0d6c9a" - ] - ] - }, - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 0.5 - } - }, - { - "id": "Marine waterbody/label/large", - "type": "symbol", - "source": "esri", - "source-layer": "Marine waterbody/label", - "filter": [ - "==", - "_label_class", - 2 - ], - "minzoom": 1, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-letter-spacing": { - "stops": [ - [ - 1, - 0.18 - ], - [ - 10, - 0.4 - ] - ] - }, - "text-line-height": 1.5, - "text-max-width": 6, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 1, - 8 - ], - [ - 6, - 10 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 1, - "#0d6c9a" - ], - [ - 6, - "#0d6c9a" - ] - ] - }, - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 0.5 - } - }, - { - "id": "Marine waterbody/label/x large", - "type": "symbol", - "source": "esri", - "source-layer": "Marine waterbody/label", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 1, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-letter-spacing": { - "stops": [ - [ - 1, - 0.2 - ], - [ - 10, - 1.5 - ] - ] - }, - "text-line-height": 1.5, - "text-max-width": 6, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 1, - 8 - ], - [ - 6, - 11 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 1, - "#0d6c9a" - ], - [ - 6, - "#0d6c9a" - ] - ] - }, - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 0.5 - } - }, - { - "id": "Marine waterbody/label/2x large", - "type": "symbol", - "source": "esri", - "source-layer": "Marine waterbody/label", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 1, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-letter-spacing": { - "stops": [ - [ - 1, - 0.3 - ], - [ - 10, - 2 - ] - ] - }, - "text-line-height": 1.6, - "text-max-width": 6, - "text-field": "{_name}", - "text-padding": 15, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 1, - 10 - ], - [ - 4, - 18 - ] - ] - } - }, - "paint": { - "text-color": "#0d6c9a", - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 0.5 - } - }, - { - "id": "Ferry/label/Rail ferry", - "type": "symbol", - "source": "esri", - "source-layer": "Ferry/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9, - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 5, - "text-offset": [ - 0, - -0.6 - ], - "symbol-spacing": 1000 - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Railroad/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Railroad/label", - "minzoom": 14, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9, - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 5, - "text-offset": [ - 0, - -0.6 - ], - "symbol-spacing": 1000 - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1 - } - }, - { - "id": "Trail or path/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Trail or path/label", - "minzoom": 15, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 9.3, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 5 - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road tunnel/label/Pedestrian", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 6 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 15, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 5 - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Local, service, 4WD", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.5, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 12, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Minor", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 12.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Major, alt name", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 12.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4e4e4e", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Major", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 12.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Highway", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 14.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Freeway Motorway, alt name", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 14.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road tunnel/label/Freeway Motorway", - "type": "symbol", - "source": "esri", - "source-layer": "Road tunnel/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 14.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Road/label/Local", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 5 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 12, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 11.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 12, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Minor", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 4 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 12.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Major, alt name", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 3 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 12.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Major", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 2 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 12.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Highway", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 75 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 14.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Freeway Motorway, alt name", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 1 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 14.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Freeway Motorway", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 0 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 10, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 10, - 9.5 - ], - [ - 14, - 10.5 - ], - [ - 18, - 14.5 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": { - "stops": [ - [ - 10, - 5 - ], - [ - 15, - 5 - ], - [ - 16, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#4E4E4E", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Road/label/Rectangle white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 32 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 31 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Secondary Hwy red white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 16 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Secondary Hwy red white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Secondary Hwy red white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 15 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Secondary Hwy red white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/U-shaped yellow black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 24 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped yellow black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped yellow black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 23 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped yellow black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped red white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 26 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped red white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/U-shaped red white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 25 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped red white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/U-shaped blue white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 28 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped blue white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/U-shaped blue white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 27 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped blue white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/V-shaped white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 30 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/V-shaped white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/V-shaped white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 29 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/V-shaped white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 18 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 17 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped white green (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 20 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped white green (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped white green", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 19 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped white green/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped green leaf (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 22 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped green leaf (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/U-shaped green leaf", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 21 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/U-shaped green leaf/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle yellow black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 38 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle yellow black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle yellow black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 37 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle yellow black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle red white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 36 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle red white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Rectangle red white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 35 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle red white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Rectangle blue white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 34 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle blue white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Rectangle blue white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 33 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle blue white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Rectangle green white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 40 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle green white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Rectangle green white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 39 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle green white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Rectangle green yellow (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 42 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle green yellow (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#f1dfb7" - } - }, - { - "id": "Road/label/Rectangle green yellow", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 41 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle green yellow/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#f1dfb7" - } - }, - { - "id": "Road/label/Pentagon inverse white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 44 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon inverse white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Pentagon inverse white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 43 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon inverse white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Pentagon white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 46 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Pentagon white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 45 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Pentagon yellow black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 50 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon yellow black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Pentagon yellow black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 49 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon yellow black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Pentagon green white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 51 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon green white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Pentagon green white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 52 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon green white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Pentagon green yellow", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 53 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon green yellow/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#f1dfb7" - } - }, - { - "id": "Road/label/Pentagon green yellow (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 54 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon green yellow (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#f1dfb7" - } - }, - { - "id": "Road/label/Pentagon blue white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 48 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon blue white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Pentagon blue white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 47 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Pentagon blue white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 56 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Hexagon white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 55 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Hexagon blue white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 57 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon blue white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon blue white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 58 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon blue white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon red white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 59 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon red white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon red white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 60 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon red white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon green white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 62 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon green white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon green white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 61 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon green white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Hexagon orange black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 63 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon orange black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Hexagon orange black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 64 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Hexagon orange black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon blue white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 66 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon blue white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon blue white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 65 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon blue white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon red white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 68 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon red white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon red white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 67 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon red white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon green white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 70 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon green white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon green white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 69 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon green white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon brown white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 72 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon brown white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Rectangle hexagon brown white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 71 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Rectangle hexagon brown white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Octagon green white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 74 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Octagon green white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Octagon green white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 73 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Octagon green white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Shield white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 10 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Shield white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Shield white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 9 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Shield white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Secondary Hwy green white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 14 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Secondary Hwy green white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Secondary Hwy green white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 13 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 9.3, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Secondary Hwy green white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Secondary Hwy white black (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 12 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Secondary Hwy white black (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Secondary Hwy white black", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 11 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Secondary Hwy white black/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": {} - }, - { - "id": "Road/label/Shield blue white (Alt)", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 8 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Shield blue white (Alt)/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Shield blue white", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 7 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 7, - "layout": { - "symbol-placement": "line", - "symbol-spacing": 400, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": 8.5, - "text-max-width": 8, - "text-field": "{_name}", - "icon-image": "Road/Shield blue white/{_len}", - "icon-rotation-alignment": "viewport", - "text-rotation-alignment": "viewport", - "text-padding": { - "stops": [ - [ - 7, - 50 - ], - [ - 10, - 50 - ], - [ - 11, - 15 - ] - ] - } - }, - "paint": { - "text-color": "#ffffff" - } - }, - { - "id": "Road/label/Pedestrian", - "type": "symbol", - "source": "esri", - "source-layer": "Road/label", - "filter": [ - "all", - [ - "==", - "_label_class", - 6 - ], - [ - "!in", - "Viz", - 2 - ] - ], - "minzoom": 15, - "layout": { - "symbol-placement": "line", - "symbol-avoid-edges": true, - "symbol-spacing": 400, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 9.3, - "text-letter-spacing": 0.05, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 5 - }, - "paint": { - "text-color": "#595959", - "text-halo-color": "#FFFFFF", - "text-halo-width": 1 - } - }, - { - "id": "Building/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Building/label", - "minzoom": 15, - "layout": { - "visibility": "none", - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#5a3514", - "text-halo-color": "#EBE7E2", - "text-halo-width": 0.7, - "text-halo-blur": 1 - } - }, - { - "id": "Cemetery/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Cemetery/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#2d4e28", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Freight/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Freight/label", - "minzoom": 12, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#4a2b1b", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Water and wastewater/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Water and wastewater/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#4a2b1b", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Port/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Port/label", - "minzoom": 12, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#4a2b1b", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Industry/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Industry/label", - "minzoom": 12, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#4a2b1b", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Government/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Government/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#4a2b1b", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Finance/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Finance/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#9d5a48", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Emergency/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Emergency/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#33302f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Indigenous/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Indigenous/label", - "minzoom": 7, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 9.5 - ], - [ - 20, - 12.5 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#533d32", - "text-halo-color": "#e8e6d6", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Military/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Military/label", - "minzoom": 6, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 9.5 - ], - [ - 20, - 12.5 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 25, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#242221", - "text-halo-color": "#E0E0D9", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Transportation/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Transportation/label", - "minzoom": 13, - "layout": { - "visibility": "none", - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#242221", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Pedestrian/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Pedestrian/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#242221", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Beach/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Beach/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": 0.08, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#806b3c", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Golf course/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Golf course/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#2d4e28", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Zoo/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Zoo/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#2d4e28", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Retail/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Retail/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#9d5a48", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Landmark/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Landmark/label", - "minzoom": 13, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#446757", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Openspace or forest/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Openspace or forest/label", - "minzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 25 - }, - "paint": { - "text-color": "#006200", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Park or farming/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Park or farming/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 25 - }, - "paint": { - "text-color": "#006200", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Point of interest/Park", - "type": "symbol", - "source": "esri", - "source-layer": "Point of interest", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": "#006200", - "text-halo-width": 1, - "text-halo-color": "#EBE7E2", - "text-halo-blur": 1 - } - }, - { - "id": "Education/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Education/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#505000", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Medical/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Medical/label", - "minzoom": 11, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#3d5d69", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 forest or park/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 forest or park/label", - "minzoom": 7, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 9.5 - ], - [ - 20, - 12.5 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 25 - }, - "paint": { - "text-color": "#006200", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 forest or park/label/Default", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 forest or park/label", - "minzoom": 6, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 9.5 - ], - [ - 20, - 12.5 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 25, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#006200", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Airport/label/Airport property", - "type": "symbol", - "source": "esri", - "source-layer": "Airport/label", - "minzoom": 9, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 9, - 8.5 - ], - [ - 15, - 9.5 - ], - [ - 20, - 12.5 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15, - "symbol-avoid-edges": true - }, - "paint": { - "text-color": "#5f5e5c", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin2 area/label/small", - "type": "symbol", - "source": "esri", - "source-layer": "Admin2 area/label", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 9, - "maxzoom": 11, - "layout": { - "text-letter-spacing": 0.2, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 11, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-transform": "uppercase" - }, - "paint": { - "text-color": "#80755f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin2 area/label/large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin2 area/label", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 9, - "maxzoom": 11, - "layout": { - "text-letter-spacing": 0.2, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": 13, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-transform": "uppercase" - }, - "paint": { - "text-color": "#80755f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 area/label/x small", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 area/label", - "filter": [ - "==", - "_label_class", - 5 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-transform": "uppercase", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 4, - 8.5 - ], - [ - 5, - 9.5 - ], - [ - 6, - 10.3 - ], - [ - 9, - 11 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.1 - ], - [ - 8, - 0.2 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 4, - "#554434" - ], - [ - 6, - "#39240e" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 area/label/small", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 area/label", - "filter": [ - "==", - "_label_class", - 4 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-transform": "uppercase", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 4, - 8.5 - ], - [ - 5, - 9.5 - ], - [ - 6, - 10.5 - ], - [ - 9, - 11.5 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.1 - ], - [ - 8, - 0.2 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 4, - "#554434" - ], - [ - 6, - "#39240e" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 area/label/medium", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 area/label", - "filter": [ - "==", - "_label_class", - 3 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-transform": "uppercase", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 4, - 9.5 - ], - [ - 5, - 10.5 - ], - [ - 6, - 11.3 - ], - [ - 9, - 12 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.15 - ], - [ - 8, - 0.4 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 4, - "#554434" - ], - [ - 6, - "#39240e" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 area/label/large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 area/label", - "filter": [ - "==", - "_label_class", - 2 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-transform": "uppercase", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 4, - 9.5 - ], - [ - 5, - 11.3 - ], - [ - 6, - 13 - ], - [ - 9, - 17 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.1 - ], - [ - 8, - 0.5 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 4, - "#554434" - ], - [ - 6, - "#39240e" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 area/label/x large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 area/label", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-transform": "uppercase", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 4, - 10.3 - ], - [ - 5, - 12 - ], - [ - 6, - 13.5 - ], - [ - 9, - 19 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.15 - ], - [ - 8, - 0.6 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 4, - "#554434" - ], - [ - 6, - "#39240e" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin1 area/label/2x large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin1 area/label", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Montserrat SemiBold" - ], - "text-transform": "uppercase", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-size": { - "stops": [ - [ - 4, - 11.5 - ], - [ - 5, - 12.3 - ], - [ - 6, - 14 - ], - [ - 9, - 19 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.15 - ], - [ - 8, - 0.75 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 4, - "#554434" - ], - [ - 6, - "#39240e" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Point of interest/General", - "type": "symbol", - "source": "esri", - "source-layer": "Point of interest", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 9, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": { - "stops": [ - [ - 9, - "#5a3514" - ], - [ - 11, - "#5a3514" - ] - ] - }, - "text-halo-width": 1, - "text-halo-color": "#EBE7E2", - "text-halo-blur": 1 - } - }, - { - "id": "Point of interest/Bus station", - "type": "symbol", - "source": "esri", - "source-layer": "Point of interest", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 12, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": { - "stops": [ - [ - 9, - "#5a3514" - ], - [ - 11, - "#5a3514" - ] - ] - }, - "text-halo-width": 1, - "text-halo-color": "#EBE7E2", - "text-halo-blur": 1 - } - }, - { - "id": "Point of interest/Rail station", - "type": "symbol", - "source": "esri", - "source-layer": "Point of interest", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 12, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 15, - 9.5 - ], - [ - 20, - 11 - ], - [ - 22, - 15 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 15, - 0.05 - ], - [ - 20, - 0.15 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-color": { - "stops": [ - [ - 9, - "#5a3514" - ], - [ - 11, - "#5a3514" - ] - ] - }, - "text-halo-width": 1, - "text-halo-color": "#EBE7E2", - "text-halo-blur": 1 - } - }, - { - "id": "Neighborhood", - "type": "symbol", - "source": "esri", - "source-layer": "Neighborhood", - "minzoom": 14, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 10 - ], - [ - 16, - 14 - ] - ] - }, - "text-letter-spacing": 0.08, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 1 - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City large scale/town small", - "type": "symbol", - "source": "esri", - "source-layer": "City large scale", - "filter": [ - "==", - "_label_class", - 5 - ], - "minzoom": 10, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 11 - ], - [ - 16, - 15 - ] - ] - }, - "text-letter-spacing": 0.08, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 15 - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City large scale/town large", - "type": "symbol", - "source": "esri", - "source-layer": "City large scale", - "filter": [ - "==", - "_label_class", - 4 - ], - "minzoom": 10, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": { - "stops": [ - [ - 10, - 11 - ], - [ - 16, - 17 - ] - ] - }, - "text-letter-spacing": 0.09, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 1 - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City large scale/small", - "type": "symbol", - "source": "esri", - "source-layer": "City large scale", - "filter": [ - "==", - "_label_class", - 3 - ], - "minzoom": 10, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 1, - "text-size": { - "stops": [ - [ - 10, - 12 - ], - [ - 16, - 18 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City large scale/medium", - "type": "symbol", - "source": "esri", - "source-layer": "City large scale", - "filter": [ - "==", - "_label_class", - 2 - ], - "minzoom": 10, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 1, - "text-size": { - "stops": [ - [ - 10, - 13 - ], - [ - 16, - 20 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City large scale/large", - "type": "symbol", - "source": "esri", - "source-layer": "City large scale", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 10, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 1, - "text-size": { - "stops": [ - [ - 10, - 14 - ], - [ - 16, - 26 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City large scale/x large", - "type": "symbol", - "source": "esri", - "source-layer": "City large scale", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 10, - "maxzoom": 17, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Montserrat SemiBold" - ], - "text-letter-spacing": 0.1, - "text-max-width": 8, - "text-field": "{_name_global}", - "text-padding": 1, - "text-size": { - "stops": [ - [ - 10, - 14.5 - ], - [ - 16, - 31 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/town small non capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 17 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 11, - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left" - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/town large non capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 15 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 11, - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left" - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/small non capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 12 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 11.5, - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left" - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/medium non capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 9 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 12.3 - ], - [ - 8, - 13 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/other capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 18 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 11.5, - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left" - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/town large other capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 14 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 11.5, - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left" - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/small other capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 11 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-size": 11.5, - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left" - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/medium other capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 8 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 12.3 - ], - [ - 8, - 13 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 point/x small", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 point", - "filter": [ - "==", - "_label_class", - 5 - ], - "minzoom": 5, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-letter-spacing": { - "stops": [ - [ - 5, - 0.13 - ], - [ - 8, - 0.5 - ] - ] - }, - "text-size": { - "stops": [ - [ - 5, - 13 - ], - [ - 10, - 18 - ] - ] - } - }, - "paint": { - "text-color": "#0f010f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 point/small", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 point", - "filter": [ - "==", - "_label_class", - 4 - ], - "minzoom": 4, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-letter-spacing": { - "stops": [ - [ - 4, - 0.13 - ], - [ - 8, - 0.5 - ] - ] - }, - "text-size": { - "stops": [ - [ - 4, - 13 - ], - [ - 10, - 18 - ] - ] - } - }, - "paint": { - "text-color": "#0f010f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 point/medium", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 point", - "filter": [ - "==", - "_label_class", - 3 - ], - "minzoom": 2, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-letter-spacing": { - "stops": [ - [ - 2, - 0.13 - ], - [ - 8, - 0.5 - ] - ] - }, - "text-size": { - "stops": [ - [ - 2, - 10 - ], - [ - 4, - 14 - ], - [ - 10, - 22 - ] - ] - } - }, - "paint": { - "text-color": "#0f010f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 point/large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 point", - "filter": [ - "==", - "_label_class", - 2 - ], - "minzoom": 2, - "maxzoom": 10, - "layout": { - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-letter-spacing": { - "stops": [ - [ - 2, - 0.13 - ], - [ - 8, - 0.5 - ] - ] - }, - "text-size": { - "stops": [ - [ - 2, - 11 - ], - [ - 4, - 14 - ], - [ - 6, - 22 - ] - ] - } - }, - "paint": { - "text-color": "#0f010f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 point/x large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 point", - "filter": [ - "==", - "_label_class", - 1 - ], - "minzoom": 2, - "maxzoom": 8, - "layout": { - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-line-height": 1.5, - "text-letter-spacing": { - "stops": [ - [ - 2, - 0.15 - ], - [ - 6, - 0.5 - ] - ] - }, - "text-size": { - "stops": [ - [ - 2, - 11.5 - ], - [ - 4, - 15 - ], - [ - 6, - 23 - ] - ] - } - }, - "paint": { - "text-color": "#0f010f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/town small admin0 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 16 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/town large admin0 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 13 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/small admin0 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 10 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/medium admin0 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 7 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-color": "#343434", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/large other capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 5 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 12.3 - ], - [ - 8, - 13 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#343434" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/x large admin2 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 2 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#343434" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/large non capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 6 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 12.3 - ], - [ - 8, - 13 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#343434" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/large admin0 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 4 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#2d2d2d" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/x large non capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 3 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#343434" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/x large admin1 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 1 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#343434" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "City small scale/x large admin0 capital", - "type": "symbol", - "source": "esri", - "source-layer": "City small scale", - "filter": [ - "==", - "_symbol", - 0 - ], - "minzoom": 3, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "icon-image": "City small scale", - "icon-padding": 1, - "text-font": [ - "Montserrat SemiBold" - ], - "text-anchor": "bottom-left", - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "text-offset": [ - 0.2, - 0.1 - ], - "text-justify": "left", - "text-size": { - "stops": [ - [ - 4, - 12.3 - ], - [ - 6, - 13.5 - ], - [ - 8, - 14.3 - ] - ] - } - }, - "paint": { - "text-color": { - "stops": [ - [ - 2, - "#2d2d2d" - ], - [ - 3, - "#000000" - ] - ] - }, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Admin0 point/2x large", - "type": "symbol", - "source": "esri", - "source-layer": "Admin0 point", - "filter": [ - "==", - "_label_class", - 0 - ], - "minzoom": 2, - "maxzoom": 6, - "layout": { - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1, - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-line-height": 1.7, - "text-letter-spacing": { - "stops": [ - [ - 2, - 0.3 - ], - [ - 5, - 0.5 - ] - ] - }, - "text-size": { - "stops": [ - [ - 2, - 14 - ], - [ - 4, - 22.5 - ], - [ - 5, - 28 - ] - ] - } - }, - "paint": { - "text-color": "#0f010f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Continent", - "type": "symbol", - "source": "esri", - "source-layer": "Continent", - "maxzoom": 2, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 0, - 8.3 - ], - [ - 1, - 10.3 - ] - ] - }, - "text-letter-spacing": 0.35, - "text-max-width": 8, - "text-line-height": 1.75, - "text-field": "{_name_global}", - "text-padding": 1, - "text-transform": "uppercase" - }, - "paint": { - "text-color": "#363636", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "Disputed label point/Island", - "type": "symbol", - "source": "esri", - "source-layer": "Disputed label point", - "filter": [ - "all", - [ - "==", - "_label_class", - 1 - ], - [ - "in", - "DisputeID", - 0 - ] - ], - "minzoom": 6, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 6, - 7 - ], - [ - 15, - 10 - ] - ] - }, - "text-letter-spacing": 0.13, - "text-line-height": 1.5, - "text-max-width": 4, - "text-field": "{_name}", - "text-padding": 1 - }, - "paint": { - "text-color": "#595959", - "text-halo-blur": 1, - "text-halo-color": "#EBE7E2", - "text-halo-width": 1 - } - }, - { - "id": "Disputed label point/Waterbody", - "type": "symbol", - "source": "esri", - "source-layer": "Disputed label point", - "filter": [ - "all", - [ - "==", - "_label_class", - 0 - ], - [ - "in", - "DisputeID", - 1006 - ] - ], - "minzoom": 2, - "maxzoom": 10, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Demi Italic" - ], - "text-size": { - "stops": [ - [ - 2, - 8 - ], - [ - 6, - 9.3 - ] - ] - }, - "text-letter-spacing": 0.1, - "text-max-width": 6, - "text-field": "{_name}", - "text-padding": 1 - }, - "paint": { - "text-color": { - "stops": [ - [ - 1, - "#0d6c9a" - ], - [ - 6, - "#0d6c9a" - ] - ] - }, - "text-halo-blur": 1, - "text-halo-color": "#82CFF5", - "text-halo-width": 0.5 - } - }, - { - "id": "Disputed label point/Admin0", - "type": "symbol", - "source": "esri", - "source-layer": "Disputed label point", - "filter": [ - "all", - [ - "==", - "_label_class", - 2 - ], - [ - "in", - "DisputeID", - 1021 - ] - ], - "minzoom": 2, - "layout": { - "symbol-avoid-edges": true, - "text-font": [ - "Avenir Next LT Pro Bold" - ], - "text-size": { - "stops": [ - [ - 2, - 10 - ], - [ - 4, - 14 - ], - [ - 10, - 22 - ] - ] - }, - "text-letter-spacing": { - "stops": [ - [ - 2, - 0.13 - ], - [ - 8, - 0.5 - ] - ] - }, - "text-max-width": 8, - "text-field": "{_name}", - "text-padding": 1 - }, - "paint": { - "text-color": "#1f1d1f", - "text-halo-color": "#EBE7E2", - "text-halo-width": 1, - "text-halo-blur": 1 - } - }, - { - "id": "mapillary-images", - "type": "circle", - "source": "mly", - "source-layer": "image", - "maxzoom": 22, - "minzoom": 11, - "filter": [ - "all", - ["==", "is_pano", true], - ["==", "organization_id", 518073312556755] - ], - "layout": { - "visibility": "visible" - }, - "paint": { - "circle-radius": { - "base": 1, - "stops": [[13, 0.1], [14, 0.5], [17, 2], [18.5, 4], [19, 7], [19.5, 10]] - }, - "circle-color": "rgba(20,20,120,0)" - } - }, - { - "id": "mapillary-location", - "type": "symbol", - "source": "mapillary", - "layout": { - "icon-rotate": ["get", "bearing"], - "icon-rotation-alignment": "map", - "icon-image": "video" - } - }, - { - "id": "parcels", - "type": "line", - "source": "parcels", - "source-layer": "parcels", - "minzoom": 11, - "layout": { - "visibility": "visible" - }, - "paint": { - "line-color": { - "stops": [ - [14, "#222"], - [17, "#333"], - [17.1, "#444"], - [18, "#333"] - ] - }, - "line-width": { - "base": 1, - "stops": [ - [12, 0.1], - [14, 0.75], - [17, 1.5], - [20, 4] - ] - }, - "line-opacity": { - "base": 1, - "stops": [ - [12, 0], - [12.1, 0.5], - [22, 1] - ] - } - } - }, - { - "id": "parcels-highlight", - "type": "line", - "source": "parcels", - "source-layer": "parcels", - "minzoom": 11, - "filter": ["==", "parcelno", ""], - "layout": { - "visibility": "visible" - }, - "paint": { - "line-color": "#feb70d", - "line-width": { - "base": 1, - "stops": [ - [12, 0.5], - [14, 2], - [15, 3], - [22, 10] - ] - }, - "line-opacity": { - "base": 1, - "stops": [ - [12, 0], - [12.1, 0.1], - [12.5, 1], - [22, 1] - ] - } + } + }, + { + "id": "Pavement marking/Left turn", + "type": "symbol", + "source": "esri", + "source-layer": "Pavement marking", + "minzoom": 17, + "filter": ["==", "_symbol", 2], + "layout": { + "icon-rotation-alignment": "map", + "icon-image": "Pavement marking/Left turn", + "icon-size": { + "stops": [ + [17, 0.5], + [22, 1] + ] + }, + "icon-rotate": { + "type": "identity", + "property": "angle", + "default": 0 + }, + "icon-allow-overlap": true + }, + "paint": { + "icon-color": "#B2B2B2" + } + }, + { + "id": "Pavement marking/Right turn", + "type": "symbol", + "source": "esri", + "source-layer": "Pavement marking", + "minzoom": 17, + "filter": ["==", "_symbol", 3], + "layout": { + "icon-rotation-alignment": "map", + "icon-image": "Pavement marking/Right turn", + "icon-size": { + "stops": [ + [17, 0.5], + [22, 1] + ] + }, + "icon-rotate": { + "type": "identity", + "property": "angle", + "default": 0 + }, + "icon-allow-overlap": true + }, + "paint": { + "icon-color": "#B2B2B2" + } + }, + { + "id": "Pavement marking/Two-way left turn", + "type": "symbol", + "source": "esri", + "source-layer": "Pavement marking", + "minzoom": 17, + "filter": ["==", "_symbol", 4], + "layout": { + "icon-rotation-alignment": "map", + "icon-image": "Pavement marking/Two-way left turn", + "icon-size": { + "stops": [ + [17, 0.5], + [22, 1] + ] + }, + "icon-rotate": { + "type": "identity", + "property": "angle", + "default": 0 + }, + "icon-allow-overlap": true + }, + "paint": { + "icon-color": "#B2B2B2" + } + }, + { + "id": "Pavement marking/U-turn", + "type": "symbol", + "source": "esri", + "source-layer": "Pavement marking", + "minzoom": 17, + "filter": ["==", "_symbol", 5], + "layout": { + "icon-rotation-alignment": "map", + "icon-image": "Pavement marking/U-turn", + "icon-size": { + "stops": [ + [17, 0.5], + [22, 1] + ] + }, + "icon-rotate": { + "type": "identity", + "property": "angle", + "default": 0 + }, + "icon-allow-overlap": true + }, + "paint": { + "icon-color": "#B2B2B2" + } + }, + { + "id": "Water point/Sea or ocean", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 0], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 15.5] + ] + }, + "text-letter-spacing": 0.3, + "text-line-height": 1.6, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Water point/Island", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 7], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#595959", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1 + } + }, + { + "id": "Water point/Dam or weir", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 5], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#171310", + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.7, + "text-halo-blur": 1 + } + }, + { + "id": "Water point/Playa", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 6], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#171310", + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.7, + "text-halo-blur": 1 + } + }, + { + "id": "Water point/Canal or ditch", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 4], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.13, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1 + } + }, + { + "id": "Water point/Stream or river", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 3], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water point/Lake or reservoir", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 2], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#FFFFFF", + "text-halo-width": 0.5 + } + }, + { + "id": "Water point/Bay or inlet", + "type": "symbol", + "source": "esri", + "source-layer": "Water point", + "filter": ["==", "_label_class", 1], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 10] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Ferry/label/Ferry", + "type": "symbol", + "source": "esri", + "source-layer": "Ferry/label", + "filter": ["all", ["==", "_label_class", 0], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 10, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 30 + }, + "paint": { + "text-color": "#ffffff", + "text-halo-width": 1.2, + "text-halo-color": "#6BC4F0", + "text-halo-blur": 1 + } + }, + { + "id": "Water line/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water line/label", + "minzoom": 11, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.5, + "text-letter-spacing": 0.07, + "text-max-width": 8, + "text-max-angle": 35, + "text-field": "{_name_global}", + "text-padding": 1, + "text-offset": [0, -0.5], + "symbol-spacing": 800 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water line large scale/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water line large scale/label", + "minzoom": 7, + "maxzoom": 11, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.3, + "text-letter-spacing": 0.01, + "text-max-width": 8, + "text-max-angle": { + "stops": [ + [7, 25], + [11, 35] + ] + }, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0, -0.5], + "symbol-spacing": 800 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water line medium scale/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water line medium scale/label", + "minzoom": 5, + "maxzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.3, + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-max-angle": { + "stops": [ + [5, 15], + [6, 25] + ] + }, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0, -0.5], + "symbol-spacing": 800 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water line small scale/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water line small scale/label", + "minzoom": 4, + "maxzoom": 5, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 8.5, + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-max-angle": 18, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0, -0.5], + "symbol-spacing": 800 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Marine park/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Marine park/label", + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#3a7795" + } + }, + { + "id": "Water area/label/Dam or weir", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 8], + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": 9.5, + "text-letter-spacing": 0.08, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#171310", + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5, + "text-halo-blur": 1 + } + }, + { + "id": "Water area/label/Playa", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 9], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.5, + "text-letter-spacing": 0.08, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#171310", + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5, + "text-halo-blur": 1 + } + }, + { + "id": "Water area/label/Canal or ditch", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 2], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "symbol-placement": "line", + "symbol-spacing": 1000, + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-max-width": 5 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area/label/Small river", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 7], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "symbol-placement": "line", + "symbol-spacing": 1000, + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-max-width": 8 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area/label/Large river", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 4], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "symbol-placement": "line", + "symbol-spacing": 1000, + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-max-width": 8 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area/label/Small lake or reservoir", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 6], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-line-height": 1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area/label/Large lake or reservoir", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 3], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-line-height": 1.5, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area/label/Bay or inlet", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 1], + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-line-height": 1.5, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area/label/Small island", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 0], + "minzoom": 11, + "layout": { + "text-size": 10.5, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"] + }, + "paint": { + "text-color": "#595959", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1 + } + }, + { + "id": "Water area/label/Large island", + "type": "symbol", + "source": "esri", + "source-layer": "Water area/label", + "filter": ["==", "_label_class", 5], + "minzoom": 11, + "layout": { + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-line-height": 1.5, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"] + }, + "paint": { + "text-color": "#595959", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1 + } + }, + { + "id": "Water area large scale/label/River", + "type": "symbol", + "source": "esri", + "source-layer": "Water area large scale/label", + "filter": ["==", "_label_class", 1], + "minzoom": 7, + "maxzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "symbol-placement": "line", + "symbol-spacing": 1000, + "text-size": 9.3, + "text-letter-spacing": 0.1, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-max-width": 4 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area large scale/label/Lake or lake intermittent", + "type": "symbol", + "source": "esri", + "source-layer": "Water area large scale/label", + "filter": ["==", "_label_class", 0], + "minzoom": 7, + "maxzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.3, + "text-letter-spacing": 0.1, + "text-max-width": 4, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area medium scale/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water area medium scale/label", + "minzoom": 5, + "maxzoom": 7, + "layout": { + "text-max-width": 4, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-letter-spacing": 0.08, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.3 + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Water area small scale/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water area small scale/label", + "minzoom": 1, + "maxzoom": 5, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.3, + "text-letter-spacing": 0.08, + "text-max-width": 4, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.5 + } + }, + { + "id": "Marine area/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Marine area/label", + "minzoom": 11, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 10.5, + "text-letter-spacing": 0.13, + "text-line-height": 1.5, + "text-max-width": 4, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 1 + } + }, + { + "id": "Marine waterbody/label/small", + "type": "symbol", + "source": "esri", + "source-layer": "Marine waterbody/label", + "filter": ["==", "_label_class", 4], + "minzoom": 1, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-letter-spacing": { + "stops": [ + [1, 0.12], + [10, 0.25] + ] + }, + "text-line-height": 1.5, + "text-max-width": 6, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [1, 8], + [6, 9.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [1, "#0d6c9a"], + [6, "#0d6c9a"] + ] + }, + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 0.5 + } + }, + { + "id": "Marine waterbody/label/medium", + "type": "symbol", + "source": "esri", + "source-layer": "Marine waterbody/label", + "filter": ["==", "_label_class", 3], + "minzoom": 1, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-letter-spacing": { + "stops": [ + [1, 0.15], + [10, 0.3] + ] + }, + "text-line-height": 1.5, + "text-max-width": 6, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [1, 8], + [6, 9.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [1, "#0d6c9a"], + [6, "#0d6c9a"] + ] + }, + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 0.5 + } + }, + { + "id": "Marine waterbody/label/large", + "type": "symbol", + "source": "esri", + "source-layer": "Marine waterbody/label", + "filter": ["==", "_label_class", 2], + "minzoom": 1, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-letter-spacing": { + "stops": [ + [1, 0.18], + [10, 0.4] + ] + }, + "text-line-height": 1.5, + "text-max-width": 6, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [1, 8], + [6, 10] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [1, "#0d6c9a"], + [6, "#0d6c9a"] + ] + }, + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 0.5 + } + }, + { + "id": "Marine waterbody/label/x large", + "type": "symbol", + "source": "esri", + "source-layer": "Marine waterbody/label", + "filter": ["==", "_label_class", 1], + "minzoom": 1, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-letter-spacing": { + "stops": [ + [1, 0.2], + [10, 1.5] + ] + }, + "text-line-height": 1.5, + "text-max-width": 6, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [1, 8], + [6, 11] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [1, "#0d6c9a"], + [6, "#0d6c9a"] + ] + }, + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 0.5 + } + }, + { + "id": "Marine waterbody/label/2x large", + "type": "symbol", + "source": "esri", + "source-layer": "Marine waterbody/label", + "filter": ["==", "_label_class", 0], + "minzoom": 1, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-letter-spacing": { + "stops": [ + [1, 0.3], + [10, 2] + ] + }, + "text-line-height": 1.6, + "text-max-width": 6, + "text-field": "{_name}", + "text-padding": 15, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [1, 10], + [4, 18] + ] + } + }, + "paint": { + "text-color": "#0d6c9a", + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 0.5 + } + }, + { + "id": "Ferry/label/Rail ferry", + "type": "symbol", + "source": "esri", + "source-layer": "Ferry/label", + "filter": ["all", ["==", "_label_class", 1], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9, + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 5, + "text-offset": [0, -0.6], + "symbol-spacing": 1000 + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Railroad/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Railroad/label", + "minzoom": 14, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9, + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 5, + "text-offset": [0, -0.6], + "symbol-spacing": 1000 + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1 + } + }, + { + "id": "Trail or path/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Trail or path/label", + "minzoom": 15, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 9.3, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 5 + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road tunnel/label/Pedestrian", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 6], ["!in", "Viz", 2]], + "minzoom": 15, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 5 + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Local, service, 4WD", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 5], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.5, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [12, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Minor", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 4], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 12.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Major, alt name", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 3], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 12.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4e4e4e", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Major", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 2], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 12.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Highway", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 7], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 14.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Freeway Motorway, alt name", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 1], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 14.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road tunnel/label/Freeway Motorway", + "type": "symbol", + "source": "esri", + "source-layer": "Road tunnel/label", + "filter": ["all", ["==", "_label_class", 0], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 14.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Road/label/Local", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 5], ["!in", "Viz", 2]], + "minzoom": 12, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 11.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [12, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Minor", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 4], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 12.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Major, alt name", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 3], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 12.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Major", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 2], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 12.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Highway", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 75], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 14.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Freeway Motorway, alt name", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 1], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 14.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Freeway Motorway", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 0], ["!in", "Viz", 2]], + "minzoom": 10, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [10, 9.5], + [14, 10.5], + [18, 14.5] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": { + "stops": [ + [10, 5], + [15, 5], + [16, 15] + ] + } + }, + "paint": { + "text-color": "#4E4E4E", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Road/label/Rectangle white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 32], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 31], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Secondary Hwy red white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 16], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Secondary Hwy red white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Secondary Hwy red white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 15], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Secondary Hwy red white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/U-shaped yellow black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 24], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped yellow black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped yellow black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 23], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped yellow black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped red white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 26], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped red white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/U-shaped red white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 25], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped red white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/U-shaped blue white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 28], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped blue white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/U-shaped blue white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 27], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped blue white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/V-shaped white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 30], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/V-shaped white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/V-shaped white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 29], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/V-shaped white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 18], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 17], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped white green (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 20], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped white green (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped white green", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 19], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped white green/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped green leaf (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 22], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped green leaf (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/U-shaped green leaf", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 21], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/U-shaped green leaf/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle yellow black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 38], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle yellow black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle yellow black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 37], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle yellow black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle red white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 36], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle red white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Rectangle red white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 35], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle red white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Rectangle blue white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 34], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle blue white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Rectangle blue white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 33], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle blue white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Rectangle green white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 40], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle green white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Rectangle green white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 39], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle green white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Rectangle green yellow (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 42], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle green yellow (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#f1dfb7" + } + }, + { + "id": "Road/label/Rectangle green yellow", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 41], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle green yellow/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#f1dfb7" + } + }, + { + "id": "Road/label/Pentagon inverse white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 44], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon inverse white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Pentagon inverse white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 43], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon inverse white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Pentagon white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 46], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Pentagon white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 45], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Pentagon yellow black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 50], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon yellow black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Pentagon yellow black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 49], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon yellow black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Pentagon green white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 51], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon green white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Pentagon green white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 52], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon green white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Pentagon green yellow", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 53], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon green yellow/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#f1dfb7" + } + }, + { + "id": "Road/label/Pentagon green yellow (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 54], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon green yellow (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#f1dfb7" + } + }, + { + "id": "Road/label/Pentagon blue white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 48], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon blue white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Pentagon blue white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 47], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Pentagon blue white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 56], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Hexagon white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 55], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Hexagon blue white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 57], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon blue white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon blue white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 58], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon blue white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon red white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 59], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon red white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon red white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 60], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon red white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon green white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 62], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon green white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon green white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 61], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon green white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Hexagon orange black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 63], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon orange black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Hexagon orange black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 64], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Hexagon orange black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon blue white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 66], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon blue white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon blue white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 65], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon blue white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon red white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 68], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon red white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon red white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 67], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon red white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon green white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 70], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon green white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon green white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 69], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon green white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon brown white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 72], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon brown white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Rectangle hexagon brown white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 71], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Rectangle hexagon brown white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Octagon green white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 74], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Octagon green white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Octagon green white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 73], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Octagon green white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Shield white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 10], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Shield white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Shield white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 9], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Shield white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Secondary Hwy green white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 14], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Secondary Hwy green white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Secondary Hwy green white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 13], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 9.3, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Secondary Hwy green white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Secondary Hwy white black (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 12], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Secondary Hwy white black (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Secondary Hwy white black", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 11], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Secondary Hwy white black/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": {} + }, + { + "id": "Road/label/Shield blue white (Alt)", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 8], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Shield blue white (Alt)/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Shield blue white", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 7], ["!in", "Viz", 2]], + "minzoom": 7, + "layout": { + "symbol-placement": "line", + "symbol-spacing": 400, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": 8.5, + "text-max-width": 8, + "text-field": "{_name}", + "icon-image": "Road/Shield blue white/{_len}", + "icon-rotation-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-padding": { + "stops": [ + [7, 50], + [10, 50], + [11, 15] + ] + } + }, + "paint": { + "text-color": "#ffffff" + } + }, + { + "id": "Road/label/Pedestrian", + "type": "symbol", + "source": "esri", + "source-layer": "Road/label", + "filter": ["all", ["==", "_label_class", 6], ["!in", "Viz", 2]], + "minzoom": 15, + "layout": { + "symbol-placement": "line", + "symbol-avoid-edges": true, + "symbol-spacing": 400, + "text-font": ["Montserrat SemiBold"], + "text-size": 9.3, + "text-letter-spacing": 0.05, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 5 + }, + "paint": { + "text-color": "#595959", + "text-halo-color": "#FFFFFF", + "text-halo-width": 1 + } + }, + { + "id": "Building/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Building/label", + "minzoom": 15, + "layout": { + "visibility": "none", + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#5a3514", + "text-halo-color": "#EBE7E2", + "text-halo-width": 0.7, + "text-halo-blur": 1 + } + }, + { + "id": "Cemetery/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Cemetery/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#2d4e28", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Freight/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Freight/label", + "minzoom": 12, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#4a2b1b", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Water and wastewater/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Water and wastewater/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#4a2b1b", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Port/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Port/label", + "minzoom": 12, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#4a2b1b", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Industry/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Industry/label", + "minzoom": 12, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#4a2b1b", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Government/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Government/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#4a2b1b", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Finance/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Finance/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#9d5a48", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Emergency/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Emergency/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#33302f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Indigenous/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Indigenous/label", + "minzoom": 7, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 9.5], + [20, 12.5], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#533d32", + "text-halo-color": "#e8e6d6", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Military/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Military/label", + "minzoom": 6, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 9.5], + [20, 12.5], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 25, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#242221", + "text-halo-color": "#E0E0D9", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Transportation/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Transportation/label", + "minzoom": 13, + "layout": { + "visibility": "none", + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#242221", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Pedestrian/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Pedestrian/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#242221", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Beach/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Beach/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": 0.08, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#806b3c", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Golf course/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Golf course/label", + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#2d4e28", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Zoo/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Zoo/label", + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#2d4e28", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Retail/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Retail/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#9d5a48", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Landmark/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Landmark/label", + "minzoom": 13, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#446757", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Openspace or forest/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Openspace or forest/label", + "minzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 25 + }, + "paint": { + "text-color": "#006200", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Park or farming/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Park or farming/label", + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 25 + }, + "paint": { + "text-color": "#006200", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Point of interest/Park", + "type": "symbol", + "source": "esri", + "source-layer": "Point of interest", + "filter": ["==", "_label_class", 1], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": "#006200", + "text-halo-width": 1, + "text-halo-color": "#EBE7E2", + "text-halo-blur": 1 + } + }, + { + "id": "Education/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Education/label", + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#505000", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Medical/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Medical/label", + "minzoom": 11, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#3d5d69", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 forest or park/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 forest or park/label", + "minzoom": 7, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 9.5], + [20, 12.5], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 25 + }, + "paint": { + "text-color": "#006200", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 forest or park/label/Default", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 forest or park/label", + "minzoom": 6, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 9.5], + [20, 12.5], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 25, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#006200", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Airport/label/Airport property", + "type": "symbol", + "source": "esri", + "source-layer": "Airport/label", + "minzoom": 9, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [9, 8.5], + [15, 9.5], + [20, 12.5], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15, + "symbol-avoid-edges": true + }, + "paint": { + "text-color": "#5f5e5c", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin2 area/label/small", + "type": "symbol", + "source": "esri", + "source-layer": "Admin2 area/label", + "filter": ["==", "_label_class", 1], + "minzoom": 9, + "maxzoom": 11, + "layout": { + "text-letter-spacing": 0.2, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 11, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#80755f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin2 area/label/large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin2 area/label", + "filter": ["==", "_label_class", 0], + "minzoom": 9, + "maxzoom": 11, + "layout": { + "text-letter-spacing": 0.2, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": 13, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#80755f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 area/label/x small", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 area/label", + "filter": ["==", "_label_class", 5], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-transform": "uppercase", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [4, 8.5], + [5, 9.5], + [6, 10.3], + [9, 11] + ] + }, + "text-letter-spacing": { + "stops": [ + [4, 0.1], + [8, 0.2] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [4, "#554434"], + [6, "#39240e"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 area/label/small", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 area/label", + "filter": ["==", "_label_class", 4], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-transform": "uppercase", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [4, 8.5], + [5, 9.5], + [6, 10.5], + [9, 11.5] + ] + }, + "text-letter-spacing": { + "stops": [ + [4, 0.1], + [8, 0.2] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [4, "#554434"], + [6, "#39240e"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 area/label/medium", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 area/label", + "filter": ["==", "_label_class", 3], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-transform": "uppercase", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [4, 9.5], + [5, 10.5], + [6, 11.3], + [9, 12] + ] + }, + "text-letter-spacing": { + "stops": [ + [4, 0.15], + [8, 0.4] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [4, "#554434"], + [6, "#39240e"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 area/label/large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 area/label", + "filter": ["==", "_label_class", 2], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-transform": "uppercase", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [4, 9.5], + [5, 11.3], + [6, 13], + [9, 17] + ] + }, + "text-letter-spacing": { + "stops": [ + [4, 0.1], + [8, 0.5] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [4, "#554434"], + [6, "#39240e"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 area/label/x large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 area/label", + "filter": ["==", "_label_class", 1], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-transform": "uppercase", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [4, 10.3], + [5, 12], + [6, 13.5], + [9, 19] + ] + }, + "text-letter-spacing": { + "stops": [ + [4, 0.15], + [8, 0.6] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [4, "#554434"], + [6, "#39240e"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin1 area/label/2x large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin1 area/label", + "filter": ["==", "_label_class", 0], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Montserrat SemiBold"], + "text-transform": "uppercase", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-size": { + "stops": [ + [4, 11.5], + [5, 12.3], + [6, 14], + [9, 19] + ] + }, + "text-letter-spacing": { + "stops": [ + [4, 0.15], + [8, 0.75] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [4, "#554434"], + [6, "#39240e"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Point of interest/General", + "type": "symbol", + "source": "esri", + "source-layer": "Point of interest", + "filter": ["==", "_label_class", 0], + "minzoom": 9, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": { + "stops": [ + [9, "#5a3514"], + [11, "#5a3514"] + ] + }, + "text-halo-width": 1, + "text-halo-color": "#EBE7E2", + "text-halo-blur": 1 + } + }, + { + "id": "Point of interest/Bus station", + "type": "symbol", + "source": "esri", + "source-layer": "Point of interest", + "filter": ["==", "_symbol", 2], + "minzoom": 12, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": { + "stops": [ + [9, "#5a3514"], + [11, "#5a3514"] + ] + }, + "text-halo-width": 1, + "text-halo-color": "#EBE7E2", + "text-halo-blur": 1 + } + }, + { + "id": "Point of interest/Rail station", + "type": "symbol", + "source": "esri", + "source-layer": "Point of interest", + "filter": ["==", "_symbol", 3], + "minzoom": 12, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [15, 9.5], + [20, 11], + [22, 15] + ] + }, + "text-letter-spacing": { + "stops": [ + [15, 0.05], + [20, 0.15] + ] + }, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-color": { + "stops": [ + [9, "#5a3514"], + [11, "#5a3514"] + ] + }, + "text-halo-width": 1, + "text-halo-color": "#EBE7E2", + "text-halo-blur": 1 + } + }, + { + "id": "Neighborhood", + "type": "symbol", + "source": "esri", + "source-layer": "Neighborhood", + "minzoom": 14, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 10], + [16, 14] + ] + }, + "text-letter-spacing": 0.08, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 1 + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City large scale/town small", + "type": "symbol", + "source": "esri", + "source-layer": "City large scale", + "filter": ["==", "_label_class", 5], + "minzoom": 10, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 11], + [16, 15] + ] + }, + "text-letter-spacing": 0.08, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 15 + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City large scale/town large", + "type": "symbol", + "source": "esri", + "source-layer": "City large scale", + "filter": ["==", "_label_class", 4], + "minzoom": 10, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-size": { + "stops": [ + [10, 11], + [16, 17] + ] + }, + "text-letter-spacing": 0.09, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 1 + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City large scale/small", + "type": "symbol", + "source": "esri", + "source-layer": "City large scale", + "filter": ["==", "_label_class", 3], + "minzoom": 10, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 1, + "text-size": { + "stops": [ + [10, 12], + [16, 18] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City large scale/medium", + "type": "symbol", + "source": "esri", + "source-layer": "City large scale", + "filter": ["==", "_label_class", 2], + "minzoom": 10, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 1, + "text-size": { + "stops": [ + [10, 13], + [16, 20] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City large scale/large", + "type": "symbol", + "source": "esri", + "source-layer": "City large scale", + "filter": ["==", "_label_class", 1], + "minzoom": 10, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 1, + "text-size": { + "stops": [ + [10, 14], + [16, 26] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City large scale/x large", + "type": "symbol", + "source": "esri", + "source-layer": "City large scale", + "filter": ["==", "_label_class", 0], + "minzoom": 10, + "maxzoom": 17, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Montserrat SemiBold"], + "text-letter-spacing": 0.1, + "text-max-width": 8, + "text-field": "{_name_global}", + "text-padding": 1, + "text-size": { + "stops": [ + [10, 14.5], + [16, 31] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/town small non capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 17], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-size": 11, + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left" + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/town large non capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 15], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-size": 11, + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left" + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/small non capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 12], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-size": 11.5, + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left" + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/medium non capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 9], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 12.3], + [8, 13] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/other capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 18], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-size": 11.5, + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left" + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/town large other capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 14], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-size": 11.5, + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left" + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/small other capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 11], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-size": 11.5, + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left" + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/medium other capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 8], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 12.3], + [8, 13] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 point/x small", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 point", + "filter": ["==", "_label_class", 5], + "minzoom": 5, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Bold"], + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-letter-spacing": { + "stops": [ + [5, 0.13], + [8, 0.5] + ] + }, + "text-size": { + "stops": [ + [5, 13], + [10, 18] + ] + } + }, + "paint": { + "text-color": "#0f010f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 point/small", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 point", + "filter": ["==", "_label_class", 4], + "minzoom": 4, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Bold"], + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-letter-spacing": { + "stops": [ + [4, 0.13], + [8, 0.5] + ] + }, + "text-size": { + "stops": [ + [4, 13], + [10, 18] + ] + } + }, + "paint": { + "text-color": "#0f010f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 point/medium", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 point", + "filter": ["==", "_label_class", 3], + "minzoom": 2, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Bold"], + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-letter-spacing": { + "stops": [ + [2, 0.13], + [8, 0.5] + ] + }, + "text-size": { + "stops": [ + [2, 10], + [4, 14], + [10, 22] + ] + } + }, + "paint": { + "text-color": "#0f010f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 point/large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 point", + "filter": ["==", "_label_class", 2], + "minzoom": 2, + "maxzoom": 10, + "layout": { + "text-font": ["Avenir Next LT Pro Bold"], + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-letter-spacing": { + "stops": [ + [2, 0.13], + [8, 0.5] + ] + }, + "text-size": { + "stops": [ + [2, 11], + [4, 14], + [6, 22] + ] + } + }, + "paint": { + "text-color": "#0f010f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 point/x large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 point", + "filter": ["==", "_label_class", 1], + "minzoom": 2, + "maxzoom": 8, + "layout": { + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-line-height": 1.5, + "text-letter-spacing": { + "stops": [ + [2, 0.15], + [6, 0.5] + ] + }, + "text-size": { + "stops": [ + [2, 11.5], + [4, 15], + [6, 23] + ] + } + }, + "paint": { + "text-color": "#0f010f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/town small admin0 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 16], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/town large admin0 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 13], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/small admin0 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 10], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/medium admin0 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 7], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-color": "#343434", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/large other capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 5], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 12.3], + [8, 13] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#343434"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/x large admin2 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 2], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#343434"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/large non capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 6], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 12.3], + [8, 13] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#343434"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/large admin0 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 4], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#2d2d2d"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/x large non capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 3], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#343434"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/x large admin1 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 1], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#343434"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "City small scale/x large admin0 capital", + "type": "symbol", + "source": "esri", + "source-layer": "City small scale", + "filter": ["==", "_symbol", 0], + "minzoom": 3, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "icon-image": "City small scale", + "icon-padding": 1, + "text-font": ["Montserrat SemiBold"], + "text-anchor": "bottom-left", + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "text-offset": [0.2, 0.1], + "text-justify": "left", + "text-size": { + "stops": [ + [4, 12.3], + [6, 13.5], + [8, 14.3] + ] + } + }, + "paint": { + "text-color": { + "stops": [ + [2, "#2d2d2d"], + [3, "#000000"] + ] + }, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Admin0 point/2x large", + "type": "symbol", + "source": "esri", + "source-layer": "Admin0 point", + "filter": ["==", "_label_class", 0], + "minzoom": 2, + "maxzoom": 6, + "layout": { + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1, + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-line-height": 1.7, + "text-letter-spacing": { + "stops": [ + [2, 0.3], + [5, 0.5] + ] + }, + "text-size": { + "stops": [ + [2, 14], + [4, 22.5], + [5, 28] + ] + } + }, + "paint": { + "text-color": "#0f010f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Continent", + "type": "symbol", + "source": "esri", + "source-layer": "Continent", + "maxzoom": 2, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [0, 8.3], + [1, 10.3] + ] + }, + "text-letter-spacing": 0.35, + "text-max-width": 8, + "text-line-height": 1.75, + "text-field": "{_name_global}", + "text-padding": 1, + "text-transform": "uppercase" + }, + "paint": { + "text-color": "#363636", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "Disputed label point/Island", + "type": "symbol", + "source": "esri", + "source-layer": "Disputed label point", + "filter": ["all", ["==", "_label_class", 1], ["in", "DisputeID", 0]], + "minzoom": 6, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [6, 7], + [15, 10] + ] + }, + "text-letter-spacing": 0.13, + "text-line-height": 1.5, + "text-max-width": 4, + "text-field": "{_name}", + "text-padding": 1 + }, + "paint": { + "text-color": "#595959", + "text-halo-blur": 1, + "text-halo-color": "#EBE7E2", + "text-halo-width": 1 + } + }, + { + "id": "Disputed label point/Waterbody", + "type": "symbol", + "source": "esri", + "source-layer": "Disputed label point", + "filter": ["all", ["==", "_label_class", 0], ["in", "DisputeID", 1006]], + "minzoom": 2, + "maxzoom": 10, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Demi Italic"], + "text-size": { + "stops": [ + [2, 8], + [6, 9.3] + ] + }, + "text-letter-spacing": 0.1, + "text-max-width": 6, + "text-field": "{_name}", + "text-padding": 1 + }, + "paint": { + "text-color": { + "stops": [ + [1, "#0d6c9a"], + [6, "#0d6c9a"] + ] + }, + "text-halo-blur": 1, + "text-halo-color": "#82CFF5", + "text-halo-width": 0.5 + } + }, + { + "id": "Disputed label point/Admin0", + "type": "symbol", + "source": "esri", + "source-layer": "Disputed label point", + "filter": ["all", ["==", "_label_class", 2], ["in", "DisputeID", 1021]], + "minzoom": 2, + "layout": { + "symbol-avoid-edges": true, + "text-font": ["Avenir Next LT Pro Bold"], + "text-size": { + "stops": [ + [2, 10], + [4, 14], + [10, 22] + ] + }, + "text-letter-spacing": { + "stops": [ + [2, 0.13], + [8, 0.5] + ] + }, + "text-max-width": 8, + "text-field": "{_name}", + "text-padding": 1 + }, + "paint": { + "text-color": "#1f1d1f", + "text-halo-color": "#EBE7E2", + "text-halo-width": 1, + "text-halo-blur": 1 + } + }, + { + "id": "mapillary-images", + "type": "circle", + "source": "mly", + "source-layer": "image", + "maxzoom": 22, + "minzoom": 11, + "filter": [ + "all", + ["==", "is_pano", true], + ["==", "organization_id", 518073312556755] + ], + "layout": { + "visibility": "visible" + }, + "paint": { + "circle-radius": { + "base": 1, + "stops": [ + [13, 0.1], + [14, 0.5], + [17, 2], + [18.5, 4], + [19, 7], + [19.5, 10] + ] + }, + "circle-color": "rgba(20,20,120,0)" + } + }, + { + "id": "mapillary-location", + "type": "symbol", + "source": "mapillary", + "layout": { + "icon-rotate": ["get", "bearing"], + "icon-rotation-alignment": "map", + "icon-image": "video" + } + }, + { + "id": "parcels", + "type": "line", + "source": "parcels", + "source-layer": "parcels", + "minzoom": 11, + "layout": { + "visibility": "visible" + }, + "paint": { + "line-color": { + "stops": [ + [14, "#222"], + [17, "#333"], + [17.1, "#444"], + [18, "#333"] + ] + }, + "line-width": { + "base": 1, + "stops": [ + [12, 0.1], + [14, 0.75], + [17, 1.5], + [20, 4] + ] + }, + "line-opacity": { + "base": 1, + "stops": [ + [12, 0], + [12.1, 0.5], + [22, 1] + ] } - }, - { - "id": "parcels-fill", - "type": "fill", - "source": "parcels", - "source-layer": "parcels", - "interactive": true, - "minzoom": 12, - "layout": { - "visibility": "visible" - }, - "paint": { - "fill-color": "rgba(0,0,0,0)" + } + }, + { + "id": "parcels-highlight", + "type": "line", + "source": "parcels", + "source-layer": "parcels", + "minzoom": 11, + "filter": ["==", "parcelno", ""], + "layout": { + "visibility": "visible" + }, + "paint": { + "line-color": "#feb70d", + "line-width": { + "base": 1, + "stops": [ + [12, 0.5], + [14, 2], + [15, 3], + [22, 10] + ] + }, + "line-opacity": { + "base": 1, + "stops": [ + [12, 0], + [12.1, 0.1], + [12.5, 1], + [22, 1] + ] } } - ], - "metadata": { - "arcgisStyleUrl": "https://www.arcgis.com/sharing/rest/content/items/273bf8d5c8ac400183fc24e109d20bcf/resources/styles/root.json", - "arcgisOriginalItemTitle": "Community" + }, + { + "id": "parcels-fill", + "type": "fill", + "source": "parcels", + "source-layer": "parcels", + "interactive": true, + "minzoom": 12, + "layout": { + "visibility": "visible" + }, + "paint": { + "fill-color": "rgba(0,0,0,0)" + } } - } \ No newline at end of file + ], + "metadata": { + "arcgisStyleUrl": "https://www.arcgis.com/sharing/rest/content/items/273bf8d5c8ac400183fc24e109d20bcf/resources/styles/root.json", + "arcgisOriginalItemTitle": "Community" + } +} diff --git a/src/components/organisms/Modal/Modal.css b/src/components/organisms/Modal/Modal.css index f2fd0307..e5cabd8b 100644 --- a/src/components/organisms/Modal/Modal.css +++ b/src/components/organisms/Modal/Modal.css @@ -1,3 +1,3 @@ -.modal { - background-color: rgba(0, 0, 0, 0.5); -} \ No newline at end of file +.modal { + background-color: rgba(0, 0, 0, 0.5); +} diff --git a/src/components/organisms/Modal/Modal.js b/src/components/organisms/Modal/Modal.js index a567da46..005e941c 100644 --- a/src/components/organisms/Modal/Modal.js +++ b/src/components/organisms/Modal/Modal.js @@ -1,134 +1,146 @@ -import styles from '!!raw-loader!./Modal.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Modal extends HTMLElement { - static get observedAttributes() { - return ['data-show']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.modal = document.createElement('div'); - this.modalDialog = document.createElement('div'); - this.modalContent = document.createElement('div'); - this.modalHeader = document.createElement('div'); - this.modalBody = document.createElement('div'); - this.modalFooter = document.createElement('div'); - this.modalDialog.appendChild(this.modalContent); - this.modal.appendChild(this.modalDialog); - - shadow.addEventListener('slotchange', e => { - let tempElements = Array.from(this.children); - tempElements.forEach((node) => { - switch (node.tagName) { - case 'COD-MODAL-HEADER': - (this.getAttribute('data-show') == 'true') ? node.setAttribute('data-show', true) : 0; - (this.getAttribute('data-button-dark') == 'true') ? node.setAttribute('data-button-dark', true) : 0; - this.modalHeader.appendChild(node); - this.modalContent.appendChild(this.modalHeader); - break; - - case 'COD-MODAL-BODY': - this.modalBody.appendChild(node); - this.modalContent.appendChild(this.modalBody); - break; - - case 'COD-MODAL-FOOTER': - this.modalFooter.appendChild(node); - this.modalContent.appendChild(this.modalFooter); - break; - - default: - break; - } - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - let tempClasses = this.modal.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - if(newValue == 'true'){ - tempClasses.push('show'); - this.modal.style.display = 'block'; - if(this.getAttribute('data-static') != 'true'){ - this.modal.addEventListener('click', this._onClick); - } - this.modal.className = tempClasses.join(' '); - }else{ - this.modal.className = tempClasses.join(' '); - setTimeout(() => { this.modal.style.display = 'none'; }, 500); - } - - } - - connectedCallback() { - // Modal attributes - let bStatic = this.getAttribute('data-static'); - let id = this.getAttribute('data-id'); - let show = this.getAttribute('data-show'); - let verticalCentered = this.getAttribute('data-vertical-centered'); - let size = this.getAttribute('data-size'); - let fullScreen = this.getAttribute('data-full-screen'); - let extraClasses = this.getAttribute('data-extra-classes'); - let modalClasses = ['modal fade']; - let modalDialogClasses = ['modal-dialog']; - let modalContentClasses = ['modal-content']; - (extraClasses != undefined && extraClasses != null) ? modalClasses.push(extraClasses) : 0; - (size != undefined && size != null) ? modalDialogClasses.push(`modal-${size}`) : 0; - (verticalCentered == 'true') ? modalDialogClasses.push('modal-dialog-centered') : 0; - if (fullScreen != undefined && fullScreen != null){ - (fullScreen == 'always') ? modalDialogClasses.push('modal-fullscreen') : modalDialogClasses.push(`modal-fullscreen-${fullScreen}-down`); - } - if (bStatic == 'true'){ - this.modal.setAttribute('data-bs-backdrop', 'static'); - this.modal.setAttribute('data-bs-keyboard', 'false'); - } - if (show == 'true') { - this.modalClasses.push('show'); - this.modal.setAttribute('aria-modal', `true`); - } else { - this.modal.setAttribute('aria-modal', `false`); - } - (id != undefined && id != null) ? this.modal.id = id : 0; - this.modal.setAttribute('tabindex', -1); - this.modal.className = modalClasses.join(' '); - this.modalDialog.className = modalDialogClasses.join(' '); - this.modalContent.className = modalContentClasses.join(' '); - if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.modal); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.setAttribute('data-show', 'false'); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Modal.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Modal extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.modal = document.createElement('div'); + this.modalDialog = document.createElement('div'); + this.modalContent = document.createElement('div'); + this.modalHeader = document.createElement('div'); + this.modalBody = document.createElement('div'); + this.modalFooter = document.createElement('div'); + this.modalDialog.appendChild(this.modalContent); + this.modal.appendChild(this.modalDialog); + + shadow.addEventListener('slotchange', (e) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + switch (node.tagName) { + case 'COD-MODAL-HEADER': + this.getAttribute('data-show') == 'true' + ? node.setAttribute('data-show', true) + : 0; + this.getAttribute('data-button-dark') == 'true' + ? node.setAttribute('data-button-dark', true) + : 0; + this.modalHeader.appendChild(node); + this.modalContent.appendChild(this.modalHeader); + break; + + case 'COD-MODAL-BODY': + this.modalBody.appendChild(node); + this.modalContent.appendChild(this.modalBody); + break; + + case 'COD-MODAL-FOOTER': + this.modalFooter.appendChild(node); + this.modalContent.appendChild(this.modalFooter); + break; + + default: + break; + } + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + let tempClasses = this.modal.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'show' ? tempClasses.push(popValue) : 0; + if (newValue == 'true') { + tempClasses.push('show'); + this.modal.style.display = 'block'; + if (this.getAttribute('data-static') != 'true') { + this.modal.addEventListener('click', this._onClick); + } + this.modal.className = tempClasses.join(' '); + } else { + this.modal.className = tempClasses.join(' '); + setTimeout(() => { + this.modal.style.display = 'none'; + }, 500); + } + } + + connectedCallback() { + // Modal attributes + let bStatic = this.getAttribute('data-static'); + let id = this.getAttribute('data-id'); + let show = this.getAttribute('data-show'); + let verticalCentered = this.getAttribute('data-vertical-centered'); + let size = this.getAttribute('data-size'); + let fullScreen = this.getAttribute('data-full-screen'); + let extraClasses = this.getAttribute('data-extra-classes'); + let modalClasses = ['modal fade']; + let modalDialogClasses = ['modal-dialog']; + let modalContentClasses = ['modal-content']; + extraClasses != undefined && extraClasses != null + ? modalClasses.push(extraClasses) + : 0; + size != undefined && size != null + ? modalDialogClasses.push(`modal-${size}`) + : 0; + verticalCentered == 'true' + ? modalDialogClasses.push('modal-dialog-centered') + : 0; + if (fullScreen != undefined && fullScreen != null) { + fullScreen == 'always' + ? modalDialogClasses.push('modal-fullscreen') + : modalDialogClasses.push(`modal-fullscreen-${fullScreen}-down`); + } + if (bStatic == 'true') { + this.modal.setAttribute('data-bs-backdrop', 'static'); + this.modal.setAttribute('data-bs-keyboard', 'false'); + } + if (show == 'true') { + this.modalClasses.push('show'); + this.modal.setAttribute('aria-modal', `true`); + } else { + this.modal.setAttribute('aria-modal', `false`); + } + id != undefined && id != null ? (this.modal.id = id) : 0; + this.modal.setAttribute('tabindex', -1); + this.modal.className = modalClasses.join(' '); + this.modalDialog.className = modalDialogClasses.join(' '); + this.modalContent.className = modalContentClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.modal); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode().host.setAttribute('data-show', 'false'); + } +} diff --git a/src/components/organisms/Modal/cod-modal.js b/src/components/organisms/Modal/cod-modal.js index 47953bc5..ec16b63c 100644 --- a/src/components/organisms/Modal/cod-modal.js +++ b/src/components/organisms/Modal/cod-modal.js @@ -1,2 +1,2 @@ -import Modal from './Modal'; -customElements.define('cod-modal', Modal); \ No newline at end of file +import Modal from './Modal'; +customElements.define('cod-modal', Modal); diff --git a/src/components/organisms/Navbar/Navbar.css b/src/components/organisms/Navbar/Navbar.css index e49c1a41..20d9b5db 100644 --- a/src/components/organisms/Navbar/Navbar.css +++ b/src/components/organisms/Navbar/Navbar.css @@ -1,3 +1,3 @@ -.navbar-brand{ - padding-top: 0; -} \ No newline at end of file +.navbar-brand { + padding-top: 0; +} diff --git a/src/components/organisms/Navbar/Navbar.js b/src/components/organisms/Navbar/Navbar.js index bb31ff3a..491fd872 100644 --- a/src/components/organisms/Navbar/Navbar.js +++ b/src/components/organisms/Navbar/Navbar.js @@ -1,134 +1,151 @@ -import styles from '!!raw-loader!./Navbar.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Navbar extends HTMLElement { - static get observedAttributes() { - return ['data-show']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.navbar = document.createElement('nav'); - this.navbarContainer = document.createElement('div'); - this.navbarToggle = document.createElement('div'); - this.navbarBrand = document.createElement('div'); - this.navbarCollapse = document.createElement('div'); - - shadow.addEventListener('slotchange', e => { - let tempElements = Array.from(this.children); - tempElements.forEach((node) => { - switch (node.tagName) { - case 'COD-NAVBAR-TOGGLE': - (this.getAttribute('data-target-toggle') == 'offcanvas') ? node.setAttribute('data-target-toggle', 'offcanvas') : 0; - (this.getAttribute('data-show') == 'true') ? node.setAttribute('data-show', true) : 0; - (this.getAttribute('data-button-dark') == 'true') ? node.setAttribute('data-button-dark', true) : 0; - this.navbarToggle.appendChild(node); - this.navbarContainer.appendChild(this.navbarToggle); - break; - - case 'COD-NAVBAR-COLLAPSE': - this.navbarCollapse.appendChild(node); - this.navbarContainer.appendChild(this.navbarCollapse); - break; - - case 'COD-NAVBAR-BRAND': - this.navbarBrand.appendChild(node); - this.navbarContainer.appendChild(this.navbarBrand); - break; - - case 'COD-OFFCANVAS': - this.navbarContainer.appendChild(node); - break; - - default: - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : 0; - break; - } - }); - }); - this.navbar.appendChild(this.navbarContainer); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - this.navbarToggle.querySelector('cod-navbar-toggle').setAttribute('data-show', newValue); - this.navbarToggle.setAttribute('aria-expanded', newValue); - if(this.navbarCollapse.querySelector('cod-navbar-collapse')){ - let tempClasses = this.navbarCollapse.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - if (newValue == 'true') { - tempClasses.push('show'); - } - this.navbarCollapse.className = tempClasses.join(' '); - } - } - - connectedCallback() { - // Navbar attributes - let expand = this.getAttribute('data-expand'); - let id = this.getAttribute('data-id'); - let show = this.getAttribute('data-show'); - let placement = this.getAttribute('data-position'); - let extraClasses = this.getAttribute('data-extra-classes'); - let containerClasses = this.getAttribute('data-container-classes'); - let collapseClasses = this.getAttribute('data-collapse-classes'); - let navbarClasses = ['navbar']; - let navbarContainerClasses = ['']; - let navbarCollapseClasses = ['collapse navbar-collapse']; - let navbarBrandClasses = ['navbar-brand']; - let navbarToogleClasses = ['navbar-toggler']; - (containerClasses != undefined && containerClasses != null) ? navbarContainerClasses.push(containerClasses) : 0; - (extraClasses != undefined && extraClasses != null) ? navbarClasses.push(extraClasses) : 0; - (collapseClasses != undefined && collapseClasses != null) ? navbarCollapseClasses.push(collapseClasses) : 0; - (placement != undefined && placement != null) ? navbarClasses.push(placement) : 0; - if (expand != undefined && expand != null) { - (expand == 'always') ? navbarClasses.push('navbar-expand') : navbarClasses.push(`navbar-expand-${expand}`); - } - if (show == 'true') { - this.navbarCollapseClasses.push('show'); - this.navbarToggle.setAttribute('aria-expanded', `true`); - } else { - this.navbarToggle.setAttribute('aria-expanded', `false`); - } - if (id != undefined && id != null) { - this.navbar.id = id; - this.navbarCollapse.id = `${id}-collapse`; - this.navbarToggle.setAttribute('data-bs-target', `#${id}-collapse`); - this.navbarToggle.setAttribute('aria-control', `${id}-collapse`); - this.navbarToggle.setAttribute('aria-label', `${id} toggle navigation`); - } - this.navbar.className = navbarClasses.join(' '); - this.navbarContainer.className = navbarContainerClasses.join(' '); - this.navbarBrand.className = navbarBrandClasses.join(' '); - this.navbarToggle.className = navbarToogleClasses.join(' '); - this.navbarToggle.setAttribute('data-bs-toggle', 'collapse'); - this.navbarCollapse.className = navbarCollapseClasses.join(' '); - if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.navbar); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Navbar.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Navbar extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.navbar = document.createElement('nav'); + this.navbarContainer = document.createElement('div'); + this.navbarToggle = document.createElement('div'); + this.navbarBrand = document.createElement('div'); + this.navbarCollapse = document.createElement('div'); + + shadow.addEventListener('slotchange', (e) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + switch (node.tagName) { + case 'COD-NAVBAR-TOGGLE': + this.getAttribute('data-target-toggle') == 'offcanvas' + ? node.setAttribute('data-target-toggle', 'offcanvas') + : 0; + this.getAttribute('data-show') == 'true' + ? node.setAttribute('data-show', true) + : 0; + this.getAttribute('data-button-dark') == 'true' + ? node.setAttribute('data-button-dark', true) + : 0; + this.navbarToggle.appendChild(node); + this.navbarContainer.appendChild(this.navbarToggle); + break; + + case 'COD-NAVBAR-COLLAPSE': + this.navbarCollapse.appendChild(node); + this.navbarContainer.appendChild(this.navbarCollapse); + break; + + case 'COD-NAVBAR-BRAND': + this.navbarBrand.appendChild(node); + this.navbarContainer.appendChild(this.navbarBrand); + break; + + case 'COD-OFFCANVAS': + this.navbarContainer.appendChild(node); + break; + + default: + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') ? node.remove() : 0; + break; + } + }); + }); + this.navbar.appendChild(this.navbarContainer); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + this.navbarToggle + .querySelector('cod-navbar-toggle') + .setAttribute('data-show', newValue); + this.navbarToggle.setAttribute('aria-expanded', newValue); + if (this.navbarCollapse.querySelector('cod-navbar-collapse')) { + let tempClasses = this.navbarCollapse.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'show' ? tempClasses.push(popValue) : 0; + if (newValue == 'true') { + tempClasses.push('show'); + } + this.navbarCollapse.className = tempClasses.join(' '); + } + } + + connectedCallback() { + // Navbar attributes + let expand = this.getAttribute('data-expand'); + let id = this.getAttribute('data-id'); + let show = this.getAttribute('data-show'); + let placement = this.getAttribute('data-position'); + let extraClasses = this.getAttribute('data-extra-classes'); + let containerClasses = this.getAttribute('data-container-classes'); + let collapseClasses = this.getAttribute('data-collapse-classes'); + let navbarClasses = ['navbar']; + let navbarContainerClasses = ['']; + let navbarCollapseClasses = ['collapse navbar-collapse']; + let navbarBrandClasses = ['navbar-brand']; + let navbarToogleClasses = ['navbar-toggler']; + containerClasses != undefined && containerClasses != null + ? navbarContainerClasses.push(containerClasses) + : 0; + extraClasses != undefined && extraClasses != null + ? navbarClasses.push(extraClasses) + : 0; + collapseClasses != undefined && collapseClasses != null + ? navbarCollapseClasses.push(collapseClasses) + : 0; + placement != undefined && placement != null + ? navbarClasses.push(placement) + : 0; + if (expand != undefined && expand != null) { + expand == 'always' + ? navbarClasses.push('navbar-expand') + : navbarClasses.push(`navbar-expand-${expand}`); + } + if (show == 'true') { + this.navbarCollapseClasses.push('show'); + this.navbarToggle.setAttribute('aria-expanded', `true`); + } else { + this.navbarToggle.setAttribute('aria-expanded', `false`); + } + if (id != undefined && id != null) { + this.navbar.id = id; + this.navbarCollapse.id = `${id}-collapse`; + this.navbarToggle.setAttribute('data-bs-target', `#${id}-collapse`); + this.navbarToggle.setAttribute('aria-control', `${id}-collapse`); + this.navbarToggle.setAttribute('aria-label', `${id} toggle navigation`); + } + this.navbar.className = navbarClasses.join(' '); + this.navbarContainer.className = navbarContainerClasses.join(' '); + this.navbarBrand.className = navbarBrandClasses.join(' '); + this.navbarToggle.className = navbarToogleClasses.join(' '); + this.navbarToggle.setAttribute('data-bs-toggle', 'collapse'); + this.navbarCollapse.className = navbarCollapseClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.navbar); + } + } +} diff --git a/src/components/organisms/Navbar/cod-navbar.js b/src/components/organisms/Navbar/cod-navbar.js index 60a62956..8ac6897f 100644 --- a/src/components/organisms/Navbar/cod-navbar.js +++ b/src/components/organisms/Navbar/cod-navbar.js @@ -1,2 +1,2 @@ -import Navbar from './Navbar'; -customElements.define('cod-navbar', Navbar); \ No newline at end of file +import Navbar from './Navbar'; +customElements.define('cod-navbar', Navbar); diff --git a/src/components/organisms/Offcanvas/Offcanvas.js b/src/components/organisms/Offcanvas/Offcanvas.js index 1344753d..4ed56c09 100644 --- a/src/components/organisms/Offcanvas/Offcanvas.js +++ b/src/components/organisms/Offcanvas/Offcanvas.js @@ -1,112 +1,125 @@ -import styles from '!!raw-loader!./Offcanvas.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Offcanvas extends HTMLElement { - static get observedAttributes() { - return ['data-show']; - } - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.offcanvas = document.createElement('div'); - this.offcanvasBackdrop = document.createElement('div'); - shadow.addEventListener( 'slotchange', ev => { - let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - (this.getAttribute('data-show') == 'true') ? node.setAttribute('data-show', true) : 0; - if(node.tagName == 'COD-OFFCANVAS-HEADER'){ - (this.getAttribute('data-button-dark') == 'true') ? node.setAttribute('data-button-dark', true) : 0; - node.setAttribute('data-parent-id', this.getAttribute('data-id')); - } - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : this.offcanvas.appendChild(node); - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - attributeChangedCallback(name, oldValue, newValue) { - let tempClasses = this.offcanvas.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - if(newValue == 'true'){ - tempClasses.push('show'); - if(this.getAttribute('data-backdrop') != 'false'){ - if(this.getAttribute('data-static') != 'true'){ - this.offcanvasBackdrop.addEventListener('click', this._onClick); - } - this.shadowRoot.appendChild(this.offcanvasBackdrop); - } - }else{ - if(this.shadowRoot.querySelector('div.offcanvas-backdrop')){ - this.shadowRoot.removeChild(this.offcanvasBackdrop); - } - } - this.offcanvas.className = tempClasses.join(' '); - } - - connectedCallback() { - // Offcanvas attributes - let show = this.getAttribute('data-show'); - let placement = this.getAttribute('data-placement'); - let id = this.getAttribute('data-id'); - let backdrop = this.getAttribute('data-backdrop'); - let backdropExtraClasses = this.getAttribute('data-backdrop-extra-classes'); - let scroll = this.getAttribute('data-scroll'); - let bStatic = this.getAttribute('data-static'); - let extraClasses = this.getAttribute('data-extra-classes'); - let offcanvasClasses = ['offcanvas']; - let backdropClasses = ['offcanvas-backdrop fade show']; - (show == 'true') ? offcanvasClasses.push('show'): 0; - (backdrop == 'false') ? this.offcanvas.setAttribute('data-bs-backdrop', false) : 0; - (scroll == 'true') ? this.offcanvas.setAttribute('data-bs-scroll', true) : 0; - (bStatic == 'true') ? this.offcanvas.setAttribute('data-bs-backdrop', 'static') : 0; - (backdropExtraClasses != undefined && backdropExtraClasses != null) ? backdropClasses.push(backdropExtraClasses): 0; - (extraClasses != undefined && extraClasses != null) ? offcanvasClasses.push(extraClasses): 0; - if(placement != undefined && placement != null){ - offcanvasClasses.push(`offcanvas-${placement}`); - }else{ - offcanvasClasses.push('offcanvas-start'); - } - if(id != undefined && id != null){ - this.offcanvas.id = id; - this.offcanvas.setAttribute('aria-labelledby', `${id}-label`); - } - this.offcanvas.setAttribute('tabindex', -1); - this.offcanvas.className = offcanvasClasses.join(' '); - this.offcanvasBackdrop.className = backdropClasses.join(' '); - if(!this.shadowRoot.querySelector('div')){ - this.shadowRoot.appendChild(this.offcanvas); - } - } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.setAttribute('data-show', 'false'); - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Offcanvas.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Offcanvas extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.offcanvas = document.createElement('div'); + this.offcanvasBackdrop = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + this.getAttribute('data-show') == 'true' + ? node.setAttribute('data-show', true) + : 0; + if (node.tagName == 'COD-OFFCANVAS-HEADER') { + this.getAttribute('data-button-dark') == 'true' + ? node.setAttribute('data-button-dark', true) + : 0; + node.setAttribute('data-parent-id', this.getAttribute('data-id')); + } + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') + ? node.remove() + : this.offcanvas.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + let tempClasses = this.offcanvas.className.split(' '); + let popValue = tempClasses.pop(); + popValue != 'show' ? tempClasses.push(popValue) : 0; + if (newValue == 'true') { + tempClasses.push('show'); + if (this.getAttribute('data-backdrop') != 'false') { + if (this.getAttribute('data-static') != 'true') { + this.offcanvasBackdrop.addEventListener('click', this._onClick); + } + this.shadowRoot.appendChild(this.offcanvasBackdrop); + } + } else { + if (this.shadowRoot.querySelector('div.offcanvas-backdrop')) { + this.shadowRoot.removeChild(this.offcanvasBackdrop); + } + } + this.offcanvas.className = tempClasses.join(' '); + } + + connectedCallback() { + // Offcanvas attributes + let show = this.getAttribute('data-show'); + let placement = this.getAttribute('data-placement'); + let id = this.getAttribute('data-id'); + let backdrop = this.getAttribute('data-backdrop'); + let backdropExtraClasses = this.getAttribute('data-backdrop-extra-classes'); + let scroll = this.getAttribute('data-scroll'); + let bStatic = this.getAttribute('data-static'); + let extraClasses = this.getAttribute('data-extra-classes'); + let offcanvasClasses = ['offcanvas']; + let backdropClasses = ['offcanvas-backdrop fade show']; + show == 'true' ? offcanvasClasses.push('show') : 0; + backdrop == 'false' + ? this.offcanvas.setAttribute('data-bs-backdrop', false) + : 0; + scroll == 'true' ? this.offcanvas.setAttribute('data-bs-scroll', true) : 0; + bStatic == 'true' + ? this.offcanvas.setAttribute('data-bs-backdrop', 'static') + : 0; + backdropExtraClasses != undefined && backdropExtraClasses != null + ? backdropClasses.push(backdropExtraClasses) + : 0; + extraClasses != undefined && extraClasses != null + ? offcanvasClasses.push(extraClasses) + : 0; + if (placement != undefined && placement != null) { + offcanvasClasses.push(`offcanvas-${placement}`); + } else { + offcanvasClasses.push('offcanvas-start'); + } + if (id != undefined && id != null) { + this.offcanvas.id = id; + this.offcanvas.setAttribute('aria-labelledby', `${id}-label`); + } + this.offcanvas.setAttribute('tabindex', -1); + this.offcanvas.className = offcanvasClasses.join(' '); + this.offcanvasBackdrop.className = backdropClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.offcanvas); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode().host.setAttribute('data-show', 'false'); + } +} diff --git a/src/components/organisms/Offcanvas/cod-offcanvas.js b/src/components/organisms/Offcanvas/cod-offcanvas.js index a8be507c..922cf09c 100644 --- a/src/components/organisms/Offcanvas/cod-offcanvas.js +++ b/src/components/organisms/Offcanvas/cod-offcanvas.js @@ -1,2 +1,2 @@ -import Offcanvas from './Offcanvas'; -customElements.define('cod-offcanvas', Offcanvas); \ No newline at end of file +import Offcanvas from './Offcanvas'; +customElements.define('cod-offcanvas', Offcanvas); diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js index c4554fb1..e1e00807 100644 --- a/src/components/organisms/Table/Table.js +++ b/src/components/organisms/Table/Table.js @@ -1,79 +1,97 @@ -import styles from '!!raw-loader!./Table.css'; -import varStyles from '!!raw-loader!../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; - -const template = document.createElement('template'); - -template.innerHTML = ` - -`; - - -export default class Table extends HTMLElement { - - constructor() { - // Always call super first in constructor - super(); - // Create a shadow root - const shadow = this.attachShadow({ mode: 'open' }); - shadow.appendChild(template.content.cloneNode(true)); - this.tableContainer = document.createElement('div'); - this.table = document.createElement('div'); - this.table.role = 'table'; - this.tableContainer.appendChild(this.table); - - shadow.addEventListener('slotchange', e => { - let tempElements = Array.from(this.children); - tempElements.forEach((node) => { - switch (node.tagName) { - case 'COD-TABLE-HEADER': - (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; - (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; - (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; - this.table.appendChild(node); - break; - - case 'COD-TABLE-BODY': - (this.getAttribute('data-hover') == 'true') ? node.setAttribute('data-hover', 'true') : 0; - (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0; - (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; - (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; - (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; - this.table.appendChild(node); - break; - - default: - let nodeClasses = node.className.split(' '); - (nodeClasses.includes('no-wc')) ? node.remove() : 0; - break; - } - }); - }); - - // Add styles - const bootStyles = document.createElement('style'); - bootStyles.textContent = bootstrapStyles; - const variableStyles = document.createElement('style'); - variableStyles.textContent = varStyles; - const itemStyles = document.createElement('style'); - itemStyles.textContent = styles; - shadow.appendChild(bootStyles); - shadow.appendChild(variableStyles); - shadow.appendChild(itemStyles); - } - - connectedCallback() { - // Table attributes - let legacyResponsive = this.getAttribute('data-legacy-responsive'); - let id = this.getAttribute('data-id'); - let extraClasses = this.getAttribute('data-extra-classes'); - let tableClasses = ['table']; - (extraClasses != undefined && extraClasses != null) ? tableClasses.push(extraClasses) : 0; - (id != undefined && id != null) ? this.table.id = id : 0; - (legacyResponsive == 'true') ? this.tableContainer.className = 'table-responsive' : 0; - this.table.className = tableClasses.join(' '); - if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.tableContainer); - } - } -}; \ No newline at end of file +import styles from '!!raw-loader!./Table.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + +export default class Table extends HTMLElement { + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableContainer = document.createElement('div'); + this.table = document.createElement('div'); + this.table.role = 'table'; + this.tableContainer.appendChild(this.table); + + shadow.addEventListener('slotchange', (e) => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + switch (node.tagName) { + case 'COD-TABLE-HEADER': + this.getAttribute('data-striped-col') == 'true' + ? node.setAttribute('data-striped-col', 'true') + : 0; + this.getAttribute('data-vertical-align') == 'true' + ? node.setAttribute('data-vertical-align', 'true') + : 0; + this.getAttribute('data-legacy-responsive') == 'true' + ? node.setAttribute('data-legacy-responsive', 'true') + : 0; + this.table.appendChild(node); + break; + + case 'COD-TABLE-BODY': + this.getAttribute('data-hover') == 'true' + ? node.setAttribute('data-hover', 'true') + : 0; + this.getAttribute('data-striped-row') == 'true' + ? node.setAttribute('data-striped-row', 'true') + : 0; + this.getAttribute('data-striped-col') == 'true' + ? node.setAttribute('data-striped-col', 'true') + : 0; + this.getAttribute('data-vertical-align') == 'true' + ? node.setAttribute('data-vertical-align', 'true') + : 0; + this.getAttribute('data-legacy-responsive') == 'true' + ? node.setAttribute('data-legacy-responsive', 'true') + : 0; + this.table.appendChild(node); + break; + + default: + let nodeClasses = node.className.split(' '); + nodeClasses.includes('no-wc') ? node.remove() : 0; + break; + } + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // Table attributes + let legacyResponsive = this.getAttribute('data-legacy-responsive'); + let id = this.getAttribute('data-id'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableClasses = ['table']; + extraClasses != undefined && extraClasses != null + ? tableClasses.push(extraClasses) + : 0; + id != undefined && id != null ? (this.table.id = id) : 0; + legacyResponsive == 'true' + ? (this.tableContainer.className = 'table-responsive') + : 0; + this.table.className = tableClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.tableContainer); + } + } +} diff --git a/src/components/organisms/Table/cod-table.js b/src/components/organisms/Table/cod-table.js index 4f845578..ed128c5c 100644 --- a/src/components/organisms/Table/cod-table.js +++ b/src/components/organisms/Table/cod-table.js @@ -1,2 +1,2 @@ -import Table from './Table'; -customElements.define('cod-table', Table); \ No newline at end of file +import Table from './Table'; +customElements.define('cod-table', Table); diff --git a/src/index.js b/src/index.js index 317a1d41..df0d52e0 100644 --- a/src/index.js +++ b/src/index.js @@ -2,64 +2,64 @@ // Import to release // ============================================================ // Importing atoms -import "./components/atoms/AccordionBody/cod-accordion-body"; -import "./components/atoms/AccordionHeader/cod-accordion-header"; -import "./components/atoms/AccordionItem/cod-accordion-item"; -import "./components/atoms/Alert/cod-alert"; -import "./components/atoms/Badge/cod-badge"; -import "./components/atoms/Breadcrumb/cod-breadcrumb"; -import "./components/atoms/Button/cod-button"; -import "./components/atoms/CardBody/cod-card-body"; -import "./components/atoms/CardFooter/cod-card-footer"; -import "./components/atoms/CardHeader/cod-card-header"; -import "./components/atoms/CardOverlay/cod-card-overlay"; -import "./components/atoms/CarouselCaption/cod-carousel-caption"; -import "./components/atoms/CarouselItem/cod-carousel-item"; -import "./components/atoms/Container/cod-container"; -import "./components/atoms/DropdownMenu/cod-dropdown-menu"; -import "./components/atoms/FormCheck/cod-formcheck"; -import "./components/atoms/FormControl/cod-formcontrol"; -import "./components/atoms/FormLabel/cod-formlabel"; -import "./components/atoms/FormSelect/cod-formselect"; -import "./components/atoms/Icon/cod-icon"; -import "./components/atoms/Image/cod-image"; -import "./components/atoms/Loader/cod-loader"; -import "./components/atoms/ModalBody/cod-modal-body"; -import "./components/atoms/ModalFooter/cod-modal-footer"; -import "./components/atoms/ModalHeader/cod-modal-header"; -import "./components/atoms/NavbarBrand/cod-navbar-brand"; -import "./components/atoms/NavbarCollapse/cod-navbar-collapse"; -import "./components/atoms/NavbarOffcanvas/cod-navbar-offcanvas"; -import "./components/atoms/NavbarToggle/cod-navbar-toggle"; -import "./components/atoms/OffcanvasBody/cod-offcanvas-body"; -import "./components/atoms/OffcanvasHeader/cod-offcanvas-header"; -import "./components/atoms/PaginationItem/cod-pagination-item"; -import "./components/atoms/Progress/cod-progress"; -import "./components/atoms/Range/cod-range"; -import "./components/atoms/Spinner/cod-spinner"; -import "./components/atoms/TableBody/cod-table-body"; -import "./components/atoms/TableCell/cod-table-cell"; -import "./components/atoms/TableCellHeader/cod-table-cell-header"; -import "./components/atoms/TableHeader/cod-table-header"; -import "./components/atoms/TableRow/cod-table-row"; +import './components/atoms/AccordionBody/cod-accordion-body'; +import './components/atoms/AccordionHeader/cod-accordion-header'; +import './components/atoms/AccordionItem/cod-accordion-item'; +import './components/atoms/Alert/cod-alert'; +import './components/atoms/Badge/cod-badge'; +import './components/atoms/Breadcrumb/cod-breadcrumb'; +import './components/atoms/Button/cod-button'; +import './components/atoms/CardBody/cod-card-body'; +import './components/atoms/CardFooter/cod-card-footer'; +import './components/atoms/CardHeader/cod-card-header'; +import './components/atoms/CardOverlay/cod-card-overlay'; +import './components/atoms/CarouselCaption/cod-carousel-caption'; +import './components/atoms/CarouselItem/cod-carousel-item'; +import './components/atoms/Container/cod-container'; +import './components/atoms/DropdownMenu/cod-dropdown-menu'; +import './components/atoms/FormCheck/cod-formcheck'; +import './components/atoms/FormControl/cod-formcontrol'; +import './components/atoms/FormLabel/cod-formlabel'; +import './components/atoms/FormSelect/cod-formselect'; +import './components/atoms/Icon/cod-icon'; +import './components/atoms/Image/cod-image'; +import './components/atoms/Loader/cod-loader'; +import './components/atoms/ModalBody/cod-modal-body'; +import './components/atoms/ModalFooter/cod-modal-footer'; +import './components/atoms/ModalHeader/cod-modal-header'; +import './components/atoms/NavbarBrand/cod-navbar-brand'; +import './components/atoms/NavbarCollapse/cod-navbar-collapse'; +import './components/atoms/NavbarOffcanvas/cod-navbar-offcanvas'; +import './components/atoms/NavbarToggle/cod-navbar-toggle'; +import './components/atoms/OffcanvasBody/cod-offcanvas-body'; +import './components/atoms/OffcanvasHeader/cod-offcanvas-header'; +import './components/atoms/PaginationItem/cod-pagination-item'; +import './components/atoms/Progress/cod-progress'; +import './components/atoms/Range/cod-range'; +import './components/atoms/Spinner/cod-spinner'; +import './components/atoms/TableBody/cod-table-body'; +import './components/atoms/TableCell/cod-table-cell'; +import './components/atoms/TableCellHeader/cod-table-cell-header'; +import './components/atoms/TableHeader/cod-table-header'; +import './components/atoms/TableRow/cod-table-row'; // Import molecules -import "./components/molecules/Accordion/cod-accordion"; -import "./components/molecules/ButtonGroup/cod-button-group"; -import "./components/molecules/Dropdown/cod-dropdown"; -import "./components/molecules/FormCheckGroup/cod-form-check-group"; -import "./components/molecules/ListGroup/cod-listgroup"; -import "./components/molecules/Nav/cod-nav"; -import "./components/molecules/Pagination/cod-pagination"; +import './components/molecules/Accordion/cod-accordion'; +import './components/molecules/ButtonGroup/cod-button-group'; +import './components/molecules/Dropdown/cod-dropdown'; +import './components/molecules/FormCheckGroup/cod-form-check-group'; +import './components/molecules/ListGroup/cod-listgroup'; +import './components/molecules/Nav/cod-nav'; +import './components/molecules/Pagination/cod-pagination'; // Importing organisms -import "./components/organisms/Card/cod-card"; -import "./components/organisms/Carousel/cod-carousel"; -import "./components/organisms/Form/cod-form"; -import "./components/organisms/Modal/cod-modal"; -import "./components/organisms/Navbar/cod-navbar"; -import "./components/organisms/Offcanvas/cod-offcanvas"; -import "./components/organisms/Table/cod-table"; +import './components/organisms/Card/cod-card'; +import './components/organisms/Carousel/cod-carousel'; +import './components/organisms/Form/cod-form'; +import './components/organisms/Modal/cod-modal'; +import './components/organisms/Navbar/cod-navbar'; +import './components/organisms/Offcanvas/cod-offcanvas'; +import './components/organisms/Table/cod-table'; // // ============================================================ // // Exporting to npm @@ -84,4 +84,4 @@ import "./components/organisms/Table/cod-table"; // export * from "./components/molecules/FormCheckGroup/cod-form-check-group"; // // Importing organisms -// export * from "./components/organisms/Form/cod-form"; \ No newline at end of file +// export * from "./components/organisms/Form/cod-form"; diff --git a/src/scss/_host.scss b/src/scss/_host.scss index 29badbde..c76f9115 100644 --- a/src/scss/_host.scss +++ b/src/scss/_host.scss @@ -1,5 +1,5 @@ :host, -[data-bs-theme="light"] { +[data-bs-theme='light'] { // Note: Custom variable values only support SassScript inside `#{}`. // Colors @@ -106,7 +106,9 @@ --#{$prefix}border-radius-lg: #{$border-radius-lg}; --#{$prefix}border-radius-xl: #{$border-radius-xl}; --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; - --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency + --#{$prefix}border-radius-2xl: var( + --#{$prefix}border-radius-xxl + ); // Deprecated in v5.3.0 for consistency --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var diff --git a/src/scss/themed-bootstrap.scss b/src/scss/themed-bootstrap.scss index 831be69f..36914b02 100644 --- a/src/scss/themed-bootstrap.scss +++ b/src/scss/themed-bootstrap.scss @@ -1,18 +1,18 @@ -// Custom.scss -// Option A: Include all of Bootstrap -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); -$primary: #004445 !default; -$secondary: #e6e6e6 !default; -$success: #9FD5B3 !default; -$info: #004445 !default; -$warning: #feb70d !default; -$danger: #b3393b !default; -$light: #fff !default; -$dark: #000 !default; -$font-family-sans-serif: 'Montserrat', sans-serif; -$font-family-monospace: 'Montserrat', sans-serif; - -@import "../../node_modules/bootstrap/scss/bootstrap"; -@import "./host"; - -// Then add additional custom code here \ No newline at end of file +// Custom.scss +// Option A: Include all of Bootstrap +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); +$primary: #004445 !default; +$secondary: #e6e6e6 !default; +$success: #9fd5b3 !default; +$info: #004445 !default; +$warning: #feb70d !default; +$danger: #b3393b !default; +$light: #fff !default; +$dark: #000 !default; +$font-family-sans-serif: 'Montserrat', sans-serif; +$font-family-monospace: 'Montserrat', sans-serif; + +@import '../../node_modules/bootstrap/scss/bootstrap'; +@import './host'; + +// Then add additional custom code here diff --git a/src/shared/themed-bootstrap.css b/src/shared/themed-bootstrap.css index aa8b4537..105510fc 100644 --- a/src/shared/themed-bootstrap.css +++ b/src/shared/themed-bootstrap.css @@ -1,12 +1,12 @@ @charset "UTF-8"; -@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); /*! * Bootstrap v5.3.0-alpha3 (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root, -[data-bs-theme=light] { +[data-bs-theme='light'] { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; @@ -32,7 +32,7 @@ --bs-gray-900: #212529; --bs-primary: #004445; --bs-secondary: #e6e6e6; - --bs-success: #9FD5B3; + --bs-success: #9fd5b3; --bs-info: #004445; --bs-warning: #feb70d; --bs-danger: #b3393b; @@ -72,9 +72,13 @@ --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; - --bs-font-sans-serif: "Montserrat", sans-serif; - --bs-font-monospace: "Montserrat", sans-serif; - --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-font-sans-serif: 'Montserrat', sans-serif; + --bs-font-monospace: 'Montserrat', sans-serif; + --bs-gradient: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.15), + rgba(255, 255, 255, 0) + ); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1em; --bs-body-font-weight: 400; @@ -118,13 +122,13 @@ --bs-focus-ring-width: 0.25em; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(0, 68, 69, 0.25); - --bs-form-valid-color: #9FD5B3; - --bs-form-valid-border-color: #9FD5B3; + --bs-form-valid-color: #9fd5b3; + --bs-form-valid-border-color: #9fd5b3; --bs-form-invalid-color: #b3393b; --bs-form-invalid-border-color: #b3393b; } -[data-bs-theme=dark] { +[data-bs-theme='dark'] { color-scheme: dark; --bs-body-color: #adb5bd; --bs-body-color-rgb: 173, 181, 189; @@ -210,7 +214,18 @@ hr { opacity: 0.25; } -h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { +h6, +.h6, +h5, +.h5, +h4, +.h4, +h3, +.h3, +h2, +.h2, +h1, +.h1 { margin-top: 0; margin-bottom: 0.5em; font-weight: 500; @@ -218,27 +233,33 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { color: var(--bs-heading-color, inherit); } -h1, .h1 { +h1, +.h1 { font-size: 2.5em; } -h2, .h2 { +h2, +.h2 { font-size: 2em; } -h3, .h3 { +h3, +.h3 { font-size: 1.75em; } -h4, .h4 { +h4, +.h4 { font-size: 1.5em; } -h5, .h5 { +h5, +.h5 { font-size: 1.25em; } -h6, .h6 { +h6, +.h6 { font-size: 1em; } @@ -296,11 +317,13 @@ strong { font-weight: bolder; } -small, .small { +small, +.small { font-size: 0.875em; } -mark, .mark { +mark, +.mark { padding: 0.1875em; background-color: var(--bs-highlight-bg); } @@ -329,7 +352,8 @@ a:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb); } -a:not([href]):not([class]), a:not([href]):not([class]):hover { +a:not([href]):not([class]), +a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } @@ -441,7 +465,7 @@ select { text-transform: none; } -[role=button] { +[role='button'] { cursor: pointer; } @@ -452,20 +476,22 @@ select:disabled { opacity: 1; } -[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { +[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not( + [type='week'] + ):not([type='time'])::-webkit-calendar-picker-indicator { display: none !important; } button, -[type=button], -[type=reset], -[type=submit] { +[type='button'], +[type='reset'], +[type='submit'] { -webkit-appearance: button; } button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { +[type='button']:not(:disabled), +[type='reset']:not(:disabled), +[type='submit']:not(:disabled) { cursor: pointer; } @@ -511,7 +537,7 @@ legend + * { height: auto; } -[type=search] { +[type='search'] { outline-offset: -2px; -webkit-appearance: textfield; } @@ -636,7 +662,7 @@ progress { color: #6c757d; } .blockquote-footer::before { - content: "— "; + content: '— '; } .img-fluid { @@ -684,27 +710,42 @@ progress { } @media (min-width: 576px) { - .container-sm, .container { + .container-sm, + .container { max-width: 540px; } } @media (min-width: 768px) { - .container-md, .container-sm, .container { + .container-md, + .container-sm, + .container { max-width: 720px; } } @media (min-width: 992px) { - .container-lg, .container-md, .container-sm, .container { + .container-lg, + .container-md, + .container-sm, + .container { max-width: 960px; } } @media (min-width: 1200px) { - .container-xl, .container-lg, .container-md, .container-sm, .container { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1140px; } } @media (min-width: 1400px) { - .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1320px; } } @@ -2054,17 +2095,19 @@ progress { border: var(--bs-border-width) solid var(--bs-border-color); appearance: none; border-radius: var(--bs-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } } -.form-control[type=file] { +.form-control[type='file'] { overflow: hidden; } -.form-control[type=file]:not(:disabled):not([readonly]) { +.form-control[type='file']:not(:disabled):not([readonly]) { cursor: pointer; } .form-control:focus { @@ -2103,7 +2146,11 @@ progress { border-width: 0; border-inline-end-width: var(--bs-border-width); border-radius: 0; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control::file-selector-button { @@ -2128,7 +2175,8 @@ progress { .form-control-plaintext:focus { outline: 0; } -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { +.form-control-plaintext.form-control-sm, +.form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } @@ -2200,13 +2248,16 @@ textarea.form-control-lg { line-height: 1.5; color: var(--bs-body-color); background-color: var(--bs-body-bg); - background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); + background-image: var(--bs-form-select-bg-img), + var(--bs-form-select-bg-icon, none); background-repeat: no-repeat; background-position: right 0.75em center; background-size: 16px 12px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; appearance: none; } @media (prefers-reduced-motion: reduce) { @@ -2219,7 +2270,8 @@ textarea.form-control-lg { outline: 0; box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); } -.form-select[multiple], .form-select[size]:not([size="1"]) { +.form-select[multiple], +.form-select[size]:not([size='1']) { padding-right: 0.75em; background-image: none; } @@ -2247,7 +2299,7 @@ textarea.form-control-lg { border-radius: var(--bs-border-radius-lg); } -[data-bs-theme=dark] .form-select { +[data-bs-theme='dark'] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } @@ -2288,10 +2340,10 @@ textarea.form-control-lg { appearance: none; print-color-adjust: exact; } -.form-check-input[type=checkbox] { +.form-check-input[type='checkbox'] { border-radius: 0.25em; } -.form-check-input[type=radio] { +.form-check-input[type='radio'] { border-radius: 50%; } .form-check-input:active { @@ -2306,13 +2358,13 @@ textarea.form-control-lg { background-color: #004445; border-color: #004445; } -.form-check-input:checked[type=checkbox] { +.form-check-input:checked[type='checkbox'] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } -.form-check-input:checked[type=radio] { +.form-check-input:checked[type='radio'] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } -.form-check-input[type=checkbox]:indeterminate { +.form-check-input[type='checkbox']:indeterminate { background-color: #004445; border-color: #004445; --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); @@ -2322,7 +2374,8 @@ textarea.form-control-lg { filter: none; opacity: 0.5; } -.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { +.form-check-input[disabled] ~ .form-check-label, +.form-check-input:disabled ~ .form-check-label { cursor: default; opacity: 0.5; } @@ -2370,13 +2423,16 @@ textarea.form-control-lg { clip: rect(0, 0, 0, 0); pointer-events: none; } -.btn-check[disabled] + .btn, .btn-check:disabled + .btn { +.btn-check[disabled] + .btn, +.btn-check:disabled + .btn { pointer-events: none; filter: none; opacity: 0.65; } -[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) { +[data-bs-theme='dark'] + .form-switch + .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); } @@ -2391,10 +2447,14 @@ textarea.form-control-lg { outline: 0; } .form-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.25em rgba(0, 68, 69, 0.25); + box-shadow: + 0 0 0 1px #fff, + 0 0 0 0.25em rgba(0, 68, 69, 0.25); } .form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.25em rgba(0, 68, 69, 0.25); + box-shadow: + 0 0 0 1px #fff, + 0 0 0 0.25em rgba(0, 68, 69, 0.25); } .form-range::-moz-focus-outer { border: 0; @@ -2406,7 +2466,10 @@ textarea.form-control-lg { background-color: #004445; border: 0; border-radius: 1em; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; appearance: none; } @media (prefers-reduced-motion: reduce) { @@ -2432,7 +2495,10 @@ textarea.form-control-lg { background-color: #004445; border: 0; border-radius: 1em; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; appearance: none; } @media (prefers-reduced-motion: reduce) { @@ -2485,7 +2551,9 @@ textarea.form-control-lg { pointer-events: none; border: var(--bs-border-width) solid transparent; transform-origin: 0 0; - transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; + transition: + opacity 0.1s ease-in-out, + transform 0.1s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-floating > label { @@ -2500,7 +2568,8 @@ textarea.form-control-lg { .form-floating > .form-control-plaintext::placeholder { color: transparent; } -.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), +.form-floating > .form-control:focus, +.form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown) { padding-top: 1.625em; @@ -2530,7 +2599,7 @@ textarea.form-control-lg { inset: 1em 0.375em; z-index: -1; height: 1.5em; - content: ""; + content: ''; background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); } @@ -2614,21 +2683,38 @@ textarea.form-control-lg { padding-right: 3em; } -.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), -.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select { +.input-group:not(.has-validation) + > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not( + .form-floating + ), +.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), +.input-group:not(.has-validation) + > .form-floating:not(:last-child) + > .form-control, +.input-group:not(.has-validation) + > .form-floating:not(:last-child) + > .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), -.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), -.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control, -.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select { +.input-group.has-validation + > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not( + .form-floating + ), +.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4), +.input-group.has-validation + > .form-floating:nth-last-child(n + 3) + > .form-control, +.input-group.has-validation + > .form-floating:nth-last-child(n + 3) + > .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { +.input-group + > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not( + .valid-feedback + ):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(var(--bs-border-width) * -1); border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -2668,7 +2754,8 @@ textarea.form-control-lg { display: block; } -.was-validated .form-control:valid, .form-control.is-valid { +.was-validated .form-control:valid, +.form-control.is-valid { border-color: var(--bs-form-valid-border-color); padding-right: 2.25em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%239FD5B3' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); @@ -2676,44 +2763,60 @@ textarea.form-control-lg { background-position: right 0.5625em center; background-size: 1.125em 1.125em; } -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { +.was-validated .form-control:valid:focus, +.form-control.is-valid:focus { border-color: var(--bs-form-valid-border-color); box-shadow: 0 0 0 0.25em rgba(var(--bs-success-rgb), 0.25); } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { +.was-validated textarea.form-control:valid, +textarea.form-control.is-valid { padding-right: 2.25em; background-position: top 0.5625em right 0.5625em; } -.was-validated .form-select:valid, .form-select.is-valid { +.was-validated .form-select:valid, +.form-select.is-valid { border-color: var(--bs-form-valid-border-color); } -.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { +.was-validated .form-select:valid:not([multiple]):not([size]), +.was-validated .form-select:valid:not([multiple])[size='1'], +.form-select.is-valid:not([multiple]):not([size]), +.form-select.is-valid:not([multiple])[size='1'] { --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%239FD5B3' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); padding-right: 4.125em; - background-position: right 0.75em center, center right 2.25em; - background-size: 16px 12px, 1.125em 1.125em; -} -.was-validated .form-select:valid:focus, .form-select.is-valid:focus { + background-position: + right 0.75em center, + center right 2.25em; + background-size: + 16px 12px, + 1.125em 1.125em; +} +.was-validated .form-select:valid:focus, +.form-select.is-valid:focus { border-color: var(--bs-form-valid-border-color); box-shadow: 0 0 0 0.25em rgba(var(--bs-success-rgb), 0.25); } -.was-validated .form-control-color:valid, .form-control-color.is-valid { +.was-validated .form-control-color:valid, +.form-control-color.is-valid { width: 5.25em; } -.was-validated .form-check-input:valid, .form-check-input.is-valid { +.was-validated .form-check-input:valid, +.form-check-input.is-valid { border-color: var(--bs-form-valid-border-color); } -.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { +.was-validated .form-check-input:valid:checked, +.form-check-input.is-valid:checked { background-color: var(--bs-form-valid-color); } -.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { +.was-validated .form-check-input:valid:focus, +.form-check-input.is-valid:focus { box-shadow: 0 0 0 0.25em rgba(var(--bs-success-rgb), 0.25); } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { +.was-validated .form-check-input:valid ~ .form-check-label, +.form-check-input.is-valid ~ .form-check-label { color: var(--bs-form-valid-color); } @@ -2721,7 +2824,8 @@ textarea.form-control-lg { margin-left: 0.5em; } -.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, +.was-validated .input-group > .form-control:not(:focus):valid, +.input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, @@ -2758,7 +2862,8 @@ textarea.form-control-lg { display: block; } -.was-validated .form-control:invalid, .form-control.is-invalid { +.was-validated .form-control:invalid, +.form-control.is-invalid { border-color: var(--bs-form-invalid-border-color); padding-right: 2.25em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b3393b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b3393b' stroke='none'/%3e%3c/svg%3e"); @@ -2766,44 +2871,60 @@ textarea.form-control-lg { background-position: right 0.5625em center; background-size: 1.125em 1.125em; } -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { +.was-validated .form-control:invalid:focus, +.form-control.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 0.25em rgba(var(--bs-danger-rgb), 0.25); } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { +.was-validated textarea.form-control:invalid, +textarea.form-control.is-invalid { padding-right: 2.25em; background-position: top 0.5625em right 0.5625em; } -.was-validated .form-select:invalid, .form-select.is-invalid { +.was-validated .form-select:invalid, +.form-select.is-invalid { border-color: var(--bs-form-invalid-border-color); } -.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { +.was-validated .form-select:invalid:not([multiple]):not([size]), +.was-validated .form-select:invalid:not([multiple])[size='1'], +.form-select.is-invalid:not([multiple]):not([size]), +.form-select.is-invalid:not([multiple])[size='1'] { --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b3393b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b3393b' stroke='none'/%3e%3c/svg%3e"); padding-right: 4.125em; - background-position: right 0.75em center, center right 2.25em; - background-size: 16px 12px, 1.125em 1.125em; -} -.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { + background-position: + right 0.75em center, + center right 2.25em; + background-size: + 16px 12px, + 1.125em 1.125em; +} +.was-validated .form-select:invalid:focus, +.form-select.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 0.25em rgba(var(--bs-danger-rgb), 0.25); } -.was-validated .form-control-color:invalid, .form-control-color.is-invalid { +.was-validated .form-control-color:invalid, +.form-control-color.is-invalid { width: 5.25em; } -.was-validated .form-check-input:invalid, .form-check-input.is-invalid { +.was-validated .form-check-input:invalid, +.form-check-input.is-invalid { border-color: var(--bs-form-invalid-border-color); } -.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { +.was-validated .form-check-input:invalid:checked, +.form-check-input.is-invalid:checked { background-color: var(--bs-form-invalid-color); } -.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { +.was-validated .form-check-input:invalid:focus, +.form-check-input.is-invalid:focus { box-shadow: 0 0 0 0.25em rgba(var(--bs-danger-rgb), 0.25); } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { +.was-validated .form-check-input:invalid ~ .form-check-label, +.form-check-input.is-invalid ~ .form-check-label { color: var(--bs-form-invalid-color); } @@ -2811,7 +2932,8 @@ textarea.form-control-lg { margin-left: 0.5em; } -.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, +.was-validated .input-group > .form-control:not(:focus):invalid, +.input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, @@ -2832,9 +2954,11 @@ textarea.form-control-lg { --bs-btn-border-color: transparent; --bs-btn-border-radius: var(--bs-border-radius); --bs-btn-hover-border-color: transparent; - --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), + 0 1px 1px rgba(0, 0, 0, 0.075); --bs-btn-disabled-opacity: 0.65; - --bs-btn-focus-box-shadow: 0 0 0 0.25em rgba(var(--bs-btn-focus-shadow-rgb), .5); + --bs-btn-focus-box-shadow: 0 0 0 0.25em + rgba(var(--bs-btn-focus-shadow-rgb), 0.5); display: inline-block; padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); font-family: var(--bs-btn-font-family); @@ -2850,7 +2974,11 @@ textarea.form-control-lg { border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); border-radius: var(--bs-btn-border-radius); background-color: var(--bs-btn-bg); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { @@ -2879,15 +3007,25 @@ textarea.form-control-lg { outline: 0; box-shadow: var(--bs-btn-focus-box-shadow); } -.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { +.btn-check:checked + .btn, +:not(.btn-check) + .btn:active, +.btn:first-child:active, +.btn.active, +.btn.show { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); } -.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible { +.btn-check:checked + .btn:focus-visible, +:not(.btn-check) + .btn:active:focus-visible, +.btn:first-child:active:focus-visible, +.btn.active:focus-visible, +.btn.show:focus-visible { box-shadow: var(--bs-btn-focus-box-shadow); } -.btn:disabled, .btn.disabled, fieldset:disabled .btn { +.btn:disabled, +.btn.disabled, +fieldset:disabled .btn { color: var(--bs-btn-disabled-color); pointer-events: none; background-color: var(--bs-btn-disabled-bg); @@ -2931,8 +3069,8 @@ textarea.form-control-lg { .btn-success { --bs-btn-color: #000; - --bs-btn-bg: #9FD5B3; - --bs-btn-border-color: #9FD5B3; + --bs-btn-bg: #9fd5b3; + --bs-btn-border-color: #9fd5b3; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #addbbe; --bs-btn-hover-border-color: #a9d9bb; @@ -2942,8 +3080,8 @@ textarea.form-control-lg { --bs-btn-active-border-color: #a9d9bb; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #9FD5B3; - --bs-btn-disabled-border-color: #9FD5B3; + --bs-btn-disabled-bg: #9fd5b3; + --bs-btn-disabled-border-color: #9fd5b3; } .btn-info { @@ -3066,19 +3204,19 @@ textarea.form-control-lg { } .btn-outline-success { - --bs-btn-color: #9FD5B3; - --bs-btn-border-color: #9FD5B3; + --bs-btn-color: #9fd5b3; + --bs-btn-border-color: #9fd5b3; --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #9FD5B3; - --bs-btn-hover-border-color: #9FD5B3; + --bs-btn-hover-bg: #9fd5b3; + --bs-btn-hover-border-color: #9fd5b3; --bs-btn-focus-shadow-rgb: 159, 213, 179; --bs-btn-active-color: #000; - --bs-btn-active-bg: #9FD5B3; - --bs-btn-active-border-color: #9FD5B3; + --bs-btn-active-bg: #9fd5b3; + --bs-btn-active-border-color: #9fd5b3; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #9FD5B3; + --bs-btn-disabled-color: #9fd5b3; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #9FD5B3; + --bs-btn-disabled-border-color: #9fd5b3; --bs-gradient: none; } @@ -3189,14 +3327,16 @@ textarea.form-control-lg { color: var(--bs-btn-hover-color); } -.btn-lg, .btn-group-lg > .btn { +.btn-lg, +.btn-group-lg > .btn { --bs-btn-padding-y: 0.5em; --bs-btn-padding-x: 1em; --bs-btn-font-size: 1.25em; --bs-btn-border-radius: var(--bs-border-radius-lg); } -.btn-sm, .btn-group-sm > .btn { +.btn-sm, +.btn-group-sm > .btn { --bs-btn-padding-y: 0.25em; --bs-btn-padding-x: 0.5em; --bs-btn-font-size: 0.875em; @@ -3256,7 +3396,7 @@ textarea.form-control-lg { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; - content: ""; + content: ''; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; @@ -3278,7 +3418,9 @@ textarea.form-control-lg { --bs-dropdown-border-color: var(--bs-border-color-translucent); --bs-dropdown-border-radius: var(--bs-border-radius); --bs-dropdown-border-width: var(--bs-border-width); - --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width)); + --bs-dropdown-inner-border-radius: calc( + var(--bs-border-radius) - var(--bs-border-width) + ); --bs-dropdown-divider-bg: var(--bs-border-color-translucent); --bs-dropdown-divider-margin-y: 0.5em; --bs-dropdown-box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15); @@ -3420,7 +3562,7 @@ textarea.form-control-lg { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; - content: ""; + content: ''; border-top: 0; border-right: 0.3em solid transparent; border-bottom: 0.3em solid; @@ -3441,7 +3583,7 @@ textarea.form-control-lg { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; - content: ""; + content: ''; border-top: 0.3em solid transparent; border-right: 0; border-bottom: 0.3em solid transparent; @@ -3465,7 +3607,7 @@ textarea.form-control-lg { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; - content: ""; + content: ''; } .dropstart .dropdown-toggle::after { display: none; @@ -3474,7 +3616,7 @@ textarea.form-control-lg { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; - content: ""; + content: ''; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; @@ -3508,16 +3650,19 @@ textarea.form-control-lg { border: 0; border-radius: var(--bs-dropdown-item-border-radius, 0); } -.dropdown-item:hover, .dropdown-item:focus { +.dropdown-item:hover, +.dropdown-item:focus { color: var(--bs-dropdown-link-hover-color); background-color: var(--bs-dropdown-link-hover-bg); } -.dropdown-item.active, .dropdown-item:active { +.dropdown-item.active, +.dropdown-item:active { color: var(--bs-dropdown-link-active-color); text-decoration: none; background-color: var(--bs-dropdown-link-active-bg); } -.dropdown-item.disabled, .dropdown-item:disabled { +.dropdown-item.disabled, +.dropdown-item:disabled { color: var(--bs-dropdown-link-disabled-color); pointer-events: none; background-color: transparent; @@ -3529,7 +3674,8 @@ textarea.form-control-lg { .dropdown-header { display: block; - padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); + padding: var(--bs-dropdown-header-padding-y) + var(--bs-dropdown-header-padding-x); margin-bottom: 0; font-size: 0.875em; color: var(--bs-dropdown-header-color); @@ -3605,7 +3751,7 @@ textarea.form-control-lg { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.btn-group > .btn:nth-child(n+3), +.btn-group > .btn:nth-child(n + 3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; @@ -3616,19 +3762,23 @@ textarea.form-control-lg { padding-right: 0.5625em; padding-left: 0.5625em; } -.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after { +.dropdown-toggle-split::after, +.dropup .dropdown-toggle-split::after, +.dropend .dropdown-toggle-split::after { margin-left: 0; } .dropstart .dropdown-toggle-split::before { margin-right: 0; } -.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375em; padding-left: 0.375em; } -.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75em; padding-left: 0.75em; } @@ -3680,14 +3830,18 @@ textarea.form-control-lg { text-decoration: none; background: none; border: 0; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .nav-link { transition: none; } } -.nav-link:hover, .nav-link:focus { +.nav-link:hover, +.nav-link:focus { color: var(--bs-nav-link-hover-color); } .nav-link:focus-visible { @@ -3704,11 +3858,14 @@ textarea.form-control-lg { --bs-nav-tabs-border-width: var(--bs-border-width); --bs-nav-tabs-border-color: var(--bs-border-color); --bs-nav-tabs-border-radius: var(--bs-border-radius); - --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color); + --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) + var(--bs-secondary-bg) var(--bs-border-color); --bs-nav-tabs-link-active-color: var(--bs-emphasis-color); --bs-nav-tabs-link-active-bg: var(--bs-body-bg); - --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg); - border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); + --bs-nav-tabs-link-active-border-color: var(--bs-border-color) + var(--bs-border-color) var(--bs-body-bg); + border-bottom: var(--bs-nav-tabs-border-width) solid + var(--bs-nav-tabs-border-color); } .nav-tabs .nav-link { margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); @@ -3716,11 +3873,13 @@ textarea.form-control-lg { border-top-left-radius: var(--bs-nav-tabs-border-radius); border-top-right-radius: var(--bs-nav-tabs-border-radius); } -.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { isolation: isolate; border-color: var(--bs-nav-tabs-link-hover-border-color); } -.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled { +.nav-tabs .nav-link.disabled, +.nav-tabs .nav-link:disabled { color: var(--bs-nav-link-disabled-color); background-color: transparent; border-color: transparent; @@ -3767,7 +3926,8 @@ textarea.form-control-lg { padding-left: 0; border-bottom: var(--bs-nav-underline-border-width) solid transparent; } -.nav-underline .nav-link:hover, .nav-underline .nav-link:focus { +.nav-underline .nav-link:hover, +.nav-underline .nav-link:focus { border-bottom-color: currentcolor; } .nav-underline .nav-link.active, @@ -3851,7 +4011,8 @@ textarea.form-control-lg { text-decoration: none; white-space: nowrap; } -.navbar-brand:hover, .navbar-brand:focus { +.navbar-brand:hover, +.navbar-brand:focus { color: var(--bs-navbar-brand-hover-color); } @@ -3868,7 +4029,8 @@ textarea.form-control-lg { margin-bottom: 0; list-style: none; } -.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { +.navbar-nav .nav-link.active, +.navbar-nav .nav-link.show { color: var(--bs-navbar-active-color); } .navbar-nav .dropdown-menu { @@ -4224,7 +4386,7 @@ textarea.form-control-lg { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } -[data-bs-theme=dark] .navbar-toggler-icon { +[data-bs-theme='dark'] .navbar-toggler-icon { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } @@ -4238,7 +4400,9 @@ textarea.form-control-lg { --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-border-radius: var(--bs-border-radius); --bs-card-box-shadow: ; - --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); + --bs-card-inner-border-radius: calc( + var(--bs-border-radius) - (var(--bs-border-width)) + ); --bs-card-cap-padding-y: 0.5em; --bs-card-cap-padding-x: 1em; --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03); @@ -4316,7 +4480,8 @@ textarea.form-control-lg { border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color); } .card-header:first-child { - border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; + border-radius: var(--bs-card-inner-border-radius) + var(--bs-card-inner-border-radius) 0 0; } .card-footer { @@ -4326,7 +4491,8 @@ textarea.form-control-lg { border-top: var(--bs-card-border-width) solid var(--bs-card-border-color); } .card-footer:last-child { - border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); + border-radius: 0 0 var(--bs-card-inner-border-radius) + var(--bs-card-inner-border-radius); } .card-header-tabs { @@ -4418,11 +4584,15 @@ textarea.form-control-lg { .accordion { --bs-accordion-color: var(--bs-body-color); --bs-accordion-bg: var(--bs-body-bg); - --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; + --bs-accordion-transition: color 0.15s ease-in-out, + background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out, border-radius 0.15s ease; --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-border-width: var(--bs-border-width); --bs-accordion-border-radius: var(--bs-border-radius); - --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); + --bs-accordion-inner-border-radius: calc( + var(--bs-border-radius) - (var(--bs-border-width)) + ); --bs-accordion-btn-padding-x: 1.25em; --bs-accordion-btn-padding-y: 1em; --bs-accordion-btn-color: var(--bs-body-color); @@ -4463,7 +4633,8 @@ textarea.form-control-lg { .accordion-button:not(.collapsed) { color: var(--bs-accordion-active-color); background-color: var(--bs-accordion-active-bg); - box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); + box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 + var(--bs-accordion-border-color); } .accordion-button:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); @@ -4474,7 +4645,7 @@ textarea.form-control-lg { width: var(--bs-accordion-btn-icon-width); height: var(--bs-accordion-btn-icon-width); margin-left: auto; - content: ""; + content: ''; background-image: var(--bs-accordion-btn-icon); background-repeat: no-repeat; background-size: var(--bs-accordion-btn-icon-width); @@ -4502,7 +4673,8 @@ textarea.form-control-lg { .accordion-item { color: var(--bs-accordion-color); background-color: var(--bs-accordion-bg); - border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); + border: var(--bs-accordion-border-width) solid + var(--bs-accordion-border-color); } .accordion-item:first-of-type { border-top-left-radius: var(--bs-accordion-border-radius); @@ -4546,11 +4718,12 @@ textarea.form-control-lg { .accordion-flush .accordion-item:last-child { border-bottom: 0; } -.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed { +.accordion-flush .accordion-item .accordion-button, +.accordion-flush .accordion-item .accordion-button.collapsed { border-radius: 0; } -[data-bs-theme=dark] .accordion-button::after { +[data-bs-theme='dark'] .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23668f8f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23668f8f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } @@ -4581,7 +4754,8 @@ textarea.form-control-lg { float: left; padding-right: var(--bs-breadcrumb-item-padding-x); color: var(--bs-breadcrumb-divider-color); - content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; + content: var(--bs-breadcrumb-divider, '/') + /* rtl: var(--bs-breadcrumb-divider, "/") */; } .breadcrumb-item.active { color: var(--bs-breadcrumb-item-active-color); @@ -4621,8 +4795,13 @@ textarea.form-control-lg { color: var(--bs-pagination-color); text-decoration: none; background-color: var(--bs-pagination-bg); - border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + border: var(--bs-pagination-border-width) solid + var(--bs-pagination-border-color); + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .page-link { @@ -4642,13 +4821,15 @@ textarea.form-control-lg { outline: 0; box-shadow: var(--bs-pagination-focus-box-shadow); } -.page-link.active, .active > .page-link { +.page-link.active, +.active > .page-link { z-index: 3; color: var(--bs-pagination-active-color); background-color: var(--bs-pagination-active-bg); border-color: var(--bs-pagination-active-border-color); } -.page-link.disabled, .disabled > .page-link { +.page-link.disabled, +.disabled > .page-link { color: var(--bs-pagination-disabled-color); pointer-events: none; background-color: var(--bs-pagination-disabled-bg); @@ -4844,7 +5025,16 @@ textarea.form-control-lg { } .progress-bar-striped { - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient( + 45deg, + rgba(255, 255, 255, 0.15) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.15) 50%, + rgba(255, 255, 255, 0.15) 75%, + transparent 75%, + transparent + ); background-size: var(--bs-progress-height) var(--bs-progress-height); } @@ -4895,7 +5085,7 @@ textarea.form-control-lg { counter-reset: section; } .list-group-numbered > .list-group-item::before { - content: counters(section, ".") ". "; + content: counters(section, '.') '. '; counter-increment: section; } @@ -4904,7 +5094,8 @@ textarea.form-control-lg { color: var(--bs-list-group-action-color); text-align: inherit; } -.list-group-item-action:hover, .list-group-item-action:focus { +.list-group-item-action:hover, +.list-group-item-action:focus { z-index: 1; color: var(--bs-list-group-action-hover-color); text-decoration: none; @@ -4918,11 +5109,13 @@ textarea.form-control-lg { .list-group-item { position: relative; display: block; - padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x); + padding: var(--bs-list-group-item-padding-y) + var(--bs-list-group-item-padding-x); color: var(--bs-list-group-color); text-decoration: none; background-color: var(--bs-list-group-bg); - border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color); + border: var(--bs-list-group-border-width) solid + var(--bs-list-group-border-color); } .list-group-item:first-child { border-top-left-radius: inherit; @@ -4932,7 +5125,8 @@ textarea.form-control-lg { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } -.list-group-item.disabled, .list-group-item:disabled { +.list-group-item.disabled, +.list-group-item:disabled { color: var(--bs-list-group-disabled-color); pointer-events: none; background-color: var(--bs-list-group-disabled-bg); @@ -5237,7 +5431,8 @@ textarea.form-control-lg { box-shadow: var(--bs-btn-close-focus-shadow); opacity: var(--bs-btn-close-focus-opacity); } -.btn-close:disabled, .btn-close.disabled { +.btn-close:disabled, +.btn-close.disabled { pointer-events: none; user-select: none; opacity: var(--bs-btn-close-disabled-opacity); @@ -5247,7 +5442,7 @@ textarea.form-control-lg { filter: var(--bs-btn-close-white-filter); } -[data-bs-theme=dark] .btn-close { +[data-bs-theme='dark'] .btn-close { filter: var(--bs-btn-close-white-filter); } @@ -5304,9 +5499,14 @@ textarea.form-control-lg { color: var(--bs-toast-header-color); background-color: var(--bs-toast-header-bg); background-clip: padding-box; - border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color); - border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); - border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); + border-bottom: var(--bs-toast-border-width) solid + var(--bs-toast-header-border-color); + border-top-left-radius: calc( + var(--bs-toast-border-radius) - var(--bs-toast-border-width) + ); + border-top-right-radius: calc( + var(--bs-toast-border-radius) - var(--bs-toast-border-width) + ); } .toast-header .btn-close { margin-right: calc(-0.5 * var(--bs-toast-padding-x)); @@ -5329,7 +5529,9 @@ textarea.form-control-lg { --bs-modal-border-width: var(--bs-border-width); --bs-modal-border-radius: var(--bs-border-radius-lg); --bs-modal-box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.075); - --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width))); + --bs-modal-inner-border-radius: calc( + var(--bs-border-radius-lg) - (var(--bs-border-width)) + ); --bs-modal-header-padding-x: 1em; --bs-modal-header-padding-y: 1em; --bs-modal-header-padding: 1em 1em; @@ -5430,13 +5632,17 @@ textarea.form-control-lg { align-items: center; justify-content: space-between; padding: var(--bs-modal-header-padding); - border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); + border-bottom: var(--bs-modal-header-border-width) solid + var(--bs-modal-header-border-color); border-top-left-radius: var(--bs-modal-inner-border-radius); border-top-right-radius: var(--bs-modal-inner-border-radius); } .modal-header .btn-close { - padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5); - margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto; + padding: calc(var(--bs-modal-header-padding-y) * 0.5) + calc(var(--bs-modal-header-padding-x) * 0.5); + margin: calc(-0.5 * var(--bs-modal-header-padding-y)) + calc(-0.5 * var(--bs-modal-header-padding-x)) + calc(-0.5 * var(--bs-modal-header-padding-y)) auto; } .modal-title { @@ -5458,7 +5664,8 @@ textarea.form-control-lg { justify-content: flex-end; padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5); background-color: var(--bs-modal-footer-bg); - border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); + border-top: var(--bs-modal-footer-border-width) solid + var(--bs-modal-footer-border-color); border-bottom-right-radius: var(--bs-modal-inner-border-radius); border-bottom-left-radius: var(--bs-modal-inner-border-radius); } @@ -5654,51 +5861,63 @@ textarea.form-control-lg { } .tooltip .tooltip-arrow::before { position: absolute; - content: ""; + content: ''; border-color: transparent; border-style: solid; } -.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { +.bs-tooltip-top .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow { bottom: calc(-1 * var(--bs-tooltip-arrow-height)); } -.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { +.bs-tooltip-top .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before { top: -1px; - border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; + border-width: var(--bs-tooltip-arrow-height) + calc(var(--bs-tooltip-arrow-width) * 0.5) 0; border-top-color: var(--bs-tooltip-bg); } /* rtl:begin:ignore */ -.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { +.bs-tooltip-end .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow { left: calc(-1 * var(--bs-tooltip-arrow-height)); width: var(--bs-tooltip-arrow-height); height: var(--bs-tooltip-arrow-width); } -.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { +.bs-tooltip-end .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before { right: -1px; - border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; + border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) + var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; border-right-color: var(--bs-tooltip-bg); } /* rtl:end:ignore */ -.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { +.bs-tooltip-bottom .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow { top: calc(-1 * var(--bs-tooltip-arrow-height)); } -.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { +.bs-tooltip-bottom .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before { bottom: -1px; - border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); + border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) + var(--bs-tooltip-arrow-height); border-bottom-color: var(--bs-tooltip-bg); } /* rtl:begin:ignore */ -.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { +.bs-tooltip-start .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow { right: calc(-1 * var(--bs-tooltip-arrow-height)); width: var(--bs-tooltip-arrow-height); height: var(--bs-tooltip-arrow-width); } -.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { +.bs-tooltip-start .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::before { left: -1px; - border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); + border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 + calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); border-left-color: var(--bs-tooltip-bg); } @@ -5720,7 +5939,9 @@ textarea.form-control-lg { --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); --bs-popover-border-radius: var(--bs-border-radius-lg); - --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width)); + --bs-popover-inner-border-radius: calc( + var(--bs-border-radius-lg) - var(--bs-border-width) + ); --bs-popover-box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15); --bs-popover-header-padding-x: 1em; --bs-popover-header-padding-y: 0.5em; @@ -5762,88 +5983,127 @@ textarea.form-control-lg { width: var(--bs-popover-arrow-width); height: var(--bs-popover-arrow-height); } -.popover .popover-arrow::before, .popover .popover-arrow::after { +.popover .popover-arrow::before, +.popover .popover-arrow::after { position: absolute; display: block; - content: ""; + content: ''; border-color: transparent; border-style: solid; border-width: 0; } -.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow { - bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); +.bs-popover-top > .popover-arrow, +.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow { + bottom: calc( + -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width) + ); } -.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { - border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0; +.bs-popover-top > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::before, +.bs-popover-top > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::after { + border-width: var(--bs-popover-arrow-height) + calc(var(--bs-popover-arrow-width) * 0.5) 0; } -.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { +.bs-popover-top > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::before { bottom: 0; border-top-color: var(--bs-popover-arrow-border); } -.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { +.bs-popover-top > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::after { bottom: var(--bs-popover-border-width); border-top-color: var(--bs-popover-bg); } /* rtl:begin:ignore */ -.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow { - left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); +.bs-popover-end > .popover-arrow, +.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow { + left: calc( + -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width) + ); width: var(--bs-popover-arrow-height); height: var(--bs-popover-arrow-width); } -.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { - border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0; +.bs-popover-end > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::before, +.bs-popover-end > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::after { + border-width: calc(var(--bs-popover-arrow-width) * 0.5) + var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0; } -.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { +.bs-popover-end > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::before { left: 0; border-right-color: var(--bs-popover-arrow-border); } -.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { +.bs-popover-end > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::after { left: var(--bs-popover-border-width); border-right-color: var(--bs-popover-bg); } /* rtl:end:ignore */ -.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow { - top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); -} -.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { - border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height); -} -.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { +.bs-popover-bottom > .popover-arrow, +.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow { + top: calc( + -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width) + ); +} +.bs-popover-bottom > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::before, +.bs-popover-bottom > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::after { + border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) + var(--bs-popover-arrow-height); +} +.bs-popover-bottom > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::before { top: 0; border-bottom-color: var(--bs-popover-arrow-border); } -.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { +.bs-popover-bottom > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::after { top: var(--bs-popover-border-width); border-bottom-color: var(--bs-popover-bg); } -.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[data-popper-placement^='bottom'] .popover-header::before { position: absolute; top: 0; left: 50%; display: block; width: var(--bs-popover-arrow-width); margin-left: calc(-0.5 * var(--bs-popover-arrow-width)); - content: ""; - border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg); + content: ''; + border-bottom: var(--bs-popover-border-width) solid + var(--bs-popover-header-bg); } /* rtl:begin:ignore */ -.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow { - right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); +.bs-popover-start > .popover-arrow, +.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow { + right: calc( + -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width) + ); width: var(--bs-popover-arrow-height); height: var(--bs-popover-arrow-width); } -.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { - border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height); +.bs-popover-start > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::before, +.bs-popover-start > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::after { + border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 + calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height); } -.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { +.bs-popover-start > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::before { right: 0; border-left-color: var(--bs-popover-arrow-border); } -.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { +.bs-popover-start > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::after { right: var(--bs-popover-border-width); border-left-color: var(--bs-popover-bg); } @@ -5855,7 +6115,8 @@ textarea.form-control-lg { font-size: var(--bs-popover-header-font-size); color: var(--bs-popover-header-color); background-color: var(--bs-popover-header-bg); - border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color); + border-bottom: var(--bs-popover-border-width) solid + var(--bs-popover-border-color); border-top-left-radius: var(--bs-popover-inner-border-radius); border-top-right-radius: var(--bs-popover-inner-border-radius); } @@ -5884,7 +6145,7 @@ textarea.form-control-lg { .carousel-inner::after { display: block; clear: both; - content: ""; + content: ''; } .carousel-item { @@ -5966,7 +6227,8 @@ textarea.form-control-lg { transition: none; } } -.carousel-control-prev:hover, .carousel-control-prev:focus, +.carousel-control-prev:hover, +.carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; @@ -6071,15 +6333,18 @@ textarea.form-control-lg { color: #000; } -[data-bs-theme=dark] .carousel .carousel-control-prev-icon, -[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon, -[data-bs-theme=dark].carousel .carousel-control-next-icon { +[data-bs-theme='dark'] .carousel .carousel-control-prev-icon, +[data-bs-theme='dark'] .carousel .carousel-control-next-icon, +[data-bs-theme='dark'].carousel .carousel-control-prev-icon, +[data-bs-theme='dark'].carousel .carousel-control-next-icon { filter: invert(1) grayscale(100); } -[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target], [data-bs-theme=dark].carousel .carousel-indicators [data-bs-target] { +[data-bs-theme='dark'] .carousel .carousel-indicators [data-bs-target], +[data-bs-theme='dark'].carousel .carousel-indicators [data-bs-target] { background-color: #000; } -[data-bs-theme=dark] .carousel .carousel-caption, [data-bs-theme=dark].carousel .carousel-caption { +[data-bs-theme='dark'] .carousel .carousel-caption, +[data-bs-theme='dark'].carousel .carousel-caption { color: #000; } @@ -6090,7 +6355,8 @@ textarea.form-control-lg { height: var(--bs-spinner-height); vertical-align: var(--bs-spinner-vertical-align); border-radius: 50%; - animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name); + animation: var(--bs-spinner-animation-speed) linear infinite + var(--bs-spinner-animation-name); } @keyframes spinner-border { @@ -6145,7 +6411,12 @@ textarea.form-control-lg { --bs-spinner-animation-speed: 1.5s; } } -.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { +.offcanvas, +.offcanvas-xxl, +.offcanvas-xl, +.offcanvas-lg, +.offcanvas-md, +.offcanvas-sm { --bs-offcanvas-zindex: 1045; --bs-offcanvas-width: 400px; --bs-offcanvas-height: 30vh; @@ -6186,7 +6457,8 @@ textarea.form-control-lg { top: 0; left: 0; width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-right: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(-100%); } } @@ -6195,7 +6467,8 @@ textarea.form-control-lg { top: 0; right: 0; width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-left: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(100%); } } @@ -6206,7 +6479,8 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-bottom: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(-100%); } } @@ -6216,17 +6490,21 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-top: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(100%); } } @media (max-width: 575.98px) { - .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) { + .offcanvas-sm.showing, + .offcanvas-sm.show:not(.hiding) { transform: none; } } @media (max-width: 575.98px) { - .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show { + .offcanvas-sm.showing, + .offcanvas-sm.hiding, + .offcanvas-sm.show { visibility: visible; } } @@ -6274,7 +6552,8 @@ textarea.form-control-lg { top: 0; left: 0; width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-right: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(-100%); } } @@ -6283,7 +6562,8 @@ textarea.form-control-lg { top: 0; right: 0; width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-left: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(100%); } } @@ -6294,7 +6574,8 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-bottom: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(-100%); } } @@ -6304,17 +6585,21 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-top: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(100%); } } @media (max-width: 767.98px) { - .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) { + .offcanvas-md.showing, + .offcanvas-md.show:not(.hiding) { transform: none; } } @media (max-width: 767.98px) { - .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show { + .offcanvas-md.showing, + .offcanvas-md.hiding, + .offcanvas-md.show { visibility: visible; } } @@ -6362,7 +6647,8 @@ textarea.form-control-lg { top: 0; left: 0; width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-right: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(-100%); } } @@ -6371,7 +6657,8 @@ textarea.form-control-lg { top: 0; right: 0; width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-left: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(100%); } } @@ -6382,7 +6669,8 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-bottom: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(-100%); } } @@ -6392,17 +6680,21 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-top: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(100%); } } @media (max-width: 991.98px) { - .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) { + .offcanvas-lg.showing, + .offcanvas-lg.show:not(.hiding) { transform: none; } } @media (max-width: 991.98px) { - .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show { + .offcanvas-lg.showing, + .offcanvas-lg.hiding, + .offcanvas-lg.show { visibility: visible; } } @@ -6450,7 +6742,8 @@ textarea.form-control-lg { top: 0; left: 0; width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-right: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(-100%); } } @@ -6459,7 +6752,8 @@ textarea.form-control-lg { top: 0; right: 0; width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-left: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(100%); } } @@ -6470,7 +6764,8 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-bottom: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(-100%); } } @@ -6480,17 +6775,21 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-top: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(100%); } } @media (max-width: 1199.98px) { - .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) { + .offcanvas-xl.showing, + .offcanvas-xl.show:not(.hiding) { transform: none; } } @media (max-width: 1199.98px) { - .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show { + .offcanvas-xl.showing, + .offcanvas-xl.hiding, + .offcanvas-xl.show { visibility: visible; } } @@ -6538,7 +6837,8 @@ textarea.form-control-lg { top: 0; left: 0; width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-right: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(-100%); } } @@ -6547,7 +6847,8 @@ textarea.form-control-lg { top: 0; right: 0; width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-left: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(100%); } } @@ -6558,7 +6859,8 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-bottom: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(-100%); } } @@ -6568,17 +6870,21 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-top: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(100%); } } @media (max-width: 1399.98px) { - .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) { + .offcanvas-xxl.showing, + .offcanvas-xxl.show:not(.hiding) { transform: none; } } @media (max-width: 1399.98px) { - .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show { + .offcanvas-xxl.showing, + .offcanvas-xxl.hiding, + .offcanvas-xxl.show { visibility: visible; } } @@ -6623,14 +6929,16 @@ textarea.form-control-lg { top: 0; left: 0; width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-right: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(-100%); } .offcanvas.offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-left: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateX(100%); } .offcanvas.offcanvas-top { @@ -6639,7 +6947,8 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-bottom: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(-100%); } .offcanvas.offcanvas-bottom { @@ -6647,13 +6956,17 @@ textarea.form-control-lg { left: 0; height: var(--bs-offcanvas-height); max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); + border-top: var(--bs-offcanvas-border-width) solid + var(--bs-offcanvas-border-color); transform: translateY(100%); } -.offcanvas.showing, .offcanvas.show:not(.hiding) { +.offcanvas.showing, +.offcanvas.show:not(.hiding) { transform: none; } -.offcanvas.showing, .offcanvas.hiding, .offcanvas.show { +.offcanvas.showing, +.offcanvas.hiding, +.offcanvas.show { visibility: visible; } @@ -6680,7 +6993,8 @@ textarea.form-control-lg { padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); } .offcanvas-header .btn-close { - padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5); + padding: calc(var(--bs-offcanvas-padding-y) * 0.5) + calc(var(--bs-offcanvas-padding-x) * 0.5); margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y)); margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x)); margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y)); @@ -6707,7 +7021,7 @@ textarea.form-control-lg { } .placeholder.btn::before { display: inline-block; - content: ""; + content: ''; } .placeholder-xs { @@ -6732,7 +7046,12 @@ textarea.form-control-lg { } } .placeholder-wave { - mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%); + mask-image: linear-gradient( + 130deg, + #000 55%, + rgba(0, 0, 0, 0.8) 75%, + #000 95% + ); mask-size: 200% 100%; animation: placeholder-wave 2s linear infinite; } @@ -6745,7 +7064,7 @@ textarea.form-control-lg { .clearfix::after { display: block; clear: both; - content: ""; + content: ''; } .text-bg-primary { @@ -6790,95 +7109,159 @@ textarea.form-control-lg { .link-primary { color: RGBA(var(--bs-primary-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-primary-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-primary:hover, .link-primary:focus { +.link-primary:hover, +.link-primary:focus { color: RGBA(0, 54, 55, var(--bs-link-opacity, 1)); text-decoration-color: RGBA(0, 54, 55, var(--bs-link-underline-opacity, 1)); } .link-secondary { color: RGBA(var(--bs-secondary-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-secondary-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-secondary:hover, .link-secondary:focus { +.link-secondary:hover, +.link-secondary:focus { color: RGBA(235, 235, 235, var(--bs-link-opacity, 1)); - text-decoration-color: RGBA(235, 235, 235, var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + 235, + 235, + 235, + var(--bs-link-underline-opacity, 1) + ); } .link-success { color: RGBA(var(--bs-success-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-success-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-success:hover, .link-success:focus { +.link-success:hover, +.link-success:focus { color: RGBA(178, 221, 194, var(--bs-link-opacity, 1)); - text-decoration-color: RGBA(178, 221, 194, var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + 178, + 221, + 194, + var(--bs-link-underline-opacity, 1) + ); } .link-info { color: RGBA(var(--bs-info-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-info-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-info:hover, .link-info:focus { +.link-info:hover, +.link-info:focus { color: RGBA(0, 54, 55, var(--bs-link-opacity, 1)); text-decoration-color: RGBA(0, 54, 55, var(--bs-link-underline-opacity, 1)); } .link-warning { color: RGBA(var(--bs-warning-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-warning-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-warning:hover, .link-warning:focus { +.link-warning:hover, +.link-warning:focus { color: RGBA(254, 197, 61, var(--bs-link-opacity, 1)); - text-decoration-color: RGBA(254, 197, 61, var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + 254, + 197, + 61, + var(--bs-link-underline-opacity, 1) + ); } .link-danger { color: RGBA(var(--bs-danger-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-danger-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-danger:hover, .link-danger:focus { +.link-danger:hover, +.link-danger:focus { color: RGBA(143, 46, 47, var(--bs-link-opacity, 1)); text-decoration-color: RGBA(143, 46, 47, var(--bs-link-underline-opacity, 1)); } .link-light { color: RGBA(var(--bs-light-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-light-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-light:hover, .link-light:focus { +.link-light:hover, +.link-light:focus { color: RGBA(255, 255, 255, var(--bs-link-opacity, 1)); - text-decoration-color: RGBA(255, 255, 255, var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + 255, + 255, + 255, + var(--bs-link-underline-opacity, 1) + ); } .link-dark { color: RGBA(var(--bs-dark-rgb, var(--bs-link-opacity, 1))); - text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-dark-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-dark:hover, .link-dark:focus { +.link-dark:hover, +.link-dark:focus { color: RGBA(0, 0, 0, var(--bs-link-opacity, 1)); text-decoration-color: RGBA(0, 0, 0, var(--bs-link-underline-opacity, 1)); } .link-body-emphasis { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)); - text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)); + text-decoration-color: RGBA( + var(--bs-emphasis-color-rgb), + var(--bs-link-underline-opacity, 1) + ); } -.link-body-emphasis:hover, .link-body-emphasis:focus { +.link-body-emphasis:hover, +.link-body-emphasis:focus { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)); - text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)); + text-decoration-color: RGBA( + var(--bs-emphasis-color-rgb), + var(--bs-link-underline-opacity, 0.75) + ); } .focus-ring:focus { outline: 0; - box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); + box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) + var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) + var(--bs-focus-ring-color); } .icon-link { display: inline-flex; gap: 0.375em; align-items: center; - text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); + text-decoration-color: rgba( + var(--bs-link-color-rgb), + var(--bs-link-opacity, 0.5) + ); text-underline-offset: 0.25em; backface-visibility: hidden; } @@ -6895,7 +7278,8 @@ textarea.form-control-lg { } } -.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi { +.icon-link-hover:hover > .bi, +.icon-link-hover:focus-visible > .bi { transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); } @@ -6906,7 +7290,7 @@ textarea.form-control-lg { .ratio::before { display: block; padding-top: var(--bs-aspect-ratio); - content: ""; + content: ''; } .ratio > * { position: absolute; @@ -7057,7 +7441,7 @@ textarea.form-control-lg { bottom: 0; left: 0; z-index: 1; - content: ""; + content: ''; } .text-truncate { @@ -7260,15 +7644,24 @@ textarea.form-control-lg { } .focus-ring-primary { - --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity)); + --bs-focus-ring-color: rgba( + var(--bs-primary-rgb), + var(--bs-focus-ring-opacity) + ); } .focus-ring-secondary { - --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity)); + --bs-focus-ring-color: rgba( + var(--bs-secondary-rgb), + var(--bs-focus-ring-opacity) + ); } .focus-ring-success { - --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity)); + --bs-focus-ring-color: rgba( + var(--bs-success-rgb), + var(--bs-focus-ring-opacity) + ); } .focus-ring-info { @@ -7276,15 +7669,24 @@ textarea.form-control-lg { } .focus-ring-warning { - --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity)); + --bs-focus-ring-color: rgba( + var(--bs-warning-rgb), + var(--bs-focus-ring-opacity) + ); } .focus-ring-danger { - --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity)); + --bs-focus-ring-color: rgba( + var(--bs-danger-rgb), + var(--bs-focus-ring-opacity) + ); } .focus-ring-light { - --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity)); + --bs-focus-ring-color: rgba( + var(--bs-light-rgb), + var(--bs-focus-ring-opacity) + ); } .focus-ring-dark { @@ -7380,7 +7782,8 @@ textarea.form-control-lg { } .border-top { - border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + border-top: var(--bs-border-width) var(--bs-border-style) + var(--bs-border-color) !important; } .border-top-0 { @@ -7388,7 +7791,8 @@ textarea.form-control-lg { } .border-end { - border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + border-right: var(--bs-border-width) var(--bs-border-style) + var(--bs-border-color) !important; } .border-end-0 { @@ -7396,7 +7800,8 @@ textarea.form-control-lg { } .border-bottom { - border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + border-bottom: var(--bs-border-width) var(--bs-border-style) + var(--bs-border-color) !important; } .border-bottom-0 { @@ -7404,7 +7809,8 @@ textarea.form-control-lg { } .border-start { - border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + border-left: var(--bs-border-width) var(--bs-border-style) + var(--bs-border-color) !important; } .border-start-0 { @@ -7413,17 +7819,26 @@ textarea.form-control-lg { .border-primary { --bs-border-opacity: 1; - border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; + border-color: rgba( + var(--bs-primary-rgb), + var(--bs-border-opacity) + ) !important; } .border-secondary { --bs-border-opacity: 1; - border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; + border-color: rgba( + var(--bs-secondary-rgb), + var(--bs-border-opacity) + ) !important; } .border-success { --bs-border-opacity: 1; - border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; + border-color: rgba( + var(--bs-success-rgb), + var(--bs-border-opacity) + ) !important; } .border-info { @@ -7433,7 +7848,10 @@ textarea.form-control-lg { .border-warning { --bs-border-opacity: 1; - border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; + border-color: rgba( + var(--bs-warning-rgb), + var(--bs-border-opacity) + ) !important; } .border-danger { @@ -8566,47 +8984,74 @@ textarea.form-control-lg { .link-underline-primary { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-primary-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-secondary { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-secondary-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-success { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-success-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-info { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-info-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-warning { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-warning-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-danger { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-danger-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-light { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-light-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline-dark { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba( + var(--bs-dark-rgb), + var(--bs-link-underline-opacity) + ) !important; } .link-underline { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: rgba( + var(--bs-link-color-rgb), + var(--bs-link-underline-opacity, 1) + ) !important; } .link-underline-opacity-0 { @@ -8659,17 +9104,26 @@ textarea.form-control-lg { .bg-primary { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-primary-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-secondary { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-secondary-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-success { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-success-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-info { @@ -8679,7 +9133,10 @@ textarea.form-control-lg { .bg-warning { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-warning-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-danger { @@ -8709,7 +9166,10 @@ textarea.form-control-lg { .bg-body { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-body-bg-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-transparent { @@ -8719,12 +9179,18 @@ textarea.form-control-lg { .bg-body-secondary { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-secondary-bg-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-body-tertiary { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba( + var(--bs-tertiary-bg-rgb), + var(--bs-bg-opacity) + ) !important; } .bg-opacity-10 { @@ -11833,7 +12299,7 @@ textarea.form-control-lg { } } :host, -[data-bs-theme=light] { +[data-bs-theme='light'] { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; @@ -11859,7 +12325,7 @@ textarea.form-control-lg { --bs-gray-900: #212529; --bs-primary: #004445; --bs-secondary: #e6e6e6; - --bs-success: #9FD5B3; + --bs-success: #9fd5b3; --bs-info: #004445; --bs-warning: #feb70d; --bs-danger: #b3393b; @@ -11899,9 +12365,13 @@ textarea.form-control-lg { --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; - --bs-font-sans-serif: "Montserrat", sans-serif; - --bs-font-monospace: "Montserrat", sans-serif; - --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-font-sans-serif: 'Montserrat', sans-serif; + --bs-font-monospace: 'Montserrat', sans-serif; + --bs-gradient: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.15), + rgba(255, 255, 255, 0) + ); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1em; --bs-body-font-weight: 400; @@ -11945,13 +12415,13 @@ textarea.form-control-lg { --bs-focus-ring-width: 0.25em; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(0, 68, 69, 0.25); - --bs-form-valid-color: #9FD5B3; - --bs-form-valid-border-color: #9FD5B3; + --bs-form-valid-color: #9fd5b3; + --bs-form-valid-border-color: #9fd5b3; --bs-form-invalid-color: #b3393b; --bs-form-invalid-border-color: #b3393b; } -[data-bs-theme=dark] { +[data-bs-theme='dark'] { color-scheme: dark; --bs-body-color: #adb5bd; --bs-body-color-rgb: 173, 181, 189; diff --git a/src/shared/variables.css b/src/shared/variables.css index e47d95b2..f4968d0d 100644 --- a/src/shared/variables.css +++ b/src/shared/variables.css @@ -1,11 +1,11 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); -:host { - --color-1: #004445; - --color-2: #9FD5B3; - --color-3: #feb70d; - --color-4: #b3393b; - --color-5: #e6e6e6; - --color-light: #fff; - --color-dark: #000; - --font-family: 'Montserrat', sans-serif; -} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap'); +:host { + --color-1: #004445; + --color-2: #9fd5b3; + --color-3: #feb70d; + --color-4: #b3393b; + --color-5: #e6e6e6; + --color-light: #fff; + --color-dark: #000; + --font-family: 'Montserrat', sans-serif; +} diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx index cb24c315..b9cebac5 100644 --- a/src/stories/Introduction.stories.mdx +++ b/src/stories/Introduction.stories.mdx @@ -119,19 +119,20 @@ import StackAlt from './assets/stackalt.svg'; This is the COD UXDS Storybook, a sandbox for demonstrating and developing components and patterns built for the City of Detroit UX Design System ("COD UXDS"). This demonstration is built using the open source tool Storybook using JavaScript and Node.js. All COD components are built using **ONLY JAVASCRIPT** to deliver standards-compliant web components. COD web components are platform-agnostic and can be used in any JavaScript framework of your choice or directly in the browser using static HTML. **Why no framework?** -* Frameworks can increase the learning curve due to specific syntax or particular methodologies dictated by the creators. -* Support and maintenance are heavily influence by the developer community which can change often. + +- Frameworks can increase the learning curve due to specific syntax or particular methodologies dictated by the creators. +- Support and maintenance are heavily influence by the developer community which can change often. In the Sidebar to the left, you can browse the components and patterns within COD. Each example will be demonstrated in what is called a "story" within the Canvas (the area of the window you're reading now). Across the top of the Canvas area, you will see a Docs tab, zoom controls, a color blindness simulator, and a light/dark theme toggle. -* **Docs tab** - includes all of the developer documentation for each component, including guidelines and usage, the full API, any variants, and instructions for cherry picking. +- **Docs tab** - includes all of the developer documentation for each component, including guidelines and usage, the full API, any variants, and instructions for cherry picking. While viewing a component, to the right of the Canvas there is a tabbed Panel which displays Controls, any Action outputs associated with that demonstration, and an Accessibility audit: -* **Control** - options allow you to change content in the demonstration area by altering the data given to the component via its properties. -* **Actions** - provides console output where user actions like clicking or selecting should produce event target information. -* **Accessibilty** - displays a11y violations of WCAG 2.0 Levels A and AA, WCAG 2.1 Level AA, Section 508, and other best practices through the aXe accessibilty engine. -Display options and keyboard shortcuts are available via the Ellipsis Menu Icon next to the COD UXDS logo at the top of the sidebar. +- **Control** - options allow you to change content in the demonstration area by altering the data given to the component via its properties. +- **Actions** - provides console output where user actions like clicking or selecting should produce event target information. +- **Accessibilty** - displays a11y violations of WCAG 2.0 Levels A and AA, WCAG 2.1 Level AA, Section 508, and other best practices through the aXe accessibilty engine. + Display options and keyboard shortcuts are available via the Ellipsis Menu Icon next to the COD UXDS logo at the top of the sidebar.
Configure
@@ -149,7 +150,6 @@ Display options and keyboard shortcuts are available via the Ellipsis Menu Icon Build @@ -168,7 +168,11 @@ Display options and keyboard shortcuts are available via the Ellipsis Menu Icon Learn about our style guide. - + code GitHub project @@ -176,5 +180,3 @@ Display options and keyboard shortcuts are available via the Ellipsis Menu Icon - - diff --git a/src/stories/Setup.stories.mdx b/src/stories/Setup.stories.mdx index 409b0db3..6c296f44 100644 --- a/src/stories/Setup.stories.mdx +++ b/src/stories/Setup.stories.mdx @@ -1,56 +1,55 @@ -import { Meta } from '@storybook/addon-docs'; - - - -

Setup

- -## Installation - -### CDN - -Add the following inside your head tag - -```html - - - - -``` - -### NPM - -`npm i @cityofdetroit/cod-design-system` - -### Yarn - -`yarn add @cityofdetroit/cod-design-system` - -```js - import 'cod-design-system/src/components/atoms/Loader/cod-loader'; - import 'cod-design-system/src/components/atoms/Button/cod-button'; -``` - -## Setting Props - -### Basic Data - -For basic primitive types like `string`, `boolean`, `number`, set the attribute on the element: - -```js - -``` - -## Using Slots - -Slots give you full control over the contents of a component. Some components may have multiple slots. - -> Web Component Concept: -> Slotted content lives outside of the shadow DOM and as a result, you are free to style them however you want. - - -```html - -
  • Home
    • -
  • Library
    • -     -``` \ No newline at end of file +import { Meta } from '@storybook/addon-docs'; + + + +

    Setup

    + +## Installation + +### CDN + +Add the following inside your head tag + +```html + + + + +``` + +### NPM + +`npm i @cityofdetroit/cod-design-system` + +### Yarn + +`yarn add @cityofdetroit/cod-design-system` + +```js +import 'cod-design-system/src/components/atoms/Loader/cod-loader'; +import 'cod-design-system/src/components/atoms/Button/cod-button'; +``` + +## Setting Props + +### Basic Data + +For basic primitive types like `string`, `boolean`, `number`, set the attribute on the element: + +```js + +``` + +## Using Slots + +Slots give you full control over the contents of a component. Some components may have multiple slots. + +> Web Component Concept: +> Slotted content lives outside of the shadow DOM and as a result, you are free to style them however you want. + +```html + +
  • Home
    • +
  • Library
    • +     +``` diff --git a/src/stories/Styles.stories.mdx b/src/stories/Styles.stories.mdx index d4c0a921..675e4972 100644 --- a/src/stories/Styles.stories.mdx +++ b/src/stories/Styles.stories.mdx @@ -1,46 +1,48 @@ -import { Meta } from '@storybook/addon-docs/blocks' - - - -

    Customization

    - -If you're new to using Web Components, you'll quickly notice that the traditional way of styling elements with CSS doesn't work with COD components. - -For example, this won't work: -```html -button -``` - -This is a feature of the Shadow DOM--outside styles cannot be applied to content inside the Shadow DOM. Shadow DOM gives us a clean, native way -of encapsulating styles and protects your applications from breaking changes. Luckily, the Shadow DOM API provides two solutions -to this problem: CSS Custom Properties and CSS Shadow Parts. - - -## Using CSS Custom Properties - -Each component API has a set of CSS Custom Properties defined. These are variables that you can set externally that will reflect inside the Shadow DOM. -CSS Custom Properties are a lot like SASS variables, with one significant difference--they can be swapped at run time and do not require any build process. -These CSS Custom Properties will usually be mapped to some CSS property (color, font-size, border-radius, etc). - -If you wanted to change the Button background, you could use the `--button-background-color` custom property like so: -```css -cod-button { - --button-background-color: red; -} -``` - -## Using CSS Shadow Parts - -Because defining CSS Custom Properties for every possible CSS property is incredibly verbose and cumbersome, the recommended way for styling components is -to make use of [CSS Shadow Parts](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/). CSS Shadow Parts give you full control over -the styling of a component's underlying Shadow DOM parts. - -If a component has any available Shadow Parts, they will be documented under their API section. - -To style a Shadow Part, use the [::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). -For example, if you wanted to add some margin on the form label, you could style the `label` Shadow Part: -```css -cod-form-label::part(label) { - margin-right: 1rem; -} -``` \ No newline at end of file +import { Meta } from '@storybook/addon-docs/blocks'; + + + +

    Customization

    + +If you're new to using Web Components, you'll quickly notice that the traditional way of styling elements with CSS doesn't work with COD components. + +For example, this won't work: + +```html +button +``` + +This is a feature of the Shadow DOM--outside styles cannot be applied to content inside the Shadow DOM. Shadow DOM gives us a clean, native way +of encapsulating styles and protects your applications from breaking changes. Luckily, the Shadow DOM API provides two solutions +to this problem: CSS Custom Properties and CSS Shadow Parts. + +## Using CSS Custom Properties + +Each component API has a set of CSS Custom Properties defined. These are variables that you can set externally that will reflect inside the Shadow DOM. +CSS Custom Properties are a lot like SASS variables, with one significant difference--they can be swapped at run time and do not require any build process. +These CSS Custom Properties will usually be mapped to some CSS property (color, font-size, border-radius, etc). + +If you wanted to change the Button background, you could use the `--button-background-color` custom property like so: + +```css +cod-button { + --button-background-color: red; +} +``` + +## Using CSS Shadow Parts + +Because defining CSS Custom Properties for every possible CSS property is incredibly verbose and cumbersome, the recommended way for styling components is +to make use of [CSS Shadow Parts](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/). CSS Shadow Parts give you full control over +the styling of a component's underlying Shadow DOM parts. + +If a component has any available Shadow Parts, they will be documented under their API section. + +To style a Shadow Part, use the [::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). +For example, if you wanted to add some margin on the form label, you could style the `label` Shadow Part: + +```css +cod-form-label::part(label) { + margin-right: 1rem; +} +``` diff --git a/src/stories/accordion.stories.js b/src/stories/accordion.stories.js index 6d66065f..692468bd 100644 --- a/src/stories/accordion.stories.js +++ b/src/stories/accordion.stories.js @@ -1,132 +1,262 @@ -import { html } from 'lit-html'; -import '../components/atoms/AccordionHeader/cod-accordion-header'; -import '../components/atoms/AccordionBody/cod-accordion-body'; -import '../components/atoms/AccordionItem/cod-accordion-item'; -import '../components/molecules/Accordion/cod-accordion'; - -export default { - title: 'Components/Molecules/Accordion', -}; - -export const Basic = () => html` - -
    -
    -

    - -

    -
    -
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.
    -
    -
    -
    -

    - -

    -
    -
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
    -
    -
    -
    -

    - -

    -
    -
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
    -
    -
    -
    - - - Accordion Item #1 - - -

    This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     - - - Accordion Item #2 - - -

    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     - - - Accordion Item #3 - - -

    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     -     -`; - -export const Flush = () => html` - -

    Testing default markup

    - - - Accordion Item #1 - - -

    This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     - - - Accordion Item #2 - - -

    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     - - - Accordion Item #3 - - -

    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     -     -`; - -export const Custom = () => html` - - - - Accordion Item #1 - - -

    This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     - - - Accordion Item #2 - - -

    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     - - - Accordion Item #3 - - -

    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    -     -     -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/AccordionHeader/cod-accordion-header'; +import '../components/atoms/AccordionBody/cod-accordion-body'; +import '../components/atoms/AccordionItem/cod-accordion-item'; +import '../components/molecules/Accordion/cod-accordion'; + +export default { + title: 'Components/Molecules/Accordion', +}; + +export const Basic = () => html` + +
    +
    +

    + +

    +
    +
    + Placeholder content for this accordion, which is intended to + demonstrate the + .accordion-flush class. This is the first item's + accordion body. +
    +
    +
    +
    +

    + +

    +
    +
    + Placeholder content for this accordion, which is intended to + demonstrate the + .accordion-flush class. This is the second item's + accordion body. Let's imagine this being filled with some actual + content. +
    +
    +
    +
    +

    + +

    +
    +
    + Placeholder content for this accordion, which is intended to + demonstrate the + .accordion-flush class. This is the third item's + accordion body. Nothing more exciting happening here in terms of + content, but just filling up the space to make it look, at least at + first glance, a bit more representative of how this would look in a + real-world application. +
    +
    +
    +
    + + + Accordion Item #1 + + +

    + This is the first item's accordion body. It is shown + by default, until the collapse plugin adds the appropriate classes + that we use to style each element. These classes control the overall + appearance, as well as the showing and hiding via CSS transitions. You + can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go + within the .accordion-body, though the transition does + limit overflow. +

    +     +     + + + Accordion Item #2 + + +

    + This is the second item's accordion body. + It is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These classes + control the overall appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with custom CSS or + overriding our default variables. It's also worth noting that just + about any HTML can go within the .accordion-body, though + the transition does limit overflow. +

    +     +     + + + Accordion Item #3 + + +

    + This is the third item's accordion body. It is hidden + by default, until the collapse plugin adds the appropriate classes + that we use to style each element. These classes control the overall + appearance, as well as the showing and hiding via CSS transitions. You + can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go + within the .accordion-body, though the transition does + limit overflow. +

    +     +     +     +`; + +export const Flush = () => html` + +

    Testing default markup

    + + + Accordion Item #1 + + +

    + This is the first item's accordion body. It is shown + by default, until the collapse plugin adds the appropriate classes + that we use to style each element. These classes control the overall + appearance, as well as the showing and hiding via CSS transitions. You + can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go + within the .accordion-body, though the transition does + limit overflow. +

    +     +     + + + Accordion Item #2 + + +

    + This is the second item's accordion body. + It is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These classes + control the overall appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with custom CSS or + overriding our default variables. It's also worth noting that just + about any HTML can go within the .accordion-body, though + the transition does limit overflow. +

    +     +     + + + Accordion Item #3 + + +

    + This is the third item's accordion body. It is hidden + by default, until the collapse plugin adds the appropriate classes + that we use to style each element. These classes control the overall + appearance, as well as the showing and hiding via CSS transitions. You + can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go + within the .accordion-body, though the transition does + limit overflow. +

    +     +     +     +`; + +export const Custom = () => html` + + + + Accordion Item #1 + + +

    + This is the first item's accordion body. It is shown + by default, until the collapse plugin adds the appropriate classes + that we use to style each element. These classes control the overall + appearance, as well as the showing and hiding via CSS transitions. You + can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go + within the .accordion-body, though the transition does + limit overflow. +

    +     +     + + + Accordion Item #2 + + +

    + This is the second item's accordion body. + It is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These classes + control the overall appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with custom CSS or + overriding our default variables. It's also worth noting that just + about any HTML can go within the .accordion-body, though + the transition does limit overflow. +

    +     +     + + + Accordion Item #3 + + +

    + This is the third item's accordion body. It is hidden + by default, until the collapse plugin adds the appropriate classes + that we use to style each element. These classes control the overall + appearance, as well as the showing and hiding via CSS transitions. You + can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go + within the .accordion-body, though the transition does + limit overflow. +

    +     +     +     +`; diff --git a/src/stories/alert.stories.js b/src/stories/alert.stories.js index 9a5302c3..bf06d515 100644 --- a/src/stories/alert.stories.js +++ b/src/stories/alert.stories.js @@ -1,73 +1,90 @@ -import '../components/atoms/Alert/cod-alert'; - -export default { - title: 'Components/Atoms/Alert', - argTypes: { - icon: { - control: { type: 'select' }, - options: ['house', 'house-fill', 'exclamation-circle', 'exclamation-circle-fill', 'exclamation-triangle', 'check-circle', 'check-circle-fill'] - }, - iconOrder: { - control: { type: 'select' }, - options: ['left', 'right'] - }, - iconSize: { - control: { type: 'select' }, - options: ['small', 'medium', 'large', 'x-large'] - }, - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - }, - }, -}; -// Template -const Template = (args) => { - const alert = document.createElement('cod-alert'); - alert.innerHTML = args.elements; - alert.setAttribute('data-type', args.type); - alert.setAttribute('data-icon', args.icon); - alert.setAttribute('data-icon-order', args.iconOrder); - alert.setAttribute('data-icon-size', args.iconSize); - alert.setAttribute('data-extra-classes', args.extraClasses); - alert.setAttribute('data-background-color', args.backgroundColor); - return alert; -} - -export const Alert = Template.bind({}); -Alert.args = { - backgroundColor: 'primary', - elements: ` - Basic Alert - `, -}; - -export const AlertExtras = Template.bind({}); -AlertExtras.args = { - elements: ` - Basic Alert - `, - backgroundColor: 'primary', - extraClasses: 'text-center p-3' -}; - -export const AlertElements = Template.bind({}); -AlertElements.args = { - backgroundColor: 'primary', - extraClasses: 'text-center p-3', - elements: ` -

    Simple paragraph

    -
    Article with link
    - `, -}; - -export const AlertIcon = Template.bind({}); -AlertIcon.args = { - backgroundColor: 'primary', - icon: 'house', - iconOrder: 'left', - iconSize: 'small', - elements: ` -
    Article with link
    - `, -}; \ No newline at end of file +import '../components/atoms/Alert/cod-alert'; + +export default { + title: 'Components/Atoms/Alert', + argTypes: { + icon: { + control: { type: 'select' }, + options: [ + 'house', + 'house-fill', + 'exclamation-circle', + 'exclamation-circle-fill', + 'exclamation-triangle', + 'check-circle', + 'check-circle-fill', + ], + }, + iconOrder: { + control: { type: 'select' }, + options: ['left', 'right'], + }, + iconSize: { + control: { type: 'select' }, + options: ['small', 'medium', 'large', 'x-large'], + }, + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + }, +}; +// Template +const Template = (args) => { + const alert = document.createElement('cod-alert'); + alert.innerHTML = args.elements; + alert.setAttribute('data-type', args.type); + alert.setAttribute('data-icon', args.icon); + alert.setAttribute('data-icon-order', args.iconOrder); + alert.setAttribute('data-icon-size', args.iconSize); + alert.setAttribute('data-extra-classes', args.extraClasses); + alert.setAttribute('data-background-color', args.backgroundColor); + return alert; +}; + +export const Alert = Template.bind({}); +Alert.args = { + backgroundColor: 'primary', + elements: ` + Basic Alert + `, +}; + +export const AlertExtras = Template.bind({}); +AlertExtras.args = { + elements: ` + Basic Alert + `, + backgroundColor: 'primary', + extraClasses: 'text-center p-3', +}; + +export const AlertElements = Template.bind({}); +AlertElements.args = { + backgroundColor: 'primary', + extraClasses: 'text-center p-3', + elements: ` +

    Simple paragraph

    +
    Article with link
    + `, +}; + +export const AlertIcon = Template.bind({}); +AlertIcon.args = { + backgroundColor: 'primary', + icon: 'house', + iconOrder: 'left', + iconSize: 'small', + elements: ` +
    Article with link
    + `, +}; diff --git a/src/stories/badge.stories.js b/src/stories/badge.stories.js index ebfb5656..cceb4c46 100644 --- a/src/stories/badge.stories.js +++ b/src/stories/badge.stories.js @@ -1,81 +1,96 @@ -import { html } from 'lit-html'; -import '../components/atoms/Badge/cod-badge'; - -export default { - title: 'Components/Atoms/Badge', - argTypes: { - tag: { - control: { type: 'select' }, - options: ['span', 'div', 'a'], - defaultValue: 'span' - }, - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - defaultValue: 'primary', - }, - }, -}; -// Template -const Template = (args) => { - const badge = document.createElement('cod-badge'); - badge.setAttribute('data-tag', args.tag); - badge.setAttribute('data-background-color', args.backgroundColor); - if(args.url != null){ - badge.setAttribute('data-url', args.url); - } - if(args.hiddenText != null){ - badge.setAttribute('data-hidden-text', args.hiddenText); - } - if(args.pill != null){ - badge.setAttribute('data-pill', args.pill); - } - badge.setAttribute('data-text', args.text); - badge.setAttribute('data-extra-classes', args.extraClasses); - return badge; -} - -export const Badge = Template.bind({}); -Badge.args = { - text: 'Badge', - tag: 'span', - backgroundColor: 'primary', -}; - -export const Pill = Template.bind({}); -Pill.args = { - text: 'Pill Badge', - pill: true, - tag: 'span', - backgroundColor: 'primary', -}; - -export const BadgeHidden = Template.bind({}); -BadgeHidden.args = { - text: '99+', - hiddenText: 'Unread Messages', - backgroundColor: 'danger', - tag: 'span', -}; - -export const BadgePosition = (args) => html` - -`; -BadgePosition.args = { - text: '99+', - hiddenText: 'Unread Messages', - backgroundColor: 'danger', - extraClasses: 'position-absolute top-0 start-100 translate-middle', - tag: 'span', -} - -export const BadgeLink = Template.bind({}); -BadgeLink.args = { - text: 'Badge Link', - url: 'https://google.com', - tag: 'span', - backgroundColor: 'primary', -}; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/Badge/cod-badge'; + +export default { + title: 'Components/Atoms/Badge', + argTypes: { + tag: { + control: { type: 'select' }, + options: ['span', 'div', 'a'], + defaultValue: 'span', + }, + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + defaultValue: 'primary', + }, + }, +}; +// Template +const Template = (args) => { + const badge = document.createElement('cod-badge'); + badge.setAttribute('data-tag', args.tag); + badge.setAttribute('data-background-color', args.backgroundColor); + if (args.url != null) { + badge.setAttribute('data-url', args.url); + } + if (args.hiddenText != null) { + badge.setAttribute('data-hidden-text', args.hiddenText); + } + if (args.pill != null) { + badge.setAttribute('data-pill', args.pill); + } + badge.setAttribute('data-text', args.text); + badge.setAttribute('data-extra-classes', args.extraClasses); + return badge; +}; + +export const Badge = Template.bind({}); +Badge.args = { + text: 'Badge', + tag: 'span', + backgroundColor: 'primary', +}; + +export const Pill = Template.bind({}); +Pill.args = { + text: 'Pill Badge', + pill: true, + tag: 'span', + backgroundColor: 'primary', +}; + +export const BadgeHidden = Template.bind({}); +BadgeHidden.args = { + text: '99+', + hiddenText: 'Unread Messages', + backgroundColor: 'danger', + tag: 'span', +}; + +export const BadgePosition = (args) => html` + +`; +BadgePosition.args = { + text: '99+', + hiddenText: 'Unread Messages', + backgroundColor: 'danger', + extraClasses: 'position-absolute top-0 start-100 translate-middle', + tag: 'span', +}; + +export const BadgeLink = Template.bind({}); +BadgeLink.args = { + text: 'Badge Link', + url: 'https://google.com', + tag: 'span', + backgroundColor: 'primary', +}; diff --git a/src/stories/breadcrumb.stories.js b/src/stories/breadcrumb.stories.js index 30a167bc..8083c475 100644 --- a/src/stories/breadcrumb.stories.js +++ b/src/stories/breadcrumb.stories.js @@ -1,44 +1,44 @@ -import { html } from 'lit-html'; -import '../components/atoms/Breadcrumb/cod-breadcrumb'; - -export default { - title: 'Components/Atoms/Breadcrumb', -}; - -export const Basic = () => html` - -
  • Home
    • -     - -
  • Home
    • -
  • Library
    • -     - - -
  • Home
    • -
  • Library
    • -
  • Data
    • -     -`; - -export const NoDivider = () => html` - -
  • Home
    • -
  • Library
    • -     -`; - -export const SVG = () => html` - -
  • Home
    • -
  • Library
    • -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/Breadcrumb/cod-breadcrumb'; + +export default { + title: 'Components/Atoms/Breadcrumb', +}; + +export const Basic = () => html` + +
  • Home
    • +     + +
  • Home
    • +
  • Library
    • +     + + +
  • Home
    • +
  • Library
    • +
  • Data
    • +     +`; + +export const NoDivider = () => html` + +
  • Home
    • +
  • Library
    • +     +`; + +export const SVG = () => html` + +
  • Home
    • +
  • Library
    • +     +`; diff --git a/src/stories/button.stories.js b/src/stories/button.stories.js index 66b11ef8..059d16c4 100644 --- a/src/stories/button.stories.js +++ b/src/stories/button.stories.js @@ -7,14 +7,23 @@ export default { title: 'Components/Atoms/Button', argTypes: { primary: { - control: { type: 'boolean'}, + control: { type: 'boolean' }, }, disable: { - control: {type: 'boolean'}, + control: { type: 'boolean' }, }, - backgroundColor: { + backgroundColor: { control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], }, onClick: { action: 'onClick' }, size: { @@ -23,15 +32,27 @@ export default { }, icon: { control: { type: 'select' }, - options: ['house', 'house-fill', 'exclamation-circle', 'exclamation-circle-fill', 'exclamation-triangle', 'check-circle', 'check-circle-fill', 'calendar', 'calendar-fill', 'calendar-date', 'calendar-date-fill'] + options: [ + 'house', + 'house-fill', + 'exclamation-circle', + 'exclamation-circle-fill', + 'exclamation-triangle', + 'check-circle', + 'check-circle-fill', + 'calendar', + 'calendar-fill', + 'calendar-date', + 'calendar-date-fill', + ], }, iconSize: { control: { type: 'select' }, - options: ['small', 'medium', 'large', 'x-large'] + options: ['small', 'medium', 'large', 'x-large'], }, iconOrder: { control: { type: 'select' }, - options: ['left', 'right'] + options: ['left', 'right'], }, shape: { control: { type: 'select' }, @@ -42,40 +63,42 @@ export default { // Template const Template = (args) => { const btn = document.createElement('cod-button'); - btn.addEventListener('click', (e)=>{ - args.onclick(e) - }) + btn.addEventListener('click', (e) => { + args.onclick(e); + }); btn.setAttribute('data-primary', args.primary); btn.setAttribute('data-disable', args.disable); btn.setAttribute('data-label', args.label); - btn.setAttribute('data-img', (args.img) ? args.img : ''); - btn.setAttribute('data-img-alt', (args.imgAlt) ? args.imgAlt : ''); - btn.setAttribute('data-icon', (args.icon) ? args.icon : ''); - btn.setAttribute('data-icon-order', (args.iconOrder) ? args.iconOrder : ''); - btn.setAttribute('data-icon-size', (args.iconSize) ? args.iconSize : ''); + btn.setAttribute('data-img', args.img ? args.img : ''); + btn.setAttribute('data-img-alt', args.imgAlt ? args.imgAlt : ''); + btn.setAttribute('data-icon', args.icon ? args.icon : ''); + btn.setAttribute('data-icon-order', args.iconOrder ? args.iconOrder : ''); + btn.setAttribute('data-icon-size', args.iconSize ? args.iconSize : ''); btn.setAttribute('data-shape', args.shape); - btn.setAttribute('data-aria-label', (args.ariaLabel) ? args.ariaLabel : ''); - (args.backgroundColor) ? btn.setAttribute('data-background-color', args.backgroundColor) : btn.setAttribute('data-background-color', 'primary'); - if(args.close){ + btn.setAttribute('data-aria-label', args.ariaLabel ? args.ariaLabel : ''); + args.backgroundColor + ? btn.setAttribute('data-background-color', args.backgroundColor) + : btn.setAttribute('data-background-color', 'primary'); + if (args.close) { btn.setAttribute('data-close', args.close); } - if(args.hLabel){ + if (args.hLabel) { btn.setAttribute('data-hidden-label', args.hLabel); } - if(args.size){ + if (args.size) { btn.setAttribute('data-size', args.size); } - if(args.id){ + if (args.id) { btn.setAttribute('data-id', args.id); } - if(args.link){ + if (args.link) { btn.setAttribute('data-link', args.link); } - if(args.extraClasses){ + if (args.extraClasses) { btn.setAttribute('data-extra-classes', args.extraClasses); } return btn; -} +}; export const Primary = Template.bind({}); Primary.args = { @@ -93,14 +116,14 @@ export const Extras = Template.bind({}); Extras.args = { primary: false, label: 'Extras', - extraClasses: 'w-100' + extraClasses: 'w-100', }; export const Link = Template.bind({}); Link.args = { primary: false, label: 'Link', - link: 'https://detroitmi.gov' + link: 'https://detroitmi.gov', }; export const Image = Template.bind({}); @@ -127,7 +150,7 @@ Close.args = { primary: true, label: '', ariaLabel: 'Close', - close: 'true' + close: 'true', }; export const SquareClose = Template.bind({}); @@ -136,7 +159,7 @@ SquareClose.args = { label: 'x', shape: 'square', ariaLabel: 'Close', - extraClasses: 'fw-bold' + extraClasses: 'fw-bold', }; export const SquareImage = Template.bind({}); @@ -154,7 +177,7 @@ HiddenLabel.args = { primary: true, label: '', hLabel: 'Toggle Dropdown', - extraClasses: 'dropdown-toggle dropdown-toggle-split' + extraClasses: 'dropdown-toggle dropdown-toggle-split', }; // export const WithInteraction = Template.bind({}); @@ -170,4 +193,4 @@ HiddenLabel.args = { // const canvas = within(canvasElement); // await userEvent.click(canvas.getByTestId('interaction')); // await expect(console.log); -// } \ No newline at end of file +// } diff --git a/src/stories/buttongroup.stories.js b/src/stories/buttongroup.stories.js index c845c421..9ebb7a4d 100644 --- a/src/stories/buttongroup.stories.js +++ b/src/stories/buttongroup.stories.js @@ -1,94 +1,273 @@ -import { html } from 'lit-html'; -import '../components/molecules/ButtonGroup/cod-button-group'; -import '../components/atoms/Button/cod-button'; -import '../components/atoms/FormCheck/cod-formcheck'; - -export default { - title: 'Components/Molecules/ButtonGroup', -}; - -export const Basic = () => html` - -
    - - - -
    - - - -     -`; - -export const Mixed = () => html` - - - - - -`; - -export const Outlined = () => html` - - - - - -`; - -export const CheckboxButtonGroup = () => html` - - - - - -

    - - - - - - - -`; - -export const ButtonToolbar = () => html` - - - - - - - - -`; - -export const Vertical = () => html` - - - - - - - -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/molecules/ButtonGroup/cod-button-group'; +import '../components/atoms/Button/cod-button'; +import '../components/atoms/FormCheck/cod-formcheck'; + +export default { + title: 'Components/Molecules/ButtonGroup', +}; + +export const Basic = () => html` + +
    + + + +
    + + + +     +`; + +export const Mixed = () => html` + + + + + +`; + +export const Outlined = () => html` + + + + + +`; + +export const CheckboxButtonGroup = () => html` + + + + + +

    + + + + + + + +`; + +export const ButtonToolbar = () => html` + + + + + + + + +`; + +export const Vertical = () => html` + + + + + + + +`; diff --git a/src/stories/card.stories.js b/src/stories/card.stories.js index f9499def..2b7a7652 100644 --- a/src/stories/card.stories.js +++ b/src/stories/card.stories.js @@ -1,356 +1,553 @@ -import { html } from 'lit-html'; -import '../components/atoms/CardHeader/cod-card-header'; -import '../components/atoms/CardBody/cod-card-body'; -import '../components/atoms/CardFooter/cod-card-footer'; -import '../components/atoms/CardOverlay/cod-card-overlay'; -import '../components/organisms/Card/cod-card'; -import '../components/atoms/Button/cod-button'; - -export default { - title: 'Components/Organisms/Card', -}; - -export const Basic = () => html` - -
    - ... -
    -
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - Go somewhere -
    -
    -... - -
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - -     -     -`; - -export const BodyOnly = () => html` - - -

    This is some text within a card body.

    -     -     -`; - -export const TitleTextLinks = () => html` - - -
    Card title
    -
    Card subtitle
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - Card link - Another link -     -     -`; - -export const KitchenSink = () => html` - -... - -
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     - -Card link - Another link - -     -`; - -export const Header = () => html` - - -
    Featured
    -     - -
    Special title treatment
    -

    With supporting text below as a natural lead-in to additional content.

    - Go somewhere -     -     -`; - -export const HeaderFooter = () => html` - - -
    Featured
    -     - -
    Special title treatment
    -

    With supporting text below as a natural lead-in to additional content.

    - Go somewhere -     - -

    2 days ago

    -     -     -`; - -export const ImageBottom = () => html` - - -
    Card title
    -

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -

    Last updated 3 mins ago

    -     - ... -     -`; - -export const ImageOverlay = () => html` - - ... - -
    Card title
    -

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -

    Last updated 3 mins ago

    -     -     -`; - -export const NavigationTabs = () => html` - - - - Active - Link - Link - Disabled - - - -
    Special title treatment
    -

    With supporting text below as a natural lead-in to additional content.

    - Go somewhere -     -     -`; - -export const NavigationPills = () => html` - - - - Active - Link - Link - Disabled - - - -
    Special title treatment
    -

    With supporting text below as a natural lead-in to additional content.

    - Go somewhere -     -     -`; - -export const CardStyles = () => html` - - - Header - - -
    Primary card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Secondary card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Success card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Danger card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Warning card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Info card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Light card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Dark card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -`; - -export const Border = () => html` - - - Header - - -
    Primary card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Secondary card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Success card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Danger card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Warning card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Info card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Light card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -
    - - - Header - - -
    Dark card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -     -     -`; - -export const CardGrid = () => html` -
    -
    - - ... - -
    Card title
    -

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -     -     -
    -
    - - ... - -
    Card title
    -

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -     -     -
    -
    - - ... - -
    Card title
    -

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -     -     -
    -
    - - ... - -
    Card title
    -

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -     -     -
    -
    -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/CardHeader/cod-card-header'; +import '../components/atoms/CardBody/cod-card-body'; +import '../components/atoms/CardFooter/cod-card-footer'; +import '../components/atoms/CardOverlay/cod-card-overlay'; +import '../components/organisms/Card/cod-card'; +import '../components/atoms/Button/cod-button'; + +export default { + title: 'Components/Organisms/Card', +}; + +export const Basic = () => html` + +
    + ... +
    +
    Card title
    +

    + Some quick example text to build on the card title and make up the + bulk of the card's content. +

    + Go somewhere +
    +
    + ... + +
    Card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    + +     +     +`; + +export const BodyOnly = () => html` + + +

    This is some text within a card body.

    +     +     +`; + +export const TitleTextLinks = () => html` + + +
    Card title
    +
    Card subtitle
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    + Card link + Another link +     +     +`; + +export const KitchenSink = () => html` + + ... + +
    Card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     + + Card link + Another link + +     +`; + +export const Header = () => html` + + +
    Featured
    +     + +
    Special title treatment
    +

    + With supporting text below as a natural lead-in to additional content. +

    + Go somewhere +     +     +`; + +export const HeaderFooter = () => html` + + +
    Featured
    +     + +
    Special title treatment
    +

    + With supporting text below as a natural lead-in to additional content. +

    + Go somewhere +     + +

    2 days ago

    +     +     +`; + +export const ImageBottom = () => html` + + +
    Card title
    +

    + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. +

    +

    + Last updated 3 mins ago +

    +     + ... +     +`; + +export const ImageOverlay = () => html` + + ... + +
    Card title
    +

    + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. +

    +

    Last updated 3 mins ago

    +     +     +`; + +export const NavigationTabs = () => html` + + + + Active + Link + Link + Disabled + + + +
    Special title treatment
    +

    + With supporting text below as a natural lead-in to additional content. +

    + Go somewhere +     +     +`; + +export const NavigationPills = () => html` + + + + Active + Link + Link + Disabled + + + +
    Special title treatment
    +

    + With supporting text below as a natural lead-in to additional content. +

    + Go somewhere +     +     +`; + +export const CardStyles = () => html` + + + Header + + +
    Primary card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Secondary card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Success card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Danger card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Warning card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Info card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Light card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Dark card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +`; + +export const Border = () => html` + + + Header + + +
    Primary card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Secondary card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Success card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Danger card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Warning card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Info card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Light card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +
    + + + Header + + +
    Dark card title
    +

    + Some quick example text to build on the card title and make up the bulk + of the card's content. +

    +     +     +`; + +export const CardGrid = () => html` +
    +
    + + ... + +
    Card title
    +

    + This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +

    +     +     +
    +
    + + ... + +
    Card title
    +

    + This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +

    +     +     +
    +
    + + ... + +
    Card title
    +

    + This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +

    +     +     +
    +
    + + ... + +
    Card title
    +

    + This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +

    +     +     +
    +
    +`; diff --git a/src/stories/carousel.stories.js b/src/stories/carousel.stories.js index 721d40d4..14b31793 100644 --- a/src/stories/carousel.stories.js +++ b/src/stories/carousel.stories.js @@ -1,150 +1,251 @@ -import { html } from 'lit-html'; -import '../components/atoms/CarouselItem/cod-carousel-item'; -import '../components/atoms/CarouselCaption/cod-carousel-caption'; -import '../components/organisms/Carousel/cod-carousel'; -import '../components/atoms/Button/cod-button'; - -export default { - title: 'Components/Organisms/Carousel', -}; - -export const Basic = () => html` - - - ... - - - ... - - - ... - - - -`; - -export const indicator = () => html` - - - ... - - - ... - - - ... - - -`; - -export const Caption = () => html` - - - ... - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - ... - -
    Second slide label
    -

    Some representative placeholder content for the second slide.

    -     -     - - ... - -
    Third slide label
    -

    Some representative placeholder content for the third slide.

    -     -     -     -`; - -export const Crossfade = () => html` - - - ... - - - ... - - - ... - - -`; - -export const Dark = () => html` - - - ... - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - ... - -
    Second slide label
    -

    Some representative placeholder content for the second slide.

    -     -     - - ... - -
    Third slide label
    -

    Some representative placeholder content for the third slide.

    -     -     -     -`; - -export const ExternalControls = () => html` - - - ... - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - ... - -
    Second slide label
    -

    Some representative placeholder content for the second slide.

    -     -     - - ... - -
    Third slide label
    -

    Some representative placeholder content for the third slide.

    -     -     -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/CarouselItem/cod-carousel-item'; +import '../components/atoms/CarouselCaption/cod-carousel-caption'; +import '../components/organisms/Carousel/cod-carousel'; +import '../components/atoms/Button/cod-button'; + +export default { + title: 'Components/Organisms/Carousel', +}; + +export const Basic = () => html` + + + ... + + + ... + + + ... + + + +`; + +export const indicator = () => html` + + + ... + + + ... + + + ... + + +`; + +export const Caption = () => html` + + + ... + +
    First slide label
    +

    Some representative placeholder content for the first slide.

    +     +     + + ... + +
    Second slide label
    +

    Some representative placeholder content for the second slide.

    +     +     + + ... + +
    Third slide label
    +

    Some representative placeholder content for the third slide.

    +     +     +     +`; + +export const Crossfade = () => html` + + + ... + + + ... + + + ... + + +`; + +export const Dark = () => html` + + + ... + +
    First slide label
    +

    Some representative placeholder content for the first slide.

    +     +     + + ... + +
    Second slide label
    +

    Some representative placeholder content for the second slide.

    +     +     + + ... + +
    Third slide label
    +

    Some representative placeholder content for the third slide.

    +     +     +     +`; + +export const ExternalControls = () => html` + + + ... + +
    First slide label
    +

    Some representative placeholder content for the first slide.

    +     +     + + ... + +
    Second slide label
    +

    Some representative placeholder content for the second slide.

    +     +     + + ... + +
    Third slide label
    +

    Some representative placeholder content for the third slide.

    +     +     +     +`; diff --git a/src/stories/container.stories.js b/src/stories/container.stories.js index 94b40b1c..641f880b 100644 --- a/src/stories/container.stories.js +++ b/src/stories/container.stories.js @@ -1,63 +1,79 @@ -import '../components/atoms/Container/cod-container'; - -export default { - title: 'Components/Atoms/Container', - argTypes: { - type: { - control: { type: 'select' }, - options: ['container', 'container-sm', 'container-md', 'container-lg', 'container-xl', 'container-xxl', 'container-fluid'], - }, - backgroundColor: { - control: { type: 'select' }, - options: ['color-1', 'color-2', 'color-3', 'color-4', 'color-5', 'color-light', 'color-dark'] - }, - }, -}; -// Template -const Template = (args) => { - const container = document.createElement('cod-container'); - container.setAttribute('data-type', args.type); - if(args.elements != null){ - container.innerHTML = args.elements; - } - if(args.content){ - container.setAttribute('data-text', args.content); - } - container.setAttribute('data-extra-classes', args.extraClasses); - container.setAttribute('data-background-color', args.backgroundColor); - return container; -} - -export const Container = Template.bind({}); -Container.args = { - content: 'Basic container', - type: 'container' -}; - -export const ContainerColor = Template.bind({}); -ContainerColor.args = { - content: 'Basic container', - type: 'container', - backgroundColor: 'color-1' -}; - -export const ContainerExtras = Template.bind({}); -ContainerExtras.args = { - content: 'Container with Extra Classes', - type: 'container', - backgroundColor: 'color-1', - extraClasses: 'text-center p-3' -}; - -export const ContainerElements = Template.bind({}); -ContainerElements.args = { - type: 'container', - backgroundColor: 'color-1', - extraClasses: 'text-center p-3', - elements: ` -
    -

    Paragraph 1

    -

    Paragraph 2

    -
    - ` -}; \ No newline at end of file +import '../components/atoms/Container/cod-container'; + +export default { + title: 'Components/Atoms/Container', + argTypes: { + type: { + control: { type: 'select' }, + options: [ + 'container', + 'container-sm', + 'container-md', + 'container-lg', + 'container-xl', + 'container-xxl', + 'container-fluid', + ], + }, + backgroundColor: { + control: { type: 'select' }, + options: [ + 'color-1', + 'color-2', + 'color-3', + 'color-4', + 'color-5', + 'color-light', + 'color-dark', + ], + }, + }, +}; +// Template +const Template = (args) => { + const container = document.createElement('cod-container'); + container.setAttribute('data-type', args.type); + if (args.elements != null) { + container.innerHTML = args.elements; + } + if (args.content) { + container.setAttribute('data-text', args.content); + } + container.setAttribute('data-extra-classes', args.extraClasses); + container.setAttribute('data-background-color', args.backgroundColor); + return container; +}; + +export const Container = Template.bind({}); +Container.args = { + content: 'Basic container', + type: 'container', +}; + +export const ContainerColor = Template.bind({}); +ContainerColor.args = { + content: 'Basic container', + type: 'container', + backgroundColor: 'color-1', +}; + +export const ContainerExtras = Template.bind({}); +ContainerExtras.args = { + content: 'Container with Extra Classes', + type: 'container', + backgroundColor: 'color-1', + extraClasses: 'text-center p-3', +}; + +export const ContainerElements = Template.bind({}); +ContainerElements.args = { + type: 'container', + backgroundColor: 'color-1', + extraClasses: 'text-center p-3', + elements: ` +
    +

    Paragraph 1

    +

    Paragraph 2

    +
    + `, +}; diff --git a/src/stories/dropdown.stories.js b/src/stories/dropdown.stories.js index 999f05fe..c24d59e1 100644 --- a/src/stories/dropdown.stories.js +++ b/src/stories/dropdown.stories.js @@ -1,130 +1,215 @@ -import { html } from 'lit-html'; -import '../components/molecules/Dropdown/cod-dropdown'; -import '../components/atoms/DropdownMenu/cod-dropdown-menu'; -import '../components/atoms/Button/cod-button'; - -export default { - title: 'Components/Molecules/Dropdown', -}; - -export const Basic = () => html` - -
    - - -
    - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -     -     -`; - -export const Variations = () => html` - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     -`; - -export const Split = () => html` - - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     -`; - -export const DarkMode = () => html` - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -
    • -
  • Separated link
    • -     -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/molecules/Dropdown/cod-dropdown'; +import '../components/atoms/DropdownMenu/cod-dropdown-menu'; +import '../components/atoms/Button/cod-button'; + +export default { + title: 'Components/Molecules/Dropdown', +}; + +export const Basic = () => html` + +
    + + +
    + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +     +     +`; + +export const Variations = () => html` + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     +`; + +export const Split = () => html` + + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     +`; + +export const DarkMode = () => html` + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +     +`; diff --git a/src/stories/form.stories.js b/src/stories/form.stories.js index 0c385e5b..4547f96f 100644 --- a/src/stories/form.stories.js +++ b/src/stories/form.stories.js @@ -1,76 +1,88 @@ -import '../components/organisms/Form/cod-form'; - -export default { - title: 'Forms/FormValidation', - argTypes: { - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - } - }, -}; -// Template -const Template = (args) => { - const form = document.createElement('cod-form'); - form.setAttribute('data-background-color', args.backgroundColor); - form.setAttribute('data-id', args.id); - form.setAttribute('data-extra-classes', args.extraClasses); - if(args.submit){ - form.form.addEventListener('submit', (e)=>{ - args.submit(e) - }) - } - form.innerHTML = args.elements; - return form; -} - -export const Form = Template.bind({}); -Form.args = { - id: 'simple-form', - elements: ` - - - - - - - - - - - - -
    - - - - - - - - `, - submit: (e) => {e.preventDefault(); alert('submitted');} -} - -// WithInteraction.play = async ({ args, canvasElement }) => { -// // Assigns canvas to the component root element -// const canvas = within(canvasElement); -// await userEvent.click(canvas.getByTestId('interaction')); -// await expect(console.log); -// } \ No newline at end of file +import '../components/organisms/Form/cod-form'; + +export default { + title: 'Forms/FormValidation', + argTypes: { + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + }, +}; +// Template +const Template = (args) => { + const form = document.createElement('cod-form'); + form.setAttribute('data-background-color', args.backgroundColor); + form.setAttribute('data-id', args.id); + form.setAttribute('data-extra-classes', args.extraClasses); + if (args.submit) { + form.form.addEventListener('submit', (e) => { + args.submit(e); + }); + } + form.innerHTML = args.elements; + return form; +}; + +export const Form = Template.bind({}); +Form.args = { + id: 'simple-form', + elements: ` + + + + + + + + + + + + +
    + + + + + + + + `, + submit: (e) => { + e.preventDefault(); + alert('submitted'); + }, +}; + +// WithInteraction.play = async ({ args, canvasElement }) => { +// // Assigns canvas to the component root element +// const canvas = within(canvasElement); +// await userEvent.click(canvas.getByTestId('interaction')); +// await expect(console.log); +// } diff --git a/src/stories/formcheck.stories.js b/src/stories/formcheck.stories.js index 78e16bc9..8a40cad3 100644 --- a/src/stories/formcheck.stories.js +++ b/src/stories/formcheck.stories.js @@ -1,214 +1,233 @@ -import '../components/atoms/FormCheck/cod-formcheck'; - -export default { - title: 'Forms/FormCheck', - argTypes: { - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - }, - btnColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - defaultValue: 'primary', - }, - type: { - control: { type: 'select' }, - options: ['checkbox', 'radio'], - defaultValue: 'checkbox', - }, - required: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - }, - disabled: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - }, - checked: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - } - }, -}; -// Template -const Template = (args) => { - const formCheck = document.createElement('cod-form-check'); - formCheck.setAttribute('data-id', args.id); - formCheck.setAttribute('data-name', args.name); - formCheck.setAttribute('data-value', args.value); - formCheck.setAttribute('data-type', args.type); - formCheck.setAttribute('data-btn-color', args.btnColor); - formCheck.setAttribute('data-checked', args.checked); - if(args.extraClasses != null){ - formCheck.setAttribute('data-extra-classes', args.extraClasses); - } - if(args.backgroundColor != null){ - formCheck.setAttribute('data-background-color', args.backgroundColor); - } - if(args.label != null){ - formCheck.setAttribute('data-label', args.label); - } - if(args.nolabel != null){ - formCheck.setAttribute('data-nolabel', args.nolabel); - } - if(args.mode != null){ - formCheck.setAttribute('data-mode', args.mode); - } - if(args.disabled != null){ - formCheck.setAttribute('data-disabled', args.disabled); - } - if(args.required != null){ - formCheck.setAttribute('data-required', args.required); - } - if(args.clicked){ - formCheck.addEventListener('click', (e)=>{ - args.clicked(e) - }) - } - - return formCheck; -} - -export const Checkbox = Template.bind({}); -Checkbox.args = { - id: 'simple-checkbox', - label: 'Simple checkbox', - name: 'simple-checkbox', - value: 'simple-checkbox' -}; - -export const Checked = Template.bind({}); -Checked.args = { - id: 'checked-checkbox', - label: 'Checked checkbox', - name: 'checked-checkbox', - value: 'checked-checkbox', - checked: true -}; - -export const Radio = Template.bind({}); -Radio.args = { - id: 'simple-radio', - type: 'radio', - label: 'Simple radio', - name: 'simple-radio', - value: 'simple-radio' -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - id: 'disabled-radio', - type: 'radio', - label: 'Disabled Radio', - name: 'disabled-radio', - value: 'disabled-radio', - disabled: true -}; - -export const NoLabel = Template.bind({}); -NoLabel.args = { - id: 'no-label-radio', - type: 'radio', - nolabel: true, - name: 'no-label-radio', - value: 'no-label-radio', -}; - -export const Switches = Template.bind({}); -Switches.args = { - id: 'switch-checkbox', - label: 'On/Off', - name: 'switch-checkbox', - value: 'switch-checkbox', - mode: 'switch' -}; - -export const InlineCheckboxes = () => { - const tempContainer = document.createElement('div'); - const check1 = document.createElement('cod-form-check'); - check1.setAttribute('data-id', 'inlineCheckbox1'); - check1.setAttribute('data-value', 'option1'); - check1.setAttribute('data-name', 'inllne-checkboxes'); - check1.setAttribute('data-label', 'Option 1'); - check1.setAttribute('data-type','checkbox'); - check1.setAttribute('data-mode', 'check-inline'); - tempContainer.appendChild(check1); - const check2 = document.createElement('cod-form-check'); - check2.setAttribute('data-id', 'inlineCheckbox2'); - check2.setAttribute('data-value', 'option2'); - check1.setAttribute('data-name', 'inllne-checkboxes'); - check2.setAttribute('data-label', 'Option 2'); - check2.setAttribute('data-type','checkbox'); - check2.setAttribute('data-mode', 'check-inline'); - tempContainer.appendChild(check2); - const check3 = document.createElement('cod-form-check'); - check3.setAttribute('data-id', 'inlineCheckbox2'); - check3.setAttribute('data-value', 'option2'); - check3.setAttribute('data-name', 'inllne-checkboxes'); - check3.setAttribute('data-label', 'Option 3 disabled'); - check3.setAttribute('data-type','checkbox'); - check3.setAttribute('data-mode', 'check-inline'); - check3.setAttribute('data-disabled', true); - tempContainer.appendChild(check3); - return tempContainer; -} - -export const Reverse = Template.bind({}); -Reverse.args = { - id: 'reverse-checkbox', - label: 'Reverse Checkbox', - name: 'reverse-checkbox', - value: 'reverse-checkbox', - mode: 'check-reverse', -}; - - -export const CheckboxButton = Template.bind({}); -CheckboxButton.args = { - id: 'checkbox-button', - label: 'Checkbox Button', - name: 'checkbox-button', - value: 'checkbox-button', - mode: 'btn' -}; - -export const RadioButton = Template.bind({}); -RadioButton.args = { - id: 'radio-button', - type: 'radio', - label: 'Radio Button', - name: 'radio-button', - value: 'radio-button', - btnColor: 'warning', - mode: 'btn' -}; - -export const RadioButtonOutlined = Template.bind({}); -RadioButtonOutlined.args = { - id: 'radio-button', - label: 'Radio Button Outline', - name: 'radio-button', - value: 'radio-button', - btnColor: 'danger', - mode: 'btn-outline' -}; - -export const WithInteraction = Template.bind({}); -WithInteraction.args = { - id: 'interaction-checkbox', - label: 'Interaction checkbox', - name: 'interaction-checkbox', - value: 'interaction-checkbox', - clicked: (e) => {console.log(e)}, -}; - -// WithInteraction.play = async ({ args, canvasElement }) => { -// // Assigns canvas to the component root element -// const canvas = within(canvasElement); -// await userEvent.click(canvas.getByTestId('interaction')); -// await expect(console.log); -// } \ No newline at end of file +import '../components/atoms/FormCheck/cod-formcheck'; + +export default { + title: 'Forms/FormCheck', + argTypes: { + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + btnColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + defaultValue: 'primary', + }, + type: { + control: { type: 'select' }, + options: ['checkbox', 'radio'], + defaultValue: 'checkbox', + }, + required: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + disabled: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + checked: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + }, +}; +// Template +const Template = (args) => { + const formCheck = document.createElement('cod-form-check'); + formCheck.setAttribute('data-id', args.id); + formCheck.setAttribute('data-name', args.name); + formCheck.setAttribute('data-value', args.value); + formCheck.setAttribute('data-type', args.type); + formCheck.setAttribute('data-btn-color', args.btnColor); + formCheck.setAttribute('data-checked', args.checked); + if (args.extraClasses != null) { + formCheck.setAttribute('data-extra-classes', args.extraClasses); + } + if (args.backgroundColor != null) { + formCheck.setAttribute('data-background-color', args.backgroundColor); + } + if (args.label != null) { + formCheck.setAttribute('data-label', args.label); + } + if (args.nolabel != null) { + formCheck.setAttribute('data-nolabel', args.nolabel); + } + if (args.mode != null) { + formCheck.setAttribute('data-mode', args.mode); + } + if (args.disabled != null) { + formCheck.setAttribute('data-disabled', args.disabled); + } + if (args.required != null) { + formCheck.setAttribute('data-required', args.required); + } + if (args.clicked) { + formCheck.addEventListener('click', (e) => { + args.clicked(e); + }); + } + + return formCheck; +}; + +export const Checkbox = Template.bind({}); +Checkbox.args = { + id: 'simple-checkbox', + label: 'Simple checkbox', + name: 'simple-checkbox', + value: 'simple-checkbox', +}; + +export const Checked = Template.bind({}); +Checked.args = { + id: 'checked-checkbox', + label: 'Checked checkbox', + name: 'checked-checkbox', + value: 'checked-checkbox', + checked: true, +}; + +export const Radio = Template.bind({}); +Radio.args = { + id: 'simple-radio', + type: 'radio', + label: 'Simple radio', + name: 'simple-radio', + value: 'simple-radio', +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + id: 'disabled-radio', + type: 'radio', + label: 'Disabled Radio', + name: 'disabled-radio', + value: 'disabled-radio', + disabled: true, +}; + +export const NoLabel = Template.bind({}); +NoLabel.args = { + id: 'no-label-radio', + type: 'radio', + nolabel: true, + name: 'no-label-radio', + value: 'no-label-radio', +}; + +export const Switches = Template.bind({}); +Switches.args = { + id: 'switch-checkbox', + label: 'On/Off', + name: 'switch-checkbox', + value: 'switch-checkbox', + mode: 'switch', +}; + +export const InlineCheckboxes = () => { + const tempContainer = document.createElement('div'); + const check1 = document.createElement('cod-form-check'); + check1.setAttribute('data-id', 'inlineCheckbox1'); + check1.setAttribute('data-value', 'option1'); + check1.setAttribute('data-name', 'inllne-checkboxes'); + check1.setAttribute('data-label', 'Option 1'); + check1.setAttribute('data-type', 'checkbox'); + check1.setAttribute('data-mode', 'check-inline'); + tempContainer.appendChild(check1); + const check2 = document.createElement('cod-form-check'); + check2.setAttribute('data-id', 'inlineCheckbox2'); + check2.setAttribute('data-value', 'option2'); + check1.setAttribute('data-name', 'inllne-checkboxes'); + check2.setAttribute('data-label', 'Option 2'); + check2.setAttribute('data-type', 'checkbox'); + check2.setAttribute('data-mode', 'check-inline'); + tempContainer.appendChild(check2); + const check3 = document.createElement('cod-form-check'); + check3.setAttribute('data-id', 'inlineCheckbox2'); + check3.setAttribute('data-value', 'option2'); + check3.setAttribute('data-name', 'inllne-checkboxes'); + check3.setAttribute('data-label', 'Option 3 disabled'); + check3.setAttribute('data-type', 'checkbox'); + check3.setAttribute('data-mode', 'check-inline'); + check3.setAttribute('data-disabled', true); + tempContainer.appendChild(check3); + return tempContainer; +}; + +export const Reverse = Template.bind({}); +Reverse.args = { + id: 'reverse-checkbox', + label: 'Reverse Checkbox', + name: 'reverse-checkbox', + value: 'reverse-checkbox', + mode: 'check-reverse', +}; + +export const CheckboxButton = Template.bind({}); +CheckboxButton.args = { + id: 'checkbox-button', + label: 'Checkbox Button', + name: 'checkbox-button', + value: 'checkbox-button', + mode: 'btn', +}; + +export const RadioButton = Template.bind({}); +RadioButton.args = { + id: 'radio-button', + type: 'radio', + label: 'Radio Button', + name: 'radio-button', + value: 'radio-button', + btnColor: 'warning', + mode: 'btn', +}; + +export const RadioButtonOutlined = Template.bind({}); +RadioButtonOutlined.args = { + id: 'radio-button', + label: 'Radio Button Outline', + name: 'radio-button', + value: 'radio-button', + btnColor: 'danger', + mode: 'btn-outline', +}; + +export const WithInteraction = Template.bind({}); +WithInteraction.args = { + id: 'interaction-checkbox', + label: 'Interaction checkbox', + name: 'interaction-checkbox', + value: 'interaction-checkbox', + clicked: (e) => { + console.log(e); + }, +}; + +// WithInteraction.play = async ({ args, canvasElement }) => { +// // Assigns canvas to the component root element +// const canvas = within(canvasElement); +// await userEvent.click(canvas.getByTestId('interaction')); +// await expect(console.log); +// } diff --git a/src/stories/formcheckgroup.stories.js b/src/stories/formcheckgroup.stories.js index 6bd754c2..cd722c5c 100644 --- a/src/stories/formcheckgroup.stories.js +++ b/src/stories/formcheckgroup.stories.js @@ -1,79 +1,76 @@ -import { html } from 'lit-html'; -import '../components/molecules/FormCheckGroup/cod-form-check-group'; - -export default { - title: 'Forms/FormCheckGroup', -}; - -export const RadioGroup = () => html` - - - - - -`; - -export const CheckboxGroup = () => html` - - - - - -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/molecules/FormCheckGroup/cod-form-check-group'; + +export default { + title: 'Forms/FormCheckGroup', +}; + +export const RadioGroup = () => html` + + + + + +`; + +export const CheckboxGroup = () => html` + + + + + +`; diff --git a/src/stories/formcontrol.stories.js b/src/stories/formcontrol.stories.js index ef60bbcc..24d42787 100644 --- a/src/stories/formcontrol.stories.js +++ b/src/stories/formcontrol.stories.js @@ -1,116 +1,127 @@ -import '../components/atoms/FormControl/cod-formcontrol'; - -export default { - title: 'Forms/FormControl', - argTypes: { - tag: { - control: { type: 'select' }, - options: ['input', 'textarea'], - defaultValue: 'input', - }, - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - }, - size: { - control: { type: 'select' }, - options: ['sm', 'md', 'lg'], - defaultValue: 'md' - }, - type: { - control: { type: 'select' }, - options: ['text', 'number', 'email', 'color', 'tel', 'password'], - defaultValue: 'text', - }, - required: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - }, - readOnly: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - } - }, -}; -// Template -const Template = (args) => { - const fcontrol = document.createElement('cod-form-control'); - fcontrol.setAttribute('data-tag', args.tag); - if(args.size != null){ - fcontrol.setAttribute('data-size', args.size); - } - if(args.rows != null){ - fcontrol.setAttribute('data-rows', args.rows); - } - if(args.value != null){ - fcontrol.setAttribute('data-value', args.value); - } - fcontrol.setAttribute('data-read-only', args.readOnly); - fcontrol.setAttribute('data-background-color', args.backgroundColor); - fcontrol.setAttribute('data-id', args.id); - fcontrol.setAttribute('data-type', args.type); - fcontrol.setAttribute('data-plain-txt', args.plainText); - fcontrol.setAttribute('data-disabled', args.disabled); - fcontrol.setAttribute('data-required', args.required); - fcontrol.setAttribute('data-placeholder-txt', args.placeholder); - fcontrol.addEventListener('keydown', (e)=>{ - args.keydown(e) - }) - return fcontrol; -} - -export const Input = Template.bind({}); -Input.args = { - id: 'simple-input', - placeholder: 'enter text here', - tag: 'input' -}; - -export const ReadOnly = Template.bind({}); -ReadOnly.args = { - id: 'read-only-input', - placeholder: 'Not editable', - readOnly: 'true', - tag: 'input' -}; - -export const SpecialInput = Template.bind({}); -SpecialInput.args = { - id: 'special-input', - placeholder: 'enter text here', - type: 'color', - tag: 'input' -}; - -export const Textarea = Template.bind({}); -Textarea.args = { - id: 'simple-textarea', - placeholder: 'enter text here', - tag: 'textarea', - rows: '5', -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - id: 'disabled-input', - placeholder: 'This input is disabled', - disabled: 'true', - tag: 'input' -}; - -export const WithInteraction = Template.bind({}); -WithInteraction.args = { - id: 'interaction-input', - placeholder: 'enter text here', - tag: 'input', - keydown: (e) => {console.log(e)}, -}; - -// WithInteraction.play = async ({ args, canvasElement }) => { -// // Assigns canvas to the component root element -// const canvas = within(canvasElement); -// await userEvent.click(canvas.getByTestId('interaction')); -// await expect(console.log); -// } \ No newline at end of file +import '../components/atoms/FormControl/cod-formcontrol'; + +export default { + title: 'Forms/FormControl', + argTypes: { + tag: { + control: { type: 'select' }, + options: ['input', 'textarea'], + defaultValue: 'input', + }, + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + size: { + control: { type: 'select' }, + options: ['sm', 'md', 'lg'], + defaultValue: 'md', + }, + type: { + control: { type: 'select' }, + options: ['text', 'number', 'email', 'color', 'tel', 'password'], + defaultValue: 'text', + }, + required: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + readOnly: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + }, +}; +// Template +const Template = (args) => { + const fcontrol = document.createElement('cod-form-control'); + fcontrol.setAttribute('data-tag', args.tag); + if (args.size != null) { + fcontrol.setAttribute('data-size', args.size); + } + if (args.rows != null) { + fcontrol.setAttribute('data-rows', args.rows); + } + if (args.value != null) { + fcontrol.setAttribute('data-value', args.value); + } + fcontrol.setAttribute('data-read-only', args.readOnly); + fcontrol.setAttribute('data-background-color', args.backgroundColor); + fcontrol.setAttribute('data-id', args.id); + fcontrol.setAttribute('data-type', args.type); + fcontrol.setAttribute('data-plain-txt', args.plainText); + fcontrol.setAttribute('data-disabled', args.disabled); + fcontrol.setAttribute('data-required', args.required); + fcontrol.setAttribute('data-placeholder-txt', args.placeholder); + fcontrol.addEventListener('keydown', (e) => { + args.keydown(e); + }); + return fcontrol; +}; + +export const Input = Template.bind({}); +Input.args = { + id: 'simple-input', + placeholder: 'enter text here', + tag: 'input', +}; + +export const ReadOnly = Template.bind({}); +ReadOnly.args = { + id: 'read-only-input', + placeholder: 'Not editable', + readOnly: 'true', + tag: 'input', +}; + +export const SpecialInput = Template.bind({}); +SpecialInput.args = { + id: 'special-input', + placeholder: 'enter text here', + type: 'color', + tag: 'input', +}; + +export const Textarea = Template.bind({}); +Textarea.args = { + id: 'simple-textarea', + placeholder: 'enter text here', + tag: 'textarea', + rows: '5', +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + id: 'disabled-input', + placeholder: 'This input is disabled', + disabled: 'true', + tag: 'input', +}; + +export const WithInteraction = Template.bind({}); +WithInteraction.args = { + id: 'interaction-input', + placeholder: 'enter text here', + tag: 'input', + keydown: (e) => { + console.log(e); + }, +}; + +// WithInteraction.play = async ({ args, canvasElement }) => { +// // Assigns canvas to the component root element +// const canvas = within(canvasElement); +// await userEvent.click(canvas.getByTestId('interaction')); +// await expect(console.log); +// } diff --git a/src/stories/formlabel.stories.js b/src/stories/formlabel.stories.js index baf37b98..dd794155 100644 --- a/src/stories/formlabel.stories.js +++ b/src/stories/formlabel.stories.js @@ -1,47 +1,56 @@ -import '../components/atoms/FormLabel/cod-formlabel'; - -export default { - title: 'Forms/FormLabel', - argTypes: { - required: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - }, - color: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - } - }, -}; -// Template -const Template = (args) => { - const label = document.createElement('cod-form-label'); - label.setAttribute('data-color', args.color); - label.setAttribute('data-input-id', args.inputID); - label.setAttribute('data-text', args.text); - label.setAttribute('data-hidden', args.hidden); - label.setAttribute('data-required', args.required); - label.setAttribute('data-extra-classes', args.extraClasses); - return label; -} - -export const Label = Template.bind({}); -Label.args = { - inputID: 'basic-label', - text: 'Basic label' -}; - -export const Hidden = Template.bind({}); -Hidden.args = { - inputID: 'hidden-label', - text: 'Hidden label', - hidden: 'true' -}; - -export const ExtraClasses = Template.bind({}); -ExtraClasses.args = { - inputID: 'hidden-label', - text: 'Hidden label', - extraClasses: 'p-5 text-bg-warning' -}; +import '../components/atoms/FormLabel/cod-formlabel'; + +export default { + title: 'Forms/FormLabel', + argTypes: { + required: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + color: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + }, +}; +// Template +const Template = (args) => { + const label = document.createElement('cod-form-label'); + label.setAttribute('data-color', args.color); + label.setAttribute('data-input-id', args.inputID); + label.setAttribute('data-text', args.text); + label.setAttribute('data-hidden', args.hidden); + label.setAttribute('data-required', args.required); + label.setAttribute('data-extra-classes', args.extraClasses); + return label; +}; + +export const Label = Template.bind({}); +Label.args = { + inputID: 'basic-label', + text: 'Basic label', +}; + +export const Hidden = Template.bind({}); +Hidden.args = { + inputID: 'hidden-label', + text: 'Hidden label', + hidden: 'true', +}; + +export const ExtraClasses = Template.bind({}); +ExtraClasses.args = { + inputID: 'hidden-label', + text: 'Hidden label', + extraClasses: 'p-5 text-bg-warning', +}; diff --git a/src/stories/formselect.stories.js b/src/stories/formselect.stories.js index 0b9f5ef8..8418c3b2 100644 --- a/src/stories/formselect.stories.js +++ b/src/stories/formselect.stories.js @@ -1,97 +1,97 @@ -import '../components/atoms/FormSelect/cod-formselect'; - -export default { - title: 'Forms/FormSelect', - argTypes: { - size: { - control: { type: 'select' }, - options: ['sm', 'md', 'lg'], - defaultValue: 'md' - }, - required: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - }, - disabled: { - control: { type: 'select' }, - options: ['true', 'false'], - defaultValue: 'false' - } - }, -}; -// Template -const Template = (args) => { - const select = document.createElement('cod-form-select'); - select.innerHTML = ` - - - - - `; - if(args.id != null){ - select.setAttribute('data-id', args.id); - } - if(args.value != null){ - select.setAttribute('data-value', args.value); - } - if(args.size != null){ - select.setAttribute('data-size', args.size); - } - if(args.multiple != null){ - select.setAttribute('data-multiple', args.multiple); - } - if(args.displayMultiple != null){ - select.setAttribute('data-display-multiple', args.displayMultiple); - } - if(args.extraClasses != null){ - select.setAttribute('data-extra-classes', args.extraClasses); - } - select.setAttribute('data-aria-label', args.ariaLabel); - select.setAttribute('data-disabled', args.disabled); - select.setAttribute('data-required', args.required); - if(args.selectChange != null){ - select.addEventListener('click', (e)=>{ - args.selectChange(e) - }) - } - - return select; -} - -export const Select = Template.bind({}); -Select.args = { - id: 'simple-select', - ariaLabel: 'Simple select example' -}; - -export const Multiple = Template.bind({}); -Multiple.args = { - id: 'simple-select', - ariaLabel: 'Simple select example', - multiple: 'true', -}; - -export const MultipleShowOnly = Template.bind({}); -MultipleShowOnly.args = { - id: 'simple-select', - ariaLabel: 'Simple select example', - multiple: 'true', - displayMultiple: '2' -}; - -export const WithInteraction = Template.bind({}); -WithInteraction.args = { - id: 'interaction-input', - ariaLabel: 'Interaction select example', - selectChange: (e) => { - console.log(e.target.shadowRoot.querySelector('select').value); - }, -}; - -// WithInteraction.play = async ({ args, canvasElement }) => { -// // Assigns canvas to the component root element -// const canvas = within(canvasElement); -// await userEvent.click(canvas.getByTestId('interaction')); -// await expect(console.log); -// } \ No newline at end of file +import '../components/atoms/FormSelect/cod-formselect'; + +export default { + title: 'Forms/FormSelect', + argTypes: { + size: { + control: { type: 'select' }, + options: ['sm', 'md', 'lg'], + defaultValue: 'md', + }, + required: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + disabled: { + control: { type: 'select' }, + options: ['true', 'false'], + defaultValue: 'false', + }, + }, +}; +// Template +const Template = (args) => { + const select = document.createElement('cod-form-select'); + select.innerHTML = ` + + + + + `; + if (args.id != null) { + select.setAttribute('data-id', args.id); + } + if (args.value != null) { + select.setAttribute('data-value', args.value); + } + if (args.size != null) { + select.setAttribute('data-size', args.size); + } + if (args.multiple != null) { + select.setAttribute('data-multiple', args.multiple); + } + if (args.displayMultiple != null) { + select.setAttribute('data-display-multiple', args.displayMultiple); + } + if (args.extraClasses != null) { + select.setAttribute('data-extra-classes', args.extraClasses); + } + select.setAttribute('data-aria-label', args.ariaLabel); + select.setAttribute('data-disabled', args.disabled); + select.setAttribute('data-required', args.required); + if (args.selectChange != null) { + select.addEventListener('click', (e) => { + args.selectChange(e); + }); + } + + return select; +}; + +export const Select = Template.bind({}); +Select.args = { + id: 'simple-select', + ariaLabel: 'Simple select example', +}; + +export const Multiple = Template.bind({}); +Multiple.args = { + id: 'simple-select', + ariaLabel: 'Simple select example', + multiple: 'true', +}; + +export const MultipleShowOnly = Template.bind({}); +MultipleShowOnly.args = { + id: 'simple-select', + ariaLabel: 'Simple select example', + multiple: 'true', + displayMultiple: '2', +}; + +export const WithInteraction = Template.bind({}); +WithInteraction.args = { + id: 'interaction-input', + ariaLabel: 'Interaction select example', + selectChange: (e) => { + console.log(e.target.shadowRoot.querySelector('select').value); + }, +}; + +// WithInteraction.play = async ({ args, canvasElement }) => { +// // Assigns canvas to the component root element +// const canvas = within(canvasElement); +// await userEvent.click(canvas.getByTestId('interaction')); +// await expect(console.log); +// } diff --git a/src/stories/geocoder.stories.js b/src/stories/geocoder.stories.js index 66f9c2cd..bf7ec3d6 100644 --- a/src/stories/geocoder.stories.js +++ b/src/stories/geocoder.stories.js @@ -1,8 +1,8 @@ -import { html } from 'lit-html'; -import '../components/organisms/Geocoder/cod-geocoder'; - -export default { - title: 'Components/Organisms/geocoder', -}; - -export const loaded = () => html``; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/organisms/Geocoder/cod-geocoder'; + +export default { + title: 'Components/Organisms/geocoder', +}; + +export const loaded = () => html``; diff --git a/src/stories/icon.stories.js b/src/stories/icon.stories.js index 7a0563d3..15f68b68 100644 --- a/src/stories/icon.stories.js +++ b/src/stories/icon.stories.js @@ -1,34 +1,46 @@ -import '../components/atoms/Icon/cod-icon'; - -export default { - title: 'Components/Atoms/Icon', - argTypes: { - icon: { - control: { type: 'select' }, - options: ['house', 'house-fill', 'exclamation-circle', 'exclamation-circle-fill', 'exclamation-triangle', 'check-circle', 'check-circle-fill', 'calendar', 'calendar-fill', 'calendar-date', 'calendar-date-fill'] - }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large', 'x-large'] - } - }, -}; -// Template -const Template = (args) => { - const icon = document.createElement('cod-icon'); - icon.setAttribute('data-icon', args.icon); - icon.setAttribute('data-size', args.size); - return icon; -} - -export const Icon = Template.bind({}); -Icon.args = { - icon: 'house', - size: 'small' -}; - -export const IconCustom = Template.bind({}); -IconCustom.args = { - icon: 'house', - size: '120' -}; \ No newline at end of file +import '../components/atoms/Icon/cod-icon'; + +export default { + title: 'Components/Atoms/Icon', + argTypes: { + icon: { + control: { type: 'select' }, + options: [ + 'house', + 'house-fill', + 'exclamation-circle', + 'exclamation-circle-fill', + 'exclamation-triangle', + 'check-circle', + 'check-circle-fill', + 'calendar', + 'calendar-fill', + 'calendar-date', + 'calendar-date-fill', + ], + }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large', 'x-large'], + }, + }, +}; +// Template +const Template = (args) => { + const icon = document.createElement('cod-icon'); + icon.setAttribute('data-icon', args.icon); + icon.setAttribute('data-size', args.size); + return icon; +}; + +export const Icon = Template.bind({}); +Icon.args = { + icon: 'house', + size: 'small', +}; + +export const IconCustom = Template.bind({}); +IconCustom.args = { + icon: 'house', + size: '120', +}; diff --git a/src/stories/image.stories.js b/src/stories/image.stories.js index e30439ec..70d166a1 100644 --- a/src/stories/image.stories.js +++ b/src/stories/image.stories.js @@ -1,41 +1,50 @@ -import '../components/atoms/Image/cod-image'; - -export default { - title: 'Components/Atoms/Image', - argTypes: { - align: { - control: { type: 'select' }, - options: ['start', 'end'] - }, - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - }, - size: { - control: { type: 'select' }, - options: ['fluid', 'thumbnail'] - }, - } -}; -// Template -const Template = (args) => { - const image = document.createElement('cod-image'); - image.innerHTML = args.sources; - return image; -} - -export const ImageSources = Template.bind({}); -ImageSources.args = { - sources : ` - - - Worker - `, -}; - -export const ImageOnly = Template.bind({}); -ImageOnly.args = { - sources : ` - SOTC - `, -}; \ No newline at end of file +import '../components/atoms/Image/cod-image'; + +export default { + title: 'Components/Atoms/Image', + argTypes: { + align: { + control: { type: 'select' }, + options: ['start', 'end'], + }, + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + size: { + control: { type: 'select' }, + options: ['fluid', 'thumbnail'], + }, + }, +}; +// Template +const Template = (args) => { + const image = document.createElement('cod-image'); + image.innerHTML = args.sources; + return image; +}; + +export const ImageSources = Template.bind({}); +ImageSources.args = { + sources: ` + + + Worker + `, +}; + +export const ImageOnly = Template.bind({}); +ImageOnly.args = { + sources: ` + SOTC + `, +}; diff --git a/src/stories/listgroup.stories.js b/src/stories/listgroup.stories.js index 7b9f40ce..20d09d37 100644 --- a/src/stories/listgroup.stories.js +++ b/src/stories/listgroup.stories.js @@ -1,198 +1,332 @@ -import { html } from 'lit-html'; -import '../components/atoms/ListGroupItem/cod-listgroup-item'; -import '../components/molecules/ListGroup/cod-listgroup'; - -export default { - title: 'Components/Molecules/ListGroup', -}; - -export const Basic = () => html` - - - - - - - - - - - - - -`; - -export const Active = () => html` - - - - - - - - - - - - -`; - -export const Disabled = () => html` - - - - - - - - - - - - -`; - -export const Links = () => html` - - - - - - - - - - - - -`; - -export const Button = () => html` - - - - - - - - - - - - -`; - -export const Flushed = () => html` - - - - - - - - - - - - -`; - -export const Numbered = () => html` - - - - - - - - -`; - -export const NumberedCustom = () => html` - - -
    -
    Subheading
    - Content for list item -
    - -     - -
    -
    Subheading
    - Content for list item -
    - -     - -
    -
    Subheading
    - Content for list item -
    - -     -     -`; - -export const Horizontal = () => html` - - - - - - - - -`; - -export const Variants = () => html` - - - - - - - - - - - - - - - - - - - - -`; - -export const VariantsActions = () => html` - - - - - - - - - - - - - - - - - - - - -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/ListGroupItem/cod-listgroup-item'; +import '../components/molecules/ListGroup/cod-listgroup'; + +export default { + title: 'Components/Molecules/ListGroup', +}; + +export const Basic = () => html` + + + + + + + + + + + + +`; + +export const Active = () => html` + + + + + + + + + + + + +`; + +export const Disabled = () => html` + + + + + + + + + + + + +`; + +export const Links = () => html` + + + + + + + + + + + + +`; + +export const Button = () => html` + + + + + + + + + + + + +`; + +export const Flushed = () => html` + + + + + + + + + + + +`; + +export const Numbered = () => html` + + + + + + + + +`; + +export const NumberedCustom = () => html` + + +
    +
    Subheading
    + Content for list item +
    + +     + +
    +
    Subheading
    + Content for list item +
    + +     + +
    +
    Subheading
    + Content for list item +
    + +     +     +`; + +export const Horizontal = () => html` + + + + + + + +`; + +export const Variants = () => html` + + + + + + + + + + + + + + + + + + + + +`; + +export const VariantsActions = () => html` + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/stories/loader.stories.js b/src/stories/loader.stories.js index 0e19b04c..7e3a2fc9 100644 --- a/src/stories/loader.stories.js +++ b/src/stories/loader.stories.js @@ -3,11 +3,19 @@ import '../components/atoms/Loader/cod-loader'; export default { title: 'Components/Atoms/Loader', argTypes: { - backgroundColor: { + backgroundColor: { control: { type: 'select' }, - options: ['color-1', 'color-2', 'color-3', 'color-4', 'color-5', 'color-light', 'color-dark'], + options: [ + 'color-1', + 'color-2', + 'color-3', + 'color-4', + 'color-5', + 'color-light', + 'color-dark', + ], }, - } + }, }; // Template @@ -15,6 +23,6 @@ const Template = (args) => { const loader = document.createElement('cod-loader'); loader.setAttribute('data-color', args.backgroundColor); return loader; -} +}; -export const Loader = Template.bind({}); \ No newline at end of file +export const Loader = Template.bind({}); diff --git a/src/stories/modal.stories.js b/src/stories/modal.stories.js index 27f98c9e..1f12d956 100644 --- a/src/stories/modal.stories.js +++ b/src/stories/modal.stories.js @@ -1,181 +1,181 @@ -import { html } from 'lit-html'; -import '../components/atoms/ModalHeader/cod-modal-header'; -import '../components/atoms/ModalBody/cod-modal-body'; -import '../components/atoms/ModalFooter/cod-modal-footer'; -import '../components/organisms/Modal/cod-modal'; -import '../components/atoms/Button/cod-button'; - -export default { - title: 'Components/Organisms/Modal', -}; - -export const Basic = () => html` - - -
    -
    -
    -
    -
    Modal title
    - -
    -
    -

    Modal body text goes here.

    -
    -
    - - -
    -
    -
    -
    - -

    Modal title

    -     - -

    Woo-hoo, you're reading this text in a modal!

    -     - - - -`; - -export const StaticBackdrop = () => html` - - - -

    Modal title

    -     - -

    I will not close if you click outside of me. Don't even try to press escape key.

    -     - - - -`; - -export const VerticalCentered = () => html` - - - -

    Modal title

    -     - -

    This is a vertically centered modal.

    -     - - - -`; - -export const UsingGrid = () => html` - - - -

    Modal title

    -     - -
    -
    -
    .col-md-4
    -
    .col-md-4 .ms-auto
    -
    -
    -
    .col-md-3 .ms-auto
    -
    .col-md-2 .ms-auto
    -
    -
    -
    .col-md-6 .ms-auto
    -
    -
    -
    - Level 1: .col-sm-9 -
    -
    - Level 2: .col-8 .col-sm-6 -
    -
    - Level 2: .col-4 .col-sm-6 -
    -
    -
    -
    -
    -     - - - -`; - -export const Sizes = () => html` - - - -

    Modal title

    -     - -

    Woo-hoo, you're reading this text in a modal!

    -     - - - -`; - -export const Fullscreen = () => html` - - - -

    Modal title

    -     - -

    Woo-hoo, you're reading this text in a modal!

    -     - - - -`; - -export const ColorModal = () => html` - - -
    -
    -
    -
    -
    Modal title
    - -
    -
    -

    Modal body text goes here.

    -
    -
    - - -
    -
    -
    -
    - -

    Modal title

    -     - -

    Woo-hoo, you're reading this text in a modal!

    -     - - - -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/ModalHeader/cod-modal-header'; +import '../components/atoms/ModalBody/cod-modal-body'; +import '../components/atoms/ModalFooter/cod-modal-footer'; +import '../components/organisms/Modal/cod-modal'; +import '../components/atoms/Button/cod-button'; + +export default { + title: 'Components/Organisms/Modal', +}; + +export const Basic = () => html` + + +
    +
    +
    +
    +
    Modal title
    + +
    +
    +

    Modal body text goes here.

    +
    +
    + + +
    +
    +
    +
    + +

    Modal title

    +     + +

    Woo-hoo, you're reading this text in a modal!

    +     + + + +`; + +export const StaticBackdrop = () => html` + + + +

    Modal title

    +     + +

    I will not close if you click outside of me. Don't even try to press escape key.

    +     + + + +`; + +export const VerticalCentered = () => html` + + + +

    Modal title

    +     + +

    This is a vertically centered modal.

    +     + + + +`; + +export const UsingGrid = () => html` + + + +

    Modal title

    +     + +
    +
    +
    .col-md-4
    +
    .col-md-4 .ms-auto
    +
    +
    +
    .col-md-3 .ms-auto
    +
    .col-md-2 .ms-auto
    +
    +
    +
    .col-md-6 .ms-auto
    +
    +
    +
    + Level 1: .col-sm-9 +
    +
    + Level 2: .col-8 .col-sm-6 +
    +
    + Level 2: .col-4 .col-sm-6 +
    +
    +
    +
    +
    +     + + + +`; + +export const Sizes = () => html` + + + +

    Modal title

    +     + +

    Woo-hoo, you're reading this text in a modal!

    +     + + + +`; + +export const Fullscreen = () => html` + + + +

    Modal title

    +     + +

    Woo-hoo, you're reading this text in a modal!

    +     + + + +`; + +export const ColorModal = () => html` + + +
    +
    +
    +
    +
    Modal title
    + +
    +
    +

    Modal body text goes here.

    +
    +
    + + +
    +
    +
    +
    + +

    Modal title

    +     + +

    Woo-hoo, you're reading this text in a modal!

    +     + + + +`; diff --git a/src/stories/nav.stories.js b/src/stories/nav.stories.js index 34db92df..8b8b81ab 100644 --- a/src/stories/nav.stories.js +++ b/src/stories/nav.stories.js @@ -1,131 +1,159 @@ -import { html } from 'lit-html'; -import '../components/molecules/Nav/cod-nav'; - -export default { - title: 'Components/Molecules/Nav', -}; - -export const Basic = () => html` - - - Active - Link - Link - Disabled - -`; - -export const HorizontalAlignment = () => html` - -Active -Link -Link -Disabled - - - -Active -Link -Link -Disabled - -`; - -export const Vertical = () => html` - -Active -Link -Link -Disabled - -`; - -export const Tabs = () => html` - -Active -Link -Link -Disabled - -`; - -export const Pills = () => html` - -Active -Link -Link -Disabled - -`; - -export const Underline = () => html` - -Active -Link -Link -Disabled - -`; - -export const FillJustify = () => html` - -Active -Much longer nav link -Link -Disabled - -
    - -Active -Much longer nav link -Link -Disabled - -`; - -export const TabsDropdowns = () => html` - -Active - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -     -     -Link -Disabled -     -`; - -export const PillssDropdowns = () => html` - -Active - - - -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • -     -     -Link -Disabled -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/molecules/Nav/cod-nav'; + +export default { + title: 'Components/Molecules/Nav', +}; + +export const Basic = () => html` + + + Active + Link + Link + Disabled + +`; + +export const HorizontalAlignment = () => html` + + Active + Link + Link + Disabled + + + + Active + Link + Link + Disabled + +`; + +export const Vertical = () => html` + + Active + Link + Link + Disabled + +`; + +export const Tabs = () => html` + + Active + Link + Link + Disabled + +`; + +export const Pills = () => html` + + Active + Link + Link + Disabled + +`; + +export const Underline = () => html` + + Active + Link + Link + Disabled + +`; + +export const FillJustify = () => html` + + Active + Much longer nav link + Link + Disabled + +
    + + Active + Much longer nav link + Link + Disabled + +`; + +export const TabsDropdowns = () => html` + + Active + + + +
  • Action
    • +
  • Another action
    • +
  • + Something else here +
    • +     +     + Link + Disabled +     +`; + +export const PillssDropdowns = () => html` + + Active + + + +
  • Action
    • +
  • Another action
    • +
  • + Something else here +
    • +     +     + Link + Disabled +     +`; diff --git a/src/stories/navbar.stories.js b/src/stories/navbar.stories.js index 0546bc2b..df4059bf 100644 --- a/src/stories/navbar.stories.js +++ b/src/stories/navbar.stories.js @@ -1,351 +1,554 @@ -import { html } from 'lit-html'; -import '../components/atoms/NavbarBrand/cod-navbar-brand'; -import '../components/atoms/NavbarCollapse/cod-navbar-collapse'; -import '../components/atoms/NavbarToggle/cod-navbar-toggle'; -import '../components/organisms/Navbar/cod-navbar'; -import '../components/molecules/Nav/cod-nav'; -import '../components/molecules/Dropdown/cod-dropdown'; -import '../components/atoms/DropdownMenu/cod-dropdown-menu'; -import '../components/atoms/Button/cod-button'; - -export default { - title: 'Components/Organisms/Navbar', -}; - -export const Basic = () => html` - - - - - - - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - Disabled -     -     -     -`; - -export const Brand = () => html` - - - - - - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - Disabled -     -     -     - - - - - - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - Disabled -     -     -     - - - - - - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - Disabled -     -     -     - - - - - - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - Disabled -     -     -     -`; - -export const TextNonNav = () => html` - - - - - - - - Signed in as: Edgar Montes - - - -`; - -export const Color = () => html` - - - - - - - - Home - Features - Pricing - - - -
    - - - - - - - - Home - Features - Pricing - - - -
    - - - - - - - - Home - Features - Pricing - - - -`; - -export const Placement = () => html` - - - - - - - - Home - Features - Pricing - - - -
    - - - - - - - - Home - Features - Pricing - - - -
    - - - - - - - - Home - Features - Pricing - - - -
    - - - - - - - - Home - Features - Pricing - - - -
    - - - - - - - - Home - Features - Pricing - - - -`; - - -export const Offcanvas = () => html` - - - - - -
    Offcanvas
    -     - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - -     -     -     - - -     -`; - -export const OffcanvasColor = () => html` - - - - - -
    Offcanvas
    -     - - - Home - Link - - - -
  • Link
    • -
  • Another action
    • -
  • Something else here
    • -     -     - -     -     -     - - -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/NavbarBrand/cod-navbar-brand'; +import '../components/atoms/NavbarCollapse/cod-navbar-collapse'; +import '../components/atoms/NavbarToggle/cod-navbar-toggle'; +import '../components/organisms/Navbar/cod-navbar'; +import '../components/molecules/Nav/cod-nav'; +import '../components/molecules/Dropdown/cod-dropdown'; +import '../components/atoms/DropdownMenu/cod-dropdown-menu'; +import '../components/atoms/Button/cod-button'; + +export default { + title: 'Components/Organisms/Navbar', +}; + +export const Basic = () => html` + + + + + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + Disabled +     +     +     +`; + +export const Brand = () => html` + + + + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + Disabled +     +     +     + + + + + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + Disabled +     +     +     + + + + + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + Disabled +     +     +     + + + + + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + Disabled +     +     +     +`; + +export const TextNonNav = () => html` + + + + + + Signed in as: Edgar Montes + + + +`; + +export const Color = () => html` + + + + + + + + Home + Features + Pricing + + + +
    + + + + + + + + Home + Features + Pricing + + + +
    + + + + + + + Home + Features + Pricing + + + +`; + +export const Placement = () => html` + + + + + + Home + Features + Pricing + + + +
    + + + + + + Home + Features + Pricing + + + +
    + + + + + + Home + Features + Pricing + + + +
    + + + + + + Home + Features + Pricing + + + +
    + + + + + + + Home + Features + Pricing + + + +`; + +export const Offcanvas = () => html` + + + + +
    Offcanvas
    +     + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + +     +     +     + +     +`; + +export const OffcanvasColor = () => html` + + + + + +
    Offcanvas
    +     + + + Home + Link + + + +
  • Link
    • +
  • + Another action +
    • +
  • + Something else here +
    • +     +     + +     +     +     + + +     +`; diff --git a/src/stories/offcanvas.stories.js b/src/stories/offcanvas.stories.js index cccf60d1..26f9b7bb 100644 --- a/src/stories/offcanvas.stories.js +++ b/src/stories/offcanvas.stories.js @@ -1,150 +1,263 @@ -import { html } from 'lit-html'; -import '../components/atoms/OffcanvasHeader/cod-offcanvas-header'; -import '../components/atoms/OffcanvasBody/cod-offcanvas-body'; -import '../components/organisms/Offcanvas/cod-offcanvas'; - -export default { - title: 'Components/Organisms/Offcanvas', -}; - -export const Basic = () => html` - - - - -
    -
    -
    Offcanvas
    - -
    -
    -
    - Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. -
    -
    - - -
    -
    -
    - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     -`; - -export const NoBackdrop = () => html` - - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     -`; - -export const StaticBackdrop = () => html` - - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     -`; - -export const Dark = () => html` - - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     -`; - -export const Custom = () => html` - - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     -`; - -export const Placement = () => html` - - - - - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     - - -
    Offcanvas
    -     - -

    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

    -     -     -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/OffcanvasHeader/cod-offcanvas-header'; +import '../components/atoms/OffcanvasBody/cod-offcanvas-body'; +import '../components/organisms/Offcanvas/cod-offcanvas'; + +export default { + title: 'Components/Organisms/Offcanvas', +}; + +export const Basic = () => html` + + + + +
    +
    +
    Offcanvas
    + +
    +
    +
    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
    +
    + + +
    +
    +
    + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     +`; + +export const NoBackdrop = () => html` + + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     +`; + +export const StaticBackdrop = () => html` + + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     +`; + +export const Dark = () => html` + + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     +`; + +export const Custom = () => html` + + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     +`; + +export const Placement = () => html` + + + + + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     + + +
    Offcanvas
    +     + +

    + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +

    +     +     +`; diff --git a/src/stories/pagination.stories.js b/src/stories/pagination.stories.js index 583a93a6..f40c9d2a 100644 --- a/src/stories/pagination.stories.js +++ b/src/stories/pagination.stories.js @@ -1,131 +1,128 @@ -import { html } from 'lit-html'; -import '../components/atoms/PaginationItem/cod-pagination-item'; -import '../components/molecules/Pagination/cod-pagination'; - -export default { - title: 'Components/Molecules/Pagination', -}; - -export const Basic = () => html` - - - - - - - - - - - - - -`; - -export const Icons = () => html` - - - - - - - - - - - - -`; - -export const DisabledActive = () => html` - - - - - - - - - - - - -`; - -export const Sizing = () => html` - - - - - - - - - - - - - - - - -`; - -export const Alignment = () => html` - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -export const Custom = () => html` - - - - - - - - - - - - -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/PaginationItem/cod-pagination-item'; +import '../components/molecules/Pagination/cod-pagination'; + +export default { + title: 'Components/Molecules/Pagination', +}; + +export const Basic = () => html` + + + + + + + + + +`; + +export const Icons = () => html` + + + + + + + + + +`; + +export const DisabledActive = () => html` + + + + + + + + + +`; + +export const Sizing = () => html` + + + + + + + + + + +`; + +export const Alignment = () => html` + + + + + + + + + + + + + + + + + +`; + +export const Custom = () => html` + + + + + + + + + + + +`; diff --git a/src/stories/progress.stories.js b/src/stories/progress.stories.js index 37cfd04f..6b1ee37a 100644 --- a/src/stories/progress.stories.js +++ b/src/stories/progress.stories.js @@ -1,83 +1,92 @@ -import '../components/atoms/Progress/cod-progress'; - -export default { - title: 'Components/Atoms/Progress', - argTypes: { - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - }, - }, -}; -// Template -const Template = (args) => { - const progress = document.createElement('cod-progress'); - progress.setAttribute('data-type', args.type); - progress.setAttribute('data-background-color', args.backgroundColor); - progress.setAttribute('data-value', args.value); - progress.setAttribute('data-label', args.label); - progress.setAttribute('data-aria-label', args.ariaLabel); - progress.setAttribute('data-animated', args.animated); - progress.setAttribute('data-multi-bars', args.multiBars); - return progress; -} - -export const ProgressBar = Template.bind({}); -ProgressBar.args = { - backgroundColor: 'primary', - value: '25', - ariaLabel: 'simple test' -}; - -export const StripedBar = Template.bind({}); -StripedBar.args = { - backgroundColor: 'primary', - value: '25', - ariaLabel: 'simple test', - type: 'striped' -}; - -export const StripedBarAnimated = Template.bind({}); -StripedBarAnimated.args = { - backgroundColor: 'primary', - value: '25', - ariaLabel: 'simple test', - type: 'striped', - animated: 'animated' -}; - -export const StripedBarLabel = Template.bind({}); -StripedBarLabel.args = { - backgroundColor: 'primary', - value: '25', - ariaLabel: 'simple test', - type: 'striped', - animated: 'animated', - label: 'this 25%' -}; - -export const StripedBarStacked = Template.bind({}); -StripedBarStacked.args = { - multiBars: JSON.stringify([ - { - ariaLabel: 'first stacked bar', - value: '30', - label: 'Something 30%', - animated: 'animated', - striped: 'striped', - backgroundColor: 'info' - }, - { - ariaLabel: 'second stacked bar', - value: '15', - animated: 'animated', - striped: 'striped', - backgroundColor: 'warning' - }, - { - ariaLabel: 'second stacked bar', - value: '20', - backgroundColor: 'success' - } - ]) -}; \ No newline at end of file +import '../components/atoms/Progress/cod-progress'; + +export default { + title: 'Components/Atoms/Progress', + argTypes: { + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + }, +}; +// Template +const Template = (args) => { + const progress = document.createElement('cod-progress'); + progress.setAttribute('data-type', args.type); + progress.setAttribute('data-background-color', args.backgroundColor); + progress.setAttribute('data-value', args.value); + progress.setAttribute('data-label', args.label); + progress.setAttribute('data-aria-label', args.ariaLabel); + progress.setAttribute('data-animated', args.animated); + progress.setAttribute('data-multi-bars', args.multiBars); + return progress; +}; + +export const ProgressBar = Template.bind({}); +ProgressBar.args = { + backgroundColor: 'primary', + value: '25', + ariaLabel: 'simple test', +}; + +export const StripedBar = Template.bind({}); +StripedBar.args = { + backgroundColor: 'primary', + value: '25', + ariaLabel: 'simple test', + type: 'striped', +}; + +export const StripedBarAnimated = Template.bind({}); +StripedBarAnimated.args = { + backgroundColor: 'primary', + value: '25', + ariaLabel: 'simple test', + type: 'striped', + animated: 'animated', +}; + +export const StripedBarLabel = Template.bind({}); +StripedBarLabel.args = { + backgroundColor: 'primary', + value: '25', + ariaLabel: 'simple test', + type: 'striped', + animated: 'animated', + label: 'this 25%', +}; + +export const StripedBarStacked = Template.bind({}); +StripedBarStacked.args = { + multiBars: JSON.stringify([ + { + ariaLabel: 'first stacked bar', + value: '30', + label: 'Something 30%', + animated: 'animated', + striped: 'striped', + backgroundColor: 'info', + }, + { + ariaLabel: 'second stacked bar', + value: '15', + animated: 'animated', + striped: 'striped', + backgroundColor: 'warning', + }, + { + ariaLabel: 'second stacked bar', + value: '20', + backgroundColor: 'success', + }, + ]), +}; diff --git a/src/stories/range.stories.js b/src/stories/range.stories.js index bd64777d..7523716f 100644 --- a/src/stories/range.stories.js +++ b/src/stories/range.stories.js @@ -1,48 +1,48 @@ -import '../components/atoms/Range/cod-range'; - -export default { - title: 'Components/Atoms/Forms/Range', - argTypes: { - disable: { - control: { type: 'select' }, - options: [true, false], - defaultValue: false - }, - }, -}; -// Template -const Template = (args) => { - const range = document.createElement('cod-range'); - range.setAttribute('data-id', args.id); - range.setAttribute('data-disable', args.disable); - if(args.min != null){ - range.setAttribute('data-min', args.min); - } - if(args.max != null){ - range.setAttribute('data-max', args.max); - } - if(args.step != null){ - range.setAttribute('data-step', args.step); - } - return range; -} - -export const Range = Template.bind({}); -Range.args = { - id: 'simple-range', -}; - -export const MinMax = Template.bind({}); -MinMax.args = { - id: 'simple-range', - min: 0, - max: 100, -}; - -export const Step = Template.bind({}); -Step.args = { - id: 'simple-range', - min: 0, - max: 5, - step: .5, -}; \ No newline at end of file +import '../components/atoms/Range/cod-range'; + +export default { + title: 'Components/Atoms/Forms/Range', + argTypes: { + disable: { + control: { type: 'select' }, + options: [true, false], + defaultValue: false, + }, + }, +}; +// Template +const Template = (args) => { + const range = document.createElement('cod-range'); + range.setAttribute('data-id', args.id); + range.setAttribute('data-disable', args.disable); + if (args.min != null) { + range.setAttribute('data-min', args.min); + } + if (args.max != null) { + range.setAttribute('data-max', args.max); + } + if (args.step != null) { + range.setAttribute('data-step', args.step); + } + return range; +}; + +export const Range = Template.bind({}); +Range.args = { + id: 'simple-range', +}; + +export const MinMax = Template.bind({}); +MinMax.args = { + id: 'simple-range', + min: 0, + max: 100, +}; + +export const Step = Template.bind({}); +Step.args = { + id: 'simple-range', + min: 0, + max: 5, + step: 0.5, +}; diff --git a/src/stories/spinner.stories.js b/src/stories/spinner.stories.js index 27f13c76..bf31bc0d 100644 --- a/src/stories/spinner.stories.js +++ b/src/stories/spinner.stories.js @@ -1,34 +1,43 @@ -import '../components/atoms/Spinner/cod-spinner'; - -export default { - title: 'Components/Atoms/Spinner', - argTypes: { - type: { - control: { type: 'select' }, - options: ['border', 'grow'] - }, - size: { - control: { type: 'select' }, - options: ['sm', ''] - }, - backgroundColor: { - control: { type: 'select' }, - options: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'], - }, - }, -}; -// Template -const Template = (args) => { - const spinner = document.createElement('cod-spinner'); - spinner.setAttribute('data-type', args.type); - spinner.setAttribute('data-background-color', args.backgroundColor); - spinner.setAttribute('data-size', args.size); - spinner.setAttribute('data-display-type', args.displayType); - return spinner; -} - -export const Spinner = Template.bind({}); -Spinner.args = { - type: 'border', - backgroundColor: 'primary' -}; +import '../components/atoms/Spinner/cod-spinner'; + +export default { + title: 'Components/Atoms/Spinner', + argTypes: { + type: { + control: { type: 'select' }, + options: ['border', 'grow'], + }, + size: { + control: { type: 'select' }, + options: ['sm', ''], + }, + backgroundColor: { + control: { type: 'select' }, + options: [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark', + ], + }, + }, +}; +// Template +const Template = (args) => { + const spinner = document.createElement('cod-spinner'); + spinner.setAttribute('data-type', args.type); + spinner.setAttribute('data-background-color', args.backgroundColor); + spinner.setAttribute('data-size', args.size); + spinner.setAttribute('data-display-type', args.displayType); + return spinner; +}; + +export const Spinner = Template.bind({}); +Spinner.args = { + type: 'border', + backgroundColor: 'primary', +}; diff --git a/src/stories/table.stories.js b/src/stories/table.stories.js index 5cfde230..9aa06fcf 100644 --- a/src/stories/table.stories.js +++ b/src/stories/table.stories.js @@ -1,331 +1,343 @@ -import { html } from 'lit-html'; -import '../components/atoms/TableHeader/cod-table-header'; -import '../components/atoms/TableBody/cod-table-body'; -import '../components/atoms/TableRow/cod-table-row'; -import '../components/atoms/TableCell/cod-table-cell'; -import '../components/atoms/TableCellHeader/cod-table-cell-header'; -import '../components/organisms/Table/cod-table'; - -export default { - title: 'Components/Organisms/Table', -}; - -export const Basic = () => html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #FirstLastHandle
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - -     -`; - -export const StripedRows = () => html` - - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -`; - -export const StripedColumns = () => html` - - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -`; - -export const Hover = () => html` - - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -`; - -export const Dark = () => html` - - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -`; - -export const Custom = () => html` - - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - # - First - Last - Handle - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -`; - -export const Responsive = () => html` - - - - # - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - Table heading - - - - - 1 - Table cell 1 - Table cell 2 - Table cell 3 - Table cell 4 - Table cell 5 - Table cell 6 - Table cell 7 - Table cell 8 - Table cell 9 - Table cell 10 - Table cell 11 - Table cell 12 - - - 2 - Table cell 1 - Table cell 2 - Table cell 3 - Table cell 4 - Table cell 5 - Table cell 6 - Table cell 7 - Table cell 8 - Table cell 9 - Table cell 10 - Table cell 11 - Table cell 12 - - - 3 - Table cell 1 - Table cell 2 - Table cell 3 - Table cell 4 - Table cell 5 - Table cell 6 - Table cell 7 - Table cell 8 - Table cell 9 - Table cell 10 - Table cell 11 - Table cell 12 - - - -`; \ No newline at end of file +import { html } from 'lit-html'; +import '../components/atoms/TableHeader/cod-table-header'; +import '../components/atoms/TableBody/cod-table-body'; +import '../components/atoms/TableRow/cod-table-row'; +import '../components/atoms/TableCell/cod-table-cell'; +import '../components/atoms/TableCellHeader/cod-table-cell-header'; +import '../components/organisms/Table/cod-table'; + +export default { + title: 'Components/Organisms/Table', +}; + +export const Basic = () => html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #FirstLastHandle
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + +     +`; + +export const StripedRows = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const StripedColumns = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Hover = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Dark = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Custom = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + + + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Responsive = () => html` + + + + # + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + + + + + 1 + Table cell 1 + Table cell 2 + Table cell 3 + Table cell 4 + Table cell 5 + Table cell 6 + Table cell 7 + Table cell 8 + Table cell 9 + Table cell 10 + Table cell 11 + Table cell 12 + + + 2 + Table cell 1 + Table cell 2 + Table cell 3 + Table cell 4 + Table cell 5 + Table cell 6 + Table cell 7 + Table cell 8 + Table cell 9 + Table cell 10 + Table cell 11 + Table cell 12 + + + 3 + Table cell 1 + Table cell 2 + Table cell 3 + Table cell 4 + Table cell 5 + Table cell 6 + Table cell 7 + Table cell 8 + Table cell 9 + Table cell 10 + Table cell 11 + Table cell 12 + + + +`; diff --git a/webpack.config.js b/webpack.config.js index bd73a953..75adcee8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,143 +1,145 @@ -const path = require("path"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const webpack = require("webpack"); -const TerserWebpackPlugin = require("terser-webpack-plugin"); -const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); - -module.exports = function(_env, argv) { - const isProduction = argv.mode === "production"; - const isDevelopment = !isProduction; - - return { - devtool: isDevelopment && "cheap-module-source-map", - entry: "./src/index.js", - output: { - path: path.resolve(__dirname, "build"), - filename: "assets/js/[name].js", - publicPath: "" - }, - module: { - rules: [ - { - test: /\.jsx?$/, - exclude: /node_modules/, - use: { - loader: "babel-loader", - options: { - cacheDirectory: true, - cacheCompression: false, - envName: isProduction ? "production" : "development" - } - } - }, - { - test: /\.css$/i, - use: [ - isProduction ? MiniCssExtractPlugin.loader : "to-string-loader", - "css-loader", 'postcss-loader' - ] - }, - { - test: /\.s[ac]ss$/i, - use: [ - isProduction ? MiniCssExtractPlugin.loader : "style-loader", - "css-loader", "sass-loader" - ] - }, - { - test: /\.(png|jpg|gif)$/i, - use: { - loader: "url-loader", - options: { - limit: 8192, - name: "static/media/[name].[hash:8].[ext]" - } - } - }, - { - test: /\.svg$/, - use: ["@svgr/webpack"] - }, - { - test: /\.(eot|otf|ttf|woff|woff2)$/, - loader: require.resolve("file-loader"), - options: { - name: "static/media/[name].[hash:8].[ext]" - } - } - ] - }, - resolve: { - extensions: [".js", ".jsx"] - }, - plugins: [ - isProduction && - new MiniCssExtractPlugin({ - filename: "assets/css/[name].css", - chunkFilename: "assets/css/[name].chunk.css" - }), - new HtmlWebpackPlugin({ - template: path.resolve(__dirname, "public/index.html"), - inject: true - }), - new webpack.DefinePlugin({ - "process.env.NODE_ENV": JSON.stringify( - isProduction ? "production" : "development" - ) - }) - ].filter(Boolean), - optimization: { - minimize: isProduction, - minimizer: [ - new TerserWebpackPlugin({ - terserOptions: { - compress: { - comparisons: false - }, - mangle: { - safari10: true - }, - output: { - comments: false, - ascii_only: true - }, - warnings: false - } - }), - new CssMinimizerPlugin(), - ], - splitChunks: { - chunks: "all", - minSize: 0, - maxInitialRequests: 10, - maxAsyncRequests: 10, - cacheGroups: { - vendors: { - test: /[\\/]node_modules[\\/]/, - name(module, chunks, cacheGroupKey) { - const packageName = module.context.match( - /[\\/]node_modules[\\/](.*?)([\\/]|$)/ - )[1]; - return `${cacheGroupKey}.${packageName.replace("@", "")}`; - } - }, - common: { - minChunks: 2, - priority: -10 - } - } - }, - runtimeChunk: "single" - }, - devServer: { - port: 3000, - compress: true, - historyApiFallback: true, - open: true, - client: { - overlay: true - } - } - }; -}; \ No newline at end of file +const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const webpack = require('webpack'); +const TerserWebpackPlugin = require('terser-webpack-plugin'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); + +module.exports = function (_env, argv) { + const isProduction = argv.mode === 'production'; + const isDevelopment = !isProduction; + + return { + devtool: isDevelopment && 'cheap-module-source-map', + entry: './src/index.js', + output: { + path: path.resolve(__dirname, 'build'), + filename: 'assets/js/[name].js', + publicPath: '', + }, + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + cacheDirectory: true, + cacheCompression: false, + envName: isProduction ? 'production' : 'development', + }, + }, + }, + { + test: /\.css$/i, + use: [ + isProduction ? MiniCssExtractPlugin.loader : 'to-string-loader', + 'css-loader', + 'postcss-loader', + ], + }, + { + test: /\.s[ac]ss$/i, + use: [ + isProduction ? MiniCssExtractPlugin.loader : 'style-loader', + 'css-loader', + 'sass-loader', + ], + }, + { + test: /\.(png|jpg|gif)$/i, + use: { + loader: 'url-loader', + options: { + limit: 8192, + name: 'static/media/[name].[hash:8].[ext]', + }, + }, + }, + { + test: /\.svg$/, + use: ['@svgr/webpack'], + }, + { + test: /\.(eot|otf|ttf|woff|woff2)$/, + loader: require.resolve('file-loader'), + options: { + name: 'static/media/[name].[hash:8].[ext]', + }, + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx'], + }, + plugins: [ + isProduction && + new MiniCssExtractPlugin({ + filename: 'assets/css/[name].css', + chunkFilename: 'assets/css/[name].chunk.css', + }), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, 'public/index.html'), + inject: true, + }), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify( + isProduction ? 'production' : 'development', + ), + }), + ].filter(Boolean), + optimization: { + minimize: isProduction, + minimizer: [ + new TerserWebpackPlugin({ + terserOptions: { + compress: { + comparisons: false, + }, + mangle: { + safari10: true, + }, + output: { + comments: false, + ascii_only: true, + }, + warnings: false, + }, + }), + new CssMinimizerPlugin(), + ], + splitChunks: { + chunks: 'all', + minSize: 0, + maxInitialRequests: 10, + maxAsyncRequests: 10, + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + name(module, chunks, cacheGroupKey) { + const packageName = module.context.match( + /[\\/]node_modules[\\/](.*?)([\\/]|$)/, + )[1]; + return `${cacheGroupKey}.${packageName.replace('@', '')}`; + }, + }, + common: { + minChunks: 2, + priority: -10, + }, + }, + }, + runtimeChunk: 'single', + }, + devServer: { + port: 3000, + compress: true, + historyApiFallback: true, + open: true, + client: { + overlay: true, + }, + }, + }; +}; diff --git a/yarn.lock b/yarn.lock index 67cbfb4e..f3144eee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9481,6 +9481,7 @@ __metadata: postcss: ^8.4.21 postcss-loader: ^7.0.2 postcss-preset-env: ^8.0.1 + prettier: ^3.0.3 raw-loader: ^4.0.2 react: ^18.2.0 react-dom: ^18.2.0 @@ -18243,6 +18244,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^3.0.3": + version: 3.0.3 + resolution: "prettier@npm:3.0.3" + bin: + prettier: bin/prettier.cjs + checksum: e10b9af02b281f6c617362ebd2571b1d7fc9fb8a3bd17e371754428cda992e5e8d8b7a046e8f7d3e2da1dcd21aa001e2e3c797402ebb6111b5cd19609dd228e0 + languageName: node + linkType: hard + "pretty-bytes@npm:^5.6.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0"