@kyndryl-design-system/shidoka-applications 1.3.0 → 1.3.2
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 +19 -0
- package/components/global/header/headerLink.d.ts +1 -6
- package/components/global/header/headerLink.d.ts.map +1 -1
- package/components/global/header/headerLink.js +7 -3
- package/components/global/header/headerLink.js.map +1 -1
- package/components/reusable/modal/modal.d.ts +0 -1
- package/components/reusable/modal/modal.d.ts.map +1 -1
- package/components/reusable/modal/modal.js +2 -0
- package/components/reusable/modal/modal.js.map +1 -1
- package/components/reusable/tooltip/tooltip.d.ts +7 -2
- package/components/reusable/tooltip/tooltip.d.ts.map +1 -1
- package/components/reusable/tooltip/tooltip.js +10 -5
- package/components/reusable/tooltip/tooltip.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -89,3 +89,22 @@ Some options for React wrapper libraries:
|
|
|
89
89
|
When using with an SSR framework like Next.js, you will encounter errors with code that only runs client-side, like `window` references for example. This is because web components cannot render on the server. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c) and [How to entirely disable server-side rendering in next.js v13?](https://stackoverflow.com/questions/75406728/how-to-entirely-disable-server-side-rendering-in-next-js-v13). Basically, they need their rendering deferred to only happen on the client-side.
|
|
90
90
|
|
|
91
91
|
Here is some additional information about why SSR does not work for web components, and some potential polyfills/solutions to enable server rendering: https://lit.dev/docs/ssr/overview/
|
|
92
|
+
|
|
93
|
+
### Handling `Failed to execute 'define' on 'CustomElementRegistry'`
|
|
94
|
+
|
|
95
|
+
#### The Problem
|
|
96
|
+
|
|
97
|
+
This is a common bundling issue that can appear when you incorporate a component that has already bundled Shidoka components. Typically this would be caused by having a middle layer, for example a Common UI layer that has a cross-platform Header component built using Shidoka components.
|
|
98
|
+
|
|
99
|
+
#### Avoiding This
|
|
100
|
+
|
|
101
|
+
You can get around this in by not declaring Shidoka components as dependencies, and instead declaring them as external or peer dependencies in the middle/common layer.
|
|
102
|
+
|
|
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
|
+
|
|
105
|
+
This works with bundling from node_modules, but not with CDN hosted files since the deployed application wouldn't know how to resolve aliased node_modules imports like: `import '@kyndryl-design-system/...'`. In this case you probably need a workaround.
|
|
106
|
+
|
|
107
|
+
#### Workaround
|
|
108
|
+
|
|
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.
|
|
@@ -29,22 +29,17 @@ export declare class HeaderLink extends LitElement {
|
|
|
29
29
|
* @ignore
|
|
30
30
|
*/
|
|
31
31
|
breakpointHit: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Evaluates to true if level 2 links are slotted inside to generate a flyout menu.
|
|
34
|
-
* @ignore
|
|
35
|
-
*/
|
|
36
|
-
isSlotted: boolean;
|
|
37
32
|
/**
|
|
38
33
|
* Queries any slotted HTML elements.
|
|
39
34
|
* @ignore
|
|
40
35
|
*/
|
|
41
36
|
slottedElements: Array<HTMLElement>;
|
|
42
37
|
render(): import("lit-html").TemplateResult<1>;
|
|
38
|
+
private _handleLinksSlotChange;
|
|
43
39
|
private handlePointerEnter;
|
|
44
40
|
private handlePointerLeave;
|
|
45
41
|
private handleClick;
|
|
46
42
|
private handleClickOut;
|
|
47
|
-
private determineIfSlotted;
|
|
48
43
|
private determineLevel;
|
|
49
44
|
firstUpdated(): void;
|
|
50
45
|
connectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,mDAAmD;IAEnD,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,
|
|
1
|
+
{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,mDAAmD;IAEnD,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IAkDf,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IASb,YAAY;IAIZ,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,UAAU,CAAC;KACnC;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
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 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 n}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 r}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as d}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as a}from"../../../common/helpers/helpers.js";import p from"./headerLink.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/caret--down/16.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.breakpointHit=!1
|
|
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 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 n}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 r}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as d}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as a}from"../../../common/helpers/helpers.js";import p from"./headerLink.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/caret--down/16.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.breakpointHit=!1}render(){const e={menu:this.slottedElements.length,"breakpoint-hit":this.breakpointHit,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,"level--1":1==this.level,"level--2":2==this.level,interactive:1==this.level&&this.breakpointHit},o={menu__content:this.breakpointHit,static:!this.breakpointHit,slotted:this.slottedElements.length};return t`
|
|
2
2
|
<div
|
|
3
3
|
class="${r(e)}"
|
|
4
4
|
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
@@ -15,7 +15,11 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
15
15
|
|
|
16
16
|
${this.slottedElements.length&&this.breakpointHit?t` <kd-icon .icon=${h}></kd-icon> `:null}
|
|
17
17
|
</a>
|
|
18
|
-
<slot
|
|
18
|
+
<slot
|
|
19
|
+
name="links"
|
|
20
|
+
class=${r(o)}
|
|
21
|
+
@slotchange=${this._handleLinksSlotChange}
|
|
22
|
+
></slot>
|
|
19
23
|
</div>
|
|
20
|
-
`}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&(this.open=!1)}handleClick(e){let t=!1;this.slottedElements.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}
|
|
24
|
+
`}_handleLinksSlotChange(){this.determineLevel(),this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&(this.open=!1)}handleClick(e){let t=!1;this.slottedElements.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}determineLevel(){const e=this.shadowRoot.host.parentNode.nodeName;this.level="KYN-HEADER-NAV"==e?1:2}firstUpdated(){this.determineLevel()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",a((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",a((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=d("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};m.styles=p,e([s({type:Boolean})],m.prototype,"open",void 0),e([s({type:String})],m.prototype,"href",void 0),e([s({type:String})],m.prototype,"target",void 0),e([s({type:String})],m.prototype,"rel",void 0),e([s({type:Boolean})],m.prototype,"isActive",void 0),e([n()],m.prototype,"level",void 0),e([s({type:Boolean})],m.prototype,"divider",void 0),e([n()],m.prototype,"breakpointHit",void 0),e([l({slot:"links"})],m.prototype,"slottedElements",void 0),m=e([o("kyn-header-link")],m);export{m as HeaderLink};
|
|
21
25
|
//# sourceMappingURL=headerLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.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 { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/caret--down/16';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n static override styles = HeaderLinkScss;\n\n /** Link open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n @property({ type: String })\n target = '_self' as const;\n\n /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n @property({ type: String })\n rel = '';\n\n /** Link active state, for example when URL path matches link href. */\n @property({ type: Boolean })\n isActive = false;\n\n /** Link level, supports two levels.\n * @ignore\n */\n @state()\n level = 1;\n\n /** Adds a 1px shadow to the bottom of the link. */\n @property({ type: Boolean })\n divider = false;\n\n /**\n * Determines if menu should be a flyout or inline depending on screen size.\n * @ignore\n */\n @state()\n breakpointHit = false;\n\n /**\n *
|
|
1
|
+
{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.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 { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/caret--down/16';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n static override styles = HeaderLinkScss;\n\n /** Link open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n @property({ type: String })\n target = '_self' as const;\n\n /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n @property({ type: String })\n rel = '';\n\n /** Link active state, for example when URL path matches link href. */\n @property({ type: Boolean })\n isActive = false;\n\n /** Link level, supports two levels.\n * @ignore\n */\n @state()\n level = 1;\n\n /** Adds a 1px shadow to the bottom of the link. */\n @property({ type: Boolean })\n divider = false;\n\n /**\n * Determines if menu should be a flyout or inline depending on screen size.\n * @ignore\n */\n @state()\n breakpointHit = false;\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links' })\n slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: this.slottedElements.length,\n 'breakpoint-hit': this.breakpointHit,\n divider: this.divider,\n open: this.open,\n };\n\n const linkClasses = {\n 'nav-link': true,\n active: this.isActive,\n 'level--1': this.level == 1,\n 'level--2': this.level == 2,\n interactive: this.level == 1 && this.breakpointHit,\n };\n\n const slotClasses = {\n menu__content: this.breakpointHit,\n static: !this.breakpointHit,\n slotted: this.slottedElements.length,\n };\n\n return html`\n <div\n class=\"${classMap(classes)}\"\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n >\n <a\n target=${this.target}\n rel=${this.rel}\n href=${this.href}\n class=${classMap(linkClasses)}\n @click=${(e: Event) => this.handleClick(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <slot></slot>\n\n ${this.slottedElements.length && this.breakpointHit\n ? html` <kd-icon .icon=${downIcon}></kd-icon> `\n : null}\n </a>\n <slot\n name=\"links\"\n class=${classMap(slotClasses)}\n @slotchange=${this._handleLinksSlotChange}\n ></slot>\n </div>\n `;\n }\n\n private _handleLinksSlotChange() {\n this.determineLevel();\n this.requestUpdate();\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n this.open = true;\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n this.open = false;\n }\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.slottedElements.length) {\n preventDefault = true;\n e.preventDefault();\n this.open = !this.open;\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e, defaultPrevented: preventDefault },\n });\n this.dispatchEvent(event);\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n private determineLevel() {\n const parentTagName = this.shadowRoot!.host.parentNode!.nodeName;\n if (parentTagName == 'KYN-HEADER-NAV') {\n this.level = 1;\n } else {\n this.level = 2;\n }\n }\n\n override firstUpdated() {\n this.determineLevel();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n\n this.testBreakpoint();\n window?.addEventListener(\n 'resize',\n debounce(() => {\n this.testBreakpoint();\n })\n );\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n window?.removeEventListener(\n 'resize',\n debounce(() => {\n this.testBreakpoint();\n })\n );\n\n super.disconnectedCallback();\n }\n\n private testBreakpoint() {\n const nav = querySelectorDeep('kyn-header');\n if (nav) {\n this.breakpointHit = nav!.breakpointHit;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav-link': HeaderLink;\n }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","breakpointHit","render","classes","menu","slottedElements","length","linkClasses","active","interactive","slotClasses","menu__content","static","slotted","html","classMap","e","handlePointerLeave","handleClick","handlePointerEnter","downIcon","_handleLinksSlotChange","determineLevel","requestUpdate","pointerType","preventDefault","event","CustomEvent","detail","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","includes","parentTagName","shadowRoot","host","parentNode","nodeName","firstUpdated","connectedCallback","super","document","addEventListener","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","nav","querySelectorDeep","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}
|
|
@@ -5,7 +5,6 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
|
|
|
5
5
|
* Modal.
|
|
6
6
|
* @slot unnamed - Slot for modal body content.
|
|
7
7
|
* @slot anchor - Slot for the anchor button content.
|
|
8
|
-
* @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.
|
|
9
8
|
* @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).
|
|
10
9
|
*/
|
|
11
10
|
export declare class Modal extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,+BAAa;IAEnC,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAiEf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = ModalScss;\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </button>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n ?destructive=${this.destructive}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"m8BAiBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAKLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,SAIbN,KAAWO,aAAG,CA+Gf,CAnGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACP,WAA0B,OAAdV,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOS,CAAI;sCACuBX,KAAKY;;;;;iBAK1BC,EAASJ;;;kBAGPK,GAAad,KAAKe,YAAYD,EAAG;;;;mBAIhCA,GAAad,KAAKe,YAAYD,EAAG;;2BAE1BE;;;;;cAKM,KAAnBhB,KAAKI,UACHO,CAAI,uBAAuBX,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;;;;;6BAUXH,KAAKO;uBACVO,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKK;;;;;;uBAMGS,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKM;;;;;;;;;;;KAYlB,CAEOM,aACNZ,KAAKC,MAAO,CACb,CAEOc,YAAYD,EAAUG,KAEzBjB,KAAKkB,aACLlB,KAAKkB,aAAelB,KAAKkB,YAAYD,MAEtCjB,KAAKC,MAAO,EACZD,KAAKmB,QAAQF,YAAcA,EAC3BjB,KAAKoB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAajB,KAAKmB,QAAQF,YAC1BO,UAAWV,KAGfd,KAAKyB,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf5B,KAAKC,KACPD,KAAKmB,QAAQU,YAEb7B,KAAKmB,QAAQW,QAGlB,GA1IejC,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLvC,EAAAwC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,YAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,cAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACIzC,EAAAwC,UAAA,kBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACEvC,EAAAwC,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA1C,EAAAwC,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO3C,EAAAwC,UAAA,eAAA,GAvCHxC,EAAKoC,EAAA,CADjBQ,EAAc,cACF5C"}
|
|
@@ -14,9 +14,14 @@ export declare class Tooltip extends LitElement {
|
|
|
14
14
|
direction: string;
|
|
15
15
|
/** Assistive text for anchor button. */
|
|
16
16
|
assistiveText: string;
|
|
17
|
+
/** Timeout function to delay modal close.
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
timer: any;
|
|
17
21
|
render(): import("lit-html").TemplateResult<1>;
|
|
18
|
-
private
|
|
19
|
-
private
|
|
22
|
+
private _handleOpen;
|
|
23
|
+
private _handleClose;
|
|
24
|
+
private _handleMouseLeave;
|
|
20
25
|
private _handleEsc;
|
|
21
26
|
connectedCallback(): void;
|
|
22
27
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAe;IAGrC,IAAI,UAAS;IAEb,kEAAkE;IAElE,cAAc,SAAY;IAE1B,sEAAsE;IAEtE,SAAS,SAAS;IAElB,wCAAwC;IAExC,aAAa,SAAoB;
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAe;IAGrC,IAAI,UAAS;IAEb,kEAAkE;IAElE,cAAc,SAAY;IAE1B,sEAAsE;IAEtE,SAAS,SAAS;IAElB,wCAAwC;IAExC,aAAa,SAAoB;IAEjC;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAC;IAEF,MAAM;IAyCf,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,UAAU;IAMT,iBAAiB;IAKjB,oBAAoB;CAI9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}
|
|
@@ -1,22 +1,27 @@
|
|
|
1
|
-
import{__decorate 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 o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import l from"./tooltip.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/information/20.js';let d=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorPosition="center",this.direction="top",this.assistiveText="Toggle Tooltip"}render(){const e={content:!0,open:this.open,"anchor--start":"start"===this.anchorPosition,"anchor--end":"end"===this.anchorPosition,"anchor--center":"center"===this.anchorPosition,"direction--top":"top"===this.direction,"direction--bottom":"bottom"===this.direction,"direction--left":"left"===this.direction,"direction--right":"right"===this.direction};return t`
|
|
2
2
|
<div class="tooltip">
|
|
3
3
|
<button
|
|
4
4
|
aria-label=${this.assistiveText}
|
|
5
5
|
title=${this.assistiveText}
|
|
6
6
|
aria-describedby="tooltip"
|
|
7
|
-
@
|
|
7
|
+
@mouseenter=${this._handleOpen}
|
|
8
|
+
@mouseleave=${this._handleMouseLeave}
|
|
9
|
+
@focus=${this._handleOpen}
|
|
10
|
+
@blur=${this._handleClose}
|
|
8
11
|
>
|
|
9
|
-
<slot name="anchor"><kd-icon .icon=${
|
|
12
|
+
<slot name="anchor"><kd-icon .icon=${a}></kd-icon></slot>
|
|
10
13
|
</button>
|
|
11
14
|
|
|
12
15
|
<div
|
|
13
16
|
id="tooltip"
|
|
14
17
|
aria-hidden=${!this.open}
|
|
15
18
|
role="tooltip"
|
|
16
|
-
class=${
|
|
19
|
+
class=${r(e)}
|
|
20
|
+
@mouseenter=${this._handleOpen}
|
|
21
|
+
@mouseleave=${this._handleMouseLeave}
|
|
17
22
|
>
|
|
18
23
|
<slot></slot>
|
|
19
24
|
</div>
|
|
20
25
|
</div>
|
|
21
|
-
`}
|
|
26
|
+
`}_handleOpen(){clearTimeout(this.timer),this.open=!0}_handleClose(){this.open=!1}_handleMouseLeave(){this.timer=setTimeout((()=>{this.open=!1,clearTimeout(this.timer)}),500)}_handleEsc(e){this.open&&"Escape"===e.key&&(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",(e=>this._handleEsc(e)))}disconnectedCallback(){document.removeEventListener("keydown",(e=>this._handleEsc(e))),super.disconnectedCallback()}};d.styles=l,e([s({type:Boolean})],d.prototype,"open",void 0),e([s({type:String})],d.prototype,"anchorPosition",void 0),e([s({type:String})],d.prototype,"direction",void 0),e([s({type:String})],d.prototype,"assistiveText",void 0),e([n()],d.prototype,"timer",void 0),d=e([i("kyn-tooltip")],d);export{d as Tooltip};
|
|
22
27
|
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport infoIcon from '@carbon/icons/es/information/20';\n\n/**\n * Tooltip.\n * @slot unnamed - Slot for tooltip content.\n * @slot anchor - Slot for custom anchor button content.\n */\n@customElement('kyn-tooltip')\nexport class Tooltip extends LitElement {\n static override styles = TooltipScss;\n\n @property({ type: Boolean })\n open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`. */\n @property({ type: String })\n anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`. */\n @property({ type: String })\n direction = 'top';\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n assistiveText = 'Toggle Tooltip';\n\n override render() {\n const classes = {\n content: true,\n open: this.open,\n 'anchor--start': this.anchorPosition === 'start',\n 'anchor--end': this.anchorPosition === 'end',\n 'anchor--center': this.anchorPosition === 'center',\n 'direction--top': this.direction === 'top',\n 'direction--bottom': this.direction === 'bottom',\n 'direction--left': this.direction === 'left',\n 'direction--right': this.direction === 'right',\n };\n\n return html`\n <div class=\"tooltip\">\n <button\n aria-label=${this.assistiveText}\n title=${this.assistiveText}\n aria-describedby=\"tooltip\"\n @
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport infoIcon from '@carbon/icons/es/information/20';\n\n/**\n * Tooltip.\n * @slot unnamed - Slot for tooltip content.\n * @slot anchor - Slot for custom anchor button content.\n */\n@customElement('kyn-tooltip')\nexport class Tooltip extends LitElement {\n static override styles = TooltipScss;\n\n @property({ type: Boolean })\n open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`. */\n @property({ type: String })\n anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`. */\n @property({ type: String })\n direction = 'top';\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n assistiveText = 'Toggle Tooltip';\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n timer: any;\n\n override render() {\n const classes = {\n content: true,\n open: this.open,\n 'anchor--start': this.anchorPosition === 'start',\n 'anchor--end': this.anchorPosition === 'end',\n 'anchor--center': this.anchorPosition === 'center',\n 'direction--top': this.direction === 'top',\n 'direction--bottom': this.direction === 'bottom',\n 'direction--left': this.direction === 'left',\n 'direction--right': this.direction === 'right',\n };\n\n return html`\n <div class=\"tooltip\">\n <button\n aria-label=${this.assistiveText}\n title=${this.assistiveText}\n aria-describedby=\"tooltip\"\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n @focus=${this._handleOpen}\n @blur=${this._handleClose}\n >\n <slot name=\"anchor\"><kd-icon .icon=${infoIcon}></kd-icon></slot>\n </button>\n\n <div\n id=\"tooltip\"\n aria-hidden=${!this.open}\n role=\"tooltip\"\n class=${classMap(classes)}\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n >\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _handleOpen() {\n clearTimeout(this.timer);\n this.open = true;\n }\n\n private _handleClose() {\n this.open = false;\n }\n\n private _handleMouseLeave() {\n this.timer = setTimeout(() => {\n this.open = false;\n clearTimeout(this.timer);\n }, 500);\n }\n\n private _handleEsc(e: KeyboardEvent) {\n if (this.open && e.key === 'Escape') {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('keydown', (e) => this._handleEsc(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('keydown', (e) => this._handleEsc(e));\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tooltip': Tooltip;\n }\n}\n"],"names":["Tooltip","LitElement","constructor","this","open","anchorPosition","direction","assistiveText","render","classes","content","html","_handleOpen","_handleMouseLeave","_handleClose","infoIcon","classMap","clearTimeout","timer","setTimeout","_handleEsc","e","key","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","TooltipScss","__decorate","property","type","Boolean","prototype","String","state","customElement"],"mappings":"u4BAcO,IAAMA,EAAN,cAAsBC,EAAtBC,kCAILC,KAAIC,MAAG,EAIPD,KAAcE,eAAG,SAIjBF,KAASG,UAAG,MAIZH,KAAaI,cAAG,gBAgFjB,CAxEUC,SACP,MAAMC,EAAU,CACdC,SAAS,EACTN,KAAMD,KAAKC,KACX,gBAAyC,UAAxBD,KAAKE,eACtB,cAAuC,QAAxBF,KAAKE,eACpB,iBAA0C,WAAxBF,KAAKE,eACvB,iBAAqC,QAAnBF,KAAKG,UACvB,oBAAwC,WAAnBH,KAAKG,UAC1B,kBAAsC,SAAnBH,KAAKG,UACxB,mBAAuC,UAAnBH,KAAKG,WAG3B,OAAOK,CAAI;;;uBAGQR,KAAKI;kBACVJ,KAAKI;;wBAECJ,KAAKS;wBACLT,KAAKU;mBACVV,KAAKS;kBACNT,KAAKW;;+CAEwBC;;;;;yBAKtBZ,KAAKC;;kBAEZY,EAASP;wBACHN,KAAKS;wBACLT,KAAKU;;;;;KAM1B,CAEOD,cACNK,aAAad,KAAKe,OAClBf,KAAKC,MAAO,CACb,CAEOU,eACNX,KAAKC,MAAO,CACb,CAEOS,oBACNV,KAAKe,MAAQC,YAAW,KACtBhB,KAAKC,MAAO,EACZa,aAAad,KAAKe,MAAM,GACvB,IACJ,CAEOE,WAAWC,GACblB,KAAKC,MAAkB,WAAViB,EAAEC,MACjBnB,KAAKC,MAAO,EAEf,CAEQmB,oBACPC,MAAMD,oBACNE,SAASC,iBAAiB,WAAYL,GAAMlB,KAAKiB,WAAWC,IAC7D,CAEQM,uBACPF,SAASG,oBAAoB,WAAYP,GAAMlB,KAAKiB,WAAWC,KAC/DG,MAAMG,sBACP,GA9Fe3B,EAAM6B,OAAGC,EAGzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLlC,EAAAmC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACQpC,EAAAmC,UAAA,sBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACApC,EAAAmC,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACepC,EAAAmC,UAAA,qBAAA,GAMjCJ,EAAA,CADCM,KACUrC,EAAAmC,UAAA,aAAA,GAtBAnC,EAAO+B,EAAA,CADnBO,EAAc,gBACFtC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"query-selector-shadow-dom": "^1.0.1"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@kyndryl-design-system/shidoka-foundation": "^1.3.
|
|
36
|
+
"@kyndryl-design-system/shidoka-foundation": "^1.3.6"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@babel/core": "^7.20.12",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@commitlint/cli": "^17.4.4",
|
|
45
45
|
"@commitlint/config-conventional": "^17.4.4",
|
|
46
46
|
"@custom-elements-manifest/analyzer": "^0.6.8",
|
|
47
|
-
"@kyndryl-design-system/shidoka-foundation": "^1.3.
|
|
47
|
+
"@kyndryl-design-system/shidoka-foundation": "^1.3.6",
|
|
48
48
|
"@open-wc/testing": "^3.1.7",
|
|
49
49
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
50
50
|
"@rollup/plugin-typescript": "^11.0.0",
|