@kyndryl-design-system/shidoka-applications 1.20.2 → 1.20.3
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 +2 -2
- package/components/global/header/header.scss.js +1 -2
- package/components/global/header/header.scss.js.map +1 -1
- package/components/global/header/headerFlyout.d.ts +1 -10
- package/components/global/header/headerFlyout.d.ts.map +1 -1
- package/components/global/header/headerFlyout.js +8 -16
- package/components/global/header/headerFlyout.js.map +1 -1
- package/components/global/header/headerFlyout.scss.js +1 -2
- package/components/global/header/headerFlyout.scss.js.map +1 -1
- package/components/global/header/headerFlyouts.scss.js +1 -2
- package/components/global/header/headerFlyouts.scss.js.map +1 -1
- package/components/global/header/headerLink.scss.js +1 -2
- package/components/global/header/headerLink.scss.js.map +1 -1
- package/components/global/header/headerNav.d.ts +0 -10
- package/components/global/header/headerNav.d.ts.map +1 -1
- package/components/global/header/headerNav.js +5 -11
- package/components/global/header/headerNav.js.map +1 -1
- package/components/global/header/headerNav.scss.js +1 -2
- package/components/global/header/headerNav.scss.js.map +1 -1
- package/components/global/header/headerPanel.scss.js +1 -2
- package/components/global/header/headerPanel.scss.js.map +1 -1
- package/components/global/localNav/localNav.d.ts.map +1 -1
- package/components/global/localNav/localNav.js +4 -4
- package/components/global/localNav/localNav.js.map +1 -1
- package/components/global/localNav/localNav.scss.js +16 -9
- package/components/global/localNav/localNav.scss.js.map +1 -1
- package/package.json +1 -1
- package/external/@carbon/icons/es/side-panel--close/24.js +0 -2
- package/external/@carbon/icons/es/side-panel--close/24.js.map +0 -1
package/README.md
CHANGED
|
@@ -102,9 +102,9 @@ You can get around this in by not declaring Shidoka components as dependencies,
|
|
|
102
102
|
|
|
103
103
|
For example, from the shidoka-applications rollup.js config using [the external option](https://rollupjs.org/configuration-options/#external): `external: [/shidoka-foundation\/components/]`. Since shidoka-foundation components are used within shidoka-applications components, this prevents the foundation components from being bundled, meaning it leaves the import statements unaltered (ex: `import '@kyndryl-design-system/...'`). This way, the application bundler can handle it instead.
|
|
104
104
|
|
|
105
|
-
This works with bundling from node_modules, but not with CDN hosted files since the deployed application
|
|
105
|
+
This works with bundling from node_modules, but not with CDN hosted files since the deployed application won't know how to resolve aliased node_modules imports ex: `import '@kyndryl-design-system/...'`. In this case, you probably need a workaround.
|
|
106
106
|
|
|
107
107
|
#### Workaround
|
|
108
108
|
|
|
109
109
|
If for some reason the above suggestion does not help, there is a library containing a script/polyfill that can be used which allows custom elements to be redefined:
|
|
110
|
-
https://github.com/caridy/redefine-custom-elements.
|
|
110
|
+
https://github.com/caridy/redefine-custom-elements. We've found that this script works best when served from the app's `<head>` tag.
|
|
@@ -66,13 +66,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
66
66
|
bottom: 0;
|
|
67
67
|
left: 0;
|
|
68
68
|
z-index: -2;
|
|
69
|
-
backdrop-filter: blur(1px);
|
|
70
69
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
71
70
|
background: transparent;
|
|
72
71
|
visibility: hidden;
|
|
73
72
|
}
|
|
74
73
|
.open + .overlay {
|
|
75
|
-
background: var(--kd-color-
|
|
74
|
+
background: var(--kd-color-dark-opacity-40);
|
|
76
75
|
visibility: visible;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -33,20 +33,11 @@ export declare class HeaderFlyout extends LitElement {
|
|
|
33
33
|
* @ignore
|
|
34
34
|
*/
|
|
35
35
|
slottedElements: Array<HTMLElement>;
|
|
36
|
-
/** Timeout function to delay flyout open.
|
|
37
|
-
* @internal
|
|
38
|
-
*/
|
|
39
|
-
_enterTimer: any;
|
|
40
|
-
/** Timeout function to delay modal close.
|
|
41
|
-
* @internal
|
|
42
|
-
*/
|
|
43
|
-
_leaveTimer: any;
|
|
44
36
|
render(): import("lit-html").TemplateResult<1>;
|
|
45
37
|
private _handleBack;
|
|
46
|
-
private handlePointerEnter;
|
|
47
|
-
private handlePointerLeave;
|
|
48
38
|
private handleClick;
|
|
49
39
|
private handleClickOut;
|
|
40
|
+
private _handleOverlayClick;
|
|
50
41
|
connectedCallback(): void;
|
|
51
42
|
disconnectedCallback(): void;
|
|
52
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAEnE;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,2BAA2B;IAE3B,KAAK,SAAM;IAEX,oDAAoD;IAEpD,aAAa,UAAS;IAEtB,2CAA2C;IAE3C,eAAe,UAAS;IAExB;;;OAGG;IAEH,aAAa,SAAM;IAEnB,oCAAoC;IAEpC,IAAI,SAAM;IAEV,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IAqFf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,mBAAmB;IAIlB,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as
|
|
2
|
-
<div class="${
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as o}from'./../../../external/@lit/reactive-element/decorators/property.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as n}from'./../../../external/lit-html/directives/class-map.js';import a from"./headerFlyout.scss.js";import r from'./../../../external/@carbon/icons/es/chevron--right/16.js';import c from'./../../../external/@carbon/icons/es/arrow--left/16.js';import"@kyndryl-design-system/shidoka-foundation/components/icon";let d=class extends s{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.label="",this.hideMenuLabel=!1,this.hideButtonLabel=!1,this.assistiveText="",this.href="",this.backText="Back"}render(){const e={menu:!0,open:this.open},s={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return t`
|
|
2
|
+
<div class="${n(e)}">
|
|
3
3
|
${""!==this.href?t`
|
|
4
4
|
<a
|
|
5
5
|
class="btn interactive"
|
|
@@ -7,8 +7,6 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
7
7
|
title=${this.label||this.assistiveText}
|
|
8
8
|
aria-label=${this.label||this.assistiveText}
|
|
9
9
|
@click=${this.handleClick}
|
|
10
|
-
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
11
|
-
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
12
10
|
>
|
|
13
11
|
<slot name="button"></slot>
|
|
14
12
|
|
|
@@ -21,7 +19,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
21
19
|
<kd-icon
|
|
22
20
|
slot="button"
|
|
23
21
|
class="arrow"
|
|
24
|
-
.icon="${
|
|
22
|
+
.icon="${r}"
|
|
25
23
|
></kd-icon>
|
|
26
24
|
</a>
|
|
27
25
|
`:t`
|
|
@@ -30,8 +28,6 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
30
28
|
title=${this.label||this.assistiveText}
|
|
31
29
|
aria-label=${this.label||this.assistiveText}
|
|
32
30
|
@click=${this.handleClick}
|
|
33
|
-
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
34
|
-
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
35
31
|
>
|
|
36
32
|
<slot name="button"></slot>
|
|
37
33
|
|
|
@@ -44,16 +40,12 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
44
40
|
<kd-icon
|
|
45
41
|
slot="button"
|
|
46
42
|
class="arrow"
|
|
47
|
-
.icon="${
|
|
43
|
+
.icon="${r}"
|
|
48
44
|
></kd-icon>
|
|
49
45
|
</button>
|
|
50
46
|
`}
|
|
51
47
|
|
|
52
|
-
<div
|
|
53
|
-
class=${a(i)}
|
|
54
|
-
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
55
|
-
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
56
|
-
>
|
|
48
|
+
<div class=${n(s)}>
|
|
57
49
|
${this.hideMenuLabel?null:t`
|
|
58
50
|
<div class="menu-label">
|
|
59
51
|
${this.label||this.assistiveText}
|
|
@@ -61,12 +53,12 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
61
53
|
`}
|
|
62
54
|
|
|
63
55
|
<button class="go-back" @click=${()=>this._handleBack()}>
|
|
64
|
-
<kd-icon .icon=${
|
|
56
|
+
<kd-icon .icon=${c}></kd-icon>
|
|
65
57
|
${this.backText}
|
|
66
58
|
</button>
|
|
67
59
|
<slot></slot>
|
|
68
60
|
</div>
|
|
69
61
|
</div>
|
|
70
|
-
<div class="overlay"></div>
|
|
71
|
-
`}_handleBack(){this.open=!1}
|
|
62
|
+
<div class="overlay" @click=${this._handleOverlayClick}></div>
|
|
63
|
+
`}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),super.disconnectedCallback()}};d.styles=a,e([o({type:Boolean})],d.prototype,"open",void 0),e([o({type:Boolean})],d.prototype,"anchorLeft",void 0),e([o({type:Boolean})],d.prototype,"hideArrow",void 0),e([o({type:String})],d.prototype,"label",void 0),e([o({type:Boolean})],d.prototype,"hideMenuLabel",void 0),e([o({type:Boolean})],d.prototype,"hideButtonLabel",void 0),e([o({type:String})],d.prototype,"assistiveText",void 0),e([o({type:String})],d.prototype,"href",void 0),e([o({type:String})],d.prototype,"backText",void 0),e([l()],d.prototype,"slottedElements",void 0),d=e([i("kyn-header-flyout")],d);export{d as HeaderFlyout};
|
|
72
64
|
//# sourceMappingURL=headerFlyout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n
|
|
1
|
+
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderFlyoutScss from './headerFlyout.scss';\nimport chevronIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n static override styles = HeaderFlyoutScss;\n\n /** Flyout open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n hideArrow = false;\n\n /** Menu & button label. */\n @property({ type: String })\n label = '';\n\n /** Hide the label at the top of the flyout menu. */\n @property({ type: Boolean })\n hideMenuLabel = false;\n\n /** Hide the label in the mobile button. */\n @property({ type: Boolean })\n hideButtonLabel = false;\n\n /**\n * DEPRECATED. Use `label` instead.\n * Button assistive text, title + aria-label.\n */\n @property({ type: String })\n assistiveText = '';\n\n /** Turns the button into a link. */\n @property({ type: String })\n href = '';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n open: this.open,\n };\n\n const contentClasses = {\n menu__content: true,\n 'menu__content--left': this.anchorLeft,\n slotted: this.slottedElements.length,\n };\n\n return html`\n <div class=\"${classMap(classes)}\">\n ${this.href !== ''\n ? html`\n <a\n class=\"btn interactive\"\n href=${this.href}\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <kd-icon\n slot=\"button\"\n class=\"arrow\"\n .icon=\"${chevronIcon}\"\n ></kd-icon>\n </a>\n `\n : html`\n <button\n class=\"btn interactive\"\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <kd-icon\n slot=\"button\"\n class=\"arrow\"\n .icon=\"${chevronIcon}\"\n ></kd-icon>\n </button>\n `}\n\n <div class=${classMap(contentClasses)}>\n ${!this.hideMenuLabel\n ? html`\n <div class=\"menu-label\">\n ${this.label || this.assistiveText}\n </div>\n `\n : null}\n\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <kd-icon .icon=${backIcon}></kd-icon>\n ${this.backText}\n </button>\n <slot></slot>\n </div>\n </div>\n <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n `;\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private handleClick() {\n this.open = !this.open;\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n private _handleOverlayClick() {\n this.open = false;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyout': HeaderFlyout;\n }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","label","hideMenuLabel","hideButtonLabel","assistiveText","href","backText","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","handleClick","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","customElement"],"mappings":"+5BAmBO,IAAMA,EAAN,cAA2BC,EAA3B,WAAAC,uBAKLC,KAAIC,MAAG,EAIPD,KAAUE,YAAG,EAIbF,KAASG,WAAG,EAIZH,KAAKI,MAAG,GAIRJ,KAAaK,eAAG,EAIhBL,KAAeM,iBAAG,EAOlBN,KAAaO,cAAG,GAIhBP,KAAIQ,KAAG,GAIPR,KAAQS,SAAG,MA2HZ,CAlHU,MAAAC,GACP,MAAMC,EAAU,CACdC,MAAM,EACNX,KAAMD,KAAKC,MAGPY,EAAiB,CACrBC,eAAe,EACf,sBAAuBd,KAAKE,WAC5Ba,QAASf,KAAKgB,gBAAgBC,QAGhC,OAAOC,CAAI;oBACKC,EAASR;UACL,KAAdX,KAAKQ,KACHU,CAAI;;;uBAGOlB,KAAKQ;wBACJR,KAAKI,OAASJ,KAAKO;6BACdP,KAAKI,OAASJ,KAAKO;yBACvBP,KAAKoB;;;;kBAIXpB,KAAKM,gBAMJ,KALAY,CAAI;;0BAEElB,KAAKI,OAASJ,KAAKO;;;;;;;2BAQlBc;;;cAIfH,CAAI;;;wBAGQlB,KAAKI,OAASJ,KAAKO;6BACdP,KAAKI,OAASJ,KAAKO;yBACvBP,KAAKoB;;;;kBAIXpB,KAAKM,gBAMJ,KALAY,CAAI;;0BAEElB,KAAKI,OAASJ,KAAKO;;;;;;;2BAQlBc;;;;;qBAKNF,EAASN;YACjBb,KAAKK,cAMJ,KALAa,CAAI;;oBAEElB,KAAKI,OAASJ,KAAKO;;;;2CAKI,IAAMP,KAAKsB;6BACzBC;cACfvB,KAAKS;;;;;oCAKiBT,KAAKwB;KAEtC,CAEO,WAAAF,GACNtB,KAAKC,MAAO,CACb,CAEO,WAAAmB,GACNpB,KAAKC,MAAQD,KAAKC,IACnB,CAEO,cAAAwB,CAAeC,GAChBA,EAAEC,eAAeC,SAAS5B,QAC7BA,KAAKC,MAAO,EAEf,CAEO,mBAAAuB,GACNxB,KAAKC,MAAO,CACb,CAEQ,iBAAA4B,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUN,GAAM1B,KAAKyB,eAAeC,IAC/D,CAEQ,oBAAAO,GACPF,SAASG,oBAAoB,SAAUR,GAAM1B,KAAKyB,eAAeC,KAEjEI,MAAMG,sBACP,GAjKepC,EAAMsC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3C,EAAA4C,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC3C,EAAA4C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACA3C,EAAA4C,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACP7C,EAAA4C,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACI3C,EAAA4C,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACM3C,EAAA4C,UAAA,uBAAA,GAOxBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACC7C,EAAA4C,UAAA,qBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACR7C,EAAA4C,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACA7C,EAAA4C,UAAA,gBAAA,GAOlBJ,EAAA,CADCM,KACoC9C,EAAA4C,UAAA,uBAAA,GA/C1B5C,EAAYwC,EAAA,CADxBO,EAAc,sBACF/C"}
|
|
@@ -66,13 +66,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
66
66
|
bottom: 0;
|
|
67
67
|
left: 0;
|
|
68
68
|
z-index: -2;
|
|
69
|
-
backdrop-filter: blur(1px);
|
|
70
69
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
71
70
|
background: transparent;
|
|
72
71
|
visibility: hidden;
|
|
73
72
|
}
|
|
74
73
|
.open + .overlay {
|
|
75
|
-
background: var(--kd-color-
|
|
74
|
+
background: var(--kd-color-dark-opacity-40);
|
|
76
75
|
visibility: visible;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerFlyout.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -66,13 +66,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
66
66
|
bottom: 0;
|
|
67
67
|
left: 0;
|
|
68
68
|
z-index: -2;
|
|
69
|
-
backdrop-filter: blur(1px);
|
|
70
69
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
71
70
|
background: transparent;
|
|
72
71
|
visibility: hidden;
|
|
73
72
|
}
|
|
74
73
|
.open + .overlay {
|
|
75
|
-
background: var(--kd-color-
|
|
74
|
+
background: var(--kd-color-dark-opacity-40);
|
|
76
75
|
visibility: visible;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyouts.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerFlyouts.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -66,13 +66,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
66
66
|
bottom: 0;
|
|
67
67
|
left: 0;
|
|
68
68
|
z-index: -2;
|
|
69
|
-
backdrop-filter: blur(1px);
|
|
70
69
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
71
70
|
background: transparent;
|
|
72
71
|
visibility: hidden;
|
|
73
72
|
}
|
|
74
73
|
.open + .overlay {
|
|
75
|
-
background: var(--kd-color-
|
|
74
|
+
background: var(--kd-color-dark-opacity-40);
|
|
76
75
|
visibility: visible;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerLink.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerLink.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,17 +11,7 @@ export declare class HeaderNav extends LitElement {
|
|
|
11
11
|
menuOpen: boolean;
|
|
12
12
|
/** Force correct slot */
|
|
13
13
|
slot: string;
|
|
14
|
-
/** Timeout function to delay flyout open.
|
|
15
|
-
* @internal
|
|
16
|
-
*/
|
|
17
|
-
_enterTimer: any;
|
|
18
|
-
/** Timeout function to delay flyout close.
|
|
19
|
-
* @internal
|
|
20
|
-
*/
|
|
21
|
-
_leaveTimer: any;
|
|
22
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
23
|
-
private _handlePointerEnter;
|
|
24
|
-
private _handlePointerLeave;
|
|
25
15
|
private _toggleMenuOpen;
|
|
26
16
|
private _handleClickOut;
|
|
27
17
|
private _handleOverlayClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC;;;GAGG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,+BAAiB;IAEvC;;OAEG;IAEH,QAAQ,UAAS;IAEjB,yBAAyB;IAEhB,IAAI,SAAU;
|
|
1
|
+
{"version":3,"file":"headerNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC;;;GAGG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,+BAAiB;IAEvC;;OAEG;IAEH,QAAQ,UAAS;IAEjB,yBAAyB;IAEhB,IAAI,SAAU;IAEd,MAAM;IA4Bf,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,mBAAmB;IAIlB,UAAU,CAAC,YAAY,EAAE,GAAG;IAW5B,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}
|
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as n}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as
|
|
2
|
-
<div class=${
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as n}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as l}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as i}from'./../../../external/lit-html/directives/class-map.js';import c from"./headerNav.scss.js";import m from'./../../../external/@carbon/icons/es/menu/24.js';import r from'./../../../external/@carbon/icons/es/close/24.js';let a=class extends n{constructor(){super(...arguments),this.menuOpen=!1,this.slot="left"}render(){const e={"header-nav":!0,menu:!0,open:this.menuOpen};return t`
|
|
2
|
+
<div class=${i(e)}>
|
|
3
3
|
<button
|
|
4
4
|
class="btn interactive"
|
|
5
5
|
aria-label="Toggle Menu"
|
|
6
6
|
title="Toggle Menu"
|
|
7
7
|
@click=${()=>this._toggleMenuOpen()}
|
|
8
|
-
@pointerenter=${e=>this._handlePointerEnter(e)}
|
|
9
|
-
@pointerleave=${e=>this._handlePointerLeave(e)}
|
|
10
8
|
>
|
|
11
|
-
${this.menuOpen?t` <kd-icon .icon=${
|
|
9
|
+
${this.menuOpen?t` <kd-icon .icon=${r}></kd-icon> `:t` <kd-icon .icon=${m}></kd-icon> `}
|
|
12
10
|
</button>
|
|
13
11
|
|
|
14
|
-
<div
|
|
15
|
-
class="menu__content left"
|
|
16
|
-
@pointerenter=${e=>this._handlePointerEnter(e)}
|
|
17
|
-
@pointerleave=${e=>this._handlePointerLeave(e)}
|
|
18
|
-
>
|
|
12
|
+
<div class="menu__content left">
|
|
19
13
|
<slot></slot>
|
|
20
14
|
</div>
|
|
21
15
|
</div>
|
|
22
16
|
<div class="overlay" @click=${this._handleOverlayClick}></div>
|
|
23
|
-
`}
|
|
17
|
+
`}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}_handleOverlayClick(){this.menuOpen=!1}willUpdate(e){if(e.has("menuOpen")){const e=new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:{open:this.menuOpen}});this.dispatchEvent(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};a.styles=c,e([l()],a.prototype,"menuOpen",void 0),e([s({type:String,reflect:!0})],a.prototype,"slot",void 0),a=e([o("kyn-header-nav")],a);export{a as HeaderNav};
|
|
24
18
|
//# sourceMappingURL=headerNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderNavScss from './headerNav.scss';\n\nimport menuIcon from '@carbon/icons/es/menu/24';\nimport closeIcon from '@carbon/icons/es/close/24';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n static override styles = HeaderNavScss;\n\n /** Small screen header nav visibility.\n * @ignore\n */\n @state()\n menuOpen = false;\n\n /** Force correct slot */\n @property({ type: String, reflect: true })\n override slot = 'left';\n\n
|
|
1
|
+
{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderNavScss from './headerNav.scss';\n\nimport menuIcon from '@carbon/icons/es/menu/24';\nimport closeIcon from '@carbon/icons/es/close/24';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n static override styles = HeaderNavScss;\n\n /** Small screen header nav visibility.\n * @ignore\n */\n @state()\n menuOpen = false;\n\n /** Force correct slot */\n @property({ type: String, reflect: true })\n override slot = 'left';\n\n override render() {\n const classes = {\n 'header-nav': true,\n menu: true,\n open: this.menuOpen,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleMenuOpen()}\n >\n ${this.menuOpen\n ? html` <kd-icon .icon=${closeIcon}></kd-icon> `\n : html` <kd-icon .icon=${menuIcon}></kd-icon> `}\n </button>\n\n <div class=\"menu__content left\">\n <slot></slot>\n </div>\n </div>\n <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n `;\n }\n\n private _toggleMenuOpen() {\n this.menuOpen = !this.menuOpen;\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.menuOpen = false;\n }\n }\n\n private _handleOverlayClick() {\n this.menuOpen = false;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('menuOpen')) {\n const event = new CustomEvent('on-nav-toggle', {\n composed: true,\n bubbles: true,\n detail: { open: this.menuOpen },\n });\n this.dispatchEvent(event);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav': HeaderNav;\n }\n}\n"],"names":["HeaderNav","LitElement","constructor","this","menuOpen","slot","render","classes","menu","open","html","classMap","_toggleMenuOpen","closeIcon","menuIcon","_handleOverlayClick","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderNavScss","__decorate","state","prototype","property","type","String","reflect","customElement"],"mappings":"k4BAaO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,uBAOLC,KAAQC,UAAG,EAIFD,KAAIE,KAAG,MAkEjB,CAhEU,MAAAC,GACP,MAAMC,EAAU,CACd,cAAc,EACdC,MAAM,EACNC,KAAMN,KAAKC,UAGb,OAAOM,CAAI;mBACIC,EAASJ;;;;;mBAKT,IAAMJ,KAAKS;;YAElBT,KAAKC,SACHM,CAAI,mBAAmBG,gBACvBH,CAAI,mBAAmBI;;;;;;;oCAODX,KAAKY;KAEtC,CAEO,eAAAH,GACNT,KAAKC,UAAYD,KAAKC,QACvB,CAEO,eAAAY,CAAgBC,GACjBA,EAAEC,eAAeC,SAAShB,QAC7BA,KAAKC,UAAW,EAEnB,CAEO,mBAAAW,GACNZ,KAAKC,UAAW,CACjB,CAEQ,UAAAgB,CAAWC,GAClB,GAAIA,EAAaC,IAAI,YAAa,CAChC,MAAMC,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAElB,KAAMN,KAAKC,YAEvBD,KAAKyB,cAAcL,EACpB,CACF,CAEQ,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMd,KAAKa,gBAAgBC,IAChE,CAEQ,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMd,KAAKa,gBAAgBC,KAElEa,MAAMG,sBACP,GA3EejC,EAAMmC,OAAGC,EAMzBC,EAAA,CADCC,KACgBtC,EAAAuC,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACZ3C,EAAAuC,UAAA,YAAA,GAXZvC,EAASqC,EAAA,CADrBO,EAAc,mBACF5C"}
|
|
@@ -66,13 +66,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
66
66
|
bottom: 0;
|
|
67
67
|
left: 0;
|
|
68
68
|
z-index: -2;
|
|
69
|
-
backdrop-filter: blur(1px);
|
|
70
69
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
71
70
|
background: transparent;
|
|
72
71
|
visibility: hidden;
|
|
73
72
|
}
|
|
74
73
|
.open + .overlay {
|
|
75
|
-
background: var(--kd-color-
|
|
74
|
+
background: var(--kd-color-dark-opacity-40);
|
|
76
75
|
visibility: visible;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerNav.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerNav.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -66,13 +66,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
66
66
|
bottom: 0;
|
|
67
67
|
left: 0;
|
|
68
68
|
z-index: -2;
|
|
69
|
-
backdrop-filter: blur(1px);
|
|
70
69
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
71
70
|
background: transparent;
|
|
72
71
|
visibility: hidden;
|
|
73
72
|
}
|
|
74
73
|
.open + .overlay {
|
|
75
|
-
background: var(--kd-color-
|
|
74
|
+
background: var(--kd-color-dark-opacity-40);
|
|
76
75
|
visibility: visible;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerPanel.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerPanel.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;
|
|
1
|
+
{"version":3,"file":"localNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAKnE;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,8BAA8B;IAE9B,MAAM,UAAS;IAEf,sCAAsC;IAEtC,OAAO,SAAS;IAEhB,mCAAmC;IAEnC,SAAS,SAAW;IAEpB,yCAAyC;IAEzC,WAAW;;;;MAIT;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,eAAe,EAAG,MAAM,CAAC;IAEzB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAER,MAAM;IA0Cf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,iBAAiB;IAIhB,UAAU,CAAC,YAAY,EAAE,GAAG;IAMrC,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAOjB,oBAAoB;CAQ9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as n}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as n}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import d from"./localNav.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/16.js';import p from'./../../../external/@carbon/icons/es/side-panel--open/24.js';let c=class extends i{constructor(){super(...arguments),this.pinned=!1,this.pinText="Pin",this.unpinText="Unpin",this.textStrings={toggleMenu:"Toggle Menu",collapse:"Collapse",menu:"Menu"},this._expanded=!1}render(){return t`
|
|
2
2
|
<nav
|
|
3
|
-
class=${
|
|
3
|
+
class=${a({"nav--expanded":this._expanded||this.pinned,pinned:this.pinned})}
|
|
4
4
|
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
5
5
|
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
6
6
|
>
|
|
@@ -25,11 +25,11 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
25
25
|
title="${this.pinned?this.unpinText:this.pinText}"
|
|
26
26
|
aria-label="${this.pinned?this.unpinText:this.pinText}"
|
|
27
27
|
>
|
|
28
|
-
<kd-icon .icon=${
|
|
28
|
+
<kd-icon class="pin-icon" .icon=${p}></kd-icon>
|
|
29
29
|
</button>
|
|
30
30
|
</div>
|
|
31
31
|
</nav>
|
|
32
32
|
|
|
33
33
|
<div class="overlay ${this.pinned?"pinned":""}"></div>
|
|
34
|
-
`}_handleNavToggle(e){this.pinned=!this.pinned;const t=new CustomEvent("on-toggle",{detail:{pinned:this.pinned,origEvent:e}});this.dispatchEvent(t)}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded||this.pinned}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){(e.has("_expanded")||e.has("pinned"))&&this._updateChildren()}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-link-active",(e=>this._handleLinkActive(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-link-active",(e=>this._handleLinkActive(e))),super.disconnectedCallback()}};
|
|
34
|
+
`}_handleNavToggle(e){this.pinned=!this.pinned;const t=new CustomEvent("on-toggle",{detail:{pinned:this.pinned,origEvent:e}});this.dispatchEvent(t)}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded||this.pinned}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){(e.has("_expanded")||e.has("pinned"))&&this._updateChildren()}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-link-active",(e=>this._handleLinkActive(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-link-active",(e=>this._handleLinkActive(e))),super.disconnectedCallback()}};c.styles=d,e([s({type:Boolean})],c.prototype,"pinned",void 0),e([s({type:String})],c.prototype,"pinText",void 0),e([s({type:String})],c.prototype,"unpinText",void 0),e([s({type:Object})],c.prototype,"textStrings",void 0),e([o()],c.prototype,"_expanded",void 0),e([o()],c.prototype,"_activeLinkText",void 0),e([l({selector:"kyn-local-nav-link"})],c.prototype,"_navLinks",void 0),e([o()],c.prototype,"_leaveTimer",void 0),c=e([n("kyn-local-nav")],c);export{c as LocalNav};
|
|
35
35
|
//# sourceMappingURL=localNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport LocalNavScss from './localNav.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--down/16';\nimport
|
|
1
|
+
{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport LocalNavScss from './localNav.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--down/16';\nimport pinIcon from '@carbon/icons/es/side-panel--open/24';\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @fires on-toggle - Captures the click event and emits the open state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n static override styles = LocalNavScss;\n\n /** Local nav pinned state. */\n @property({ type: Boolean })\n pinned = false;\n\n /** Pin open button assistive text. */\n @property({ type: String })\n pinText = 'Pin';\n\n /** Unpin button assistive text. */\n @property({ type: String })\n unpinText = 'Unpin';\n\n /** Menu toggle button assistive text. */\n @property({ type: Object })\n textStrings = {\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n };\n\n /** Local nav expanded state.\n * @internal\n */\n @state()\n _expanded = false;\n\n /** Active Link text.\n * @internal\n */\n @state()\n _activeLinkText!: string;\n\n /** Queries top-level slotted links.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-local-nav-link' })\n _navLinks!: any;\n\n /** Timeout function to delay flyout open.\n * @internal\n */\n _enterTimer: any;\n\n /** Timeout function to delay flyout close.\n * @internal\n */\n @state()\n _leaveTimer: any;\n\n override render() {\n return html`\n <nav\n class=${classMap({\n 'nav--expanded': this._expanded || this.pinned,\n pinned: this.pinned,\n })}\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <button\n class=\"mobile-toggle\"\n title=${this.textStrings.toggleMenu}\n aria-label=${this.textStrings.toggleMenu}\n @click=${(e: Event) => this._handleNavToggle(e)}\n >\n ${this._expanded\n ? this.textStrings.collapse\n : this._activeLinkText || this.textStrings.menu}\n <kd-icon .icon=${arrowIcon}></kd-icon>\n </button>\n\n <div class=\"links\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n\n <div class=\"toggle-container\">\n <button\n class=\"nav-toggle\"\n @click=${(e: Event) => this._handleNavToggle(e)}\n title=\"${this.pinned ? this.unpinText : this.pinText}\"\n aria-label=\"${this.pinned ? this.unpinText : this.pinText}\"\n >\n <kd-icon class=\"pin-icon\" .icon=${pinIcon}></kd-icon>\n </button>\n </div>\n </nav>\n\n <div class=\"overlay ${this.pinned ? 'pinned' : ''}\"></div>\n `;\n }\n\n private _handleNavToggle(e: Event) {\n this.pinned = !this.pinned;\n\n const event = new CustomEvent('on-toggle', {\n detail: { pinned: this.pinned, origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this._expanded = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this._expanded = false;\n }, 150);\n }\n }\n\n private _updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._navExpanded = this._expanded || this.pinned;\n });\n }\n\n private handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _handleLinkActive(e: any) {\n this._activeLinkText = e.detail.text;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('_expanded') || changedProps.has('pinned')) {\n this._updateChildren();\n }\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this._expanded = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n this.addEventListener('on-link-active', (e) => this._handleLinkActive(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n this.removeEventListener('on-link-active', (e) =>\n this._handleLinkActive(e)\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-local-nav': LocalNav;\n }\n}\n"],"names":["LocalNav","LitElement","constructor","this","pinned","pinText","unpinText","textStrings","toggleMenu","collapse","menu","_expanded","render","html","classMap","e","handlePointerLeave","handlePointerEnter","_handleNavToggle","_activeLinkText","arrowIcon","handleSlotChange","pinIcon","event","CustomEvent","detail","origEvent","dispatchEvent","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","_updateChildren","_navLinks","forEach","link","_navExpanded","requestUpdate","_handleLinkActive","text","willUpdate","changedProps","has","_handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavScss","__decorate","property","type","Boolean","prototype","String","Object","state","queryAssignedElements","selector","customElement"],"mappings":"u/BAoBO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAMC,QAAG,EAITD,KAAOE,QAAG,MAIVF,KAASG,UAAG,QAIZH,KAAAI,YAAc,CACZC,WAAY,cACZC,SAAU,WACVC,KAAM,QAORP,KAASQ,WAAG,CA0Ib,CAjHU,MAAAC,GACP,OAAOC,CAAI;;gBAECC,EAAS,CACf,gBAAiBX,KAAKQ,WAAaR,KAAKC,OACxCA,OAAQD,KAAKC;wBAEEW,GAAoBZ,KAAKa,mBAAmBD;wBAC5CA,GAAoBZ,KAAKc,mBAAmBF;;;;kBAInDZ,KAAKI,YAAYC;uBACZL,KAAKI,YAAYC;mBACpBO,GAAaZ,KAAKe,iBAAiBH;;YAE3CZ,KAAKQ,UACHR,KAAKI,YAAYE,SACjBN,KAAKgB,iBAAmBhB,KAAKI,YAAYG;2BAC5BU;;;;8BAIGjB,KAAKkB;;;;;;qBAMbN,GAAaZ,KAAKe,iBAAiBH;qBACpCZ,KAAKC,OAASD,KAAKG,UAAYH,KAAKE;0BAC/BF,KAAKC,OAASD,KAAKG,UAAYH,KAAKE;;8CAEhBiB;;;;;4BAKlBnB,KAAKC,OAAS,SAAW;KAElD,CAEO,gBAAAc,CAAiBH,GACvBZ,KAAKC,QAAUD,KAAKC,OAEpB,MAAMmB,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CAAErB,OAAQD,KAAKC,OAAQsB,UAAWX,KAE5CZ,KAAKwB,cAAcJ,EACpB,CAEO,kBAAAN,CAAmBF,GACH,UAAlBA,EAAEa,cACJC,aAAa1B,KAAK2B,aAElB3B,KAAK4B,YAAcC,YAAW,KAC5B7B,KAAKQ,WAAY,CAAI,GACpB,KAEN,CAEO,kBAAAK,CAAmBD,GACH,UAAlBA,EAAEa,cACJC,aAAa1B,KAAK4B,aAElB5B,KAAK2B,YAAcE,YAAW,KAC5B7B,KAAKQ,WAAY,CAAK,GACrB,KAEN,CAEO,eAAAsB,GACN9B,KAAK+B,UAAUC,SAASC,IACtBA,EAAKC,aAAelC,KAAKQ,WAAaR,KAAKC,MAAM,GAEpD,CAEO,gBAAAiB,GACNlB,KAAK8B,kBACL9B,KAAKmC,eACN,CAEO,iBAAAC,CAAkBxB,GACxBZ,KAAKgB,gBAAkBJ,EAAEU,OAAOe,IACjC,CAEQ,UAAAC,CAAWC,IACdA,EAAaC,IAAI,cAAgBD,EAAaC,IAAI,YACpDxC,KAAK8B,iBAER,CAEO,eAAAW,CAAgB7B,GACjBA,EAAE8B,eAAeC,SAAS3C,QAC7BA,KAAKQ,WAAY,EAEpB,CAEQ,iBAAAoC,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUnC,GAAMZ,KAAKyC,gBAAgB7B,KAC/DZ,KAAK+C,iBAAiB,kBAAmBnC,GAAMZ,KAAKoC,kBAAkBxB,IACvE,CAEQ,oBAAAoC,GACPF,SAASG,oBAAoB,SAAUrC,GAAMZ,KAAKyC,gBAAgB7B,KAClEZ,KAAKiD,oBAAoB,kBAAmBrC,GAC1CZ,KAAKoC,kBAAkBxB,KAGzBiC,MAAMG,sBACP,GAnKenD,EAAMqD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACH1D,EAAA2D,UAAA,cAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACF5D,EAAA2D,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACE5D,EAAA2D,UAAA,iBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,UAKhB7D,EAAA2D,UAAA,mBAAA,GAMFJ,EAAA,CADCO,KACiB9D,EAAA2D,UAAA,iBAAA,GAMlBJ,EAAA,CADCO,KACwB9D,EAAA2D,UAAA,uBAAA,GAMzBJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,wBACnBhE,EAAA2D,UAAA,iBAAA,GAWhBJ,EAAA,CADCO,KACgB9D,EAAA2D,UAAA,mBAAA,GAlDN3D,EAAQuD,EAAA,CADpBU,EAAc,kBACFjE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as
|
|
1
|
+
import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as i}from'./../../../external/@lit/reactive-element/css-tag.js';var e=i`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -84,10 +84,12 @@ nav {
|
|
|
84
84
|
z-index: var(--kd-z-local-nav);
|
|
85
85
|
height: 100%;
|
|
86
86
|
padding-top: calc(var(--kd-header-height) + 8px);
|
|
87
|
-
border-bottom: 4px solid transparent;
|
|
88
87
|
transition: width 300ms ease-in-out, border-color 300ms ease-out;
|
|
89
88
|
width: var(--kd-local-nav-width);
|
|
90
89
|
}
|
|
90
|
+
nav.pinned {
|
|
91
|
+
box-shadow: none;
|
|
92
|
+
}
|
|
91
93
|
}
|
|
92
94
|
nav.nav--expanded {
|
|
93
95
|
height: 100%;
|
|
@@ -95,7 +97,6 @@ nav.nav--expanded {
|
|
|
95
97
|
@media (min-width: 42rem) {
|
|
96
98
|
nav.nav--expanded {
|
|
97
99
|
width: var(--kd-local-nav-width-expanded);
|
|
98
|
-
border-bottom-color: var(--kd-color-border-accent-spruce-light);
|
|
99
100
|
}
|
|
100
101
|
}
|
|
101
102
|
|
|
@@ -106,7 +107,6 @@ nav.nav--expanded {
|
|
|
106
107
|
right: 0;
|
|
107
108
|
bottom: 0;
|
|
108
109
|
left: 0;
|
|
109
|
-
backdrop-filter: blur(1px);
|
|
110
110
|
z-index: calc(var(--kd-z-local-nav) - 1);
|
|
111
111
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
112
112
|
background-color: transparent;
|
|
@@ -194,6 +194,12 @@ nav.nav--expanded {
|
|
|
194
194
|
.toggle-container {
|
|
195
195
|
display: none;
|
|
196
196
|
padding-top: 4px;
|
|
197
|
+
border-top: 1px solid var(--kd-color-border-light);
|
|
198
|
+
}
|
|
199
|
+
@media (min-width: 42rem) {
|
|
200
|
+
.toggle-container {
|
|
201
|
+
display: flex;
|
|
202
|
+
}
|
|
197
203
|
}
|
|
198
204
|
|
|
199
205
|
.nav-toggle {
|
|
@@ -226,9 +232,10 @@ nav.nav--expanded {
|
|
|
226
232
|
color: var(--kd-color-text-inversed);
|
|
227
233
|
}
|
|
228
234
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
235
|
+
.pin-icon {
|
|
236
|
+
transition: transform 150ms ease-out;
|
|
237
|
+
}
|
|
238
|
+
.pinned .pin-icon {
|
|
239
|
+
transform: rotate(180deg);
|
|
240
|
+
}`;export{e as default};
|
|
234
241
|
//# sourceMappingURL=localNav.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNav.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"localNav.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var e={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:24,height:24},content:[{elem:"path",attrs:{d:"M28,4H4C2.9,4,2,4.9,2,6v20c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2V6C30,4.9,29.1,4,28,4z M10,26H4V6h6V26z M28,15H17.8\tl3.6-3.6L20,10l-6,6l6,6l1.4-1.4L17.8,17H28v9H12V6h16V15z"}}],name:"side-panel--close",size:24};export{e as default};
|
|
2
|
-
//# sourceMappingURL=24.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"24.js","sources":["../../../../../../node_modules/@carbon/icons/es/side-panel--close/24.js"],"sourcesContent":["/**\n * Copyright IBM Corp. 2016, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * Code generated by @carbon/icon-build-helpers. DO NOT EDIT.\n */\nvar _24 = {\n \"elem\": \"svg\",\n \"attrs\": {\n \"xmlns\": \"http://www.w3.org/2000/svg\",\n \"viewBox\": \"0 0 32 32\",\n \"fill\": \"currentColor\",\n \"width\": 24,\n \"height\": 24\n },\n \"content\": [{\n \"elem\": \"path\",\n \"attrs\": {\n \"d\": \"M28,4H4C2.9,4,2,4.9,2,6v20c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2V6C30,4.9,29.1,4,28,4z M10,26H4V6h6V26z M28,15H17.8\\tl3.6-3.6L20,10l-6,6l6,6l1.4-1.4L17.8,17H28v9H12V6h16V15z\"\n }\n }],\n \"name\": \"side-panel--close\",\n \"size\": 24\n};\n\nexport { _24 as default };\n"],"names":["_24","elem","attrs","xmlns","viewBox","fill","width","height","content","d","name","size"],"mappings":"AAQG,IAACA,EAAM,CACRC,KAAQ,MACRC,MAAS,CACPC,MAAS,6BACTC,QAAW,YACXC,KAAQ,eACRC,MAAS,GACTC,OAAU,IAEZC,QAAW,CAAC,CACVP,KAAQ,OACRC,MAAS,CACPO,EAAK,gLAGTC,KAAQ,oBACRC,KAAQ"}
|