@spectrum-web-components/iconset 0.6.6 → 0.6.9-devmode.24
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 +24 -6
- package/src/iconset-registry.dev.js +33 -0
- package/src/iconset-registry.dev.js.map +7 -0
- package/src/iconset-registry.js +30 -41
- package/src/iconset-registry.js.map +7 -1
- package/src/iconset-svg.dev.js +108 -0
- package/src/iconset-svg.dev.js.map +7 -0
- package/src/iconset-svg.js +97 -120
- package/src/iconset-svg.js.map +7 -1
- package/src/iconset.dev.js +73 -0
- package/src/iconset.dev.js.map +7 -0
- package/src/iconset.js +66 -80
- package/src/iconset.js.map +7 -1
- package/src/index.dev.js +4 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +4 -14
- package/src/index.js.map +7 -1
- package/stories/icons-demo.js +139 -126
- package/stories/icons-demo.js.map +7 -1
- package/test/iconset.test.js +69 -86
- package/test/iconset.test.js.map +7 -1
@@ -0,0 +1,73 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
6
|
+
if (decorator = decorators[i])
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
8
|
+
if (kind && result)
|
9
|
+
__defProp(target, key, result);
|
10
|
+
return result;
|
11
|
+
};
|
12
|
+
import { IconsetRegistry } from "./iconset-registry.dev.js";
|
13
|
+
import { LitElement } from "@spectrum-web-components/base";
|
14
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
15
|
+
export class Iconset extends LitElement {
|
16
|
+
constructor() {
|
17
|
+
super(...arguments);
|
18
|
+
this.registered = false;
|
19
|
+
this.handleRemoved = ({
|
20
|
+
detail
|
21
|
+
}) => {
|
22
|
+
if (detail.name === this.name) {
|
23
|
+
this.registered = false;
|
24
|
+
this.addIconset();
|
25
|
+
}
|
26
|
+
};
|
27
|
+
}
|
28
|
+
firstUpdated() {
|
29
|
+
this.style.display = "none";
|
30
|
+
}
|
31
|
+
set name(value) {
|
32
|
+
if (this.registered) {
|
33
|
+
if (this._name) {
|
34
|
+
IconsetRegistry.getInstance().removeIconset(this._name);
|
35
|
+
}
|
36
|
+
if (value) {
|
37
|
+
IconsetRegistry.getInstance().addIconset(value, this);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
this._name = value;
|
41
|
+
}
|
42
|
+
get name() {
|
43
|
+
return this._name;
|
44
|
+
}
|
45
|
+
connectedCallback() {
|
46
|
+
super.connectedCallback();
|
47
|
+
this.addIconset();
|
48
|
+
window.addEventListener("sp-iconset-removed", this.handleRemoved);
|
49
|
+
}
|
50
|
+
disconnectedCallback() {
|
51
|
+
super.disconnectedCallback();
|
52
|
+
window.removeEventListener("sp-iconset-removed", this.handleRemoved);
|
53
|
+
this.removeIconset();
|
54
|
+
}
|
55
|
+
addIconset() {
|
56
|
+
if (!this.name || this.registered) {
|
57
|
+
return;
|
58
|
+
}
|
59
|
+
IconsetRegistry.getInstance().addIconset(this.name, this);
|
60
|
+
this.registered = true;
|
61
|
+
}
|
62
|
+
removeIconset() {
|
63
|
+
if (!this.name) {
|
64
|
+
return;
|
65
|
+
}
|
66
|
+
IconsetRegistry.getInstance().removeIconset(this.name);
|
67
|
+
this.registered = false;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
__decorateClass([
|
71
|
+
property()
|
72
|
+
], Iconset.prototype, "name", 1);
|
73
|
+
//# sourceMappingURL=iconset.dev.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["iconset.ts"],
|
4
|
+
"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.dev.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 override 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 override 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 override 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"],
|
5
|
+
"mappings": ";;;;;;;;;;;AAWA;AAEA;AACA;AAEO,aAAe,gBAAgB,WAAW;AAAA,EAA1C;AAAA;AACO,sBAAa;AAiDf,yBAAgB,CAAC;AAAA,MACrB;AAAA,UAGQ;AACR,UAAI,OAAO,SAAS,KAAK,MAAM;AAC3B,aAAK,aAAa;AAClB,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA;AAAA,EAtDmB,eAAqB;AAEpC,SAAK,MAAM,UAAU;AAAA,EACzB;AAAA,MAOW,KAAK,OAAe;AAG3B,QAAI,KAAK,YAAY;AACjB,UAAI,KAAK,OAAO;AAEZ,wBAAgB,YAAY,EAAE,cAAc,KAAK,KAAK;AAAA,MAC1D;AAEA,UAAI,OAAO;AAEP,wBAAgB,YAAY,EAAE,WAAW,OAAO,IAAI;AAAA,MACxD;AAAA,IACJ;AACA,SAAK,QAAQ;AAAA,EACjB;AAAA,MACW,OAAe;AACtB,WAAO,KAAK;AAAA,EAChB;AAAA,EA+BgB,oBAA0B;AACtC,UAAM,kBAAkB;AACxB,SAAK,WAAW;AAChB,WAAO,iBAAiB,sBAAsB,KAAK,aAAa;AAAA,EACpE;AAAA,EAIgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,WAAO,oBAAoB,sBAAsB,KAAK,aAAa;AACnE,SAAK,cAAc;AAAA,EACvB;AAAA,EAEQ,aAAmB;AACvB,QAAI,CAAC,KAAK,QAAQ,KAAK,YAAY;AAC/B;AAAA,IACJ;AACA,oBAAgB,YAAY,EAAE,WAAW,KAAK,MAAM,IAAI;AACxD,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,gBAAsB;AAC1B,QAAI,CAAC,KAAK,MAAM;AACZ;AAAA,IACJ;AACA,oBAAgB,YAAY,EAAE,cAAc,KAAK,IAAI;AACrD,SAAK,aAAa;AAAA,EACtB;AACJ;AA9Ee;AAAA,EADX,AAAC,SAAS;AAAA,GACC,AAfR,QAeQ;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/src/iconset.js
CHANGED
@@ -1,87 +1,73 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
import {
|
14
|
-
import {
|
15
|
-
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
6
|
+
if (decorator = decorators[i])
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
8
|
+
if (kind && result)
|
9
|
+
__defProp(target, key, result);
|
10
|
+
return result;
|
11
|
+
};
|
12
|
+
import { IconsetRegistry } from "./iconset-registry.js";
|
13
|
+
import { LitElement } from "@spectrum-web-components/base";
|
14
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
16
15
|
export class Iconset extends LitElement {
|
17
|
-
|
18
|
-
|
16
|
+
constructor() {
|
17
|
+
super(...arguments);
|
18
|
+
this.registered = false;
|
19
|
+
this.handleRemoved = ({
|
20
|
+
detail
|
21
|
+
}) => {
|
22
|
+
if (detail.name === this.name) {
|
19
23
|
this.registered = false;
|
20
|
-
this.handleRemoved = ({ detail, }) => {
|
21
|
-
if (detail.name === this.name) {
|
22
|
-
this.registered = false;
|
23
|
-
this.addIconset();
|
24
|
-
}
|
25
|
-
};
|
26
|
-
}
|
27
|
-
firstUpdated() {
|
28
|
-
// force no display for all iconsets
|
29
|
-
this.style.display = 'none';
|
30
|
-
}
|
31
|
-
/**
|
32
|
-
* Name of the iconset, used by the IconsetRegistry to serve this icon set
|
33
|
-
* to consuming icons.
|
34
|
-
*/
|
35
|
-
set name(value) {
|
36
|
-
// if we're already registered in the iconset registry
|
37
|
-
// we'll need to update our registration
|
38
|
-
if (this.registered) {
|
39
|
-
if (this._name) {
|
40
|
-
// remove from the iconset map using the old name
|
41
|
-
IconsetRegistry.getInstance().removeIconset(this._name);
|
42
|
-
}
|
43
|
-
if (value) {
|
44
|
-
// set in the map using the new name
|
45
|
-
IconsetRegistry.getInstance().addIconset(value, this);
|
46
|
-
}
|
47
|
-
}
|
48
|
-
this._name = value;
|
49
|
-
}
|
50
|
-
get name() {
|
51
|
-
return this._name;
|
52
|
-
}
|
53
|
-
/**
|
54
|
-
* On updated we register the iconset if we're not already registered
|
55
|
-
*/
|
56
|
-
connectedCallback() {
|
57
|
-
super.connectedCallback();
|
58
24
|
this.addIconset();
|
59
|
-
|
60
|
-
}
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
25
|
+
}
|
26
|
+
};
|
27
|
+
}
|
28
|
+
firstUpdated() {
|
29
|
+
this.style.display = "none";
|
30
|
+
}
|
31
|
+
set name(value) {
|
32
|
+
if (this.registered) {
|
33
|
+
if (this._name) {
|
34
|
+
IconsetRegistry.getInstance().removeIconset(this._name);
|
35
|
+
}
|
36
|
+
if (value) {
|
37
|
+
IconsetRegistry.getInstance().addIconset(value, this);
|
38
|
+
}
|
68
39
|
}
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
40
|
+
this._name = value;
|
41
|
+
}
|
42
|
+
get name() {
|
43
|
+
return this._name;
|
44
|
+
}
|
45
|
+
connectedCallback() {
|
46
|
+
super.connectedCallback();
|
47
|
+
this.addIconset();
|
48
|
+
window.addEventListener("sp-iconset-removed", this.handleRemoved);
|
49
|
+
}
|
50
|
+
disconnectedCallback() {
|
51
|
+
super.disconnectedCallback();
|
52
|
+
window.removeEventListener("sp-iconset-removed", this.handleRemoved);
|
53
|
+
this.removeIconset();
|
54
|
+
}
|
55
|
+
addIconset() {
|
56
|
+
if (!this.name || this.registered) {
|
57
|
+
return;
|
75
58
|
}
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
59
|
+
IconsetRegistry.getInstance().addIconset(this.name, this);
|
60
|
+
this.registered = true;
|
61
|
+
}
|
62
|
+
removeIconset() {
|
63
|
+
if (!this.name) {
|
64
|
+
return;
|
82
65
|
}
|
66
|
+
IconsetRegistry.getInstance().removeIconset(this.name);
|
67
|
+
this.registered = false;
|
68
|
+
}
|
83
69
|
}
|
84
|
-
|
85
|
-
|
86
|
-
], Iconset.prototype, "name",
|
87
|
-
//# sourceMappingURL=iconset.js.map
|
70
|
+
__decorateClass([
|
71
|
+
property()
|
72
|
+
], Iconset.prototype, "name", 1);
|
73
|
+
//# sourceMappingURL=iconset.js.map
|
package/src/iconset.js.map
CHANGED
@@ -1 +1,7 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["iconset.ts"],
|
4
|
+
"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 override 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 override 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 override 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"],
|
5
|
+
"mappings": ";;;;;;;;;;;AAWA;AAEA;AACA;AAEO,aAAe,gBAAgB,WAAW;AAAA,EAA1C;AAAA;AACO,sBAAa;AAiDf,yBAAgB,CAAC;AAAA,MACrB;AAAA,UAGQ;AACR,UAAI,OAAO,SAAS,KAAK,MAAM;AAC3B,aAAK,aAAa;AAClB,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA;AAAA,EAtDmB,eAAqB;AAEpC,SAAK,MAAM,UAAU;AAAA,EACzB;AAAA,MAOW,KAAK,OAAe;AAG3B,QAAI,KAAK,YAAY;AACjB,UAAI,KAAK,OAAO;AAEZ,wBAAgB,YAAY,EAAE,cAAc,KAAK,KAAK;AAAA,MAC1D;AAEA,UAAI,OAAO;AAEP,wBAAgB,YAAY,EAAE,WAAW,OAAO,IAAI;AAAA,MACxD;AAAA,IACJ;AACA,SAAK,QAAQ;AAAA,EACjB;AAAA,MACW,OAAe;AACtB,WAAO,KAAK;AAAA,EAChB;AAAA,EA+BgB,oBAA0B;AACtC,UAAM,kBAAkB;AACxB,SAAK,WAAW;AAChB,WAAO,iBAAiB,sBAAsB,KAAK,aAAa;AAAA,EACpE;AAAA,EAIgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,WAAO,oBAAoB,sBAAsB,KAAK,aAAa;AACnE,SAAK,cAAc;AAAA,EACvB;AAAA,EAEQ,aAAmB;AACvB,QAAI,CAAC,KAAK,QAAQ,KAAK,YAAY;AAC/B;AAAA,IACJ;AACA,oBAAgB,YAAY,EAAE,WAAW,KAAK,MAAM,IAAI;AACxD,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,gBAAsB;AAC1B,QAAI,CAAC,KAAK,MAAM;AACZ;AAAA,IACJ;AACA,oBAAgB,YAAY,EAAE,cAAc,KAAK,IAAI;AACrD,SAAK,aAAa;AAAA,EACtB;AACJ;AA9Ee;AAAA,EADX,AAAC,SAAS;AAAA,GACC,AAfR,QAeQ;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/src/index.dev.js
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["index.ts"],
|
4
|
+
"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\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*/\nexport * from './iconset.dev.js'\nexport * from './iconset-svg.dev.js'\nexport * from './iconset-registry.dev.js'\n"],
|
5
|
+
"mappings": "AAUA;AACA;AACA;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/src/index.js
CHANGED
@@ -1,14 +1,4 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
6
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
7
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
8
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
9
|
-
governing permissions and limitations under the License.
|
10
|
-
*/
|
11
|
-
export * from './iconset.js';
|
12
|
-
export * from './iconset-svg.js';
|
13
|
-
export * from './iconset-registry.js';
|
14
|
-
//# sourceMappingURL=index.js.map
|
1
|
+
export * from "./iconset.js";
|
2
|
+
export * from "./iconset-svg.js";
|
3
|
+
export * from "./iconset-registry.js";
|
4
|
+
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
CHANGED
@@ -1 +1,7 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["index.ts"],
|
4
|
+
"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\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*/\nexport * from './iconset.js';\nexport * from './iconset-svg.js';\nexport * from './iconset-registry.js';\n"],
|
5
|
+
"mappings": "AAUA;AACA;AACA;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/stories/icons-demo.js
CHANGED
@@ -1,67 +1,85 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
6
|
+
if (decorator = decorators[i])
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
8
|
+
if (kind && result)
|
9
|
+
__defProp(target, key, result);
|
10
|
+
return result;
|
11
|
+
};
|
12
|
+
import {
|
13
|
+
css,
|
14
|
+
html,
|
15
|
+
SpectrumElement
|
16
|
+
} from "@spectrum-web-components/base";
|
17
|
+
import {
|
18
|
+
customElement,
|
19
|
+
property
|
20
|
+
} from "@spectrum-web-components/base/src/decorators.js";
|
21
|
+
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
22
|
+
import "@spectrum-web-components/search/sp-search.js";
|
23
|
+
import "@spectrum-web-components/field-label/sp-field-label.js";
|
24
|
+
import bodyStyles from "@spectrum-web-components/styles/body.js";
|
25
|
+
import "@spectrum-web-components/icon/sp-icon.js";
|
26
|
+
import "@spectrum-web-components/help-text/sp-help-text.js";
|
27
|
+
export let DelayedReady = class extends SpectrumElement {
|
28
|
+
render() {
|
29
|
+
return html`
|
13
30
|
<slot @slotchange=${this.handleSlotchange}></slot>
|
14
31
|
`;
|
32
|
+
}
|
33
|
+
firstUpdated() {
|
34
|
+
this._delayedReady = new Promise((res) => this._resolveDelayedReady = res);
|
35
|
+
}
|
36
|
+
async getUpdateComplete() {
|
37
|
+
const complete = await super.getUpdateComplete();
|
38
|
+
await this._delayedReady;
|
39
|
+
return complete;
|
40
|
+
}
|
41
|
+
handleSlotchange({
|
42
|
+
target
|
43
|
+
}) {
|
44
|
+
if (target.assignedElements({ flatten: true }).length) {
|
45
|
+
requestAnimationFrame(() => {
|
46
|
+
this._resolveDelayedReady();
|
47
|
+
});
|
15
48
|
}
|
16
|
-
|
17
|
-
this._delayedReady = new Promise((res) => (this._resolveDelayedReady = res));
|
18
|
-
}
|
19
|
-
async getUpdateComplete() {
|
20
|
-
const complete = (await super.getUpdateComplete());
|
21
|
-
await this._delayedReady;
|
22
|
-
return complete;
|
23
|
-
}
|
24
|
-
handleSlotchange({ target, }) {
|
25
|
-
if (target.assignedElements({ flatten: true }).length) {
|
26
|
-
requestAnimationFrame(() => {
|
27
|
-
this._resolveDelayedReady();
|
28
|
-
});
|
29
|
-
}
|
30
|
-
}
|
49
|
+
}
|
31
50
|
};
|
32
|
-
DelayedReady =
|
33
|
-
|
51
|
+
DelayedReady = __decorateClass([
|
52
|
+
customElement("delayed-ready")
|
34
53
|
], DelayedReady);
|
35
|
-
export
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
connectedCallback()
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
css `
|
54
|
+
export let IconsDemo = class extends SpectrumElement {
|
55
|
+
constructor() {
|
56
|
+
super();
|
57
|
+
this.name = "ui";
|
58
|
+
this.package = "";
|
59
|
+
this.size = "m";
|
60
|
+
this.search = "";
|
61
|
+
this.icons = [];
|
62
|
+
this.iconset = [];
|
63
|
+
this.iconset = [];
|
64
|
+
this.handleIconSetAdded = this.handleIconSetAdded.bind(this);
|
65
|
+
}
|
66
|
+
connectedCallback() {
|
67
|
+
super.connectedCallback();
|
68
|
+
window.addEventListener("sp-iconset-added", this.handleIconSetAdded);
|
69
|
+
}
|
70
|
+
disconnectedCallback() {
|
71
|
+
window.removeEventListener("sp-iconset-added", this.handleIconSetAdded);
|
72
|
+
super.disconnectedCallback();
|
73
|
+
}
|
74
|
+
handleIconSetAdded(event) {
|
75
|
+
const { iconset } = event.detail;
|
76
|
+
this.iconset = iconset.getIconList();
|
77
|
+
this.requestUpdate();
|
78
|
+
}
|
79
|
+
static get styles() {
|
80
|
+
return [
|
81
|
+
...bodyStyles,
|
82
|
+
css`
|
65
83
|
:host {
|
66
84
|
display: grid;
|
67
85
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
@@ -101,44 +119,42 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
101
119
|
) * 2
|
102
120
|
);
|
103
121
|
}
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
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
|
-
}
|
129
|
-
updateSearch(event) {
|
130
|
-
event.stopPropagation();
|
131
|
-
this.search = event.target.value;
|
122
|
+
`
|
123
|
+
];
|
124
|
+
}
|
125
|
+
handleKeydown(event, tag) {
|
126
|
+
const { code } = event;
|
127
|
+
if (code !== "Enter" && code !== "NumpadEnter" && code !== "Space") {
|
128
|
+
return;
|
132
129
|
}
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
130
|
+
event.preventDefault();
|
131
|
+
this.shouldCopy(tag);
|
132
|
+
}
|
133
|
+
shouldCopy(tag) {
|
134
|
+
if (!this.package)
|
135
|
+
return;
|
136
|
+
const conditionedTag = tag.slice(1, tag.length - 1);
|
137
|
+
const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;
|
138
|
+
this.dispatchEvent(new CustomEvent("copy-text", {
|
139
|
+
bubbles: true,
|
140
|
+
composed: true,
|
141
|
+
detail: {
|
142
|
+
message: "Import statement copied to clipboard!",
|
143
|
+
text: importURL
|
144
|
+
}
|
145
|
+
}));
|
146
|
+
}
|
147
|
+
updateSearch(event) {
|
148
|
+
event.stopPropagation();
|
149
|
+
this.search = event.target.value;
|
150
|
+
}
|
151
|
+
submit(event) {
|
152
|
+
event.stopPropagation();
|
153
|
+
this.updateSearch(event);
|
154
|
+
}
|
155
|
+
renderSearch() {
|
156
|
+
const matchingIcons = this.search ? this.icons.filter((icon) => icon.name.toLowerCase().search(this.search) !== -1) : this.icons;
|
157
|
+
return html`
|
142
158
|
<div class="search" part="search">
|
143
159
|
<sp-field-label for="search">Spectrum icons:</sp-field-label>
|
144
160
|
<sp-search
|
@@ -157,7 +173,7 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
157
173
|
</sp-search>
|
158
174
|
</div>
|
159
175
|
${matchingIcons.map((icon) => {
|
160
|
-
|
176
|
+
return html`
|
161
177
|
<bdo
|
162
178
|
class="icon"
|
163
179
|
part="icon"
|
@@ -165,22 +181,20 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
165
181
|
class="icon"
|
166
182
|
@click=${() => this.shouldCopy(icon.tag)}
|
167
183
|
@keydown=${(event) => this.handleKeydown(event, icon.tag)}
|
168
|
-
tabindex=${ifDefined(this.package ?
|
184
|
+
tabindex=${ifDefined(this.package ? "0" : void 0)}
|
169
185
|
>
|
170
186
|
${icon.story(this.size)} ${icon.tag}
|
171
187
|
</bdo>
|
172
188
|
`;
|
173
|
-
|
189
|
+
})}
|
174
190
|
`;
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
${this.icons.length
|
179
|
-
? this.renderSearch()
|
180
|
-
: html `
|
191
|
+
}
|
192
|
+
render() {
|
193
|
+
return html`
|
194
|
+
${this.icons.length ? this.renderSearch() : html`
|
181
195
|
<slot></slot>
|
182
196
|
`}
|
183
|
-
${this.iconset.map((icon) => html
|
197
|
+
${this.iconset.map((icon) => html`
|
184
198
|
<bdo class="icon" dir="ltr">
|
185
199
|
<sp-icon
|
186
200
|
size="xl"
|
@@ -190,25 +204,24 @@ let IconsDemo = class IconsDemo extends SpectrumElement {
|
|
190
204
|
</bdo>
|
191
205
|
`)}
|
192
206
|
`;
|
193
|
-
|
207
|
+
}
|
194
208
|
};
|
195
|
-
|
196
|
-
|
197
|
-
], IconsDemo.prototype, "name",
|
198
|
-
|
199
|
-
|
200
|
-
], IconsDemo.prototype, "package",
|
201
|
-
|
202
|
-
|
203
|
-
], IconsDemo.prototype, "size",
|
204
|
-
|
205
|
-
|
206
|
-
], IconsDemo.prototype, "search",
|
207
|
-
|
208
|
-
|
209
|
-
], IconsDemo.prototype, "icons",
|
210
|
-
IconsDemo =
|
211
|
-
|
209
|
+
__decorateClass([
|
210
|
+
property()
|
211
|
+
], IconsDemo.prototype, "name", 2);
|
212
|
+
__decorateClass([
|
213
|
+
property()
|
214
|
+
], IconsDemo.prototype, "package", 2);
|
215
|
+
__decorateClass([
|
216
|
+
property()
|
217
|
+
], IconsDemo.prototype, "size", 2);
|
218
|
+
__decorateClass([
|
219
|
+
property()
|
220
|
+
], IconsDemo.prototype, "search", 2);
|
221
|
+
__decorateClass([
|
222
|
+
property({ attribute: false })
|
223
|
+
], IconsDemo.prototype, "icons", 2);
|
224
|
+
IconsDemo = __decorateClass([
|
225
|
+
customElement("icons-demo")
|
212
226
|
], IconsDemo);
|
213
|
-
|
214
|
-
//# sourceMappingURL=icons-demo.js.map
|
227
|
+
//# sourceMappingURL=icons-demo.js.map
|