igniteui-webcomponents 2.2.0 → 3.2.0

package/components/tree/themes/dark/tree-item.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css ``;
+//# sourceMappingURL=tree-item.indigo.css.js.map

package/components/tree/themes/dark/tree-item.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/dark/tree-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/tree/themes/light/tree-item.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tree/themes/light/tree-item.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:inherit;--igc-tree-indentation-size: 24px}:host(:focus-within){outline:none}:host([disabled]){color:hsla(var(--igc-gray-500), var(--igc-gray-a));background:hsla(var(--igc-surface-500), var(--igc-surface-a))}[part~=wrapper]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast)}[part~=wrapper]::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background:rgba(0,0,0,0)}[part~=wrapper]:hover::after{background:var(--hover-color, hsla(var(--igc-gray-900), 0.1))}[part~=active]{background:hsla(var(--igc-gray-200), var(--igc-gray-a));color:var(--igc-gray-200-contrast)}[part~=selected]{background:hsla(var(--igc-secondary-200), var(--igc-secondary-a));color:var(--igc-secondary-200-contrast)}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:hsla(var(--igc-secondary-300), var(--igc-secondary-a));color:var(--igc-secondary-300-contrast)}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}[part~=indicator]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-margin-end:.25rem;margin-inline-end:.25rem;min-width:1.5rem}[part~=indicator] igc-icon{width:1.5rem;height:1.5rem;font-size:1.5rem}[part~=label]{display:block;font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);margin:0}[part~=label],[part~=text]{z-index:1;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}[part~=select]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;-webkit-margin-end:.25rem;margin-inline-end:.25rem}[part~=select] igc-checkbox::part(label){display:none}[part~=large]{height:3.125rem}[part~=large] igc-circular-progress{--diameter: 1.5rem}[part~=medium]{height:2.5rem}[part~=medium] igc-circular-progress{--diameter: 1.25rem}[part~=small]{height:2rem}[part~=small] igc-circular-progress{--diameter: 1.125rem}[part~=wrapper][part~=large]{padding:0 1.5rem}[part~=wrapper][part~=medium]{padding:0 1rem}[part~=wrapper][part~=small]{padding:0 .75rem}`;
+//# sourceMappingURL=tree-item.base.css.js.map

package/components/tree/themes/light/tree-item.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gxHAAgxH,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:inherit;--igc-tree-indentation-size: 24px}:host(:focus-within){outline:none}:host([disabled]){color:hsla(var(--igc-gray-500), var(--igc-gray-a));background:hsla(var(--igc-surface-500), var(--igc-surface-a))}[part~=wrapper]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast)}[part~=wrapper]::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background:rgba(0,0,0,0)}[part~=wrapper]:hover::after{background:var(--hover-color, hsla(var(--igc-gray-900), 0.1))}[part~=active]{background:hsla(var(--igc-gray-200), var(--igc-gray-a));color:var(--igc-gray-200-contrast)}[part~=selected]{background:hsla(var(--igc-secondary-200), var(--igc-secondary-a));color:var(--igc-secondary-200-contrast)}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:hsla(var(--igc-secondary-300), var(--igc-secondary-a));color:var(--igc-secondary-300-contrast)}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}[part~=indicator]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-margin-end:.25rem;margin-inline-end:.25rem;min-width:1.5rem}[part~=indicator] igc-icon{width:1.5rem;height:1.5rem;font-size:1.5rem}[part~=label]{display:block;font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);margin:0}[part~=label],[part~=text]{z-index:1;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}[part~=select]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;-webkit-margin-end:.25rem;margin-inline-end:.25rem}[part~=select] igc-checkbox::part(label){display:none}[part~=large]{height:3.125rem}[part~=large] igc-circular-progress{--diameter: 1.5rem}[part~=medium]{height:2.5rem}[part~=medium] igc-circular-progress{--diameter: 1.25rem}[part~=small]{height:2rem}[part~=small] igc-circular-progress{--diameter: 1.125rem}[part~=wrapper][part~=large]{padding:0 1.5rem}[part~=wrapper][part~=medium]{padding:0 1rem}[part~=wrapper][part~=small]{padding:0 .75rem}`;\n"]}

package/components/tree/themes/light/tree-item.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tree/themes/light/tree-item.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part~=active]{background:var(--active-background, hsla(var(--igc-gray-200), var(--igc-gray-a)));color:var(--active-color, var(--igc-gray-200-contrast))}[part~=selected]{background:var(--selected-background, hsla(var(--igc-primary-500), var(--igc-primary-a)));color:var(--selected-color, var(--igc-primary-600-contrast))}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:var(--active-selected-background, hsla(var(--igc-primary-600), var(--igc-primary-a)));color:var(--active-selected-color, var(--igc-primary-600-contrast))}[part~=select]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-200), var(--igc-primary-a)));box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-200), var(--igc-primary-a)))}`;
+//# sourceMappingURL=tree-item.bootstrap.css.js.map

package/components/tree/themes/light/tree-item.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,m4BAAm4B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=active]{background:var(--active-background, hsla(var(--igc-gray-200), var(--igc-gray-a)));color:var(--active-color, var(--igc-gray-200-contrast))}[part~=selected]{background:var(--selected-background, hsla(var(--igc-primary-500), var(--igc-primary-a)));color:var(--selected-color, var(--igc-primary-600-contrast))}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:var(--active-selected-background, hsla(var(--igc-primary-600), var(--igc-primary-a)));color:var(--active-selected-color, var(--igc-primary-600-contrast))}[part~=select]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-200), var(--igc-primary-a)));box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-200), var(--igc-primary-a)))}`;\n"]}

package/components/tree/themes/light/tree-item.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tree/themes/light/tree-item.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part~=active]{background:var(--active-background, hsla(var(--igc-gray-200), var(--igc-gray-a)));color:var(--active-color, var(--igc-gray-200-contrast))}[part~=selected]{background:var(--selected-background, hsla(var(--igc-gray-200), var(--igc-gray-a)));color:var(--selected-color, var(--igc-gray-200-contrast))}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:var(--active-selected-background, hsla(var(--igc-gray-300), var(--igc-gray-a)));color:var(--active-selected-color, var(--igc-gray-300-contrast))}[part~=select]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-gray-800), var(--igc-gray-a)));box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-gray-800), var(--igc-gray-a)))}`;
+//# sourceMappingURL=tree-item.fluent.css.js.map

package/components/tree/themes/light/tree-item.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,q2BAAq2B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=active]{background:var(--active-background, hsla(var(--igc-gray-200), var(--igc-gray-a)));color:var(--active-color, var(--igc-gray-200-contrast))}[part~=selected]{background:var(--selected-background, hsla(var(--igc-gray-200), var(--igc-gray-a)));color:var(--selected-color, var(--igc-gray-200-contrast))}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:var(--active-selected-background, hsla(var(--igc-gray-300), var(--igc-gray-a)));color:var(--active-selected-color, var(--igc-gray-300-contrast))}[part~=select]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-gray-800), var(--igc-gray-a)));box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-gray-800), var(--igc-gray-a)))}`;\n"]}

package/components/tree/themes/light/tree-item.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tree/themes/light/tree-item.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part~=active]{background:var(--active-background, hsla(var(--igc-surface-500), var(--igc-surface-a)));color:var(--active-color, hsla(var(--igc-primary-500), var(--igc-primary-a)))}[part~=active]:hover{color:var(--active-color, hsla(var(--igc-primary-500), var(--igc-primary-a)))}[part~=selected]{background:var(--selected-background, hsla(var(--igc-primary-500), var(--igc-primary-a)));color:var(--selected-color, var(--igc-primary-600-contrast))}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:var(--active-selected-background, hsla(var(--igc-primary-400), var(--igc-primary-a)));color:var(--active-selected-color, var(--igc-primary-400-contrast))}[part~=select]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-300), var(--igc-primary-a)));box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-300), var(--igc-primary-a)))}`;
+//# sourceMappingURL=tree-item.indigo.css.js.map

package/components/tree/themes/light/tree-item.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kgCAAkgC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=active]{background:var(--active-background, hsla(var(--igc-surface-500), var(--igc-surface-a)));color:var(--active-color, hsla(var(--igc-primary-500), var(--igc-primary-a)))}[part~=active]:hover{color:var(--active-color, hsla(var(--igc-primary-500), var(--igc-primary-a)))}[part~=selected]{background:var(--selected-background, hsla(var(--igc-primary-500), var(--igc-primary-a)));color:var(--selected-color, var(--igc-primary-600-contrast))}[part~=selected][part~=focused][part~=active],[part~=selected][part~=focused],[part~=selected][part~=active]{background:var(--active-selected-background, hsla(var(--igc-primary-400), var(--igc-primary-a)));color:var(--active-selected-color, var(--igc-primary-400-contrast))}[part~=select]{-webkit-margin-end:.5rem;margin-inline-end:.5rem}[part~=focused]{-webkit-box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-300), var(--igc-primary-a)));box-shadow:inset 0 0 0 1px var(--focused-border-color, hsla(var(--igc-primary-300), var(--igc-primary-a)))}`;\n"]}

package/components/tree/themes/light/tree.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tree/themes/light/tree.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:block;height:100%;overflow:auto;font-family:var(--igc-font-family)}`;
+//# sourceMappingURL=tree.base.css.js.map

package/components/tree/themes/light/tree.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,izBAAizB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:block;height:100%;overflow:auto;font-family:var(--igc-font-family)}`;\n"]}

package/components/tree/tree-item.d.ts

@@ -0,0 +1,116 @@
+import { LitElement } from 'lit';
+import type IgcTreeComponent from './tree.js';
+/**
+ * The tree-item component represents a child item of the tree component or another tree item.
+ *
+ * @element igc-tree-item
+ *
+ * @slot - Renders nested tree-item component.
+ * @slot label - Renders the tree item container.
+ * @slot indicator - Renders the expand indicator container.
+ * @slot loading - Renders the tree item loading indicator container.
+ * @slot indentation - Renders the container (by default the space) before the tree item.
+ *
+ * @csspart wrapper - The wrapper for the tree item.
+ * @csspart selected - Indicates selected state. Applies to `wrapper`.
+ * @csspart focused - Indicates focused state. Applies to `wrapper`.
+ * @csspart active - Indicates an active state. Applies to `wrapper`.
+ * @csspart indicator - The expand indicator of the tree item.
+ * @csspart label - The tree item content.
+ * @csspart text - The tree item displayed text.
+ * @csspart select - The checkbox of the tree item when selection is enabled.
+ */
+export default class IgcTreeItemComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-tree-item";
+    /** @private */
+    static styles: import("lit").CSSResult;
+    private tabbableEl?;
+    private focusedProgrammatically;
+    /** A reference to the tree the item is a part of. */
+    tree?: IgcTreeComponent;
+    /** The parent item of the current tree item (if any) */
+    parent: IgcTreeItemComponent | null;
+    /** @private */
+    init: boolean;
+    private contentList;
+    /** @private */
+    wrapper: HTMLElement;
+    private isFocused;
+    /** @private */
+    hasChildren: boolean;
+    /** The depth of the item, relative to the root. */
+    level: number;
+    /** @private */
+    indeterminate: boolean;
+    /** The tree item label. */
+    label: string;
+    /** The tree item expansion state. */
+    expanded: boolean;
+    /** Marks the item as the tree's active item. */
+    active: boolean;
+    /** Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions. */
+    disabled: boolean;
+    /** The tree item selection state. */
+    selected: boolean;
+    /** To be used for load-on-demand scenarios in order to specify whether the item is loading data. */
+    loading: boolean;
+    /**
+     * The value entry that the tree item is visualizing. Required for searching through items.
+     * @type any
+     */
+    value: any;
+    protected bothChange(): void;
+    protected expandedChange(oldValue: boolean): void;
+    protected activeChange(): void;
+    protected disabledChange(): void;
+    protected selectedChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get selectionService();
+    private get navService();
+    private get parts();
+    private get directChildren();
+    private get allChildren();
+    /** The full path to the tree item, starting from the top-most ancestor. */
+    get path(): IgcTreeItemComponent[];
+    private pointerDown;
+    private expandIndicatorClick;
+    private selectorClick;
+    private onFocus;
+    private onBlur;
+    private onFocusIn;
+    private onFocusOut;
+    private labelChange;
+    private handleChange;
+    /**
+     * Returns a collection of child items.
+     * If the parameter value is true returns all tree item's direct children,
+     * otherwise - only the direct children.
+     */
+    getChildren(options?: {
+        flatten: boolean;
+    }): IgcTreeItemComponent[];
+    /**
+     * @private
+     * Expands the tree item.
+     */
+    expandWithEvent(): void;
+    /**
+     * @private
+     * Collapses the tree item.
+     */
+    collapseWithEvent(): void;
+    /** Toggles tree item expansion state. */
+    toggle(): void;
+    /** Expands the tree item. */
+    expand(): void;
+    /** Collapses the tree item. */
+    collapse(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tree-item': IgcTreeItemComponent;
+    }
+}

package/components/tree/tree-item.js

@@ -0,0 +1,447 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { html, LitElement } from 'lit';
+import { partNameMap } from '../common/util.js';
+import { styles } from './themes/light/tree-item.base.css.js';
+import { styles as bootstrap } from './themes/light/tree-item.bootstrap.css.js';
+import { styles as fluent } from './themes/light/tree-item.fluent.css.js';
+import { styles as indigo } from './themes/light/tree-item.indigo.css.js';
+import { watch } from '../common/decorators/watch.js';
+import { themes } from '../../theming/theming-decorator.js';
+const sizeMultiplier = {
+    small: 1 / 2,
+    medium: 2 / 3,
+    large: 1,
+};
+let IgcTreeItemComponent = class IgcTreeItemComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.focusedProgrammatically = false;
+        this.parent = null;
+        this.init = false;
+        this.isFocused = false;
+        this.hasChildren = false;
+        this.level = 0;
+        this.indeterminate = false;
+        this.label = '';
+        this.expanded = false;
+        this.active = false;
+        this.disabled = false;
+        this.selected = false;
+        this.loading = false;
+        this.value = undefined;
+    }
+    bothChange() {
+        if (this.hasChildren) {
+            this.setAttribute('aria-expanded', this.expanded.toString());
+        }
+        else {
+            this.removeAttribute('aria-expanded');
+        }
+    }
+    expandedChange(oldValue) {
+        var _a;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.update_visible_cache(this, this.expanded);
+        if (!oldValue) {
+            return;
+        }
+        Promise.resolve().then(() => {
+            var _a, _b, _c, _d;
+            if (((_a = this.navService) === null || _a === void 0 ? void 0 : _a.focusedItem) !== this && !this.isFocused) {
+                (_d = (_c = (_b = this.navService) === null || _b === void 0 ? void 0 : _b.focusedItem) === null || _c === void 0 ? void 0 : _c.wrapper) === null || _d === void 0 ? void 0 : _d.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        });
+    }
+    activeChange() {
+        var _a, _b;
+        if ((this.active && ((_a = this.navService) === null || _a === void 0 ? void 0 : _a.activeItem) === this) || !this.active) {
+            return;
+        }
+        if (this.navService) {
+            this.navService.setActiveItem(this, false);
+        }
+        (_b = this.tree) === null || _b === void 0 ? void 0 : _b.expandToItem(this);
+        Promise.resolve().then(() => {
+            var _a;
+            (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        });
+    }
+    disabledChange() {
+        var _a;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.update_disabled_cache(this);
+    }
+    selectedChange() {
+        var _a, _b, _c, _d;
+        if (this.selected && !((_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.isItemSelected(this))) {
+            (_b = this.selectionService) === null || _b === void 0 ? void 0 : _b.selectItemsWithNoEvent([this]);
+        }
+        if (!this.selected && ((_c = this.selectionService) === null || _c === void 0 ? void 0 : _c.isItemSelected(this))) {
+            (_d = this.selectionService) === null || _d === void 0 ? void 0 : _d.deselectItemsWithNoEvent([this]);
+        }
+    }
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.tree = this.closest('igc-tree');
+        this.parent =
+            ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'igc-tree-item'
+                ? this.parentElement
+                : null;
+        this.level = this.parent ? this.parent.level + 1 : 0;
+        this.setAttribute('role', 'treeitem');
+        this.addEventListener('blur', this.onBlur);
+        this.addEventListener('focus', this.onFocus);
+        this.addEventListener('pointerdown', this.pointerDown);
+        this.activeChange();
+        if (this.init) {
+            this.selectedChange();
+        }
+        else {
+            (_b = this.selectionService) === null || _b === void 0 ? void 0 : _b.retriggerItemState(this);
+        }
+        this.init = false;
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.ensureStateOnItemDelete(this);
+        (_b = this.navService) === null || _b === void 0 ? void 0 : _b.delete_item(this);
+    }
+    get selectionService() {
+        var _a;
+        return (_a = this.tree) === null || _a === void 0 ? void 0 : _a.selectionService;
+    }
+    get navService() {
+        var _a;
+        return (_a = this.tree) === null || _a === void 0 ? void 0 : _a.navService;
+    }
+    get parts() {
+        return {
+            selected: this.selected,
+            focused: this.isFocused,
+            active: this.active,
+        };
+    }
+    get directChildren() {
+        return Array.from(this.children).filter((x) => x.tagName.toLowerCase() === 'igc-tree-item');
+    }
+    get allChildren() {
+        return Array.from(this.querySelectorAll(`igc-tree-item`));
+    }
+    get path() {
+        var _a;
+        return ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.path) ? [...this.parent.path, this] : [this];
+    }
+    pointerDown(event) {
+        var _a;
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.tabIndex = 0;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.setFocusedAndActiveItem(this, true, false);
+    }
+    expandIndicatorClick() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.expanded) {
+            this.collapseWithEvent();
+        }
+        else {
+            this.expandWithEvent();
+        }
+    }
+    selectorClick(event) {
+        var _a, _b, _c;
+        event.preventDefault();
+        if (event.shiftKey) {
+            (_a = this.selectionService) === null || _a === void 0 ? void 0 : _a.selectMultipleItems(this);
+            return;
+        }
+        if (this.selected) {
+            (_b = this.selectionService) === null || _b === void 0 ? void 0 : _b.deselectItem(this);
+        }
+        else {
+            (_c = this.selectionService) === null || _c === void 0 ? void 0 : _c.selectItem(this);
+        }
+    }
+    onFocus() {
+        var _a, _b, _c;
+        if (this.disabled) {
+            return;
+        }
+        if (((_a = this.navService) === null || _a === void 0 ? void 0 : _a.focusedItem) !== this) {
+            (_b = this.navService) === null || _b === void 0 ? void 0 : _b.focusItem(this, false);
+            (_c = this.wrapper) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+        if (this.tabbableEl && this.tabbableEl.length) {
+            this.tabbableEl.forEach((element) => {
+                element.tabIndex = 0;
+            });
+            this.focusedProgrammatically = true;
+            this.tabbableEl[0].focus();
+            return;
+        }
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+    }
+    onFocusIn(ev) {
+        var _a;
+        ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+        if (!this.disabled) {
+            if (!this.focusedProgrammatically) {
+                (_a = this.tabbableEl) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+                    element.tabIndex = 0;
+                });
+            }
+            this.removeAttribute('tabIndex');
+            this.isFocused = true;
+            this.focusedProgrammatically = false;
+        }
+    }
+    onFocusOut(ev) {
+        var _a, _b;
+        ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+        this.isFocused = false;
+        (_a = this.tabbableEl) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+            element.tabIndex = -1;
+        });
+        if (((_b = this.navService) === null || _b === void 0 ? void 0 : _b.focusedItem) === this) {
+            this.setAttribute('tabindex', '0');
+        }
+    }
+    labelChange() {
+        const firstElement = this.contentList[0];
+        const tabbableSelector = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+        this.tabbableEl = [
+            ...firstElement.querySelectorAll(tabbableSelector),
+        ];
+        if (firstElement.matches(tabbableSelector)) {
+            this.tabbableEl.splice(0, 0, firstElement);
+        }
+        if (this.tabbableEl && this.tabbableEl.length) {
+            this.setAttribute('role', 'none');
+            this.tabbableEl[0].setAttribute('role', 'treeitem');
+            this.tabbableEl.forEach((element) => {
+                element.tabIndex = -1;
+            });
+        }
+        else {
+            this.setAttribute('role', 'treeitem');
+        }
+    }
+    handleChange() {
+        var _a;
+        this.hasChildren = !!this.directChildren.length;
+        (_a = this.navService) === null || _a === void 0 ? void 0 : _a.update_visible_cache(this, this.expanded, false);
+    }
+    getChildren(options = { flatten: false }) {
+        if (options.flatten) {
+            return this.allChildren;
+        }
+        else {
+            return this.directChildren;
+        }
+    }
+    expandWithEvent() {
+        var _a, _b, _c;
+        if (this.expanded) {
+            return;
+        }
+        const args = {
+            detail: this,
+            cancelable: true,
+        };
+        const allowed = (_a = this.tree) === null || _a === void 0 ? void 0 : _a.emitEvent('igcItemExpanding', args);
+        if (!allowed) {
+            return;
+        }
+        if ((_b = this.tree) === null || _b === void 0 ? void 0 : _b.singleBranchExpand) {
+            const pathSet = new Set(this.path.splice(0, this.path.length - 1));
+            this.tree.items.forEach((item) => {
+                if (!pathSet.has(item)) {
+                    item.collapseWithEvent();
+                }
+            });
+        }
+        this.expanded = true;
+        (_c = this.tree) === null || _c === void 0 ? void 0 : _c.emitEvent('igcItemExpanded', { detail: this });
+    }
+    collapseWithEvent() {
+        var _a, _b;
+        if (!this.expanded) {
+            return;
+        }
+        const args = {
+            detail: this,
+            cancelable: true,
+        };
+        const allowed = (_a = this.tree) === null || _a === void 0 ? void 0 : _a.emitEvent('igcItemCollapsing', args);
+        if (!allowed) {
+            return;
+        }
+        this.expanded = false;
+        (_b = this.tree) === null || _b === void 0 ? void 0 : _b.emitEvent('igcItemCollapsed', { detail: this });
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    expand() {
+        this.expanded = true;
+    }
+    collapse() {
+        this.expanded = false;
+    }
+    render() {
+        var _a, _b, _c;
+        const size = this.level * (this.tree ? sizeMultiplier[this.tree.size] : 1);
+        return html `
+      <div
+        id="wrapper"
+        part="wrapper ${(_a = this.tree) === null || _a === void 0 ? void 0 : _a.size} ${partNameMap(this.parts)}"
+      >
+        <div
+          style="width: calc(${size} * var(--igc-tree-indentation-size))"
+          part="indentation"
+          aria-hidden="true"
+        >
+          <slot name="indentation"></slot>
+        </div>
+        <div part="indicator" aria-hidden="true">
+          ${this.loading
+            ? html `
+                <slot name="loading">
+                  <igc-circular-progress indeterminate></igc-circular-progress>
+                </slot>
+              `
+            : html `
+                <slot name="indicator" @click=${this.expandIndicatorClick}>
+                  ${this.hasChildren
+                ? html `
+                        <igc-icon
+                          name=${this.expanded
+                    ? 'keyboard_arrow_down'
+                    : ((_b = this.tree) === null || _b === void 0 ? void 0 : _b.dir) === 'rtl'
+                        ? 'navigate_before'
+                        : 'keyboard_arrow_right'}
+                          collection="internal"
+                        >
+                        </igc-icon>
+                      `
+                : ''}
+                </slot>
+              `}
+        </div>
+        ${((_c = this.tree) === null || _c === void 0 ? void 0 : _c.selection) !== 'none'
+            ? html `
+              <div part="select" aria-hidden="true">
+                <igc-checkbox
+                  @click=${this.selectorClick}
+                  .checked=${this.selected}
+                  .indeterminate=${this.indeterminate}
+                  .disabled=${this.disabled}
+                  tabindex="-1"
+                >
+                </igc-checkbox>
+              </div>
+            `
+            : ''}
+        <div part="label">
+          <slot
+            name="label"
+            @slotchange=${this.labelChange}
+            @focusin=${this.onFocusIn}
+            @focusout=${this.onFocusOut}
+          >
+            <span part="text">${this.label}</span>
+          </slot>
+        </div>
+      </div>
+      <div role="group">
+        <slot @slotchange=${this.handleChange} ?hidden=${!this.expanded}></slot>
+      </div>
+    `;
+    }
+};
+IgcTreeItemComponent.tagName = 'igc-tree-item';
+IgcTreeItemComponent.styles = styles;
+__decorate([
+    queryAssignedElements({ slot: 'label', flatten: true })
+], IgcTreeItemComponent.prototype, "contentList", void 0);
+__decorate([
+    query('#wrapper')
+], IgcTreeItemComponent.prototype, "wrapper", void 0);
+__decorate([
+    state()
+], IgcTreeItemComponent.prototype, "isFocused", void 0);
+__decorate([
+    state()
+], IgcTreeItemComponent.prototype, "hasChildren", void 0);
+__decorate([
+    state()
+], IgcTreeItemComponent.prototype, "level", void 0);
+__decorate([
+    state()
+], IgcTreeItemComponent.prototype, "indeterminate", void 0);
+__decorate([
+    property()
+], IgcTreeItemComponent.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcTreeItemComponent.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: true })
+], IgcTreeItemComponent.prototype, "value", void 0);
+__decorate([
+    watch('expanded', { waitUntilFirstUpdate: true }),
+    watch('hasChildren', { waitUntilFirstUpdate: true })
+], IgcTreeItemComponent.prototype, "bothChange", null);
+__decorate([
+    watch('expanded')
+], IgcTreeItemComponent.prototype, "expandedChange", null);
+__decorate([
+    watch('active', { waitUntilFirstUpdate: true })
+], IgcTreeItemComponent.prototype, "activeChange", null);
+__decorate([
+    watch('disabled')
+], IgcTreeItemComponent.prototype, "disabledChange", null);
+__decorate([
+    watch('selected', { waitUntilFirstUpdate: true })
+], IgcTreeItemComponent.prototype, "selectedChange", null);
+IgcTreeItemComponent = __decorate([
+    themes({ bootstrap, fluent, indigo })
+], IgcTreeItemComponent);
+export default IgcTreeItemComponent;
+//# sourceMappingURL=tree-item.js.map