@spectrum-web-components/iconset 0.5.8-lit-next.222 → 0.6.2-express.41
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/package.json +3 -3
- package/src/iconset-svg.d.ts +1 -1
- package/src/iconset-svg.js +2 -1
- package/src/iconset-svg.js.map +1 -1
- package/src/iconset.js +2 -1
- package/src/iconset.js.map +1 -1
- package/stories/icons-demo.js +67 -8
- package/stories/icons-demo.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/iconset",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.2-express.41+5d9e2a2ca",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"lit-html"
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@spectrum-web-components/base": "^0.
|
|
44
|
+
"@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
|
|
45
45
|
"tslib": "^2.0.0"
|
|
46
46
|
},
|
|
47
47
|
"types": "./src/index.d.ts",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"./src/index.js",
|
|
51
51
|
"./stories/icons-demo.js"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
|
|
54
54
|
}
|
package/src/iconset-svg.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import { Iconset } from './iconset.js';
|
|
3
3
|
export declare abstract class IconsetSVG extends Iconset {
|
|
4
4
|
private iconMap;
|
package/src/iconset-svg.js
CHANGED
|
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html,
|
|
13
|
+
import { html, } from '@spectrum-web-components/base';
|
|
14
|
+
import { query } from '@spectrum-web-components/base/src/decorators.js';
|
|
14
15
|
import { Iconset } from './iconset.js';
|
|
15
16
|
export class IconsetSVG extends Iconset {
|
|
16
17
|
constructor() {
|
package/src/iconset-svg.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconset-svg.js","sourceRoot":"","sources":["iconset-svg.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EACH,IAAI,
|
|
1
|
+
{"version":3,"file":"iconset-svg.js","sourceRoot":"","sources":["iconset-svg.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { query } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Iconset } from './iconset.js';\n\nexport abstract class IconsetSVG extends Iconset {\n private iconMap: Map<string, SVGSymbolElement> = new Map();\n\n @query('slot')\n private slotContainer?: HTMLSlotElement;\n\n /**\n * First updated handler just ensures we've processed any slotted symbols\n */\n public updated(changedProperties: PropertyValues): void {\n if (!this.slotContainer) {\n return;\n }\n const currentSVGNodes = this.getSVGNodes(this.slotContainer);\n this.updateSVG(currentSVGNodes);\n super.updated(changedProperties);\n }\n /**\n * Applies the requested icon from this iconset instance to the given element.\n *\n * @param el - the element to apply the icon to\n * @param icon - the name of the icon within this set to apply.\n */\n public async applyIconToElement(\n el: HTMLElement,\n icon: string,\n _size: string,\n label: string\n ): Promise<void> {\n await this.updateComplete;\n const iconSymbol = this.iconMap.get(icon);\n if (!iconSymbol) {\n throw new Error(`Unable to find icon ${icon}`);\n }\n // we cannot share a single SVG globally across shadowroot boundaries\n // so copy the template node so we can inject it where we need it\n const clonedNode = this.prepareSvgClone(iconSymbol);\n clonedNode.setAttribute('role', 'img');\n if (label) {\n clonedNode.setAttribute('aria-label', label);\n } else {\n clonedNode.setAttribute('aria-hidden', 'true');\n }\n // append the svg to the node either in its shadowroot or directly into its dom\n if (el.shadowRoot) {\n el.shadowRoot.appendChild(clonedNode);\n } else {\n el.appendChild(clonedNode);\n }\n }\n\n /**\n * Returns a list of all icons in this iconset.\n */\n public getIconList(): string[] {\n return [...this.iconMap.keys()];\n }\n\n protected prepareSvgClone(sourceSvg: SVGSymbolElement): SVGSVGElement {\n const content = sourceSvg.cloneNode(true) as SVGSymbolElement;\n // we're going to create a new svg element that will have our symbol geometry inside\n const svg = document.createElementNS(\n 'http://www.w3.org/2000/svg',\n 'svg'\n );\n const viewBox = content.getAttribute('viewBox') || '';\n // inline style isn't ideal but will work in all cases and means our icons don't need to know\n // if they are svg or spritesheet provided\n const cssText =\n 'pointer-events: none; display: block; width: 100%; height: 100%;';\n svg.style.cssText = cssText;\n // copy the viewbox and other properties into the svg\n svg.setAttribute('viewBox', viewBox);\n svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');\n svg.setAttribute('focusable', 'false');\n // move all the child nodes over to the svg\n while (content.childNodes.length > 0) {\n svg.appendChild(content.childNodes[0]);\n }\n return svg;\n }\n protected getSVGIconName(icon: string): string {\n return icon;\n }\n protected getSanitizedIconName(icon: string): string {\n return icon;\n }\n protected renderDefaultContent(): TemplateResult {\n return html``;\n }\n\n protected render(): TemplateResult {\n return html`\n <slot @slotchange=${this.onSlotChange}>\n ${this.renderDefaultContent()}\n </slot>\n `;\n }\n\n protected updateSVG(nodes: SVGElement[]): void {\n // iterate over the nodes that were passed in, and find all the top level symbols\n const symbols = nodes.reduce((prev, svgNode) => {\n const containedSymbols = svgNode.querySelectorAll('symbol');\n prev.push(...containedSymbols);\n return prev;\n }, [] as SVGSymbolElement[]);\n symbols.forEach((symbol) => {\n this.iconMap.set(this.getSanitizedIconName(symbol.id), symbol);\n });\n }\n\n protected getSVGNodes(slotTarget: HTMLSlotElement): SVGElement[] {\n const nodes = slotTarget.assignedNodes({ flatten: true });\n // find all the svg nodes\n const svgNodes = nodes.filter((node) => {\n return node.nodeName === 'svg';\n }) as SVGElement[];\n return svgNodes;\n }\n\n private onSlotChange(event: Event): void {\n const slotTarget = event.target as HTMLSlotElement;\n const svgNodes = this.getSVGNodes(slotTarget);\n this.updateSVG(svgNodes);\n }\n}\n"]}
|
package/src/iconset.js
CHANGED
|
@@ -11,7 +11,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
11
11
|
governing permissions and limitations under the License.
|
|
12
12
|
*/
|
|
13
13
|
import { IconsetRegistry } from './iconset-registry.js';
|
|
14
|
-
import { LitElement
|
|
14
|
+
import { LitElement } from '@spectrum-web-components/base';
|
|
15
|
+
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
16
|
export class Iconset extends LitElement {
|
|
16
17
|
constructor() {
|
|
17
18
|
super(...arguments);
|
package/src/iconset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconset.js","sourceRoot":"","sources":["iconset.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"iconset.js","sourceRoot":"","sources":["iconset.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;QACc,eAAU,GAAG,KAAK,CAAC;QAiDrB,kBAAa,GAAG,CAAC,EACrB,MAAM,GAGT,EAAQ,EAAE;YACP,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;gBAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,UAAU,EAAE,CAAC;aACrB;QACL,CAAC,CAAC;IAkCN,CAAC;IAxFa,YAAY;QAClB,oCAAoC;QACpC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,CAAC;IAED;;;OAGG;IAEH,IAAW,IAAI,CAAC,KAAa;QACzB,sDAAsD;QACtD,wCAAwC;QACxC,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,IAAI,CAAC,KAAK,EAAE;gBACZ,iDAAiD;gBACjD,eAAe,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC3D;YAED,IAAI,KAAK,EAAE;gBACP,oCAAoC;gBACpC,eAAe,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;aACzD;SACJ;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IACD,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IA4BD;;OAEG;IACI,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,MAAM,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IACD;;OAEG;IACI,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAEO,UAAU;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;YAC/B,OAAO;SACV;QACD,eAAe,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IAC3B,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,OAAO;SACV;QACD,eAAe,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC5B,CAAC;CACJ;AA9EG;IADC,QAAQ,EAAE;mCAgBV","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { IconsetRegistry } from './iconset-registry.js';\n\nimport { LitElement } from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nexport abstract class Iconset extends LitElement {\n protected registered = false;\n\n private _name!: string;\n\n protected firstUpdated(): void {\n // force no display for all iconsets\n this.style.display = 'none';\n }\n\n /**\n * Name of the iconset, used by the IconsetRegistry to serve this icon set\n * to consuming icons.\n */\n @property()\n public set name(value: string) {\n // if we're already registered in the iconset registry\n // we'll need to update our registration\n if (this.registered) {\n if (this._name) {\n // remove from the iconset map using the old name\n IconsetRegistry.getInstance().removeIconset(this._name);\n }\n\n if (value) {\n // set in the map using the new name\n IconsetRegistry.getInstance().addIconset(value, this);\n }\n }\n this._name = value;\n }\n public get name(): string {\n return this._name;\n }\n\n /**\n * Applies an icon to the given element\n */\n public abstract applyIconToElement(\n el: HTMLElement,\n icon: string,\n size: string,\n label: string\n ): void;\n\n /**\n * Returns a list of all icons in this iconset.\n */\n public abstract getIconList(): string[];\n\n private handleRemoved = ({\n detail,\n }: {\n detail: { name: string };\n }): void => {\n if (detail.name === this.name) {\n this.registered = false;\n this.addIconset();\n }\n };\n\n /**\n * On updated we register the iconset if we're not already registered\n */\n public connectedCallback(): void {\n super.connectedCallback();\n this.addIconset();\n window.addEventListener('sp-iconset-removed', this.handleRemoved);\n }\n /**\n * On disconnected we remove the iconset\n */\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('sp-iconset-removed', this.handleRemoved);\n this.removeIconset();\n }\n\n private addIconset(): void {\n if (!this.name || this.registered) {\n return;\n }\n IconsetRegistry.getInstance().addIconset(this.name, this);\n this.registered = true;\n }\n\n private removeIconset(): void {\n if (!this.name) {\n return;\n }\n IconsetRegistry.getInstance().removeIconset(this.name);\n this.registered = false;\n }\n}\n"]}
|
package/stories/icons-demo.js
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { css, html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
3
|
+
import { customElement, property, } from '@spectrum-web-components/base/src/decorators.js';
|
|
4
|
+
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
|
|
3
5
|
import '@spectrum-web-components/search/sp-search.js';
|
|
4
6
|
import '@spectrum-web-components/field-label/sp-field-label.js';
|
|
5
7
|
import bodyStyles from '@spectrum-web-components/styles/body.js';
|
|
6
8
|
import '@spectrum-web-components/icon/sp-icon.js';
|
|
9
|
+
import '@spectrum-web-components/help-text/sp-help-text.js';
|
|
7
10
|
let DelayedReady = class DelayedReady extends SpectrumElement {
|
|
8
11
|
render() {
|
|
9
12
|
return html `
|
|
@@ -34,6 +37,7 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
|
34
37
|
constructor() {
|
|
35
38
|
super();
|
|
36
39
|
this.name = 'ui';
|
|
40
|
+
this.package = '';
|
|
37
41
|
this.size = 'm';
|
|
38
42
|
this.search = '';
|
|
39
43
|
this.icons = [];
|
|
@@ -62,12 +66,20 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
|
62
66
|
display: grid;
|
|
63
67
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
64
68
|
gap: 20px;
|
|
69
|
+
align-items: flex-start;
|
|
65
70
|
}
|
|
66
71
|
.icon {
|
|
67
72
|
display: flex;
|
|
68
73
|
flex-direction: column;
|
|
69
74
|
align-items: center;
|
|
70
75
|
text-align: center;
|
|
76
|
+
border-radius: var(
|
|
77
|
+
--spectrum-alias-focus-ring-gap,
|
|
78
|
+
var(--spectrum-global-dimension-static-size-25)
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
:host([package]) .icon {
|
|
82
|
+
cursor: pointer;
|
|
71
83
|
}
|
|
72
84
|
sp-icon {
|
|
73
85
|
margin-bottom: 10px;
|
|
@@ -76,9 +88,44 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
|
76
88
|
grid-column-start: 1;
|
|
77
89
|
grid-column-end: -1;
|
|
78
90
|
}
|
|
91
|
+
.icon[tabindex]:focus {
|
|
92
|
+
outline: none;
|
|
93
|
+
}
|
|
94
|
+
.icon[tabindex]:focus-visible {
|
|
95
|
+
outline: var(--spectrum-alias-focus-ring-size) solid
|
|
96
|
+
var(--spectrum-alias-focus-ring-color);
|
|
97
|
+
outline-offset: calc(
|
|
98
|
+
var(
|
|
99
|
+
--spectrum-alias-focus-ring-gap,
|
|
100
|
+
var(--spectrum-global-dimension-static-size-25)
|
|
101
|
+
) * 2
|
|
102
|
+
);
|
|
103
|
+
}
|
|
79
104
|
`,
|
|
80
105
|
];
|
|
81
106
|
}
|
|
107
|
+
handleKeydown(event, tag) {
|
|
108
|
+
const { code } = event;
|
|
109
|
+
if (code !== 'Enter' && code !== 'NumpadEnter' && code !== 'Space') {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
this.shouldCopy(tag);
|
|
114
|
+
}
|
|
115
|
+
shouldCopy(tag) {
|
|
116
|
+
if (!this.package)
|
|
117
|
+
return;
|
|
118
|
+
const conditionedTag = tag.slice(1, tag.length - 1);
|
|
119
|
+
const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;
|
|
120
|
+
this.dispatchEvent(new CustomEvent('copy-text', {
|
|
121
|
+
bubbles: true,
|
|
122
|
+
composed: true,
|
|
123
|
+
detail: {
|
|
124
|
+
message: 'Import statement copied to clipboard!',
|
|
125
|
+
text: importURL,
|
|
126
|
+
},
|
|
127
|
+
}));
|
|
128
|
+
}
|
|
82
129
|
updateSearch(event) {
|
|
83
130
|
event.stopPropagation();
|
|
84
131
|
this.search = event.target.value;
|
|
@@ -92,7 +139,7 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
|
92
139
|
? this.icons.filter((icon) => icon.name.toLowerCase().search(this.search) !== -1)
|
|
93
140
|
: this.icons;
|
|
94
141
|
return html `
|
|
95
|
-
<div class="search">
|
|
142
|
+
<div class="search" part="search">
|
|
96
143
|
<sp-field-label for="search">Spectrum icons:</sp-field-label>
|
|
97
144
|
<sp-search
|
|
98
145
|
id="search"
|
|
@@ -102,15 +149,24 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
|
102
149
|
.value=${this.search}
|
|
103
150
|
label="Search for icons"
|
|
104
151
|
autocomplete="off"
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
152
|
+
>
|
|
153
|
+
<sp-help-text slot="help-text">
|
|
154
|
+
Showing ${matchingIcons.length} of ${this.icons.length}
|
|
155
|
+
available icons.
|
|
156
|
+
</sp-help-text>
|
|
157
|
+
</sp-search>
|
|
110
158
|
</div>
|
|
111
159
|
${matchingIcons.map((icon) => {
|
|
112
160
|
return html `
|
|
113
|
-
<bdo
|
|
161
|
+
<bdo
|
|
162
|
+
class="icon"
|
|
163
|
+
part="icon"
|
|
164
|
+
dir="ltr"
|
|
165
|
+
class="icon"
|
|
166
|
+
@click=${() => this.shouldCopy(icon.tag)}
|
|
167
|
+
@keydown=${(event) => this.handleKeydown(event, icon.tag)}
|
|
168
|
+
tabindex=${ifDefined(this.package ? '0' : undefined)}
|
|
169
|
+
>
|
|
114
170
|
${icon.story(this.size)} ${icon.tag}
|
|
115
171
|
</bdo>
|
|
116
172
|
`;
|
|
@@ -139,6 +195,9 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
|
139
195
|
__decorate([
|
|
140
196
|
property()
|
|
141
197
|
], IconsDemo.prototype, "name", void 0);
|
|
198
|
+
__decorate([
|
|
199
|
+
property()
|
|
200
|
+
], IconsDemo.prototype, "package", void 0);
|
|
142
201
|
__decorate([
|
|
143
202
|
property()
|
|
144
203
|
], IconsDemo.prototype, "size", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons-demo.js","sourceRoot":"","sources":["icons-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { IconsetAddedDetail } from '../';\nimport {\n SpectrumElement,\n css,\n html,\n TemplateResult,\n CSSResultGroup,\n property,\n customElement,\n} from '@spectrum-web-components/base';\nimport { Search } from '@spectrum-web-components/search';\nimport '@spectrum-web-components/search/sp-search.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\n\n@customElement('delayed-ready')\nexport class DelayedReady extends SpectrumElement {\n _delayedReady!: Promise<void>;\n _resolveDelayedReady!: () => void;\n\n protected render(): TemplateResult {\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n `;\n }\n\n protected firstUpdated(): void {\n this._delayedReady = new Promise(\n (res) => (this._resolveDelayedReady = res)\n );\n }\n\n protected async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this._delayedReady;\n return complete;\n }\n\n public handleSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (target.assignedElements({ flatten: true }).length) {\n requestAnimationFrame(() => {\n this._resolveDelayedReady();\n });\n }\n }\n}\n\n@customElement('icons-demo')\nexport class IconsDemo extends SpectrumElement {\n @property()\n public name = 'ui';\n\n @property()\n public size = 'm';\n\n @property()\n public search = '';\n\n @property({ attribute: false })\n public icons: {\n name: string;\n story(size: string): TemplateResult;\n tag: string;\n }[] = [];\n\n private iconset: string[] = [];\n public constructor() {\n super();\n this.iconset = [];\n this.handleIconSetAdded = this.handleIconSetAdded.bind(this);\n }\n public connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('sp-iconset-added', this.handleIconSetAdded);\n }\n public disconnectedCallback(): void {\n window.removeEventListener('sp-iconset-added', this.handleIconSetAdded);\n super.disconnectedCallback();\n }\n public handleIconSetAdded(event: CustomEvent<IconsetAddedDetail>): void {\n const { iconset } = event.detail;\n this.iconset = iconset.getIconList();\n this.requestUpdate();\n }\n public static get styles(): CSSResultGroup {\n return [\n ...bodyStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n }\n .icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n sp-icon {\n margin-bottom: 10px;\n }\n .search {\n grid-column-start: 1;\n grid-column-end: -1;\n }\n `,\n ];\n }\n private updateSearch(event: Event & { target: Search }): void {\n event.stopPropagation();\n this.search = event.target.value;\n }\n private submit(event: Event & { target: Search }): void {\n event.stopPropagation();\n this.updateSearch(event);\n }\n private renderSearch(): TemplateResult {\n const matchingIcons = this.search\n ? this.icons.filter(\n (icon) => icon.name.toLowerCase().search(this.search) !== -1\n )\n : this.icons;\n return html`\n <div class=\"search\">\n <sp-field-label for=\"search\">Spectrum icons:</sp-field-label>\n <sp-search\n id=\"search\"\n @keydown=${this.updateSearch}\n @input=${this.updateSearch}\n @submit=${this.submit}\n .value=${this.search}\n label=\"Search for icons\"\n autocomplete=\"off\"\n ></sp-search>\n <p class=\"spectrum-Body spectrum-Body--sizeM\">\n Showing ${matchingIcons.length} of ${this.icons.length}\n available icons.\n </p>\n </div>\n ${matchingIcons.map((icon) => {\n return html`\n <bdo class=\"icon\" dir=\"ltr\" class=\"icon\">\n ${icon.story(this.size)} ${icon.tag}\n </bdo>\n `;\n })}\n `;\n }\n protected render(): TemplateResult {\n return html`\n ${this.icons.length\n ? this.renderSearch()\n : html`\n <slot></slot>\n `}\n ${this.iconset.map(\n (icon) => html`\n <bdo class=\"icon\" dir=\"ltr\">\n <sp-icon\n size=\"xl\"\n name=${`${this.name}:${icon}`}\n ></sp-icon>\n ${icon}\n </bdo>\n `\n )}\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"icons-demo.js","sourceRoot":"","sources":["icons-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { IconsetAddedDetail } from '../';\nimport {\n css,\n CSSResultGroup,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n customElement,\n property,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { Search } from '@spectrum-web-components/search';\nimport '@spectrum-web-components/search/sp-search.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/help-text/sp-help-text.js';\n\n@customElement('delayed-ready')\nexport class DelayedReady extends SpectrumElement {\n _delayedReady!: Promise<void>;\n _resolveDelayedReady!: () => void;\n\n protected render(): TemplateResult {\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n `;\n }\n\n protected firstUpdated(): void {\n this._delayedReady = new Promise(\n (res) => (this._resolveDelayedReady = res)\n );\n }\n\n protected async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this._delayedReady;\n return complete;\n }\n\n public handleSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (target.assignedElements({ flatten: true }).length) {\n requestAnimationFrame(() => {\n this._resolveDelayedReady();\n });\n }\n }\n}\n\n@customElement('icons-demo')\nexport class IconsDemo extends SpectrumElement {\n @property()\n public name = 'ui';\n\n @property()\n public package = '';\n\n @property()\n public size = 'm';\n\n @property()\n public search = '';\n\n @property({ attribute: false })\n public icons: {\n name: string;\n story(size: string): TemplateResult;\n tag: string;\n }[] = [];\n\n private iconset: string[] = [];\n public constructor() {\n super();\n this.iconset = [];\n this.handleIconSetAdded = this.handleIconSetAdded.bind(this);\n }\n public connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('sp-iconset-added', this.handleIconSetAdded);\n }\n public disconnectedCallback(): void {\n window.removeEventListener('sp-iconset-added', this.handleIconSetAdded);\n super.disconnectedCallback();\n }\n public handleIconSetAdded(event: CustomEvent<IconsetAddedDetail>): void {\n const { iconset } = event.detail;\n this.iconset = iconset.getIconList();\n this.requestUpdate();\n }\n public static get styles(): CSSResultGroup {\n return [\n ...bodyStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n align-items: flex-start;\n }\n .icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n border-radius: var(\n --spectrum-alias-focus-ring-gap,\n var(--spectrum-global-dimension-static-size-25)\n );\n }\n :host([package]) .icon {\n cursor: pointer;\n }\n sp-icon {\n margin-bottom: 10px;\n }\n .search {\n grid-column-start: 1;\n grid-column-end: -1;\n }\n .icon[tabindex]:focus {\n outline: none;\n }\n .icon[tabindex]:focus-visible {\n outline: var(--spectrum-alias-focus-ring-size) solid\n var(--spectrum-alias-focus-ring-color);\n outline-offset: calc(\n var(\n --spectrum-alias-focus-ring-gap,\n var(--spectrum-global-dimension-static-size-25)\n ) * 2\n );\n }\n `,\n ];\n }\n private handleKeydown(event: KeyboardEvent, tag: string): void {\n const { code } = event;\n if (code !== 'Enter' && code !== 'NumpadEnter' && code !== 'Space') {\n return;\n }\n event.preventDefault();\n this.shouldCopy(tag);\n }\n\n private shouldCopy(tag: string): void {\n if (!this.package) return;\n const conditionedTag = tag.slice(1, tag.length - 1);\n const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;\n this.dispatchEvent(\n new CustomEvent('copy-text', {\n bubbles: true,\n composed: true,\n detail: {\n message: 'Import statement copied to clipboard!',\n text: importURL,\n },\n })\n );\n }\n private updateSearch(event: Event & { target: Search }): void {\n event.stopPropagation();\n this.search = event.target.value;\n }\n private submit(event: Event & { target: Search }): void {\n event.stopPropagation();\n this.updateSearch(event);\n }\n private renderSearch(): TemplateResult {\n const matchingIcons = this.search\n ? this.icons.filter(\n (icon) => icon.name.toLowerCase().search(this.search) !== -1\n )\n : this.icons;\n return html`\n <div class=\"search\" part=\"search\">\n <sp-field-label for=\"search\">Spectrum icons:</sp-field-label>\n <sp-search\n id=\"search\"\n @keydown=${this.updateSearch}\n @input=${this.updateSearch}\n @submit=${this.submit}\n .value=${this.search}\n label=\"Search for icons\"\n autocomplete=\"off\"\n >\n <sp-help-text slot=\"help-text\">\n Showing ${matchingIcons.length} of ${this.icons.length}\n available icons.\n </sp-help-text>\n </sp-search>\n </div>\n ${matchingIcons.map((icon) => {\n return html`\n <bdo\n class=\"icon\"\n part=\"icon\"\n dir=\"ltr\"\n class=\"icon\"\n @click=${() => this.shouldCopy(icon.tag)}\n @keydown=${(event: KeyboardEvent) =>\n this.handleKeydown(event, icon.tag)}\n tabindex=${ifDefined(this.package ? '0' : undefined)}\n >\n ${icon.story(this.size)} ${icon.tag}\n </bdo>\n `;\n })}\n `;\n }\n protected render(): TemplateResult {\n return html`\n ${this.icons.length\n ? this.renderSearch()\n : html`\n <slot></slot>\n `}\n ${this.iconset.map(\n (icon) => html`\n <bdo class=\"icon\" dir=\"ltr\">\n <sp-icon\n size=\"xl\"\n name=${`${this.name}:${icon}`}\n ></sp-icon>\n ${icon}\n </bdo>\n `\n )}\n `;\n }\n}\n"]}
|