@uh-design-system/component-library 0.2.4 → 0.4.0
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/attributes-f7831329.js +78 -0
- package/dist/cjs/component-library.cjs.js +3 -3
- package/dist/cjs/{ds-accordion_2.cjs.entry.js → ds-accordion_3.cjs.entry.js} +419 -241
- package/dist/cjs/ds-link-with-arrow.cjs.entry.js +47 -0
- package/dist/cjs/ds-link.cjs.entry.js +54 -0
- package/dist/cjs/ds-text-input.cjs.entry.js +12 -16
- package/dist/cjs/ds-visually-hidden.cjs.entry.js +20 -0
- package/dist/cjs/{index-fd4f6cd2.js → index-bfa0f441.js} +17 -11
- package/dist/cjs/linkUtils-695da37c.js +16 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/utils-8b73aa91.js +10 -0
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/00-foundations/icons/categories/arrows.js +6 -0
- package/dist/collection/components/00-foundations/icons/categories/information.js +12 -0
- package/dist/collection/components/00-foundations/icons/categories/media.js +4 -0
- package/dist/collection/components/00-foundations/icons/categories/social.js +17 -0
- package/dist/collection/components/00-foundations/icons/iconList.js +2 -0
- package/dist/collection/components/00-foundations/typography/stories/typography.stories.js +110 -0
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css +101 -82
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +41 -9
- package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.js +15 -0
- package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.js +1 -1
- package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.stories.js +10 -1
- package/dist/collection/components/01-base-components/ds-button/ds-button.css +168 -104
- package/dist/collection/components/01-base-components/ds-button/ds-button.js +23 -2
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js +6 -0
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js +13 -7
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.css +5 -1
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +8 -5
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.stories.js +2 -2
- package/dist/collection/components/01-base-components/ds-link/ds-link.css +224 -0
- package/dist/collection/components/01-base-components/ds-link/ds-link.js +281 -0
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.examples.stories.js +53 -0
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.features.stories.js +73 -0
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js +72 -0
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +208 -0
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +161 -0
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.examples.stories.js +33 -0
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.features.stories.js +19 -0
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.stories.js +40 -0
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css +72 -48
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +44 -4
- package/dist/collection/components/01-base-components/ds-text-input/{ds-text-input.examples.stories.js → stories/ds-text-input.examples.stories.js} +13 -0
- package/dist/collection/components/01-base-components/ds-text-input/{ds-text-input.features.stories.js → stories/ds-text-input.features.stories.js} +18 -4
- package/dist/collection/components/01-base-components/ds-text-input/{ds-text-input.stories.js → stories/ds-text-input.stories.js} +2 -2
- package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
- package/dist/collection/introduction/introduction.stories.js +9 -0
- package/dist/collection/utils/link/linkUtils.js +11 -0
- package/dist/collection/utils/typography/typographyUtils.js +21 -0
- package/dist/collection/utils/utils.js +5 -0
- package/dist/component-library/attributes-9419ac39.js +1 -0
- package/dist/component-library/component-library.css +1 -1
- package/dist/component-library/component-library.esm.js +1 -1
- package/dist/component-library/ds-accordion_3.entry.js +1 -0
- package/dist/component-library/ds-link-with-arrow.entry.js +1 -0
- package/dist/component-library/ds-link.entry.js +1 -0
- package/dist/component-library/ds-text-input.entry.js +1 -1
- package/dist/component-library/ds-visually-hidden.entry.js +1 -0
- package/dist/component-library/{index-4200d514.js → index-42701395.js} +2 -2
- package/dist/component-library/linkUtils-3d1b28cf.js +1 -0
- package/dist/component-library/utils-cca2a41a.js +1 -0
- package/dist/components/attributes.js +154 -0
- package/dist/components/ds-accordion.js +31 -12
- package/dist/components/ds-button2.js +6 -78
- package/dist/components/ds-icon2.js +320 -231
- package/dist/components/ds-link-with-arrow.d.ts +11 -0
- package/dist/components/ds-link-with-arrow.js +78 -0
- package/dist/components/ds-link.d.ts +11 -0
- package/dist/components/ds-link.js +90 -0
- package/dist/components/ds-text-input.js +11 -13
- package/dist/components/ds-visually-hidden2.js +1 -1
- package/dist/components/index2.js +7 -10
- package/dist/components/linkUtils.js +13 -0
- package/dist/components/utils.js +8 -0
- package/dist/esm/attributes-9419ac39.js +75 -0
- package/dist/esm/component-library.js +4 -4
- package/dist/esm/{ds-accordion_2.entry.js → ds-accordion_3.entry.js} +419 -242
- package/dist/esm/ds-link-with-arrow.entry.js +43 -0
- package/dist/esm/ds-link.entry.js +50 -0
- package/dist/esm/ds-text-input.entry.js +8 -12
- package/dist/esm/ds-visually-hidden.entry.js +16 -0
- package/dist/esm/{index-4200d514.js → index-42701395.js} +17 -11
- package/dist/esm/linkUtils-3d1b28cf.js +13 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/utils-cca2a41a.js +8 -0
- package/dist/types/components/00-foundations/icons/categories/social.d.ts +5 -0
- package/dist/types/components/00-foundations/typography/stories/typography.stories.d.ts +9 -0
- package/dist/types/components/01-base-components/ds-accordion/ds-accordion.d.ts +2 -0
- package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/ds-button.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts +3 -0
- package/dist/types/components/01-base-components/ds-icon/ds-icon.d.ts +1 -1
- package/dist/types/components/01-base-components/ds-link/ds-link.d.ts +25 -0
- package/dist/types/components/01-base-components/ds-link/stories/ds-link.examples.stories.d.ts +11 -0
- package/dist/types/components/01-base-components/ds-link/stories/ds-link.features.stories.d.ts +11 -0
- package/dist/types/components/01-base-components/ds-link/stories/ds-link.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts +18 -0
- package/dist/types/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.examples.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.features.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts +2 -0
- package/dist/types/components/01-base-components/ds-text-input/{ds-text-input.examples.stories.d.ts → stories/ds-text-input.examples.stories.d.ts} +2 -1
- package/dist/types/components/01-base-components/ds-text-input/{ds-text-input.features.stories.d.ts → stories/ds-text-input.features.stories.d.ts} +4 -1
- package/dist/types/components/01-base-components/ds-text-input/{ds-text-input.stories.d.ts → stories/ds-text-input.stories.d.ts} +1 -1
- package/dist/types/components.d.ts +66 -2
- package/dist/types/introduction/introduction.stories.d.ts +10 -0
- package/dist/types/utils/link/linkUtils.d.ts +2 -0
- package/dist/types/utils/typography/typographyUtils.d.ts +1 -0
- package/dist/types/utils/utils.d.ts +1 -0
- package/package.json +2 -4
- package/dist/cjs/ds-button_2.cjs.entry.js +0 -170
- package/dist/component-library/ds-accordion_2.entry.js +0 -1
- package/dist/component-library/ds-button_2.entry.js +0 -1
- package/dist/components/index3.js +0 -80
- package/dist/esm/ds-button_2.entry.js +0 -165
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bfa0f441.js');
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
|
+
const attributes = require('./attributes-f7831329.js');
|
|
7
8
|
|
|
8
|
-
const dsAccordionCss = ".ds-accordion__open-button{color:var(--ds-textColor-default
|
|
9
|
+
const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:focus-visible,.ds-accordion__open-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-textColor-default)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
|
|
9
10
|
const DsAccordionStyle0 = dsAccordionCss;
|
|
10
11
|
|
|
11
12
|
const DsAccordion = class {
|
|
@@ -19,10 +20,16 @@ const DsAccordion = class {
|
|
|
19
20
|
headingLevel = 2;
|
|
20
21
|
useCloseButton = false;
|
|
21
22
|
closeButtonLabel = 'Close';
|
|
22
|
-
|
|
23
|
+
hideTopBorder = false;
|
|
24
|
+
isExpanded = false;
|
|
23
25
|
get host() { return index.getElement(this); }
|
|
24
26
|
headerButtonRef;
|
|
25
27
|
shouldMoveFocus = false;
|
|
28
|
+
componentWillLoad() {
|
|
29
|
+
if (this.openByDefault) {
|
|
30
|
+
this.isExpanded = true;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
26
33
|
watchHandler(isExpanded) {
|
|
27
34
|
if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
|
|
28
35
|
this.headerButtonRef.focus();
|
|
@@ -46,16 +53,22 @@ const DsAccordion = class {
|
|
|
46
53
|
}
|
|
47
54
|
};
|
|
48
55
|
render() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
56
|
+
const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
|
|
57
|
+
const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
|
|
58
|
+
return (index.h("div", { key: '830fb0965ea8904b662280b775a159528d7ddc03', class: index$1.classNames('ds-accordion', `ds-accordion--${this.variant}`, {
|
|
52
59
|
'ds-accordion--border-aligned': this.borderAligned
|
|
53
|
-
}),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
index.h("
|
|
60
|
+
}), role: "presentation" }, index.h("div", { key: 'a3d6e538dda9513bfb578379cced370be686ce62', class: "ds-accordion__item" }, index.h("div", { key: '7c7819bf62cdffb9ac4a8c4f7b1609b31efcdd68', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, index.h("button", { key: '2e2a9fdfced241b23bdcfb444777cdd2fd0a764c', class: index$1.classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
|
|
61
|
+
'ds-accordion--border-aligned': this.borderAligned,
|
|
62
|
+
'ds-accordion--hide-top-border': this.hideTopBorder
|
|
63
|
+
}), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, index.h("span", { key: 'eca6297dd43b58849c8b46f66034ec51bb20bf1e', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
|
|
64
|
+
index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
|
|
65
|
+
: index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), index.h("slot", { key: '9ddb913b968b8bbbe47d4be341766503fdcf4df7', name: "header" }))), index.h("div", { key: '21cee953529ccd21487b7ac0001aac10bf3d563e', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: index$1.classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
|
|
66
|
+
'ds-accordion__panel--border-aligned': this.borderAligned,
|
|
67
|
+
'ds-accordion__panel--expanded': this.isExpanded
|
|
68
|
+
}), hidden: !this.isExpanded }, index.h("div", { key: 'a9d5dfdbf190936156b0b37b6ef2b877741f6ae1', class: "ds-accordion__content" }, index.h("slot", { key: '34ca29ec15581a470fe2c740fceea9fcdc7cb64a', name: "content" })), this.useCloseButton &&
|
|
69
|
+
index.h("ds-button", { key: '1dfa2fad990fc6651a620efd8b3169346bb08648', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: index$1.classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
|
|
57
70
|
'ds-accordion--border-aligned': this.borderAligned
|
|
58
|
-
}),
|
|
71
|
+
}), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
|
|
59
72
|
}
|
|
60
73
|
static get watchers() { return {
|
|
61
74
|
"isExpanded": ["watchHandler"]
|
|
@@ -63,6 +76,81 @@ const DsAccordion = class {
|
|
|
63
76
|
};
|
|
64
77
|
DsAccordion.style = DsAccordionStyle0;
|
|
65
78
|
|
|
79
|
+
const dsButtonCss = ".sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:focus-visible,.ds-button.primary.blue.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:focus-visible,.ds-button.primary.black.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible,.ds-button.primary.white.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:focus-visible,.ds-button.secondary.blue.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:focus-visible,.ds-button.secondary.black.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible,.ds-button.secondary.white.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-button:focus-visible,.ds-button.supplementary.blue.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-button:focus-visible,.ds-button.supplementary.black.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible,.ds-button.supplementary.white.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
|
|
80
|
+
const DsButtonStyle0 = dsButtonCss;
|
|
81
|
+
|
|
82
|
+
const DsButton = class {
|
|
83
|
+
constructor(hostRef) {
|
|
84
|
+
index.registerInstance(this, hostRef);
|
|
85
|
+
}
|
|
86
|
+
inheritedAttributes = {};
|
|
87
|
+
buttonEl;
|
|
88
|
+
pressedKeys = new Set();
|
|
89
|
+
get el() { return index.getElement(this); }
|
|
90
|
+
value = '';
|
|
91
|
+
variant = 'primary';
|
|
92
|
+
colour = 'blue';
|
|
93
|
+
size = 'medium';
|
|
94
|
+
fontWeight = 'normal';
|
|
95
|
+
icon = '';
|
|
96
|
+
iconPosition = 'start';
|
|
97
|
+
type = 'button';
|
|
98
|
+
disabled = false;
|
|
99
|
+
fullWidth = false;
|
|
100
|
+
ariaDisabled = 'false';
|
|
101
|
+
componentWillLoad() {
|
|
102
|
+
this.inheritedAttributes = {
|
|
103
|
+
...attributes.inheritAriaAttributes(this.el, ['aria-disabled']),
|
|
104
|
+
...attributes.inheritAttributes(this.el, [
|
|
105
|
+
'autofocus',
|
|
106
|
+
'form',
|
|
107
|
+
'formaction',
|
|
108
|
+
'formenctype',
|
|
109
|
+
'formmethod',
|
|
110
|
+
'formnovalidate',
|
|
111
|
+
'formtarget',
|
|
112
|
+
'name',
|
|
113
|
+
'popovertarget',
|
|
114
|
+
'popovertargetaction',
|
|
115
|
+
]),
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
handleKeyDown = (event) => {
|
|
119
|
+
if (event.repeat) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
switch (event.key) {
|
|
123
|
+
case 'Enter':
|
|
124
|
+
case ' ':
|
|
125
|
+
this.pressedKeys.add(event.key);
|
|
126
|
+
this.buttonEl.classList.add(`${this.colour}--active`);
|
|
127
|
+
break;
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
handleKeyUp = (event) => {
|
|
131
|
+
switch (event.key) {
|
|
132
|
+
case 'Enter':
|
|
133
|
+
case ' ':
|
|
134
|
+
this.pressedKeys.delete(event.key);
|
|
135
|
+
if (this.pressedKeys.size === 0) {
|
|
136
|
+
this.buttonEl.classList.remove(`${this.colour}--active`);
|
|
137
|
+
}
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
render() {
|
|
142
|
+
const classes = index$1.classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
|
|
143
|
+
'icon-start': this.icon && this.iconPosition === 'start' && this.value,
|
|
144
|
+
'icon-end': this.icon && this.iconPosition === 'end' && this.value,
|
|
145
|
+
'icon-only': this.icon && !this.value,
|
|
146
|
+
});
|
|
147
|
+
const iconSize = this.size === 'small' ? '1rem' : undefined;
|
|
148
|
+
const isDisabled = this.disabled || this.ariaDisabled === 'true';
|
|
149
|
+
return (index.h("button", { key: '57b49111cb6e4957d1cd69cdfd09b99fe620b614', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, index.h("slot", { key: '56532d67c5a1df5e831025422db0c886bd731db0', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '6028ee6b589400340f21411b252c7ba85732fa1c', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '8b98003443f13f88f76b9a9a611eb1abc4daee74', class: "button-value" }, this.value), index.h("slot", { key: '35ad0a3aa154b8afba9bd50ffe30c1e25a37f382', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '7eebd8b5754c0dd1d3d6a435234728518a16a405', name: this.icon, size: iconSize }))));
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
DsButton.style = DsButtonStyle0;
|
|
153
|
+
|
|
66
154
|
const DSFlameIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
67
155
|
<g mask="url(#mask0_1509_11137)">
|
|
68
156
|
<path d="M11.2537 2H13.3433V4.1875H11.2537V2Z"/>
|
|
@@ -77,10 +165,10 @@ const DSFlameFillIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="
|
|
|
77
165
|
</svg>
|
|
78
166
|
`;
|
|
79
167
|
|
|
80
|
-
const category$
|
|
81
|
-
const icons$
|
|
82
|
-
{ name: 'ds_flame', component: DSFlameIcon, category: category$
|
|
83
|
-
{ name: 'ds_flame_fill', component: DSFlameFillIcon, category: category$
|
|
168
|
+
const category$9 = 'DS Custom icons';
|
|
169
|
+
const icons$a = [
|
|
170
|
+
{ name: 'ds_flame', component: DSFlameIcon, category: category$9 },
|
|
171
|
+
{ name: 'ds_flame_fill', component: DSFlameFillIcon, category: category$9 },
|
|
84
172
|
];
|
|
85
173
|
|
|
86
174
|
const ArchiveIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z"/></svg>`;
|
|
@@ -187,60 +275,60 @@ const SaveIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
|
|
|
187
275
|
|
|
188
276
|
const SaveFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M866-694v599H95v-771h599l172 172ZM479.76-254q43.24 0 73.74-30.26 30.5-30.27 30.5-73.5 0-43.24-30.26-73.74-30.27-30.5-73.5-30.5-43.24 0-73.74 30.26-30.5 30.27-30.5 73.5 0 43.24 30.26 73.74 30.27 30.5 73.5 30.5ZM242-575h358v-143H242v143Z"/></svg>`;
|
|
189
277
|
|
|
190
|
-
const category$
|
|
191
|
-
const icons$
|
|
192
|
-
{ name: 'archive', component: ArchiveIcon, category: category$
|
|
193
|
-
{ name: 'archive_fill', component: ArchiveFillIcon, category: category$
|
|
194
|
-
{ name: 'download', component: DownloadIcon, category: category$
|
|
195
|
-
{ name: 'file_save', component: FileSaveIcon, category: category$
|
|
196
|
-
{ name: 'file_save_fill', component: FileSaveFillIcon, category: category$
|
|
197
|
-
{ name: 'send', component: SendIcon, category: category$
|
|
198
|
-
{ name: 'send_fill', component: SendFillIcon, category: category$
|
|
199
|
-
{ name: 'list_alt', component: ListAltIcon, category: category$
|
|
200
|
-
{ name: 'list_alt_add', component: ListAltAddIcon, category: category$
|
|
201
|
-
{ name: 'list_alt_check', component: ListAltCheckIcon, category: category$
|
|
202
|
-
{ name: 'fork_right', component: ForkRightIcon, category: category$
|
|
203
|
-
{ name: 'manufacturing', component: ManufacturingIcon, category: category$
|
|
204
|
-
{ name: 'drag_indicator', component: DragIndicatorIcon, category: category$
|
|
205
|
-
{ name: 'resize', component: ResizeIcon, category: category$
|
|
206
|
-
{ name: 'edit', component: EditIcon, category: category$
|
|
207
|
-
{ name: 'edit_fill', component: EditFillIcon, category: category$
|
|
208
|
-
{ name: 'code_blocks', component: CodeBlocksIcon, category: category$
|
|
209
|
-
{ name: 'visibility', component: VisibilityIcon, category: category$
|
|
210
|
-
{ name: 'visibility_fill', component: VisibilityFillIcon, category: category$
|
|
211
|
-
{ name: 'visibility_off', component: VisibilityOffIcon, category: category$
|
|
212
|
-
{ name: 'visibility_off_fill', component: VisibilityOffFillIcon, category: category$
|
|
213
|
-
{ name: 'close', component: CloseIcon, category: category$
|
|
214
|
-
{ name: 'cancel', component: CancelIcon, category: category$
|
|
215
|
-
{ name: 'cancel_fill', component: CancelFillIcon, category: category$
|
|
216
|
-
{ name: 'attach_file', component: AttachFileIcon, category: category$
|
|
217
|
-
{ name: 'attach_file_add', component: AttachFileAddIcon, category: category$
|
|
218
|
-
{ name: 'attach_file_off', component: AttachFileOffIcon, category: category$
|
|
219
|
-
{ name: 'attach_email', component: AttachEmailIcon, category: category$
|
|
220
|
-
{ name: 'attach_email_fill', component: AttachEmailFillIcon, category: category$
|
|
221
|
-
{ name: 'zoom_in', component: ZoomInIcon, category: category$
|
|
222
|
-
{ name: 'zoom_out', component: ZoomOutIcon, category: category$
|
|
223
|
-
{ name: 'search', component: SearchIcon, category: category$
|
|
224
|
-
{ name: 'settings', component: SettingsIcon, category: category$
|
|
225
|
-
{ name: 'settings_fill', component: SettingsFillIcon, category: category$
|
|
226
|
-
{ name: 'login', component: LoginIcon, category: category$
|
|
227
|
-
{ name: 'logout', component: LogoutIcon, category: category$
|
|
228
|
-
{ name: 'export_notes', component: ExportNotesIcon, category: category$
|
|
229
|
-
{ name: 'export_notes_fill', component: ExportNotesFillIcon, category: category$
|
|
230
|
-
{ name: 'share', component: ShareIcon, category: category$
|
|
231
|
-
{ name: '360', component: ThreeSixtyIcon, category: category$
|
|
232
|
-
{ name: 'refresh', component: RefreshIcon, category: category$
|
|
233
|
-
{ name: 'history', component: HistoryIcon, category: category$
|
|
234
|
-
{ name: 'rotate_left', component: RotateLeftIcon, category: category$
|
|
235
|
-
{ name: 'rotate_right', component: RotateRightIcon, category: category$
|
|
236
|
-
{ name: 'sync', component: SyncIcon, category: category$
|
|
237
|
-
{ name: 'build', component: BuildIcon, category: category$
|
|
238
|
-
{ name: 'construction', component: ConstructionIcon, category: category$
|
|
239
|
-
{ name: 'build_fill', component: BuildFillIcon, category: category$
|
|
240
|
-
{ name: 'delete', component: DeleteIcon, category: category$
|
|
241
|
-
{ name: 'delete_fill', component: DeleteFillIcon, category: category$
|
|
242
|
-
{ name: 'save', component: SaveIcon, category: category$
|
|
243
|
-
{ name: 'save_fill', component: SaveFillIcon, category: category$
|
|
278
|
+
const category$8 = 'Actions';
|
|
279
|
+
const icons$9 = [
|
|
280
|
+
{ name: 'archive', component: ArchiveIcon, category: category$8 },
|
|
281
|
+
{ name: 'archive_fill', component: ArchiveFillIcon, category: category$8 },
|
|
282
|
+
{ name: 'download', component: DownloadIcon, category: category$8 },
|
|
283
|
+
{ name: 'file_save', component: FileSaveIcon, category: category$8 },
|
|
284
|
+
{ name: 'file_save_fill', component: FileSaveFillIcon, category: category$8 },
|
|
285
|
+
{ name: 'send', component: SendIcon, category: category$8 },
|
|
286
|
+
{ name: 'send_fill', component: SendFillIcon, category: category$8 },
|
|
287
|
+
{ name: 'list_alt', component: ListAltIcon, category: category$8 },
|
|
288
|
+
{ name: 'list_alt_add', component: ListAltAddIcon, category: category$8 },
|
|
289
|
+
{ name: 'list_alt_check', component: ListAltCheckIcon, category: category$8 },
|
|
290
|
+
{ name: 'fork_right', component: ForkRightIcon, category: category$8 },
|
|
291
|
+
{ name: 'manufacturing', component: ManufacturingIcon, category: category$8 },
|
|
292
|
+
{ name: 'drag_indicator', component: DragIndicatorIcon, category: category$8 },
|
|
293
|
+
{ name: 'resize', component: ResizeIcon, category: category$8 },
|
|
294
|
+
{ name: 'edit', component: EditIcon, category: category$8 },
|
|
295
|
+
{ name: 'edit_fill', component: EditFillIcon, category: category$8 },
|
|
296
|
+
{ name: 'code_blocks', component: CodeBlocksIcon, category: category$8 },
|
|
297
|
+
{ name: 'visibility', component: VisibilityIcon, category: category$8 },
|
|
298
|
+
{ name: 'visibility_fill', component: VisibilityFillIcon, category: category$8 },
|
|
299
|
+
{ name: 'visibility_off', component: VisibilityOffIcon, category: category$8 },
|
|
300
|
+
{ name: 'visibility_off_fill', component: VisibilityOffFillIcon, category: category$8 },
|
|
301
|
+
{ name: 'close', component: CloseIcon, category: category$8 },
|
|
302
|
+
{ name: 'cancel', component: CancelIcon, category: category$8 },
|
|
303
|
+
{ name: 'cancel_fill', component: CancelFillIcon, category: category$8 },
|
|
304
|
+
{ name: 'attach_file', component: AttachFileIcon, category: category$8 },
|
|
305
|
+
{ name: 'attach_file_add', component: AttachFileAddIcon, category: category$8 },
|
|
306
|
+
{ name: 'attach_file_off', component: AttachFileOffIcon, category: category$8 },
|
|
307
|
+
{ name: 'attach_email', component: AttachEmailIcon, category: category$8 },
|
|
308
|
+
{ name: 'attach_email_fill', component: AttachEmailFillIcon, category: category$8 },
|
|
309
|
+
{ name: 'zoom_in', component: ZoomInIcon, category: category$8 },
|
|
310
|
+
{ name: 'zoom_out', component: ZoomOutIcon, category: category$8 },
|
|
311
|
+
{ name: 'search', component: SearchIcon, category: category$8 },
|
|
312
|
+
{ name: 'settings', component: SettingsIcon, category: category$8 },
|
|
313
|
+
{ name: 'settings_fill', component: SettingsFillIcon, category: category$8 },
|
|
314
|
+
{ name: 'login', component: LoginIcon, category: category$8 },
|
|
315
|
+
{ name: 'logout', component: LogoutIcon, category: category$8 },
|
|
316
|
+
{ name: 'export_notes', component: ExportNotesIcon, category: category$8 },
|
|
317
|
+
{ name: 'export_notes_fill', component: ExportNotesFillIcon, category: category$8 },
|
|
318
|
+
{ name: 'share', component: ShareIcon, category: category$8 },
|
|
319
|
+
{ name: '360', component: ThreeSixtyIcon, category: category$8 },
|
|
320
|
+
{ name: 'refresh', component: RefreshIcon, category: category$8 },
|
|
321
|
+
{ name: 'history', component: HistoryIcon, category: category$8 },
|
|
322
|
+
{ name: 'rotate_left', component: RotateLeftIcon, category: category$8 },
|
|
323
|
+
{ name: 'rotate_right', component: RotateRightIcon, category: category$8 },
|
|
324
|
+
{ name: 'sync', component: SyncIcon, category: category$8 },
|
|
325
|
+
{ name: 'build', component: BuildIcon, category: category$8 },
|
|
326
|
+
{ name: 'construction', component: ConstructionIcon, category: category$8 },
|
|
327
|
+
{ name: 'build_fill', component: BuildFillIcon, category: category$8 },
|
|
328
|
+
{ name: 'delete', component: DeleteIcon, category: category$8 },
|
|
329
|
+
{ name: 'delete_fill', component: DeleteFillIcon, category: category$8 },
|
|
330
|
+
{ name: 'save', component: SaveIcon, category: category$8 },
|
|
331
|
+
{ name: 'save_fill', component: SaveFillIcon, category: category$8 },
|
|
244
332
|
];
|
|
245
333
|
|
|
246
334
|
const ArrowUpwardIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z"/></svg>`;
|
|
@@ -301,37 +389,46 @@ const ArrowDropDownIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" he
|
|
|
301
389
|
|
|
302
390
|
const FunctionIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M389-221v-80h70l128-137-127.93-138H379l-70 360q-11 56-45.75 88T179-96q-48 0-80.5-28.64Q66-153.27 66-194q0-30.65 18.3-50.32Q102.6-264 131.76-264q26.24 0 42.74 16 16.5 16 16.5 41 0 10-4 18t-11 13q3 2 7.5 3t10.5 1q12 1 21-10.5t12-29.5l71-364H160v-79h153l19-84q13-60 47.22-93.5t86.07-33.5Q513-866 545-838.5q32 27.5 32 68.5 0 32.7-18.5 52.35T510.53-698q-25.53 0-42.03-15T452-753q0-7.56 3.5-16.5 3.5-8.94 8.5-13.5-2-2-6-3.5t-8-1.5q-12-1-22 10.75T415-749l-20 94h214v79h-44l78 87 73-87h-45v-79h219v79h-68L694-438l129 137h67v80H671v-80h45l-75-82-78 82h46v80H389Z"/></svg>`;
|
|
303
391
|
|
|
304
|
-
const
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
{ name: '
|
|
313
|
-
{ name: '
|
|
314
|
-
{ name: '
|
|
315
|
-
{ name: '
|
|
316
|
-
{ name: '
|
|
317
|
-
{ name: '
|
|
318
|
-
{ name: '
|
|
319
|
-
{ name: '
|
|
320
|
-
{ name: '
|
|
321
|
-
{ name: '
|
|
322
|
-
{ name: '
|
|
323
|
-
{ name: '
|
|
324
|
-
{ name: '
|
|
325
|
-
{ name: '
|
|
326
|
-
{ name: '
|
|
327
|
-
{ name: '
|
|
328
|
-
{ name: '
|
|
329
|
-
{ name: '
|
|
330
|
-
{ name: '
|
|
331
|
-
{ name: '
|
|
332
|
-
{ name: '
|
|
333
|
-
{ name: '
|
|
334
|
-
{ name: '
|
|
392
|
+
const TrendingDownIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M628-218v-94h118L543-517 376-350 55-670l67-67 253 253 167-167 270 271v-115h94v277H628Z"/></svg>`;
|
|
393
|
+
|
|
394
|
+
const TrendingUpIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m122-218-67-67 321-319 167 167 203-205H628v-95h278v278h-94v-115L542-303 375-470 122-218Z"/></svg>`;
|
|
395
|
+
|
|
396
|
+
const SwapHorizIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M272-135 55-352l217-217 66 66-103 104h277v95H235l103 103-66 66Zm416-257-66-66 104-103H449v-95h277L622-760l66-66 218 217-218 217Z"/></svg>`;
|
|
397
|
+
|
|
398
|
+
const category$7 = 'Arrows and operators';
|
|
399
|
+
const icons$8 = [
|
|
400
|
+
{ name: 'arrow_upward', component: ArrowUpwardIcon, category: category$7 },
|
|
401
|
+
{ name: 'add', component: AddIcon, category: category$7 },
|
|
402
|
+
{ name: 'arrow_outward', component: ArrowOutwardIcon, category: category$7 },
|
|
403
|
+
{ name: 'arrow_downward', component: ArrowDownwardIcon, category: category$7 },
|
|
404
|
+
{ name: 'arrow_forward', component: ArrowForwardIcon, category: category$7 },
|
|
405
|
+
{ name: 'arrow_back', component: ArrowBackIcon, category: category$7 },
|
|
406
|
+
{ name: 'arrow_insert', component: ArrowInsertIcon, category: category$7 },
|
|
407
|
+
{ name: 'remove', component: RemoveIcon, category: category$7 },
|
|
408
|
+
{ name: 'chevron_backward', component: ChevronBackwardIcon, category: category$7 },
|
|
409
|
+
{ name: 'chevron_forward', component: ChevronForwardIcon, category: category$7 },
|
|
410
|
+
{ name: 'keyboard_arrow_up', component: KeyboardArrowUpIcon, category: category$7 },
|
|
411
|
+
{ name: 'keyboard_arrow_down', component: KeyboardArrowDownIcon, category: category$7 },
|
|
412
|
+
{ name: 'unfold_less', component: UnfoldLessIcon, category: category$7 },
|
|
413
|
+
{ name: 'unfold_more', component: UnfoldMoreIcon, category: category$7 },
|
|
414
|
+
{ name: 'collapse_content', component: CollapseContentIcon, category: category$7 },
|
|
415
|
+
{ name: 'expand_content', component: ExpandContentIcon, category: category$7 },
|
|
416
|
+
{ name: 'equal', component: EqualIcon, category: category$7 },
|
|
417
|
+
{ name: 'functions', component: FunctionsIcon, category: category$7 },
|
|
418
|
+
{ name: 'percent', component: PercentIcon, category: category$7 },
|
|
419
|
+
{ name: 'close_small', component: CloseSmallIcon, category: category$7 },
|
|
420
|
+
{ name: 'calculate', component: CalculateIcon, category: category$7 },
|
|
421
|
+
{ name: 'calculate_fill', component: CalculateFillIcon, category: category$7 },
|
|
422
|
+
{ name: 'arrow_drop_down_circle_fill', component: ArrowDropDownCircleFillIcon, category: category$7 },
|
|
423
|
+
{ name: 'arrow_drop_down_circle', component: ArrowDropDownCircleIcon, category: category$7 },
|
|
424
|
+
{ name: 'zoom_out_map', component: ZoomOutMapIcon, category: category$7 },
|
|
425
|
+
{ name: 'zoom_in_map', component: ZoomInMapIcon, category: category$7 },
|
|
426
|
+
{ name: 'arrow_drop_up', component: ArrowDropUpIcon, category: category$7 },
|
|
427
|
+
{ name: 'arrow_drop_down', component: ArrowDropDownIcon, category: category$7 },
|
|
428
|
+
{ name: 'function', component: FunctionIcon, category: category$7 },
|
|
429
|
+
{ name: 'trending_down', component: TrendingDownIcon, category: category$7 },
|
|
430
|
+
{ name: 'trending_up', component: TrendingUpIcon, category: category$7 },
|
|
431
|
+
{ name: 'swap_horiz', component: SwapHorizIcon, category: category$7 },
|
|
335
432
|
];
|
|
336
433
|
|
|
337
434
|
const CalendarMonthIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M434-394v-92h92v92h-92Zm-160 0v-92h92v92h-92Zm320 0v-92h92v92h-92ZM434-234v-92h92v92h-92Zm-160 0v-92h92v92h-92Zm320 0v-92h92v92h-92ZM95-55v-791h150.2v-60H327v60h306v-60h82.2v60H866v791H95Zm94-94h582v-421H189v421Zm0-481h582v-121H189v121Zm0 0v-121 121Z"/></svg>`;
|
|
@@ -422,52 +519,70 @@ const AccountBalanceFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="4
|
|
|
422
519
|
|
|
423
520
|
const ProgressActivityIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-55q-90.2 0-167.57-32.58-77.37-32.57-134.82-90.03-57.46-57.45-90.03-134.82Q55-389.8 55-480q0-89.87 32.56-167.25 32.57-77.37 89.87-135.11 57.31-57.74 134.79-90.69Q389.7-906 480-906v95q-138.33 0-234.66 96.27Q149-618.46 149-480.23 149-342 245.27-245.5t234.5 96.5Q618-149 714.5-245.34 811-341.67 811-480h95q0 90.3-33.01 167.79-33.02 77.5-90.5 134.85Q725-120 647.5-87.5 570.01-55 480-55Z"/></svg>`;
|
|
424
521
|
|
|
425
|
-
const
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
{ name: '
|
|
440
|
-
{ name: '
|
|
441
|
-
{ name: '
|
|
442
|
-
{ name: '
|
|
443
|
-
{ name: '
|
|
444
|
-
{ name: '
|
|
445
|
-
{ name: '
|
|
446
|
-
{ name: '
|
|
447
|
-
{ name: '
|
|
448
|
-
{ name: '
|
|
449
|
-
{ name: '
|
|
450
|
-
{ name: '
|
|
451
|
-
{ name: '
|
|
452
|
-
{ name: '
|
|
453
|
-
{ name: '
|
|
454
|
-
{ name: '
|
|
455
|
-
{ name: '
|
|
456
|
-
{ name: '
|
|
457
|
-
{ name: '
|
|
458
|
-
{ name: '
|
|
459
|
-
{ name: '
|
|
460
|
-
{ name: '
|
|
461
|
-
{ name: '
|
|
462
|
-
{ name: '
|
|
463
|
-
{ name: '
|
|
464
|
-
{ name: '
|
|
465
|
-
{ name: '
|
|
466
|
-
{ name: '
|
|
467
|
-
{ name: '
|
|
468
|
-
{ name: '
|
|
469
|
-
{ name: '
|
|
470
|
-
{ name: '
|
|
522
|
+
const BarChartIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M662-135v-316h164v316H662Zm-263 0v-691h162v691H399Zm-264 0v-491h163v491H135Z"/></svg>`;
|
|
523
|
+
|
|
524
|
+
const ShowChartIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m126-196-70-70 324-324 159 159 298-335 67 65-362 411-162-160-254 254Z"/></svg>`;
|
|
525
|
+
|
|
526
|
+
const PieChartIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M527-527h279q-12-108-91-189t-188-90v279Zm-94 373v-652q-121 16-202.5 108.99t-81.5 217Q149-356 230.5-263 312-170 433-154Zm94 0q109-10 187.5-90.5T806-433H527v279Zm-47-326Zm.14 425q-88.03 0-165.58-33Q237-121 179-179T88-314.45q-33-77.44-33-165.5Q55-568 88-645.5q33-77.5 90.88-135.55 57.88-58.06 135.44-91.5Q391.89-906 480.08-906q88.92 0 166.2 33.56 77.28 33.57 135 91Q839-724 872.5-646.64 906-569.28 906-480q0 89.3-33.62 166.75-33.63 77.45-91.27 134.78-57.64 57.32-135.21 90.39Q568.33-55 480.14-55Z"/></svg>`;
|
|
527
|
+
|
|
528
|
+
const PieChartFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M527-527v-316q124 14 212 103t104 213H527Zm-95 410q-137-18-227-121.5T115-480q0-138 90-241.5T432-843v726Zm95 0v-315h316q-15 123-103.5 212.5T527-117Z"/></svg>`;
|
|
529
|
+
|
|
530
|
+
const TableIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M95-95v-771h771v771H95Zm338-254H189v160h244v-160Zm94 0v160h244v-160H527Zm-94-95v-160H189v160h244Zm94 0h244v-160H527v160ZM189-698h582v-73H189v73Z"/></svg>`;
|
|
531
|
+
|
|
532
|
+
const TableFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M450-328H95v233h355v-233Zm60 0v233h356v-233H510Zm-60-60v-234H95v234h355Zm60 0h356v-234H510v234ZM95-682h771v-184H95v184Z"/></svg>`;
|
|
533
|
+
|
|
534
|
+
const category$6 = 'Information';
|
|
535
|
+
const icons$7 = [
|
|
536
|
+
{ name: 'calendar_month', component: CalendarMonthIcon, category: category$6 },
|
|
537
|
+
{ name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category$6 },
|
|
538
|
+
{ name: 'event_available', component: EventAvailableIcon, category: category$6 },
|
|
539
|
+
{ name: 'event_available_fill', component: EventAvailableFillIcon, category: category$6 },
|
|
540
|
+
{ name: 'edit_calendar', component: EditCalendarIcon, category: category$6 },
|
|
541
|
+
{ name: 'edit_calendar_fill', component: EditCalendarFillIcon, category: category$6 },
|
|
542
|
+
{ name: 'person_pin_circle', component: PersonPinCircleIcon, category: category$6 },
|
|
543
|
+
{ name: 'person_pin_circle_fill', component: PersonPinCircleFillIcon, category: category$6 },
|
|
544
|
+
{ name: 'euro_symbol', component: EuroSymbolIcon, category: category$6 },
|
|
545
|
+
{ name: 'language', component: LanguageIcon, category: category$6 },
|
|
546
|
+
{ name: 'grid_4x4', component: Grid4x4Icon, category: category$6 },
|
|
547
|
+
{ name: 'sell', component: SellIcon, category: category$6 },
|
|
548
|
+
{ name: 'sell_fill', component: SellFillIcon, category: category$6 },
|
|
549
|
+
{ name: 'mail', component: MailIcon, category: category$6 },
|
|
550
|
+
{ name: 'mail_fill', component: MailFillIcon, category: category$6 },
|
|
551
|
+
{ name: 'drafts', component: DraftsIcon, category: category$6 },
|
|
552
|
+
{ name: 'drafts_fill', component: DraftsFillIcon, category: category$6 },
|
|
553
|
+
{ name: 'reorder', component: ReorderIcon, category: category$6 },
|
|
554
|
+
{ name: 'grid_on', component: GridOnIcon, category: category$6 },
|
|
555
|
+
{ name: 'grid_on_fill', component: GridOnFillIcon, category: category$6 },
|
|
556
|
+
{ name: 'view_list', component: ViewListIcon, category: category$6 },
|
|
557
|
+
{ name: 'view_list_fill', component: ViewListFillIcon, category: category$6 },
|
|
558
|
+
{ name: 'widget_small', component: WidgetSmallIcon, category: category$6 },
|
|
559
|
+
{ name: 'widget_small_fill', component: WidgetSmallFillIcon, category: category$6 },
|
|
560
|
+
{ name: 'lock', component: LockIcon, category: category$6 },
|
|
561
|
+
{ name: 'lock_fill', component: LockFillIcon, category: category$6 },
|
|
562
|
+
{ name: 'lock_open', component: LockOpenIcon, category: category$6 },
|
|
563
|
+
{ name: 'lock_open_fill', component: LockOpenFillIcon, category: category$6 },
|
|
564
|
+
{ name: 'public', component: PublicIcon, category: category$6 },
|
|
565
|
+
{ name: 'vpn_lock', component: VpnLockIcon, category: category$6 },
|
|
566
|
+
{ name: 'hourglass', component: HourglassIcon, category: category$6 },
|
|
567
|
+
{ name: 'hourglass_bottom', component: HourglassBottomIcon, category: category$6 },
|
|
568
|
+
{ name: 'hourglass_top', component: HourglassTopIcon, category: category$6 },
|
|
569
|
+
{ name: 'schedule', component: ScheduleIcon, category: category$6 },
|
|
570
|
+
{ name: 'schedule_fill', component: ScheduleFillIcon, category: category$6 },
|
|
571
|
+
{ name: 'timer', component: TimerIcon, category: category$6 },
|
|
572
|
+
{ name: 'timer_fill', component: TimerFillIcon, category: category$6 },
|
|
573
|
+
{ name: 'checklist', component: ChecklistIcon, category: category$6 },
|
|
574
|
+
{ name: 'check_box_fill', component: CheckBoxFillIcon, category: category$6 },
|
|
575
|
+
{ name: 'check_box', component: CheckBoxIcon, category: category$6 },
|
|
576
|
+
{ name: 'check_box_outline_blank', component: CheckBoxOutlineBlankIcon, category: category$6 },
|
|
577
|
+
{ name: 'account_balance', component: AccountBalanceIcon, category: category$6 },
|
|
578
|
+
{ name: 'account_balance_fill', component: AccountBalanceFillIcon, category: category$6 },
|
|
579
|
+
{ name: 'progress_activity', component: ProgressActivityIcon, category: category$6 },
|
|
580
|
+
{ name: 'bar_chart', component: BarChartIcon, category: category$6 },
|
|
581
|
+
{ name: 'show_chart', component: ShowChartIcon, category: category$6 },
|
|
582
|
+
{ name: 'pie_chart', component: PieChartIcon, category: category$6 },
|
|
583
|
+
{ name: 'pie_chart_fill', component: PieChartFillIcon, category: category$6 },
|
|
584
|
+
{ name: 'table', component: TableIcon, category: category$6 },
|
|
585
|
+
{ name: 'table_fill', component: TableFillIcon, category: category$6 },
|
|
471
586
|
];
|
|
472
587
|
|
|
473
588
|
const HomeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M229-189h124v-258h254v258h124v-377L480-754 229-565.67V-189Zm-94 94v-518l345-259 346 259v518H524v-269h-88v269H135Zm345-377Z"/></svg>`;
|
|
@@ -514,30 +629,30 @@ const TourIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
|
|
|
514
629
|
|
|
515
630
|
const TourFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M187-55v-851h94v78h611l-96 225 96 225H281v323h-94Zm322.21-476Q539-531 560-552.21t21-51Q581-633 559.79-654t-51-21Q479-675 458-653.79t-21 51Q437-573 458.21-552t51 21Z"/></svg>`;
|
|
516
631
|
|
|
517
|
-
const category$
|
|
518
|
-
const icons$
|
|
519
|
-
{ name: 'home', component: HomeIcon, category: category$
|
|
520
|
-
{ name: 'menu', component: MenuIcon, category: category$
|
|
521
|
-
{ name: 'home_fill', component: HomeFillIcon, category: category$
|
|
522
|
-
{ name: 'link', component: LinkIcon, category: category$
|
|
523
|
-
{ name: 'location_searching', component: LocationSearchingIcon, category: category$
|
|
524
|
-
{ name: 'explore_fill', component: ExploreFillIcon, category: category$
|
|
525
|
-
{ name: 'explore', component: ExploreIcon, category: category$
|
|
526
|
-
{ name: 'location_on_fill', component: LocationOnFillIcon, category: category$
|
|
527
|
-
{ name: 'location_on', component: LocationOnIcon, category: category$
|
|
528
|
-
{ name: 'my_location_fill', component: MyLocationFillIcon, category: category$
|
|
529
|
-
{ name: 'my_location', component: MyLocationIcon, category: category$
|
|
530
|
-
{ name: 'ungroup', component: UngroupIcon, category: category$
|
|
531
|
-
{ name: 'open_in_new', component: OpenInNewIcon, category: category$
|
|
532
|
-
{ name: 'more_vert', component: MoreVertIcon, category: category$
|
|
533
|
-
{ name: 'more_horiz', component: MoreHorizIcon, category: category$
|
|
534
|
-
{ name: 'pending', component: PendingIcon, category: category$
|
|
535
|
-
{ name: 'map', component: MapIcon, category: category$
|
|
536
|
-
{ name: 'map_fill', component: MapFillIcon, category: category$
|
|
537
|
-
{ name: 'map_search', component: MapSearchIcon, category: category$
|
|
538
|
-
{ name: 'map_search_fill', component: MapSearchFillIcon, category: category$
|
|
539
|
-
{ name: 'tour', component: TourIcon, category: category$
|
|
540
|
-
{ name: 'tour_fill', component: TourFillIcon, category: category$
|
|
632
|
+
const category$5 = 'Navigation';
|
|
633
|
+
const icons$6 = [
|
|
634
|
+
{ name: 'home', component: HomeIcon, category: category$5 },
|
|
635
|
+
{ name: 'menu', component: MenuIcon, category: category$5 },
|
|
636
|
+
{ name: 'home_fill', component: HomeFillIcon, category: category$5 },
|
|
637
|
+
{ name: 'link', component: LinkIcon, category: category$5 },
|
|
638
|
+
{ name: 'location_searching', component: LocationSearchingIcon, category: category$5 },
|
|
639
|
+
{ name: 'explore_fill', component: ExploreFillIcon, category: category$5 },
|
|
640
|
+
{ name: 'explore', component: ExploreIcon, category: category$5 },
|
|
641
|
+
{ name: 'location_on_fill', component: LocationOnFillIcon, category: category$5 },
|
|
642
|
+
{ name: 'location_on', component: LocationOnIcon, category: category$5 },
|
|
643
|
+
{ name: 'my_location_fill', component: MyLocationFillIcon, category: category$5 },
|
|
644
|
+
{ name: 'my_location', component: MyLocationIcon, category: category$5 },
|
|
645
|
+
{ name: 'ungroup', component: UngroupIcon, category: category$5 },
|
|
646
|
+
{ name: 'open_in_new', component: OpenInNewIcon, category: category$5 },
|
|
647
|
+
{ name: 'more_vert', component: MoreVertIcon, category: category$5 },
|
|
648
|
+
{ name: 'more_horiz', component: MoreHorizIcon, category: category$5 },
|
|
649
|
+
{ name: 'pending', component: PendingIcon, category: category$5 },
|
|
650
|
+
{ name: 'map', component: MapIcon, category: category$5 },
|
|
651
|
+
{ name: 'map_fill', component: MapFillIcon, category: category$5 },
|
|
652
|
+
{ name: 'map_search', component: MapSearchIcon, category: category$5 },
|
|
653
|
+
{ name: 'map_search_fill', component: MapSearchFillIcon, category: category$5 },
|
|
654
|
+
{ name: 'tour', component: TourIcon, category: category$5 },
|
|
655
|
+
{ name: 'tour_fill', component: TourFillIcon, category: category$5 },
|
|
541
656
|
];
|
|
542
657
|
|
|
543
658
|
const FavoriteIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m479-87-58-52Q312.23-239.12 241.62-311.56 171-384 129-441.5t-58.5-105Q54-594 54-643.1q0-101.22 67.66-169.06T289-880q56.29 0 104.14 24Q441-832 479-785q44-50 90.03-72.5Q615.07-880 669-880q101.38 0 169.19 67.87T906-643q0 48.97-16.5 95.99Q873-500 831-442.5 789-385 718.02-311.95 647.03-238.9 538-139l-59 52Zm-.5-124q100.74-93 165.12-158Q708-434 745.5-482.5t52-86.28q14.5-37.79 14.5-74.05 0-62.17-39.86-102.67T669.71-786q-49.01 0-91.36 32T509-666h-60q-25.75-56-68.93-88-43.18-32-91.13-32-61.21 0-100.58 39.86Q149-706.29 149-642.68q0 37.77 14.94 76.34t52.5 87.46Q254-430 317.5-365.5t161 154.5Zm2.5-288Z"/></svg>`;
|
|
@@ -598,37 +713,37 @@ const StarIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
|
|
|
598
713
|
|
|
599
714
|
const StarFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m196-68 75-324L19-610l332-28 129-306 129 306 332 28-252 218 76 324-285-173L196-68Z"/></svg>`;
|
|
600
715
|
|
|
601
|
-
const category$
|
|
602
|
-
const icons$
|
|
603
|
-
{ name: 'favorite', component: FavoriteIcon, category: category$
|
|
604
|
-
{ name: 'favorite_fill', component: FavoriteFillIcon, category: category$
|
|
605
|
-
{ name: 'help', component: HelpIcon, category: category$
|
|
606
|
-
{ name: 'help_fill', component: HelpFillIcon, category: category$
|
|
607
|
-
{ name: 'info', component: InfoIcon, category: category$
|
|
608
|
-
{ name: 'info_fill', component: InfoFillIcon, category: category$
|
|
609
|
-
{ name: 'warning', component: WarningIcon, category: category$
|
|
610
|
-
{ name: 'warning_fill', component: WarningFillIcon, category: category$
|
|
611
|
-
{ name: 'check', component: CheckIcon, category: category$
|
|
612
|
-
{ name: 'check_circle', component: CheckCircleIcon, category: category$
|
|
613
|
-
{ name: 'check_circle_fill', component: CheckCircleFillIcon, category: category$
|
|
614
|
-
{ name: 'notifications', component: NotificationsIcon, category: category$
|
|
615
|
-
{ name: 'notifications_fill', component: NotificationsFillIcon, category: category$
|
|
616
|
-
{ name: 'notifications_off', component: NotificationsOffIcon, category: category$
|
|
617
|
-
{ name: 'notifications_off_fill', component: NotificationsOffFillIcon, category: category$
|
|
618
|
-
{ name: 'notifications_unread', component: NotificationsUnreadIcon, category: category$
|
|
619
|
-
{ name: 'notifications_unread_fill', component: NotificationsUnreadFillIcon, category: category$
|
|
620
|
-
{ name: 'notifications_active', component: NotificationsActiveIcon, category: category$
|
|
621
|
-
{ name: 'notifications_active_fill', component: NotificationsActiveFillIcon, category: category$
|
|
622
|
-
{ name: 'sentiment_satisfied', component: SentimentSatisfiedIcon, category: category$
|
|
623
|
-
{ name: 'sentiment_satisfied_fill', component: SentimentSatisfiedFillIcon, category: category$
|
|
624
|
-
{ name: 'sentiment_neutral', component: SentimentNeutralIcon, category: category$
|
|
625
|
-
{ name: 'sentiment_neutral_fill', component: SentimentNeutralFillIcon, category: category$
|
|
626
|
-
{ name: 'sentiment_dissatisfied', component: SentimentDissatisfiedIcon, category: category$
|
|
627
|
-
{ name: 'sentiment_dissatisfied_fill', component: SentimentDissatisfiedFillIcon, category: category$
|
|
628
|
-
{ name: 'smart_toy', component: SmartToyIcon, category: category$
|
|
629
|
-
{ name: 'smart_toy_fill', component: SmartToyFillIcon, category: category$
|
|
630
|
-
{ name: 'star', component: StarIcon, category: category$
|
|
631
|
-
{ name: 'star_fill', component: StarFillIcon, category: category$
|
|
716
|
+
const category$4 = 'Notifications and expressions';
|
|
717
|
+
const icons$5 = [
|
|
718
|
+
{ name: 'favorite', component: FavoriteIcon, category: category$4 },
|
|
719
|
+
{ name: 'favorite_fill', component: FavoriteFillIcon, category: category$4 },
|
|
720
|
+
{ name: 'help', component: HelpIcon, category: category$4 },
|
|
721
|
+
{ name: 'help_fill', component: HelpFillIcon, category: category$4 },
|
|
722
|
+
{ name: 'info', component: InfoIcon, category: category$4 },
|
|
723
|
+
{ name: 'info_fill', component: InfoFillIcon, category: category$4 },
|
|
724
|
+
{ name: 'warning', component: WarningIcon, category: category$4 },
|
|
725
|
+
{ name: 'warning_fill', component: WarningFillIcon, category: category$4 },
|
|
726
|
+
{ name: 'check', component: CheckIcon, category: category$4 },
|
|
727
|
+
{ name: 'check_circle', component: CheckCircleIcon, category: category$4 },
|
|
728
|
+
{ name: 'check_circle_fill', component: CheckCircleFillIcon, category: category$4 },
|
|
729
|
+
{ name: 'notifications', component: NotificationsIcon, category: category$4 },
|
|
730
|
+
{ name: 'notifications_fill', component: NotificationsFillIcon, category: category$4 },
|
|
731
|
+
{ name: 'notifications_off', component: NotificationsOffIcon, category: category$4 },
|
|
732
|
+
{ name: 'notifications_off_fill', component: NotificationsOffFillIcon, category: category$4 },
|
|
733
|
+
{ name: 'notifications_unread', component: NotificationsUnreadIcon, category: category$4 },
|
|
734
|
+
{ name: 'notifications_unread_fill', component: NotificationsUnreadFillIcon, category: category$4 },
|
|
735
|
+
{ name: 'notifications_active', component: NotificationsActiveIcon, category: category$4 },
|
|
736
|
+
{ name: 'notifications_active_fill', component: NotificationsActiveFillIcon, category: category$4 },
|
|
737
|
+
{ name: 'sentiment_satisfied', component: SentimentSatisfiedIcon, category: category$4 },
|
|
738
|
+
{ name: 'sentiment_satisfied_fill', component: SentimentSatisfiedFillIcon, category: category$4 },
|
|
739
|
+
{ name: 'sentiment_neutral', component: SentimentNeutralIcon, category: category$4 },
|
|
740
|
+
{ name: 'sentiment_neutral_fill', component: SentimentNeutralFillIcon, category: category$4 },
|
|
741
|
+
{ name: 'sentiment_dissatisfied', component: SentimentDissatisfiedIcon, category: category$4 },
|
|
742
|
+
{ name: 'sentiment_dissatisfied_fill', component: SentimentDissatisfiedFillIcon, category: category$4 },
|
|
743
|
+
{ name: 'smart_toy', component: SmartToyIcon, category: category$4 },
|
|
744
|
+
{ name: 'smart_toy_fill', component: SmartToyFillIcon, category: category$4 },
|
|
745
|
+
{ name: 'star', component: StarIcon, category: category$4 },
|
|
746
|
+
{ name: 'star_fill', component: StarFillIcon, category: category$4 },
|
|
632
747
|
];
|
|
633
748
|
|
|
634
749
|
const PhotoCameraIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.26-261q75.74 0 126.24-50.26 50.5-50.27 50.5-126 0-74.74-50.26-125.24-50.27-50.5-126-50.5-74.74 0-125.24 50.26-50.5 50.27-50.5 125 0 75.74 50.26 126.24 50.27 50.5 125 50.5Zm.24-80q-41.5 0-68.5-27.5t-27-69q0-41.5 27-69t68.5-27.5q41.5 0 69.5 27.5t28 69q0 41.5-28 69T479.5-341ZM55-95v-684h219l83-87h246l84 87h219v684H55Zm94-94h662v-495H647l-81-87H396l-85 87H149v495Zm331-248Z"/></svg>`;
|
|
@@ -677,6 +792,10 @@ const PlayArrowIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height
|
|
|
677
792
|
|
|
678
793
|
const PlayArrowFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M295-157v-652l512 326-512 326Z"/></svg>`;
|
|
679
794
|
|
|
795
|
+
const PlayCircleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m377-300 284-180-284-181v361ZM480.14-55Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z"/></svg>`;
|
|
796
|
+
|
|
797
|
+
const PlayCircleFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m377-300 284-180-284-181v361ZM480.14-55Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z"/></svg>`;
|
|
798
|
+
|
|
680
799
|
const SkipPreviousIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M173-193v-574h94v574h-94Zm614 0L370-480l417-287v574Zm-94-287Zm0 108v-216L537-480l156 108Z"/></svg>`;
|
|
681
800
|
|
|
682
801
|
const SkipPreviousFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M173-193v-574h94v574h-94Zm614 0L370-480l417-287v574Z"/></svg>`;
|
|
@@ -701,43 +820,92 @@ const PictureAsPdfIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" hei
|
|
|
701
820
|
|
|
702
821
|
const PictureAsPdfFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M353-448h37v-83h62l23-24v-75l-23-23h-99v205Zm37-120v-48h48v48h-48Zm122 120h98l23-24v-158l-23-23h-98v205Zm37-37v-131h47v131h-47Zm129 37h37v-83h50v-37h-50v-48h50v-37h-87v205ZM192-192v-731h731v731H192ZM37-37v-731h95v636h636v95H37Z"/></svg>`;
|
|
703
822
|
|
|
704
|
-
const category$
|
|
823
|
+
const category$3 = 'Media and devices';
|
|
824
|
+
const icons$4 = [
|
|
825
|
+
{ name: 'photo_camera', component: PhotoCameraIcon, category: category$3 },
|
|
826
|
+
{ name: 'photo_camera_fill', component: PhotoCameraFillIcon, category: category$3 },
|
|
827
|
+
{ name: 'chat', component: ChatIcon, category: category$3 },
|
|
828
|
+
{ name: 'chat_fill', component: ChatFillIcon, category: category$3 },
|
|
829
|
+
{ name: 'rss_feed', component: RSSFeedIcon, category: category$3 },
|
|
830
|
+
{ name: 'description', component: DescriptionIcon, category: category$3 },
|
|
831
|
+
{ name: 'image', component: ImageIcon, category: category$3 },
|
|
832
|
+
{ name: 'image_fill', component: ImageFillIcon, category: category$3 },
|
|
833
|
+
{ name: 'photo_library', component: PhotoLibraryIcon, category: category$3 },
|
|
834
|
+
{ name: 'gallery_thumbnail', component: GalleryThumbnailIcon, category: category$3 },
|
|
835
|
+
{ name: 'fiber_manual_record', component: FiberManualRecordIcon, category: category$3 },
|
|
836
|
+
{ name: 'fiber_manual_record_fill', component: FiberManualRecordFillIcon, category: category$3 },
|
|
837
|
+
{ name: 'pause', component: PauseIcon, category: category$3 },
|
|
838
|
+
{ name: 'pause_fill', component: PauseFillIcon, category: category$3 },
|
|
839
|
+
{ name: 'pause_circle', component: PauseCircleIcon, category: category$3 },
|
|
840
|
+
{ name: 'pause_circle_fill', component: PauseCircleFillIcon, category: category$3 },
|
|
841
|
+
{ name: 'stop_circle', component: StopCircleIcon, category: category$3 },
|
|
842
|
+
{ name: 'stop_circle_fill', component: StopCircleFillIcon, category: category$3 },
|
|
843
|
+
{ name: 'stop', component: StopIcon, category: category$3 },
|
|
844
|
+
{ name: 'stop_fill', component: StopFillIcon, category: category$3 },
|
|
845
|
+
{ name: 'play_pause', component: PlayPauseIcon, category: category$3 },
|
|
846
|
+
{ name: 'play_arrow', component: PlayArrowIcon, category: category$3 },
|
|
847
|
+
{ name: 'play_arrow_fill', component: PlayArrowFillIcon, category: category$3 },
|
|
848
|
+
{ name: 'play_circle', component: PlayCircleIcon, category: category$3 },
|
|
849
|
+
{ name: 'play_circle_fill', component: PlayCircleFillIcon, category: category$3 },
|
|
850
|
+
{ name: 'skip_previous', component: SkipPreviousIcon, category: category$3 },
|
|
851
|
+
{ name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: category$3 },
|
|
852
|
+
{ name: 'skip_next', component: SkipNextIcon, category: category$3 },
|
|
853
|
+
{ name: 'skip_next_fill', component: SkipNextFillIcon, category: category$3 },
|
|
854
|
+
{ name: 'fast_rewind', component: FastRewindIcon, category: category$3 },
|
|
855
|
+
{ name: 'fast_rewind_fill', component: FastRewindFillIcon, category: category$3 },
|
|
856
|
+
{ name: 'fast_forward', component: FastForwardIcon, category: category$3 },
|
|
857
|
+
{ name: 'fast_forward_fill', component: FastForwardFillIcon, category: category$3 },
|
|
858
|
+
{ name: 'call', component: CallIcon, category: category$3 },
|
|
859
|
+
{ name: 'call_fill', component: CallFillIcon, category: category$3 },
|
|
860
|
+
{ name: 'picture_as_pdf', component: PictureAsPdfIcon, category: category$3 },
|
|
861
|
+
{ name: 'picture_as_pdf_fill', component: PictureAsPdfFillIcon, category: category$3 },
|
|
862
|
+
];
|
|
863
|
+
|
|
864
|
+
const FacebookIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
865
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C21 9 21 15 21 21L15.644 21L15.6442 13.8804H18.079L18.4286 11.1643H15.6442V9.42857C15.6442 8.64107 15.8612 8.1067 16.9902 8.1067H18.4286V5.67991L18.0781 5.64435L17.7377 5.61862C17.3573 5.59334 16.8651 5.57143 16.3312 5.57143C14.258 5.57143 12.8357 6.83705 12.8357 9.16339V11.1683H10.3929V13.8844H12.8397L12.839 21C9.55933 21 6.27967 21 3 21V3.00003C9 2.99985 15 3 21 3Z" />
|
|
866
|
+
</svg>
|
|
867
|
+
`;
|
|
868
|
+
|
|
869
|
+
const InstagramIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
870
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C21 9 21 15 21 21C15.0002 21 8.99971 21.029 3 20.9942C3 14.9962 2.99997 8.99809 2.99997 3.00003C8.99998 3.00003 15 3 21 3ZM9.11255 5.04922C7.99442 5.10232 7.00123 5.35842 6.17981 6.17672C5.35839 6.99501 5.10541 7.9882 5.04919 9.10945L5.03066 9.54572C4.98433 10.9687 4.99051 13.8504 5.04919 14.8844C5.10228 16.0056 5.35839 16.9988 6.17981 17.8171C7.00123 18.6354 7.9913 18.8915 9.11255 18.9477L9.54881 18.9662C10.9718 19.0126 13.8535 19.0064 14.8874 18.9477C16.0087 18.8946 17.0019 18.6385 17.8202 17.8171C18.6385 16.9988 18.8946 16.0056 18.9508 14.8844L18.9693 14.4482C19.0157 13.0258 19.0095 10.1465 18.9508 9.11258C18.8977 7.99133 18.6416 6.99813 17.8202 6.17984C17.0019 5.36155 16.0087 5.10544 14.8874 5.04922L14.4512 5.03069C13.0282 4.98436 10.1465 4.99054 9.11255 5.04922ZM12.0016 6.26104L13.0197 6.25367C14.097 6.24927 15.454 6.27645 16.1274 6.54214C16.7395 6.78575 17.2112 7.25736 17.4579 7.87264C17.8233 8.794 17.739 10.9803 17.739 11.9985L17.7474 13.3166C17.7452 14.335 17.7015 15.5121 17.4579 16.1243C17.2143 16.7364 16.7427 17.2081 16.1274 17.4548C15.206 17.8202 13.0197 17.7359 12.0016 17.7359L10.9835 17.7433C9.90609 17.7477 8.54911 17.7205 7.87574 17.4548C7.26358 17.2112 6.79197 16.7396 6.54523 16.1243C6.17981 15.2029 6.26414 13.0166 6.26414 11.9985L6.25676 10.9804C6.25236 9.903 6.27954 8.54602 6.54523 7.87264C6.78884 7.26049 7.26046 6.78887 7.87574 6.54214C8.7971 6.17672 10.9834 6.26104 12.0016 6.26104ZM12.0016 8.40984C10.0152 8.40984 8.41294 10.0121 8.41294 11.9985C8.41294 13.9849 10.0152 15.5871 12.0016 15.5871C13.988 15.5871 15.5902 13.9849 15.5902 11.9985C15.5902 10.0121 13.988 8.40984 12.0016 8.40984ZM12.0016 9.66539C13.2883 9.66539 14.3346 10.7117 14.3346 11.9985C14.3346 13.2852 13.2852 14.3315 12.0016 14.3315C10.7179 14.3315 9.66849 13.2852 9.66849 11.9985C9.66849 10.7117 10.7148 9.66539 12.0016 9.66539ZM15.737 7.42602C15.2747 7.42602 14.8999 7.80081 14.8999 8.26305C14.8999 8.72529 15.2716 9.10008 15.737 9.10008C16.1992 9.10008 16.574 8.72842 16.574 8.26305C16.574 7.80081 16.1992 7.42602 15.737 7.42602Z" />
|
|
871
|
+
</svg>
|
|
872
|
+
`;
|
|
873
|
+
|
|
874
|
+
const LinkedInIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
875
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C15 3 9 2.99982 3 3.00006V21C9 21 15 21 21 21C21 15 21 9 21 3ZM5.77232 18.4286V9.83839H8.4442V18.4286H5.77232ZM5.55937 7.1183C5.55937 6.26652 6.25045 5.57143 7.10625 5.57143C7.95804 5.57143 8.65312 6.26652 8.65312 7.1183C8.65312 7.97411 7.96205 8.66518 7.10625 8.66518C6.25045 8.66518 5.55937 7.97009 5.55937 7.1183ZM15.7728 18.4286V14.25C15.7728 13.2536 15.7527 11.9719 14.3866 11.9719C12.9964 11.9719 12.7835 13.0567 12.7835 14.1777V18.4286H10.1156V9.83839H12.675V11.0116H12.7112C13.0688 10.3366 13.9406 9.62545 15.2384 9.62545C17.9384 9.62545 18.4406 11.4054 18.4406 13.7196V18.4286H15.7728Z" />
|
|
876
|
+
</svg>
|
|
877
|
+
`;
|
|
878
|
+
|
|
879
|
+
const TikTokIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
880
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C15 3 8.99998 2.99982 2.99998 3.00006C2.99999 9.00004 3.00007 15 2.99998 21C8.99999 21 15 21 21 21C21 15 21 9 21 3ZM17.1454 10.8527C17.0471 10.8623 16.9485 10.8673 16.8497 10.8677C15.7666 10.8679 14.7563 10.3219 14.163 9.41571V14.3601C14.163 16.3784 12.5269 18.0146 10.5086 18.0146C8.49029 18.0146 6.85414 16.3784 6.85414 14.3601C6.85414 12.3419 8.49029 10.7057 10.5086 10.7057C10.5849 10.7057 10.6594 10.7126 10.7344 10.7173V12.5181C10.6594 12.5091 10.5857 12.4954 10.5086 12.4954C9.47848 12.4954 8.64343 13.3305 8.64343 14.3606C8.64343 15.3907 9.47848 16.2257 10.5086 16.2257C11.5389 16.2257 12.4487 15.414 12.4487 14.3837L12.4667 5.98629H14.1896C14.352 7.53126 15.5978 8.73802 17.1471 8.85129V10.8527" />
|
|
881
|
+
</svg>
|
|
882
|
+
`;
|
|
883
|
+
|
|
884
|
+
const XIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
885
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00003 3.00002C3.00001 4.00002 3.00002 4.00002 3.00002 5.00002L3.00002 21C4.5 21 4.00002 21 5.00002 21L21 21C21 20 21 20 21 19L21 3.00003C20 2.99999 20 3.00002 19 3.00002H3.00003ZM16.9092 7.00001H15.2128L12.4175 10.1954L10.0005 7.00001H6.50002L10.6826 12.4692L6.71848 17H8.41591L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7.00001Z" />
|
|
886
|
+
<path d="M14.6175 15.9846H15.5575L9.48976 7.96207H8.48104L14.6175 15.9846Z" />
|
|
887
|
+
</svg>
|
|
888
|
+
`;
|
|
889
|
+
|
|
890
|
+
const YouTubeIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
891
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3.00002C21 8.3569 21 15.643 21 21.0001C15 20.9806 8.99999 21 3 21V3.00019C8.35684 2.99992 15.6429 3.00002 21 3.00002ZM12.4663 7.00165L11.7079 7.0004C10.7113 7.00644 7.45039 7.04509 6.52908 7.29244C5.92669 7.4538 5.45224 7.92917 5.29122 8.5328C5.06455 9.38044 5.01349 10.9415 5.00199 11.6018V12.2175C5.01349 12.8778 5.06455 14.4389 5.29122 15.2865C5.45224 15.8901 5.92669 16.3457 6.52908 16.5071C7.36319 16.731 10.115 16.7839 11.368 16.7964H12.6307C13.8837 16.7839 16.6355 16.731 17.4696 16.5071C18.072 16.3457 18.5464 15.8901 18.7074 15.2865C18.8713 14.6738 18.9434 13.6884 18.9751 12.9398L18.9995 11.817C18.9958 11.3789 18.9649 9.49561 18.7074 8.5328C18.5464 7.92917 18.072 7.45378 17.4696 7.29244C16.5968 7.05811 13.6241 7.01109 12.4663 7.00165ZM10.5992 9.79955L14.0995 11.8998L10.5992 14V9.79955Z" />
|
|
892
|
+
</svg>
|
|
893
|
+
`;
|
|
894
|
+
|
|
895
|
+
const BlueskyIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
896
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3H3V21H21V3ZM12 11.657C11.419 10.4553 9.83643 8.21532 8.36526 7.11048C7.30359 6.31365 5.58334 5.69707 5.58334 7.6594C5.58334 8.0514 5.80793 10.9517 5.94093 11.4225C6.39884 13.0599 8.06776 13.477 9.55293 13.2244C6.95709 13.666 6.29676 15.129 7.72301 16.5926C10.4296 19.3697 11.6134 15.9001 11.9183 15.0065L11.9189 15.0047L11.9201 15.0011C11.9747 14.8397 12 14.7649 12.0006 14.8297C12.0006 14.765 12.0268 14.8414 12.0823 15.0047L12.0829 15.0065C12.3877 15.9001 13.5716 19.3697 16.2782 16.5926C17.7038 15.129 17.0435 13.666 14.4483 13.2244C15.9328 13.477 17.6023 13.0593 18.0603 11.4225C18.1921 10.9517 18.4167 8.0514 18.4167 7.6594C18.4167 5.69707 16.6964 6.31365 15.6348 7.11106C14.1636 8.21531 12.581 10.4553 12 11.657Z" />
|
|
897
|
+
</svg>
|
|
898
|
+
`;
|
|
899
|
+
|
|
900
|
+
const category$2 = 'Social media';
|
|
705
901
|
const icons$3 = [
|
|
706
|
-
{ name: '
|
|
707
|
-
{ name: '
|
|
708
|
-
{ name: '
|
|
709
|
-
{ name: '
|
|
710
|
-
{ name: '
|
|
711
|
-
{ name: '
|
|
712
|
-
{ name: '
|
|
713
|
-
{ name: 'image_fill', component: ImageFillIcon, category: category$2 },
|
|
714
|
-
{ name: 'photo_library', component: PhotoLibraryIcon, category: category$2 },
|
|
715
|
-
{ name: 'gallery_thumbnail', component: GalleryThumbnailIcon, category: category$2 },
|
|
716
|
-
{ name: 'fiber_manual_record', component: FiberManualRecordIcon, category: category$2 },
|
|
717
|
-
{ name: 'fiber_manual_record_fill', component: FiberManualRecordFillIcon, category: category$2 },
|
|
718
|
-
{ name: 'pause', component: PauseIcon, category: category$2 },
|
|
719
|
-
{ name: 'pause_fill', component: PauseFillIcon, category: category$2 },
|
|
720
|
-
{ name: 'pause_circle', component: PauseCircleIcon, category: category$2 },
|
|
721
|
-
{ name: 'pause_circle_fill', component: PauseCircleFillIcon, category: category$2 },
|
|
722
|
-
{ name: 'stop_circle', component: StopCircleIcon, category: category$2 },
|
|
723
|
-
{ name: 'stop_circle_fill', component: StopCircleFillIcon, category: category$2 },
|
|
724
|
-
{ name: 'stop', component: StopIcon, category: category$2 },
|
|
725
|
-
{ name: 'stop_fill', component: StopFillIcon, category: category$2 },
|
|
726
|
-
{ name: 'play_pause', component: PlayPauseIcon, category: category$2 },
|
|
727
|
-
{ name: 'play_arrow', component: PlayArrowIcon, category: category$2 },
|
|
728
|
-
{ name: 'play_arrow_fill', component: PlayArrowFillIcon, category: category$2 },
|
|
729
|
-
{ name: 'skip_previous', component: SkipPreviousIcon, category: category$2 },
|
|
730
|
-
{ name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: category$2 },
|
|
731
|
-
{ name: 'skip_next', component: SkipNextIcon, category: category$2 },
|
|
732
|
-
{ name: 'skip_next_fill', component: SkipNextFillIcon, category: category$2 },
|
|
733
|
-
{ name: 'fast_rewind', component: FastRewindIcon, category: category$2 },
|
|
734
|
-
{ name: 'fast_rewind_fill', component: FastRewindFillIcon, category: category$2 },
|
|
735
|
-
{ name: 'fast_forward', component: FastForwardIcon, category: category$2 },
|
|
736
|
-
{ name: 'fast_forward_fill', component: FastForwardFillIcon, category: category$2 },
|
|
737
|
-
{ name: 'call', component: CallIcon, category: category$2 },
|
|
738
|
-
{ name: 'call_fill', component: CallFillIcon, category: category$2 },
|
|
739
|
-
{ name: 'picture_as_pdf', component: PictureAsPdfIcon, category: category$2 },
|
|
740
|
-
{ name: 'picture_as_pdf_fill', component: PictureAsPdfFillIcon, category: category$2 },
|
|
902
|
+
{ name: 'facebook', component: FacebookIcon, category: category$2 },
|
|
903
|
+
{ name: 'instagram', component: InstagramIcon, category: category$2 },
|
|
904
|
+
{ name: 'linkedin', component: LinkedInIcon, category: category$2 },
|
|
905
|
+
{ name: 'tiktok', component: TikTokIcon, category: category$2 },
|
|
906
|
+
{ name: 'x', component: XIcon, category: category$2 },
|
|
907
|
+
{ name: 'youtube', component: YouTubeIcon, category: category$2 },
|
|
908
|
+
{ name: 'bluesky', component: BlueskyIcon, category: category$2 },
|
|
741
909
|
];
|
|
742
910
|
|
|
743
911
|
const FormatQuoteIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m209-217 102-174q-5 1-11 1.5t-11 .5q-68-6-112.5-55.5T132-560q0-73.35 50.82-123.67Q233.65-734 307-734q72 0 122.5 50.33Q480-633.35 480-560q0 21.37-5.25 41.87Q469.5-497.63 460-480L309-217H209Zm388 0 101-174q-5 1-11 1.5t-11 .5q-68-6-112-55.5T520-560q0-73.35 50.33-123.67Q620.65-734 694-734q72 0 123 50.33 51 50.32 51 123.67 0 21.37-5.25 41.87Q857.5-497.63 848-480L696-217h-99ZM306.26-489q29.74 0 50.24-20.59 20.5-20.59 20.5-50T356.65-610q-20.35-21-49.41-21-30.24 0-50.74 20.59-20.5 20.59-20.5 50T256.26-510q20.27 21 50 21Zm387.03 0Q723-489 744-509.59t21-50Q765-589 744.36-610q-20.64-21-50.12-21-29.91 0-50.57 20.59-20.67 20.59-20.67 50T643.5-510q20.5 21 49.79 21Zm.71-71Zm-387 0Z"/></svg>`;
|
|
@@ -836,6 +1004,7 @@ const icons$1 = [
|
|
|
836
1004
|
];
|
|
837
1005
|
|
|
838
1006
|
const icons = [
|
|
1007
|
+
...icons$a,
|
|
839
1008
|
...icons$9,
|
|
840
1009
|
...icons$8,
|
|
841
1010
|
...icons$7,
|
|
@@ -847,7 +1016,13 @@ const icons = [
|
|
|
847
1016
|
...icons$1,
|
|
848
1017
|
];
|
|
849
1018
|
|
|
850
|
-
|
|
1019
|
+
function remToPx(remString) {
|
|
1020
|
+
const rootFontSize = 16;
|
|
1021
|
+
const rem = parseFloat(remString);
|
|
1022
|
+
return `${rem * rootFontSize}px`;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
const dsIconCss = ":host{display:flex}.ds-icon--container{display:flex}";
|
|
851
1026
|
const DsIconStyle0 = dsIconCss;
|
|
852
1027
|
|
|
853
1028
|
const DsIcon = class {
|
|
@@ -857,7 +1032,7 @@ const DsIcon = class {
|
|
|
857
1032
|
name;
|
|
858
1033
|
colour;
|
|
859
1034
|
size = '1.5rem';
|
|
860
|
-
|
|
1035
|
+
dsTitle = 'Icon';
|
|
861
1036
|
role = 'img';
|
|
862
1037
|
hidden = true;
|
|
863
1038
|
message = '';
|
|
@@ -886,7 +1061,9 @@ const DsIcon = class {
|
|
|
886
1061
|
const size = this.size || '1.5rem';
|
|
887
1062
|
const colour = this.getIconColour() || 'currentColor';
|
|
888
1063
|
const role = this.role || 'img';
|
|
889
|
-
const title = this.
|
|
1064
|
+
const title = this.dsTitle || '';
|
|
1065
|
+
svgElement.setAttribute('width', remToPx(size));
|
|
1066
|
+
svgElement.setAttribute('height', remToPx(size));
|
|
890
1067
|
svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
|
|
891
1068
|
svgElement.setAttribute('role', role);
|
|
892
1069
|
const titleText = title || 'Icon';
|
|
@@ -898,10 +1075,11 @@ const DsIcon = class {
|
|
|
898
1075
|
}
|
|
899
1076
|
}
|
|
900
1077
|
render() {
|
|
901
|
-
return (index.h(index.Fragment, { key: '
|
|
1078
|
+
return (index.h(index.Fragment, { key: 'cc6f636f46e631b82570aaa156bbced5e7c23fc6' }, index.h("span", { key: 'c3305714b164807c119ff1e9ab4d9496dd3eb105', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
|
|
902
1079
|
}
|
|
903
1080
|
};
|
|
904
1081
|
DsIcon.style = DsIconStyle0;
|
|
905
1082
|
|
|
906
1083
|
exports.ds_accordion = DsAccordion;
|
|
1084
|
+
exports.ds_button = DsButton;
|
|
907
1085
|
exports.ds_icon = DsIcon;
|