@m3e/tabs 1.0.5 → 1.1.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/README.md +3 -2
- package/dist/custom-elements.json +8 -0
- package/dist/index.js +934 -500
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +13 -241
- package/dist/index.min.js.map +1 -1
- package/dist/src/TabsElement.d.ts +2 -0
- package/dist/src/TabsElement.d.ts.map +1 -1
- package/package.json +3 -17
package/dist/index.min.js
CHANGED
|
@@ -3,29 +3,29 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{LitElement as t,html as e,css as i,nothing as s,unsafeCSS as o}from"lit";import{Selected as
|
|
6
|
+
import{LitElement as t,html as e,css as i,nothing as s,unsafeCSS as o}from"lit";import{Selected as r,HtmlFor as a,KeyboardClick as n,Focusable as l,Disabled as c,AttachInternals as h,Role as d,DesignToken as p,ResizeController as u}from"@m3e/core";import{addAriaReferencedId as b,removeAriaReferencedId as m,selectionManager as f,SelectionManager as v}from"@m3e/core/a11y";import{M3eDirectionality as g}from"@m3e/core/bidi";function $(t,e,i,s){var o,r=arguments.length,a=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(a=(r<3?o(a):r>3?o(e,i,a):o(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a}function _(t,e,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(t):s?s.value:e.get(t)}"function"==typeof SuppressedError&&SuppressedError;
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
11
|
*/
|
|
12
|
-
const
|
|
12
|
+
const y=t=>(e,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)},A=globalThis,w=A.ShadowRoot&&(void 0===A.ShadyCSS||A.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,x=Symbol(),E=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let
|
|
17
|
+
*/let S=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==x)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(w&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=E.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&E.set(e,t))}return t}toString(){return this.cssText}};const P=w?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new S("string"==typeof t?t:t+"",void 0,x))(e)})(t):t,{is:C,defineProperty:k,getOwnPropertyDescriptor:T,getOwnPropertyNames:U,getOwnPropertySymbols:O,getPrototypeOf:M}=Object,H=globalThis,N=H.trustedTypes,I=N?N.emptyScript:"",R=H.reactiveElementPolyfillSupport,L=(t,e)=>t,z={toAttribute(t,e){switch(e){case Boolean:t=t?I:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},j=(t,e)=>!C(t,e),B={attribute:!0,type:String,converter:z,reflect:!1,useDefault:!1,hasChanged:j};
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
22
|
+
*/Symbol.metadata??=Symbol("metadata"),H.litPropertyMetadata??=new WeakMap;class D extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=B){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&k(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:o}=T(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:s,set(e){const r=s?.call(this);o?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??B}static _$Ei(){if(this.hasOwnProperty(L("elementProperties")))return;const t=M(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(L("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(L("properties"))){const t=this.properties,e=[...U(t),...O(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(P(t))}else void 0!==t&&e.push(P(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(w)t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of e){const e=document.createElement("style"),s=A.litNonce;void 0!==s&&e.setAttribute("nonce",s),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,i);if(void 0!==s&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:z).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(s):this.setAttribute(s,o),this._$Em=null}}_$AK(t,e){const i=this.constructor,s=i._$Eh.get(t);if(void 0!==s&&this._$Em!==s){const t=i.getPropertyOptions(s),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:z;this._$Em=s;const r=o.fromAttribute(e,t.type);this[s]=r??this._$Ej?.get(s)??r,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const s=this.constructor,o=this[t];if(i??=s.getPropertyOptions(t),!((i.hasChanged??j)(o,e)||i.useDefault&&i.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:s,wrapped:o},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??e??this[t]),!0!==o||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===s&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$AL.has(e)||void 0===s||this.C(e,void 0,i,s)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}D.elementStyles=[],D.shadowRootOptions={mode:"open"},D[L("elementProperties")]=new Map,D[L("finalized")]=new Map,R?.({ReactiveElement:D}),(H.reactiveElementVersions??=[]).push("2.1.1");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
27
|
*/
|
|
28
|
-
const
|
|
28
|
+
const W={attribute:!0,type:String,converter:z,reflect:!1,hasChanged:j},q=(t=W,e,i)=>{const{kind:s,metadata:o}=i;let r=globalThis.litPropertyMetadata.get(o);if(void 0===r&&globalThis.litPropertyMetadata.set(o,r=new Map),"setter"===s&&((t=Object.create(t)).wrapped=!0),r.set(i.name,t),"accessor"===s){const{name:s}=i;return{set(i){const o=e.get.call(this);e.set.call(this,i),this.requestUpdate(s,o,t)},init(e){return void 0!==e&&this.C(s,void 0,t,e),e}}}if("setter"===s){const{name:s}=i;return function(i){const o=this[s];e.call(this,i),this.requestUpdate(s,o,t)}}throw Error("Unsupported decorator location: "+s)};function V(t){return(e,i)=>"object"==typeof i?q(t,e,i):((t,e,i)=>{const s=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),s?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
@@ -36,244 +36,16 @@ const N={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:q},H=(t=N,e,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function
|
|
40
|
-
<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
|
|
41
|
-
<m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring>
|
|
42
|
-
<m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>
|
|
43
|
-
<div class="touch" aria-hidden="true"></div>
|
|
44
|
-
<div class="wrapper">
|
|
45
|
-
<slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span>
|
|
46
|
-
</div>
|
|
47
|
-
</div>`}};J=new WeakMap,G=new WeakSet,Z=function(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation()),t.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[f].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},Q.styles=i`
|
|
48
|
-
:host {
|
|
49
|
-
display: inline-block;
|
|
50
|
-
outline: none;
|
|
51
|
-
user-select: none;
|
|
52
|
-
height: calc(var(--_tab-height) + ${p.density.calc(-3)});
|
|
53
|
-
font-size: var(--m3e-tab-font-size, ${p.typescale.standard.title.small.fontSize});
|
|
54
|
-
font-weight: var(--m3e-tab-font-weight, ${p.typescale.standard.title.small.fontWeight});
|
|
55
|
-
line-height: var(--m3e-tab-line-height, ${p.typescale.standard.title.small.lineHeight});
|
|
56
|
-
letter-spacing: var(--m3e-tab-tracking, ${p.typescale.standard.title.small.tracking});
|
|
57
|
-
flex-grow: var(--_tab-grow);
|
|
58
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
59
|
-
}
|
|
60
|
-
:host(:not(:disabled)) {
|
|
61
|
-
cursor: pointer;
|
|
62
|
-
}
|
|
63
|
-
.base {
|
|
64
|
-
box-sizing: border-box;
|
|
65
|
-
vertical-align: middle;
|
|
66
|
-
display: inline-flex;
|
|
67
|
-
align-items: center;
|
|
68
|
-
justify-content: center;
|
|
69
|
-
position: relative;
|
|
70
|
-
width: 100%;
|
|
71
|
-
height: 100%;
|
|
72
|
-
padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);
|
|
73
|
-
padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);
|
|
74
|
-
}
|
|
75
|
-
.touch {
|
|
76
|
-
position: absolute;
|
|
77
|
-
height: 3rem;
|
|
78
|
-
left: 0;
|
|
79
|
-
right: 0;
|
|
80
|
-
}
|
|
81
|
-
.focus-ring {
|
|
82
|
-
border-radius: var(--m3e-tab-focus-ring-shape, ${p.shape.corner.large});
|
|
83
|
-
}
|
|
84
|
-
:host([selected]:focus-within) .focus-ring {
|
|
85
|
-
top: var(--_tab-focus-ring-top-offset, 0);
|
|
86
|
-
bottom: var(--_tab-focus-ring-bottom-offset, 0);
|
|
87
|
-
}
|
|
88
|
-
:host([selected]:not(:disabled)) .base {
|
|
89
|
-
color: var(--m3e-tab-selected-color, ${p.color.primary});
|
|
90
|
-
--m3e-state-layer-hover-color: var(--m3e-tab-selected-container-hover-color, ${p.color.primary});
|
|
91
|
-
--m3e-state-layer-focus-color: var(--m3e-tab-selected-container-focus-color, ${p.color.primary});
|
|
92
|
-
--m3e-ripple-color: var(--m3e-tab-selected-ripple-color, ${p.color.primary});
|
|
93
|
-
}
|
|
94
|
-
:host(:not([selected]):not(:disabled)) .base {
|
|
95
|
-
color: var(--m3e-tab-unselected-color, ${p.color.onSurface});
|
|
96
|
-
--m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${p.color.onSurface});
|
|
97
|
-
--m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${p.color.onSurface});
|
|
98
|
-
--m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${p.color.onSurface});
|
|
99
|
-
}
|
|
100
|
-
:host(:disabled) .base {
|
|
101
|
-
color: color-mix(
|
|
102
|
-
in srgb,
|
|
103
|
-
var(--m3e-tab-disabled-color, ${p.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),
|
|
104
|
-
transparent
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
.wrapper {
|
|
108
|
-
display: inline-flex;
|
|
109
|
-
align-items: center;
|
|
110
|
-
white-space: nowrap;
|
|
111
|
-
flex-direction: var(--_tab-direction);
|
|
112
|
-
justify-content: center;
|
|
113
|
-
column-gap: var(--m3e-tab-spacing, 0.5rem);
|
|
114
|
-
}
|
|
115
|
-
::slotted([slot="icon"]) {
|
|
116
|
-
width: 1em;
|
|
117
|
-
font-size: var(--m3e-tab-icon-size, 1.5rem) !important;
|
|
118
|
-
}
|
|
119
|
-
@media (forced-colors: active) {
|
|
120
|
-
:host([selected]:not(:disabled)) .base {
|
|
121
|
-
color: ButtonText;
|
|
122
|
-
}
|
|
123
|
-
:host(:not([selected]):not(:disabled)) .base {
|
|
124
|
-
color: ButtonText;
|
|
125
|
-
}
|
|
126
|
-
:host(:disabled) .base {
|
|
127
|
-
color: GrayText;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
`,Q.__nextId=0,g([V(".focus-ring")],Q.prototype,"_focusRing",void 0),g([V(".state-layer")],Q.prototype,"_stateLayer",void 0),g([V(".ripple")],Q.prototype,"_ripple",void 0),g([V(".label")],Q.prototype,"label",void 0),Q=F=g([_("m3e-tab")],Q);let X=class extends(h(t,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return e`<slot></slot>`}};var Y,tt,et,it,st,ot,at,rt;X.styles=i`
|
|
131
|
-
:host {
|
|
132
|
-
display: block;
|
|
133
|
-
overflow-y: auto;
|
|
134
|
-
scrollbar-width: ${p.scrollbar.width};
|
|
135
|
-
scrollbar-color: ${p.scrollbar.color};
|
|
136
|
-
}
|
|
137
|
-
`,X=g([_("m3e-tab-panel")],X);let nt=class extends(d(t)){constructor(){super(),Y.add(this),this._selectedIndex=null,this[rt]=(new v).onSelectedItemsChange(()=>y(this,Y,"m",ot).call(this)).withHomeAndEnd().withWrap(),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new u(this,{skipInitial:!0,callback:()=>{this.classList.toggle("-no-animate",!0),y(this,Y,"m",at).call(this)}})}get tabs(){return this[f]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(t){if(t>=0&&t<this.tabs.length)this.tabs[t].selected=!0;else{const t=this.selectedTab;t&&(t.selected=!1)}}connectedCallback(){super.connectedCallback(),this.classList.toggle("-no-animate",!0)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&y(this,Y,"m",at).call(this)}render(){let t=null;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=null)),e` ${"before"===this.headerPosition?y(this,Y,"m",tt).call(this):s}
|
|
138
|
-
<m3e-slide class="tabs" .selectedIndex="${t}">
|
|
139
|
-
<slot name="panel"></slot>
|
|
140
|
-
</m3e-slide>
|
|
141
|
-
${"after"===this.headerPosition?y(this,Y,"m",tt).call(this):s}`}};Y=new WeakSet,rt=f,tt=function(){return e`<m3e-slide-group
|
|
142
|
-
class="tablist"
|
|
143
|
-
threshold="8"
|
|
144
|
-
previous-page-label="${this.previousPageLabel}"
|
|
145
|
-
next-page-label="${this.nextPageLabel}"
|
|
146
|
-
?disabled="${this.disablePagination}"
|
|
147
|
-
>
|
|
148
|
-
<slot name="prev-icon" slot="prev-icon">
|
|
149
|
-
<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor">
|
|
150
|
-
<path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z" />
|
|
151
|
-
</svg>
|
|
152
|
-
</slot>
|
|
153
|
-
<slot name="next-icon" slot="next-icon">
|
|
154
|
-
<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor">
|
|
155
|
-
<path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" />
|
|
156
|
-
</svg>
|
|
157
|
-
</slot>
|
|
158
|
-
<div class="header" role="tablist">
|
|
159
|
-
<div class="tabs">
|
|
160
|
-
<slot
|
|
161
|
-
@slotchange="${y(this,Y,"m",et)}"
|
|
162
|
-
@keydown="${y(this,Y,"m",it)}"
|
|
163
|
-
@change="${y(this,Y,"m",st)}"
|
|
164
|
-
></slot>
|
|
165
|
-
</div>
|
|
166
|
-
<div class="ink-bar" aria-hidden="true">
|
|
167
|
-
<div class="active-indicator"></div>
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
</m3e-slide-group>`},et=function(){this[f].setItems([...this.querySelectorAll("m3e-tab")])},it=function(t){this[f].onKeyDown(t)},st=function(t){t.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},ot=function(){const t=this[f].selectedItems[0];let e=t?this.tabs.indexOf(t):null;-1===e&&(e=null),this._selectedIndex=e,y(this,Y,"m",at).call(this)},at=function(){if(!this._tablist)return;const t=this[f].selectedItems[0];let e=0,i=0;if(t&&null!==this._selectedIndex){for(let t=0;t<this._selectedIndex;t++)e+=this.tabs[t].clientWidth;i=t.clientWidth,"primary"===this.variant&&t.label&&(e+=t.label.offsetLeft,i=t.label.clientWidth,i<24&&(e-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${e}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&this.classList.contains("-no-animate")&&setTimeout(()=>this.classList.toggle("-no-animate",!1))},nt.styles=i`
|
|
171
|
-
:host {
|
|
172
|
-
display: flex;
|
|
173
|
-
flex-direction: column;
|
|
174
|
-
position: relative;
|
|
175
|
-
}
|
|
176
|
-
.tablist {
|
|
177
|
-
position: relative;
|
|
178
|
-
box-sizing: border-box;
|
|
179
|
-
flex: none;
|
|
180
|
-
}
|
|
181
|
-
::slotted(prev-icon),
|
|
182
|
-
::slotted(next-icon),
|
|
183
|
-
.icon {
|
|
184
|
-
width: 1em;
|
|
185
|
-
font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;
|
|
186
|
-
}
|
|
187
|
-
.header {
|
|
188
|
-
display: flex;
|
|
189
|
-
flex-direction: column;
|
|
190
|
-
}
|
|
191
|
-
.tabs {
|
|
192
|
-
display: flex;
|
|
193
|
-
flex-wrap: nowrap;
|
|
194
|
-
align-items: center;
|
|
195
|
-
}
|
|
196
|
-
.ink-bar {
|
|
197
|
-
box-sizing: border-box;
|
|
198
|
-
height: var(--_tabs-active-indicator-thickness);
|
|
199
|
-
}
|
|
200
|
-
.active-indicator {
|
|
201
|
-
position: relative;
|
|
202
|
-
height: var(--_tabs-active-indicator-thickness);
|
|
203
|
-
left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));
|
|
204
|
-
width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));
|
|
205
|
-
background-color: var(--m3e-tabs-active-indicator-color, ${p.color.primary});
|
|
206
|
-
transition: ${o(`left var(--m3e-slide-animation-duration, ${p.motion.duration.long2}) ${p.motion.easing.standard},\n width var(--m3e-slide-animation-duration, ${p.motion.duration.long2}) ${p.motion.easing.standard}`)};
|
|
207
|
-
}
|
|
208
|
-
:host([header-position="after"]) .header {
|
|
209
|
-
flex-direction: column-reverse;
|
|
210
|
-
}
|
|
211
|
-
:host([header-position="before"]) .ink-bar {
|
|
212
|
-
margin-top: calc(0px - var(--_tabs-active-indicator-thickness));
|
|
213
|
-
}
|
|
214
|
-
:host([header-position="before"]) .tablist {
|
|
215
|
-
--m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid
|
|
216
|
-
var(--m3e-divider-color, ${p.color.outlineVariant});
|
|
217
|
-
}
|
|
218
|
-
:host([header-position="after"]) .ink-bar {
|
|
219
|
-
margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));
|
|
220
|
-
}
|
|
221
|
-
:host([header-position="after"]) .tablist {
|
|
222
|
-
--m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid
|
|
223
|
-
var(--m3e-divider-color, ${p.color.outlineVariant});
|
|
224
|
-
}
|
|
225
|
-
:host([header-position="before"][variant="primary"]) .active-indicator {
|
|
226
|
-
border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${p.shape.corner.extraSmallTop});
|
|
227
|
-
}
|
|
228
|
-
:host([header-position="after"][variant="primary"]) .active-indicator {
|
|
229
|
-
border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${p.shape.corner.extraSmallBottom});
|
|
230
|
-
}
|
|
231
|
-
.tabs {
|
|
232
|
-
flex: 1 1 auto;
|
|
233
|
-
}
|
|
234
|
-
:host([variant="primary"]) .tablist {
|
|
235
|
-
--_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);
|
|
236
|
-
--_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 0.1875rem);
|
|
237
|
-
--_tab-height: 4rem;
|
|
238
|
-
}
|
|
239
|
-
:host([header-position="before"]) .tablist {
|
|
240
|
-
--_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);
|
|
241
|
-
}
|
|
242
|
-
:host([header-position="after"]) .tablist {
|
|
243
|
-
--_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);
|
|
244
|
-
}
|
|
245
|
-
:host([header-position="before"][variant="primary"]) .tablist {
|
|
246
|
-
--_tab-direction: column;
|
|
247
|
-
}
|
|
248
|
-
:host([header-position="after"][variant="primary"]) .tablist {
|
|
249
|
-
--_tab-direction: column-reverse;
|
|
250
|
-
}
|
|
251
|
-
:host([variant="secondary"]) .tablist {
|
|
252
|
-
--_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 0.125rem);
|
|
253
|
-
--_tab-height: 3rem;
|
|
254
|
-
}
|
|
255
|
-
:host([stretch]) .header {
|
|
256
|
-
width: 100%;
|
|
257
|
-
--_tab-grow: 1;
|
|
258
|
-
}
|
|
259
|
-
:host(.-no-animate) .active-indicator {
|
|
260
|
-
transition: none;
|
|
261
|
-
}
|
|
262
|
-
@media (prefers-reduced-motion) {
|
|
263
|
-
.active-indicator {
|
|
264
|
-
transition: none;
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
@media (forced-colors: active) {
|
|
268
|
-
.active-indicator {
|
|
269
|
-
background-color: ButtonText;
|
|
270
|
-
--m3e-divider-color: GrayText;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
`,g([V(".tablist")],nt.prototype,"_tablist",void 0),g([function(t){return K({...t,state:!0,attribute:!1})}
|
|
39
|
+
function Z(t,e){return(e,i,s)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}var K,G,J,F;let Q=F=class extends(r(a(n(l(c(h(d(t,"tab"),!0))))))){constructor(){super(...arguments),K.add(this),G.set(this,t=>_(this,K,"m",J).call(this,t))}attach(t){super.attach(t),t.id=t.id||"m3e-tab-panel-"+F.__nextId++,b(this,"aria-controls",t.id)}detach(){this.control&&this.control.id&&m(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",_(this,G,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",_(this,G,"f"))}firstUpdated(t){super.firstUpdated(t),[this._focusRing,this._stateLayer,this._ripple].forEach(t=>t?.attach(this))}update(t){super.update(t),t.has("selected")&&this.closest("m3e-tabs")?.[f].notifySelectionChange(this)}render(){return e`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span></div></div>`}};G=new WeakMap,K=new WeakSet,J=function(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation()),t.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[f].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},Q.styles=i`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${p.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${p.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${p.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${p.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${p.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${p.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, ${p.color.primary}); --m3e-state-layer-hover-color: var(--m3e-tab-selected-container-hover-color, ${p.color.primary}); --m3e-state-layer-focus-color: var(--m3e-tab-selected-container-focus-color, ${p.color.primary}); --m3e-ripple-color: var(--m3e-tab-selected-ripple-color, ${p.color.primary}); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${p.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${p.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${p.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${p.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${p.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`,Q.__nextId=0,$([Z(".focus-ring")],Q.prototype,"_focusRing",void 0),$([Z(".state-layer")],Q.prototype,"_stateLayer",void 0),$([Z(".ripple")],Q.prototype,"_ripple",void 0),$([Z(".label")],Q.prototype,"label",void 0),Q=F=$([y("m3e-tab")],Q);let X=class extends(d(t,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return e`<slot></slot>`}};X.styles=i`:host { display: block; overflow-y: auto; scrollbar-width: ${p.scrollbar.width}; scrollbar-color: ${p.scrollbar.color}; }`,X=$([y("m3e-tab-panel")],X);
|
|
274
40
|
/**
|
|
275
41
|
* @license
|
|
276
42
|
* Copyright 2017 Google LLC
|
|
277
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
278
|
-
*/
|
|
44
|
+
*/
|
|
45
|
+
const Y=globalThis,tt=Y.trustedTypes,et=tt?tt.createPolicy("lit-html",{createHTML:t=>t}):void 0,it="$lit$",st=`lit$${Math.random().toFixed(9).slice(2)}$`,ot="?"+st,rt=`<${ot}>`,at=document,nt=()=>at.createComment(""),lt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,ct=Array.isArray,ht="[ \t\n\f\r]",dt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,pt=/-->/g,ut=/>/g,bt=RegExp(`>|${ht}(?:([^\\s"'>=/]+)(${ht}*=${ht}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),mt=/'/g,ft=/"/g,vt=/^(?:script|style|textarea|title)$/i,gt=Symbol.for("lit-noChange"),$t=Symbol.for("lit-nothing"),_t=new WeakMap,yt=at.createTreeWalker(at,129);function At(t,e){if(!ct(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==et?et.createHTML(e):e}const wt=(t,e)=>{const i=t.length-1,s=[];let o,r=2===e?"<svg>":3===e?"<math>":"",a=dt;for(let e=0;e<i;e++){const i=t[e];let n,l,c=-1,h=0;for(;h<i.length&&(a.lastIndex=h,l=a.exec(i),null!==l);)h=a.lastIndex,a===dt?"!--"===l[1]?a=pt:void 0!==l[1]?a=ut:void 0!==l[2]?(vt.test(l[2])&&(o=RegExp("</"+l[2],"g")),a=bt):void 0!==l[3]&&(a=bt):a===bt?">"===l[0]?(a=o??dt,c=-1):void 0===l[1]?c=-2:(c=a.lastIndex-l[2].length,n=l[1],a=void 0===l[3]?bt:'"'===l[3]?ft:mt):a===ft||a===mt?a=bt:a===pt||a===ut?a=dt:(a=bt,o=void 0);const d=a===bt&&t[e+1].startsWith("/>")?" ":"";r+=a===dt?i+rt:c>=0?(s.push(n),i.slice(0,c)+it+i.slice(c)+st+d):i+st+(-2===c?e:d)}return[At(t,r+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]};class xt{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,r=0;const a=t.length-1,n=this.parts,[l,c]=wt(t,e);if(this.el=xt.createElement(l,i),yt.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=yt.nextNode())&&n.length<a;){if(1===s.nodeType){if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(it)){const e=c[r++],i=s.getAttribute(t).split(st),a=/([.?@])?(.*)/.exec(e);n.push({type:1,index:o,name:a[2],strings:i,ctor:"."===a[1]?kt:"?"===a[1]?Tt:"@"===a[1]?Ut:Ct}),s.removeAttribute(t)}else t.startsWith(st)&&(n.push({type:6,index:o}),s.removeAttribute(t));if(vt.test(s.tagName)){const t=s.textContent.split(st),e=t.length-1;if(e>0){s.textContent=tt?tt.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],nt()),yt.nextNode(),n.push({type:2,index:++o});s.append(t[e],nt())}}}else if(8===s.nodeType)if(s.data===ot)n.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(st,t+1));)n.push({type:7,index:o}),t+=st.length-1}o++}}static createElement(t,e){const i=at.createElement("template");return i.innerHTML=t,i}}function Et(t,e,i=t,s){if(e===gt)return e;let o=void 0!==s?i._$Co?.[s]:i._$Cl;const r=lt(e)?void 0:e._$litDirective$;return o?.constructor!==r&&(o?._$AO?.(!1),void 0===r?o=void 0:(o=new r(t),o._$AT(t,i,s)),void 0!==s?(i._$Co??=[])[s]=o:i._$Cl=o),void 0!==o&&(e=Et(t,o._$AS(t,e.values),o,s)),e}class St{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,s=(t?.creationScope??at).importNode(e,!0);yt.currentNode=s;let o=yt.nextNode(),r=0,a=0,n=i[0];for(;void 0!==n;){if(r===n.index){let e;2===n.type?e=new Pt(o,o.nextSibling,this,t):1===n.type?e=new n.ctor(o,n.name,n.strings,this,t):6===n.type&&(e=new Ot(o,this,t)),this._$AV.push(e),n=i[++a]}r!==n?.index&&(o=yt.nextNode(),r++)}return yt.currentNode=at,s}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class Pt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,s){this.type=2,this._$AH=$t,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Et(this,t,e),lt(t)?t===$t||null==t||""===t?(this._$AH!==$t&&this._$AR(),this._$AH=$t):t!==this._$AH&&t!==gt&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>ct(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==$t&<(this._$AH)?this._$AA.nextSibling.data=t:this.T(at.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,s="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=xt.createElement(At(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(e);else{const t=new St(s,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=_t.get(t.strings);return void 0===e&&_t.set(t.strings,e=new xt(t)),e}k(t){ct(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const o of t)s===e.length?e.push(i=new Pt(this.O(nt()),this.O(nt()),this,this.options)):i=e[s],i._$AI(o),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class Ct{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,s,o){this.type=1,this._$AH=$t,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=$t}_$AI(t,e=this,i,s){const o=this.strings;let r=!1;if(void 0===o)t=Et(this,t,e,0),r=!lt(t)||t!==this._$AH&&t!==gt,r&&(this._$AH=t);else{const s=t;let a,n;for(t=o[0],a=0;a<o.length-1;a++)n=Et(this,s[i+a],e,a),n===gt&&(n=this._$AH[a]),r||=!lt(n)||n!==this._$AH[a],n===$t?t=$t:t!==$t&&(t+=(n??"")+o[a+1]),this._$AH[a]=n}r&&!s&&this.j(t)}j(t){t===$t?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class kt extends Ct{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===$t?void 0:t}}class Tt extends Ct{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==$t)}}class Ut extends Ct{constructor(t,e,i,s,o){super(t,e,i,s,o),this.type=5}_$AI(t,e=this){if((t=Et(this,t,e,0)??$t)===gt)return;const i=this._$AH,s=t===$t&&i!==$t||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==$t&&(i===$t||s);s&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class Ot{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Et(this,t)}}const Mt=Y.litHtmlPolyfillSupport;Mt?.(xt,Pt),(Y.litHtmlVersions??=[]).push("3.3.1");var Ht,Nt,It,Rt,Lt,zt,jt,Bt,Dt;let Wt=class extends(h(t)){constructor(){super(),Ht.add(this),Nt.set(this,void 0),this._selectedIndex=null,this[Dt]=(new v).onSelectedItemsChange(()=>_(this,Ht,"m",jt).call(this)).withHomeAndEnd().withWrap().withDirectionality(g.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new u(this,{skipInitial:!0,callback:()=>{this.classList.toggle("-no-animate",!0),_(this,Ht,"m",Bt).call(this)}})}get tabs(){return this[f]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(t){if(t>=0&&t<this.tabs.length)this.tabs[t].selected=!0;else{const t=this.selectedTab;t&&(t.selected=!1)}}connectedCallback(){super.connectedCallback(),this.classList.toggle("-no-animate",!0),function(t,e,i,s,o){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!o:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===s?o.call(t,i):o?o.value=i:e.set(t,i)}(this,Nt,g.observe(()=>{this.requestUpdate(),this[f].directionality=g.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),_(this,Nt,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&_(this,Ht,"m",Bt).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),e`${"before"===this.headerPosition?_(this,Ht,"m",It).call(this):s}<m3e-slide class="tabs" selected-index="${(t=>t??$t)(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?_(this,Ht,"m",It).call(this):s}`}};Nt=new WeakMap,Ht=new WeakSet,Dt=f,It=function(){return e`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===g.current?e`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:e`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===g.current?e`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:e`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${_(this,Ht,"m",Rt)}" @keydown="${_(this,Ht,"m",Lt)}" @change="${_(this,Ht,"m",zt)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},Rt=function(){this[f].setItems([...this.querySelectorAll("m3e-tab")])},Lt=function(t){this[f].onKeyDown(t)},zt=function(t){t.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},jt=function(){const t=this[f].selectedItems[0];let e=t?this.tabs.indexOf(t):null;-1===e&&(e=null),this._selectedIndex=e,_(this,Ht,"m",Bt).call(this)},Bt=function(){if(!this._tablist)return;const t=this[f].selectedItems[0];let e=0,i=0;if(t&&null!==this._selectedIndex){for(let t=0;t<this._selectedIndex;t++)e+=this.tabs[t].clientWidth;i=t.clientWidth,"primary"===this.variant&&t.label&&(e+=t.label.offsetLeft,i=t.label.clientWidth,i<24&&(e-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${e}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&this.classList.contains("-no-animate")&&setTimeout(()=>this.classList.toggle("-no-animate",!1))},Wt.styles=i`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${p.color.primary}); transition: ${o(`left var(--m3e-slide-animation-duration, ${p.motion.duration.long2}) ${p.motion.easing.standard},\n width var(--m3e-slide-animation-duration, ${p.motion.duration.long2}) ${p.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${p.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${p.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${p.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${p.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 0.1875rem); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 0.125rem); --_tab-height: 3rem; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(.-no-animate) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`,$([Z(".tablist")],Wt.prototype,"_tablist",void 0),$([function(t){return V({...t,state:!0,attribute:!1})}
|
|
46
|
+
/**
|
|
47
|
+
* @license
|
|
48
|
+
* Copyright 2017 Google LLC
|
|
49
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
50
|
+
*/()],Wt.prototype,"_selectedIndex",void 0),$([V({attribute:"disable-pagination",type:Boolean})],Wt.prototype,"disablePagination",void 0),$([V({attribute:"header-position",reflect:!0})],Wt.prototype,"headerPosition",void 0),$([V({reflect:!0})],Wt.prototype,"variant",void 0),$([V({type:Boolean,reflect:!0})],Wt.prototype,"stretch",void 0),$([V({attribute:"previous-page-label"})],Wt.prototype,"previousPageLabel",void 0),$([V({attribute:"next-page-label"})],Wt.prototype,"nextPageLabel",void 0),Wt=$([y("m3e-tabs")],Wt);export{Q as M3eTabElement,X as M3eTabPanelElement,Wt as M3eTabsElement};
|
|
279
51
|
//# sourceMappingURL=index.min.js.map
|