@spectrum-web-components/tabs 0.42.0 → 0.42.1
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/custom-elements.json +3 -23
- package/package.json +8 -8
- package/src/Tab.d.ts +4 -8
- package/src/Tab.dev.js +12 -18
- package/src/Tab.dev.js.map +2 -2
- package/src/Tab.js +5 -5
- package/src/Tab.js.map +3 -3
- package/src/TabPanel.d.ts +0 -4
- package/src/TabPanel.dev.js +7 -11
- package/src/TabPanel.dev.js.map +2 -2
- package/src/TabPanel.js +2 -2
- package/src/TabPanel.js.map +3 -3
package/custom-elements.json
CHANGED
|
@@ -81,16 +81,6 @@
|
|
|
81
81
|
}
|
|
82
82
|
],
|
|
83
83
|
"members": [
|
|
84
|
-
{
|
|
85
|
-
"kind": "field",
|
|
86
|
-
"name": "instanceCount",
|
|
87
|
-
"type": {
|
|
88
|
-
"text": "number"
|
|
89
|
-
},
|
|
90
|
-
"static": true,
|
|
91
|
-
"default": "0",
|
|
92
|
-
"privacy": "private"
|
|
93
|
-
},
|
|
94
84
|
{
|
|
95
85
|
"kind": "field",
|
|
96
86
|
"name": "hasIcon",
|
|
@@ -210,15 +200,15 @@
|
|
|
210
200
|
"mixins": [
|
|
211
201
|
{
|
|
212
202
|
"name": "FocusVisiblePolyfillMixin",
|
|
213
|
-
"package": "@spectrum-web-components/shared"
|
|
203
|
+
"package": "@spectrum-web-components/shared/src/focus-visible.js"
|
|
214
204
|
},
|
|
215
205
|
{
|
|
216
206
|
"name": "ObserveSlotText",
|
|
217
|
-
"package": "@spectrum-web-components/shared"
|
|
207
|
+
"package": "@spectrum-web-components/shared/src/observe-slot-text.js"
|
|
218
208
|
},
|
|
219
209
|
{
|
|
220
210
|
"name": "ObserveSlotPresence",
|
|
221
|
-
"package": "@spectrum-web-components/shared"
|
|
211
|
+
"package": "@spectrum-web-components/shared/src/observe-slot-presence.js"
|
|
222
212
|
}
|
|
223
213
|
],
|
|
224
214
|
"superclass": {
|
|
@@ -255,16 +245,6 @@
|
|
|
255
245
|
}
|
|
256
246
|
],
|
|
257
247
|
"members": [
|
|
258
|
-
{
|
|
259
|
-
"kind": "field",
|
|
260
|
-
"name": "instanceCount",
|
|
261
|
-
"type": {
|
|
262
|
-
"text": "number"
|
|
263
|
-
},
|
|
264
|
-
"static": true,
|
|
265
|
-
"default": "0",
|
|
266
|
-
"privacy": "private"
|
|
267
|
-
},
|
|
268
248
|
{
|
|
269
249
|
"kind": "field",
|
|
270
250
|
"name": "selected",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -86,14 +86,14 @@
|
|
|
86
86
|
],
|
|
87
87
|
"dependencies": {
|
|
88
88
|
"@lit-labs/observers": "^2.0.0",
|
|
89
|
-
"@spectrum-web-components/base": "^0.42.
|
|
90
|
-
"@spectrum-web-components/icon": "^0.42.
|
|
91
|
-
"@spectrum-web-components/icons-ui": "^0.42.
|
|
92
|
-
"@spectrum-web-components/reactive-controllers": "^0.42.
|
|
93
|
-
"@spectrum-web-components/shared": "^0.42.
|
|
89
|
+
"@spectrum-web-components/base": "^0.42.1",
|
|
90
|
+
"@spectrum-web-components/icon": "^0.42.1",
|
|
91
|
+
"@spectrum-web-components/icons-ui": "^0.42.1",
|
|
92
|
+
"@spectrum-web-components/reactive-controllers": "^0.42.1",
|
|
93
|
+
"@spectrum-web-components/shared": "^0.42.1"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
|
96
|
-
"@spectrum-css/tabs": "^4.1.
|
|
96
|
+
"@spectrum-css/tabs": "^4.1.4"
|
|
97
97
|
},
|
|
98
98
|
"types": "./src/index.d.ts",
|
|
99
99
|
"customElements": "custom-elements.json",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"./sp-*.js",
|
|
102
102
|
"./**/*.dev.js"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "c7ab5516e86d20194e92114afd04affa490b7248"
|
|
105
105
|
}
|
package/src/Tab.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
declare const Tab_base: typeof SpectrumElement & {
|
|
3
|
-
new (...args: any[]): import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
|
|
4
|
-
prototype: import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
|
|
3
|
+
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
|
4
|
+
prototype: import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
|
5
5
|
} & {
|
|
6
|
-
new (...args: any[]): import("@spectrum-web-components/shared").SlotTextObservingInterface;
|
|
7
|
-
prototype: import("@spectrum-web-components/shared").SlotTextObservingInterface;
|
|
6
|
+
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
7
|
+
prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
8
8
|
};
|
|
9
9
|
/**
|
|
10
10
|
* @element sp-tab
|
|
@@ -14,10 +14,6 @@ declare const Tab_base: typeof SpectrumElement & {
|
|
|
14
14
|
*/
|
|
15
15
|
export declare class Tab extends Tab_base {
|
|
16
16
|
static get styles(): CSSResultArray;
|
|
17
|
-
/**
|
|
18
|
-
* @private
|
|
19
|
-
*/
|
|
20
|
-
static instanceCount: number;
|
|
21
17
|
protected get hasIcon(): boolean;
|
|
22
18
|
protected get hasLabel(): boolean;
|
|
23
19
|
disabled: boolean;
|
package/src/Tab.dev.js
CHANGED
|
@@ -16,13 +16,12 @@ import {
|
|
|
16
16
|
SpectrumElement
|
|
17
17
|
} from "@spectrum-web-components/base";
|
|
18
18
|
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
19
|
-
import {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} from "@spectrum-web-components/shared";
|
|
19
|
+
import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
|
|
20
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
|
|
21
|
+
import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
|
|
22
|
+
import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
|
|
24
23
|
import tabItemStyles from "./tab.css.js";
|
|
25
|
-
|
|
24
|
+
export class Tab extends FocusVisiblePolyfillMixin(
|
|
26
25
|
ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), "")
|
|
27
26
|
) {
|
|
28
27
|
constructor() {
|
|
@@ -57,7 +56,7 @@ const _Tab = class _Tab extends FocusVisiblePolyfillMixin(
|
|
|
57
56
|
super.firstUpdated(changes);
|
|
58
57
|
this.setAttribute("role", "tab");
|
|
59
58
|
if (!this.hasAttribute("id")) {
|
|
60
|
-
this.id = `sp-tab-${
|
|
59
|
+
this.id = `sp-tab-${randomID()}`;
|
|
61
60
|
}
|
|
62
61
|
}
|
|
63
62
|
updated(changes) {
|
|
@@ -77,25 +76,20 @@ const _Tab = class _Tab extends FocusVisiblePolyfillMixin(
|
|
|
77
76
|
}
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* @private
|
|
83
|
-
*/
|
|
84
|
-
_Tab.instanceCount = 0;
|
|
79
|
+
}
|
|
85
80
|
__decorateClass([
|
|
86
81
|
property({ type: Boolean, reflect: true })
|
|
87
|
-
],
|
|
82
|
+
], Tab.prototype, "disabled", 2);
|
|
88
83
|
__decorateClass([
|
|
89
84
|
property({ reflect: true })
|
|
90
|
-
],
|
|
85
|
+
], Tab.prototype, "label", 2);
|
|
91
86
|
__decorateClass([
|
|
92
87
|
property({ type: Boolean, reflect: true })
|
|
93
|
-
],
|
|
88
|
+
], Tab.prototype, "selected", 2);
|
|
94
89
|
__decorateClass([
|
|
95
90
|
property({ type: Boolean, reflect: true })
|
|
96
|
-
],
|
|
91
|
+
], Tab.prototype, "vertical", 2);
|
|
97
92
|
__decorateClass([
|
|
98
93
|
property({ type: String, reflect: true })
|
|
99
|
-
],
|
|
100
|
-
export let Tab = _Tab;
|
|
94
|
+
], Tab.prototype, "value", 2);
|
|
101
95
|
//# sourceMappingURL=Tab.dev.js.map
|
package/src/Tab.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.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*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB
|
|
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*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : nothing}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,OAAO,mBAAmB;AAQnB,aAAM,YAAY;AAAA,EACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAC7E,EAAE;AAAA,EAFK;AAAA;AAgBH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAGf,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAzBf,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAEA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAiBmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA,sBAGA,OAAO;AAAA,6CACoB,CAAC,KAAK,QAAQ;AAAA,kBACzC,KAAK,iBAAiB,UAAU,KAAK,KAAK;AAAA,wBACpC,KAAK,KAAK;AAAA;AAAA;AAAA,EAG9B;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,aAAa,QAAQ,KAAK;AAC/B,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,UAAU,SAAS,CAAC;AAAA,IAClC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK;AAAA,QACD;AAAA,QACA,KAAK,WAAW,SAAS;AAAA,MAC7B;AACA,WAAK,aAAa,YAAY,KAAK,WAAW,MAAM,IAAI;AAAA,IAC5D;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,aAAa,iBAAiB,MAAM;AAAA,MAC7C,OAAO;AACH,aAAK,gBAAgB,eAAe;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AACJ;AArDW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfjC,IAgBF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAlBlB,IAmBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBjC,IAsBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxBjC,IAyBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BhC,IA4BF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tab.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
${this.hasIcon?
|
|
1
|
+
"use strict";var b=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var r=(o,l,e,i)=>{for(var t=i>1?void 0:i?n(l,e):l,a=o.length-1,d;a>=0;a--)(d=o[a])&&(t=(i?d(l,e,t):d(t))||t);return i&&t&&b(l,e,t),t};import{html as p,nothing as u,SpectrumElement as c}from"@spectrum-web-components/base";import{property as s}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as h}from"@spectrum-web-components/shared/src/focus-visible.js";import{ObserveSlotPresence as m}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import{randomID as y}from"@spectrum-web-components/shared/src/random-id.js";import v from"./tab.css.js";export class Tab extends h(f(m(c,'[slot="icon"]'),"")){constructor(){super(...arguments);this.disabled=!1;this.label="";this.selected=!1;this.vertical=!1;this.value=""}static get styles(){return[v]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return p`
|
|
2
|
+
${this.hasIcon?p`
|
|
3
3
|
<slot name="icon"></slot>
|
|
4
|
-
`:
|
|
4
|
+
`:u}
|
|
5
5
|
<label id="item-label" ?hidden=${!this.hasLabel}>
|
|
6
|
-
${this.slotHasContent?
|
|
6
|
+
${this.slotHasContent?u:this.label}
|
|
7
7
|
<slot>${this.label}</slot>
|
|
8
8
|
</label>
|
|
9
|
-
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`sp-tab-${
|
|
9
|
+
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`sp-tab-${y()}`)}updated(e){super.updated(e),e.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}r([s({type:Boolean,reflect:!0})],Tab.prototype,"disabled",2),r([s({reflect:!0})],Tab.prototype,"label",2),r([s({type:Boolean,reflect:!0})],Tab.prototype,"selected",2),r([s({type:Boolean,reflect:!0})],Tab.prototype,"vertical",2),r([s({type:String,reflect:!0})],Tab.prototype,"value",2);
|
|
10
10
|
//# sourceMappingURL=Tab.js.map
|
package/src/Tab.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.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*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,
|
|
6
|
-
"names": ["html", "nothing", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "ObserveSlotText", "
|
|
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*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : nothing}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,6BAAAC,MAAiC,uDAC1C,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,OAAS,YAAAC,MAAgB,mDAEzB,OAAOC,MAAmB,eAQnB,aAAM,YAAYJ,EACrBE,EAAgBD,EAAoBH,EAAiB,eAAe,EAAG,EAAE,CAC7E,CAAE,CAFK,kCAgBH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAGf,KAAO,SAAW,GAGlB,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAzBf,WAA2B,QAAyB,CAChD,MAAO,CAACM,CAAa,CACzB,CAEA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEA,IAAc,UAAoB,CAC9B,MAAO,CAAC,CAAC,KAAK,OAAS,KAAK,cAChC,CAiBmB,QAAyB,CACxC,OAAOR;AAAA,cACD,KAAK,QACDA;AAAA;AAAA,oBAGAC,CAAO;AAAA,6CACoB,CAAC,KAAK,QAAQ;AAAA,kBACzC,KAAK,eAAiBA,EAAU,KAAK,KAAK;AAAA,wBACpC,KAAK,KAAK;AAAA;AAAA,SAG9B,CAEmB,aAAaQ,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,KAAK,EAC1B,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,UAAUF,EAAS,CAAC,GAEtC,CAEmB,QAAQE,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,UAAU,IACtB,KAAK,aACD,gBACA,KAAK,SAAW,OAAS,OAC7B,EACA,KAAK,aAAa,WAAY,KAAK,SAAW,IAAM,IAAI,GAExDA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CArDWC,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAfjC,IAgBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,QAAS,EAAK,CAAC,GAlBlB,IAmBF,qBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GArBjC,IAsBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxBjC,IAyBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA3BhC,IA4BF",
|
|
6
|
+
"names": ["html", "nothing", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "ObserveSlotText", "randomID", "tabItemStyles", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/TabPanel.d.ts
CHANGED
|
@@ -6,10 +6,6 @@ import { PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-c
|
|
|
6
6
|
*/
|
|
7
7
|
export declare class TabPanel extends SpectrumElement {
|
|
8
8
|
static styles: import("@spectrum-web-components/base").CSSResult[];
|
|
9
|
-
/**
|
|
10
|
-
* @private
|
|
11
|
-
*/
|
|
12
|
-
static instanceCount: number;
|
|
13
9
|
selected: boolean;
|
|
14
10
|
value: string;
|
|
15
11
|
protected handleFocusin(): void;
|
package/src/TabPanel.dev.js
CHANGED
|
@@ -15,8 +15,9 @@ import {
|
|
|
15
15
|
SpectrumElement
|
|
16
16
|
} from "@spectrum-web-components/base";
|
|
17
17
|
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
18
|
+
import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
|
|
18
19
|
import panelStyles from "./tab-panel.css.js";
|
|
19
|
-
|
|
20
|
+
export class TabPanel extends SpectrumElement {
|
|
20
21
|
constructor() {
|
|
21
22
|
super(...arguments);
|
|
22
23
|
this.selected = false;
|
|
@@ -41,7 +42,7 @@ const _TabPanel = class _TabPanel extends SpectrumElement {
|
|
|
41
42
|
this.setAttribute("role", "tabpanel");
|
|
42
43
|
this.tabIndex = 0;
|
|
43
44
|
if (!this.hasAttribute("id")) {
|
|
44
|
-
this.id = `sp-tab-panel-${
|
|
45
|
+
this.id = `sp-tab-panel-${randomID()}`;
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
48
|
updated(changes) {
|
|
@@ -55,17 +56,12 @@ const _TabPanel = class _TabPanel extends SpectrumElement {
|
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* @private
|
|
62
|
-
*/
|
|
63
|
-
_TabPanel.instanceCount = 0;
|
|
59
|
+
}
|
|
60
|
+
TabPanel.styles = [panelStyles];
|
|
64
61
|
__decorateClass([
|
|
65
62
|
property({ type: Boolean, reflect: true })
|
|
66
|
-
],
|
|
63
|
+
], TabPanel.prototype, "selected", 2);
|
|
67
64
|
__decorateClass([
|
|
68
65
|
property({ type: String, reflect: true })
|
|
69
|
-
],
|
|
70
|
-
export let TabPanel = _TabPanel;
|
|
66
|
+
], TabPanel.prototype, "value", 2);
|
|
71
67
|
//# sourceMappingURL=TabPanel.dev.js.map
|
package/src/TabPanel.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabPanel.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*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,iBAAiB;AAOjB,
|
|
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*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleFocusin(): void {\n this.removeAttribute('tabindex');\n }\n\n protected handleFocusout(): void {\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,OAAO,iBAAiB;AAOjB,aAAM,iBAAiB,gBAAgB;AAAA,EAAvC;AAAA;AAIH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAEL,gBAAsB;AAC5B,SAAK,gBAAgB,UAAU;AAAA,EACnC;AAAA,EAEU,iBAAuB;AAC7B,SAAK,WAAW,KAAK,WAAW,IAAI;AAAA,EACxC;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,2BAEY,KAAK,aAAa;AAAA,4BACjB,KAAK,cAAc;AAAA;AAAA;AAAA,EAG3C;AAAA,EAEmB,eAAqB;AACpC,SAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,UAAU;AACpC,SAAK,WAAW;AAChB,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,gBAAgB,SAAS,CAAC;AAAA,IACxC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAAqC;AAC5D,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,gBAAgB,aAAa;AAClC,aAAK,WAAW;AAAA,MACpB,OAAO;AACH,aAAK,aAAa,eAAe,MAAM;AACvC,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AACJ;AA9Ca,SACO,SAAS,CAAC,WAAW;AAG9B;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHjC,SAIF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANhC,SAOF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TabPanel.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(s,t,i,r)=>{for(var e=r>1?void 0:r?u(t,i):t,o=s.length-1,d;o>=0;o--)(d=s[o])&&(e=(r?d(t,i,e):d(e))||e);return r&&e&&p(t,i,e),e};import{html as h,SpectrumElement as n}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{randomID as c}from"@spectrum-web-components/shared/src/random-id.js";import m from"./tab-panel.css.js";export class TabPanel extends n{constructor(){super(...arguments);this.selected=!1;this.value=""}handleFocusin(){this.removeAttribute("tabindex")}handleFocusout(){this.tabIndex=this.selected?0:-1}render(){return h`
|
|
2
2
|
<slot
|
|
3
3
|
@focusin=${this.handleFocusin}
|
|
4
4
|
@focusout=${this.handleFocusout}
|
|
5
5
|
></slot>
|
|
6
|
-
`}firstUpdated(){this.slot="tab-panel",this.setAttribute("role","tabpanel"),this.tabIndex=0,this.hasAttribute("id")||(this.id=`sp-tab-panel-${
|
|
6
|
+
`}firstUpdated(){this.slot="tab-panel",this.setAttribute("role","tabpanel"),this.tabIndex=0,this.hasAttribute("id")||(this.id=`sp-tab-panel-${c()}`)}updated(i){i.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}}TabPanel.styles=[m],l([a({type:Boolean,reflect:!0})],TabPanel.prototype,"selected",2),l([a({type:String,reflect:!0})],TabPanel.prototype,"value",2);
|
|
7
7
|
//# sourceMappingURL=TabPanel.js.map
|
package/src/TabPanel.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabPanel.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*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n
|
|
5
|
-
"mappings": "qNAYA,OACI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "
|
|
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*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleFocusin(): void {\n this.removeAttribute('tabindex');\n }\n\n protected handleFocusout(): void {\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OACI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,YAAAC,MAAgB,mDAEzB,OAAOC,MAAiB,qBAOjB,aAAM,iBAAiBH,CAAgB,CAAvC,kCAIH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAEL,eAAsB,CAC5B,KAAK,gBAAgB,UAAU,CACnC,CAEU,gBAAuB,CAC7B,KAAK,SAAW,KAAK,SAAW,EAAI,EACxC,CAEmB,QAAyB,CACxC,OAAOD;AAAA;AAAA,2BAEY,KAAK,aAAa;AAAA,4BACjB,KAAK,cAAc;AAAA;AAAA,SAG3C,CAEmB,cAAqB,CACpC,KAAK,KAAO,YACZ,KAAK,aAAa,OAAQ,UAAU,EACpC,KAAK,SAAW,EACX,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,gBAAgBG,EAAS,CAAC,GAE5C,CAEmB,QAAQE,EAAqC,CACxDA,EAAQ,IAAI,UAAU,IAClB,KAAK,UACL,KAAK,gBAAgB,aAAa,EAClC,KAAK,SAAW,IAEhB,KAAK,aAAa,cAAe,MAAM,EACvC,KAAK,SAAW,IAG5B,CACJ,CA9Ca,SACO,OAAS,CAACD,CAAW,EAG9BE,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAHjC,SAIF,wBAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GANhC,SAOF",
|
|
6
|
+
"names": ["html", "SpectrumElement", "property", "randomID", "panelStyles", "changes", "__decorateClass"]
|
|
7
7
|
}
|