@roadtrip/components 3.45.1 → 3.45.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-0e4df560.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +3 -3
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/collection/components/drawer/drawer.js +3 -3
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/icon/svg/filter-particle-specific-color.svg +1 -0
- package/dist/collection/components/icon/svg/filter-particle-specific-outline.svg +1 -0
- package/dist/esm/index-6de77b28.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +3 -3
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/icons/icons.svg +1 -1
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +2 -0
- package/dist/roadtrip/{p-bb1aeca6.entry.js → p-246ff4b4.entry.js} +2 -2
- package/dist/roadtrip/p-246ff4b4.entry.js.map +1 -0
- package/dist/roadtrip/p-55a946f4.js.map +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/svg/filter-particle-specific-color.svg +1 -0
- package/dist/roadtrip/svg/filter-particle-specific-outline.svg +1 -0
- package/icons/icons.svg +1 -1
- package/icons/index.d.ts +2 -0
- package/icons/index.js +2 -0
- package/package.json +1 -1
- package/dist/roadtrip/p-bb1aeca6.entry.js.map +0 -1
|
@@ -89,10 +89,10 @@ export class Drawer {
|
|
|
89
89
|
handleFocusTrapProp(value) {
|
|
90
90
|
var _a, _b;
|
|
91
91
|
if (value) {
|
|
92
|
-
(_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.
|
|
92
|
+
(_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.unpause();
|
|
93
93
|
}
|
|
94
94
|
else {
|
|
95
|
-
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.
|
|
95
|
+
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.pause();
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
// @Watch('isOpen')
|
|
@@ -174,7 +174,7 @@ export class Drawer {
|
|
|
174
174
|
const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
|
|
175
175
|
const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
|
|
176
176
|
const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
|
|
177
|
-
return (h(Host, { key: '
|
|
177
|
+
return (h(Host, { key: '7af3b4a88f0a363c855326f7d16dd3ad61e33f77', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '8e53b924d59c397e1e00ab08fa4db306d5922add', class: "road-drawer-wrapper" }, h("div", { key: '860bc071a169c65f2e0b3887126c6107b77e37d1', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'c3fbf6f148733f1f52fcae529b1080c1dbd28840', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '0edcecc7ab673fe11a1378860396c6c6c5ee7612', class: "drawer-content" }, h("header", { key: '39b86a4cb7bfbe7ec148ca2a54b8ca2f238a8a03', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '323e24993c0c3a136e38bf4878f1b0813cfa7c25', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'd99631b6d2635dbc5e73f30c2ff1617ee198fd23' })), h("footer", { key: 'c900c6d0f86425c86e8c877e9312f294228c98e2', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '5a582bb9cb0035f35f7040d664305735f8ae933f', name: "footer" })))))));
|
|
178
178
|
}
|
|
179
179
|
static get is() { return "road-drawer"; }
|
|
180
180
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n */\n\n\n@Component({\n tag: 'road-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class Drawer {\n\n /**\n * Current reference of the drawer\n */\n @Element() el!: HTMLRoadDrawerElement;\n\n /**\n * Set isOpen property to true to open the drawer\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Set removePadding property to true to remove padding for drawer body\n */\n @Prop({ mutable: true }) removePadding: boolean = false;\n\n /**\n * position of the drawer. e.g. left, right, bottom\n */\n @Prop() position: string = 'left';\n\n /**\n * Width of the drawer\n */\n @Prop() drawerWidth: number = 480;\n\n /**\n * Inverse header colors\n */\n @Prop() hasInverseHeader: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() hasBackIcon: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() backText?: string;\n\n /**\n * Title of the drawer in the header bar\n */\n @Prop() drawerTitle?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabel?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelBack?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelClose?: string;\n\n /**\n * Show / hide close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Override focus trap\n */\n @Prop() enabledFocusTrap: boolean = true;\n\n /**\n * Indicate when opening the drawer\n */\n @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n /**\n * Indicate when closing the drawer\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Indicate when return to previous state of the drawer content\n */\n @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n /**\n * Focus trap state\n */\n @State() focusTrap?: FocusTrap;\n\n /**\n * Footer Content state\n */\n @State() hasFooterContent = false;\n\n /**\n * Open the drawer\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the drawer\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /**\n * Return to previous state of the drawer content\n */\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n /**\n * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n */\n @Watch('enabledFocusTrap')\n handleFocusTrapProp(value: boolean) {\n if (value) {\n this.focusTrap?.activate();\n } else {\n this.focusTrap?.deactivate();\n }\n }\n\n // @Watch('isOpen')\n // handleOpen(openValue: boolean) {\n // if(openValue === true) {\n // this.onOpen.emit();\n // } else {\n // this.el.addEventListener('transitionend', () => {\n // this.onClose.emit();\n // this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n // }, { once: true});\n // }\n // }\n\n\n @Watch('isOpen')\n handleOpen(openValue: boolean) {\n if(openValue === true) {\n this.onOpen.emit();\n // Focus the first button element after the drawer is opened then focus trap\n setTimeout(() => {\n this.focusFirstElement();\n this.focusTrap?.activate();\n }, 50); // Add a slight delay to ensure the element is rendered\n } else {\n this.el.addEventListener('transitionend', () => {\n this.focusTrap?.deactivate();\n this.onClose.emit();\n this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n }, { once: true });\n }\n }\n\n /**\n * Find and focus the first element in the drawer\n */\n private focusFirstElement() {\n const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n\n if (firstElement) {\n firstElement.focus();\n }\n }\n\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\n };\n\n /**\n * Close the dialog when press Escape key\n */\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if (event.key === 'Escape' || event.key === \"Esc\") {\n this.close();\n }\n }\n\n /**\n * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n\n const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n tabbableOptions: {\n getShadowRoot: true,\n },\n });\n }\n\n render() {\n const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n const ariaLabel = this.ariaLabel ?? 'drawer';\n const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n const backIconElement = this.hasBackIcon ? (\n <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n {this.backText}\n </button>\n ) : null;\n const closeIconElement = this.hasCloseIcon ? (\n <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n </button>\n ) : null;\n const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n\n const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n\n return (\n <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n <div class=\"road-drawer-wrapper\">\n <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\">\n <div class=\"drawer-content\">\n <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n {backIconElement}\n {this.drawerTitle ? (\n <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n ) : (\n <div class=\"drawer-title\">\n <slot name=\"title\" />\n </div>\n )}\n {closeIconElement}\n </header>\n <div class={`drawer-body ${removePaddingClass}`}>\n <slot />\n </div>\n <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n <slot name=\"footer\" />\n </footer>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n */\n\n\n@Component({\n tag: 'road-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class Drawer {\n\n /**\n * Current reference of the drawer\n */\n @Element() el!: HTMLRoadDrawerElement;\n\n /**\n * Set isOpen property to true to open the drawer\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Set removePadding property to true to remove padding for drawer body\n */\n @Prop({ mutable: true }) removePadding: boolean = false;\n\n /**\n * position of the drawer. e.g. left, right, bottom\n */\n @Prop() position: string = 'left';\n\n /**\n * Width of the drawer\n */\n @Prop() drawerWidth: number = 480;\n\n /**\n * Inverse header colors\n */\n @Prop() hasInverseHeader: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() hasBackIcon: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() backText?: string;\n\n /**\n * Title of the drawer in the header bar\n */\n @Prop() drawerTitle?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabel?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelBack?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelClose?: string;\n\n /**\n * Show / hide close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Override focus trap\n */\n @Prop() enabledFocusTrap: boolean = true;\n\n /**\n * Indicate when opening the drawer\n */\n @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n /**\n * Indicate when closing the drawer\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Indicate when return to previous state of the drawer content\n */\n @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n /**\n * Focus trap state\n */\n @State() focusTrap?: FocusTrap;\n\n /**\n * Footer Content state\n */\n @State() hasFooterContent = false;\n\n /**\n * Open the drawer\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the drawer\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /**\n * Return to previous state of the drawer content\n */\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n /**\n * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n */\n @Watch('enabledFocusTrap')\n handleFocusTrapProp(value: boolean) {\n if (value) {\n this.focusTrap?.unpause();\n } else {\n this.focusTrap?.pause();\n }\n }\n\n // @Watch('isOpen')\n // handleOpen(openValue: boolean) {\n // if(openValue === true) {\n // this.onOpen.emit();\n // } else {\n // this.el.addEventListener('transitionend', () => {\n // this.onClose.emit();\n // this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n // }, { once: true});\n // }\n // }\n\n\n @Watch('isOpen')\n handleOpen(openValue: boolean) {\n if(openValue === true) {\n this.onOpen.emit();\n // Focus the first button element after the drawer is opened then focus trap\n setTimeout(() => {\n this.focusFirstElement();\n this.focusTrap?.activate();\n }, 50); // Add a slight delay to ensure the element is rendered\n } else {\n this.el.addEventListener('transitionend', () => {\n this.focusTrap?.deactivate();\n this.onClose.emit();\n this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n }, { once: true });\n }\n }\n\n /**\n * Find and focus the first element in the drawer\n */\n private focusFirstElement() {\n const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n\n if (firstElement) {\n firstElement.focus();\n }\n }\n\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\n };\n\n /**\n * Close the dialog when press Escape key\n */\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if (event.key === 'Escape' || event.key === \"Esc\") {\n this.close();\n }\n }\n\n /**\n * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n\n const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n tabbableOptions: {\n getShadowRoot: true,\n },\n });\n }\n\n render() {\n const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n const ariaLabel = this.ariaLabel ?? 'drawer';\n const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n const backIconElement = this.hasBackIcon ? (\n <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n {this.backText}\n </button>\n ) : null;\n const closeIconElement = this.hasCloseIcon ? (\n <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n </button>\n ) : null;\n const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n\n const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n\n return (\n <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n <div class=\"road-drawer-wrapper\">\n <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\">\n <div class=\"drawer-content\">\n <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n {backIconElement}\n {this.drawerTitle ? (\n <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n ) : (\n <div class=\"drawer-title\">\n <slot name=\"title\" />\n </div>\n )}\n {closeIconElement}\n </header>\n <div class={`drawer-body ${removePaddingClass}`}>\n <slot />\n </div>\n <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n <slot name=\"footer\" />\n </footer>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M27 18h11v2H27v-2ZM27 22.5h11v2H27v-2ZM27 27h11v2H27v-2ZM27 31.5h11v2H27v-2ZM27 36h11v2H27v-2ZM27 40.5h11v2H27v-2ZM27 45h11v2H27v-2Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/><path d="m55.033 28.5-1.51 1.524 1.39 1.403h-6.425v2.155h6.425l-1.39 1.403 1.51 1.524L59 32.504 55.033 28.5ZM41.477 21.737l-1.51 1.524 1.39 1.403h-3.334v2.155h3.335l-1.39 1.403 1.51 1.524 3.966-4.004-3.967-4.005ZM45.338 36.153l-1.51 1.523 1.39 1.404h-4.924v2.154h4.924l-1.39 1.404 1.51 1.524 3.966-4.005-3.966-4.004Z" /><path d="M18.77 51.051a5.34 5.34 0 0 1-5-3.464l-1.518-4.05a.763.763 0 0 0-.714-.495H4V40.5h7.538c1.378 0 2.611.854 3.095 2.144l1.518 4.05a2.797 2.797 0 0 0 2.62 1.815h26.702c1.06 0 2.027-.6 2.5-1.547l2.319-4.635a3.306 3.306 0 0 1 2.956-1.827H60v2.542h-6.752a.763.763 0 0 0-.682.422L50.248 48.1a5.34 5.34 0 0 1-4.775 2.952H18.77ZM45.167 13.948a5.34 5.34 0 0 1 5 3.464l1.518 4.05a.763.763 0 0 0 .714.495H60V24.5h-7.6a3.306 3.306 0 0 1-3.096-2.145l-1.518-4.05a2.797 2.797 0 0 0-2.619-1.814H18.465c-1.06 0-2.027.599-2.501 1.546l-2.318 4.635a3.306 3.306 0 0 1-2.957 1.828H4v-2.543h6.69a.763.763 0 0 0 .681-.422L13.69 16.9a5.34 5.34 0 0 1 4.776-2.952h26.702Z" /><path d="M38.125 15.969V49.53h-2.237V15.97h2.237Zm-9.153 0V49.5h-2.237V15.969h2.237ZM18.192 42.665a1.271 1.271 0 1 1 2.542 0 1.271 1.271 0 0 1-2.542 0ZM21.751 38.089a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM22.768 29.444a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM19.717 22.325a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM14.632 28.427a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM10.564 35.292a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM17.683 34.02a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0Z" /></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M27 18h11v2H27v-2ZM27 22.5h11v2H27v-2ZM27 27h11v2H27v-2ZM27 31.5h11v2H27v-2ZM27 36h11v2H27v-2ZM27 40.5h11v2H27v-2ZM27 45h11v2H27v-2ZM55.033 28.5l-1.51 1.524 1.39 1.403h-6.425v2.155h6.425l-1.39 1.403 1.51 1.524L59 32.504 55.033 28.5ZM41.477 21.737l-1.51 1.524 1.39 1.403h-3.334v2.155h3.335l-1.39 1.403 1.51 1.524 3.966-4.004-3.967-4.005ZM45.338 36.153l-1.51 1.523 1.39 1.404h-4.924v2.154h4.924l-1.39 1.404 1.51 1.524 3.966-4.005-3.966-4.004Z" /><path d="M18.77 51.051a5.34 5.34 0 0 1-5-3.464l-1.518-4.05a.763.763 0 0 0-.714-.495H4V40.5h7.538c1.378 0 2.611.854 3.095 2.144l1.518 4.05a2.797 2.797 0 0 0 2.62 1.815h26.702c1.06 0 2.027-.6 2.5-1.547l2.319-4.635a3.306 3.306 0 0 1 2.956-1.827H60v2.542h-6.752a.763.763 0 0 0-.682.422L50.248 48.1a5.34 5.34 0 0 1-4.775 2.952H18.77ZM45.167 13.948a5.34 5.34 0 0 1 5 3.464l1.518 4.05a.763.763 0 0 0 .714.495H60V24.5h-7.6a3.306 3.306 0 0 1-3.096-2.145l-1.518-4.05a2.797 2.797 0 0 0-2.619-1.814H18.465c-1.06 0-2.027.599-2.501 1.546l-2.318 4.635a3.306 3.306 0 0 1-2.957 1.828H4v-2.543h6.69a.763.763 0 0 0 .681-.422L13.69 16.9a5.34 5.34 0 0 1 4.776-2.952h26.702Z" /><path d="M38.125 15.969V49.53h-2.237V15.97h2.237Zm-9.153 0V49.5h-2.237V15.969h2.237ZM18.192 42.665a1.271 1.271 0 1 1 2.542 0 1.271 1.271 0 0 1-2.542 0ZM21.751 38.089a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM22.768 29.444a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM19.717 22.325a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM14.632 28.427a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM10.564 35.292a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0ZM17.683 34.02a1.271 1.271 0 1 1 2.543 0 1.271 1.271 0 0 1-2.543 0Z" /></svg>
|